/* =====================================================================
 * pivicon-appbar.css — EINHEITLICHE Kopfzeile für alle pivicon-Module.
 *
 * Single Point of Truth: pivicon-master/design/. Module konsumieren diese
 * Datei unverändert (kopieren nach public/shared/), damit ID, Admin und
 * Auftragsbuch denselben Look haben.
 *
 * Aufbau nach LAYOUT.md (Vorbilder: Hetzner Console + dpa News Hub):
 *   [Marke] [Modul] | [Mandant ▾] [Einheit ▾]   …   [⠿ Module] [Profil ▾]
 *
 * Farben ausschließlich aus pivicon-tokens.css. Die Leiste ist WEISS
 * (--bar / --bar-ink) mit feiner Trennlinie (--line); im Dunkelmodus ziehen
 * die Tokens automatisch auf nahezu Schwarz nach.
 *
 * pivicon-design-version: 2.1.0
 *
 * HARTE GRENZE (ab Standard 2.0.0): Die Kopfzeile ist Plattform-Chrom und
 * benutzt ausschließlich --pv-accent / --pv-accent-ink — NICHT das
 * überschreibbare --accent. Ein Mandant darf die plattformeigene Leiste
 * nicht einfärben; sonst könnte er eine Plattform-Aufforderung fälschen.
 * Mandanten-Branding wirkt nur in [data-pv-scope="content"].
 * ===================================================================== */

.pv-appbar {
  --pv-bar-h: 52px;
  /* Hover-/Aktiv-Flächen leiten sich aus der Schriftfarbe ab und
     funktionieren dadurch in beiden Themen ohne Sonderregel. */
  --pv-bar-hover: color-mix(in srgb, var(--bar-ink) 7%, transparent);
  --pv-bar-press: color-mix(in srgb, var(--bar-ink) 12%, transparent);
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .35rem;
  height: var(--pv-bar-h);
  padding: 0 .75rem;
  background: var(--bar);
  color: var(--bar-ink);
  font-family: var(--font);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}

/* --- Links: Marke + Modulname ----------------------------------------- */
.pv-appbar__brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; padding: .25rem .35rem; border-radius: var(--r); }
.pv-appbar__brand:hover { background: var(--pv-bar-hover); }
.pv-appbar__mark {
  height: 26px; width: auto; flex: 0 0 auto;
  display: block; object-fit: contain;
}
.pv-appbar__word { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.pv-appbar__module {
  font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); padding-left: .6rem; margin-left: .15rem;
  border-left: 1px solid var(--line); white-space: nowrap;
}

.pv-appbar__spacer { flex: 1 1 auto; }

/* --- Mitte: Kontextwähler Mandant / Einheit ---------------------------- */
/* Leer, solange das Modul keine Mandanten/Einheiten übergibt. */
.pv-appbar__ctx { display: flex; align-items: center; gap: .1rem; margin-left: .6rem; min-width: 0; }
.pv-appbar__ctx:empty { display: none; }
.pv-appbar__ctx-sep { color: var(--ink-soft); opacity: .5; font-size: 15px; }

.pv-appbar__sel {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 34px; max-width: 15rem; padding: 0 .5rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--r);
  color: inherit; cursor: pointer; font: inherit; line-height: 1;
}
.pv-appbar__sel:hover { background: var(--pv-bar-hover); }
.pv-appbar__sel[aria-expanded="true"] { background: var(--pv-bar-press); }
.pv-appbar__sel-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); flex: 0 0 auto;
}
.pv-appbar__sel-v { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-appbar__sel svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ink-soft); }

/* --- Rechts: Launcher, dann Profil (dpa-News-Hub-Reihenfolge) ---------- */
.pv-appbar__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 34px; padding: 0 .5rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--r);
  color: inherit; cursor: pointer; font: inherit; font-size: 13px;
  text-decoration: none;
}
.pv-appbar__btn:hover { background: var(--pv-bar-hover); }
.pv-appbar__btn[aria-expanded="true"] { background: var(--pv-bar-press); }
.pv-appbar__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pv-appbar__btn--user { padding: 0 .25rem; }

