/*
 * FIL: viewer.css
 * PROBLEM:   View-mode trenger sine egne komponenter (perspektiv-liste,
 *            alternativ-bytte, kollapsbart info-panel, slideshow) oppå det
 *            delte skallet.
 * LØSNING:   KUN view-spesifikk struktur. Skall-layouten (grid, rail, main,
 *            kart, kontekst-container) eies av shell.css. Struktur, ikke
 *            finstil — stil føres på senere.
 * SCOPE GJØR: ✓ mode-list, alt-switch, info-panel (kollaps), slideshow
 * SCOPE IKKE: ✗ Skall-grid/rail/main (shell.css), ✗ finstil/tema
 * IMPORTERES AV: templates/geo/viewer.html
 * STATUS:    partial
 */

/* ═══ Dokument-modus (doc-viewer): ingen header-bar — dokument-tittel +
   kontroll-stripe OVER kartet, kontrollene i sidens flyt (ikke overlegg). ═══ */
.app-doc.doc-viewer .app-nav {
  display: none; /* header-baren gjør ingenting i kundeviseren */
}

/* Tittel venstre, kart-kontroller som motvekt høyre — én rad, flush med
   bakgrunnen (ingen boks). Wrapper under hverandre på smale skjermer. */
.doc-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  flex-wrap: wrap;
  margin: 0 0 1.1rem;
}

.doc-head {
  margin: 0;
}

.doc-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-tertiary);
}

.doc-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.025em;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  color: var(--text-primary);
}

/* Kart-kontroller flush med bakgrunnen (ingen boks/heving), kompakt og
   høyrejustert som motvekt til tittelen — ikke en dominerende menystripe.
   margin-left:auto skyver til høyre BÅDE ved siden av tittelen og når en lang
   tittel tvinger kontrollene til egen linje (flex-grow fyller ikke en wrappet
   linje pålitelig). flex-shrink:0 = ikke klem; wrap heller. */
.map-toolbar {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 0;
  background: none;
  border: none;
}

.doc-viewer .map-toolbar .map-controls {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  max-width: none;
}

.doc-viewer .map-toolbar .map-control {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem 0.7rem;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

.doc-viewer .map-toolbar .map-control__label {
  margin: 0;
  font-size: 0.68rem;
}

.doc-viewer .map-toolbar .terrain-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem;
}

/* Terreng-modus som kompakte segment-chips (skjult radio, valgt = fylt). */
.doc-viewer .map-toolbar .terrain-opt {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius, 4px);
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.doc-viewer .map-toolbar .terrain-opt input {
  display: none;
}

.doc-viewer .map-toolbar .terrain-opt:hover {
  border-color: var(--accent);
}

.doc-viewer .map-toolbar .terrain-opt:has(input:checked) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* nDSM på sin egen (tredje) rad, høyrejustert — egen toggle-chip som matcher
   terreng-chipsene (skjult native checkbox, fylt når på). */
.doc-viewer .map-toolbar .ndsm-row {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.55rem;
  margin: 0.3rem 0 0;
}

.doc-viewer .map-toolbar .ndsm-toggle {
  display: none;
}

.doc-viewer .map-toolbar .ndsm-row .layer-name {
  flex: 0 0 auto; /* ikke vokse — chip på innholdsbredde, ikke full rad */
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius, 4px);
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.doc-viewer .map-toolbar .ndsm-row:hover .layer-name {
  border-color: var(--accent);
}

.doc-viewer .map-toolbar .ndsm-row:has(.ndsm-toggle:checked) .layer-name {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ═══ Lag-velger (doc-viewer): grupperte rader — fargeprøve + fullt navn +
   på/av-bryter. Dobler som legend. Scopet så studioets egne rader er urørt. ═══ */
.doc-viewer .layer-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

/* «Skjul alle / Vis alle» er en ekte btn-sm btn-secondary (følger knapp-
   hierarkiet) — vi overstyrer KUN shell.css' width:100% som strakk den til en
   boks. Kant/bakgrunn/skygge beholdes fra .btn-secondary. */
.doc-viewer .layer-section__head .toggle-all {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

.doc-viewer .layer-group {
  margin-bottom: 1.1rem;
}

.doc-viewer .layer-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  cursor: pointer;
}

.doc-viewer .layer-group__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--text-tertiary);
}

