/* ============================================================
   LogIQ — designtema for plattformen
   Legges INN ETTER dashboard.css:
     <link rel="stylesheet" href="/static/dashboard.css?v=...">
     <link rel="stylesheet" href="/static/theme.css?v=1">
   Ingen eksisterende regler trenger å endres.
   ============================================================ */

/* Fontene selvhostes (Del A3) — samme filer som landingssiden */
@import url('/static/fonts/fonts.css');

/* ---------- 1. TOKENS — LYST TEMA ---------- */
:root{
  --font-sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-disp:"Saira Condensed",Impact,sans-serif;

  --paper:#F2F2EE;
  --card:#FFFFFF;
  --surface:#FFFFFF;
  --ink:#14150F;
  --muted:#6A6F62;
  --line:#DAD9D0;
  --line-2:#C3C2B7;
  --grid:#E4E3DA;

  /* Eco Log-aksentene */
  --gul:#F9CF00;
  --spruce:#0B0C0A;          /* var grønn — nå sort, som toppmenyen på landingssiden */
  --spruce-2:#1A1C17;
  --soft:#F6F1D6;

  --pluss:#0B7A3C;
  --minus:#C4462F;
  --varsel:#B47614;
  --info:#2C6DA6;
  --pluss-bg:rgba(11,122,60,.09);
  --minus-bg:rgba(196,70,47,.09);
  --varsel-bg:rgba(180,118,20,.11);
  --info-bg:rgba(44,109,166,.09);

  --nav:#0B0C0A;
  --nav-2:#141613;
  --nav-ink:#DDE0D6;
  --nav-muted:#7E8676;
  --nav-line:#23261F;

  --serie-1:#0B7A3C; --serie-2:#B47614; --serie-3:#2C6DA6;

  /* skarpe kanter — dette er den største endringen */
  --r-card:0px; --r-ctrl:0px; --r-pill:0px; --r-badge:0px;
  --skygge:none;
  --dur:150ms;

  --band-gap:26px;
  --pad-x:22px;
  --mapfilter:saturate(.35) contrast(.95);
}

/* ---------- 2. TOKENS — MØRKT TEMA ---------- */
/* Brukerens valg vinner. Uten valg følger den systemet. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="lys"]){
    --paper:#0B0C0A; --card:#141613; --surface:#141613;
    --ink:#E8EAE4; --muted:#8B9182; --line:#262A22; --line-2:#333830; --grid:#22261E;
    --pluss:#46C77E; --minus:#E0705B; --varsel:#D9A430; --info:#6BA4D8;
    --pluss-bg:rgba(70,199,126,.10); --minus-bg:rgba(224,112,91,.10);
    --varsel-bg:rgba(217,164,48,.12); --info-bg:rgba(107,164,216,.10);
    --nav:#000; --nav-2:#0B0C0A; --nav-line:#1E211B;
    --soft:#241F05;
  --spruce:#E8EAE4; --spruce-2:#C9CDC3;   /* tekstfarge i JS-markup — må lyse i mørkt */
    --serie-1:#46C77E; --serie-2:#D9A430; --serie-3:#6BA4D8;
    --mapfilter:saturate(.25) contrast(.9) brightness(.62) invert(.92) hue-rotate(180deg);
  }
}
:root[data-tema="mork"]{
  --paper:#0B0C0A; --card:#141613; --surface:#141613;
  --ink:#E8EAE4; --muted:#8B9182; --line:#262A22; --line-2:#333830; --grid:#22261E;
  --pluss:#46C77E; --minus:#E0705B; --varsel:#D9A430; --info:#6BA4D8;
  --pluss-bg:rgba(70,199,126,.10); --minus-bg:rgba(224,112,91,.10);
  --varsel-bg:rgba(217,164,48,.12); --info-bg:rgba(107,164,216,.10);
  --nav:#000; --nav-2:#0B0C0A; --nav-line:#1E211B;
  --soft:#241F05;
  --spruce:#E8EAE4; --spruce-2:#C9CDC3;   /* tekstfarge i JS-markup — må lyse i mørkt */
  --serie-1:#46C77E; --serie-2:#D9A430; --serie-3:#6BA4D8;
  --mapfilter:saturate(.25) contrast(.9) brightness(.62) invert(.92) hue-rotate(180deg);
}
:root{color-scheme:light}
:root[data-tema="mork"]{color-scheme:dark}