.pv-appbar__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background: var(--pv-accent); color: var(--pv-accent-ink);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  object-fit: cover;
}
/* Profilfoto: der Träger-<span> bleibt immer bestehen, das Bild ist ein Kind
   und wird beim Abmelden wieder entfernt (siehe pivicon-appbar.js). */
.pv-appbar__avatar--img { overflow: hidden; padding: 0; }
.pv-appbar__avatar > img {
  display: block; width: 100%; height: 100%;
  border-radius: inherit; object-fit: cover;
}

/* --- Aufklapp-Menüs ---------------------------------------------------- */
/* Jeder Auslöser sitzt in einem eigenen, relativ positionierten Träger,
   damit das Menü direkt unter seinem Knopf hängt (links- oder rechtsbündig). */
.pv-appbar__menu { position: relative; display: inline-flex; align-items: center; }

.pv-appbar__pop {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 240px; max-width: calc(100vw - 1.5rem); padding: .4rem;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
  max-height: calc(100vh - var(--pv-bar-h) - 1.5rem); overflow: auto;
}
.pv-appbar__pop--start { right: auto; left: 0; }
.pv-appbar__pop[hidden] { display: none; }

.pv-appbar__pop-title {
  padding: .5rem .6rem .3rem; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
}
.pv-appbar__item {
  display: flex; align-items: center; gap: .55rem; width: 100%; box-sizing: border-box;
  padding: .5rem .6rem; border: 0; border-radius: var(--r);
  background: transparent; color: inherit; font: inherit; font-size: 14px;
  text-align: left; text-decoration: none; cursor: pointer;
}
.pv-appbar__item:hover { background: color-mix(in srgb, var(--pv-accent) 9%, var(--panel)); }
.pv-appbar__item-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-appbar__item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--pv-accent); }
/* Häkchen belegt seinen Platz auch dann, wenn es unsichtbar ist. */
.pv-appbar__item[aria-checked="false"] svg { visibility: hidden; }
.pv-appbar__sep { height: 1px; margin: .35rem .3rem; background: var(--line-soft); }
.pv-appbar__meta { padding: .5rem .6rem .6rem; font-size: 12.5px; color: var(--ink-soft); }
.pv-appbar__meta b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }

/* --- Modul-Raster (Waffle) --------------------------------------------- */
.pv-appbar__grid {
  display: grid; grid-template-columns: repeat(3, 92px); gap: .35rem;
  padding: .25rem;
}
.pv-appbar__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  padding: .7rem .35rem; border-radius: var(--r); border: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer; line-height: 1.25;
}
.pv-appbar__tile:hover { background: color-mix(in srgb, var(--pv-accent) 9%, var(--panel)); }
.pv-appbar__tile[aria-disabled="true"] { opacity: .42; cursor: default; }
.pv-appbar__tile[aria-disabled="true"]:hover { background: transparent; }
.pv-appbar__tile-ic {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--pv-accent) 14%, var(--panel)); color: var(--pv-accent);
}
.pv-appbar__tile-ic svg { width: 18px; height: 18px; }
.pv-appbar__tile--active .pv-appbar__tile-ic { background: var(--pv-accent); color: var(--pv-accent-ink); }

/* --- Schmale Ansicht --------------------------------------------------- */
@media (max-width: 860px) {
  .pv-appbar__sel-k { display: none; }
}
@media (max-width: 640px) {
  /* Auf schmalen Geraeten ist der DIENSTNAME wichtiger als die Wortmarke:
     das Icon steht ohnehin links, "pivicon" ist damit redundant. Der Modulname
     (ID, Admin, Contentmonitor …) bleibt sichtbar. */
  .pv-appbar__word, .pv-appbar__label { display: none; }
  .pv-appbar__module { padding-left: 0; margin-left: 0; border-left: 0; }
  /* Mandanten-/Einheitenwaehler duerfen die schmale Leiste nicht sprengen. */
  .pv-appbar__sel { max-width: 8rem; }
  .pv-appbar__grid { grid-template-columns: repeat(2, 92px); }
}