/* ==========================================================================
 view-switcher.css — Globaler Style fuer das ViewSwitcher-Modul

 Konsument: web/js/components/badges/view-switcher.js
 (window.ViewSwitcher.create())

 Gilt einheitlich fuer alle Tabs, die das Modul verwenden — Anfragen,
 Projekte, Wissen, weitere V2-Seiten.

 Klassennamen: `.anfr-view-switcher` (historisch aus Anfragen, wurde
 generisch). Der Modul-JS-Code setzt explizit diese Klasse.

 Visuelle Konvention: Inactive-Buttons muted, aktiver Button darkblue mit
 weisser Schrift (klares Statement, an Fluent angelehnt). Auf Mobile
 <600px werden Labels ausgeblendet → Icon-only.

 Scope-Anchors: Der Switcher kann entweder im klassischen Section-Body
 (.app-scope) oder im neuen Page-Header (.page-header-subtabs) leben.
 Doppelte Selektor-Liste matched beide Kontexte.

 Aus web/styles/view-switcher.css verschoben in
 die Mirror-Topologie zu web/js/components/badges/.
 ========================================================================== */

.app-scope .anfr-view-switcher,
.page-header-subtabs .anfr-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  height: 36px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  background: var(--lod-gray-50);
  border: 1px solid var(--lod-gray-100);
  flex-shrink: 0;
}

.app-scope .anfr-view-switcher-btn,
.page-header-subtabs .anfr-view-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 var(--space-3-5);
  border: none;
  background: transparent;
  color: var(--lod-gray-700);
  font-size: 13px;
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  /* filter + transform mit in die Transition: der aktive Tab nutzt bei Hover
     brightness() — ohne diese Zeile snappte das (kein Hover-Feedback). */
  transition: background-color var(--duration-snappy) var(--ease-enter), color var(--duration-snappy) var(--ease-enter), box-shadow var(--duration-snappy) var(--ease-enter), filter var(--duration-snappy) var(--ease-enter), transform var(--duration-snappy) var(--ease-enter);
}

.app-scope .anfr-view-switcher-btn img,
.page-header-subtabs .anfr-view-switcher-btn img {
  opacity: 0.55;
  transition: opacity var(--duration-snappy), filter var(--duration-snappy);
  flex-shrink: 0;
}

/* Inactive-Hover: solides Weiss + zarter Schatten (Pillen-Lift). Das alte
   rgba(255,255,255,0.65) war auf dem fast-weissen gray-50-Track unsichtbar →
   las sich als „kein Hover". */
.app-scope .anfr-view-switcher-btn:not(.is-active):hover,
.page-header-subtabs .anfr-view-switcher-btn:not(.is-active):hover {
  color: var(--lod-darkblue);
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 46, 72, 0.14);
}

.app-scope .anfr-view-switcher-btn:hover img,
.page-header-subtabs .anfr-view-switcher-btn:hover img { opacity: 0.8; }

/* Active-Hover: der aktive Tab gab bisher GAR kein Feedback. Dezente
   Aufhellung, damit auch er auf den Mauszeiger reagiert. */
.app-scope .anfr-view-switcher-btn.is-active:hover,
.page-header-subtabs .anfr-view-switcher-btn.is-active:hover {
  filter: brightness(1.12);
}

.app-scope .anfr-view-switcher-btn:focus-visible,
.page-header-subtabs .anfr-view-switcher-btn:focus-visible {
  outline: none;
  box-shadow: var(--lod-shadow-focus);
}

.app-scope .anfr-view-switcher-btn.is-active,
.page-header-subtabs .anfr-view-switcher-btn.is-active {
  background: var(--lod-darkblue);
  color: #fff;
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px rgba(15,46,72,0.18);
}

.app-scope .anfr-view-switcher-btn.is-active img,
.page-header-subtabs .anfr-view-switcher-btn.is-active img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* Mobile <600: Labels ausblenden, Icon-only — der Switcher bleibt prominent
   aber kompakt. */
@media (max-width: 599px) {
  .app-scope .anfr-view-switcher-btn,
  .page-header-subtabs .anfr-view-switcher-btn { padding: 0 var(--space-2-5); }
  .app-scope .anfr-view-switcher-btn span,
  .page-header-subtabs .anfr-view-switcher-btn span { display: none; }
}

/* Gemessener Kompakt-Zustand (page-header-responsive.js setzt `.is-compact`,
   wenn die Pills sonst die rechten Header-Actions über die Kante schöben — Stufe 1
   der Header-Kollaps-Kette). Icon-only; wird nur gesetzt, wenn jede Pill ein Icon
   trägt (JS-Guard), daher bleibt hier nie ein leerer Button zurück. */
.page-header-subtabs.is-compact .anfr-view-switcher-btn { padding: 0 var(--space-2-5); }
.page-header-subtabs.is-compact .anfr-view-switcher-btn span { display: none; }