/* ============================================================
   MITTREGNSKAP BILAG - mobilapp

   Egen app, egen kodebase. Den deler bare designspråket med
   regnskapssystemet: samme fargeramp, samme skrift, samme
   ikonsett, samme radius- og bevegelsesregler. Ingen felles
   CSS-fil, så de to kan endres uavhengig av hverandre.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS - samme verdier som regnskapssystemet
   ------------------------------------------------------------ */
:root{
  color-scheme:light;

  --card:#FFFFFF;
  --soft:#FAFAF8;
  --soft-2:#F1F1EE;
  --bg:#F3F3F1;
  --border:#E4E4DE;
  --border-strong:#D2D2CA;
  --muted-2:#6C6E63;
  --muted:#5F6159;
  --ink-2:#45473F;
  --text:#1B1D19;
  --ink:#181B18;

  --accent:#0F6D4F;
  --accent-dark:#0A5440;
  --accent-soft:#E6F0EA;
  --accent-line:#BCD6C7;
  --on-accent:#FFFFFF;

  --amber:#8A5A12;
  --amber-soft:#F6EFDF;
  --amber-line:#E4D2AC;
  --rose:#A32F28;
  --rose-soft:#F8E8E6;
  --rose-line:#E8C4BF;
  --on-rose:#FFFFFF;

  /* Kontroller 6, bokser 10, overlegg 14, statusmerker runde. */
  --r-ctl:6px;
  --r-box:10px;
  --r-overlay:14px;
  --r-pill:999px;

  --shadow-xs:0 1px 2px rgba(27,29,25,.05);
  --shadow-sm:0 1px 2px rgba(27,29,25,.05), 0 2px 6px -3px rgba(27,29,25,.08);
  --shadow-lg:0 24px 48px -20px rgba(27,29,25,.26);
  --focus-ring:0 0 0 3px rgba(15,109,79,.30);

  --ease:cubic-bezier(.2,.8,.3,1);
  --dur:.16s;

  /* Litt større enn på PC: telefonen holdes lenger unna øyet, og
     alt under 16px på et input får iOS til å zoome inn. */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:15px;
  --fs-md:16px;
  --fs-lg:19px;
  --fs-xl:24px;

  --font-ui:'Instrument Sans','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --font-id:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Minste anbefalte trykkflate. Alt som kan trykkes holder denne. */
  --trykk:44px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --card:#1E211D; --soft:#242722; --soft-2:#2B2F29; --bg:#161814;
    --border:#33372F; --border-strong:#454A40;
    --muted-2:#8E9187; --muted:#AAADA2; --ink-2:#D2D5C9; --text:#F0F1EB; --ink:#101210;
    --accent:#4FBF92; --accent-dark:#6FD2A8; --accent-soft:#1B3229; --accent-line:#2E5645;
    --on-accent:#10231B; --on-rose:#2A100D;
    --amber:#E0B071; --amber-soft:#332818; --amber-line:#4E3D21;
    --rose:#E99189; --rose-soft:#331E1B; --rose-line:#4E2B26;
    --focus-ring:0 0 0 3px rgba(79,191,146,.38);
    --shadow-xs:0 1px 2px rgba(0,0,0,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 6px -3px rgba(0,0,0,.5);
    --shadow-lg:0 24px 48px -20px rgba(0,0,0,.7);
  }
}
[data-theme="dark"]{
  color-scheme:dark;
  --card:#1E211D; --soft:#242722; --soft-2:#2B2F29; --bg:#161814;
  --border:#33372F; --border-strong:#454A40;
  --muted-2:#8E9187; --muted:#AAADA2; --ink-2:#D2D5C9; --text:#F0F1EB; --ink:#101210;
  --accent:#4FBF92; --accent-dark:#6FD2A8; --accent-soft:#1B3229; --accent-line:#2E5645;
  --on-accent:#10231B; --on-rose:#2A100D;
  --amber:#E0B071; --amber-soft:#332818; --amber-line:#4E3D21;
  --rose:#E99189; --rose-soft:#331E1B; --rose-line:#4E2B26;
  --focus-ring:0 0 0 3px rgba(79,191,146,.38);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 6px -3px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -20px rgba(0,0,0,.7);
}

/* ------------------------------------------------------------
   2. GRUNNLAG
   ------------------------------------------------------------ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-ui);font-size:var(--fs-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  /* Hindrer at hele siden "spretter" når man drar i den på iOS. */
  overscroll-behavior-y:none;
}
[hidden]{display:none !important}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-ctl);
}

h1,h2{margin:0;line-height:1.25;letter-spacing:-.02em;font-weight:600}
p{margin:0;line-height:1.5}

.num{font-variant-numeric:tabular-nums;font-weight:600}
.kode{font-family:var(--font-id);font-size:.94em;letter-spacing:-.02em}

/* ------------------------------------------------------------
   3. SKJEMAFELT
   16px er ikke en smaksak: Safari på iOS zoomer automatisk inn
   på et felt med mindre skrift, og da må brukeren zoome ut igjen
   manuelt etter hvert eneste felt.
   ------------------------------------------------------------ */
