/* =============================================================================
   OneCo designsystem – felles stil for OneCo Technologies sine webløsninger
   Hentet fra OneCo Etikett (2026). Kopier hele design/-mappen inn i nye prosjekter.

   Prinsipper
   • Rolig grå bakgrunn, hvite kort med tynn kant og 12 px hjørner
   • Én aksentfarge: OneCo-lilla #6B1D6B (knapper, valgt, fokus, brytere)
   • Små grå STORE BOKSTAVER som kortoverskrift, tydelig tekst i innholdet
   • Mobil først: store trykkflater (≥ 40 px), 16 px skrift i felt (ingen iOS-zoom)
   • Systemfont (Segoe UI på Windows, San Francisco på Apple, Roboto på Android)
   ============================================================================= */
:root{
  /* farger */
  --oc-lilla:#6B1D6B;          /* OneCo-lilla – aksent */
  --oc-lilla-mork:#561656;     /* hover/trykk på lilla */
  --oc-lilla-lys:#f3e8f3;      /* valgt bakgrunn, merker */
  --bg:#eef0f3;                /* sidebakgrunn */
  --panel:#fff;                /* kort, toppfelt, meny */
  --ink:#1d2330;               /* tekst */
  --muted:#677184;             /* hjelpetekst, etiketter */
  --line:#dde1e7;              /* kanter */
  --line-strong:#cdd3db;       /* kant på felt */
  --hover:#f5f6f8;
  --accent:var(--oc-lilla); --accent-soft:var(--oc-lilla-lys);
  --ok:#1f9d55; --ok-soft:#e6f6ec;
  --warn:#8a5a00; --warn-soft:#fff6e5;
  --err:#c0392b; --err-soft:#fdecea;
  --busy:#e6a100;
  /* flater og hjelpefarger (byttes i mørk modus) */
  --accent-fyll:var(--oc-lilla);   /* lilla bakgrunn med hvit tekst */
  --flate:#f5f6f8; --flate-2:#eef0f3; --flate-3:#e3e6eb;
  --ink-2:#3a4252; --ink-fyll:#1d2330; --svak:#b7bec8; --line-hover:#b7bec8; --felt:#fff;
  color-scheme:light;
  /* form */
  --radius:12px; --radius-s:9px;
  --shadow:0 6px 16px rgba(20,30,50,.08);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --topp-h:60px; --meny-b:248px;
}
*{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)}
[hidden]{display:none!important}
a{color:var(--accent)}
h1,h2,h3{line-height:1.25}

