*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:           #f7f8fb;
  --surface:      #ffffff;
  --surface-2:    #f1f3f7;
  --surface-3:    #e8ebf2;
  --border:       #e1e5ec;
  --border-2:     #d0d6e0;
  --text:         #0f1729;
  --text-2:       #4b5468;
  --text-3:       #8b93a6;
  --text-4:       #b8bfcc;
  --primary:      #4f7cff;
  --primary-bg:   #ebf0ff;
  --primary-hover:#3a66e6;
  --success:      #10b981;
  --success-bg:   #ecfdf5;
  --warning:      #f59e0b;
  --warning-bg:   #fffbeb;
  --danger:       #ef4444;
  --danger-bg:    #fef2f2;
  --purple:       #8b5cf6;
  --purple-bg:    #f5f3ff;
  --teal:         #14b8a6;
  --teal-bg:      #f0fdfa;
  --orange:       #f97316;
  --orange-bg:    #fff7ed;
  --font:         'Inter', -apple-system, sans-serif;
  --mono:         'JetBrains Mono', monospace;
  --shadow-sm:    0 1px 2px rgba(15,23,41,0.04);
  --shadow:       0 1px 3px rgba(15,23,41,0.06), 0 1px 2px rgba(15,23,41,0.04);
  --shadow-lg:    0 4px 12px rgba(15,23,41,0.08), 0 2px 4px rgba(15,23,41,0.04);
  --shadow-xl:    0 20px 40px rgba(15,23,41,0.12);
  --r:    10px;
  --r-sm: 6px;
  --r-lg: 14px;
}
[data-theme="dark"]{
  --bg:           #0d0f14;
  --surface:      #161820;
  --surface-2:    #1e2029;
  --surface-3:    #252830;
  --border:       #2a2d38;
  --border-2:     #363a48;
  --text:         #e8eaf0;
  --text-2:       #8b90a0;
  --text-3:       #555b6e;
  --text-4:       #383d4d;
  --primary:      #6690ff;
  --primary-bg:   rgba(102,144,255,0.12);
  --primary-hover:#4f7cff;
  --success:      #34d399;
  --success-bg:   rgba(52,211,153,0.1);
  --warning:      #fbbf24;
  --warning-bg:   rgba(251,191,36,0.1);
  --danger:       #f87171;
  --danger-bg:    rgba(248,113,113,0.1);
  --purple:       #a78bfa;
  --purple-bg:    rgba(167,139,250,0.1);
  --teal:         #2dd4bf;
  --teal-bg:      rgba(45,212,191,0.1);
  --orange:       #fb923c;
  --orange-bg:    rgba(251,146,60,0.1);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.2);
  --shadow:       0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg:    0 4px 12px rgba(0,0,0,0.4);
  --shadow-xl:    0 20px 40px rgba(0,0,0,0.5);
}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text-4)}

/* ───────────────────────────────────
   AUTH SCREEN
─────────────────────────────────── */
/* ═══ KIRJAUTUMIS- JA ESITTELYSIVU ═══
   Kaksipalstainen: vasemmalla mitä järjestelmä tekee, oikealla sisäänkäynti.
   Kapealla näytöllä esittelypuoli menee lomakkeen alle, koska kirjautuminen on
   se mitä palaava käyttäjä tulee tekemään. */
/* ── Kirjautumisnäkymä ───────────────────────────────────────────────
   Kaksi palstaa: vasemmalla mitä järjestelmä tekee, oikealla sisäänkäynti.
   Kapealla näytöllä kirjautuminen nousee ensimmäiseksi, koska palaava
   käyttäjä on yleisin kävijä.

   HUOM: #auth-screen on grid. Älä näytä sitä asettamalla inline-tyyliksi
   display:flex — inline-tyyli voittaa tämän säännön, grid-template-columns
   jää huomiotta ja palstat romahtavat sisällön kokoisiksi, jolloin lomake
   ei ole keskellä palstaansa. Näyttäminen tehdään style.display = ''. */
#auth-screen{position:relative;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--surface);overflow:hidden}

/* Vasen palsta: syvä musteen värinen pinta. Ei gradienttiotsikkoa eikä
   kelluvia värilaikkuja — hienovarainen mittaristoa muistuttava ruudukko
   kantaa pinnan. Rauhallisuus on tässä se mikä kertoo luotettavuudesta. */
.auth-pitch{position:relative;padding:60px 58px;display:flex;flex-direction:column;background:#0a0e18;color:#eef1f7;overflow:hidden}
.auth-pitch::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to right,rgba(255,255,255,.028) 0 1px,transparent 1px 64px),repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 64px)}
.auth-pitch::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 85% at 10% -5%,rgba(96,132,220,.15) 0%,transparent 58%)}
.auth-pitch>*{position:relative;z-index:1}

.auth-brand{display:flex;align-items:center;gap:13px}
.auth-brand-icon{width:42px;height:42px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.auth-brand-text{font-size:19px;font-weight:650;letter-spacing:-.4px;line-height:1.2}
.auth-brand-sub{font-size:10.5px;color:#7f8ba6;font-family:var(--mono);letter-spacing:.4px;margin-top:2px}

.auth-pitch-body{margin:auto 0;padding:46px 0}
.auth-headline{font-size:34px;line-height:1.18;font-weight:600;letter-spacing:-1px;margin-bottom:18px;max-width:17ch;color:#f6f8fc}
.auth-lede{font-size:14.5px;line-height:1.68;color:#9aa5bd;max-width:44ch;margin-bottom:36px}

/* Tiedot riveinä, ei kortteina: pieni mono-otsake ja hiusviiva erottimena.
   Sama kieli kuin laitetiedoissa muualla sovelluksessa. */
.auth-specs{border-top:1px solid rgba(255,255,255,.10)}
.auth-spec{display:grid;grid-template-columns:104px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.10);align-items:baseline}
.auth-spec-key{font-family:var(--mono);font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:#6f7c99}
.auth-spec-val{font-size:13.5px;line-height:1.55;color:#c3cbdd;max-width:52ch}


/* Oikea palsta: sisäänkäynti. Kortilla ei ole reunaa eikä varjoa — tyhjä
   tila ja typografia riittävät ja kehykset vain hälisisivät. */
.auth-panel{display:flex;align-items:center;justify-content:center;padding:48px 40px;background:var(--surface);overflow-y:auto}
.auth-card{width:100%;max-width:392px}
.auth-tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:4px;margin-bottom:26px}
.auth-tab{flex:1;padding:9px 12px;border:none;background:transparent;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--text-2);cursor:pointer;font-family:inherit;transition:background .12s,color .12s}
.auth-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(15,23,42,.09)}
.auth-heading{font-size:26px;font-weight:650;letter-spacing:-.7px;margin-bottom:7px;color:var(--text)}
.auth-sub{font-size:13.5px;color:var(--text-2);margin-bottom:28px;line-height:1.55}
.auth-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-hint{font-size:11.5px;color:var(--text-3);margin-top:5px;line-height:1.5}
.auth-legal{font-size:11.5px;color:var(--text-3);line-height:1.6;margin-top:14px}
.auth-legal a{color:var(--text-2)}
.auth-success{text-align:center;padding:14px 0}
.auth-success-mark{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;background:var(--success-bg,#dcfce7);color:var(--success,#16a34a);display:flex;align-items:center;justify-content:center}

/* Kentät ja nappi vain kirjautumiskortissa — .form-input on sovelluksen
   yhteinen luokka, eikä sen mittoja saa muuttaa muualta käsin. */
.auth-card .form-group{margin-bottom:16px}
.auth-card .form-label{font-size:12.5px;font-weight:600;color:var(--text-2);letter-spacing:.1px}
.auth-card .form-input{height:46px;padding:0 14px;font-size:14.5px;border-radius:10px;border:1px solid var(--border-2);transition:border-color .14s ease,box-shadow .14s ease}
.auth-card .form-input::placeholder{color:var(--text-4)}
.auth-card .form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,124,255,.14)}
.auth-forgot{display:block;text-align:right;margin:-3px 0 20px;font-size:12.5px;font-weight:500;color:var(--text-2);text-decoration:none}
.auth-forgot:hover{color:var(--primary);text-decoration:underline}
.auth-submit{height:48px;font-size:14.5px;font-weight:600;border-radius:10px;letter-spacing:.1px;box-shadow:0 1px 2px rgba(15,23,41,.10)}
.auth-submit:active{transform:translateY(1px)}

/* ── Näkymän valinta ─────────────────────────────────────────────────
   Pääkäyttäjä näkee sekä kaluston että palkanlaskennan. Ne ovat eri työtä eri
   hetkinä, joten valinta rajaa valikon siihen mitä on tekemässä. Rajaus on
   työpöydän siivous, EI tietoturvaraja: oikeudet säilyvät ennallaan ja
   rajapinta vastaa kuten ennenkin. Tietoturvaraja on rooli. */
#nakyma-valinta{position:fixed;inset:0;z-index:2200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(8,11,19,.72);backdrop-filter:blur(6px)}
#nakyma-valinta.nakyy{display:flex}
.nv-kortti{width:100%;max-width:660px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:34px 32px;box-shadow:var(--shadow-xl)}
.nv-otsikko{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--text);margin-bottom:5px}
.nv-sub{font-size:13.5px;color:var(--text-2);margin-bottom:24px;line-height:1.55}
.nv-rivi{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.nv-nappi{text-align:left;background:var(--surface-2);border:1.5px solid var(--border);border-radius:12px;padding:18px 16px;cursor:pointer;font-family:inherit;transition:border-color .14s,background .14s,transform .14s}
.nv-nappi:hover{border-color:var(--primary);background:var(--surface);transform:translateY(-1px)}
.nv-nappi.valittu{border-color:var(--primary);background:var(--primary-bg)}
.nv-ikoni{color:var(--primary);margin-bottom:10px;display:block}
.nv-nimi{font-size:15px;font-weight:650;color:var(--text);margin-bottom:3px}
.nv-kuvaus{font-size:12.5px;color:var(--text-2);line-height:1.5}
.nv-alahuomio{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-3);line-height:1.6}
.nakyma-nappi{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;font-family:inherit;white-space:nowrap}
.nakyma-nappi:hover{border-color:var(--primary);color:var(--text)}
@media(max-width:700px){.nv-kortti{padding:26px 20px}.nakyma-nappi span{display:none}}

.auth-demo{margin-top:22px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);font-size:11.5px;color:var(--text-2);line-height:1.75}
.auth-demo-title{font-weight:700;color:var(--text);margin-bottom:6px;font-size:11px;letter-spacing:0.4px;text-transform:uppercase;font-family:var(--mono)}
.auth-foot{margin-top:30px;padding-top:17px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;font-size:11.5px;color:var(--text-3)}
.auth-foot a{color:var(--text-3);text-decoration:none}
.auth-foot a:hover{color:var(--text-2);text-decoration:underline}

@media(max-width:1080px){
  #auth-screen{grid-template-columns:1fr;min-height:100vh}
  .auth-pitch{order:2;padding:44px 28px}
  .auth-panel{order:1;padding:44px 24px 34px}
  .auth-headline{font-size:28px}
  .auth-pitch-body{padding:32px 0}
}
@media(max-width:560px){
  .auth-pitch{padding:34px 20px}
  .auth-panel{padding:34px 20px 26px}
  .auth-headline{font-size:25px;max-width:none}
  .auth-lede{margin-bottom:28px}
  .auth-spec{grid-template-columns:1fr;gap:3px;padding:13px 0}
  .auth-form-row{grid-template-columns:1fr}
}
.form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.form-label{font-size:12.5px;color:var(--text-2);font-weight:600;letter-spacing:0.1px}
.form-input,.form-select{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:11px 14px;color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:all 0.15s;width:100%}
.form-input:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.form-input::placeholder{color:var(--text-4)}
.svc-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:900;display:flex;align-items:center;justify-content:center;padding:20px}
/* Vahvistus- ja tekstisyöttömodaali avautuvat aina muiden modaalien PÄÄLLE —
   ne kysytään usein toisen modaalin sisältä (esim. vikailmoituksen poisto). */
#confirm-modal,#text-prompt-modal{z-index:1200}
.svc-modal{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.svc-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border)}
/* Yleismodaalin otsikko (openModalHtml). Luokkaa käytettiin kuudessa paikassa
   ilman että sitä oli koskaan määritelty, joten otsikko oli kiinni ikkunan
   reunassa. Sisältö tuo omat display-määreensä, joten tässä vain tila. */
