/* tabs-container.css — Dashboard TabsContainer

 Quelle: extrahiert aus dashboard.css ("TabsContainer"-Block, Inhalt 1:1 uebernommen.

 Konsumenten: web/js/domain/dashboard/tabs-container.js — rendert mehrere
 Sub-Module unter einem PillSwitch (z.B. Wissen-Dashboard mit "Aktivitaet"
 + "Kategorien"-Tabs).
 ========================================================================== */

.dash-tabs-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: var(--space-2-5);
}
.dash-tabs-container .dash-tabs-pills {
  align-self: flex-start;
  flex: 0 0 auto;
}
.dash-tabs-container .dash-tabs-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}
.dash-tabs-container .dash-tabs-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Inhalt startet oben, nicht zentriert — wenn nur wenige Eintraege da
     sind, soll der erste Eintrag direkt unter den Tabs sitzen. */
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
  scrollbar-width: thin;
}
.dash-tabs-container .dash-tabs-body > * {
  /* Sub-Modul nimmt nur seinen natuerlichen Platz — strecken nur wenn das
     Sub-Modul es selbst will (z.B. fillHeight-aware Module).
     flex: 0 0 auto sorgt dafuer, dass die BarList NUR die Hoehe ihrer
     Items belegt und nicht den ganzen Body fuellt. */
  flex: 0 0 auto;
  min-height: 0;
}
/* Webkit-Scrollbar fuer den Tabs-Body */
.dash-tabs-container .dash-tabs-body::-webkit-scrollbar { width: 6px; }
.dash-tabs-container .dash-tabs-body::-webkit-scrollbar-thumb {
  background: var(--color-border); border-radius: var(--radius-xs);
}