:root{
  --brand:#16a34a; --brand-700:#15803d;
  --ink:#0f172a; --muted:#667085;
  --bg:#0b1217; --card:#0f1a21; --stroke:#1f2a33;
  --success:#22c55e; --warning:#f59e0b; --danger:#ef4444; --white:#fff;
  --container:1200px;
  --space-1:6px; --space-2:10px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px;
  --radius:6px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{ scroll-behavior: smooth; } /* smooth anchor scroll */
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--white);
}
a{color:var(--white);text-decoration:none}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-4);padding-block:0}
.section{padding-block:var(--space-5)}
.stack>*{margin:0 0 var(--space-3) 0}
.stack>*:last-child{margin-bottom:0}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(10,15,20,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--stroke);width:100%}
.header-inner{display:flex;align-items:center;gap:var(--space-3);padding-block:var(--space-2)}
.site-header > .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-4)}
.logo{display:flex;align-items:center;gap:var(--space-2);font-weight:800;letter-spacing:.2px}
.logo .star{inline-size:22px;block-size:22px;background:conic-gradient(from 0deg,var(--brand),#21dd74);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);border-radius:var(--radius)}
.site-header a.link{color:#cbd5e1;padding:var(--space-2);border-radius:var(--radius)}
.site-header a.link:hover{background:#0d1920;color:#e2e8f0}
.header-inner .right{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}

/* Buttons & inputs */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);background: #c0ffc0;color: #0f1a21;border:none;border-radius:var(--radius);padding:10px 14px;font-weight: 400;cursor:pointer;}
.btn:hover{background: #dbffdb;color: #000000;}
.btn.ghost{background:transparent;border:1px solid var(--stroke);color:#cbd5e1;box-shadow:none}
.input, textarea, select, input[type=file]{width:100%;padding:12px 14px;border:1px solid var(--stroke);border-radius:var(--radius);background:#0b141a;color:#e2e8f0}

/* Bootstrap form-control override */
.form-control, .form-select {
  background: #0b141a !important;
  color: #e2e8f0 !important;
  border: 1px solid var(--stroke) !important;
}

.form-control:focus, .form-select:focus {
  background: #0b141a !important;
  color: #e2e8f0 !important;
  border-color: #c0ffc0 !important;
  box-shadow: 0 0 0 0.2rem rgba(192, 255, 192, 0.25) !important;
}

/* Placeholder styling - kaikille input-tyypeille */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder,
.form-control::-moz-placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
.form-control:-ms-input-placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Checkbox styling - mintunvihreä */
.form-check-input {
  background-color: #0b141a !important;
  border: 1px solid var(--stroke) !important;
}

.form-check-input:checked {
  background-color: #c0ffc0 !important;
  border-color: #c0ffc0 !important;
}

.form-check-input:focus {
  border-color: #c0ffc0 !important;
  box-shadow: 0 0 0 0.2rem rgba(192, 255, 192, 0.25) !important;
}

.form-check-input:checked:focus {
  background-color: #c0ffc0 !important;
  border-color: #c0ffc0 !important;
}

/* Custom file input styling */
input[type="file"]::-webkit-file-upload-button {
  background: #c0ffc0;
  color: #0f1a21;
  border: none;
  border-radius: var(--radius);
  padding: 8px 12px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 12px;
  transition: background 0.2s ease;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background: #dbffdb;
}

input[type="file"]::file-selector-button {
  background: #c0ffc0;
  color: #0f1a21;
  border: none;
  border-radius: var(--radius);
  padding: 8px 12px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 12px;
  transition: background 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
  background: #dbffdb;
}

/* Firefox */
input[type="file"]::-moz-file-upload-button {
  background: #c0ffc0;
  color: #0f1a21;
  border: none;
  border-radius: var(--radius);
  padding: 8px 12px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 12px;
  transition: background 0.2s ease;
}

input[type="file"]::-moz-file-upload-button:hover {
  background: #dbffdb;
}

label{display:block;margin:var(--space-2) 0 6px;color:#cbd5e1;font-size:.95rem}

/* Content */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-3)}
.card{background:linear-gradient(180deg,#0f1a21, #0c1318);border:1px solid var(--stroke);border-radius:var(--radius);padding:var(--space-3)}
.hero{display:grid;grid-template-columns: 1.1fr .9fr;gap:var(--space-3);align-items:center;margin:var(--space-3) 0}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} }
h1{font-size:2rem;margin:.3rem 0 .2rem;color: #c0ffc0;}
h2{font-size:1.2rem;margin:var(--space-4) 0 var(--space-2);color:#dbeafe}
.small{color:#94a3b8;font-size:.9rem}
.badge{background:#0b1f16;color:#78e2a0;border:1px solid #173d2a;padding:4px 10px;border-radius:999px;font-size:.75rem}
.list{display:flex;flex-direction:column;gap:var(--space-3)}
.item{background:linear-gradient(180deg,#0f1a21,#0b1217);border:1px solid var(--stroke);border-radius:var(--radius);padding:var(--space-3)}
.rating{color:#fbbf24}
.figure{border:1px dashed #24404f;border-radius:var(--radius);padding:var(--space-3);background:#0b141a}
.form-text{color: #b0bea5;}

/* Footer aligned */
.footer-wrap{border-top:1px solid var(--stroke);background:rgba(10,15,20,.7);backdrop-filter:blur(8px);width:100%}
.footer{color:#8aa1b5;font-size:.9rem;padding-block:var(--space-4)}

.company-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.kicker{color:#84e1ae;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.75rem}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--stroke);text-align:left}
.alert{padding:10px 12px;border-radius:var(--radius);border:1px solid var(--stroke);background:#0b141a}
.alert.success{border-color:#1f3b2a}
img.thumb{max-width:140px;border-radius:var(--radius);border:1px solid var(--stroke); cursor: zoom-in;}
.actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
hr.sep{border:none;border-top:1px solid var(--stroke);margin:var(--space-4) 0}
.filters{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:end}
.filters .field{min-width:160px;flex:1}

/* Anchor offset so sticky header doesn't cover the form */
#review-form{ scroll-margin-top: 96px; }

/* Import dialog styles */
@import url("styles_dialog.css");

/* Custom */
strong {
    color: #c0ffc0;
}

/* Company cards with images */
.company-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.company-card:hover {
    transform: translateY(-2px);
    border-color: #c0ffc0;
}

.company-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    background: #0b141a;
}

.company-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rating-stars {
    color: #fbbf24;
    font-size: 1.1rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rating-stars .small {
    color: #94a3b8;
    font-size: 0.85rem;
}

.text-muted {
    color: #64748b;
}