/* ============================================================
   dekkstra.css — felles designstandard for alle Dekkstra-flater
   ------------------------------------------------------------
   Vedtatt 06.08.2026. Denne filen er fasit. Ingen app skal
   definere egne farger — lenk til denne og bruk variablene.

     <link rel="stylesheet" href="/dekkstra.css">

   Endres en farge her, endres den overalt.
   ============================================================ */

:root{

  /* --- MERKEVARE — originalfargene fra merkevarepakken --- */
  --navy:            #002531;
  --gul:             #ffe229;

  --navy-lys:        #0a3a47;   /* hover/sekundærflate på mørk bunn */
  --navy-dyp:        #001820;   /* dypere enn navy, til topplinje-kant */
  --gul-dyp:         #e6c91f;   /* trykket tilstand på gul knapp */
  --pa-navy:         #e4eef1;   /* tekst på navy */
  --pa-navy-svak:    #93aab2;   /* sekundærtekst på navy */

  /* --- FLATER ---
     Siden er krem, kortene hvite. Kremen gir en mykere ramme enn
     hvit-på-hvit, og de hvite kortene løfter seg tydelig fra den. */
  --bakgrunn:        #efeadb;   /* selve siden */
  --flate:           #ffffff;   /* kort, paneler, inputs */
  --flate-2:         #f4f1e6;   /* chips, stripede rader inne i kort */
  --linje:           #ddd5c0;
  --linje-svak:      #e8e2d2;

  /* --- TEKST --- */
  --tekst:           #002531;
  --tekst-svak:      #56676d;
  --tekst-hint:      #7d8b90;

  /* --- STATUS — bevisst adskilt fra merkevaregul ---
     Varselfargen er dyp og brunlig nettopp for at den ikke
     skal forveksles med #ffe229. */
  --ok:              #2e7d4f;
  --ok-flate:        #e4efe6;
  --ok-linje:        #bcd8c4;

  --varsel:          #b07a1e;
  --varsel-flate:    #f6ecd6;
  --varsel-linje:    #e6d0a4;

  --feil:            #b3402e;
  --feil-flate:      #f8e4df;
  --feil-linje:      #eec3b8;

  --rolig:           #7a8b90;   /* ikke startet / ukjent */
  --rolig-flate:     #eae7db;
  --rolig-linje:     #d5cec0;

  --info:            #2b5f7e;
  --info-flate:      #e3ecf1;

  /* --- FORM --- */
  --radius:          14px;
  --radius-sm:       9px;
  --skygge:          0 1px 2px rgba(0,37,49,.06), 0 8px 24px -14px rgba(0,37,49,.22);
  --skygge-sm:       0 1px 2px rgba(0,37,49,.08);
  --logo-hoyde:      42px;

  /* --- BREDDER ---
     Kundevendt er smalt og mobil-først, men skal også kunne
     åpnes på PC. Interne verktøy trenger plass til tabeller. */
  --maxw-kunde:      640px;
  --maxw-verktoy:    1180px;
  --maxw:            var(--maxw-verktoy);

  /* --- TYPOGRAFI --- */
  --font:            "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-tall:       ui-monospace, "Cascadia Mono", Consolas, monospace;


  /* ==========================================================
     ALIAS — så eksisterende appkode virker uten omskriving.
     Nye flater skal bruke navnene over, ikke disse.
     ========================================================== */

  /* familie A — kundeoppdatering, sms, forhandler, innlevering */
  --c-navy:          var(--navy);
  --c-navy-soft:     var(--navy-lys);
  --c-yellow:        var(--gul);
  --c-yellow-dim:    var(--gul-dyp);
  --c-cream:         var(--bakgrunn);
  --c-orange:        var(--varsel);
  --c-bg:            var(--bakgrunn);
  --c-card:          var(--flate);
  --c-text:          var(--tekst);
  --c-muted:         var(--tekst-svak);
  --c-border:        var(--linje);
  --c-error:         var(--feil);
  --c-ok:            var(--ok);
  --c-warn:          var(--varsel);

  /* familie B — salg, mekaniker, hjulrapport */
  --navy-2:          var(--navy-dyp);
  --krem:            var(--bakgrunn);
  --chip:            var(--flate-2);
  --blaa:            var(--info);
  --svak:            var(--tekst-svak);

  /* familie C — kontrolltårn, min side, regnr-vask */
  --bg:              var(--bakgrunn);
  --bg-2:            var(--flate-2);
  --panel:           var(--flate);
  --panel-2:         var(--flate-2);
  --line:            var(--linje);
  --line-2:          var(--linje-svak);
  --ink:             var(--tekst);
  --ink-2:           var(--tekst-svak);
  --ink-3:           var(--tekst-hint);
  --accent-num:      var(--navy);
  --ok-bg:           var(--ok-flate);
  --ok-line:         var(--ok-linje);
  --warn:            var(--varsel);
  --warn-bg:         var(--varsel-flate);
  --warn-line:       var(--varsel-linje);
  --bad:             var(--feil);
  --bad-bg:          var(--feil-flate);
  --bad-line:        var(--feil-linje);
  --idle:            var(--rolig);
  --idle-bg:         var(--rolig-flate);
  --idle-line:       var(--rolig-linje);
  --ring-track:      var(--linje-svak);
  --hi-fill:         #fbf1a8;
  --hi-ink:          var(--navy);
  --brand:           var(--gul);
  --brand-2:         var(--gul-dyp);
  --brand-ink:       var(--navy);
  --on-navy:         var(--pa-navy);
  --on-navy-2:       var(--pa-navy-svak);
  --shadow:          var(--skygge);
  --shadow-sm:       var(--skygge-sm);
  --r:               var(--radius);
  --r-sm:            var(--radius-sm);
  --f:               var(--font);

  /* familie D — dekkhotellrapport, firetrinns tilstandsskala */
  --god:             var(--ok);
  --folg:            #d4a72c;
  --planlegg:        #d3742f;
  --kritisk:         var(--feil);
  --ukjent:          var(--rolig);
}


