/* AuditUp · auditup.css — mørkt, nøkternt (014-LAN-stil). Bare kortene har farge. Handlingsknapper: Ferdig-oransje #FF8A2A med mørk fet tekst.
   Fargene følger logoen (#0A0B0F bakgrunn, lavendel #9490AA). Grønn #22C55E / rød brukes bare for status og (senere) framgang/tilbakegang. */
:root {
  --bg: #0A0B0F; --surface: #13151C; --surface2: #1A1D27; --border: #2A2E3B; --border-strong: #3B4152;
  --text: #E8EBF2; --text2: #A9B0C0; --text3: #8B93A6;
  --lav: #9490AA; --orange: #FF8A2A; --orange-text: #1A1205;
  --green: #22C55E; --red: #FF6B6B; --amber: #FFC94D; --info: #7FC3F5;
  --radius: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.45; min-height: 100vh; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, .slipp:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #7FB2FF; outline-offset: 2px; }

/* ---------- Startskjerm ---------- */
.splash { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; opacity: 1; transition: opacity .45s ease; }
.splash.borte { opacity: 0; pointer-events: none; }
.splash-logo { width: min(78vw, 420px); height: auto; display: block; animation: splash-inn .6s ease both; }
@keyframes splash-inn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.side { opacity: 1; }
body.splash-aktiv .side { opacity: 0; }
.side { transition: opacity .45s ease; }

/* ---------- Topp ---------- */
.topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); max-width: 1180px; margin: 0 auto; }
.topp-logo { height: 78px; width: auto; display: block; }
.lenke-knapp { background: transparent; border: 1px solid var(--border-strong); color: var(--text); border-radius: 999px; padding: 8px 16px; min-height: 40px; }
.lenke-knapp:hover { background: var(--surface2); }
.test-band { max-width: 1148px; margin: 4px auto 0; background: #2A1F05; border: 1px solid #6B5414; color: var(--amber); padding: 8px 14px; border-radius: 12px; font-weight: 700; font-size: .95rem; text-align: center; }
@media (min-width: 1212px) { .test-band { margin-left: auto; margin-right: auto; } }
@media (max-width: 1211px) { .test-band { margin-left: 16px; margin-right: 16px; } }
.hjelp-panel { max-width: 1148px; margin: 8px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
@media (max-width: 1211px) { .hjelp-panel { margin-left: 16px; margin-right: 16px; } }
.hjelp-panel h2 { margin: 0 0 8px; font-size: 1.05rem; }
.hjelp-panel dt { font-weight: 700; margin-top: 10px; }
.hjelp-panel dd { margin: 2px 0 0; color: var(--text2); }

/* ---------- Hoved ---------- */
.hoved { max-width: 1180px; margin: 0 auto; padding: 8px 16px calc(40px + env(safe-area-inset-bottom)); }
h1 { font-size: clamp(1.45rem, 4.2vw, 2.1rem); line-height: 1.15; margin: 12px 0 6px; letter-spacing: -.01em; }
.ingress { margin: 0 0 20px; color: var(--text2); font-size: 1.05rem; }

.kort-rutenett { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 900px) { .kort-rutenett { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

.kort { background: var(--surface); border: 1.5px solid var(--lav); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-shadow: 0 0 0 4px rgba(148,144,170,.06); }
.kort.kort-tom { border-style: dashed; border-color: var(--border-strong); background: #11131A; box-shadow: none; }
.kort.st-ok { border-color: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.08); }
.kort.st-aviso { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255,201,77,.08); }
.kort.st-feil { border-color: var(--red); box-shadow: 0 0 0 4px rgba(255,107,107,.09); }
.kort.st-leser { border-color: var(--info); }
.kort-hode { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kort-hode h2 { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.nr { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lav); color: #14121C; font-weight: 800; font-size: .95rem; }
.pille { margin-left: auto; flex: none; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text2); white-space: nowrap; }
.pille.kommer { border-color: #6B5414; color: var(--amber); }
.hjelp { margin: 0; color: var(--text2); font-size: .95rem; }

.slipp { border: 2px dashed var(--border-strong); border-radius: 14px; padding: 18px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-height: 164px; justify-content: center; background: rgba(255,255,255,.015); transition: border-color .15s, background .15s; }
.slipp.over, .slipp:hover { border-color: var(--lav); background: rgba(148,144,170,.08); }
.slipp.over { border-style: solid; }
.slipp svg { width: 36px; height: 36px; color: var(--lav); }
.slipp .tx { font-weight: 600; }
.slipp .eller { color: var(--text3); font-size: .9rem; }
.slipp .ext { color: var(--text3); font-size: .85rem; }
.sek { background: transparent; border: 1.5px solid var(--lav); color: var(--text); border-radius: 12px; padding: 10px 20px; min-height: 44px; font-weight: 700; }
.sek:hover { background: rgba(148,144,170,.15); }
@media (hover: none), (max-width: 700px) { .slipp .tx, .slipp .eller { display: none; } .slipp { min-height: 120px; } }

.lagret { display: flex; gap: 8px; align-items: flex-start; color: var(--text2); font-size: .9rem; padding: 8px 10px; border-radius: 10px; background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.25); }
.lagret svg { flex: none; width: 18px; height: 18px; color: var(--green); margin-top: 2px; }

.stat { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; }
.stat svg { flex: none; width: 24px; height: 24px; margin-top: 1px; }
.stat.ok svg { color: var(--green); } .stat.aviso svg { color: var(--amber); } .stat.feil svg { color: var(--red); } .stat.leser svg { color: var(--info); }
.stat span { min-width: 0; overflow-wrap: anywhere; }
.spinner { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.filnavn { font-size: .92rem; color: var(--text2); overflow-wrap: anywhere; }

.merke { align-self: flex-start; font-size: .8rem; font-weight: 800; color: var(--amber); background: #2A1F05; border: 1px solid #6B5414; border-radius: 8px; padding: 3px 9px; overflow-wrap: anywhere; }
dl.sum { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: .93rem; }
dl.sum dt { color: var(--text3); } dl.sum dd { margin: 0; overflow-wrap: anywhere; }
.telling { color: var(--text2); font-size: .9rem; margin: 0; }

ul.funn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
ul.funn li { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; border-radius: 10px; padding: 7px 9px; background: var(--surface2); border: 1px solid var(--border); }
ul.funn li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
ul.funn li.aviso svg { color: var(--amber); } ul.funn li.feil svg { color: var(--red); } ul.funn li.info svg { color: var(--info); }
ul.funn li.feil { border-color: rgba(255,107,107,.45); } ul.funn li.aviso { border-color: rgba(255,201,77,.35); }
ul.funn .ftx { min-width: 0; overflow-wrap: anywhere; }
ul.funn .kode { color: var(--text3); font-size: .75rem; margin-left: 6px; }
ul.detalj { margin: 6px 0 0; padding: 0 0 0 16px; color: var(--text2); font-size: .82rem; }
ul.detalj li { display: list-item; background: none; border: 0; padding: 1px 0; list-style: disc; }
.knapp-rad { display: flex; flex-wrap: wrap; gap: 8px; }
.liten { background: transparent; border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px 14px; min-height: 40px; font-weight: 600; font-size: .92rem; }
.liten:hover { background: var(--surface2); }
.liten.lenke { border-color: transparent; color: var(--info); text-decoration: underline; padding-left: 4px; padding-right: 4px; }
.manuell { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.manuell label { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--text2); flex: 1 1 110px; min-width: 0; }
.manuell input { background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); border-radius: 10px; padding: 9px 10px; min-height: 40px; font: inherit; width: 100%; }
.tabell { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabell th, .tabell td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--border); }
.tabell td.t, .tabell th.t { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Par-merknader, knapper ---------- */
.par { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.par .funn li { }
.handling { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 22px 0 8px; }
.primaer { background: var(--orange); color: var(--orange-text); border: 0; border-radius: 14px; font-weight: 800; font-size: 1.1rem; padding: 14px 34px; min-height: 52px; min-width: min(100%, 280px); box-shadow: 0 6px 20px rgba(255,138,42,.25); }
.primaer:hover:not(:disabled) { filter: brightness(1.06); }
.primaer:disabled { background: #2B2F3A; color: #8B93A6; box-shadow: none; cursor: not-allowed; }
.hint { margin: 0; color: var(--text2); font-size: .95rem; text-align: center; }
.video-rad { display: flex; justify-content: center; margin-top: 18px; }
.video { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 1.5px dashed var(--border-strong); color: var(--text3); border-radius: 14px; padding: 10px 20px; min-height: 48px; font-weight: 700; cursor: not-allowed; }
.video svg { width: 22px; height: 22px; }

/* ---------- Sammendrag ---------- */
.sammendrag { margin-top: 20px; background: var(--surface); border: 1.5px solid var(--lav); border-radius: var(--radius); padding: 18px; }
.sammendrag h2 { margin: 0 0 4px; font-size: 1.2rem; }
.sammendrag .note { margin: 0 0 12px; color: var(--text2); font-size: .92rem; }
.regel { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0 14px; }
.regel select { background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 10px; min-height: 42px; font: inherit; max-width: 100%; }
.regel .ant { font-size: .78rem; font-weight: 800; color: var(--amber); border: 1px solid #6B5414; background: #2A1F05; border-radius: 8px; padding: 3px 9px; }
.tabell-wrap { overflow-x: auto; }
.sammendrag .tabell td, .sammendrag .tabell th { overflow-wrap: anywhere; vertical-align: top; }
.sammendrag .rad-total td { font-weight: 800; border-top: 2px solid var(--border-strong); }

/* ---------- Endring Siste → Aktuell (pil + fortegn + farge; aldri bare farge) ---------- */
.endr { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.endr-opp { color: var(--green); } .endr-ned { color: var(--red); } .endr-null { color: var(--text2); }
.del { margin-top: 4px; } .del summary { cursor: pointer; font-size: .8rem; color: var(--text2); padding: 2px 0; }
.del-rad td { padding-top: 0 !important; }
.del-liste { list-style: none; margin: 4px 0 6px; padding: 0; font-size: .82rem; }
.del-liste li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.del-liste .dn { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; color: var(--text2); }
.del-liste .dt { font-variant-numeric: tabular-nums; } .del-liste .endr { margin-left: auto; }
/* ---------- Bygging av presentasjon ---------- */
.bygg { margin-top: 16px; border-color: var(--border-strong); }
.bygg h2 { margin: 0 0 8px; font-size: 1.2rem; }
.bygg .note { margin: 4px 0 10px; color: var(--text2); font-size: .95rem; }
.bygg .hint { text-align: left; margin-top: 6px; font-variant-numeric: tabular-nums; }
.fremdrift { height: 12px; background: #232734; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.fremdrift > span { display: block; height: 100%; background: var(--orange); border-radius: 999px; transition: width .2s ease; }
.bygg .kontroll { list-style: none; padding: 0; margin: 10px 0; }
.bygg .knapp-rad { margin-top: 12px; align-items: center; }
a.primaer.lenke { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
@media (max-width: 480px) { .endr { font-size: .85rem; } a.primaer.lenke { width: 100%; } }

.sammendrag .tabell th.t, .sammendrag .tabell td.t { overflow-wrap: normal; white-space: nowrap; padding-left: 8px; }
.sammendrag .tabell th.t { font-size: .78rem; line-height: 1.15; white-space: normal; word-break: normal; overflow-wrap: normal; }
.sam-hode { margin: 0 0 12px; }
.sammendrag .tabell td:first-child { overflow-wrap: break-word; word-break: normal; min-width: 7.2rem; }
@media (max-width: 420px) { .sammendrag .tabell { font-size: .8rem; } .sammendrag .tabell th.t, .sammendrag .tabell td.t { padding-left: 4px; padding-right: 4px; } .sammendrag { padding: 14px 12px; } }

/* ---------- Innstillinger ---------- */
.innst { margin: 22px 0 8px; color: var(--text2); font-size: .9rem; }
.innst summary { cursor: pointer; padding: 6px 0; font-weight: 700; }
.innst-rad { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 10px 0; }
.innst-rad label { flex: 1 1 100%; font-weight: 700; color: var(--text); }
.innst-rad select, .innst-rad input { background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 10px; min-height: 42px; font: inherit; max-width: 100%; }
.innst-rad input { width: 7rem; } .innst-rad small { flex: 1 1 100%; color: var(--text3); }
.innst .ant { font-size: .78rem; font-weight: 800; color: var(--amber); border: 1px solid #6B5414; background: #2A1F05; border-radius: 8px; padding: 3px 9px; }
button.video:not(:disabled) { cursor: pointer; }
.video:not(:disabled) { border-style: solid; border-color: var(--lav); color: var(--text); background: var(--surface); } .video:not(:disabled):hover { filter: brightness(1.15); }

/* ---------- Tilgang / deling / nedlastinger (Audit-App web) ---------- */
.topp-knapper { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.fil-storrelse { color: var(--text2); font-weight: 600; align-self: center; }
.filer-sum { margin-top: 10px; }
#filerSumStor { color: var(--amber); font-weight: 700; }
.knapp-rad { align-items: center; }
.ark-bak { position: fixed; inset: 0; z-index: 200; background: rgba(5,6,9,.72); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.ark { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; background: var(--surface); border: 1.5px solid var(--lav); border-radius: var(--radius); padding: 20px 18px; }
.ark h2 { margin: 0 0 8px; font-size: 1.3rem; }
.ark label { display: block; margin: 12px 0 6px; font-size: .92rem; color: var(--text2); }
.ark input { width: 100%; background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); border-radius: 10px; padding: 10px 12px; min-height: 46px; font: inherit; }
.ark .primaer { min-width: 0; width: 100%; margin-top: 12px; }
.ark .liten-primaer { width: 100%; }
.del-lenker { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.del-lenker a.sek { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text); flex: 1 1 90px; }
.del-tekst { margin: 8px 0; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--lav); border-radius: 8px; color: var(--text2); white-space: pre-wrap; overflow-wrap: anywhere; }
.kode-stor { font-size: 1.6rem; font-weight: 800; letter-spacing: .08em; text-align: center; margin: 8px 0; }
.bruker-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bruker-liste li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .bruker-liste li span { flex: 1 1 100%; font-weight: 600; }
.skjult-ta { position: fixed; left: -9999px; top: 0; }
@media (max-width: 480px) { .topp-knapper .lenke-knapp { padding: 8px 12px; } }