.doc-viewer .layer-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0;
  margin: 0;
  cursor: pointer;
}

.doc-viewer .layer-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(5, 41, 41, 0.12);
}

/* Gradert lag (synlighet per adresse): grønn→rød = ingen sikt → sikt i alle
   regimer. Speiler kartets GRAD_FARGER, så prøven forklarer skalaen. */
.doc-viewer .layer-swatch--grad {
  background: linear-gradient(90deg, #22c55e, #fbbf24, #f97316, #ef4444, #b91c1c);
  border-color: rgba(5, 41, 41, 0.18);
}

.doc-viewer .layer-label {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.25;
  color: var(--text-primary);
}

/* Avkrysning som en bryter (på = brand-teal). Brukt for lag- og gruppe-toggle. */
.doc-viewer .switch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 2rem;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--panel-border);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}

.doc-viewer .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.1rem - 4px);
  height: calc(1.1rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(5, 41, 41, 0.25);
  transition: transform 0.15s ease;
}

.doc-viewer .switch:checked {
  background: var(--accent);
}

.doc-viewer .switch:checked::after {
  transform: translateX(0.9rem);
}

/* ── Kuratert feature-kort (klikk på punkt/objekt) ─────────────────── */
.fcard {
  font-size: 0.84rem;
  line-height: 1.4;
  max-width: 300px;
}

.fcard__title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-right: 1rem; /* plass til lukk-krysset */
}

/* Nøkkelrader som et tett definisjonsgrid: etikett venstre, verdi høyre. */
.fcard__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  margin: 0;
}

.fcard__rows dt {
  color: var(--text-secondary);
  white-space: nowrap;
}

.fcard__rows dd {
  margin: 0;
  color: var(--text-primary);
}

/* Beskrivelsestekst vises i sin helhet (verdifullt innhold); svært lange tekster
   får intern scroll så popupen holder seg håndterbar. */
.fcard__body {
  margin: 0.55rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--panel-border);
  color: var(--text-secondary);
  font-size: 0.8rem;
  max-height: 220px;
  overflow-y: auto;
}

.fcard__body p {
  margin: 0 0 0.5rem;
}

.fcard__body p:last-child {
  margin-bottom: 0;
}

.fcard__links {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
}

.fcard__links a {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.fcard__links a:hover {
  text-decoration: underline;
}

/* ── Modes (perspektiver) ──────────────────────────────────────────── */
.mode-list,
.layer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mode-item {
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-primary);
  border-left: 2px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.mode-item:hover {
  background: var(--surface);
}

.mode-item.active {
  background: var(--accent);
  color: #fff;
  border-left-color: var(--accent);
}

/* Caption under et gradert lag (synlighet per adresse) — forklarer skalaen. */
.doc-viewer .layer-caption {
  margin: 0.05rem 0 0.3rem 1.4rem;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  line-height: 1.3;
}

/* ═══ Custom selects (chart-kontroller) — erstatter stygge native dropdowns ═══ */
.doc-viewer .chart-controls {
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.doc-viewer .chart-controls label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.doc-viewer .chart-controls select {
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.35rem 1.9rem 0.35rem 0.65rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  background-color: var(--panel-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' stroke='%23215660' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.7rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius, 4px);
  cursor: pointer;
  transition: border-color 0.12s ease;
}

.doc-viewer .chart-controls select:hover {
  border-color: var(--accent);
}

/* ── Alternativ-bytte ──────────────────────────────────────────────── */
.alt-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.alt-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Info-panel: statistikk-kort UNDER kartet (skallets app-flow) ─────
   Scopet under .app-flow så det slår ui.css' .info-panel (kart-overlegg:
   position:absolute; right; width:240px) på spesifisitet, uansett load-rekkefølge. */
.app-flow .info-panel {
  position: static;
  inset: auto;
  width: auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  margin: 1rem 0 0;
  padding: 0;
  overflow: hidden;
}

.info-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}

.info-panel__head h3 {
  margin: 0;
  color: var(--text-primary);
}

.info-panel__toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
}