/* ============================================================
   MØRK MODUS
   Bygget ned fra navy, ikke nøytral grå. Følger systemet, og
   kan overstyres med data-tema="mork" / "lys" på <html>.
   ============================================================ */

/* Moerk modus foelger systemet KUN for flater som har meldt seg paa med
   <html data-morkmodus>. Grunnen: flere apper bruker var(--navy) direkte
   som tekstfarge, og navy er en merkevarekonstant som ikke flipper - de
   ville blitt moerk tekst paa moerk bakgrunn. En app melder seg paa naar
   den er gjennomgaatt. Den eksplisitte bryteren under virker uansett. */
@media (prefers-color-scheme: dark){
  :root[data-morkmodus]{
    --bakgrunn:      #071a20;
    --flate:         #0d242c;
    --flate-2:       #123039;
    --linje:         #1e3f4a;
    --linje-svak:    #16313a;

    --tekst:         #e4eef1;
    --tekst-svak:    #9db0b7;
    --tekst-hint:    #6c8188;

    --ok:            #57bd84;
    --ok-flate:      #103326;
    --ok-linje:      #1f5a3e;
    --varsel:        #e0aa46;
    --varsel-flate:  #33270e;
    --varsel-linje:  #5e4718;
    --feil:          #ea7b64;
    --feil-flate:    #391d17;
    --feil-linje:    #66332a;
    --rolig:         #83979d;
    --rolig-flate:   #16292f;
    --rolig-linje:   #24424c;
    --info:          #6ba7c7;
    --info-flate:    #102c38;

    --accent-num:    var(--gul);
    --hi-fill:       #33330f;
    --hi-ink:        var(--gul);
    --skygge:        0 1px 2px rgba(0,0,0,.5), 0 10px 28px -16px rgba(0,0,0,.85);
    --skygge-sm:     0 1px 2px rgba(0,0,0,.55);
  }
}

