/* drawer-tabs.css — geteilte Subregister-Tab-Leiste (SSOT, LoD.DrawerTabs).
   Fluent-Underline-Tabs: transparente Buttons auf einer Basislinie, aktiver Tab
   mit 2px-Brand-Unterstrich + semibold. Optisch identisch zur Personalakte
   (.pv-tabs) — hier die kanonische, drawer-übergreifende Fassung für ge-/fu-
   und weitere neue Drawer. Nur Tokens.
   Scoped auf .shared-drawer (EntityDrawer/shared-drawer-Body). */

.shared-drawer .drawer-tabs {
  display: flex;
  /* Viele Tabs (Fahrzeug hat 7) brechen sauber in eine 2. Reihe um, statt rechts
     abgeschnitten wegzuscrollen — kein „rausrücken" mehr. Frühere Scroll-Leiste
     (overflow-x + Fade-Maske) ersetzt; LoD.DrawerTabs scroll-into-view bleibt harmlos. */
  flex-wrap: wrap;
  gap: var(--space-1);
  row-gap: 0;
  justify-content: flex-start;
  /* Drawer-Body trägt bereits das horizontale Padding — hier nur vertikaler
     Abstand zwischen Hero und Panel. */
  margin: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.shared-drawer .drawer-tab {
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--font-size-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-quick) var(--ease-soft),
              color var(--duration-quick) var(--ease-soft);
}
/* Unterstrich als ::after — liegt auf der Border-Basislinie (bottom:-1px). */
.shared-drawer .drawer-tab::after {
  content: '';
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background var(--duration-quick) var(--ease-soft);
}
.shared-drawer .drawer-tab:hover {
  color: var(--color-text);
  background: var(--lod-gray-50);
}
.shared-drawer .drawer-tab.is-active {
  color: var(--brand-default);
  font-weight: var(--fw-semibold);
}
.shared-drawer .drawer-tab.is-active::after { background: var(--brand-default); }
.shared-drawer .drawer-tab:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: -2px;
}

/* Panel-Wechsel: dezenter Fade (fill-mode ohne backwards). */
.shared-drawer .drawer-tab-panel { animation: drawerPanelIn var(--duration-fast) var(--ease-decelerate); }
@keyframes drawerPanelIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tablet/Mobile: kompaktere Tab-Polsterung (Muster pv). */
@media (max-width: 999px) {
  .shared-drawer .drawer-tab { padding: var(--space-2) var(--space-2-5); }
}