/* GITO Pulse grafisk profil v2 (mappen gito-pulse-profil, filerna ligger i static/brand/).
   Pedagogiskt futuristisk: vit arbetsyta, mörkblå text och sidomeny, ljusblått bara som markör.
   Tunna linjer före skuggor, små radier, versala etiketter (.label), metadata i .data, tabulära siffror.
   Tokens kommer från brand/tokens.css (laddas före app.css). Här läggs de över appens egna namn och komponenterna
   ritas om. Laddas efter alla vyers css och före meny.css. Bara ljust tema: <html data-theme="light">. */

/* ---------------------------------------------------------------- appens namn → profilens tokens */
:root{
  --navy:var(--morkbla); --sky:var(--ljusbla); --volt:var(--ton);
  --bg:var(--surface); --surface-2:var(--surface-raised);
  --fg:var(--ink-body); --heading:var(--ink); --muted:var(--ink-muted); --line:var(--border);
  --plate:var(--info-bg); --mark:var(--accent);
  --side-bg:var(--nav); --side-fg:var(--ink-muted-on-dark); --side-active:var(--accent);
  --good:#00776F; --warn:#9A5A00; --crit:var(--puls);
  --good-bg:var(--klar-bg); --warn-bg:var(--varning-bg); --crit-bg:var(--fel-bg);
  --bar:var(--chart-1); --bar-2:var(--chart-2); --bar-soft:var(--skala); --grid:var(--border);
  --chart-muted:var(--chart-4);
  --note-bg:var(--info-bg); --note-line:var(--info-bg); --note-fg:var(--ink);
  --shadow:var(--shadow-card); --r:var(--radius-lg); --radius-xl:var(--radius-lg);
  --font:var(--font-sans);
  --focus:var(--morkbla);
  color-scheme:light;
}

