/* ──────────────────────────────────────────────────────────────────────────
   Grundskabelonen på promax, PR 2 — topbaren og chatknappen (templates/base.html)

   Kun var(--token) fra odin-tokens.css (lys/mørk via odin-theme.css). Her står
   topbarens regler, som før stod i odin-theme.css (D-420, D-685, D-929), og
   chatknappens, som før stod i en <style>-blok i base.html (D-224).

   Knapperne (kunde-badge, ryd kunde, DA/EN, tema, chat) er husets knapper
   (.btn .btn-ghost / .btn-primary). Den globale knapstil (app.css .btn og
   d488-blokken i base.html, som står senere i kaskaden) giver dem polstring,
   flade og display; reglerne her har derfor en .odin-topbar-forstavelse eller
   hele klassekæden, så topbarens egen form vinder, mens .btn:focus-visible-
   ringen (odin-base.css) stadig gælder.
   ────────────────────────────────────────────────────────────────────────── */

.odin-topbar {
  position: sticky;
  top: 0;
  z-index: 150;          /* over indhold; under flyout(1001)/modal(1000)/drawer(1200) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--topbar-h);
  padding: 0 24px 0 40px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  /* opaque baggrund så indhold ikke skinner igennem ved scroll */
}
/* View-as: fixed banner (44px) dækker top:0 → skub topbaren ned under den */
body.view-as-active .odin-topbar { top: 44px; }

/* In-page sticky-headers skal tucke UNDER topbaren (+banner i view-as) */
body.has-topbar { --sticky-top: var(--topbar-h); }
body.has-topbar.view-as-active { --sticky-top: calc(44px + var(--topbar-h)); }

.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-context {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-context .topbar-context-sub {
  color: var(--text-muted); font-weight: 500; margin-left: 8px; font-size: 12px;
}

/* — D-685 (Model C): permanent kunde-badge —
   Aktiv kunde skal kunne læses uden at man scanner sidebaren. Prikken er en
   SVG, hvis fill er deterministisk pr. aftale_nr (kunde_scope.active_kunde) —
   en attribut, ikke inline style — så samme kunde altid ser ens ud; resten
   arver tokens og virker derfor i både lyst og mørkt tema.
   .kunde-badge er både husets knap (klikbar) og en ren <span> (konsolideret). */
.kunde-badge-wrap {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0;
}
.kunde-badge,
.topbar-left .kunde-badge.btn.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-soft); color: var(--text);
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.6;
  white-space: normal;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.kunde-badge:hover,
.topbar-left .kunde-badge.btn.btn-ghost:hover {
  background: var(--accent-soft); border-color: var(--accent); color: var(--text);
}
/* Konsolideret visning: ren indikator (ingen kunde at skifte til) → ikke klikbar. */
.kunde-badge-static { cursor: default; }
.kunde-badge-static:hover { background: var(--bg-soft); border-color: var(--border); }
/* 8 px prik + 3 px glød = 14 px SVG; den negative margen holder pladsen på
   8 px, som da gløden var en box-shadow. */
.kunde-badge-dot {
  width: 14px; height: 14px; margin: -3px; flex: 0 0 auto; display: block;
}
.kunde-badge-navn {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.kunde-badge-aftale {
  color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: 11px; padding-left: 6px; border-left: 1px solid var(--border);
}
/* D-929: ryd aktivt kunde-scope uden at åbne vælgeren */
.topbar-left .kunde-badge-clear.btn.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex: 0 0 auto;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.topbar-left .kunde-badge-clear.btn.btn-ghost:hover {
  background: var(--bg-soft); color: var(--text); border-color: var(--border);
}
.topbar-left .kunde-badge-clear.btn.btn-ghost:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* — Sprog-toggle (segmented DA/EN) — */
.topbar-lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--bg-soft);
}
.odin-topbar .topbar-lang .btn.btn-ghost {
  display: inline-block; gap: 0;
  border: 0; border-radius: 0; background: transparent; cursor: pointer;
  padding: 5px 9px; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  line-height: normal;
  color: var(--text-dim); transition: background .15s, color .15s;
}
.odin-topbar .topbar-lang .btn.btn-ghost[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent);
}
.odin-topbar .topbar-lang .btn.btn-ghost:hover:not([aria-pressed="true"]) { color: var(--text); }

/* — Theme-toggle (sun/moon ikon) — */
.odin-topbar .topbar-theme.btn.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-soft); color: var(--text-dim); cursor: pointer;
  font-family: inherit; line-height: normal;
  transition: background .15s, color .15s;
}
.odin-topbar .topbar-theme.btn.btn-ghost:hover { background: var(--accent-soft); color: var(--accent); }
.topbar-theme svg { width: 17px; height: 17px; }
/* vis kun det relevante ikon for aktivt tema */
.topbar-theme .icon-sun { display: none; }
.topbar-theme .icon-moon { display: inline-flex; }
html[data-theme="light"] .topbar-theme .icon-sun { display: inline-flex; }
html[data-theme="light"] .topbar-theme .icon-moon { display: none; }

/* — Bruger-chip — */
.topbar-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-user .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  /* Accent mod en mørkere accent: 60 % accent blandet med sort, som før. */
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, black));
  color: var(--text-on-accent); font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.topbar-user .topbar-email {
  font-size: 12px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}

@media (max-width: 900px) {
  .odin-topbar { padding: 0 14px 0 62px; }   /* plads til fixed hamburger (top-left) */
  .topbar-user .topbar-email { display: none; }
  .topbar-context .topbar-context-sub { display: none; }
  /* D-685: badge beholdes på mobil (den er hele pointen) — kun aftale-nummeret
     og navne-bredden skæres, så den ikke skubber topbarens højre side ud. */
  .kunde-badge-aftale { display: none; }
  .kunde-badge-navn { max-width: 120px; }
}
@media (max-width: 560px) {
  .odin-topbar .topbar-lang .btn.btn-ghost { padding: 5px 7px; }
}

/* low-viewport / 400% zoom (WCAG reflow): drop sticky så baren ikke æder skærmen */
@media (max-height: 480px) {
  .odin-topbar { position: static; }
}

/* — Chatknappen (D-224): husets primærknap, rund og fast nederst til højre —
   Gløden følger temaets accent (før en fast grøn rgba, også i lyst tema). */
.odin-chat-fab.btn.btn-primary {
  position: fixed; right: 24px; bottom: 24px; z-index: 999;
  width: 56px; height: 56px; padding: 0; gap: 0;
  border: none; border-radius: var(--radius-md);
  background: var(--accent); color: var(--text-on-accent); cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.odin-chat-fab.btn.btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 45%, transparent);
}
.odin-chat-fab.btn.btn-primary svg { width: 24px; height: 24px; }
/* .btn.btn-primary (d488) sætter display:inline-flex senere i kaskaden; den
   skjulte chatknap (chat_d211.js sætter hidden, når panelet er åbent) skal
   forblive skjult. */
.odin-chat-fab.btn.btn-primary[hidden] { display: none; }