:root {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg: #000000;
  --panel: rgba(15, 15, 20, 0.94);
  --panel-strong: rgba(22, 22, 28, 0.98);
  --panel-border: rgba(255, 255, 255, 0.12);
  --text: #f5f8fc;
  --muted: #aebbcf;
  --muted-2: #7f90a8;
  --primary: #2563eb;
  --accent: #3fd18e; /* Grøn */
  --varsel: #e13c3c; /* Raud */
  --manuell: #f0b34f; /* Gul */
  --auto: #3b82f6; /* Blå */
}

* { box-sizing: border-box; }
html, body { 
  margin: 0; padding: 0; width: 100%; height: 100%; 
  background: var(--bg); overflow: hidden; color: var(--text); 
  touch-action: none; 
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skilt-font {
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-weight: bold; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ======== LAYOUT: KAMERA VS UI ======== */

.app {
  position: relative; width: 100%; height: 100svh; overflow: hidden;
}

/* 1. Kamera-laget */
.kamera-lag {
  position: absolute; inset: 0; z-index: 1; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.kamera-lag video {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.freeze-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2; pointer-events: none;
}
.kamera-blink {
  position: absolute; inset: 0; background: #ffffff; opacity: 0;
  pointer-events: none; z-index: 5; transition: opacity 0.25s ease-out;
}
.kamera-blink.flash { opacity: 0.9; transition: none; }

/* Skanneboks */
.fokusboks {
  position: absolute; 
  top: 38%; 
  left: 50%;
  width: min(90%, 750px); 
  aspect-ratio: 3.8 / 1;
  transform: translate(-50%, -50%);
  border: 3px solid var(--manuell); border-radius: 1rem;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.5);
  z-index: 3; transition: border-color 0.3s; pointer-events: none;
}
.fokusboks.auto { border-color: var(--auto); }
.fokusboks.treff { border-color: var(--accent); background: rgba(63, 209, 142, 0.1); }

.treff-markering {
  position: absolute; inset: auto auto 35% 50%;
  transform: translateX(-50%) translateY(0.5rem); z-index: 6;
  padding: 0.5rem 1.5rem; border-radius: 999px; border: 2px solid var(--accent);
  background: rgba(0,0,0,0.8); color: var(--accent); font-size: 1.8rem; opacity: 0;
  transition: opacity 100ms ease, transform 100ms ease; pointer-events: none;
}
.treff-markering.synleg { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Debug Overlay - må ha pointer-events: auto for at knappar skal virka */
.debug-overlay {
  position: fixed; top: 4.5rem; left: 1rem; right: 1rem; max-width: 400px;
  background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.8rem;
  padding: 0.8rem; font-family: monospace; font-size: 0.75rem; color: #fff;
  z-index: 99; pointer-events: auto; line-height: 1.4;
}

/* 2. UI-laget (Overlay) */
.ui-lag {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; pointer-events: none;
}

.glass-panel {
  background: rgba(15, 15, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.topp-rad {
  display: flex; justify-content: space-between; align-items: center;
  margin: 1rem; padding: 0.6rem 1rem; border-radius: 1rem; pointer-events: auto;
}
.status-info { display: flex; flex-direction: column; }
.statusmelding { margin: 0; color: var(--text); font-size: 0.95rem; font-weight: 700; }
.ocr-status-liten { color: var(--muted); font-size: 0.75rem; font-family: monospace; }
.topp-knappar { display: flex; align-items: center; gap: 0.5rem; }

.senter-klikk-sone {
  flex: 1; position: relative; pointer-events: auto;
}

.botn-omrade {
  padding: 1rem; display: flex; flex-direction: column; gap: 0.8rem; pointer-events: none;
}
.botn-rad {
  padding: 0.8rem; border-radius: 1.2rem; pointer-events: auto;
}
.kontrollrad {
  display: grid; gap: 0.8rem;
  grid-template-columns: auto minmax(120px, 1fr); align-items: center;
}

.resultatkort-popup {
  padding: 1rem; border-radius: 1.2rem; pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  transform: translateY(20px) scale(0.95); opacity: 0; display: none;
}
.resultatkort-popup:not(.skjult) {
  display: block; transform: translateY(0) scale(1); opacity: 1;
}

.resultatkort-popup.avregistrert { background: rgba(50, 10, 10, 0.85); border-color: var(--varsel); }
.resultatkort-popup.vraka { background: rgba(50, 35, 10, 0.85); border-color: var(--manuell); }

.resultat-topp { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem;}
.resultat-samandrag { font-size: 1.6rem; color: var(--muted); }
.resultat-samandrag[data-tilstand='treff'] { color: var(--accent); }
.resultatkort-popup.avregistrert .resultat-samandrag[data-tilstand='treff'] { color: var(--varsel); }
.resultatkort-popup.vraka .resultat-samandrag[data-tilstand='treff'] { color: var(--manuell); }

.bilmerke-logo {
  height: 38px; object-fit: contain; background-color: #ffffff;
  border-radius: 6px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.4);
}

.resultatinnhald { display: flex; flex-direction: column; gap: 0.8rem; }
.tematisk-gruppe { background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.75rem; overflow: hidden;}
.tematisk-tittel { background: rgba(255,255,255,0.05); padding: 0.5rem 0.8rem; font-size: 0.8rem; font-weight: bold; color: var(--muted-2); text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1);}

table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); }
th { color: var(--muted); font-size: 0.85rem; width: 40%; font-weight: 600;}
td { font-weight: bold; font-size: 0.95rem;}
tr:last-child th, tr:last-child td { border-bottom: none; }

/* Animasjonar og knappar */
@keyframes blinkRaud {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
@keyframes blinkAvreg {
  0%, 100% { opacity: 1; }
  66% { opacity: 0.2; }
}
@keyframes blinkGul {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.2; }
}

.blinker-gronn { animation: blinkRaud 0.6s ease-in-out 3; }
.blinker-raud { animation: blinkAvreg 0.75s ease-in-out 3; }
.blinker-gul { animation: blinkGul 0.6s ease-in-out 3; }
.gjennomstreka { text-decoration: line-through; }

.status-gronn { color: var(--accent) !important; }
.status-gul { color: var(--manuell) !important; }
.status-raud { color: var(--varsel) !important; }

.tekst-knapp {
  background: transparent; border: none; color: var(--muted-2);
  font-weight: bold; cursor: pointer; padding: 0.4rem 0.6rem;
  border-radius: 0.5rem; font-size: 0.9rem; transition: background 0.2s;
}
.tekst-knapp:hover { color: var(--text); background: rgba(255,255,255,0.1); }
.liten-tekst-knapp { font-size: 0.75rem; padding: 0.2rem 0.4rem; border: 1px solid rgba(255,255,255,0.2); }

.toggle-brytar { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; color: var(--muted); }
.toggle-brytar input { display: none; }
.brytar-ui { width: 2.2rem; height: 1.2rem; background: rgba(255,255,255,0.2); border-radius: 1rem; position: relative; transition: 0.2s; }
.brytar-ui::after { content: ''; position: absolute; top: 0.1rem; left: 0.1rem; width: 1rem; height: 1rem; background: #fff; border-radius: 50%; transition: 0.2s; }
.toggle-brytar input:checked + .brytar-ui { background: var(--auto); }
.toggle-brytar input:checked + .brytar-ui::after { transform: translateX(1rem); }
.stor-toggle .brytar-ui { width: 2.8rem; height: 1.5rem; }
.stor-toggle .brytar-ui::after { width: 1.3rem; height: 1.3rem; }
.stor-toggle input:checked + .brytar-ui::after { transform: translateX(1.3rem); }

.ocrfelt {
  display: flex; border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 0.9rem; background: rgba(0,0,0,0.6); overflow: hidden; height: 3.2rem;
}
.ocrfelt input {
  flex: 1; border: 0; background: transparent; color: var(--text); font-size: 1.1rem;
  min-width: 0; padding: 0 0.8rem; height: 100%; outline: none;
}
.ocrfelt input:focus { box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.5); }

button { cursor: pointer; border: 1px solid rgb(255 255 255 / 15%); background: #111; color: var(--text); font-weight: 700; border-radius: 0.75rem; padding: 0.7rem; transition: all 120ms ease; font: inherit;}
button:hover:not(:disabled) { background: #222; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
button.sekundar { background: transparent; border: 1px solid var(--panel-border); }
button.sekundar:hover { background: rgba(255,255,255,0.05); }

.ikonknapp { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; padding: 0; background: transparent;}
.ikonknapp:hover { background: rgba(255,255,255,0.1); }
.ikonknapp-smal { width: 3.2rem; border-radius: 0; border: none; border-left: 1px solid rgb(255 255 255 / 15%); background: rgba(255,255,255,0.05);}
.ikonknapp svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }

.kontinuerleg-ocr { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0 0.5rem;}
.ocr-etikett { font-size: 0.75rem; color: var(--muted-2); }
.ocr-avlesing { flex: 1; color: var(--auto); font-size: 0.9rem; }

/* ======== MODALAR ======== */

.modalt-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px); z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 1rem; pointer-events: auto;
}
.modalt-kort {
  position: relative; width: min(480px, 100%); max-height: 90vh;
  overflow-y: auto; background: #111; border: 1px solid #333;
  padding: 1.2rem; border-radius: 1.2rem;
}
.detalj-kort { width: min(600px, 100%); }
.modalt-kort h2 { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.3rem; }

