/* ═════════ NorCRM designsystem v3 – komponentlag (tokens ligger øverst i styles.css) ═════════
   Lastes ETTER styles.css og oppgraderer alle eksisterende sider automatisk (stat, card, tabeller, kanban, badge, tabs, skjema …).
   Dokumentasjon: docs/DESIGN.md · Stilguide i appen: #/stilguide */

/* ── typografi og basis ── */
body{font-family:var(--font);font-feature-settings:"cv11","ss01","tnum" 0}
h1{font-size:clamp(22px,2vw,28px);font-weight:760;letter-spacing:-.03em}
.mono,td.num,td.r,.stat-v,.kv dd,.kcol-h small,.tab-c,.num{font-variant-numeric:tabular-nums}
a{color:var(--pri-t)}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:6px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:12px;top:-60px;z-index:300;background:var(--pri);color:#fff;padding:9px 14px;border-radius:10px;font-weight:650}.skip-link:focus{top:12px;text-decoration:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.btn{padding:var(--ctl-y) 15px}
.btn.primary{background:var(--grad);box-shadow:0 4px 14px -4px color-mix(in srgb,var(--c2) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.soft{background:var(--pri-l);color:var(--pri-t);border-color:transparent;box-shadow:none}.btn.soft:hover{background:var(--pri-m)}
.btn.danger{background:linear-gradient(135deg,#f0584d,#c8281d)}
.btn.ghost{color:var(--ink2)}.btn.ghost:hover{color:var(--pri-t)}
.btn[disabled]{pointer-events:none}
input,select,textarea{padding:var(--ctl-y) 12px;background:var(--panel)}
.icon-btn{color:var(--ink2)}.icon-btn:hover{color:var(--pri-t)}
.badge{color:color-mix(in srgb,var(--c) 50%,var(--ink));background:color-mix(in srgb,var(--c) 13%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.badge.with-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.badge.solid{background:var(--c);color:#fff;box-shadow:none}
.badge.sm{padding:0 8px;font-size:11px}
:is(.tone-ok,.badge.ok){--c:var(--ok)}.tone-warn,.badge.warn{--c:var(--warn)}.tone-bad,.badge.bad{--c:var(--bad)}.tone-info,.badge.info{--c:var(--info)}.tone-pri,.badge.pri{--c:var(--pri)}.tone-acc,.badge.acc{--c:var(--acc)}.tone-mute,.badge.mute{--c:var(--c8)}
.alert.ok{color:var(--ok-t)}.alert.err{color:var(--bad-t)}.alert.info{color:var(--pri-t)}
.hint{color:var(--pri-t)}
/* kategorifarger: .cat-1 … .cat-10 setter --c */
.cat-1{--c:var(--c1)}.cat-2{--c:var(--c2)}.cat-3{--c:var(--c3)}.cat-4{--c:var(--c4)}.cat-5{--c:var(--c5)}.cat-6{--c:var(--c6)}.cat-7{--c:var(--c7)}.cat-8{--c:var(--c8)}.cat-9{--c:var(--c9)}.cat-10{--c:var(--c10)}

/* ── applikasjonsskall ── */
.main{background:radial-gradient(900px 420px at 100% -10%,color-mix(in srgb,var(--acc) 7%,transparent),transparent 70%),radial-gradient(700px 380px at 0% -10%,color-mix(in srgb,var(--pri) 6%,transparent),transparent 70%),var(--bg)}
.side{width:256px;background:linear-gradient(185deg,var(--side) 0%,var(--side2) 100%);color:#c7d0ee;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.side::after{background:radial-gradient(420px 260px at 0% 0%,rgba(2,68,249,.4),transparent 70%),radial-gradient(360px 300px at 100% 100%,rgba(160,50,252,.22),transparent 70%)}
.side-top{display:flex;align-items:center;gap:6px;padding:16px 14px 6px 18px;min-height:64px}
.side-top .brand{padding:0;flex:1;min-width:0}
.brand-logo{display:block;height:30px;width:auto;max-width:100%}
.brand-icon{display:none;height:34px;width:34px}
.side .brand small{display:none}
.co-chip{margin:2px 14px 6px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:12px;color:rgba(214,222,246,.75);display:flex;gap:8px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-chip b{color:#fff;font-weight:650;overflow:hidden;text-overflow:ellipsis}
.side{overflow:hidden}.nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}.side-f,.side-top{flex:none}
.nav-g{padding:6px 12px 2px}
.nav-gl{display:flex;align-items:center;width:100%;gap:6px;border:0;background:none;font:inherit;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:rgba(199,208,238,.66);padding:9px 8px 5px;font-weight:700;cursor:pointer;text-align:left;border-radius:8px}
.nav-gl:hover{color:#fff}.nav-gl .chev{margin-left:auto;transition:transform .18s;opacity:.6}.nav-g.shut .nav-gl .chev{transform:rotate(-90deg)}.nav-g.shut .nav-items{display:none}
.nav-reorder .nav-gl{cursor:grab}
.nav a{padding:6px 10px 6px 7px;gap:10px;color:rgba(222,229,248,.88);font-weight:560;font-size:13.5px}
.nav a .ni{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--g,#8eacff) 18%,transparent);color:color-mix(in srgb,var(--g,#8eacff) 55%,#fff);transition:background .15s,transform .15s}
.nav a .ni .ic{opacity:1}
.nav a:hover .ni{background:color-mix(in srgb,var(--g,#8eacff) 30%,transparent)}
.nav a.on{background:linear-gradient(90deg,rgba(91,128,255,.30),rgba(160,50,252,.12));box-shadow:inset 0 0 0 1px rgba(150,170,255,.22)}
.nav a.on::before{left:-12px;background:linear-gradient(180deg,#5a80ff,#c07dff)}
.nav a.on .ni{background:var(--g,#5a80ff);color:#fff;box-shadow:0 4px 12px -3px var(--g,#5a80ff)}
.nav a.pinned::after{content:"";width:5px;height:5px;border-radius:50%;background:#8eacff;margin-left:auto;opacity:.0}
.nav a.hid{display:none}.nav-reorder a.hid{display:flex;opacity:.45}
.nav .cnt{margin-left:auto;background:var(--bad);color:#fff;font-size:10.5px;padding:0 6px;min-width:19px;line-height:18px}
.nav .cnt.soft{background:rgba(255,255,255,.14);color:#e6ebff}
.nav a .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-edit{display:none;margin-left:auto;gap:2px;flex:none}.nav-reorder .nav-edit{display:flex}.nav-reorder a .ni{display:none}.nav-reorder a{padding-left:10px}.nav-reorder .cnt{display:none}
.nav-edit button{border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:6px;width:20px;height:20px;display:grid;place-items:center;cursor:pointer;padding:0}.nav-edit button:hover{background:rgba(255,255,255,.22)}
.nav-reorder a{cursor:grab}.nav-drag{opacity:.4}.nav-over{outline:2px dashed #8eacff;outline-offset:-2px}
.side-f{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12)}
.side-mini-btns{display:flex;gap:4px}
.collapse-btn{margin:0;flex:1;font-size:12px;color:rgba(199,208,238,.65);padding:7px 10px}
.side-user{cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}.side-user:hover{background:rgba(255,255,255,.1)}
.side-user .avatar{background:var(--grad);color:#fff;box-shadow:none}
.side.mini{width:78px}.side.mini .brand-logo{display:none}.side.mini .brand-icon{display:block}.side.mini .side-top{justify-content:center;padding:16px 0 6px}.side.mini .side-top .tgl,.side.mini .co-chip,.side.mini .nav-gl .chev,.side.mini .side-mini-btns .reorder-btn,.side.mini .nav-gl{display:none}
.side.mini .nav-g{padding:2px 12px}.side.mini .nav a{padding:6px;justify-content:center}.side.mini .nav a .lbl{display:none}.side.mini .nav-g.shut .nav-items{display:block}
.side.mini .nav a:hover::after,.side.mini .nav a:focus-visible::after{content:attr(data-tip);position:fixed;left:84px;background:var(--ink);color:var(--bg);padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;z-index:200;pointer-events:none;box-shadow:var(--sh2);margin-top:-3px;opacity:1;width:auto;height:auto;border:0}
.side.mini .nav a .cnt{position:absolute;top:0;right:4px}
.side.mini .side-user .who{display:none}
.top{height:60px;gap:8px;padding:0 20px;background:color-mix(in srgb,var(--panel) 80%,transparent)}
.top .tgl{display:inline-grid}
.search{max-width:520px;flex:1 1 300px}
.search input{padding:9px 62px 9px 40px;border-radius:12px;background:var(--panel2);cursor:text}
.search kbd{display:flex;gap:2px;pointer-events:none}
.top .sep{width:1px;height:24px;background:var(--line);margin:0 4px}
.top .icon-btn.has-n .dot{top:2px;right:2px}
.dot{border-color:var(--panel);background:var(--bad)}
.top-lang{display:none}
.ws-btn{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 6px;border:1px solid var(--line);background:var(--panel);border-radius:12px;cursor:pointer;font:inherit;color:var(--ink);max-width:280px;box-shadow:var(--sh1);min-height:38px}
.ws-btn:hover{border-color:color-mix(in srgb,var(--pri) 35%,var(--line))}
.ws-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex:none;background:var(--grad-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 18%,transparent)}
.ws-name{font-weight:650;font-size:13px;line-height:1.15;text-align:left;min-width:0}.ws-name small{display:block;font-weight:500;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-name b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-pop{position:fixed;z-index:120;width:min(380px,calc(100vw - 20px));background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh2);overflow:hidden;animation:pop .16s}
.ws-pop .ws-q{padding:10px;border-bottom:1px solid var(--line)}
.ws-list{max-height:min(46vh,380px);overflow:auto;padding:6px}
.ws-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;cursor:pointer;width:100%;border:0;background:none;font:inherit;color:var(--ink);text-align:left}
.ws-item:focus-visible{outline:0}.ws-item:hover,.ws-item[aria-selected=true]{background:var(--pri-l)}.ws-item.cur{background:color-mix(in srgb,var(--pri) 9%,var(--panel))}
.ws-item .ws-ic{width:34px;height:34px;font-size:18px}
.ws-foot{border-top:1px solid var(--line);padding:6px;display:flex;flex-direction:column;background:var(--panel2)}
.ws-foot button,.ws-foot a{display:flex;align-items:center;gap:9px;padding:9px 10px;border:0;background:none;font:inherit;font-weight:600;color:var(--ink);border-radius:10px;cursor:pointer;text-align:left;text-decoration:none!important}.ws-foot button:hover,.ws-foot a:hover{background:var(--pri-l);color:var(--pri-t)}
.menu{position:fixed;z-index:130;min-width:210px;max-width:min(320px,calc(100vw - 16px));background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);padding:6px;animation:pop .14s}
.menu .mi{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;font:inherit;font-weight:560;color:var(--ink);border-radius:9px;cursor:pointer;text-align:left;text-decoration:none!important}
.menu .mi:hover,.menu .mi:focus-visible{background:var(--pri-l);color:var(--pri-t);outline:0}.menu .mi.danger{color:var(--bad-t)}.menu .mi .kb{margin-left:auto;font-size:11px;color:var(--muted)}.menu .mi[aria-checked=true]::after{content:"✓";margin-left:auto;color:var(--pri-t);font-weight:800}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 2px}.menu .mh{padding:6px 10px 3px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.menu .mu{display:flex;gap:10px;align-items:center;padding:8px 10px 10px}
.pop{border-radius:16px}
.notif-i{display:flex;gap:11px;padding:11px 16px;color:inherit!important;border-bottom:1px solid var(--line2);align-items:flex-start;text-decoration:none!important}.notif-i:hover{background:var(--panel2)}.notif-i.unread{background:color-mix(in srgb,var(--pri) 6%,var(--panel))}.notif-i .nd{width:8px;height:8px;border-radius:50%;background:var(--pri);margin-top:7px;flex:none}.notif-i:not(.unread) .nd{background:transparent}
.content{padding:26px 32px 100px;scroll-padding-top:20px}
.content:focus{outline:0}
/* copilot + hurtig-FAB */
.copilot-fab{position:fixed;right:96px;bottom:34px;z-index:59;display:flex;align-items:center;gap:8px;padding:11px 16px 11px 13px;border-radius:99px;border:0;font:inherit;font-weight:700;color:#fff;cursor:pointer;background:linear-gradient(135deg,#a032fc,#0244f9);box-shadow:0 12px 28px -8px rgba(110,50,250,.7),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .18s}
.copilot-fab:hover{transform:translateY(-2px)}.copilot-fab kbd{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.25);color:#fff;font-size:10.5px}
.top #ai-open{display:none}.copilot-fab[hidden]{display:none}
.fab-b{background:var(--grad)}
/* mobil */
.bnav{display:none}
@media(max-width:900px){
.side{width:288px!important;background:linear-gradient(185deg,var(--side),var(--side2))}
.side .brand-logo{display:block!important}.side .brand-icon{display:none!important}
.top{padding:0 10px;gap:4px}.top .tgl,.top .hide-md,.top .sep{display:none}.ws-btn .ws-name{display:none}.ws-btn{padding:4px;border-radius:11px}
.content{padding:16px 14px calc(150px + env(safe-area-inset-bottom))}
.bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(16px) saturate(1.4);border-top:1px solid var(--line);padding:4px 6px calc(4px + env(safe-area-inset-bottom));justify-content:space-around}
.bnav a,.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border:0;background:none;font:inherit;font-size:10.5px;font-weight:650;color:var(--muted);border-radius:10px;min-height:52px!important;text-decoration:none!important;cursor:pointer;min-width:0}
.bnav a span.t,.bnav button span.t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnav a.on{color:var(--pri-t)}.bnav a.on .ic{background:var(--pri-l);border-radius:99px;padding:3px 14px;box-sizing:content-box}
.fab{bottom:calc(76px + env(safe-area-inset-bottom));right:14px}.copilot-fab{bottom:calc(142px + env(safe-area-inset-bottom));right:14px;padding:11px}.copilot-fab span,.copilot-fab kbd{display:none}
.copilot-fab[hidden]{display:none}
#toasts{bottom:calc(86px + env(safe-area-inset-bottom))}
}
.sheet-ov{position:fixed;inset:0;z-index:110;background:rgba(8,13,27,.5);backdrop-filter:blur(3px);animation:fadein .15s}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:111;background:var(--panel);border-radius:22px 22px 0 0;box-shadow:var(--sh2);max-height:85vh;display:flex;flex-direction:column;animation:sheetin .22s cubic-bezier(.2,.9,.3,1);padding-bottom:env(safe-area-inset-bottom)}
@keyframes sheetin{from{transform:translateY(40px);opacity:0}}
.sheet-h{display:flex;align-items:center;padding:14px 18px 8px;font-weight:700;font-size:16px}.sheet-h:before{content:"";position:absolute;left:50%;top:7px;width:38px;height:4px;border-radius:9px;background:var(--line);transform:translateX(-50%)}
.sheet-b{overflow:auto;padding:4px 14px 18px}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sheet-grid a{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:12px 6px;border:1px solid var(--line);border-radius:14px;color:var(--ink)!important;font-size:12px;font-weight:600;text-decoration:none!important;background:var(--panel2)}
.sheet-grid a .ni{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--g,var(--pri)) 14%,transparent);color:var(--g,var(--pri))}
.sheet-g{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;margin:12px 4px 8px}

/* ── kommandopalett ── */
.palette{align-items:start;padding-top:12vh}
.palette .modal{width:min(640px,100%);border-radius:18px}.palette .modal-h{display:none}.palette .modal-b{padding:0;overflow:hidden}
.pal-in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}.pal-in input{border:0;box-shadow:none!important;padding:4px 0;font-size:16px;background:none}
.pal-l{max-height:min(52vh,460px);overflow:auto;padding:6px}
.pal-g{padding:8px 12px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.pal-i{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;cursor:pointer;color:var(--ink)}.pal-i[aria-selected=true]{background:var(--pri-l);color:var(--pri-t)}.pal-i .pi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--panel2);flex:none;color:var(--ink2)}.pal-i[aria-selected=true] .pi{background:var(--panel);color:var(--pri-t)}
.pal-f{display:flex;gap:14px;padding:9px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);background:var(--panel2)}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}.sc-r{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line2);gap:10px}
@media(max-width:700px){.sc-grid{grid-template-columns:1fr}}

/* ── sidehoder ── */
.page-h{margin-bottom:20px;align-items:flex-end}
.page-h h1{display:flex;align-items:center;gap:10px}
.page-h p{font-size:14px}
.ph{margin-bottom:22px}.ph-top{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.ph-crumb{font-size:12.5px;color:var(--muted);margin-bottom:6px;display:flex;gap:6px;align-items:center}.ph-crumb a{color:var(--muted)}.ph-crumb a:hover{color:var(--pri-t)}
.ph-t{display:flex;gap:14px;align-items:center;min-width:0}.ph-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--pri)) 14%,var(--panel));color:var(--c,var(--pri));flex:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--pri)) 20%,transparent)}
.ph-t h1{font-size:clamp(22px,2vw,28px)}.ph-t p{margin-top:2px;color:var(--muted)}
.ph-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ph .tabs,.ph .seg{margin:16px 0 0}
/* ── faner ── */
.tabs{background:color-mix(in srgb,var(--line) 50%,var(--bg));padding:3px;border-radius:12px}
.tab{padding:6px 14px}
.tab.on{color:var(--pri-t);background:var(--panel);box-shadow:var(--sh1),0 0 0 1px var(--line)}
.tabs.line{background:none;padding:0;border-radius:0;border-bottom:1px solid var(--line);gap:2px;display:flex;overflow-x:auto}
.tabs.line .tab{border-radius:0;padding:10px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;background:none!important;box-shadow:none!important}.tabs.line .tab.on{border-bottom-color:var(--pri);color:var(--pri-t)}
.seg{background:var(--panel2);padding:3px;border-radius:11px;gap:2px}.seg button{border-radius:8px;padding:5px 12px}.seg button.on{background:var(--panel);color:var(--pri-t);box-shadow:var(--sh1),0 0 0 1px var(--line)}
.chip{padding:5px 13px;font-size:12.5px}.chip.on{background:var(--pri-l);color:var(--pri-t);border-color:color-mix(in srgb,var(--pri) 40%,var(--line))}
.chip .x{margin-left:6px;opacity:.6}

/* ── kort og statistikk ── */
.card{border-radius:var(--r);box-shadow:var(--sh)}
.card-h h3{font-size:14.5px;letter-spacing:-.01em}
.card.accent{border-top:3px solid var(--c,var(--pri))}
.card.flat{box-shadow:none}
.stat{--t:var(--pri);background:linear-gradient(135deg,color-mix(in srgb,var(--t) 9%,var(--panel)) 0%,var(--panel) 62%);padding:15px 66px 14px 17px;border-color:color-mix(in srgb,var(--t) 16%,var(--line));min-height:92px}
.stat::after{display:none}
.stat::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--t)}
.stat-ic{width:40px;height:40px;right:14px;top:14px;border-radius:13px;background:color-mix(in srgb,var(--t) 16%,var(--panel));color:var(--t);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 18%,transparent)}
.stat-l{color:var(--ink2);font-weight:620}
.stat-v{letter-spacing:-.03em;font-weight:760}
.stat-s{color:var(--muted)}
a.stat{color:inherit;text-decoration:none!important;cursor:pointer}
.stat-trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;border-radius:99px;padding:1px 7px 1px 5px;margin-top:5px;color:var(--ok-t);background:color-mix(in srgb,var(--ok) 14%,var(--panel))}
.stat-trend.down{color:var(--bad-t);background:color-mix(in srgb,var(--bad) 12%,var(--panel))}.stat-trend.flat{color:var(--muted);background:var(--panel2)}
.stat .spark{position:absolute;right:10px;bottom:8px;opacity:.9}
.stat.has-spark{padding-bottom:30px}
/* temaer for stat via gruppefarge-rotasjon i rutenett */
:where(.grid)>.stat:nth-child(8n+2){--t:var(--c2)}:where(.grid)>.stat:nth-child(8n+3){--t:var(--c3)}:where(.grid)>.stat:nth-child(8n+4){--t:var(--c4)}:where(.grid)>.stat:nth-child(8n+5){--t:var(--c5)}:where(.grid)>.stat:nth-child(8n+6){--t:var(--c7)}:where(.grid)>.stat:nth-child(8n+7){--t:var(--c9)}:where(.grid)>.stat:nth-child(8n+8){--t:var(--c1)}
.stat[data-tone]{--t:var(--tone)}
.stat[data-tone=ok]{--t:var(--c4)}.stat[data-tone=warn]{--t:var(--c5)}.stat[data-tone=bad]{--t:var(--c6)}.stat[data-tone=info]{--t:var(--c3)}.stat[data-tone=acc]{--t:var(--c2)}.stat[data-tone=pri]{--t:var(--c1)}
.hero-d{border-radius:20px;background:linear-gradient(120deg,#08124a 0%,#0244f9 58%,#a032fc 135%)}
/* ── tabeller ── */
.tbl{border-radius:inherit}
.tbl table{border-collapse:separate;border-spacing:0}
th{background:var(--panel2);color:var(--ink2);font-size:11.5px;position:sticky;top:0;z-index:2;padding:10px 14px;letter-spacing:.045em}
td{padding:var(--cell-y) 14px}
tr.click:hover td,tbody tr:hover td{background:color-mix(in srgb,var(--pri) 5%,var(--panel))}
tr.sel td{background:var(--pri-l)!important}
th.sortable{cursor:pointer;user-select:none}th.sortable:hover{color:var(--pri-t)}th.sortable::after{content:"↕";margin-left:5px;opacity:.35;font-size:10px}th[aria-sort=ascending]::after{content:"↑";opacity:1;color:var(--pri-t)}th[aria-sort=descending]::after{content:"↓";opacity:1;color:var(--pri-t)}
th.r,td.r{text-align:right}
.card>.card-b:has(.tbl){padding:0}
.tbl-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.tbl-wrap .tbl{max-height:var(--tbl-h,none);overflow:auto}
.tbl-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;background:var(--panel2);flex-wrap:wrap}
td.act{width:44px;text-align:right}
.cell-who{display:flex;align-items:center;gap:10px;min-width:0}.cell-who b{display:block;font-weight:650}.cell-who span{color:var(--muted);font-size:12px}
/* ── filterlinje ── */
.fbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.fbar .fq{position:relative;flex:1 1 220px;max-width:340px}.fbar .fq input{padding-left:36px}.fbar .fq .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.fbar .sp{flex:1}.fbar select{width:auto;min-width:130px}
.fbar-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.views{display:flex;gap:4px;align-items:center;overflow-x:auto}.views .chip{white-space:nowrap}
/* ── kanban ── */
.kanban{gap:14px;padding-bottom:16px;scroll-snap-type:x proximity}
.kcol{--col:var(--c8);flex:0 0 296px;background:color-mix(in srgb,var(--col) 6%,var(--bg2));border:1px solid color-mix(in srgb,var(--col) 16%,var(--line));border-top:3px solid var(--col);border-radius:16px;padding:10px;scroll-snap-align:start}
.kcol.over{outline:2px dashed var(--col);background:color-mix(in srgb,var(--col) 12%,var(--bg2))}
.kcol-h{padding:3px 6px 11px;gap:8px;font-size:13.5px}
.kcol-h i{width:10px;height:10px;box-shadow:0 0 0 3px color-mix(in srgb,var(--col) 22%,transparent)}
.kcol-h small{background:color-mix(in srgb,var(--col) 14%,var(--panel));color:color-mix(in srgb,var(--col) 45%,var(--ink));border-radius:99px;padding:1px 9px;font-weight:700}
.kcol-sum{padding:0 6px 10px;margin-top:-7px;font-size:12px;color:var(--muted);font-weight:600}
.kcard{border-radius:13px;padding:12px 13px;box-shadow:var(--sh1);border:1px solid var(--line);position:relative}
.kcard:hover{border-color:color-mix(in srgb,var(--col,var(--pri)) 55%,var(--line));box-shadow:var(--sh)}
.kcard h4{font-size:13.5px;letter-spacing:-.005em}
.kc-meta{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12px;color:var(--muted);flex-wrap:wrap}.kc-meta .val{font-weight:760;color:var(--ink);font-size:13.5px;font-variant-numeric:tabular-nums}.kc-meta .right{margin-left:auto}
.kc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.kc-due{display:inline-flex;gap:4px;align-items:center}.kc-due.late{color:var(--bad-t);font-weight:700}.kc-due.soon{color:var(--warn-t);font-weight:650}
.kc-pts{background:color-mix(in srgb,var(--c2) 15%,var(--panel));color:color-mix(in srgb,var(--c2) 70%,var(--ink));border-radius:99px;padding:0 8px;font-weight:700;font-size:11.5px}
/* ── avatar / grupper ── */
.avatar{background:color-mix(in srgb,var(--av,var(--pri)) 16%,var(--panel));color:color-mix(in srgb,var(--av,var(--pri)) 50%,var(--ink));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--av,var(--pri)) 22%,transparent)}
.avatars{display:inline-flex}.avatars .avatar{box-shadow:0 0 0 2px var(--panel)}.avatars .avatar+.avatar{margin-left:-8px}
/* ── fremdrift ── */
.bar{height:8px;background:color-mix(in srgb,var(--line) 80%,transparent)}.bar i{background:var(--c,var(--pri))}.bar.grad i{background:var(--grad)}.bar.sm{height:5px}.bar.lg{height:12px}
.pring{--p:0;--c:var(--pri);--s:64px;width:var(--s);height:var(--s);border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),color-mix(in srgb,var(--line) 80%,transparent) 0);display:grid;place-items:center;flex:none}.pring>span{width:calc(var(--s) - 14px);height:calc(var(--s) - 14px);border-radius:50%;background:var(--panel);display:grid;place-items:center;font-weight:760;font-size:calc(var(--s)*.26);letter-spacing:-.03em}
/* ── tidslinje ── */
.tl-i::before{background:var(--c,var(--pri));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--pri)) 20%,var(--panel))}
.tl-i .tl-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.tl-i .tl-h b{font-weight:650}
.feed{display:flex;flex-direction:column}.feed-i{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2)}.feed-i:last-child{border:0}.feed-i .fi-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c,var(--pri)) 14%,var(--panel));color:var(--c,var(--pri))}
/* ── tomtilstand ── */
.empty{padding:44px 20px}
.empty-art{width:160px;height:auto;margin:0 auto 10px;display:block;color:var(--pri)}
.empty-ic{width:56px;height:56px;border-radius:18px;background:var(--grad-soft);color:var(--pri)}
.empty .actions{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}
/* ── skjelett ── */
.sk{background:linear-gradient(90deg,color-mix(in srgb,var(--line) 70%,transparent) 25%,color-mix(in srgb,var(--line) 30%,transparent) 50%,color-mix(in srgb,var(--line) 70%,transparent) 75%);background-size:200% 100%;animation:sk 1.3s linear infinite;border-radius:8px;height:14px}
@keyframes sk{to{background-position:-200% 0}}
.sk.h1{height:28px;width:220px}.sk.circle{border-radius:50%}.sk.card-s{height:92px;border-radius:14px}
.sk-rows{display:flex;flex-direction:column;gap:14px;padding:16px}.sk-row{display:flex;gap:14px;align-items:center}
/* ── skuffe (drawer) ── */
.drawer-ov{position:fixed;inset:0;z-index:100;background:rgba(8,13,27,.45);backdrop-filter:blur(3px);animation:fadein .15s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(var(--dw,520px),100vw);z-index:101;background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--sh2);display:flex;flex-direction:column;animation:drin .22s cubic-bezier(.2,.9,.3,1)}
@keyframes drin{from{transform:translateX(40px);opacity:0}}
.drawer-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}.drawer-h h2{flex:1;font-size:17px;min-width:0}
.drawer-b{flex:1;overflow:auto;padding:20px}.drawer-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--panel2)}
/* ── detaljside ── */
.dh{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:18px 20px;margin-bottom:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--pri) 6%,var(--panel)),var(--panel) 55%);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.dh-t{flex:1;min-width:220px}.dh-t h1{font-size:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.dh-meta{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:6px;color:var(--muted);font-size:13px}.dh-meta span{display:inline-flex;gap:6px;align-items:center}
.dh-act{display:flex;gap:8px;flex-wrap:wrap}
/* ── toast ── */
#toasts{z-index:220}
.toast{border-radius:14px;background:var(--ink);color:var(--bg);align-items:center}
.toast.info::before{content:"i";background:var(--info)}.toast.warn::before{content:"!";background:var(--warn);color:#1b1100}
.toast .t-act{margin-left:8px;border:0;background:rgba(255,255,255,.16);color:inherit;font:inherit;font-weight:700;border-radius:8px;padding:3px 10px;cursor:pointer}
.toast .t-x{border:0;background:none;color:inherit;opacity:.6;cursor:pointer;padding:2px 0 2px 6px;font-size:16px;line-height:1}
/* ── modal ── */
.modal{border-radius:20px;background:var(--panel)}
.modal-h h2{font-size:18px}
/* ── diagram ── */
.chart{display:block;max-width:100%;height:auto;overflow:visible}.chart text{font:11px var(--font);fill:var(--muted)}.chart .gl{stroke:var(--line);stroke-width:1}.chart .ax{stroke:var(--line);stroke-width:1}
.chart .lbl-v{fill:var(--ink2);font-weight:650}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12px;color:var(--ink2)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.chart-tip{position:fixed;z-index:200;background:var(--ink);color:var(--bg);padding:6px 10px;border-radius:9px;font-size:12px;pointer-events:none;box-shadow:var(--sh2);font-variant-numeric:tabular-nums}
details.chart-alt{margin-top:8px;font-size:12.5px;color:var(--muted)}details.chart-alt summary{cursor:pointer}
/* ── stilguide ── */
.sg-sec{margin-bottom:34px}.sg-sec>h2{margin-bottom:12px;font-size:18px}.sg-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}.sg-sw div{border-radius:10px;padding:26px 8px 6px;font-size:11px;font-weight:650;border:1px solid var(--line)}
/* ── densitet ── */
:root[data-density=compact] .list-i{padding:6px 0}:root[data-density=compact] .card-b{padding:10px 14px 12px}:root[data-density=compact] .content{padding-top:18px}
/* ── forskjellig ── */
kbd{background:var(--panel2);color:var(--ink2)}
.auth-art{background:linear-gradient(150deg,#070b2a 0%,#0a1a7a 42%,#0244f9 85%,#7a35f2 120%)}
.auth-art::after{background:radial-gradient(circle,rgba(160,50,252,.5),transparent 65%)}
.auth-logo{height:40px;width:auto;display:block}
.auth-card .auth-logo-sm{display:none;height:34px;margin:0 0 22px}
@media(max-width:960px){.auth-card .auth-logo-sm{display:block}}
.auth-pw{margin-top:18px;font-size:12px;color:var(--muted);text-align:center}
.powered{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);text-decoration:none!important}.powered img{height:14px;width:auto;opacity:.85}
@media print{.bnav,.copilot-fab,.sheet,.sheet-ov{display:none!important}}
/* mobil: hurtigflater */
@media(max-width:900px){.drawer{width:100vw}.fbar .fq{max-width:none}.dh{padding:14px}.kcol{flex-basis:84vw}.tbl-wrap .tbl{max-height:none}.ws-pop{left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto;border-radius:20px}.menu{max-width:calc(100vw - 16px)}}
/* mobil: handlingsrader følger med (lagre/avbryt alltid synlig i skjema, modal og skuff) */
@media(max-width:900px){.modal-b .form-f,.drawer-b .form-f,.form-f.sticky{position:sticky;bottom:-20px;background:linear-gradient(180deg,transparent,var(--panel) 28%);padding:14px 0 6px;margin-top:10px;z-index:3}.modal-f,.drawer-f{position:sticky;bottom:0}.ph-act{width:100%}.ph-act .btn{flex:1 1 auto;justify-content:center}.page-h>div:last-child{width:100%}}

.tab-c{color:var(--ink2)}.tab.on .tab-c{color:var(--pri-t)}
@media(max-width:900px){.row.right,.row.gap.right,.right.row{flex-wrap:wrap;max-width:100%;margin-left:0}}
@media(max-width:900px){.tabs,.seg,.chips{max-width:calc(100vw - 28px)}.row:has(>.btn){flex-wrap:wrap}}