/* ---------- toppfelt: logo | tittel + «laget for» ---------- */
.oc-topp{display:flex;align-items:center;gap:12px;min-height:var(--topp-h);padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top));background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.oc-topp .oc-logo{height:38px;width:auto;display:block}
.oc-titler{display:flex;flex-direction:column;gap:1px;padding-left:12px;border-left:1px solid var(--line);min-width:0}
.oc-titler h1{font-size:17px;margin:0;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-kreditt{font-size:12px;color:var(--muted)} .oc-kreditt b{color:var(--ink);font-weight:600}
.oc-topp .oc-hoyre{margin-left:auto;display:flex;align-items:center;gap:8px}
@media (max-width:420px){.oc-topp{padding:8px 12px;gap:10px}.oc-topp .oc-logo{height:30px}.oc-titler{padding-left:10px}.oc-titler h1{font-size:16px}.oc-kreditt{font-size:11px}}

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

/* ---------- knapper ---------- */
button,.btn{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:9px 14px;border-radius:var(--radius-s);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;min-height:40px;text-decoration:none}
button:hover,.btn:hover{border-color:var(--line-hover)}
button:disabled{opacity:.5;cursor:default}
button.primary,.btn.primary{background:var(--accent-fyll);border-color:var(--accent-fyll);color:#fff;font-weight:600}
button.primary:hover{background:var(--oc-lilla-mork)}
button.ghost{background:transparent}
button.danger{color:var(--err);border-color:#f0c4bf}
button.liten{min-height:32px;padding:4px 10px;font-size:13px}
button.ikon{min-width:40px;padding:0}
button svg,.btn svg{width:18px;height:18px}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- skjema ---------- */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;min-width:0}
.field label{font-size:13px;color:var(--muted);font-weight:550}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],input[type=tel],input[type=date],textarea,select{font:inherit;font-size:16px;width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--radius-s);background:var(--felt);color:var(--ink)}
textarea{resize:vertical;min-height:46px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
input[type=range],input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row .field{flex:1 1 160px}
/* bryter: <label class="switch"><input type="checkbox"><span></span>Tekst</label> */
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:32px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch span{width:42px;height:24px;border-radius:12px;background:#cfd5dd;position:relative;flex:none;transition:.15s}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.15s}
.switch input:checked+span{background:var(--accent-fyll)}
.switch input:checked+span::after{left:21px}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
details{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
summary{cursor:pointer;font-weight:600;padding:6px 0}

/* ---------- status, merknader, merker ---------- */
.status{display:flex;align-items:center;gap:8px;font-weight:550}
.dot{width:11px;height:11px;border-radius:50%;background:#b9c0ca;flex:none;display:inline-block}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(31,157,85,.18)}
.dot.busy{background:var(--busy);animation:oc-puls 1s infinite}
.dot.err{background:var(--err)}
@keyframes oc-puls{50%{opacity:.4}}
.note{font-size:13px;margin:10px 0 0;padding:9px 11px;border-radius:8px;background:var(--flate);color:var(--muted)}
.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:4px;font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.badge.gra{background:var(--flate-2);color:var(--muted)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:#fff3d6;color:var(--warn)}
.tom{color:var(--muted);text-align:center;padding:22px 16px;background:var(--flate);border-radius:var(--radius-s)}

/* ---------- lister og tabeller ---------- */
.liste{display:flex;flex-direction:column;gap:6px}
.linje{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius-s);padding:8px 10px;background:var(--panel)}
.linje .tekst{flex:1;min-width:0}
.linje .tekst b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linje .tekst small{color:var(--muted);font-size:12px}
a.linje{color:inherit;text-decoration:none} a.linje:hover{border-color:var(--line-hover)}
table.tabell{width:100%;border-collapse:collapse;font-size:14px}
.tabell th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:650;padding:8px;border-bottom:1px solid var(--line)}
.tabell td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.tabell tr:last-child td{border-bottom:0}
.tabell-ramme{overflow-x:auto}

/* ---------- avatar (initialer) ---------- */
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none;text-transform:uppercase}
.avatar.stor{width:44px;height:44px;font-size:16px}

/* ---------- faner ---------- */
.faner{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.faner a{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;color:var(--muted);text-decoration:none;font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.faner a svg{width:18px;height:18px}
.faner a:hover{color:var(--ink)}
.faner a.valgt{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- dialog og melding ---------- */
.modal{position:fixed;inset:0;background:rgba(15,20,30,.45);z-index:40;display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{background:var(--panel);border-radius:var(--radius);padding:18px;max-width:420px;width:100%;box-shadow:0 18px 40px rgba(0,0,0,.25);max-height:calc(100vh - 32px);overflow:auto}
.modal .box h3{margin:0 0 12px;font-size:17px}
.modal p{margin:0 0 16px}
.modal .btns{justify-content:flex-end;margin-top:6px}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);background:#1d2330;color:#fff;padding:10px 16px;border-radius:var(--radius-s);font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:calc(100vw - 32px);text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- portal-oppsett: toppfelt + meny til venstre + innhold ---------- */
.oc-ramme{display:flex;min-height:calc(100vh - var(--topp-h))}
.oc-meny{width:var(--meny-b);flex:none;background:var(--panel);border-right:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:2px;position:sticky;top:var(--topp-h);height:calc(100vh - var(--topp-h));overflow-y:auto}
.oc-meny .gruppe{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650;padding:14px 10px 6px;display:flex;align-items:center}
.oc-meny .gruppe button{margin-left:auto;min-height:26px;min-width:26px;padding:0;border:0;background:transparent;color:var(--muted)}
.oc-meny a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-s);color:var(--ink);text-decoration:none;font-weight:550;min-height:40px}
.oc-meny a svg{width:20px;height:20px;color:var(--muted);flex:none}
.oc-meny a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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 .pfarge{width:10px;height:10px;border-radius:3px;flex:none;margin:0 5px}
.oc-meny .bunn{margin-top:auto;padding-top:12px;font-size:12px;color:var(--muted);text-align:center}
.oc-innhold{flex:1;min-width:0;padding:16px;max-width:1240px}
.oc-sidehode{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 14px}
.oc-sidehode h2{margin:0;font-size:22px;font-weight:650}
.oc-sidehode .btns{margin-left:auto}
.oc-rutenett{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.oc-to{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) 360px;align-items:start}
.stack{display:flex;flex-direction:column;gap:12px}
#menyKnapp{display:none}
@media (max-width:900px){
  .oc-to{grid-template-columns:1fr}
  #menyKnapp{display:inline-flex}
  .oc-meny{position:fixed;left:0;top:var(--topp-h);bottom:0;height:auto;z-index:30;transform:translateX(-105%);transition:transform .2s;box-shadow:var(--shadow)}
  body.meny-apen .oc-meny{transform:none}
  body.meny-apen::after{content:"";position:fixed;inset:var(--topp-h) 0 0 0;background:rgba(15,20,30,.3);z-index:20}
  .oc-innhold{padding:12px}
}
@media print{.oc-topp,.oc-meny{display:none}}

/* =============================================================================
   Mørk modus: <html data-tema="mork">  (velges under ditt navn → Utseende; «auto» følger telefonen/PC-en)
   ============================================================================= */
:root[data-tema="mork"]{
  --bg:#0f1218; --panel:#181c24; --ink:#e6e9ef; --muted:#99a3b4;
  --line:#2a303b; --line-strong:#3a4252; --hover:#212631; --line-hover:#4a5263;
  --accent:#d39ad3; --accent-fyll:#8a3a8a; --accent-soft:#35213a; --oc-lilla-lys:#35213a; --oc-lilla-mork:#9c4a9c;
  --ok:#4cd38a; --ok-soft:#15301f; --warn:#f2bb55; --warn-soft:#352a12; --err:#ff7b6e; --err-soft:#3b1b18; --busy:#f0b429;
  --flate:#1f242e; --flate-2:#242a35; --flate-3:#2c3340; --ink-2:#c7cdd8; --ink-fyll:#4a5263; --svak:#5d6677; --felt:#11151c;
  --shadow:0 6px 18px rgba(0,0,0,.45);
  color-scheme:dark;
}
:root[data-tema="mork"] img.oc-logo{content:url("/design/logo-mork.png")}
:root[data-tema="mork"] .switch span{background:#3a4252}
:root[data-tema="mork"] button.danger{border-color:#5a2a26}
:root[data-tema="mork"] .badge.warn{background:#3a2e12}
:root[data-tema="mork"] ::placeholder{color:#6b7486}
:root[data-tema="mork"] .modal{background:rgba(0,0,0,.6)}