.lukk-knapp {
  position: absolute; top: 0.8rem; right: 0.8rem; background: #222; border: none;
  font-size: 1.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  color: var(--muted); display: grid; place-items: center;
}
.lukk-knapp:hover { color: #fff; background: #333; }

.utvida-knapp { width: 100%; background: #222; margin-top: auto; font-size: 0.85rem; }
.utvida-innhald { background: #050505; border-radius: 0.5rem; overflow-x: auto; margin-top: 0.5rem; border: 1px solid #333;}
.utvida-innhald table { font-family: monospace; }
.utvida-innhald th, .utvida-innhald td { padding: 0.4rem; font-size: 0.75rem; word-break: break-all; }
.utvida-innhald th { color: var(--muted-2); width: 35%; font-weight: normal; }

.historikk-liste { display: flex; flex-direction: column; gap: 0.5rem; }
.historikk-rad {
  display: flex; justify-content: space-between; align-items: center;
  background: #000; padding: 0.8rem; border-radius: 0.5rem; border: 1px solid #222; cursor: pointer;
}
.historikk-rad:hover { border-color: var(--auto); }
.historikk-reg { font-size: 1.2rem; }
.historikk-merke { color: var(--muted); font-size: 0.85rem; }
.historikk-tid { color: var(--muted-2); font-size: 0.75rem; }

.skjult { display: none !important; }

/* ======== ZOOM SLIDER ======== */
.zoom-kontroll-container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: 1rem;
  pointer-events: auto;
  margin-bottom: 0.2rem;
}

.zoom-ikon {
  font-size: 1rem;
  opacity: 0.8;
}

.zoom-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  height: 6px;
  border-radius: 3px;
  outline: none;
}

.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease;
}

.zoom-slider::-webkit-slider-thumb:active {
  transform: scale(1.15);
}

.zoom-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.zoom-tekst {
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 3.2rem;
  text-align: right;
}

.spinner {
  width: 1.2rem; height: 1.2rem; border: 2px solid var(--muted-2);
  border-top-color: var(--text); border-radius: 50%; animation: spinn 1s linear infinite;
}
@keyframes spinn { to { transform: rotate(360deg); } }

@media (min-width: 800px) {
  .ui-lag { align-items: center; }
  .topp-rad, .botn-omrade { width: 100%; max-width: 800px; }
}