/* ================================================================
   Datavask (fanen #tab-datavask + veiviseren #vaskModal) — NoraDatavask
   i assets/js/datavask.js. Gjenbruker .jakt-prog/.jakt-status/
   .jakt-varsel (fremdrift/feil), .fopt/.fbox (checkboxer), .subtabs,
   .kvote-chip og .tag-* — bare det som er eget for Datavask står her.
   ================================================================ */

/* ---------- Fanen: historikken ---------- */
.vask-toolbar { flex-wrap: wrap; gap: 10px; }
.vask-kvoter { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.vask-tabell td { vertical-align: middle; }
.vask-tabell .vask-navn-celle { font-weight: 500; color: var(--text); max-width: 260px; }
.vask-tabell .vask-navn-celle small { display: block; font-weight: 400; color: var(--text-tertiary); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vask-tabell .vask-type { display: flex; flex-wrap: wrap; gap: 4px; }
.vask-tabell .tag { white-space: nowrap; }
.vask-status { min-width: 180px; }
.vask-status .jakt-prog { height: 5px; margin-bottom: 4px; }
.vask-status-tekst { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.vask-utloper { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 3px; white-space: nowrap; }
.vask-fil {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.vask-fil:hover { border-color: var(--accent); color: var(--accent); }
.vask-fil.primaer { background: var(--accent); border-color: var(--accent); color: #fff; }
.vask-fil.primaer:hover { background: var(--accent-hover); color: #fff; }
.vask-fil svg { width: 13px; height: 13px; }
.vask-fil:disabled { opacity: .45; cursor: default; }
.vask-handling { color: var(--text-tertiary); font-size: 12px; cursor: pointer; background: none; border: 0; font-family: inherit; padding: 2px 4px; }
.vask-handling:hover { color: var(--red); }
.vask-tabell.uten-av .vask-kol-av { display: none; }

/* ---------- Veiviseren ---------- */
.vask-modal { width: min(980px, 96vw); max-height: 92vh; overflow: auto; }
.vask-modal .fhint { font-size: 12px; line-height: 1.5; }
.vask-hode { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.vask-hode .modal-title { margin: 0; }
.vask-steg { display: flex; gap: 6px; list-style: none; margin: 0 0 0 auto; padding: 0; counter-reset: steg; }
.vask-steg li {
  counter-increment: steg; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-tertiary); padding: 3px 10px 3px 4px; border-radius: 99px;
}
.vask-steg li::before {
  content: counter(steg); width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; background: var(--bg); color: var(--text-tertiary);
}
.vask-steg li.aktiv { color: var(--accent); font-weight: 600; background: var(--accent-light); }
.vask-steg li.aktiv::before { background: var(--accent); color: #fff; }
.vask-steg li.ferdig { color: var(--text-secondary); }
.vask-steg li.ferdig::before { background: var(--accent-light); color: var(--accent); }

/* Steg 1: slippsonen */
.vask-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 210px; padding: 28px; border-radius: 14px; cursor: pointer; text-align: center;
  border: 2px dashed var(--border); background: var(--surface-hover);
  transition: border-color .15s, background .15s;
}
.vask-drop:hover, .vask-drop:focus-visible { border-color: var(--accent); outline: none; }
.vask-drop.over { border-color: var(--accent); background: var(--accent-light); }
.vask-drop svg { width: 34px; height: 34px; color: var(--accent); }
.vask-drop-tittel { font-size: 15px; font-weight: 600; color: var(--text); }
.vask-drop-hint { font-size: 12.5px; color: var(--text-tertiary); }
.vask-drop.laster { pointer-events: none; opacity: .55; }
.vask-opplast { margin-top: 14px; }
.vask-opplast-navn { font-size: 13px; font-weight: 500; margin-bottom: 6px; }

/* Steg 2 */
.vask-fil-rad { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.vask-navn { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.vask-navn .flabel { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.vask-filinfo { font-size: 12.5px; color: var(--text-tertiary); padding-bottom: 8px; }
.vask-seksjon { margin-top: 20px; }
.vask-sp { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.vask-sp-hint { font-weight: 400; font-size: 12px; color: var(--text-tertiary); margin-left: 6px; }
.vask-sp-liten { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.vask-forste { margin-top: 8px; }

.vask-forhand-wrap { margin-top: 8px; max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.vask-forhand { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; min-width: 100%; }
.vask-forhand th, .vask-forhand td {
  padding: 6px 10px; border-bottom: 1px solid var(--border-light); text-align: left;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vask-forhand thead th { position: sticky; background: var(--surface); z-index: 1; }
.vask-forhand thead tr.vask-velg-rad th { top: 0; padding: 8px 8px 4px; }
.vask-forhand thead tr.vask-velg-rad th:not(.radnr) { min-width: 150px; }
.vask-forhand thead tr.vask-hode-rad th {
  top: 44px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border);
}
.vask-forhand td.radnr, .vask-forhand th.radnr { color: var(--text-tertiary); min-width: 0; width: 1%; text-align: right; }
.vask-forhand .valgt { background: var(--accent-light) !important; color: var(--text); }
.vask-forhand thead th.valgt { color: var(--accent); }
.vask-forhand select { width: 100%; font-size: 12px; }

.vask-valg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.vask-kort {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--surface); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.vask-kort:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.vask-kort.valgt { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.vask-kort .fopt { padding: 2px 0 0; }
.vask-kort-tekst { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; min-width: 0; }
.vask-kort-tekst b { font-size: 14px; color: var(--text); }
.vask-felter { color: var(--text); font-size: 12.5px; }
.vask-felter .flink { margin-left: 4px; }
.vask-kvote { font-size: 11.5px; color: var(--text-tertiary); }
.vask-kvote.tom { color: var(--red); }
.vask-radmodus { margin-top: 12px; }
.vask-radmodus .fhint { margin-top: 6px; }

/* Steg 3: oppsummeringen */
.vask-tall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vask-tall > div { padding: 12px 14px; border-radius: 10px; background: var(--surface-hover); border: 1px solid var(--border-light); }
.vask-tall b { display: block; font-size: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.vask-tall span { font-size: 12px; color: var(--text-secondary); }
.vask-punkt { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.vask-punkt b { color: var(--text); }
.vask-advarsel {
  padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  background: var(--orange-light); color: var(--orange); border-left: 3px solid var(--orange);
}
.vask-advarsel b { color: inherit; }

/* Steg 4 */
.vask-kjor-navn { font-size: 14px; font-weight: 600; }

@media (max-width: 720px) {
  .vask-valg { grid-template-columns: 1fr; }
  .vask-tall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vask-steg { margin-left: 0; }
  .vask-steg li { padding-right: 6px; }
}
.vask-tabell .muted, .vask-modal .muted { color: var(--text-tertiary); }
/* Kvotechipene flyter som tekst (komponentens inline-flex bryter hvert ord for seg på mobil) */
.vask-kvoter .kvote-chip { display: inline-block; line-height: 1.45; }
@media (max-width: 720px) { .vask-kvoter { margin-left: 0; } }
.vask-fil + .vask-fil { margin-left: 4px; }