/* OneCo designsystem – oneco.css
   Bygget etter OneCo-tokenene. Erstatt gjerne hele design/-mappen med den offisielle oneco-design-pakke.zip. */
:root{
  --oc-lilla:#6B1D6B; --oc-lilla-lys:#f3e8f3;
  --accent-fyll:#6B1D6B; --accent-fyll-hover:#561656; --accent:#6B1D6B; --accent-soft:#f3e8f3;
  --bg:#eef0f3; --panel:#ffffff; --felt:#ffffff; --knapp:#ffffff;
  --ink:#1d2330; --muted:#677184; --line:#dde1e7; --line-strong:#cdd3db; --hover:#f5f6f8; --kant-hover:#b9c0cb;
  --ok:#1f9d55; --ok-soft:#e6f6ec; --warn:#8a5a00; --warn-soft:#fff6e5; --err:#c0392b; --err-soft:#fdecea; --busy:#e6a100;
  --danger-kant:#f1c4bf; --bryter-av:#cdd3db; --prikk-av:#b9c0cb;
  --note-bg:#f2f4f7; --tom-bg:#f3f5f8; --gra-bg:#eef0f3; --warn-bg:#fff6e5;
  --toast-bg:#1d2330; --toast-ink:#fff; --scrim:rgba(15,20,30,.45); --skygge:rgba(15,20,30,.18); --shadow:0 6px 16px rgba(15,20,30,.08);
  --r:12px; --r-liten:9px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color-scheme:light;
}
:root[data-tema="mork"]{
  --oc-lilla-lys:#3a2340; --bg:#13161c; --panel:#1b1f27; --ink:#e7eaf0; --muted:#9ba4b3; --line:#2b313c; --line-strong:#3a4250; --hover:#232934;
  --accent:#d7a2d7; --accent-soft:#3a2340; --accent-fyll:#7e2b7e; --accent-fyll-hover:#943594;
  --ok:#43d184; --ok-soft:#14321f; --warn:#f0b955; --warn-soft:#352a12; --err:#ff7466; --err-soft:#3b1a18; --busy:#f0b955;
  --felt:#12151b; --knapp:#232934; --kant-hover:#4a5262; --danger-kant:#6b2a24;
  --bryter-av:#3a4250; --prikk-av:#545d6c; --note-bg:#232934; --gra-bg:#262c37; --warn-bg:#352a12; --tom-bg:#20252e;
  --toast-bg:#e7eaf0; --toast-ink:#13161c; --scrim:rgba(0,0,0,.6); --skygge:rgba(0,0,0,.5); --shadow:0 6px 16px rgba(0,0,0,.4);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-tema="lys"]){
  --oc-lilla-lys:#3a2340; --bg:#13161c; --panel:#1b1f27; --ink:#e7eaf0; --muted:#9ba4b3; --line:#2b313c; --line-strong:#3a4250; --hover:#232934;
  --accent:#d7a2d7; --accent-soft:#3a2340; --accent-fyll:#7e2b7e; --accent-fyll-hover:#943594;
  --ok:#43d184; --ok-soft:#14321f; --warn:#f0b955; --warn-soft:#352a12; --err:#ff7466; --err-soft:#3b1a18; --busy:#f0b955;
  --felt:#12151b; --knapp:#232934; --kant-hover:#4a5262; --danger-kant:#6b2a24;
  --bryter-av:#3a4250; --prikk-av:#545d6c; --note-bg:#232934; --gra-bg:#262c37; --warn-bg:#352a12; --tom-bg:#20252e;
  --toast-bg:#e7eaf0; --toast-ink:#13161c; --scrim:rgba(0,0,0,.6); --skygge:rgba(0,0,0,.5); --shadow:0 6px 16px rgba(0,0,0,.4);
  color-scheme:dark;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--font)}
a{color:var(--accent)}
h1,h2,h3{margin:0}
svg{flex:none}
[hidden]{display:none!important}