/* Begge attributtnavn støttes — appene bruker data-theme fra før. */
:root[data-tema="mork"],
:root[data-theme="dark"]{
  --bakgrunn:      #071a20;
  --flate:         #0d242c;
  --flate-2:       #123039;
  --linje:         #1e3f4a;
  --linje-svak:    #16313a;
  --tekst:         #e4eef1;
  --tekst-svak:    #9db0b7;
  --tekst-hint:    #6c8188;
  --ok:            #57bd84;
  --ok-flate:      #103326;
  --ok-linje:      #1f5a3e;
  --varsel:        #e0aa46;
  --varsel-flate:  #33270e;
  --varsel-linje:  #5e4718;
  --feil:          #ea7b64;
  --feil-flate:    #391d17;
  --feil-linje:    #66332a;
  --rolig:         #83979d;
  --rolig-flate:   #16292f;
  --rolig-linje:   #24424c;
  --info:          #6ba7c7;
  --info-flate:    #102c38;
  --accent-num:    var(--gul);
  --hi-fill:       #33330f;
  --hi-ink:        var(--gul);
  --skygge:        0 1px 2px rgba(0,0,0,.5), 0 10px 28px -16px rgba(0,0,0,.85);
  --skygge-sm:     0 1px 2px rgba(0,0,0,.55);
}

:root[data-tema="lys"],
:root[data-theme="light"]{
  --bakgrunn:      #efeadb;
  --flate:         #ffffff;
  --flate-2:       #f4f1e6;
  --linje:         #ddd5c0;
  --linje-svak:    #e8e2d2;
  --tekst:         #002531;
  --tekst-svak:    #56676d;
  --tekst-hint:    #7d8b90;
  --ok:            #2e7d4f;
  --ok-flate:      #e4efe6;
  --ok-linje:      #bcd8c4;
  --varsel:        #b07a1e;
  --varsel-flate:  #f6ecd6;
  --varsel-linje:  #e6d0a4;
  --feil:          #b3402e;
  --feil-flate:    #f8e4df;
  --feil-linje:    #eec3b8;
  --rolig:         #7a8b90;
  --rolig-flate:   #eae7db;
  --rolig-linje:   #d5cec0;
  --info:          #2b5f7e;
  --info-flate:    #e3ecf1;
  --accent-num:    #002531;
  --hi-fill:       #fbf1a8;
  --hi-ink:        #002531;
}


/* ============================================================
   GRUNNSTIL
   ============================================================ */

*, *::before, *::after{ box-sizing:border-box }

body{
  margin:0;
  background:var(--bakgrunn);
  color:var(--tekst);
  font-family:var(--font);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Full-bredde-brekket under bruker 50vw, som teller med rullefeltet.
     Uten dette får siden noen få piksler sidelengs rulling. */
  overflow-x:hidden;
}

/* Lar et element inne i en sentrert, breddebegrenset beholder
   spenne over hele vinduet — til mørke topplinjer. */
.dk-fullbredde{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

:where(button, input, select, textarea){ font-family:inherit }

/* Skjemafelt arver ellers nettleserens hvite. :where() gir null
   spesifisitet, så appenes egne regler vinner alltid over disse. */
:where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]){
  background:var(--flate);
  color:var(--tekst);
  border:1px solid var(--linje);
  border-radius:var(--radius-sm);
  padding:11px 12px;
}
:where(input, textarea)::placeholder{ color:var(--tekst-hint) }

/* Tastaturfokus skal alltid være synlig. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--gul);
  outline-offset:2px;
  border-radius:3px;
}
@media (prefers-color-scheme: dark){
  :where(a, button, input, select, textarea, [tabindex]):focus-visible{ outline-color:var(--gul) }
}

/* Tall i kolonner skal stå på linje. */
:where(td, th, .tall, .kpi-verdi){ font-variant-numeric:tabular-nums }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ============================================================
   LOGO
   Gul på mørk bunn, sort på lys. Blå brukes ikke.
   Logoen ligger alltid rett på flaten — aldri i ramme,
   boks eller med egen bakgrunnsfarge.
   ============================================================ */

.dk-logo{ height:var(--logo-hoyde); width:auto; display:block }