label{
  display:block;font-size:var(--fs-sm);font-weight:500;
  margin:16px 0 6px;color:var(--ink-2);
}
label:first-of-type{margin-top:0}

input[type=text],input[type=email],input[type=password],
input[type=date],input[type=number],select{
  width:100%;min-height:var(--trykk);padding:11px 13px;
  border:1px solid var(--border-strong);border-radius:var(--r-ctl);
  background:var(--card);color:var(--text);
  font-family:inherit;font-size:16px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
input:focus-visible,select:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:var(--focus-ring);
}
input::placeholder{color:var(--muted-2)}

.felt-rad{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.felt-rad label{margin-top:16px}

/* ------------------------------------------------------------
   4. KNAPPER
   ------------------------------------------------------------ */
.knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--trykk);padding:11px 18px;
  border:1px solid transparent;border-radius:var(--r-ctl);
  font-family:inherit;font-size:var(--fs-base);font-weight:600;cursor:pointer;
  background:var(--soft-2);color:var(--ink-2);border-color:var(--border);
  transition:background-color var(--dur) var(--ease),transform .08s var(--ease);
}
.knapp:active{transform:scale(.985)}
.knapp:disabled{opacity:.5;cursor:not-allowed;transform:none}
.knapp-full{width:100%}
.knapp-liten{min-height:36px;padding:7px 12px;font-size:var(--fs-sm)}
.knapp-primar{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.knapp-primar:active:not(:disabled){background:var(--accent-dark)}
.knapp-sekundar{background:var(--soft-2);color:var(--ink-2);border-color:var(--border)}

.ikonknapp{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--trykk);height:var(--trykk);flex:0 0 auto;
  padding:0;border:0;border-radius:var(--r-ctl);
  background:transparent;color:rgba(255,255,255,.75);
  font-size:19px;cursor:pointer;
}
.ikonknapp:active{background:rgba(255,255,255,.12);color:#fff}

/* Bryteren viser ikonet for det utseendet du får hvis du trykker. */
.tema-lys,.tema-mork{display:none}
[data-theme="dark"] .tema-lys{display:inline-block}
:root:not([data-theme="dark"]) .tema-mork{display:inline-block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tema-mork{display:none}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .tema-lys{display:inline-block}
}

/* ------------------------------------------------------------
   5. INNLOGGING OG SPERRESKJERMER
   ------------------------------------------------------------ */
.gate{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--ink);
}
.gate-kort{
  width:100%;max-width:400px;background:var(--card);
  border-radius:var(--r-overlay);padding:28px 24px calc(28px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg);
}
.gate-merke{
  width:44px;height:44px;border-radius:var(--r-box);background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  color:var(--on-accent);font-weight:600;font-size:var(--fs-md);margin-bottom:18px;
}
.gate-merke-varsel{background:var(--amber-soft);color:var(--amber);font-size:22px}
.gate-kort h1{font-size:var(--fs-lg);margin-bottom:6px}
.gate-tekst{color:var(--muted);font-size:var(--fs-sm);margin-bottom:22px}
.gate-kort .knapp{margin-top:22px}
.gate-status{font-size:var(--fs-sm);color:var(--muted);text-align:center;margin-top:14px;min-height:20px}

.varsel{
  padding:11px 13px;border-radius:var(--r-ctl);margin-bottom:16px;
  font-size:var(--fs-sm);font-weight:500;border:1px solid transparent;
}
.varsel-feil{background:var(--rose-soft);color:var(--rose);border-color:var(--rose-line)}

/* ------------------------------------------------------------
   6. APPRAMME
   ------------------------------------------------------------ */
.app{display:flex;flex-direction:column;min-height:100dvh}