/* ---------- 3. GRUNNTYPOGRAFI ---------- */
body{font-family:var(--font-sans);background:var(--paper);color:var(--ink);font-size:14px;line-height:1.5}
h1,h2,h3,h4{font-family:var(--font-disp);font-weight:800;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.05}
h1{font-size:1.75rem}
h2{font-size:1.3rem}
h3,h4{font-size:1.05rem;font-weight:700}
.fw600{font-weight:600}
.fw700{font-weight:600}

/* ---------- 4. SKARPE KANTER, INGEN SKYGGER ---------- */
.r,.card,.kpi,.btn,.merke,.pil,.modal,.form-group input,.form-group select,.form-group textarea,
input,select,textarea,button,.econ-tab{border-radius:0}
.card,.kpi,.modal,.topp,.btn{box-shadow:none}

/* ---------- 5. SKALLET ---------- */
.app{grid-template-columns:236px 1fr}

.nav{background:var(--nav);color:var(--nav-ink);border-right:1px solid var(--nav-line)}
.nav-merke{height:60px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid var(--nav-line)}
.nav-tittel{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--nav-muted);padding:6px 18px}
.nav-lenke{border-left:3px solid transparent;border-radius:0;padding-left:15px;color:#B9BFAF;
  transition:background var(--dur),color var(--dur)}