.info-panel.collapsed .info-panel__body {
  display: none;
}

.info-panel.collapsed .info-panel__toggle {
  transform: rotate(180deg);
}

.info-panel__body {
  padding: 0 1rem 1rem;
}

.info-narrative {
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}

/* Tabell under grafen: horisontal scroll i stedet for å klippe/squeeze brede
   analysetabeller (synlighet har 11 kolonner). Tabellen tar sin naturlige
   bredde; containeren scroller. */
.info-table {
  font-size: 0.85rem;
  overflow-x: auto;
  max-width: 100%;
}

.info-table table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
}

.info-table th,
.info-table td {
  border-bottom: 1px solid var(--panel-border);
  padding: 0.3rem 0.6rem;
  text-align: left;
  white-space: nowrap;
}

.info-table th {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Numeriske kolonner (måltall) høyrejusteres for lesbar avlesning. */
.info-table td.num,
.info-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Fargeprøve som binder en regime-rad til grafens farge (samme synlighets-rampe). */
.info-table .swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  margin-right: 0.4rem;
  vertical-align: -1px;
}

/* ── Presentér: fullskjerm-slideshow over kartet ───────────────────── */
/* Skall i presentér-modus skjuler rail-en (kartet får full bredde) */
.app-doc.presenting .app-rail {
  display: none;
}

.slideshow {
  position: absolute;
  inset: 0;
  pointer-events: none; /* kartet bak skal sees; kun kontroller fanger klikk */
  z-index: 10;
}

.slideshow > * {
  pointer-events: auto;
}

.slide-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: none;
  background: rgba(15, 23, 42, 0.6);
  color: #fff;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(15, 23, 42, 0.6);
  color: #fff;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
}

.slide-prev { left: 1rem; }
.slide-next { right: 1rem; }

.slide-caption {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 4rem));
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.2);
  padding: 1rem 1.25rem;
}

.slide-caption h2 {
  margin: 0 0 0.4rem;
  color: var(--text-primary);
}

.slide-caption p {
  margin: 0 0 0.6rem;
  color: var(--text-secondary);
}

.slide-progress {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
}

.slide-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 23, 42, 0.3);
  cursor: pointer;
}

.slide-dot.active {
  background: var(--accent);
}

/* ── Tegnforklaring (kartets hjørne, nede til høyre) ──────────────────
   KabelLegend (legend.js) tegner synlige lag hit. Forklarer fargeSKALAER
   (avstandsbånd, synlighet) som lagradenes ensfarge-prøve ikke kan vise.
   Anker: skallets .map-block__map (position:relative). Tom = el.hidden. */
.legend {
  position: absolute;
  bottom: var(--s4);
  right: var(--s4);
  left: auto;
  z-index: 5;
  max-width: 260px;
  max-height: 45%;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-sm);
  padding: var(--s3) var(--s4);
  font-size: 0.8rem;
}
.legend h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: var(--s2);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 2px 0;
}
.legend-item + .legend-item {
  margin-top: 2px;
}
.legend-box {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.legend-box--hatch {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.55) 0 1.5px,
    transparent 1.5px 4px
  ) !important;
}
.legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legend-name em {
  color: var(--text-tertiary);
  font-style: normal;
  font-size: 0.72rem;
}
/* Skala-lag: klassene først, navnet under — med litt luft rundt blokken. */
.legend-item--scale {
  display: block;
  margin: 10px 0;
}
.legend-item--scale .legend-name {
  margin-bottom: 4px;
  font-weight: 500;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.legend-classes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.legend-class {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.75rem;
}