.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--border)}
.modal-title{font-size:18px;font-weight:700;letter-spacing:-.2px}
.modal-close{background:transparent;border:none;font-size:20px;line-height:1;color:var(--text-3);cursor:pointer;padding:4px 8px;border-radius:var(--r-sm)}
.modal-close:hover{background:var(--surface-3);color:var(--text)}
.modal-body{padding:18px 24px;overflow:auto}
.modal-footer{padding:14px 24px 18px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ── Luokat joita käytettiin ilman määrittelyä ──────────────────────────
   Nämä olivat lähdekoodissa mutta eivät tyylitiedostossa, joten selain
   renderöi ne oletuksillaan: napit ilman taustaa, otsikot ilman kokoa,
   lomakevihjeet leipätekstin kokoisina. Regressiotesti (test:css-luokat)
   vartioi ettei uusia pääse syntymään. */
.btn-secondary{background:var(--surface-3);color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{background:var(--border);border-color:var(--border-2,var(--border))}

.page-title{font-size:27px;font-weight:700;letter-spacing:-.5px;line-height:1.15;margin:0}
.page-sub{font-size:13.5px;color:var(--text-2);margin:6px 0 0;line-height:1.5;max-width:70ch}

.form-hint{font-size:11.5px;color:var(--text-3);line-height:1.5;margin-top:5px}

.loading-state{padding:38px 20px;text-align:center;color:var(--text-3);font-size:13.5px}

.sp-warn{background:var(--warning-bg);color:var(--warning)}
/* Korostus on aina päällä: HUOMIO (punainen) voittaa korjauksen (keltainen). */
.korostus-huomio{display:inline-block;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:4px;margin:1px 4px 1px 0;vertical-align:1px}
.korostus-korjattu{display:inline-block;background:var(--warning);color:#1f1300;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:4px;margin:1px 4px 1px 0;vertical-align:1px}
.rivi-huomio{background:var(--danger-bg)!important;box-shadow:inset 4px 0 0 var(--danger)}
.rivi-korjattu{background:var(--warning-bg)!important;box-shadow:inset 4px 0 0 var(--warning)}
.korostus-ajolupa{display:inline-block;background:var(--primary);color:#fff;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:4px;margin:1px 0 1px 6px;vertical-align:1px;white-space:nowrap}

.vtable{width:100%;display:block}
.vrow-head{display:grid;gap:0;padding:11px 18px;font-size:11px;font-family:var(--mono);color:var(--text-3);letter-spacing:.6px;text-transform:uppercase;border-bottom:1px solid var(--border);font-weight:600;background:var(--surface-2)}

.ps-rivi-kentta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.paletti-nappi{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;flex-shrink:0}
.paletti-nappi[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.export-menu{position:relative;display:inline-block}
.period-pay-main{font-size:22px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.fault-img-del{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:13px;line-height:1}
.svc-modal-title{font-size:17px;font-weight:700}
.svc-modal-close{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:18px;line-height:1;padding:4px}
.svc-modal-body{overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.svc-modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.svc-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc-vehicle-results{position:absolute;top:100%;left:0;right:0;background:var(--surface-2);border:1.5px solid var(--primary);border-radius:8px;margin-top:4px;max-height:200px;overflow-y:auto;z-index:10}
.svc-vehicle-result-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.svc-vehicle-result-item:last-child{border-bottom:none}
.svc-vehicle-result-item:hover{background:var(--surface-3)}
.svc-vehicle-wrap{position:relative}
.svc-selected-chip{display:flex;align-items:center;justify-content:space-between;background:var(--primary-bg);border:1.5px solid var(--primary);border-radius:8px;padding:10px 14px;font-size:14px}
.svc-selected-chip button{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:var(--r-sm);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all 0.15s;font-family:var(--font)}
.btn-primary{background:var(--primary);color:white;padding:12px 22px;box-shadow:0 2px 4px rgba(79,124,255,0.2)}
.btn-primary:hover{filter:brightness(1.06)}
/* Koko leveys on lomakkeen valinta, ei napin. Aiemmin .btn-primary sisälsi
   width:100%, jolloin jokainen ensisijainen nappi venyi koko riville — myös
   sivujen otsikkoriveillä joissa se näytti virheeltä. */
.btn-block{width:100%;justify-content:center}
.btn-primary:hover{background:var(--primary-hover);box-shadow:0 4px 12px rgba(79,124,255,0.3)}
.btn-primary:disabled{opacity:0.6;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--text-2);border:1.5px solid var(--border)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-2)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1.5px solid #fecaca}
.btn-danger:hover{background:var(--danger);color:white}
.auth-error{background:var(--danger-bg);border:1.5px solid #fecaca;border-radius:var(--r-sm);padding:11px 14px;color:var(--danger);font-size:13px;margin-bottom:14px;display:none;font-weight:500}
.auth-error.show{display:block}

/* Kirjautumisnäkymä tummassa teemassa.
   Taustagradientti, kortti ja taustapallot olivat kiinteästi vaaleita, kun taas
   kortin sisältö (otsikot, kentät, painikkeet) noudatti teemamuuttujia. Kun
   käyttäjä kirjautui ulos tumma teema päällä, lopputulos oli valkoinen kortti
   jossa oli vaalea teksti ja mustat kentät — otsikko "Tervetuloa" oli
   käytännössä näkymätön. */
[data-theme="dark"] #auth-screen{background:linear-gradient(135deg,#0b0d12 0%,#12151f 55%,#151322 100%)}
[data-theme="dark"] .auth-error{border-color:rgba(248,113,113,0.35)}
[data-theme="dark"] .btn-danger{border-color:rgba(248,113,113,0.35)}

/* ───────────────────────────────────
   APP SHELL
─────────────────────────────────── */
#app-shell{display:none;height:100vh;overflow:hidden;flex-direction:column}
#app-shell.visible{display:flex}
.app-layout{display:flex;flex:1;overflow:hidden}

.sidebar{width:240px;min-width:240px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}
.sidebar-logo{padding:20px 22px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px}
.logo-icon{width:34px;height:34px;background:var(--primary);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;color:white;box-shadow:0 2px 6px rgba(79,124,255,0.2)}
.logo-text{font-size:16px;font-weight:700;letter-spacing:-0.3px}
.logo-sub{font-size:10px;color:var(--text-3);font-family:var(--mono);margin-top:1px}
.sidebar-nav{padding:14px 10px;flex:1;overflow-y:auto}
.nav-label{font-size:10.5px;font-family:var(--mono);color:var(--text-3);letter-spacing:1.2px;padding:14px 12px 6px;text-transform:uppercase;font-weight:600}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);cursor:pointer;color:var(--text-2);font-size:13.5px;font-weight:500;transition:all 0.12s;margin-bottom:2px}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--primary-bg);color:var(--primary);font-weight:600}
.nav-icon{font-size:16px;width:18px;text-align:center}
.nav-badge{margin-left:auto;background:var(--danger);color:white;font-size:10px;font-family:var(--mono);padding:1px 7px;border-radius:20px;font-weight:600;transition:transform .15s}
.nav-badge-warn{background:var(--warning,#d97706)}
@keyframes navBadgeBump{0%{transform:scale(1)}25%{transform:scale(1.6)}45%{transform:scale(.92)}75%{transform:scale(1.15)}100%{transform:scale(1)}}
.nav-badge-bump{animation:navBadgeBump .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 0 0 var(--danger);animation-iteration-count:1}
.sidebar-user{padding:14px 16px;border-top:1px solid var(--border)}
.user-card{display:flex;align-items:center;gap:11px}
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;flex-shrink:0;box-shadow:var(--shadow-sm)}
.user-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role-badge{font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:10px;margin-top:2px;display:inline-block;font-weight:600;letter-spacing:0.3px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
/* Sivupalkin roolimerkki: oma rivinsä avatarin ja sulkunapin alla, jotta
   pitkä nimike ("Järjestelmänvalvoja", "Huolto / ylläpito") mahtuu. */
.user-role-row{margin-top:8px}
.role-admin{background:var(--primary-bg);color:var(--primary)}
.role-user{background:var(--success-bg);color:var(--success)}
.role-payroll{background:var(--warning-bg);color:#92400e}
.role-driver{background:var(--surface-2);color:var(--text-2)}
.role-manager{background:var(--success-bg);color:var(--success)}
.role-maintenance{background:var(--success-bg);color:var(--success)}
.role-driver{background:var(--success-bg);color:var(--success)}
.role-accounting{background:var(--success-bg);color:var(--success)}

/* TOPBAR */
.topbar{height:64px;min-height:64px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:16px;background:var(--surface)}
.topbar-title{font-size:18px;font-weight:700;flex:1;letter-spacing:-0.3px}
.search-box{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1.5px solid transparent;border-radius:var(--r-sm);padding:9px 14px;width:280px;transition:all 0.15s}
.search-box:focus-within{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.search-box input{-webkit-appearance:none;appearance:none;background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:13.5px;width:100%}
.search-box input::placeholder{color:var(--text-3)}

.content{flex:1;overflow-y:auto;padding:28px;background:var(--bg)}
.page{display:none}
.page.active{display:block}

/* PAGE HEADER */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}
.page-title-block .h{font-size:24px;font-weight:700;letter-spacing:-0.5px;color:var(--text)}
.page-title-block .sub{font-size:13.5px;color:var(--text-2);margin-top:4px}

/* STAT CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
/* Palkka-asetusten sivu: osiovalikko vasemmalla, kentät ja esimerkki oikealla */
.ps-grid{display:grid;grid-template-columns:250px 1fr;gap:18px;align-items:start}
@media (max-width:1000px){.ps-grid{grid-template-columns:1fr}}
.ps-rivi{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:20px;padding:16px 22px;border-bottom:1px solid var(--border);align-items:start}
.ps-rivi:last-child{border-bottom:none}
.ps-rivi-kuvaus{font-size:12.5px;color:var(--text-3);line-height:1.6}
@media (max-width:760px){.ps-rivi{grid-template-columns:1fr;gap:8px}}
.ps-switch{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.ps-switch input{position:absolute;opacity:0;width:0;height:0}
.ps-switch-track{width:40px;height:23px;border-radius:99px;background:var(--surface-3,#d8dbe0);border:1px solid var(--border);position:relative;transition:background .18s,border-color .18s;flex-shrink:0}
.ps-switch-thumb{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.ps-switch input:checked + .ps-switch-track{background:var(--primary);border-color:var(--primary)}
.ps-switch input:checked + .ps-switch-track .ps-switch-thumb{transform:translateX(17px)}
.ps-switch input:disabled + .ps-switch-track{opacity:.5}
.ps-switch input:focus-visible + .ps-switch-track{box-shadow:0 0 0 3px var(--primary-bg)}
.ps-switch-label{font-size:14px;font-weight:600}
/* Vuorokalenteri */
/* Kuljettajasivun jaksolohko: tilastot rivinä, palkan muodostuminen ja netto rinnakkain */
.period-block{margin-bottom:18px}
.period-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.period-title{font-size:20px;font-weight:700;letter-spacing:-.2px}
.period-sub{font-size:12.5px;color:var(--text-3);margin-top:2px}
.period-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.period-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px}
.period-stat-label{color:var(--text-3);font-size:11.5px;margin-bottom:4px}
.period-stat-value{font-size:19px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.period-stat-note{font-size:11px;color:var(--warning);margin-top:3px}
.period-pay{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start}
.period-pay-side{display:flex;flex-direction:column;gap:14px}
.pay-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text-2)}
.pay-row .text-mono{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.pay-row-total{border-bottom:none;padding-top:14px;align-items:baseline}
.pay-row-total>span:first-child{font-weight:700;color:var(--text);font-size:15px}
.pay-row-total .text-mono{font-size:26px;font-weight:700;color:var(--primary)}
.pay-note{font-size:11.5px;color:var(--text-3);margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.net-card{background:linear-gradient(180deg,var(--success-bg) 0%,var(--surface) 62%);border-color:var(--success)}
.holiday-card{background:linear-gradient(180deg,var(--warning-bg) 0%,var(--surface) 62%);border-color:var(--warning)}
.net-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 18px 12px;border-bottom:1px solid var(--border);font-weight:600;font-size:14px}
.net-arvio{font-size:11px;color:var(--text-3);font-weight:400}
.net-sum{font-size:24px;font-weight:700;color:var(--success);font-variant-numeric:tabular-nums}
.net-rows{padding:8px 18px 4px}
.net-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:12.5px;color:var(--text-3)}
.net-row .text-mono{color:var(--text-2);font-variant-numeric:tabular-nums}
.net-row em{display:block;font-style:normal;font-size:11px;color:var(--text-4,#9aa1ab)}
.net-foot{padding:8px 18px 14px;font-size:11.5px;color:var(--text-3);line-height:1.55}
.net-foot a{color:var(--primary);text-decoration:none;font-weight:600}
.period-note{margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 16px}
@media (max-width:1000px){.period-pay{grid-template-columns:1fr}}
.cal-grid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:6px;font-size:11px;font-family:var(--mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-day{min-height:86px;border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 9px;cursor:pointer;transition:border-color .12s,background .12s;background:var(--surface)}
.cal-day:hover{border-color:var(--primary)}
.cal-day.active{border-color:var(--primary);background:var(--primary-bg);box-shadow:0 0 0 1px var(--primary)}
.cal-day.empty{background:var(--surface-2);cursor:default;opacity:.7}
.cal-day.empty:hover{border-color:var(--border)}
.cal-day-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal-day-num{font-size:13px;font-weight:600}
.cal-day-num.today{background:var(--primary);color:#fff;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.cal-day-num.sunday{color:var(--danger)}
.cal-open{background:var(--success);color:#fff;font-size:10px;font-family:var(--mono);padding:1px 6px;border-radius:20px;font-weight:600}
.cal-bar{height:4px;background:var(--surface-3,#e5e7eb);border-radius:3px;overflow:hidden;margin-bottom:6px}
.cal-bar>div{height:100%;background:var(--primary);border-radius:3px}
.cal-day-stats{font-size:11.5px;color:var(--text-3);line-height:1.5}
@media (max-width:760px){.cal-day{min-height:64px;padding:6px}.cal-day-stats{font-size:10.5px}}
/* Käynnissä olevan vuoron merkki */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);margin-right:6px;animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(16,185,129,0)}}
@media (max-width:820px){.ps-esim-grid{grid-template-columns:1fr!important}}
@media (max-width:900px){.driver-period-grid{grid-template-columns:1fr!important}}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;transition:all 0.15s;box-shadow:var(--shadow-sm)}
.stat-card:hover{border-color:var(--border-2);box-shadow:var(--shadow)}
.stat-card-btn{cursor:pointer;user-select:none}
.stat-card-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.12));border-color:var(--primary)}
.stat-card-btn:active{transform:translateY(0)}
.stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px}
.si-blue{background:var(--primary-bg);color:var(--primary)}
.si-green{background:var(--success-bg);color:var(--success)}
.si-amber{background:var(--warning-bg);color:var(--warning)}
.si-red{background:var(--danger-bg);color:var(--danger)}
.si-purple{background:var(--purple-bg);color:var(--purple)}
.stat-label{font-size:12px;color:var(--text-2);font-weight:500;margin-bottom:6px;letter-spacing:0.2px}
.stat-value{font-size:28px;font-weight:700;letter-spacing:-1px;color:var(--text)}
.stat-sub{font-size:12px;color:var(--text-3);margin-top:4px}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border)}
.card-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px;letter-spacing:-0.1px}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Työpöydän lohkot. Järjestys tulee asetuksista CSS:n order-arvona, joten
   lohkon paikan vaihtaminen ei siirrä DOM-solmuja eikä katkaise kuuntelijoita.
   Leveä lohko vie molemmat sarakkeet, kapea toisen — vierekkäin asetetut
   kapeat päätyvät samalle riville kuten ennenkin. */
.dash-blocks{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dash-block{min-width:0}
.dash-wide{grid-column:1 / -1}
.dash-half{grid-column:span 1}
.dash-block .stats-grid,.dash-block .fleet-overview{margin-bottom:0}
.dash-block .stats-grid+.fleet-overview:not(:empty){margin-top:16px}

/* FAULT ITEMS */
.fault-item{display:flex;align-items:flex-start;gap:14px;padding:15px 22px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.12s}
.fault-item:last-child{border-bottom:none}
.fault-item:hover{background:var(--surface-2)}
.fault-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0}
.fdot-critical{background:var(--danger);box-shadow:0 0 0 4px var(--danger-bg)}
.fdot-high{background:var(--orange);box-shadow:0 0 0 4px var(--orange-bg)}
.fdot-medium{background:var(--warning);box-shadow:0 0 0 4px var(--warning-bg)}
.fdot-low{background:var(--primary);box-shadow:0 0 0 4px var(--primary-bg)}
.fault-car{font-size:11px;font-family:var(--mono);color:var(--primary);margin-bottom:3px;font-weight:600;letter-spacing:0.2px}
.fault-desc{font-size:13.5px;color:var(--text);font-weight:500;line-height:1.5}
.fault-meta{font-size:11.5px;color:var(--text-3);margin-top:4px}
.fault-time{font-size:11px;color:var(--text-3);font-family:var(--mono);white-space:nowrap;text-align:right;font-weight:500}

/* VEHICLES PAGE */
.filter-row{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.filter-btn{padding:7px 15px;border-radius:20px;font-size:12.5px;font-family:var(--font);cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--text-2);transition:all 0.15s;font-weight:500}
.filter-btn:hover{border-color:var(--border-2);background:var(--surface-2)}
.filter-btn.active{background:var(--primary);border-color:var(--primary);color:white;font-weight:600}
.filter-btn .count{margin-left:5px;opacity:0.7;font-size:11px}
.filter-btn.active .count{opacity:1}

.table-head{display:grid;grid-template-columns:90px 90px minmax(140px,1fr) 115px 90px 110px 95px 105px 70px;gap:0;padding:13px 18px;font-size:11px;font-family:var(--mono);color:var(--text-3);letter-spacing:0.6px;text-transform:uppercase;border-bottom:1px solid var(--border);font-weight:600;background:var(--surface-2)}
/* Laitetiedot — geneerinen tauluruudukko */
.eq-row{display:grid;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--border);font-size:13px}
.eq-row-head{background:var(--surface-2);color:var(--text-3);font-family:var(--mono);font-size:11px;letter-spacing:0.6px;font-weight:600;text-transform:uppercase;position:sticky;top:0;z-index:1}
.eq-row-body{cursor:pointer;transition:background 0.1s}
.eq-row-body:hover{background:var(--surface-2)}
.eq-row-body:last-child{border-bottom:none}
.vrow{display:grid;grid-template-columns:90px 90px minmax(140px,1fr) 115px 90px 110px 95px 105px 70px;gap:0;padding:14px 18px;border-bottom:1px solid var(--border);align-items:center;cursor:pointer;transition:background 0.12s}
.vrow:hover{background:var(--surface-2)}
.vrow:last-child{border-bottom:none}
.fleet-id{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--primary)}
.reg{font-family:var(--mono);font-size:12px;color:var(--text-2);font-weight:500}
.vname{font-size:13.5px;font-weight:600;color:var(--text)}
.vsub{font-size:11.5px;color:var(--text-3);margin-top:2px}
.status-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-family:var(--font);padding:4px 10px;border-radius:20px;font-weight:600;letter-spacing:0.2px}
.sp-active{background:var(--success-bg);color:var(--success)}
.sp-fault{background:var(--danger-bg);color:var(--danger)}
.sp-service{background:var(--warning-bg);color:var(--warning)}
.sp-inactive{background:var(--surface-3);color:var(--text-3)}
.sdot{width:6px;height:6px;border-radius:50%;background:currentColor}
.status-change-wrap{position:relative}
.status-select{appearance:none;-webkit-appearance:none;border:none;cursor:pointer;font-size:11px;font-family:var(--font);font-weight:600;letter-spacing:0.2px;padding:4px 24px 4px 10px;border-radius:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;outline:none;transition:opacity 0.15s}
.status-select:hover{opacity:0.85}
.type-tag{font-size:10.5px;font-family:var(--mono);padding:3px 9px;border-radius:12px;font-weight:600;display:inline-block}
.type-taxi{background:var(--primary-bg);color:var(--primary)}
.type-accessible_taxi{background:var(--teal-bg);color:var(--teal)}
.type-minibus{background:var(--orange-bg);color:var(--orange)}
.type-bus{background:var(--purple-bg);color:var(--purple)}
.dispatch-tag{font-size:11px;color:var(--text-2);font-weight:500}

/* VEHICLE DETAIL */
.detail-header{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 26px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.detail-header-main{display:flex;gap:24px;align-items:flex-start}

/* Huoltostatus-rivi ajoneuvon otsikko-laatikon alalaidassa */
.detail-header-service{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.detail-header-service .svc-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--surface-2)}
.detail-header-service.ok .svc-icon{background:rgba(22,163,74,.14);color:#16a34a}
.detail-header-service.warn .svc-icon{background:rgba(217,119,6,.18);color:#d97706}
.detail-header-service.crit .svc-icon{background:rgba(220,38,38,.18);color:#dc2626;animation:critPulse 2s ease-in-out infinite}
@keyframes critPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.2)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}
.detail-header-service .svc-text{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
.detail-header-service .svc-title{font-weight:700;font-size:14.5px}
.detail-header-service.ok .svc-title{color:#16a34a}
.detail-header-service.warn .svc-title{color:#d97706}
.detail-header-service.crit .svc-title{color:#dc2626}
.detail-header-service .svc-meta{font-size:12px;color:var(--text-2)}
.detail-header-service .svc-meta strong{color:var(--text);font-family:var(--mono)}
.detail-header-service .svc-progress{width:140px;height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;flex-shrink:0}
.detail-header-service .svc-progress-bar{height:100%;transition:width .3s ease}
.detail-header-service.ok .svc-progress-bar{background:#16a34a}
.detail-header-service.warn .svc-progress-bar{background:#d97706}
.detail-header-service.crit .svc-progress-bar{background:#dc2626}
@media (max-width:900px){
  .detail-header-service{gap:10px}
  .detail-header-service .svc-progress{width:100%;order:99}
  .detail-header-service .svc-title{font-size:13.5px}
}
.detail-id-block{flex-shrink:0;text-align:center;padding:14px 22px;background:linear-gradient(135deg,var(--primary-bg) 0%,#dde5ff 100%);border-radius:var(--r);min-width:120px}
.detail-fleet-id{font-family:var(--mono);font-size:24px;font-weight:800;color:var(--primary);letter-spacing:1px;line-height:1}
.detail-reg{font-size:11px;color:var(--text-2);font-family:var(--mono);margin-top:5px;font-weight:600}
.detail-info{flex:1}
.detail-name{font-size:24px;font-weight:700;letter-spacing:-0.5px;margin-bottom:4px}
.detail-nick{font-size:13px;color:var(--primary);font-weight:500;margin-bottom:10px}
.detail-meta{display:flex;flex-wrap:wrap;gap:8px 16px}
.detail-meta-item{font-size:12.5px;color:var(--text-2)}
.detail-meta-item strong{color:var(--text);font-weight:600}

.detail-tabs{display:flex;gap:4px;margin-bottom:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px;width:fit-content;box-shadow:var(--shadow-sm)}
.detail-tab{padding:8px 16px;border-radius:5px;font-size:13px;cursor:pointer;color:var(--text-2);font-weight:500;transition:all 0.12s}
.detail-tab:hover{background:var(--surface-2);color:var(--text)}
.detail-tab.active{background:var(--primary);color:white;font-weight:600}
.detail-tab-content{display:none}
.detail-tab-content.active{display:block}

.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.info-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-sm)}
.info-section-title{font-size:11px;font-family:var(--mono);color:var(--text-3);letter-spacing:0.7px;text-transform:uppercase;margin-bottom:12px;font-weight:700;display:flex;align-items:center;gap:7px}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px}
.info-row:last-child{border-bottom:none}
.info-key{color:var(--text-2)}
.info-val{font-weight:600;color:var(--text);font-family:var(--mono);font-size:12.5px;text-align:right}
.info-val-yes{color:var(--success)}
.info-val-no{color:var(--text-3)}

.drivers-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.driver-chip{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface-2);border-radius:var(--r-sm);font-size:13px}
.driver-chip-primary{background:var(--primary-bg);border:1px solid #c5d3ff}
.driver-chip .avatar{width:26px;height:26px;font-size:10px}
.driver-chip-name{flex:1;font-weight:500}
.driver-chip-tag{font-size:10px;font-family:var(--mono);color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;background:var(--text);color:white;padding:13px 20px;border-radius:var(--r);font-size:13.5px;font-weight:500;z-index:200;display:none;align-items:center;gap:10px;box-shadow:var(--shadow-xl)}
.toast.show{display:flex;animation:slideUp 0.25s ease}
.toast-success{background:var(--success)}
.toast-error{background:var(--danger)}
.toast-warning{background:var(--warning)}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* LOADING */
.loader{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--text-3);font-size:13px;gap:10px}

/* AVATARS COLORS */
.av-admin{background:linear-gradient(135deg,#4f7cff 0%,#3a66e6 100%)}
.av-user{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
.av-payroll{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}
.av-manager{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
.av-maintenance{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
.av-driver{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
.av-accounting{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}

.text-mono{font-family:var(--mono)}
.vehicle-table-card{overflow-x:auto}
.vehicle-table-card .table-head,.vehicle-table-card #vehicle-table{min-width:905px}
/* Huoltoon jäljellä / ylittynyt -sarake. Etumerkki on asiakkaan pyytämä
   konventio: + = huolto ylittynyt, - = kilometrejä vielä jäljellä. */
.svc-km{display:inline-block;padding:3px 9px;border-radius:12px;font-family:var(--mono);font-size:11.5px;font-weight:700;white-space:nowrap}
.svc-km-ok{background:var(--success-bg);color:var(--success)}
.svc-km-warn{background:var(--warning-bg);color:var(--warning)}
.svc-km-crit{background:var(--danger-bg);color:var(--danger)}
.empty-state{text-align:center;padding:50px 20px;color:var(--text-3)}
.empty-state-icon{font-size:36px;margin-bottom:14px;opacity:0.5}
.empty-state-text{font-size:13.5px}

/* FAULT BADGE */
.fault-count-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--danger);color:white;font-size:11px;font-weight:700;font-family:var(--mono)}

/* MUISTIINPANOT */
.notes-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;margin-bottom:18px;box-shadow:var(--shadow-sm);display:flex;gap:14px;align-items:flex-start}
.notes-icon{font-size:18px;flex-shrink:0;margin-top:2px}
.notes-body{flex:1;min-width:0}
.notes-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.notes-label{font-size:11px;font-family:var(--mono);color:var(--text-3);letter-spacing:0.7px;text-transform:uppercase;font-weight:700}
.notes-text{font-size:13.5px;color:var(--text-2);line-height:1.6;white-space:pre-wrap}
.notes-empty{color:var(--text-4);font-style:italic;font-size:13px}
.notes-textarea{width:100%;border:1.5px solid var(--primary);border-radius:var(--r-sm);padding:10px 12px;font-family:var(--font);font-size:13.5px;color:var(--text);background:var(--surface);resize:vertical;min-height:80px;outline:none;line-height:1.6}
.notes-actions{display:flex;gap:8px;margin-top:8px}
.btn-success{background:var(--success);color:white;border:none}
.btn-success:hover{background:#059669}

/* KANBAN */
.kanban-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.kanban-col{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;min-height:200px}
.kanban-col-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface);font-size:13px;font-weight:600;position:sticky;top:0}
.kanban-col-title{display:flex;align-items:center;gap:8px}
.kanban-badge{font-size:11px;font-family:var(--mono);padding:2px 8px;border-radius:12px;font-weight:700}
.kb-open{background:var(--primary-bg);color:var(--primary)}
.kb-waiting{background:var(--purple-bg);color:var(--purple)}
.kb-scheduled{background:var(--warning-bg);color:var(--warning)}
.kb-resolved{background:var(--success-bg);color:var(--success)}
.kanban-cards{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:80px}
.kanban-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;cursor:grab;transition:all 0.15s;box-shadow:var(--shadow-sm)}
.kanban-card:hover{box-shadow:var(--shadow);border-color:var(--border-2);transform:translateY(-1px)}
.kanban-card.dragging{opacity:0.5;cursor:grabbing}
.kanban-card.critical{border-left:3px solid var(--danger)}
.kanban-card.high{border-left:3px solid var(--orange)}
.kanban-card.medium{border-left:3px solid var(--warning)}
.kanban-card.low{border-left:3px solid var(--primary)}
.kanban-col.drag-over{background:var(--primary-bg);border-color:var(--primary)}
.kc-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.kc-title{font-size:13px;font-weight:600;color:var(--text);flex:1;line-height:1.3}
.kc-vehicle{font-size:11px;font-family:var(--mono);color:var(--primary);font-weight:600}
.kc-meta{font-size:11px;color:var(--text-3);margin-top:5px}
.status-label{display:inline-block;font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:10px;font-weight:600}
.sl-open{background:var(--primary-bg);color:var(--primary)}
.sl-in-review{background:var(--orange-bg,#fff4e5);color:var(--orange,#d97706)}
.sl-on-hold{background:var(--purple-bg);color:var(--purple)}
.sl-scheduled{background:var(--warning-bg);color:var(--warning)}
.sl-resolved{background:var(--success-bg);color:var(--success)}

/* SMART SEARCH DROPDOWN */
.search-wrapper{position:relative}
.search-dropdown{position:absolute;top:calc(100% + 6px);right:0;width:380px;max-height:min(70vh,540px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-xl);z-index:100;overflow-y:auto;overflow-x:hidden;display:none;overscroll-behavior:contain}
.search-dropdown::-webkit-scrollbar{width:8px}
.search-dropdown::-webkit-scrollbar-track{background:transparent}
.search-dropdown::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px}
.search-dropdown::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
.search-dropdown.show{display:block}
.search-result-item{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background 0.1s}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--surface-2)}
.sr-id{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--primary);width:70px;flex-shrink:0}
.sr-name{flex:1;font-size:13px;font-weight:500}
.sr-meta{font-size:11px;color:var(--text-3)}
.search-loading{padding:16px;text-align:center;color:var(--text-3);font-size:13px}
.sr-group{padding:9px 14px 5px;font-size:10.5px;font-family:var(--mono);letter-spacing:.7px;text-transform:uppercase;color:var(--text-3);background:var(--surface-2);border-bottom:1px solid var(--border);position:sticky;top:0}

/* DARK MODE TOGGLE */
.theme-toggle{background:none;border:1px solid var(--border);border-radius:8px;padding:5px 9px;cursor:pointer;color:var(--text-2);font-size:15px;transition:all .15s;line-height:1}
.theme-toggle:hover{border-color:var(--border-2);color:var(--text)}

/* KANBAN */
.kanban-board{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start;overflow-x:auto;padding-bottom:8px}
.kanban-col{background:var(--surface-2);border-radius:var(--r-lg);padding:10px;min-height:200px}
.kanban-col-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:4px 4px 8px;border-bottom:2px solid var(--border)}
.kanban-col-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.kanban-col-count{font-size:11px;font-family:var(--mono);background:var(--surface-3);padding:1px 7px;border-radius:10px;color:var(--text-3)}
.kf-open .kanban-col-title{color:var(--danger)}
.kf-review .kanban-col-title{color:var(--orange)}
.kf-diagnosis .kanban-col-title{color:var(--warning)}
.kf-scheduled .kanban-col-title{color:var(--primary)}
.kf-resolved .kanban-col-title{color:var(--success)}
.kanban-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:all .15s;position:relative}
.kanban-card:hover{border-color:var(--border-2);box-shadow:var(--shadow);transform:translateY(-1px)}
.kanban-card-vehicle{font-size:11px;font-family:var(--mono);color:var(--text-3);margin-bottom:4px}
.kanban-card-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px;line-height:1.3}
.kanban-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.kanban-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.kanban-card-reporter{font-size:11px;color:var(--text-3)}
.kanban-card-date{font-size:11px;color:var(--text-4);font-family:var(--mono)}
.kanban-move-btn{font-size:11px;padding:2px 8px;border-radius:5px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:all .12s}
.kanban-move-btn:hover{border-color:var(--primary);color:var(--primary)}
.ai-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:8px;font-family:var(--mono)}
.ai-ok{background:var(--success-bg);color:var(--success)}
.ai-warn{background:var(--warning-bg);color:#92400e}
.ai-stop{background:var(--danger-bg);color:var(--danger)}
.ai-block{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-top:8px;font-size:12px}
.ai-block-title{font-size:11px;font-weight:600;color:var(--primary);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.ai-block-text{color:var(--text-2);line-height:1.5}
.ai-rec{color:var(--text);font-weight:500;margin-top:4px}

/* SIJAISAUTO */
.sub-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .15s;margin-bottom:8px}
.sub-card:hover{border-color:var(--success);box-shadow:0 0 0 2px var(--success-bg)}
.sub-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0}
.sub-info{flex:1}
.sub-name{font-size:13px;font-weight:600}
.sub-meta{font-size:11px;color:var(--text-3);margin-top:2px}
.sub-badge{font-size:11px;padding:2px 8px;border-radius:6px;background:var(--success-bg);color:var(--success);font-weight:500}

/* FLEET OVERVIEW DROPDOWNS */
.fleet-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.fleet-group{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:visible;transition:border-color 0.15s,box-shadow 0.15s;z-index:1}
.fleet-group:hover{border-color:var(--border-2);box-shadow:var(--shadow);z-index:10}
.fleet-group-header{padding:14px 16px;cursor:default;display:flex;flex-direction:column;gap:8px}
.fleet-group-title{font-size:13px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;justify-content:space-between}
.fleet-group-title span.chevron{font-size:10px;color:var(--text-4);transition:transform .2s}
.fleet-group:hover .fleet-group-title span.chevron{transform:rotate(180deg)}
.fleet-group-counts{display:flex;gap:8px;flex-wrap:wrap}
.fgc{font-size:12px;font-weight:600;padding:2px 8px;border-radius:20px}
.fgc-green{background:var(--success-bg);color:var(--success)}
.fgc-red{background:var(--danger-bg);color:var(--danger)}
.fgc-amber{background:var(--warning-bg);color:#92400e}
.fgc-grey{background:var(--surface-2);color:var(--text-3)}
.fleet-group-body{position:absolute;top:calc(100% + 4px);left:-1px;right:-1px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg, 0 8px 24px rgba(0,0,0,.12));max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .2s;opacity:0;pointer-events:none}
.fleet-group:hover .fleet-group-body{max-height:420px;opacity:1;pointer-events:auto;overflow-y:auto}
.fleet-chips{padding:10px}
.fleet-chip{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:background .12s}
.fleet-chip:hover{background:var(--surface-2)}
.fc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fc-dot-green{background:#22c55e}
.fc-dot-red{background:#ef4444}
.fc-dot-amber{background:#f59e0b}
.fc-dot-grey{background:#94a3b8}
.fc-reg{font-size:13px;font-weight:600;color:var(--text);flex:1}
.fc-fleet{font-size:11px;color:var(--text-3)}
.fleet-group-empty{padding:16px;text-align:center;color:var(--text-4);font-size:13px}

/* SORT BUTTONS */
.sort-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.sort-label{font-size:12px;color:var(--text-3);font-weight:500;margin-right:4px}
.sort-btn{font-size:12px;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .12s}
.sort-btn:hover{border-color:var(--border-2);color:var(--text)}
.sort-btn.active{border-color:var(--primary);background:var(--primary-bg);color:var(--primary);font-weight:600}
.sort-dir{font-size:10px;opacity:.7}

/* HUOLTOKALENTERI */
/* Työpöydän kompakti näkymäkytkin */
.dash-cal-switch{display:flex;align-items:center;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:2px}
.dash-cal-btn{padding:5px 10px;border-radius:5px;border:none;background:transparent;color:var(--text-2);font-size:11.5px;font-weight:600;cursor:pointer;transition:all .12s;font-family:var(--font)}
.dash-cal-btn:hover{background:var(--surface);color:var(--text)}
.dash-cal-btn.active{background:var(--primary);color:#fff;box-shadow:0 1px 4px rgba(79,124,255,.2)}
/* Työpöydän kalenteririvit */
.dash-sched-day-group{padding:4px 22px 8px}
.dash-sched-day-header{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;padding:8px 0 6px;border-bottom:1px solid var(--border);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.dash-sched-day-header.today{color:var(--primary)}
.dash-sched-day-count{background:var(--surface-2);color:var(--text-3);font-family:var(--mono);font-size:10px;padding:1px 7px;border-radius:9px;font-weight:700}
.dash-sched-row{display:flex;gap:11px;align-items:center;padding:7px 8px;border-radius:7px;cursor:pointer;transition:background .1s}
.dash-sched-row:hover{background:var(--surface-2)}
.dash-sched-icon{font-size:15px;width:22px;text-align:center;flex-shrink:0}
.dash-sched-main{flex:1;min-width:0}
.dash-sched-title{font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-sched-sub{font-size:11px;color:var(--text-3);font-family:var(--mono);margin-top:1px}
.dash-sched-time{font-size:11px;color:var(--text-3);font-family:var(--mono);white-space:nowrap;flex-shrink:0}

.cal-view-switch{display:flex;align-items:center;gap:6px;margin-bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;width:fit-content;box-shadow:var(--shadow-sm)}
.cal-view-btn{padding:7px 14px;border-radius:7px;border:none;background:transparent;color:var(--text-2);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.cal-view-btn:hover{background:var(--surface-2);color:var(--text)}
.cal-view-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 6px rgba(79,124,255,.25)}
.cal-view-today{margin-left:6px;border-left:1px solid var(--border);border-radius:0 7px 7px 0;padding-left:14px}
[data-theme="dark"] .cal-view-today{border-left-color:var(--border-2)}

.cal-nav{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.cal-week-label{font-size:15px;font-weight:600;flex:1;text-align:center}
.cal-grid{display:grid;gap:10px}
.cal-grid.cal-week{grid-template-columns:repeat(7,1fr)}
.cal-grid.cal-day{grid-template-columns:1fr;max-width:680px;margin:0 auto}
.cal-grid.cal-month{grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day-cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;min-height:140px;display:flex;flex-direction:column}
.cal-grid.cal-month .cal-day-cell{min-height:96px;border-radius:8px}
.cal-grid.cal-day .cal-day-cell{min-height:280px}
.cal-day-cell.outside{opacity:.4}
.cal-day-header{padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);font-size:12px;font-weight:600;text-align:center;display:flex;justify-content:center;gap:6px}
.cal-grid.cal-month .cal-day-header{padding:5px 8px;font-size:11px}
.cal-day-header.today{background:var(--primary-bg);color:var(--primary)}
.cal-day-header .dh-day{font-weight:700}
.cal-day-header .dh-num{font-weight:500;color:var(--text-3)}
.cal-day-header.today .dh-num{color:var(--primary)}
.cal-day-body{padding:8px;display:flex;flex-direction:column;gap:5px;flex:1;min-height:60px}
.cal-grid.cal-month .cal-day-body{padding:4px;gap:3px;min-height:40px}
.cal-entry{font-size:11px;padding:4px 7px;border-radius:5px;line-height:1.3;cursor:grab;user-select:none;transition:transform .12s}
.cal-entry:hover{transform:translateY(-1px)}
.cal-entry:active{cursor:grabbing}
.cal-entry.dragging{opacity:0.4}
.cal-grid.cal-day .cal-entry{font-size:13px;padding:8px 12px}
.cal-grid.cal-month .cal-entry{font-size:10px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-day-body.drag-over{background:var(--surface-2);outline:2px dashed var(--primary);outline-offset:-2px}
.cal-service{background:var(--warning-bg);color:#92400e;border-left:2px solid var(--warning)}
.cal-tire{background:var(--teal-bg);color:#0f766e;border-left:2px solid var(--teal)}
.cal-empty{text-align:center;padding:20px 8px;color:var(--text-4);font-size:12px}
.cal-month-overflow{font-size:10px;color:var(--text-3);padding:2px 5px;font-weight:600;cursor:pointer}
.cal-month-overflow:hover{color:var(--primary)}
[data-theme="dark"] .cal-service{color:#fbbf24}
[data-theme="dark"] .cal-tire{color:#2dd4bf}

/* SVC-MODAALIN LISÄT */
.svc-future-pill{display:inline-block;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:700;letter-spacing:.3px;margin-left:6px;vertical-align:1px}
.meta-edit-btn{background:transparent;border:none;color:var(--text-4);cursor:pointer;padding:2px 5px;border-radius:5px;line-height:1;transition:all .12s;vertical-align:-3px}
.meta-edit-btn:hover{background:var(--surface-2);color:var(--primary)}
.svc-when-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:3px;gap:3px}
.svc-when-btn{border:none;background:transparent;color:var(--text-2);font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .12s}
.svc-when-btn:hover{color:var(--text)}
.svc-when-btn.active{background:var(--primary);color:#fff}
.svc-when-hint{font-size:11.5px;color:var(--text-3);margin-top:7px;line-height:1.5}
.svc-edit-banner{background:var(--warning-bg);color:#92400e;border:1px solid var(--warning);border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px;display:flex;align-items:center;gap:8px}
.svc-receipt-current{display:block;font-size:12.5px;color:var(--text-2);padding:6px 0}
.svc-att-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border)}
.svc-att-row:last-child{border-bottom:none}
.svc-att-thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;border:1px solid var(--border);cursor:pointer;flex-shrink:0;background:var(--surface-2)}
.svc-att-thumb:hover{border-color:var(--primary)}
.svc-att-icon{width:44px;height:44px;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0}
.svc-att-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.svc-att-size{color:var(--text-3);font-size:11px;font-family:var(--mono)}
.svc-att-link{color:var(--primary);text-decoration:none;font-weight:600;white-space:nowrap;padding:3px 8px;border-radius:5px}
.svc-att-link:hover{background:var(--surface-2)}
.svc-receipt-current a{color:var(--primary);text-decoration:none;font-weight:500}
.svc-receipt-current a:hover{text-decoration:underline}

/* KALENTERIMERKINNÄN TIEDOT — lukunäkymä */
.svcd-head{display:flex;flex-direction:column;gap:3px}
.svcd-fleet{font-size:12px;font-family:var(--mono);color:var(--primary);font-weight:700;letter-spacing:.02em}
.svcd-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--text-3)}
.svcd-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:10px;font-weight:600;font-size:11.5px;background:var(--surface);color:var(--text-2);border:1px solid var(--border)}
.svcd-chip.past{background:var(--surface);color:var(--text-3)}
.svcd-chip.future{background:var(--primary-bg,rgba(79,124,255,.12));color:var(--primary);border-color:transparent}
.svcd-section{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-top:4px}
.svcd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-sm,8px);overflow:hidden}
.svcd-cell{background:var(--surface);padding:9px 12px;min-width:0}
.svcd-cell.full{grid-column:1/-1}
.svcd-label{font-size:10.5px;font-family:var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:2px}
.svcd-value{font-size:13px;color:var(--text);line-height:1.5;word-break:break-word;white-space:pre-wrap}
.svcd-value.empty{color:var(--text-4,var(--text-3));font-style:italic;white-space:normal}
.svcd-note{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm,8px);padding:11px 13px;font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word}
.svcd-note.empty{color:var(--text-3);font-style:italic;white-space:normal}
@media (max-width:560px){.svcd-grid{grid-template-columns:1fr}}

/* POISTONAPPI KANBAN-KORTEILLA */
.kanban-card-delete{position:absolute;top:6px;right:6px;background:transparent;border:none;color:var(--text-4);cursor:pointer;font-size:13px;line-height:1;padding:3px 5px;border-radius:4px;transition:all .12s;opacity:0}
.kanban-card:hover .kanban-card-delete{opacity:1}
.kanban-card-delete:hover{background:var(--danger-bg);color:var(--danger)}

/* HISTORIA-RIVIN POISTONAPPI */
.history-delete-btn{background:transparent;border:none;color:var(--text-4);cursor:pointer;font-size:13px;line-height:1;padding:4px 7px;border-radius:5px;transition:all .12s;margin-left:8px}
.history-delete-btn:hover{background:var(--danger-bg);color:var(--danger)}

/* VIKAILMOITUSTEN LISTA + SUODATTIMET */
.fault-filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.fault-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.fault-toolbar .fault-filters{margin-bottom:0}
.fault-sort-label{font-size:11px;font-family:var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-right:8px}
.tab-ryhma{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin:0 4px 0 10px;padding-left:12px;border-left:1px solid var(--border);align-self:stretch}
.tab-ryhma:first-child{margin-left:0;padding-left:0;border-left:none}
.fault-filter-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:999px;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s}
.fault-filter-pill:hover{border-color:var(--border-2);color:var(--text)}
.fault-filter-pill.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.fault-filter-count{font-family:var(--mono);font-size:11px;background:var(--surface-2);color:var(--text-3);padding:1px 7px;border-radius:10px;font-weight:600}
.fault-filter-pill.active .fault-filter-count{background:rgba(255,255,255,.22);color:#fff}
.fault-list{display:flex;flex-direction:column;gap:6px}
.fault-row{display:grid;grid-template-columns:14px 110px 1fr 150px 90px 120px 30px 14px;gap:14px;align-items:center;padding:13px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .12s}
.fault-row:hover{border-color:var(--border-2);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.fault-row .fr-fleet{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--primary)}
.fault-row .fr-reg{font-family:var(--mono);font-size:11px;color:var(--text-3);margin-top:2px}
.fault-row .fr-title{font-size:13.5px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fault-row .fr-reporter{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fault-row .fr-date{font-size:11.5px;font-family:var(--mono);color:var(--text-3)}
.fault-row .fr-status{justify-self:end}
.fault-row .fr-arrow{color:var(--text-4);font-size:14px;justify-self:end}
.fault-row:hover .fr-arrow{color:var(--primary)}
/* Istunnon uusimisbanneri — käyttäjää ei heitetä ulos, hän kirjautuu takaisin tästä */
#session-banner{position:fixed;top:0;left:0;right:0;z-index:2000;transform:translateY(-100%);transition:transform .28s cubic-bezier(.22,.9,.3,1)}
#session-banner.visible{transform:none}
#session-banner .sb-inner{display:flex;align-items:center;gap:12px;padding:11px 18px;background:var(--warning,#f59e0b);color:#1a1d21;font-size:13.5px;font-weight:500;box-shadow:0 2px 14px rgba(0,0,0,.16)}
#session-banner .sb-inner span{flex:1}
#session-banner .btn{background:#1a1d21;color:#fff;border:none;font-weight:600;white-space:nowrap}
#session-banner .sb-close{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:inherit;opacity:.6;padding:0 4px}
#session-banner .sb-close:hover{opacity:1}
@media (max-width:700px){#session-banner .sb-inner{flex-wrap:wrap;font-size:12.5px}}
/* Päivitysnapin pyörivä ikoni latauksen ajan */
#refresh-btn.spinning svg{animation:refreshSpin .7s linear infinite}
@keyframes refreshSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){#refresh-btn.spinning svg{animation:none;opacity:.5}}
/* Virheellinen lomakekenttä — punainen reunus + hehku, katoaa kun kenttää muokataan */
.field-error{border-color:var(--danger)!important;box-shadow:0 0 0 3px var(--danger-bg,rgba(220,38,38,.14))!important;animation:fieldShake .3s ease}
@keyframes fieldShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* Pikakuittaus: merkitse vika korjatuksi avaamatta ilmoitusta */
.fault-row .fr-quick-resolve{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-3);cursor:pointer;transition:all .12s;padding:0}
.fault-row .fr-quick-resolve:hover{background:var(--success,#16a34a);border-color:var(--success,#16a34a);color:#fff;transform:scale(1.08)}
.fault-row .fr-quick-resolve:active{transform:scale(.96)}
@media (max-width: 880px) {
  /* Kapealla kaksi riviä: vika ja tila ylhäällä, auto ja päivä alla.
     Auto näkyy, koska huolto tunnistaa vian ensin autosta. */
  .fault-row{grid-template-columns:10px minmax(0,1fr) auto 34px;grid-template-areas:"dot title status btn" "dot auto date btn";gap:4px 10px;padding:11px 12px}
  .fault-row > .fault-dot{grid-area:dot;align-self:start;margin-top:5px !important}
  .fault-row .fr-title{grid-area:title}
  .fault-row .fr-fleet-wrap{grid-area:auto;display:flex;gap:6px;align-items:baseline;min-width:0;overflow:hidden;white-space:nowrap}
  .fault-row .fr-fleet-wrap .fr-reg{margin-top:0}
  .fault-row .fr-date{grid-area:date;justify-self:end;white-space:nowrap}
  .fault-row .fr-status{grid-area:status}
  .fault-row .fr-quick-resolve,.fault-row > div[style*="width:30px"]{grid-area:btn;align-self:center;width:34px;height:34px}
  .fault-row .fr-reporter,.fault-row .fr-arrow{display:none}
}

/* VIKAMODAALI */
.fault-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:950;display:flex;align-items:center;justify-content:center;padding:20px}
.fault-modal{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;width:100%;max-width:640px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.fault-modal-header{padding:18px 24px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.fault-modal-fleet{font-family:var(--mono);font-size:12px;color:var(--text-3);font-weight:600;letter-spacing:.04em}
.fault-modal-title{font-size:18px;font-weight:700;margin-top:4px;line-height:1.3}
.fault-modal-close{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:20px;line-height:1;padding:4px}
.fault-modal-body{overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:14px}
.fault-modal-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px;color:var(--text-3)}
.fault-modal-meta .sev-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:10px;font-weight:600;font-size:11.5px}
.fault-modal-desc{font-size:14px;line-height:1.55;color:var(--text);white-space:pre-wrap}
.fault-modal-section-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-top:4px}
.fault-modal-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.fault-modal-images a{display:block;aspect-ratio:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.fault-modal-images img{width:100%;height:100%;object-fit:cover;display:block}
.fault-ai-box{padding:12px 14px;background:var(--purple-bg);border-left:3px solid var(--purple);border-radius:var(--r-sm)}
.fault-ai-box .fai-title{font-size:11px;font-weight:700;color:var(--purple);letter-spacing:.05em;margin-bottom:5px}
.fault-ai-box .fai-text{font-size:13px;color:var(--text);line-height:1.55}
.fault-ai-box .fai-rec{font-size:12.5px;color:var(--text-2);margin-top:6px}
.fault-status-actions{display:flex;flex-wrap:wrap;gap:8px}
.fault-status-btn{padding:9px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:13px;font-weight:500;transition:all .15s}
.fault-status-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.fault-status-btn:disabled{opacity:.45;cursor:not-allowed}
.fault-status-btn.current{background:var(--primary);color:#fff;border-color:var(--primary)}
.fault-status-btn.danger{color:var(--danger);border-color:var(--danger-bg)}
.fault-status-btn.danger:hover:not(:disabled){background:var(--danger-bg);border-color:var(--danger)}
.fault-status-btn.success{color:var(--success);border-color:var(--success-bg)}
.fault-status-btn.success:hover:not(:disabled){background:var(--success-bg);border-color:var(--success)}
.fault-modal-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;align-items:center}

/* KIRJANPITO-SIVUT */
.acc-stat-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.acc-stat-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px}
.acc-stat-row:last-child{border-bottom:none}
.acc-stat-row .lbl{color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-stat-row .val{color:var(--text);font-weight:600;font-family:var(--mono);font-size:12.5px;white-space:nowrap;margin-left:10px}
.acc-filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:flex-end}
.acc-filter-bar .form-group{flex:1;min-width:140px;margin-bottom:0}
.acc-filter-bar .form-label{font-size:11px;color:var(--text-3);margin-bottom:4px}
.acc-filter-bar .form-input,.acc-filter-bar .form-select{padding:8px 10px;font-size:13px}
.receipts-head{display:grid;grid-template-columns:100px 110px 100px 1fr 140px 100px 90px 80px;gap:0;padding:11px 16px;font-size:10.5px;font-family:var(--mono);color:var(--text-3);letter-spacing:0.6px;text-transform:uppercase;border-bottom:1px solid var(--border);font-weight:600;background:var(--surface-2)}
.receipts-row{display:grid;grid-template-columns:100px 110px 100px 1fr 140px 100px 90px 80px;gap:0;padding:11px 16px;border-bottom:1px solid var(--border);align-items:center;font-size:12.5px}
.receipts-row:last-child{border-bottom:none}
.receipts-row:hover{background:var(--surface-2)}
.receipts-row .col-mono{font-family:var(--mono);color:var(--text-2)}
.receipts-row .col-fleet{font-family:var(--mono);color:var(--primary);font-weight:700}
.receipts-row .col-sum{font-family:var(--mono);font-weight:600;text-align:right}
.bookkept-wrap{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3)}
.bookkept-wrap input{cursor:pointer}
.monthly-pivot{width:100%;border-collapse:collapse;font-size:12.5px}
.monthly-pivot th,.monthly-pivot td{border:1px solid var(--border);padding:7px 10px;text-align:right;font-family:var(--mono)}
.monthly-pivot th{background:var(--surface-2);color:var(--text-2);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.4px}
.monthly-pivot th:first-child,.monthly-pivot td:first-child{text-align:left;font-family:var(--font);font-weight:600;color:var(--primary)}
.monthly-pivot tr:last-child td{background:var(--surface-2);font-weight:700}

/* ═══════════════════════════════════════════
   UX-POLISH (animaatiot, opastus, esteettömyys)
═══════════════════════════════════════════ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Sivunvaihto-animaatio */
.page.active{animation:fadeInUp .25s ease-out}
/* Modaali-animaatiot */
.svc-modal-backdrop,.fault-modal-backdrop{animation:fadeIn .15s ease}
.svc-modal,.fault-modal{animation:scaleIn .2s ease-out}

/* Hover/focus-palaute napeille — selkeä kaikenikäisille */
.btn:focus-visible,.nav-item:focus-visible,.filter-btn:focus-visible,.sort-btn:focus-visible,
.fault-filter-pill:focus-visible,.fault-status-btn:focus-visible,.stat-card-btn:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px
}
.btn:active{transform:translateY(1px)}
.nav-item{transition:all .15s}

/* Vahvistettu klikki-feedback statistiikkakorteille */
.stat-card-btn:active{transform:scale(.98)}

/* OPASTUS — kysymysmerkki-nappi */
.help-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--surface-2);
  color:var(--text-3);border:1px solid var(--border);cursor:pointer;
  font-size:12px;font-weight:700;font-family:var(--mono);
  margin-left:6px;padding:0;line-height:1;transition:all .15s;flex-shrink:0
}
.help-btn:hover{background:var(--primary-bg);color:var(--primary);border-color:var(--primary)}

/* TOOLTIP — JS-pohjainen tip-portal joka renderöi body:n loppuun.
   Näin tooltip ei leikkaudu vanhempi-elementtien overflow:hidden -asetuksesta. */
#tip-portal{
  position:fixed;background:var(--text);color:var(--surface);padding:7px 11px;
  border-radius:6px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.01em;
  max-width:280px;box-shadow:var(--shadow-lg);pointer-events:none;z-index:10000;
  opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;
  white-space:normal;word-wrap:break-word;
}
#tip-portal.show{opacity:1;transform:translateY(0)}
#tip-portal::after{
  content:'';position:absolute;left:var(--arrow-x,50%);transform:translateX(-50%);
  border:5px solid transparent;
}
#tip-portal[data-pos="above"]::after{top:100%;border-top-color:var(--text)}
#tip-portal[data-pos="below"]::after{bottom:100%;border-bottom-color:var(--text)}

/* SIVUOPASTUS — kohdistettu kierros järjestelmän läpi.
   Valokeila on yksi elementti jonka valtava box-shadow tummentaa kaiken muun:
   erillisistä peittolaatikoista tulee saumoja ja ne vuotavat vierityksessä.
   Sijainti asetetaan JS:stä joka ruudunpäivityksellä vierityksen aikana, joten
   tässä EI ole siirtymää topille/leftille — se laahaisi vierityksen perässä. */
.opas-este{position:fixed;inset:0;z-index:9390;background:transparent}
.opas-valokeila{position:fixed;z-index:9400;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(15,23,42,.66), 0 0 0 2px var(--primary), 0 0 0 7px color-mix(in srgb, var(--primary) 26%, transparent),
             0 18px 48px rgba(0,0,0,.28);
  transition:width .18s ease,height .18s ease}
.opas-kortti{position:fixed;z-index:9401;background:var(--surface);border-radius:16px;padding:20px 22px 18px;
  width:min(380px, calc(100vw - 32px));border:1px solid var(--border);
  box-shadow:0 24px 64px rgba(15,23,42,.30), 0 2px 8px rgba(15,23,42,.10);
  opacity:0;transition:opacity .22s ease, top .26s cubic-bezier(.4,0,.2,1), left .26s cubic-bezier(.4,0,.2,1)}
.opas-kortti-keskella{top:50% !important;left:50% !important;transform:translate(-50%,-50%);width:min(440px, calc(100vw - 32px));padding:28px 28px 22px}
/* Kolmio osoittaa kohteeseen. Kortti asettuu joko ala- tai yläpuolelle ja
   kolmio kääntyy sen mukana — ilman sitä kortti kelluu irrallaan. */
.opas-kortti[data-suunta]::before{content:'';position:absolute;width:14px;height:14px;
  background:var(--surface);border:1px solid var(--border);transform:rotate(45deg)}
/* Nuolen paikka lasketaan JS:ssä: kortti siirtyy ruudun reunasta sisäänpäin,
   jolloin kiinteä nuoli osoittaa kortin reunaan eikä siihen mitä valokeila
   korostaa. --nuoli on kohteen keskikohta kortin koordinaateissa. */
.opas-kortti[data-suunta="alla"]::before{top:-8px;left:var(--nuoli,30px);border-right:none;border-bottom:none}
.opas-kortti[data-suunta="ylla"]::before{bottom:-8px;left:var(--nuoli,30px);border-left:none;border-top:none}
.opas-kortti[data-suunta="oikea"]::before{left:-8px;top:var(--nuoli,28px);border-right:none;border-top:none}
.opas-kortti[data-suunta="vasen"]::before{right:-8px;top:var(--nuoli,28px);border-left:none;border-bottom:none}
.opas-kortti-keskella::before{display:none}
.opas-vaihe{font-size:11px;font-family:var(--mono);letter-spacing:.7px;text-transform:uppercase;color:var(--primary);margin-bottom:7px}
.opas-otsikko{font-size:17px;font-weight:700;letter-spacing:-.25px;margin-bottom:7px;color:var(--text);line-height:1.3}
.opas-kortti-keskella .opas-otsikko{font-size:21px}
.opas-teksti{font-size:13.5px;line-height:1.6;color:var(--text-2)}
.opas-kortti-keskella .opas-teksti{font-size:14.5px}
.opas-teksti strong{color:var(--text);font-weight:600}
.opas-napit{display:flex;align-items:center;gap:8px;margin-top:18px}
.opas-pisteet{display:flex;gap:4px;margin-right:auto;align-items:center}
.opas-piste{width:6px;height:6px;border-radius:50%;background:var(--border);transition:all .2s ease}
.opas-piste.on{background:var(--primary);width:18px;border-radius:3px}
.opas-ohita{background:none;border:none;color:var(--text-3);font-size:12.5px;cursor:pointer;padding:6px 4px}
.opas-ohita:hover{color:var(--text-2);text-decoration:underline}
.opas-ensisijainen{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600}
.opas-ensisijainen:hover{filter:brightness(1.07)}
@media (prefers-reduced-motion: reduce){
  .opas-kortti,.opas-valokeila,.opas-piste{transition:none}
}
@media (max-width:720px){
  .opas-kortti{left:16px !important;right:16px;width:auto}
  .opas-kortti::before{display:none}
}

/* ONBOARDING-TOUR */
.onboarding-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s}
.onboarding-card{background:var(--surface);border-radius:16px;padding:32px;max-width:520px;width:100%;box-shadow:var(--shadow-xl);animation:scaleIn .25s ease-out}
.onboarding-step{display:none}
.onboarding-step.active{display:block;animation:fadeInUp .25s}
.onboarding-icon{font-size:42px;margin-bottom:14px;display:inline-block}
.onboarding-title{font-size:22px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px}
.onboarding-text{font-size:14px;color:var(--text-2);line-height:1.6;margin-bottom:20px}
.onboarding-text strong{color:var(--text)}
.onboarding-text ul{margin:8px 0 0;padding-left:20px}
.onboarding-text li{margin-bottom:6px}
.onboarding-progress{display:flex;justify-content:center;gap:6px;margin-bottom:20px}
.onb-dot{width:8px;height:8px;border-radius:50%;background:var(--border-2);transition:all .2s}
.onb-dot.active{background:var(--primary);width:24px;border-radius:4px}
.onboarding-actions{display:flex;gap:10px;justify-content:space-between;align-items:center}
.onb-skip{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:13px;padding:6px}
.onb-skip:hover{color:var(--text-2)}

/* HELP-MODAALI */
.help-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:8000;display:none;align-items:flex-start;justify-content:center;padding:40px 24px;overflow-y:auto;animation:fadeIn .15s}
.help-modal-backdrop.show{display:flex}
.help-modal{background:var(--surface);border-radius:16px;max-width:720px;width:100%;box-shadow:var(--shadow-xl);overflow:hidden;animation:scaleIn .2s ease-out}
.help-modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.help-modal-title{font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px}
.help-modal-close{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:20px;padding:6px;border-radius:6px}
.help-modal-close:hover{background:var(--surface-2);color:var(--text)}
.help-modal-body{padding:20px 24px;max-height:70vh;overflow-y:auto}
.help-search{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;margin-bottom:18px;background:var(--surface-2);color:var(--text);outline:none}
.help-search:focus{border-color:var(--primary);background:var(--surface)}
.help-section{margin-bottom:24px}
.help-section-title{font-size:13px;font-weight:700;color:var(--primary);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.help-item{padding:12px 14px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;transition:all .15s;cursor:pointer}
.help-item:hover{border-color:var(--border-2);background:var(--surface-2)}
.help-q{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;justify-content:space-between}
.help-q::after{content:'+';color:var(--text-3);font-size:18px;font-weight:400}
.help-item.open .help-q::after{content:'−'}
.help-a{font-size:13.5px;color:var(--text-2);line-height:1.6;margin-top:10px;display:none}
.help-a strong{color:var(--text)}
.help-item.open .help-a{display:block;animation:fadeIn .2s}
.help-a ul,.help-a ol{margin:6px 0 0;padding-left:22px}
.help-a li{margin-bottom:4px}

/* OHJEBANNERI — tiivis vinkki sivun ylälaidassa */
.info-banner{background:var(--primary-bg);border:1px solid #c5d3ff;border-radius:10px;padding:11px 16px;margin-bottom:18px;font-size:13px;color:var(--text-2);display:flex;align-items:flex-start;gap:10px;line-height:1.5}
[data-theme="dark"] .info-banner{border-color:rgba(102,144,255,.3)}
.info-banner-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.info-banner strong{color:var(--text)}

/* SUUREMMAT NAPIT — kun ne ovat ensisijaisia */
.btn-lg{padding:14px 24px;font-size:15px}

/* Pakottavat lomakekentät */
.form-label.required::after{content:' *';color:var(--danger);font-weight:700}

/* ═══════════════════════════════════════════
   PWA-ASENNUS — branded install-banneri
═══════════════════════════════════════════ */
.install-banner{position:fixed;bottom:20px;right:20px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:0 16px 40px rgba(0,0,0,.18),0 0 0 1px rgba(79,124,255,.15);display:none;align-items:center;gap:14px;max-width:380px;z-index:6000;animation:slideUpFade .3s ease-out}
.install-banner.show{display:flex}
@keyframes slideUpFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.install-banner-icon{width:48px;height:48px;border-radius:11px;background:linear-gradient(135deg,#4f7cff 0%,#3a66e6 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px;font-family:var(--font);flex-shrink:0;box-shadow:0 4px 12px rgba(79,124,255,.3)}
.install-banner-body{flex:1;min-width:0}
.install-banner-title{font-size:14px;font-weight:700;letter-spacing:-.1px;margin-bottom:2px}
.install-banner-sub{font-size:12.5px;color:var(--text-2);line-height:1.4}
.install-banner-actions{display:flex;gap:8px;flex-shrink:0}
.install-banner-btn{padding:8px 14px;border-radius:8px;border:none;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:all .12s}
.install-banner-btn-primary{background:var(--primary);color:#fff}
.install-banner-btn-primary:hover{background:var(--primary-hover)}
.install-banner-btn-ghost{background:transparent;color:var(--text-3);padding:8px 10px}
.install-banner-btn-ghost:hover{color:var(--text-2);background:var(--surface-2)}
.install-banner-close{background:none;border:none;color:var(--text-4);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:5px;line-height:1;position:absolute;top:6px;right:8px}
.install-banner-close:hover{color:var(--text-2)}

/* iOS-ohjemodaali */
.ios-install-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9100;display:none;align-items:flex-end;padding:0;animation:fadeIn .2s}
.ios-install-overlay.show{display:flex}
.ios-install-sheet{background:var(--surface);border-radius:20px 20px 0 0;padding:22px;width:100%;animation:slideUpFade .25s ease-out}
.ios-install-title{font-size:18px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.ios-install-sub{font-size:13px;color:var(--text-2);margin-bottom:18px;line-height:1.5}
.ios-step{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.ios-step:last-child{border-bottom:none}
.ios-step-num{width:30px;height:30px;border-radius:50%;background:var(--primary-bg);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-size:14px}
.ios-step-text{font-size:14px;line-height:1.4}
.ios-step-text strong{color:var(--primary)}

@media (max-width: 600px){
  .install-banner{left:12px;right:12px;bottom:12px;max-width:none}
}

/* ═══════════════════════════════════════════
   MOBIILIOPTIMOINTI — <900px
═══════════════════════════════════════════ */
.mobile-nav-toggle{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:8px;border-radius:6px}
.mobile-nav-toggle:hover{background:var(--surface-2)}
.mobile-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media (max-width: 900px){
  .mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  /* Sidebar täydessä korkeudessa myös iOS Safarissa (100dvh) */
  .sidebar{position:fixed;top:0;left:-260px;bottom:0;height:100vh;height:100dvh;z-index:100;transition:left .25s ease;box-shadow:2px 0 12px rgba(0,0,0,.2);overflow-y:auto}
  #app-shell.nav-open .sidebar{left:0}
  #app-shell.nav-open .mobile-nav-overlay{display:block}
  .topbar{padding:0 12px;gap:6px}
  .topbar-title{font-size:16px}
  /* Haku omalle rivilleen yläpalkin alle: huolto käyttää hallintaa puhelimella */
  .topbar{height:auto;min-height:56px;flex-wrap:wrap;row-gap:8px;padding:8px 12px 10px}
  .topbar-title{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar > button{flex-shrink:0}
  .search-wrapper{order:10;flex:1 1 100%}
  .search-box{width:100%;padding:10px 12px}
  /* 16px estää iOS:n automaattisen zoomauksen kenttään siirryttäessä */
  .search-box input{font-size:16px}
  .search-dropdown{left:0;right:0;width:auto;max-height:65vh}
  .search-result-item{padding-top:12px;padding-bottom:12px}
  /* Reunat kapeiksi: aiemmin .content 28px + .page 10px vei puhelimen
     leveydestä lähes viidenneksen. Alhaalla tilaa kelluvalle mittarinapille. */
  .content{padding:10px 10px 84px}
  .page{padding:0 !important}
  /* Huoltopuolen sivujen otsikko näkyy jo yläpalkissa, joten iso toisto pois.
     Yksityiskohtasivuilla otsikkona on auton tai henkilön nimi, se jää. */
  :is(#page-dashboard,#page-vehicles,#page-map,#page-calendar,#page-spare,#page-faults,#page-equipment) > .page-header .page-title-block .h{display:none}
  .page-header{flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
  .page-header .h{font-size:20px}
  /* Fault-lista mobiilissa: ei nowrap, badge alle */
  .fault-item{padding:12px 14px !important;gap:10px !important;flex-wrap:wrap !important}
  .fault-item > div:nth-child(2){min-width:0;flex:1 1 auto}
  .fault-time{white-space:normal !important;text-align:left !important;flex-basis:100%;padding-top:2px;font-size:11px !important}
  /* Dash-cal-switchit (Kaikki/Myöhässä/Pian) — vaakascrolliksi jos ei mahdu */
  .dash-cal-switch{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dash-cal-switch::-webkit-scrollbar{display:none}
  .dash-cal-btn{flex-shrink:0;white-space:nowrap}
  /* Card-header pinoutuu mobiilissa jos otsikko + suodattimet eivät mahdu */
  .card-header{flex-wrap:wrap !important;gap:8px !important}
  /* Modaalit fullscreen mobiilissa */
  .svc-modal-backdrop,.fault-modal-backdrop{padding:0;align-items:stretch}
  .svc-modal,.fault-modal{max-width:100vw !important;width:100vw;max-height:100vh;height:100vh;border-radius:0;border:none}
  .svc-modal-body,.fault-modal-body{padding:16px;-webkit-overflow-scrolling:touch}
  .svc-modal-header,.fault-modal-header{padding:14px 16px}
  .svc-modal-footer,.fault-modal-footer{padding:12px 16px;flex-wrap:wrap}
  /* Taulukot: horisontaali-scroll wrapperissa */
  .stat-card{padding:12px !important;min-width:auto !important}
  .stat-icon{width:30px;height:30px;border-radius:8px;margin-bottom:8px}
  .stat-icon svg{width:16px;height:16px}
  .stat-label{margin-bottom:2px}
  .stat-value{font-size:24px}
  .stat-sub{margin-top:2px;font-size:11.5px}
  /* Etusivun kortti-gridit pinoiksi mobiilissa (päällekkäin, ei vierekkäin) */
  /* Tilakortit kahteen sarakkeeseen: neljä lukua mahtuu yhdelle näytölle */
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;margin-bottom:12px !important}
  .fleet-overview{grid-template-columns:1fr !important;gap:10px !important}
  .dash-grid{grid-template-columns:1fr !important;gap:12px !important}
  .dash-blocks{grid-template-columns:1fr !important;gap:12px !important}
  .svc-2col{grid-template-columns:1fr !important;gap:10px !important}
  .info-grid{grid-template-columns:1fr !important;gap:10px !important}
  /* Kanban vaakascroll (5 kolumnia ei mahdu) */
  .kanban-board{grid-template-columns:repeat(3,minmax(240px,1fr)) !important;overflow-x:auto !important;padding-bottom:10px}
  /* Taulukot menevät scrolliksi ilman että räjähtävät */
  .table-head,.vrow,.receipts-head,.receipts-row{overflow-x:auto;font-size:11.5px}
  /* Laitetiedot korteiksi: auto ja rekkari ylhäällä, kentät nimineen kahteen sarakkeeseen */
  #equipment-table .eq-row-head{display:none}
  #equipment-table .eq-row-body{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px 12px;padding:12px 14px;position:relative}
  #equipment-table .eq-row-body > :nth-child(1),#equipment-table .eq-row-body > :nth-child(2){font-size:14px !important;font-weight:700}
  #equipment-table .eq-row-body > :nth-child(3){grid-column:1 / -1;margin-top:-4px;color:var(--text-2)}
  #equipment-table .eq-row-body > [data-label]::before{content:attr(data-label);display:block;font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
  #equipment-table .eq-row-body > :nth-child(1)::before,#equipment-table .eq-row-body > :nth-child(2)::before,#equipment-table .eq-row-body > :nth-child(3)::before{display:none}
  #equipment-table .eq-row-body > .eq-nuoli{position:absolute;top:10px;right:14px}
  #eq-search{max-width:none !important}
  /* iPhone zoomaa sivun jokaiseen alle 16 px:n kenttään napautettaessa */
  .form-input,.form-select,.notes-textarea,textarea{font-size:16px !important}
  /* Ajoneuvorekisterin taulukko — pinoutuu korteiksi */
  .vrow,.table-head{display:block !important}
  .table-head{display:none !important}
  .vrow{padding:14px !important;border-radius:8px;background:var(--surface);margin-bottom:8px;border:1px solid var(--border)}
  .vrow > *{padding:2px 0 !important;font-size:13px !important}
  /* Sisältö ei saa levittää näkymää: flex-lapsen oletusleveys on sisällön levyinen */
  .app-layout{min-width:0}
  .app-layout > main{min-width:0}
  .content{min-width:0}
  .page-header > div{flex-wrap:wrap;max-width:100%}
  /* Ajoneuvorekisteri: tiivis kortti, kolme riviä yhden pitkän pinon sijaan.
     Auto ja rekkari | tila
     merkki ja malli | tyyppi
     mittari | huoltoon | katsastus | viat */
  .vehicle-table-card{overflow:visible;background:none;border:none;box-shadow:none}
  .vehicle-table-card .table-head,.vehicle-table-card #vehicle-table{min-width:0}
  #vehicle-table .vrow{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) auto;grid-template-areas:"fleet fleet reg status" "name name name type" "km svc insp faults";gap:6px 10px;padding:12px !important;margin-bottom:8px;align-items:start}
  #vehicle-table .vrow > *{padding:0 !important;min-width:0}
  #vehicle-table .vrow > :nth-child(1){grid-area:fleet;font-size:14px !important;white-space:nowrap}
  #vehicle-table .vrow > :nth-child(2){grid-area:reg;font-size:13px !important;white-space:nowrap;align-self:center}
  #vehicle-table .vrow > :nth-child(3){grid-area:name}
  #vehicle-table .vrow > :nth-child(3) .vname{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #vehicle-table .vrow > :nth-child(4){grid-area:insp}
  #vehicle-table .vrow > :nth-child(5){grid-area:type;justify-self:end}
  #vehicle-table .vrow > :nth-child(6){grid-area:status;justify-self:end}
  #vehicle-table .vrow > :nth-child(7){grid-area:km}
  #vehicle-table .vrow > :nth-child(8){grid-area:svc}
  #vehicle-table .vrow > :nth-child(9){grid-area:faults;justify-self:end;text-align:center}
  #vehicle-table .vrow > :nth-child(n+7):not(:nth-child(9)),#vehicle-table .vrow > :nth-child(4){font-size:12px !important;white-space:nowrap}
  #vehicle-table .vrow > :nth-child(7){font-size:12px !important}
  #vehicle-table .vrow .text-mono{font-size:12px !important}
  #vehicle-table .vrow .svc-km{padding:2px 6px;font-size:11px}
  #vehicle-table .vrow > :nth-child(4)::before,#vehicle-table .vrow > :nth-child(7)::before,#vehicle-table .vrow > :nth-child(8)::before,#vehicle-table .vrow > :nth-child(9)::before{display:block;font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
  #vehicle-table .vrow > :nth-child(4)::before{content:'Katsastus'}
  #vehicle-table .vrow > :nth-child(7)::before{content:'Mittari'}
  #vehicle-table .vrow > :nth-child(8)::before{content:'Huoltoon'}
  #vehicle-table .vrow > :nth-child(9)::before{content:'Viat'}
  /* Ajoneuvon tiedot: tunnus ja tila samalle riville, nimi ja tiedot koko leveydelle */
  .detail-header{padding:14px !important}
  .detail-header-main{flex-wrap:wrap;gap:12px !important}
  .detail-id-block{min-width:0;padding:8px 14px}
  .detail-header-main > .detail-info{order:3;flex:1 1 100%;min-width:0}
  .detail-header-main > :last-child{margin-left:auto}
  .detail-name{font-size:20px}
  /* Huoltokalenteri: viikko päivä kerrallaan allekkain, tyhjät päivät matalina */
  .cal-grid.cal-week{grid-template-columns:1fr;gap:6px}
  .cal-grid.cal-week .cal-day-cell{min-height:0;flex-direction:row}
  .cal-grid.cal-week .cal-day-header{flex-direction:column;justify-content:center;gap:0;min-width:64px;border-bottom:none;border-right:1px solid var(--border);padding:8px}
  .cal-grid.cal-week .cal-day-body{min-height:0;padding:6px 8px;justify-content:center}
  .cal-grid.cal-week .cal-entry{font-size:12.5px;padding:7px 10px}
  .cal-grid.cal-week .cal-empty{padding:6px;text-align:left}
  .cal-grid.cal-month{gap:2px}
  .cal-grid.cal-month .cal-day-cell{min-height:58px}
  .cal-view-switch{width:100%}
  .cal-view-btn{flex:1;padding:7px 6px;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;font-size:12.5px}
  /* Ajoneuvon välilehdet vierivät sivuttain yhdellä rivillä */
  .detail-tabs{width:auto;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .detail-tabs::-webkit-scrollbar{display:none}
  .detail-tab{white-space:nowrap;flex-shrink:0;padding:8px 12px}
  .cal-nav{gap:8px}
  .cal-week-label{font-size:13.5px}
  /* Käyttäjätaulukko myös korteiksi */
  #users-table > div{grid-template-columns:1fr !important;padding:14px !important;gap:6px !important}
  /* Kelluva mittarinappi kompaktimmaksi */
  #fab-mileage{right:14px;bottom:14px;padding:12px 16px;font-size:13px}
  /* Vika-suodattimet menevät vaakascrolliksi */
  .fault-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .fault-filter-pill{white-space:nowrap;flex-shrink:0}
}
@media (max-width: 380px){
  /* Pienimmät puhelimet: ajoneuvokortin alarivi kahdeksi riviksi */
  #vehicle-table .vrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"fleet reg status" "name name type" "km svc faults" "insp insp faults"}
}
@media (max-width: 600px){
  .topbar .theme-toggle{padding:6px}
  .btn-sm{padding:6px 10px;font-size:12px}
  /* Kanban: kapeampi swipe-alue */
  .kanban-board{grid-template-columns:repeat(3,minmax(200px,1fr)) !important}
  .page-header .h{font-size:18px}
  .page-header .sub{font-size:12px}
}

/* ═══════════════════════════════════════════
   KARTTANÄKYMÄ
═══════════════════════════════════════════ */
.map-container{position:relative;height:calc(100vh - 200px);min-height:480px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--surface-2)}
#fleet-map{width:100%;height:100%}
[data-theme="dark"] #fleet-map .leaflet-tile{filter:brightness(.7) contrast(1.1) saturate(.7)}
.map-overlay-panel{position:absolute;top:12px;right:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:12px;box-shadow:var(--shadow-lg);z-index:500;min-width:200px}
.map-overlay-panel .row{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px}
.map-overlay-panel .row:last-child{margin-bottom:0}
.map-overlay-panel .lbl{color:var(--text-3)}
.map-overlay-panel .val{font-weight:600;font-family:var(--mono)}
.map-legend{position:absolute;bottom:12px;left:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:11.5px;box-shadow:var(--shadow);z-index:500;display:flex;flex-direction:column;gap:5px}
.map-legend-item{display:flex;align-items:center;gap:7px}
.map-legend-dot{width:10px;height:10px;border-radius:50%}
.vehicle-marker{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50% 50% 50% 0;background:var(--primary);transform:rotate(-45deg);box-shadow:0 2px 8px rgba(0,0,0,.3);border:2px solid #fff;color:#fff;font-size:11px;font-weight:700;font-family:var(--mono)}
.vehicle-marker.marker-ACTIVE{background:var(--success)}
.vehicle-marker.marker-FAULT{background:var(--danger)}
.vehicle-marker.marker-SERVICE{background:var(--warning)}
.vehicle-marker.marker-SERVICE_SCHEDULED{background:var(--warning)}
.vehicle-marker.marker-INACTIVE{background:var(--text-3)}
.vehicle-marker > span{transform:rotate(45deg)}
.vehicle-marker.stale{opacity:.5}
.map-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-3);font-size:14px;text-align:center;padding:20px;background:var(--surface-2);z-index:400}
.map-empty .icon{font-size:42px;margin-bottom:14px}
.leaflet-popup-content-wrapper{border-radius:10px}
.map-popup{font-family:var(--font);font-size:13px;min-width:180px}
.map-popup .map-popup-fleet{font-family:var(--mono);color:var(--primary);font-weight:700;font-size:12px}
.map-popup .map-popup-name{font-weight:600;margin:4px 0 6px}
.map-popup .map-popup-meta{font-size:11.5px;color:var(--text-3);margin-bottom:8px}
.map-popup .map-popup-btn{display:inline-block;padding:5px 11px;background:var(--primary);color:#fff;border-radius:6px;font-size:11.5px;font-weight:600;text-decoration:none;cursor:pointer}
.map-popup .map-popup-btn:hover{background:var(--primary-hover)}

/* ═══════════════════════════════════════════
   REAALIAIKAISET VIKAILMOITUKSET — top-banneripino
═══════════════════════════════════════════ */
.fault-notif-stack{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:7000;display:flex;flex-direction:column;gap:8px;width:min(560px,calc(100vw - 24px));pointer-events:none}
.fault-notif{background:var(--surface);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18),0 0 0 1px var(--border);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;pointer-events:auto;animation:slideDownIn .35s cubic-bezier(.2,.85,.3,1.05);position:relative;overflow:hidden}
.fault-notif::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.fault-notif.sev-CRITICAL::before{background:var(--danger)}
.fault-notif.sev-HIGH::before{background:var(--orange)}
.fault-notif.sev-MEDIUM::before{background:var(--warning)}
.fault-notif.sev-LOW::before{background:var(--primary)}
.fault-notif.dismissing{animation:slideUpOut .25s ease-in forwards}
@keyframes slideDownIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slideUpOut{to{opacity:0;transform:translateY(-14px) scale(.97)}}
.fault-notif-icon{font-size:22px;flex-shrink:0;margin-top:1px}
.fault-notif-body{flex:1;min-width:0}
.fault-notif-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.fault-notif-fleet{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--primary);letter-spacing:.04em}
.fault-notif-sev{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.04em;text-transform:uppercase}
.fault-notif-sev-CRITICAL{background:var(--danger-bg);color:var(--danger)}
.fault-notif-sev-HIGH{background:var(--orange-bg,#fff4e5);color:var(--orange,#d97706)}
.fault-notif-sev-MEDIUM{background:var(--warning-bg);color:#92400e}
.fault-notif-sev-LOW{background:var(--primary-bg);color:var(--primary)}
[data-theme="dark"] .fault-notif-sev-MEDIUM{color:#fbbf24}
.fault-notif-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fault-notif-meta{font-size:11.5px;color:var(--text-3)}
.fault-notif-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;align-self:center}
.fault-notif-btn{padding:7px 14px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .12s;font-family:var(--font)}
.fault-notif-btn:hover{border-color:var(--border-2);background:var(--surface-2)}
.fault-notif-btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.fault-notif-btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.fault-notif-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--text-4);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:5px;line-height:1}
.fault-notif-close:hover{color:var(--text-2);background:var(--surface-2)}

/* CRITICAL-banneri: voimakas punainen overlay ja pulssi joka kiinnittää huomion */
.fault-notif.sev-CRITICAL{
  border-left:6px solid var(--danger);
  background:linear-gradient(135deg, rgba(239,68,68,.08) 0%, var(--surface) 60%);
  box-shadow:
    0 20px 60px rgba(239,68,68,.35),
    0 0 0 2px rgba(239,68,68,.55),
    0 0 0 10px rgba(239,68,68,.18),
    0 0 0 22px rgba(239,68,68,.08);
  animation: criticalPulse 1.8s ease-in-out infinite;
}
.fault-notif.sev-CRITICAL::before{width:6px;background:var(--danger)}
.fault-notif.sev-CRITICAL .fault-notif-icon{font-size:28px;animation: criticalIconShake 1.2s ease-in-out infinite}
.fault-notif.sev-CRITICAL .fault-notif-title{font-size:15px;font-weight:700;color:var(--danger)}
.fault-notif.sev-CRITICAL .fault-notif-sev-CRITICAL{background:var(--danger);color:#fff;font-size:11px;padding:3px 9px;letter-spacing:.08em}
@keyframes criticalPulse{
  0%, 100% {
    box-shadow:
      0 20px 60px rgba(239,68,68,.35),
      0 0 0 2px rgba(239,68,68,.55),
      0 0 0 10px rgba(239,68,68,.18),
      0 0 0 22px rgba(239,68,68,.08);
  }
  50% {
    box-shadow:
      0 20px 60px rgba(239,68,68,.5),
      0 0 0 3px rgba(239,68,68,.7),
      0 0 0 16px rgba(239,68,68,.22),
      0 0 0 34px rgba(239,68,68,.06);
  }
}
@keyframes criticalIconShake{
  0%, 100% { transform: rotate(0) }
  20% { transform: rotate(-6deg) }
  40% { transform: rotate(6deg) }
  60% { transform: rotate(-4deg) }
  80% { transform: rotate(4deg) }
}

/* Uuden vian "flash" työpöydällä — kiinnittää huomion uuteen riviin */
@keyframes faultRowFlash{
  0%   { background: rgba(79,124,255,.22); box-shadow: 0 0 0 3px rgba(79,124,255,.35) inset; }
  100% { background: transparent; box-shadow: none; }
}
.fault-row-flash{animation: faultRowFlash 3.4s ease-out 1}

/* ═══════════════════════════════════════════
   HUOLTOVARAUS-MODAALI
═══════════════════════════════════════════ */
.workshop-card{background:var(--surface-2);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.workshop-card.selected{border-color:var(--primary);background:var(--primary-bg)}
.workshop-name{font-size:14px;font-weight:700;color:var(--text)}
.workshop-meta{font-size:12.5px;color:var(--text-2);line-height:1.5;display:flex;flex-direction:column;gap:3px}
.workshop-meta a{color:var(--primary);text-decoration:none;font-weight:500}
.workshop-meta a:hover{text-decoration:underline}
.workshop-actions{display:flex;gap:8px;margin-top:4px}
.workshop-quick-btn{flex:1;padding:8px 10px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.workshop-quick-btn:hover{border-color:var(--primary);color:var(--primary)}

/* ═══════════════════════════════════════════
   AJONEUVON MUOKKAUS-MODAALI
═══════════════════════════════════════════ */
.ev-section-divider{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.ev-section-divider:first-child{margin-top:0}
.ev-checkbox-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface-2);border-radius:8px;cursor:pointer}
.ev-checkbox-row input{cursor:pointer}
.ev-checkbox-row:hover{background:var(--surface-3)}
.ev-custom-equip{margin-top:8px}
.ev-custom-row{display:flex;gap:6px;margin-bottom:6px}
.ev-custom-row .form-input{flex:1}
.ev-custom-row button{padding:7px 11px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--danger);cursor:pointer;font-size:13px}
.ev-add-row{display:flex;gap:6px;margin-top:6px}
.ev-add-row button{padding:8px 14px;border-radius:7px;background:var(--surface-2);border:1px dashed var(--border-2);color:var(--text-2);cursor:pointer;font-size:12.5px;font-weight:600;width:100%}
.ev-add-row button:hover{border-color:var(--primary);color:var(--primary)}

/* IKONIT — SVG-pohjaiset Lucide-tyyliset minimalistisikonit */
.ico{width:16px;height:16px;display:inline-block;vertical-align:-3px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ico-sm{width:13px;height:13px;vertical-align:-2px}
.ico-lg{width:20px;height:20px;vertical-align:-4px}
.ico-xl{width:28px;height:28px;vertical-align:-6px}
.ico-2xl{width:40px;height:40px;vertical-align:middle}
.ico-inline{vertical-align:middle;margin-right:6px}