/* bilskolan — yta.
   Måttstocken: en vy man vill arbeta i, förstår utan att fråga, och kan sälja in.
   Inga hämtade bibliotek: ikonerna är inline-SVG och scenen är rå WebGL. */

:root{
  --bak:#f4f6fa;
  --bak2:#eef1f7;
  --yta:#ffffff;
  --yta2:#fbfcfe;
  --kant:#e3e8f0;
  --kant2:#d3dbe8;
  --text:#0b1220;
  --svag:#5a6880;
  --svagare:#8492a8;
  --blå:#2563eb;
  --blåljus:#dbeafe;
  --lila:#7c3aed;
  --grön:#047857;
  --grönljus:#d1fae5;
  --röd:#be123c;
  --rödljus:#ffe4e6;
  --gul:#a16207;
  --gulljus:#fef3c7;
  --skugga: 0 1px 2px rgba(11,18,32,.04), 0 8px 24px -12px rgba(11,18,32,.16);
  --skugga-hög: 0 2px 4px rgba(11,18,32,.05), 0 24px 48px -20px rgba(11,18,32,.28);
  --r:14px;
  --r-liten:10px;
  --meny:252px;
}
:root[data-tema="mörk"], :root:not([data-tema="ljus"]){ }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="ljus"]){
    --bak:#080b12; --bak2:#0c1119; --yta:#111725; --yta2:#0e1420;
    --kant:#1e2736; --kant2:#2a3547; --text:#e8edf7; --svag:#9aa7bd; --svagare:#6b7a92;
    --blåljus:#15224a; --grönljus:#052e22; --rödljus:#3b0a1b; --gulljus:#332406;
    --grön:#34d399; --röd:#fb7185; --gul:#fbbf24; --blå:#60a5fa; --lila:#a78bfa;
    --skugga: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --skugga-hög: 0 2px 4px rgba(0,0,0,.5), 0 28px 56px -20px rgba(0,0,0,.75);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bak); color:var(--text);
  font:15px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1{font-size:26px;line-height:1.2;letter-spacing:-.025em;margin:0 0 6px;font-weight:680}
h2{font-size:17px;letter-spacing:-.015em;margin:0 0 2px;font-weight:650}
h3{font-size:14px;margin:0;font-weight:640}
p{margin:0}
.ledtext{color:var(--svag);font-size:14px;max-width:70ch}

/* ── skelett ─────────────────────────────────────────────────────────── */
.skal{display:grid;grid-template-columns:var(--meny) 1fr;min-height:100%}

aside{
  background:var(--yta); border-right:1px solid var(--kant);
  padding:18px 12px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:4px;
}
.logga{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;font-weight:700;letter-spacing:-.03em;font-size:18px}
.logga .bricka{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--blå),var(--lila));box-shadow:0 4px 12px -4px var(--blå);
}
aside a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-liten);
  color:var(--svag);text-decoration:none;font-weight:540;font-size:14.5px;
  transition:background .12s,color .12s;
}
aside a:hover{background:var(--bak2);color:var(--text)}
aside a.på{background:var(--blåljus);color:var(--blå);font-weight:620}
aside a svg{width:18px;height:18px;flex:none;opacity:.9}
.menyrubrik{padding:16px 11px 6px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--svagare)}
.menyfot{margin-top:auto;padding:12px 11px;border-top:1px solid var(--kant);font-size:12.5px;color:var(--svagare)}

main{padding:26px 30px 70px;max-width:1320px}
.sidhuvud{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}