/* ---------------------------------------------------------------- typografi */
body{font-family:var(--font-sans);font-size:14px;background:var(--surface);color:var(--ink-body)}
h1,h2,h3,h4{color:var(--ink)}
h1{font-size:26px;line-height:34px;font-weight:600;letter-spacing:-.01em}
h2{font-size:20px;line-height:28px;font-weight:700}
h3{font-size:16px;line-height:24px;font-weight:700}
.card h2,.card-h h2{font-size:16px;line-height:24px}
.eyebrow{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.num,.kpi .v,.kv dd,table.t td.r,.score,.lane-sum b,.stage-h span{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-muted)}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------------------------------------------------------------- ytor och kort: linjer före skuggor */
.card,.kpi,.co-head,.ent{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:none}
.lane,.stage,.hlane{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg)}
.lane.over{background:var(--info-bg);border-color:var(--accent)}
.lead,.deal,.cand,.signal{border-radius:var(--radius-md);box-shadow:var(--shadow-card);border-color:transparent}
.lead:hover,.deal:hover,.typebtn:hover{border-color:var(--border-strong)}
.signal,.cand{box-shadow:none;border-color:var(--border);background:var(--surface-raised)}
.typebtn{border-radius:var(--radius-lg)}
.typebtn[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.empty{border:1px dashed var(--skala);border-radius:var(--radius-md)}
.ent h3{background:var(--surface-raised);color:var(--ink);border-bottom:1px solid var(--border);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.ent h3 span{color:var(--ink-muted);letter-spacing:.02em;text-transform:none}
.ent.core h3{background:var(--nav);color:var(--ink-on-dark);border-bottom-color:var(--nav)}
.ent.core h3 span{color:var(--ink-muted-on-dark)}
.co-logo{border-radius:var(--radius-md);font-weight:700}
.co-logo.p{background:var(--ton);color:var(--vit)}
.co-logo.e{background:var(--surface-raised);color:var(--ink);border:1px solid var(--border)}
.ico{width:30px;height:30px;border-radius:var(--radius-md);background:var(--surface-raised);border:1px solid var(--border)}
.ico img{width:18px;height:18px}
.avatar{background:var(--morkbla);color:var(--vit);font-weight:600}
.avatar.p{background:var(--surface-raised);color:var(--ink);border:1px solid var(--border)}
.contact .avatar{background:var(--surface-raised);border:1px solid var(--border)}
.bik{width:16px;height:16px;flex:none;vertical-align:-3px}

/* ---------------------------------------------------------------- knappar: 40 px, radie 6, verb först */
.btn{border-radius:var(--radius-md);min-height:40px;box-sizing:border-box;padding:0 16px;font-size:14px;font-weight:600;
  background:var(--surface);border:1px solid var(--border-strong);color:var(--ink)}
.btn:hover{border-color:var(--ink);background:var(--surface)}
.btn.sm{min-height:32px;padding:0 10px;font-size:13px;border-radius:var(--radius-sm)}
.btn.primary{background:var(--action);border-color:var(--action);color:var(--on-action)}
.btn.primary:hover{background:var(--action-hover);border-color:var(--action-hover)}
.btn.sky{background:var(--surface);border-color:var(--accent);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.btn.sky:hover{border-color:var(--ink)}
.btn.fara,.btn.danger{color:var(--fel-text)}
.x{border-radius:var(--radius-sm)}

/* val: filter, segment och flikar. Vald = mörkblå, flik = 3 px ljusblå understrykning */
.filters button{border-radius:var(--radius-md);border-color:var(--border);color:var(--ink-muted);font-weight:500}
.filters button:hover{border-color:var(--border-strong);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action)}
.seg{border-radius:var(--radius-md);border-color:var(--border-strong)}
.seg button{color:var(--ink-muted);border-right-color:var(--border)}
.seg button[aria-pressed="true"]{background:var(--action);color:var(--on-action)}
.seller-tabs button{border-radius:var(--radius-md)}
.seller-tabs button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.tabs{border-bottom:1px solid var(--border)}
.tabs button{font-size:14px;color:var(--ink-muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.toggle input{background:var(--skala)}
.toggle input:checked{background:var(--action)}
.todo input,.weight input{accent-color:var(--action)}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-color:var(--border-strong)}

/* ---------------------------------------------------------------- statusindikator: vit droppe, signalprick, ordet i ink.
   Aldrig färgfyllda etiketter. Prickens färg kodar status eller affärstyp. */
.chip{--prick:transparent;border-radius:var(--radius-droppe) var(--radius-droppe) 0 var(--radius-droppe);background:var(--surface);color:var(--ink);
  border:1px solid var(--border);font-size:12px;font-weight:500;letter-spacing:.02em;padding:2px 8px;gap:6px}
.chip::before{content:"";width:8px;height:8px;flex:none;background:var(--prick);border-radius:4px 4px 0 4px;display:none}
.chip.good,.chip.warn,.chip.crit,.chip.depa,.chip.publik,.chip.ladd,.chip.boo,.chip.ret,.chip.cs{background:var(--surface);color:var(--ink)}
:is(.chip.good,.chip.warn,.chip.crit,.chip.depa,.chip.publik,.chip.ladd,.chip.boo,.chip.ret,.chip.cs)::before{display:block}
.chip.good,.chip.cs,.chip.depa{--prick:var(--status-vunnen)}
.chip.warn{--prick:var(--status-het)}
.chip.crit,.chip.ret{--prick:var(--status-forlorad)}
.chip.publik{--prick:var(--status-mote)}
.chip.ladd{--prick:var(--status-ny)}
.chip.boo{--prick:var(--ton)}
.chip.plain{background:var(--surface);color:var(--ink-muted);border-color:var(--border)}
.status-dot{border-radius:4px 4px 0 4px}
.status-dot.ok{background:var(--status-vunnen)} .status-dot.warn{background:var(--status-het)} .status-dot.off{background:var(--status-kall)}
.up{color:var(--good)} .down{color:var(--crit)}
.todo .due.late{color:var(--fel-text)}

/* ---------------------------------------------------------------- nyckeltal och mätare */
.kpi{padding:16px;gap:4px}
.kpi .l{order:-1;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.kpi .v{font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-feature-settings:"zero"}
.kpi .d{font-size:12px;font-weight:500;color:var(--ink-muted);letter-spacing:.02em}
.meter{height:6px;border-radius:var(--radius-full);background:var(--surface-raised);border:1px solid var(--border);
  background-image:linear-gradient(90deg,transparent calc(25% - 1px),var(--skala) 0 25%,transparent 0 calc(50% - 1px),var(--skala) 0 50%,transparent 0 calc(75% - 1px),var(--skala) 0 75%,transparent 0)}
.meter i{background:var(--accent)}
.factor .track,.bar-l .track{background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--border)}
.factor .track{height:6px}
.score{font-weight:700;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--border) 0)}
.score.hi{--c:var(--ink)} .score.mid{--c:var(--accent)} .score.lo{--c:var(--skala)}
.ag-ring .bg{stroke:var(--border)}
.ag-ring .fg{stroke:var(--accent)}
.ag-ring .n{font-weight:600}
svg.chart .g{stroke:var(--skala)}
svg.chart .b{fill:var(--chart-4)}
svg.chart .lbl{font-weight:600}
.legend i{border-radius:2px 2px 0 2px}

/* ---------------------------------------------------------------- tabeller: huvud på Paus, rader 48 px */
table.t{font-size:14px;line-height:20px;font-variant-numeric:tabular-nums}
table.t th{background:var(--surface-raised);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.12em;color:var(--ink-muted);padding:10px 12px;border-bottom:1px solid var(--border)}
table.t th:first-child{border-top-left-radius:var(--radius-sm)}
table.t th:last-child{border-top-right-radius:var(--radius-sm)}
table.t td{padding:13px 12px;border-bottom:1px solid var(--border)}
table.t tr.click:hover td{background:var(--surface-raised)}
.pl tr.sum td{border-top:1px solid var(--ink)}

/* ---------------------------------------------------------------- förklaringar (Förklaringar-knappen): meddelande i droppform */
.devnote{background:var(--info-bg);border:0;border-radius:var(--radius-droppe) var(--radius-droppe) 0 var(--radius-droppe);color:var(--ink);
  grid-template-columns:20px auto minmax(0,1fr);font-size:14px;line-height:20px}
.devnote::before{content:"";width:20px;height:20px;background:var(--ljusbla);-webkit-mask:url(/static/brand/ikoner-ui/currentcolor/info.svg) center/contain no-repeat;mask:url(/static/brand/ikoner-ui/currentcolor/info.svg) center/contain no-repeat}
.devnote .lbl{color:var(--ink);font-weight:600;letter-spacing:.12em}
@media (max-width:560px){.devnote{grid-template-columns:20px minmax(0,1fr)}.devnote > :not(.lbl):last-child{grid-column:1/-1}}

/* ---------------------------------------------------------------- sidomenyn: Mörkblå, 232 px, ljusblå linje längs högerkanten */
.side{background:var(--nav);color:var(--ink-muted-on-dark);box-shadow:inset -1px 0 0 rgba(0,181,226,.4)}
.side .logo{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;height:auto;min-height:48px;padding:0 0 0 8px}
.side .logo .logo-hel{height:28px;width:auto}
.side .logo .logo-rad{color:var(--ink-muted-on-dark);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.side .logo .logo-ikon{display:none;width:32px;height:32px}
.nav .grp{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.12em;color:var(--ink-muted-on-dark);opacity:.8;padding:16px 12px 6px}
.nav button{min-height:40px;box-sizing:border-box;padding:0 12px;border-radius:var(--radius-sm);gap:12px;font-size:14px;font-weight:500;color:var(--ink-muted-on-dark)}
.nav button img{width:20px;height:20px;opacity:.75}
.nav button:hover{background:var(--nav-hover);color:var(--ink-on-dark)}
.nav button:hover img,.nav button[aria-current="page"] img{opacity:1}
.nav button[aria-current="page"]{background:var(--nav-hover);color:var(--ink-on-dark);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.nav button:focus-visible,.side .foot .side-rad:focus-visible,.meny-nal:focus-visible{outline:2px solid var(--focus-on-dark);outline-offset:-2px}
.side .foot{border-top-color:rgba(179,196,217,.18)}
.side .foot .side-rad{color:var(--ink-muted-on-dark);font-size:13px}
.side .foot a.side-rad:hover,.side .foot button.side-rad:hover{background:var(--nav-hover);color:var(--ink-on-dark)}
.meny-nal:hover{background:var(--nav-hover)}
.meny-nal[aria-pressed="true"]{background:var(--nav-hover)}
/* infälld meny på dator: bara GITO-symbolen syns */
@media (min-width:861px){
  .app:not(.meny-ut):not(.meny-fast) .side .logo .logo-hel,.app:not(.meny-ut):not(.meny-fast) .side .logo .logo-rad{display:none}
  .app:not(.meny-ut):not(.meny-fast) .side .logo .logo-ikon{display:block}
  .app:not(.meny-ut):not(.meny-fast) .side .logo{padding-left:4px}
}

/* ---------------------------------------------------------------- topplisten och sidhuvudet (prickrutnät) */
.topbar{background:var(--surface);border-bottom:1px solid var(--border)}
.topbar .crumb{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.topbar .crumb b{color:var(--ink);font-weight:600}
.menu-btn span{background:var(--ink)}
.view-head,.ag-head{position:relative;padding:22px 24px 20px;border:1px solid var(--border);border-radius:var(--radius-lg);align-items:flex-end;
  background-color:var(--surface);background-image:radial-gradient(var(--rutnat) 1px,transparent 1.2px);background-size:16px 16px}
.view-head h1,.ag-head h1{font-size:26px;line-height:34px;font-weight:600;color:var(--ink)}
.view-head .h1-2,.ag-head .h1-2{display:inline;color:var(--ink-muted);font-weight:400}
.view-head .h1-2::before,.ag-head .h1-2::before{content:" "}
.view-head .t p,.ag-head .t p{color:var(--ink-muted)}
.ag-head #ag-sum{color:var(--ink);font-weight:600;font-size:15px}
.ag-head .ag-ring-w{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:6px 14px 6px 6px}
@media (max-width:860px){.view-head,.ag-head{padding:18px 16px 16px}}
@media (max-width:760px){.view-head h1,.ag-head h1{font-size:22px;line-height:28px}}

/* ---------------------------------------------------------------- laddning: ringens staplar fylls en i taget medurs */
.pulsladdar{display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 0;color:var(--ink-muted);font-size:12px;font-weight:500;letter-spacing:.02em}
.pulsladdar svg{width:64px;height:64px}
.pulsladdar .st{stroke:var(--skala);opacity:1;animation:pl-fyll 1.56s linear infinite}
.pulsladdar .sb{stroke:var(--ink)}
@keyframes pl-fyll{0%{stroke:var(--skala)}6%{stroke:var(--ljusbla)}55%{stroke:var(--ljusbla)}100%{stroke:var(--skala)}}
@media (prefers-reduced-motion:reduce){.pulsladdar .st{animation:none}}
.spinner{border-color:var(--border);border-top-color:var(--ink)}

/* ---------------------------------------------------------------- tomlägen på prickrutnät, bekräftelser */
.tomlage{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:32px 16px;border-radius:var(--radius-lg);
  background-color:var(--surface);background-image:radial-gradient(var(--rutnat) 1px,transparent 1.2px);background-size:16px 16px}
.tomlage img,.ag-tom .ag-illu{width:min(260px,80%);height:auto;margin-bottom:4px}
.tomlage h3{font-size:16px}
.tomlage p{color:var(--ink-muted);max-width:46ch;margin:0}
.fira{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,47,108,.45);animation:fira-in .2s ease-out}
.fira-kort{background:var(--nav);color:var(--ink-on-dark);border-radius:var(--radius-droppe) var(--radius-droppe) 0 var(--radius-droppe);padding:24px 28px;text-align:center;
  width:min(420px,calc(100% - 32px));box-shadow:var(--shadow-overlay);display:flex;flex-direction:column;align-items:center;gap:6px;animation:fira-upp .3s ease-out}
.fira-kort img{width:100%;height:auto;background:var(--surface);border-radius:var(--radius-md)}
.fira-kort h2{color:var(--ink-on-dark);font-size:20px;font-weight:600;margin-top:10px}
.fira-kort h2 span{display:block;color:var(--ljusbla)}
.fira-kort p{color:var(--ink-muted-on-dark);margin:0}
@keyframes fira-in{from{opacity:0}}
@keyframes fira-upp{from{opacity:0;transform:translateY(12px)}}

/* ---------------------------------------------------------------- överlägg: drawer, notis */
.scrim,.side-scrim{background:rgba(0,47,108,.35)}
.drawer{box-shadow:var(--shadow-overlay);border-left:1px solid var(--border)}
.drawer-h{border-bottom-color:var(--border)}
.toast{left:auto;right:24px;transform:none;background:var(--nav);color:var(--ink-on-dark);font-weight:500;font-size:14px;padding:12px 16px;
  border-radius:var(--radius-droppe) var(--radius-droppe) 0 var(--radius-droppe);box-shadow:var(--shadow-overlay)}
@media (max-width:860px){.toast{left:16px;right:16px;max-width:none}}

/* ---------------------------------------------------------------- inloggning: prickrutnät, ljus logotyp, toning i heron */
.login{background-color:var(--surface);background-image:radial-gradient(var(--rutnat) 1px,transparent 1.2px);background-size:16px 16px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px 72px}
.login-hero{display:flex;flex-direction:column;gap:24px;max-width:440px;color:var(--ink)}
.login-hero .login-logo{width:auto;height:52px;background:none;padding:0;align-self:flex-start}
.login-rubrik{color:var(--ink);font-size:36px;line-height:42px;font-weight:600;letter-spacing:-.02em}
.login-rubrik span{display:block;color:var(--ink-muted)}
.login-data{color:var(--ink-muted);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.login-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-overlay);background:var(--surface)}
.login-card h2{font-size:20px}
@media (max-width:760px){.login{gap:24px;align-content:center}.login-hero{align-items:center;text-align:center}.login-hero .login-logo{height:44px;align-self:center}.login-rubrik{font-size:28px;line-height:34px}}

/* ---------------------------------------------------------------- övrigt */
.poang-chip{display:inline-flex;align-items:center;gap:6px}
.pc-act{flex-wrap:wrap}
.pc-act button{display:inline-flex;align-items:center;gap:4px}
.osb.ljus::before{background:rgba(179,196,217,.36)}