/* App-header — øverste linje med brand, faner, tenant og bruker.

   Headeren er en CSS-container — vi bruker @container-queries lenger ned
   for å kollapse nav-en til en hamburger-dropdown og krympe tenant/bruker-
   etiketter når headeren blir for trang. Dette reagerer på faktisk header-
   bredde, ikke viewport — så et sticky side-panel som krymper hovedsiden
   trigger samme kollaps som et smalt vindu ville gjort. */

.app-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: var(--farge-overflate);
  border-bottom: var(--kant);
  height: 44px;
  flex: none;
  padding: 0 var(--avstand-3);
  container-type: inline-size;
  container-name: app-header;
}

.app-header__seksjon {
  display: flex;
  align-items: center;
  gap: var(--avstand-2);
  min-width: 0;
}

.app-merke {
  display: flex;
  align-items: center;
  gap: var(--avstand-2);
  padding-right: var(--avstand-4);
  text-decoration: none;
  color: var(--farge-tekst);
  border-right: var(--kant);
  margin-right: var(--avstand-3);
  height: 100%;
}
.app-merke:hover { text-decoration: none; color: var(--farge-tekst); }

.app-merke__symbol {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}

.app-merke__navn {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
}

.app-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.app-nav__lenke {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--avstand-3);
  color: var(--farge-tekst-dempet);
  text-decoration: none;
  font-size: var(--font-base);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.app-nav__lenke:hover {
  color: var(--farge-tekst);
  text-decoration: none;
}
.app-nav__lenke[aria-current="page"] {
  color: var(--farge-tekst);
  border-bottom-color: var(--farge-primary);
  font-weight: 500;
}

/* Hamburger-versjon av nav-en — skjult som default, vises kun når
   container-queryen lenger ned trigger.

   Selector-en bruker .dropdown.app-nav-hamburger for å øke spesifisiteten
   over .dropdown { display: inline-flex } i dropdown.css (som lastes etter
   denne filen og ellers ville vunnet på cascade-order alene). */
.dropdown.app-nav-hamburger {
  display: none;
  align-items: center;
}
.app-nav-hamburger .dropdown__meny {
  /* Dropdown ligger som default høyrejustert; vri til venstrejustert siden
     hamburger sitter på venstre side av headeren. */
  right: auto;
  left: 0;
  min-width: 12rem;
}
.app-nav-hamburger .dropdown__valg[aria-current="page"] {
  background: var(--farge-overflate);
  color: var(--farge-tekst);
  font-weight: 500;
  border-left: 2px solid var(--farge-primary);
  padding-left: calc(var(--avstand-3) - 2px);
}

/* ---- Container queries: kollaps når headeren blir trang ----------------
   Terskel valgt så hamburger trigger når det ikke er plass til alle
   nav-linker + høyre side. Bruker eksakt to terskelnivåer:
    - ≤ 1100px: krymp tenant/bruker-etikett (behold ikoner)
    - ≤ 900px:  bytt nav til hamburger */
@container app-header (max-width: 1100px) {
  /* Tenant og bruker: behold pil og avatar, skjul tekst-etikett. Det er
     viktigere å bevare nav-linkene enn å se hvilken tenant man står i —
     informasjonen er tilgjengelig ved klikk uansett. */
  .dropdown[data-dropdown="tenant"] .dropdown__verdi,
  .dropdown[data-dropdown="bruker"] .dropdown__verdi {
    display: none;
  }
}
@container app-header (max-width: 900px) {
  .app-nav { display: none; }
  .dropdown.app-nav-hamburger { display: inline-flex; }
  /* Når hamburger overtar trenger merket mindre høyremargin — det er ikke
     lenger en visuell separator mot nav-linker. */
  .app-merke {
    border-right: 0;
    margin-right: var(--avstand-1);
    padding-right: var(--avstand-2);
  }
}