/* ── scenen ──────────────────────────────────────────────────────────── */
.scen{
  position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:20px;
  background:linear-gradient(160deg,#0b1220,#131d33 45%,#0a1830);
  box-shadow:var(--skugga-hög); min-height:290px;
}
.scen canvas{display:block;width:100%;height:290px}
.scen-text{
  position:absolute;inset:0;padding:26px 28px;display:flex;flex-direction:column;
  justify-content:space-between;pointer-events:none;color:#fff;
}
.scen-text h2{font-size:21px;color:#fff;letter-spacing:-.02em}
.scen-text .ingress{color:#b7c6e4;font-size:14px;max-width:46ch;margin-top:4px}
.scen-mät{display:flex;gap:26px;flex-wrap:wrap}
.scen-mät div span{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#8da3c9}
.scen-mät div b{font-size:21px;font-weight:660;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.emblem{
  position:absolute;top:18px;right:20px;display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);
  color:#dbeafe;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
}
.emblem i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.25)}

/* ── kort och tal ────────────────────────────────────────────────────── */
.rutnät{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));margin-bottom:20px}
.kort{background:var(--yta);border:1px solid var(--kant);border-radius:var(--r);box-shadow:var(--skugga)}
.kort.luft{padding:18px}
.mätkort{padding:16px 18px 15px;position:relative;overflow:hidden}
.mätkort .topp{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.mätkort .ikon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.mätkort .ikon svg{width:16px;height:16px}
.i-blå{background:var(--blåljus);color:var(--blå)}
.i-grön{background:var(--grönljus);color:var(--grön)}
.i-röd{background:var(--rödljus);color:var(--röd)}
.i-gul{background:var(--gulljus);color:var(--gul)}
.mätkort .namn{font-size:13px;font-weight:600;color:var(--svag)}
.mätkort .tal{font-size:30px;font-weight:680;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.05}
.mätkort .tal.negativ{color:var(--röd)}
.mätkort .förklaring{margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--svag)}
.mätkort .glow{position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;
  filter:blur(38px);opacity:.16;pointer-events:none}

/* ── tabeller som listor ─────────────────────────────────────────────── */
.listhuvud{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;border-bottom:1px solid var(--kant);flex-wrap:wrap}
.svep{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--svagare);font-weight:640;font-size:11px;letter-spacing:.06em;
   text-transform:uppercase;padding:11px 16px;background:var(--yta2);border-bottom:1px solid var(--kant)}
td{padding:12px 16px;border-bottom:1px solid var(--kant);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr.klick{cursor:pointer;transition:background .1s}
tr.klick:hover{background:var(--bak2)}
.num{font-variant-numeric:tabular-nums;text-align:right}

.person{display:flex;align-items:center;gap:11px}
.bricka-namn{
  width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  font-weight:680;font-size:13px;color:#fff;letter-spacing:-.02em;
}
.person .under{font-size:12.5px;color:var(--svagare)}

.märke{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:620;white-space:nowrap}
.m-grön{background:var(--grönljus);color:var(--grön)}
.m-röd{background:var(--rödljus);color:var(--röd)}
.m-gul{background:var(--gulljus);color:var(--gul)}
.m-blå{background:var(--blåljus);color:var(--blå)}
.m-grå{background:var(--bak2);color:var(--svag)}
.märke svg{width:12px;height:12px}

/* framstegsring */
.ring{width:34px;height:34px;flex:none}
.ring circle{fill:none;stroke-width:4}
.ring .spår{stroke:var(--kant2)}
.ring .fyllt{stroke:var(--blå);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}

/* ── förklaringsruta ─────────────────────────────────────────────────── */
.hjälp{position:relative;display:inline-flex;vertical-align:middle;margin-left:5px}
.hjälp > svg{width:14px;height:14px;color:var(--svagare);cursor:help}
.hjälp .bubbla{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  width:262px;background:var(--text);color:var(--bak);padding:10px 12px;border-radius:10px;
  font-size:12.5px;line-height:1.5;font-weight:450;opacity:0;pointer-events:none;
  transition:opacity .14s,transform .14s;z-index:20;box-shadow:var(--skugga-hög);text-transform:none;letter-spacing:0;
}
.hjälp:hover .bubbla{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── tidslinje ───────────────────────────────────────────────────────── */
.dag{margin-bottom:18px}
.dagrubrik{display:flex;align-items:baseline;gap:10px;margin:0 2px 9px}
.dagrubrik b{font-size:14.5px;letter-spacing:-.01em}
.dagrubrik span{font-size:12.5px;color:var(--svagare)}
.pass{
  display:grid;grid-template-columns:78px 1fr auto;gap:16px;align-items:center;
  background:var(--yta);border:1px solid var(--kant);border-radius:var(--r);
  padding:13px 16px;margin-bottom:8px;box-shadow:var(--skugga);position:relative;overflow:hidden;
}
.pass::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kant2)}
.pass.klar::before{background:var(--grön)}
.pass.väntar::before{background:var(--gul)}
.pass .klock{font-variant-numeric:tabular-nums;font-weight:640;font-size:14.5px}
.pass .klock span{display:block;font-size:12px;color:var(--svagare);font-weight:500}
.pass .vem b{font-size:14.5px}
.pass .vem div{font-size:12.5px;color:var(--svag);margin-top:1px}
.pass .höger{display:flex;align-items:center;gap:12px}