/* ---------- Toppfelt ---------- */
.oc-topp{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;min-height:62px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.oc-logo{height:38px;width:auto;max-width:180px;object-fit:contain;display:block}
.oc-logo-mork{display:none!important}
:root[data-tema="mork"] .oc-logo-lys{display:none!important}
:root[data-tema="mork"] .oc-logo-mork{display:block!important}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="lys"]) .oc-logo-lys{display:none!important}
  :root:not([data-tema="lys"]) .oc-logo-mork{display:block!important}
}
.oc-titler{display:flex;flex-direction:column;min-width:0;padding-left:14px;border-left:1px solid var(--line)}
.oc-titler h1{font-size:17px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-kreditt{font-size:12px;color:var(--muted)}
.oc-kreditt b{font-weight:600}
.oc-hoyre{margin-left:auto;display:flex;align-items:center;gap:10px}

/* Lys/mørk-bryter */
.oc-tema{position:relative;flex:none;width:58px;height:30px;min-height:30px;padding:0;border-radius:15px;border:1px solid var(--line-strong);background:var(--gra-bg);cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between}
.oc-tema::before{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--panel);box-shadow:0 1px 3px var(--skygge);transition:left .2s}
.oc-tema[aria-checked="true"]::before{left:30px;background:var(--accent-fyll)}
.oc-tema span{position:relative;z-index:1;width:28px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .2s}
.oc-tema svg{width:15px;height:15px}
.oc-tema[aria-checked="false"] .oc-tema-sol{color:var(--warn)}
.oc-tema[aria-checked="true"] .oc-tema-maane{color:#fff}
.oc-tema:hover{border-color:var(--kant-hover)}
.oc-tema:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Portalramme ---------- */
.oc-ramme{display:flex;min-height:calc(100vh - 62px)}
.oc-meny{width:232px;flex:none;background:var(--panel);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.oc-meny a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-liten);color:var(--ink);text-decoration:none;font-weight:500;min-height:40px}
.oc-meny a svg{width:19px;height:19px;color:var(--muted)}
.oc-meny a:hover{background:var(--hover)}
.oc-meny a.valgt{background:var(--accent-soft);color:var(--accent)}
.oc-meny a.valgt svg{color:var(--accent)}
.oc-meny .mellom{height:1px;background:var(--line);margin:8px 6px}
.oc-innhold{flex:1;min-width:0;padding:24px;max-width:1240px}
#menyKnapp{display:none}
.oc-skygge{display:none}
@media (max-width:900px){
  #menyKnapp{display:inline-flex}
  .oc-meny{position:fixed;top:0;bottom:0;left:0;z-index:40;transform:translateX(-105%);transition:transform .2s;box-shadow:var(--shadow);padding-top:20px}
  body.meny-apen .oc-meny{transform:none}
  body.meny-apen .oc-skygge{display:block;position:fixed;inset:0;z-index:30;background:var(--scrim)}
  .oc-innhold{padding:16px}
}
.oc-sidehode{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.oc-sidehode h2{font-size:22px;font-weight:650}
.oc-sidehode .btns{margin-left:auto}
.oc-rutenett{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.oc-to{display:grid;gap:16px}
@media (min-width:900px){.oc-to{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:16px}

/* ---------- Kort ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card h2{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650;margin:0 0 14px}
.card h2 .hoyre{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}

/* ---------- Knapper ---------- */
button,.knapp{font:inherit;font-weight:550;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:var(--r-liten);border:1px solid var(--line-strong);background:var(--knapp);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
button:hover,.knapp:hover{border-color:var(--kant-hover);background:var(--hover)}
button:focus-visible,.knapp:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.5;cursor:not-allowed}
button svg,.knapp svg{width:18px;height:18px}
.primary{background:var(--accent-fyll);border-color:var(--accent-fyll);color:#fff}
.primary:hover{background:var(--accent-fyll-hover);border-color:var(--accent-fyll-hover)}
.ghost{background:transparent;border-color:transparent}
.ghost:hover{background:var(--hover);border-color:transparent}
.danger{color:var(--err);border-color:var(--danger-kant)}
.danger:hover{background:var(--err-soft);border-color:var(--err)}
.danger.primary,.primary.danger{background:var(--err);border-color:var(--err);color:#fff}
.liten{min-height:32px;padding:4px 10px;font-size:13.5px}
.ikon{width:40px;padding:0}
.ikon.liten{width:32px}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Skjema ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label,.etikett{font-size:13px;font-weight:600;color:var(--muted)}
.field .hjelp{font-size:12.5px;color:var(--muted)}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--felt);border:1px solid var(--line-strong);border-radius:var(--r-liten);padding:9px 12px;min-height:42px;width:100%}
textarea{min-height:90px;resize:vertical}
input[type=color]{padding:3px;width:56px;cursor:pointer}
input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--accent-fyll)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:160px}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:40px;user-select:none}
.switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:42px;height:24px;min-height:0;padding:0;border-radius:12px;border:none;background:var(--bryter-av);cursor:pointer;transition:background .15s}
.switch input::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px var(--skygge);transition:left .15s}
.switch input:checked{background:var(--accent-fyll)}
.switch input:checked::before{left:21px}
.switch small{display:block;color:var(--muted);font-size:12.5px}

/* ---------- Status, meldinger, merker ---------- */
.status{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--prikk-av);flex:none;display:inline-block}
.dot.on{background:var(--ok)}
.dot.err{background:var(--err)}
.dot.busy{background:var(--busy);animation:oc-puls 1.2s infinite}
@keyframes oc-puls{50%{opacity:.35}}
.note{background:var(--note-bg);border-radius:var(--r-liten);padding:10px 14px;font-size:14px;margin:0 0 14px}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.note.err{background:var(--err-soft);color:var(--err)}
.note.ok{background:var(--ok-soft);color:var(--ok)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.badge.gra{background:var(--gra-bg);color:var(--muted)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.err{background:var(--err-soft);color:var(--err)}
.tom{background:var(--tom-bg);border-radius:var(--r-liten);padding:26px 18px;text-align:center;color:var(--muted)}

/* ---------- Lister og tabeller ---------- */
.liste{display:flex;flex-direction:column}
.linje{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.linje:last-child{border-bottom:none}
.linje .vokser{flex:1;min-width:0}
.linje .liten-tekst{font-size:13px;color:var(--muted)}
.tabell-ramme{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table.tabell{width:100%;border-collapse:collapse;background:var(--panel);font-size:14px}
.tabell th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0}
.tabell td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabell tr:last-child td{border-bottom:none}
.tabell tbody tr:hover{background:var(--hover)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:650;font-size:14px;flex:none}
.avatar.stor{width:64px;height:64px;font-size:24px}
.faner{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.faner a{padding:10px 14px;color:var(--muted);text-decoration:none;font-weight:550;border-bottom:2px solid transparent;white-space:nowrap}
.faner a.valgt{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- Dialog og toast ---------- */
.modal{position:fixed;inset:0;z-index:60;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{background:var(--panel);border-radius:var(--r);border:1px solid var(--line);width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;padding:22px;box-shadow:var(--shadow)}
.modal .box h3{font-size:18px;font-weight:650;margin-bottom:14px}
.modal .box .btns{justify-content:flex-end;margin-top:8px}
#toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--toast-bg);color:var(--toast-ink);padding:11px 18px;border-radius:var(--r-liten);font-weight:550;transition:.2s;max-width:calc(100vw - 32px)}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:480px){.oc-titler{display:none}.oc-logo{height:30px}.oc-topp{padding:8px 12px;gap:10px}}