/* ============================================================================
   NORMS IQ, designtrinn 2. Alt her er scopet under :root[data-design="v2"] og
   er derfor HELT inert for alle som ikke har slaatt det paa. Se
   harDesignBeta() i app.js.

   HISTORIKK 29.07.2026, to runder rullet tilbake:

   Runde 1 var felles byggeklosser: kort, titler, tabeller, knapper. Martin:
   "det eneste du har gjort er aa gjoere dagens design daarligere med mindre
   leselighet", og senere "du gjoer enkelte ting uleselig fordi du endrer
   skriftfargen til samme farge som bakgrunn og varselboksen, soekboksen og
   dagnatt boksen blir helt hvite". Reglene traff felles klasser (.btn,
   .btn-secondary, .card) som ogsaa brukes i sidemeny og topplinje, der
   bakgrunnen er navy og ikke papir. Jeg klarte ikke aa gjenskape det i
   harness, saa i stedet for aa gjette er HELE runde 1 fjernet.

   Runde 2 la stolpediagram i KPI-boksene. Martin: "liker ikke
   stoplediagrammene paa kpi boksen i heroen". Fjernet, og _aoHeroKpiKortV2
   er tatt ut av app.js.

   IGJEN STAAR det Martin sa han likte: fartoeysvelgeren.

   LAEREN: hold designtrinn til KONKRETE, navngitte komponenter. Felles
   klasser brukes ogsaa i sidemeny, topplinje og modaler, der fargekonteksten
   er en helt annen.
   ========================================================================= */

/* ============================================================================
   RETNING A: INSTRUMENTPANEL, FARTOEYSVELGEREN
   Legges nederst i design-v2.css. Erstatter ingenting: reglene her har
   spesifisitet (0,2,0) og vinner over .ao-tab-reglene i style.css (0,1,0),
   ogsaa inne i deres media-blokker.
   ========================================================================= */

:root[data-design="v2"] .ao-toolbar {
  align-items: center;
  gap: 12px;
}

/* --- SKINNEN --------------------------------------------------------------
   Var en usynlig rad med en hairline under. Naa en nedfelt skinne: egen flate,
   ramme hele veien rundt og en innskygge i toppen som gjoer at tastene leser
   som noe som staar OPPI noe, ikke som lenker paa papir. */
:root[data-design="v2"] .ao-tab-bar {
  display: flex;
  align-items: stretch;
  gap: 3px;
  padding: 3px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 0;
  box-shadow: inset 0 2px 5px rgba(13, 43, 69, 0.09);
  counter-reset: kanal -1;
}
:root[data-design="v2"][data-theme="dark"] .ao-tab-bar {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}

/* --- VELGERTASTEN ---------------------------------------------------------
   Firkantet, sperret versal. Inaktiv tast ligger flatt i skinnen, aktiv tast
   loeftes opp med egen flate, ramme og lav skygge. */
:root[data-design="v2"] .ao-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px 12px 9px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  counter-increment: kanal;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

/* Kanalnummer i mono foran navnet. Rent CSS, ingen markup-endring:
   00 er Sammendrag (alle kanaler), 01 og oppover er fartoeyene. */
:root[data-design="v2"] .ao-tab::before {
  content: counter(kanal, decimal-leading-zero);
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-disabled);
  margin-right: 8px;
  transition: color var(--t-fast);
}

:root[data-design="v2"] .ao-tab:hover {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

/* Aktiv tast: loeftet, egen flate, svakt tonet i fartoeyets farge.
   Foerste background-linje er fallback for motorer uten color-mix. */
:root[data-design="v2"] .ao-tab-active,
:root[data-design="v2"] .ao-tab-active:hover {
  background: var(--bg-surface);
  background: color-mix(in srgb, var(--tab-color, var(--v2-gull)) 10%, var(--bg-surface));
  border-color: var(--border);
  color: var(--text-primary);
  box-shadow: var(--v2-skygge-1);
}
:root[data-design="v2"] .ao-tab-active::before {
  color: var(--tab-color, var(--v2-gull));
}

/* Lysbjelken i bunnen av tasten. Gjenbruker ::after fra v1, men naa full
   bredde og forankret i tastens egen underkant (v1 hadde den 14px inn paa
   hver side og 1px UNDER, festet til hairlinen som naa er borte). */
:root[data-design="v2"] .ao-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: 3px;
  background: var(--tab-color, var(--v2-gull));
  transform: scaleX(0);
  transform-origin: center;
  opacity: 1;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
:root[data-design="v2"] .ao-tab:hover::after { transform: scaleX(0.35); opacity: 0.45; }
:root[data-design="v2"] .ao-tab-active::after { transform: scaleX(1); opacity: 1; }

/* Tastaturfokus maa vaere synlig naar tasten ellers er flat. */
:root[data-design="v2"] .ao-tab:focus-visible {
  outline: 2px solid var(--v2-gull);
  outline-offset: -2px;
}

/* --- STATUSLAMPE ----------------------------------------------------------
   Rund prikk ut, firkantet lampe inn. Den lyse innkanten gjoer at den leser
   som en lysdiode i panelet og ikke som en emoji-prikk. Bakgrunnsfargen
   settes fortsatt inline av app.js (groenn i drift, roed ute av drift). */
:root[data-design="v2"] .ao-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 0;
  margin-right: 8px;
  vertical-align: baseline;
  flex: 0 0 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  opacity: 0.75;
  transition: opacity var(--t-fast);
}
:root[data-design="v2"] .ao-tab-active .ao-tab-dot { opacity: 1; }

/* --- REDUSERT BEVEGELSE ---------------------------------------------------
   style.css har ni slike blokker, men ingen av dem naar hit fordi alt her er
   scopet under [data-design="v2"]. Lysbjelken er den eneste som faktisk
   flytter noe (scaleX), saa den maa staa ferdig utslaatt, ikke animeres inn. */
@media (prefers-reduced-motion: reduce) {
  :root[data-design="v2"] .ao-tab,
  :root[data-design="v2"] .ao-tab::before,
  :root[data-design="v2"] .ao-tab::after,
  :root[data-design="v2"] .ao-tab-dot {
    transition: none;
  }
}

/* --- MOBIL ----------------------------------------------------------------
   VIKTIG: v1-reglene for mobil ligger paa .ao-tab (0,1,0) i style.css 4571
   til 4573. Alt jeg setter over med :root[data-design="v2"] (0,2,0) vinner
   ogsaa inne i deres media-blokk, saa nowrap/overflow og de kompakte maalene
   MAA gjentas her. Ellers faar mobilen desktop-oppsettet tilbake. */
@media (max-width: 768px) {
  :root[data-design="v2"] .ao-tab-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding: 2px;
    scroll-snap-type: x proximity;   /* detent, som en fysisk velger */
  }
  :root[data-design="v2"] .ao-tab-bar::-webkit-scrollbar { display: none; }
  :root[data-design="v2"] .ao-tab {
    flex: 0 0 auto;
    padding: 9px 10px 10px;
    min-height: 40px;                /* trykkflate med hansker */
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    scroll-snap-align: start;
  }
  :root[data-design="v2"] .ao-tab::before { margin-right: 6px; font-size: 0.56rem; }
  :root[data-design="v2"] .ao-tab-dot { margin-right: 6px; }
}