/* spårremsa */
.spår{height:26px;width:120px;flex:none}
.spår path{fill:none;stroke:var(--blå);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spår .under{stroke:var(--kant2)}

knapp,button{
  font:inherit;font-weight:620;font-size:13.5px;border:1px solid var(--kant2);background:var(--yta);
  color:var(--text);padding:8px 14px;border-radius:9px;cursor:pointer;transition:.12s;
  display:inline-flex;align-items:center;gap:7px;
}
button:hover{border-color:var(--svagare)}
button svg{width:15px;height:15px}
button.primär{background:var(--blå);border-color:var(--blå);color:#fff}
button.primär:hover{filter:brightness(1.08)}
button.liten{padding:6px 11px;font-size:12.5px}

input,select{
  font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--kant2);border-radius:9px;
  background:var(--yta);color:var(--text);min-width:0;
}
input:focus,select:focus{outline:2px solid var(--blåljus);outline-offset:0;border-color:var(--blå)}
.sökruta{position:relative;display:flex;align-items:center}
.sökruta svg{position:absolute;left:11px;width:16px;height:16px;color:var(--svagare);pointer-events:none}
.sökruta input{padding-left:34px;min-width:250px}

dialog{
  border:1px solid var(--kant);border-radius:18px;background:var(--yta);color:var(--text);
  max-width:640px;width:calc(100% - 32px);padding:0;box-shadow:var(--skugga-hög);
}
dialog::backdrop{background:rgba(6,10,20,.55);backdrop-filter:blur(3px)}
.ruta-huvud{padding:20px 22px 16px;border-bottom:1px solid var(--kant);display:flex;gap:14px;align-items:center}
.ruta-kropp{padding:20px 22px}
.ruta-fot{padding:14px 22px;border-top:1px solid var(--kant);display:flex;justify-content:flex-end;gap:8px;background:var(--yta2);border-radius:0 0 18px 18px}
.fält{display:grid;grid-template-columns:170px 1fr;gap:9px 14px;font-size:14px;align-items:baseline}
.fält dt{color:var(--svag);font-size:13px}
.fält dd{margin:0;font-weight:540}

.tom{padding:44px 20px;text-align:center;color:var(--svagare)}
.tom svg{width:34px;height:34px;opacity:.45;margin-bottom:10px}

@media(max-width:980px){
  .skal{grid-template-columns:1fr}
  aside{position:static;height:auto;flex-direction:row;overflow-x:auto;align-items:center;
        border-right:0;border-bottom:1px solid var(--kant);padding:10px}
  aside .logga{padding:0 14px 0 6px}
  .menyrubrik,.menyfot{display:none}
  aside a{white-space:nowrap}
  main{padding:18px 16px 60px}
  .pass{grid-template-columns:68px 1fr;gap:12px}
  .pass .höger{grid-column:1/-1;justify-content:space-between;padding-top:4px}
  .fält{grid-template-columns:1fr}
}