.topp{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
}
.topp-merke{
  width:36px;height:36px;border-radius:var(--r-ctl);background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:var(--on-accent);font-weight:600;font-size:var(--fs-sm);
}
.topp-tekst{flex:1;min-width:0;line-height:1.25}
.topp-selskap{
  display:block;font-weight:600;font-size:var(--fs-base);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topp-under{display:block;font-size:var(--fs-xs);color:#8A8D83}

.innhold{
  flex:1;width:100%;max-width:560px;margin:0 auto;
  padding:16px 16px calc(32px + env(safe-area-inset-bottom));
}

.kort{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-box);
  padding:18px;margin-bottom:14px;box-shadow:var(--shadow-xs);
}
.kort-tittel{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:var(--fs-md);margin-bottom:4px;
}
.kort-hjelp{color:var(--muted);font-size:var(--fs-sm);margin-bottom:16px}
.kort-tittel + label{margin-top:16px}

.valgfritt{
  font-size:var(--fs-xs);font-weight:500;color:var(--muted);
  background:var(--soft-2);border:1px solid var(--border);
  padding:1px 9px;border-radius:var(--r-pill);
}

/* ------------------------------------------------------------
   7. BILDEFANGST - appens hovedhandling

   Kamera og filvalg er to ulike knapper, ikke én. Et enkelt
   <input type="file"> åpner en meny der "Ta bilde" er ett av
   flere valg, og det er ett trykk ekstra hver eneste gang for
   det som er den vanligste handlingen i appen.
   ------------------------------------------------------------ */
.velg-flate{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-top:14px}

.fangstknapp{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:120px;padding:18px 12px;
  border:1.5px dashed var(--border-strong);border-radius:var(--r-box);
  background:var(--soft);color:var(--muted);
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.fangstknapp .ic{--ic-size:30px;color:var(--muted-2)}
.fangstknapp:active{border-color:var(--accent);background:var(--accent-soft)}

/* Kameraknappen er den primære: heltrukken kant, aksentfarge,
   og bredere enn filknappen. */
.fangstknapp-primar{
  border-style:solid;border-color:var(--accent-line);
  background:var(--accent-soft);color:var(--accent);font-size:var(--fs-base);
}
.fangstknapp-primar .ic{--ic-size:34px;color:var(--accent)}

.forhandsvisning{
  margin:14px 0 0;border:1px solid var(--border);border-radius:var(--r-box);
  overflow:hidden;background:var(--soft-2);
}
.forhandsvisning img{
  display:block;width:100%;max-height:46vh;object-fit:contain;
  background:var(--soft-2);
}
.forhands-pdf{
  display:flex;align-items:center;justify-content:center;
  min-height:140px;color:var(--muted);font-size:44px;
}
.forhands-bunn{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:var(--card);border-top:1px solid var(--border);
}
.forhands-navn{
  flex:1;min-width:0;font-size:var(--fs-sm);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.ai-knapp{margin-top:12px}

.knapp-send{margin:4px 0 26px;min-height:52px;font-size:var(--fs-md)}

/* ------------------------------------------------------------
   8. LISTE OVER INNSENDTE BILAG
   ------------------------------------------------------------ */
.liste-seksjon{margin-top:8px}
.liste-tittel{font-size:var(--fs-md);margin-bottom:12px}
.bilagsliste{display:flex;flex-direction:column;gap:10px}

.bilag{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-box);
  padding:14px;box-shadow:var(--shadow-xs);
}
.bilag-topp{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.bilag-lev{font-weight:600;font-size:var(--fs-base);min-width:0;overflow-wrap:anywhere}
.bilag-sum{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.bilag-meta{font-size:var(--fs-sm);color:var(--muted);margin-top:3px}
.bilag-bunn{display:flex;align-items:center;gap:8px;margin-top:12px}
.bilag-bunn .knapp{flex:0 0 auto}
.bilag-bunn .merke{margin-right:auto}

.merke{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;border:1px solid transparent;
}
.merke-rose{background:var(--rose-soft);color:var(--rose);border-color:var(--rose-line)}
.merke-amber{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}
.merke-gronn{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}

/* Bilag som venter på nett. Skal se ut som et bilag - ikke som en
   feilmelding - men det må være tydelig at det ikke er framme ennå. */
.bilag-ko{border-style:dashed;border-color:var(--amber-line);background:var(--amber-soft)}
.merke-vent{background:var(--card);color:var(--amber);border-color:var(--amber-line);margin-right:auto}
.knapp-fare{background:var(--rose-soft);color:var(--rose);border-color:var(--rose-line)}
.liste-hjelp{color:var(--muted);font-size:var(--fs-sm);margin:-6px 0 12px}
.liste-tittel{display:flex;align-items:center;gap:8px}

.tom{
  text-align:center;padding:36px 20px;
  background:var(--card);border:1px dashed var(--border-strong);border-radius:var(--r-box);
  color:var(--muted);font-size:var(--fs-sm);line-height:1.55;
}
.tom .ic{--ic-size:30px;color:var(--muted-2);margin-bottom:10px}

/* Laste-skjelett: samme form som innholdet det venter på. */
.skjelett{
  background:var(--soft-2);border-radius:var(--r-ctl);
  position:relative;overflow:hidden;color:transparent;height:74px;
}
.skjelett::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:skimmer 1.3s infinite;
}
@keyframes skimmer{to{transform:translateX(100%)}}

/* ------------------------------------------------------------
   9. VARSLER
   Ligger nederst, over safe-area, der tommelen er.
   ------------------------------------------------------------ */
.varsler{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:60;display:flex;flex-direction:column;gap:8px;
  max-width:520px;margin:0 auto;pointer-events:none;
}
.varselboks{
  display:flex;align-items:flex-start;gap:9px;
  background:var(--ink);color:#fff;
  padding:13px 14px;border-radius:var(--r-box);
  font-size:var(--fs-sm);font-weight:500;line-height:1.45;
  box-shadow:var(--shadow-lg);border-left:3px solid var(--accent);
  animation:varselInn .22s var(--ease);pointer-events:auto;
}
.varselboks-feil{border-left-color:#E0736A}
.varselboks-ok{border-left-color:#5DC79B}
@keyframes varselInn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ------------------------------------------------------------
   10. REDUSERT BEVEGELSE
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .skjelett::after{display:none}
}