.nav-lenke:hover{background:rgba(255,255,255,.04);color:#fff}
.nav-lenke.active,.nav-lenke[aria-current="page"]{
  background:rgba(249,207,0,.07);border-left-color:var(--gul);color:#fff;font-weight:600}
.nav-fot{border-top:1px solid var(--nav-line)}
.tema-bryter{border:1px solid var(--nav-line);border-radius:0;gap:0;overflow:hidden}
.tema-bryter button{border-radius:0;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;background:transparent;color:var(--nav-muted);border:0}
.tema-bryter button.active,.tema-bryter button[aria-pressed="true"]{background:var(--gul);color:#000;font-weight:500}
.bruker .initial{border-radius:0;background:var(--nav-2);border:1px solid var(--nav-line);
  color:var(--gul);font-family:var(--font-disp);font-weight:700}

.topp{background:var(--paper);border-bottom:1px solid var(--line);height:60px}
.sti{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.topp h1{font-size:1.15rem;margin:0}

/* Felles sidecontainer (23.09.2026): alle sider får samme luft mot menyen.
   Båndene fra LogIQ-oppdraget (padding:0) la innholdet inntil sidemenyen. */
.innhold{padding:20px var(--pad-x) 32px;background:var(--paper)}
.container{max-width:none;width:auto;margin:0}

/* ---------- 6. BÅND (tidligere .card) ---------- */
.card{
  background:var(--card);
  border-width:1px;
  border-style:solid;
  border-color:var(--line);
  border-radius:0;
  box-shadow:none;
  margin:0 0 var(--band-gap);
  padding:20px var(--pad-x);
}
.card:last-child{margin-bottom:40px}
.card>h2,.card>h3{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin:0 0 16px}

/* KPI-stripe: ett sammenhengende bånd med hårfine skiller */
.kpi-grid{gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:var(--band-gap)}
.kpi{background:var(--card);border:0;border-radius:0;padding:22px var(--pad-x)}
.kpi-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.kpi-value{font-family:var(--font-disp);font-weight:700;font-size:1.95rem;line-height:1.15;
  font-variant-numeric:tabular-nums;margin-top:4px}
.kpi-unit{font-family:var(--font-sans);font-weight:400;font-size:.9rem;color:var(--muted)}

/* ---------- 7. TABELLER ---------- */
table{width:100%;border-collapse:collapse}
th{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-weight:400;text-align:right;padding:13px 9px 11px;
  border-bottom:1px solid var(--line);white-space:nowrap;background:transparent}
th:first-child,th:nth-child(2){text-align:left}
td{padding:12px 9px;border-bottom:1px solid var(--grid);text-align:right;white-space:nowrap;
  font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:.88rem}
td:first-child,td:nth-child(2){text-align:left}
/* Monospace bare på koder (maskin-ID, objektnøkler, filnavn) — aldri på
   vanlig tekst som «Sluttavvirkning» (23.09.2026) */
.kode,td .kode,.mono{font-family:var(--font-mono);font-size:.78rem}
tbody tr:hover td{background:rgba(249,207,0,.055)}
tbody tr:last-child td{border-bottom:0}
td .navn{font-weight:600}
.color-green{color:var(--pluss)}
.color-red{color:var(--minus)}

/* ---------- 8. KNAPPER OG MERKER ---------- */
.btn{font-family:var(--font-disp);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-radius:0;border:1px solid transparent;background:var(--gul);color:#000;
  padding:8px 16px;transition:background var(--dur),color var(--dur),border-color var(--dur)}
.btn:hover{background:transparent;border-color:var(--gul);color:var(--ink)}
.btn-sm{padding:5px 11px;font-size:.82rem}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink);
  font-family:var(--font-sans);font-weight:400;text-transform:none;letter-spacing:0;font-size:.86rem}
.btn-ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-full{width:100%}
.merke{border-radius:0;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;background:transparent}
.merke.gul{color:var(--varsel)}
.econ-tab{border-radius:0;border-bottom:2px solid transparent;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.econ-tab.active{border-bottom-color:var(--gul);color:var(--ink)}
.editable{border-bottom:1px dashed var(--line-2);text-decoration:none}
.editable:hover{border-bottom-color:var(--gul)}
.clickable:hover{color:var(--ink)}

/* ---------- 9. KART ---------- */
.leaflet-container{background:var(--grid);font-family:var(--font-mono);font-size:11px;border-radius:0}
.leaflet-tile-pane{filter:var(--mapfilter)}
.leaflet-control,.leaflet-bar,.leaflet-bar a,.leaflet-popup-content-wrapper{border-radius:0}
.kart-maskin,.kart-driftprikk{border-radius:0}

/* ---------- 10. SKJEMA ---------- */
.form-group input,.form-group select,.form-group textarea,input,select,textarea{
  border-radius:0;border:1px solid var(--line-2);background:var(--card);color:var(--ink);
  font-family:var(--font-sans);padding:8px 10px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gul);outline-offset:0;border-color:var(--gul)}
:focus-visible{outline:2px solid var(--gul);outline-offset:2px}

/* ---------- 11. MODAL ---------- */
.modal{border-radius:0;border:1px solid var(--line);box-shadow:none;background:var(--card)}
.modal-overlay{background:rgba(11,12,10,.55)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}


/* ---------- 12. TILLEGG (09.09.2026): innebygde stiler ----------
   Plattformens JS bygger markup med style="border-radius:8px" o.l. på
   hundrevis av elementer. Prinsipp 1 (skarpe kanter, ingen skygger) krever
   derfor !important her — ellers står radiene igjen i alt JS-tegnet innhold. */
*,*::before,*::after{border-radius:0 !important;box-shadow:none !important}

/* ---------- 13. FELTAPPEN (09.09.2026): samme regler, feltappens klasser --
   Feltappen sto ikke i oppdraget, men skal snakke samme språk. Gult er
   handling; aktiv tilstand markeres med gult i begge temaer. */
.storknapp{background:var(--gul);color:#000}
.storknapp.ok{background:var(--card);color:var(--pluss);border:1.5px solid var(--pluss)}
.pill.active,.chip.valgt{background:var(--gul);border-color:var(--gul);color:#000}
.tab-btn.active{background:transparent;color:var(--ink);border-bottom-color:var(--gul)}
.nav-btn.active-nav{color:var(--gul)}
.progress-fill{background:var(--gul)}

/* ---------- 14. FARGEBETYDNINGER (23.09.2026, se DESIGN.md) ----------
   gult = hovedhandling · grønt = OK · oransje = advarsel · rødt = feil/fare
   · slett = rød kantlinje, alltid sist i knapperaden. Blå knapper finnes
   ikke lenger — blått er reservert for nøytrale status-merker. */
.btn-red,.btn-fare{background:transparent;color:var(--minus);border-color:var(--minus)}
.btn-red:hover,.btn-fare:hover{background:var(--minus-bg);color:var(--minus)}
.btn-ok{background:transparent;color:var(--pluss);border-color:var(--pluss)}