/* Bytter automatisk i mørk modus der begge filene er lagt inn. */
.dk-logo-auto{ content:url("/logo-sort.png") }
@media (prefers-color-scheme: dark){
  .dk-logo-auto{ content:url("/logo.png") }
}
:root[data-tema="mork"] .dk-logo-auto,
:root[data-theme="dark"] .dk-logo-auto{ content:url("/logo.png") }
:root[data-tema="lys"] .dk-logo-auto,
:root[data-theme="light"] .dk-logo-auto{ content:url("/logo-sort.png") }


/* ============================================================
   TOPPLINJE
   ============================================================ */

.dk-topp{
  background:var(--navy);
  border-bottom:1px solid rgba(255,226,41,.16);
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px clamp(14px, 4vw, 30px);
}
.dk-topp .dk-merke{ display:flex; align-items:center; gap:12px; min-width:0 }
.dk-topp .dk-navn{ display:flex; flex-direction:column; line-height:1.15; min-width:0 }
.dk-topp .dk-navn b{
  font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--gul);
}
.dk-topp .dk-navn span{
  font-size:11px; color:var(--pa-navy-svak);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dk-topp .dk-hoyre{ margin-left:auto; display:flex; align-items:center; gap:10px }

/* Klebrig topplinje passer verktøyene, ikke de korte kundesidene. */
.dk-verktoy .dk-topp{ position:sticky; top:0; z-index:40 }


/* ============================================================
   SIDEBREDDE
     .dk-kunde   — kundevendt: mobil-først, men leselig på PC
     .dk-verktoy — internt verktøy: bygget for PC, brukbart på nettbrett
   ============================================================ */

.dk-kunde   main, main.dk-kunde  { max-width:var(--maxw-kunde);   margin:0 auto; padding:clamp(14px,4vw,22px) clamp(14px,4vw,20px) 48px }
.dk-verktoy main, main.dk-verktoy{ max-width:var(--maxw-verktoy); margin:0 auto; padding:clamp(18px,3.5vw,34px) clamp(14px,4vw,30px) 40px }


/* ============================================================
   KORT, KNAPPER, MERKELAPPER
   ============================================================ */

.dk-kort{
  background:var(--flate);
  border:1px solid var(--linje);
  border-radius:var(--radius);
  box-shadow:var(--skygge-sm);
  padding:18px 18px 20px;
}

.dk-knapp{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--navy); color:var(--gul);
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:12px 18px;
  font-size:15px; font-weight:800; letter-spacing:.02em;
  cursor:pointer; text-decoration:none;
}
.dk-knapp:hover{ background:var(--navy-lys) }
.dk-knapp:active{ background:var(--navy-dyp) }
.dk-knapp[disabled]{ opacity:.5; cursor:not-allowed }

.dk-knapp-gul{ background:var(--gul); color:var(--navy) }
.dk-knapp-gul:hover{ background:var(--gul-dyp) }
.dk-knapp-gul:active{ background:var(--gul-dyp) }

.dk-knapp-stille{
  background:transparent; color:var(--tekst);
  border-color:var(--linje);
}
.dk-knapp-stille:hover{ background:var(--flate-2) }

/* Full bredde på mobil — kundesider har ett tydelig trykkmål. */
.dk-kunde .dk-knapp{ width:100%; padding:14px 18px; font-size:16px }

.dk-merkelapp{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:800; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px;
  border:1px solid; white-space:nowrap;
}
.dk-merkelapp.ok    { background:var(--ok-flate);     color:var(--ok);     border-color:var(--ok-linje) }
.dk-merkelapp.varsel{ background:var(--varsel-flate); color:var(--varsel); border-color:var(--varsel-linje) }
.dk-merkelapp.feil  { background:var(--feil-flate);   color:var(--feil);   border-color:var(--feil-linje) }
.dk-merkelapp.rolig { background:var(--rolig-flate);  color:var(--rolig);  border-color:var(--rolig-linje) }

/* Brede tabeller scroller i egen boks — siden skal aldri scrolle sidelengs. */
.dk-tabellboks{ overflow-x:auto; border:1px solid var(--linje); border-radius:var(--radius); background:var(--flate) }
.dk-tabellboks table{ border-collapse:collapse; width:100%; min-width:640px }