/* ================================================================
 LifeOn Central — mein-bereich.css
 mein-bereich.css — Section-Layout-SSOT fuer den Mein-Bereich-Tab

 Konsumenten: web/js/sections/mein-bereich.js
 web/js/sections/organigramm.js
 web/js/sections/benachrichtigungen.js
 web/js/sections/gast/gst-mein-bereich.js

 Sub-Module aufgeteilt nach Spiegel von
 web/js/sections/{mein-bereich,organigramm,benachrichtigungen}.js.

 Shell selbst nach sections/mein-bereich/ verschoben.

 Diese Datei enthaelt nur noch:
 - Tab-Container Reset (#tab-content-mein-bereich, gast-mein-bereich)
 - Time-Reporting-Chart-Reste (.zeit-* Legacy)
 - TabList Shell (.ich-tab*, .ich-tabpanel)
 - Übersicht Layout-Shell (.ich-ub-wrap, .ich-ub-grid, .ich-ub-left/-mid/-right,
 .ich-card / .ich-card-body / .ich-card-header)
 - Übersicht Shell-Responsive

 Sub-Module liegen unter web/styles/sections/mein-bereich/<modul>.css:

 hero.css — Hero + Persona + Mein-Bereich-KPI-Cards
 profil-drawer.css — Profil-Drawer Title-Section
 team-events.css — Team-Events (Geburtstage / Jahrestage)
 urlaub-kpi.css — Urlaub-KPI Tiles + Progressbar + Legende
 personalantrag-drawer.css — Personalantrag-Drawer (PA-View + Number-Wrap)
 antraege.css — Antraege-Items (.ia-row*, .ich-typ-*)
 jahreskalender.css — Jahreskalender + Abwesenheitsbalken
 organigramm/organigramm.css — Hauptansicht + Profilkarte-Popover + Mobile-List
 organigramm/bottom-sheet.css — Bottom-Sheet (Profilkarte mobil)
 organigramm/mobile-toolbar.css — Mobile/Desktop-Switching
 benachrichtigungen.css — Notif-Section (Header, Cards, Bulk-Menu)
 benachrichtigungen-matrix.css — Matrix-Tabelle + Mobile-Listen-Fallback
 geraete.css — Push-Endpunkte-Liste

 Plus eine geteilte Drawer-Utility:
 components/drawers/_shared/info-banner.css — .lod-info-banner (3 Drawer-Konsumenten)

 Modul-spezifische @media-Overrides liegen JEWEILS im Modul-File,
 nicht zentral hier. Nur Shell-Responsive bleibt unten.
 ================================================================ */

/* Ich-Tab: Flex-Container damit ich-tabpanel { flex: 1 } greift
   und die Hoehen-Kette vom Viewport bis zum Grid durchlaeuft.
   Padding entfaellt — wird von ich-ub-wrap / Sub-Tab-Panels intern gesetzt. */
#tab-content-mein-bereich,
#tab-content-gast-mein-bereich { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
#tab-content-mein-bereich.hidden,
#tab-content-gast-mein-bereich.hidden { display: none; }

/* ── Mein Bereich: Fluent 2 TabList (transparent, underline) ──
 Sub-Tabs leben jetzt im Page-Header (als
 ViewSwitcher-Pille). Die alte horizontale TabList im Section-HTML wird
 ausgeblendet — Buttons bleiben fuer SettingsPage._setAriaAndPanels
 im DOM (kein Markup-Eingriff noetig). Gast-Mein-Bereich-`--single`-Variante
 bleibt davon unberuehrt (war eh hidden).
 Original-Styles als Kommentar erhalten — falls jemand die TabList je
 wieder sichtbar machen will. */
.ich-tablist {
  display: none;
}
.ich-tablist--single { display: none; }
.ich-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-3) var(--space-3);
  border: none;
  border-radius: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  /* Routing-SSOT-Sweep 2026-05-07: Sub-Tab ist <a href> (Strg/Cmd-Klick → neuer Tab).
     UA-Default-Anchor-Underline neutralisieren. */
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default);
}
.ich-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  /* Deliberate: 1px Sub-Pixel-Radius fuer Tab-Underline */
  border-radius: 1px;
  background: transparent;
  transition: background var(--duration-fast) var(--ease-default);
}
.ich-tab:hover {
  color: var(--color-text);
}
.ich-tab:hover::after {
  background: var(--color-border-hover);
}
.ich-tab.active {
  color: var(--brand-default);
  font-weight: var(--fw-semibold);
}
.ich-tab.active::after {
  background: var(--brand-default);
}
.ich-tab:focus:not(:focus-visible) { outline: none; }
.ich-tab:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
/* overflow-y auto statt hidden, damit Content scrollbar ist */
.ich-tabpanel { min-height: 0; flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.ich-tabpanel.hidden { display: none; }

/* Firmenkalender-Sub-Tab: App-Standard-Shell (LoD.MbvShell: sticky Toolbar-Bar
   + Body) wie Neuigkeiten/Alle Benachrichtigungen, ABER voll-breit statt
   zentrierter Lese-Spalte — die Kalender-Matrix braucht die ganze Breite
   (Override der mbv-body-max-width, Muster wie .pauf-detail-host). Das Modul
   scrollt horizontal in seinem eigenen .abs-cal-scroll; das .ich-tabpanel
   bleibt der vertikale Scroll-Container. */
.mb-fk .mbv-body {
  max-width: none;
  margin: 0;
  padding: var(--space-5) var(--space-6) var(--space-8);
}
@media (min-width: 600px) and (max-width: 999px) {
  .mb-fk .mbv-body { padding: var(--space-4) var(--space-4) var(--space-8); }
}
@media (max-width: 599px) {
  .mb-fk .mbv-body { padding: var(--space-3) var(--space-2) var(--space-8); }
}

/* ── Mein Bereich: Übersicht Layout ────────────────────────── */

/* Outer wrapper — fuellt Panel, kein eigener Scroll.
 Wrap ist flex:1/min-h:0/overflow:hidden statt
 flex:none/overflow:visible. Verhindert dass die Antraege-Liste die ganze
 Seite waechst — stattdessen scrollt sie intern in der Card. Mobile/Tablet
 (<1000px) overrided das wieder auf flex:none/overflow:visible (Stacking). */
.ich-ub-wrap { padding: var(--space-6); flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* Shared card surface */
.ich-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  margin-bottom: var(--space-4);
}
.ich-card--full { margin-bottom: 0; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.ich-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
.ich-card-title { font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; }
.ich-card-body { padding: var(--space-3) var(--space-4); }
.ich-card-body--scroll { overflow-y: auto; max-height: 320px; flex: 1; min-height: 0; scrollbar-width: none; }
.ich-card-body--scroll::-webkit-scrollbar { display: none; }

/* Layout-Grid :
 - Wide (>=1280): 3 Spalten — Urlaub/Team-Events | Kalender (mitte) | Antraege
 - Notebook (1000-1279): 2 Spalten — links: Urlaub+Team+Antraege gestapelt, rechts: Kalender
 - Tablet/Mobile (<1000): 1 Spalte (Stacking) */
.ich-ub-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: var(--space-4);
  /* Grid fuellt verbleibenden Platz (Wrap - Hero).
 grid-auto-rows: minmax(0, 1fr) zwingt jede implizite Row auf den vollen
 verfuegbaren Anteil und erlaubt Kinder ueber min-content zu schrumpfen —
 dadurch werden alle Grid-Zellen begrenzt und Cards koennen intern scrollen. */
  flex: 1;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

.ich-ub-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: var(--space-4);
  overflow: hidden;
  height: 100%;
}
.ich-ub-left > .ich-card { margin-bottom: 0; }
/* Antraege-Card in linker Spalte: flex-fill fuer restliche Hoehe. */
.ich-ub-left .ich-card.ich-card--antraege {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  margin-bottom: 0;
  overflow: hidden;
}
/* Scroll-Body: Block-Layout (nicht Flex!) damit position:sticky im Header greift.
   SubgridList setzt .subgrid-list { display: flex } auf den Host — wir ueberschreiben das. */
.ich-ub-left .ich-card.ich-card--antraege .ich-card-body--scroll {
  display: block;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding: 0;
}
.ich-ub-left .ich-card.ich-card--antraege .ich-card-body--scroll::-webkit-scrollbar { display: none; }
/* SubgridList Header: sticky, Titel + Filter untereinander, buendig mit Kartenrand. */
.ich-ub-left .ich-card.ich-card--antraege .subgrid-header {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4) var(--space-2);
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}
/* Pill-Switcher: horizontal scrollbar bei Engpass (z.B. 5 Pills bei Azubi) */
.ich-ub-left .ich-card.ich-card--antraege .subgrid-filters {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
}
.ich-ub-left .ich-card.ich-card--antraege .subgrid-filters::-webkit-scrollbar { display: none; }
/* Zeilen: eigenes Padding, da Scroll-Body padding:0 hat. Vertikal `--space-2`
   damit die erste/letzte Zeile nicht direkt an Header-/Filterzeile klebt
   (Nick-Feedback 2026-05-01). */
.ich-ub-left .ich-card.ich-card--antraege [data-subgrid-body] {
  padding: var(--space-2) var(--space-4);
}
/* Grid-Items auf minmax(0,1fr) zwingen — verhindert, dass Karten
   breiter werden als der Container (1fr allein respektiert min-content). */
.ich-ub-left .ich-card.ich-card--antraege .subgrid-rows {
  grid-template-columns: minmax(0, 1fr);
}

/* Mid-Slot (Kalender). Notebook: Spalte 2 ueber volle Hoehe.
   Wide: mittlere Spalte (Kalender zentriert). */
.ich-ub-mid {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: var(--space-4);
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Right-Slot (Geburtstage & Jahrestage). Notebook: unter ich-ub-left in Spalte 1. Wide: eigene Spalte.
   JS setzt max-height = Kalender-Hoehe. height:100% fuellt die Grid-Zelle,
   max-height begrenzt auf Kalender. overflow:hidden kappt, te-list scrollt intern. */
.ich-ub-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: var(--space-4);
  grid-column: 1;
  overflow: hidden;
  height: 100%;
}
.ich-ub-right #ich-team-events { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ich-ub-right #ich-team-events .te-card { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ich-ub-right #ich-team-events .te-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.ich-ub-right #ich-team-events .te-list::-webkit-scrollbar { display: none; }

/* Wide-Display (Desktop): 3 Spalten. Geburtstage bekommt eigene rechte Spalte. */
@media (min-width: 1400px) {
  .ich-ub-grid {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(260px, 360px);
  }
  .ich-ub-left  { grid-column: 1; grid-row: 1; }
  .ich-ub-mid   { grid-column: 2; grid-row: 1; }
  .ich-ub-right { grid-column: 3; grid-row: 1; }
}
/* Kalender-Body erbt Overflow vom Kartenrahmen — Headers (.ich-card-header) und
 Legende (.ich-kal-legende) bleiben sticky in der Card, der Grid scrollt im Body.
 Bei 125% Browser-Zoom wurde der Jahreskalender abgeschnitten,
 weil .ich-card--full overflow:hidden auf den Container vererbt hat. Jetzt erlauben wir
 Scroll auf der Card und lassen den Body inheritieren (headers/footer bleiben sichtbar
 am Card-Rand durch flex-shrink:0). */
.ich-card-body--kal { min-height: 0; overflow: inherit; flex: 1; }
.ich-card--full > .ich-card-header { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════════
 Sub-Modul-CSS .
 Liste + Datei-Kommentare im Header oben.
 ════════════════════════════════════════════════════════════════════════════ */

/* ── Übersicht Responsive (Shell) ──────────────────────────────────────
   Modul-spezifische @media-Overrides liegen jeweils im Modul-CSS:
   - hero.css: .ich-hero / .ich-hero-actions / .ich-persona-* / #ich-btn-akte
   - jahreskalender.css: .ich-kalender-jahr / .monat-* / .ich-kal-pagination*
   - team-events.css: .te-card / .te-list / #ich-team-events
   - antraege.css: .ia-item-* / .ich-card--antraege Mobile-Hoehe

   Hier bleiben nur Shell-Regeln (.ich-tablist / .ich-tab / .ich-tabpanel /
   .ich-ub-* / .ich-card / .ich-card-body / .bm-modal--sm /
   #ich-tab-firmenkalender).
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1399px) {
  .ich-ub-grid { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
}
@media (max-width: 999px) {
  /* Sub-Tabs: zentriert, kompakter Padding, horizontale Scroll-Sicherheit */
  .ich-tablist {
    justify-content: center;
    padding: 0 var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ich-tablist::-webkit-scrollbar { display: none; }
  .ich-tab {
    padding: var(--space-2-5) var(--space-2-5);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ich-tabpanel { overflow-y: auto; }
  .ich-ub-wrap { padding: var(--space-3); overflow: visible; flex: none; }
  /* Stacking: Grid wird Content-getrieben, kein Row-Equalize.
 explizit auto, da Default ab >=1000px auf
 minmax(0, 1fr) steht. */
  .ich-ub-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  /* Tablet: Stacking — alle Slots in 1 Spalte. Grid-Row-Overrides + overflow aufheben. */
  .ich-ub-left,
  .ich-ub-mid,
  .ich-ub-right { grid-column: 1; grid-row: auto; overflow: visible; max-height: none; height: auto; }
  .ich-card--full { height: auto; }
  /* Kalender (mid): kein Scroll-Container auf Tablet, fließt normal */
  .ich-ub-mid { min-height: auto; }
  .ich-card-body--kal { overflow-y: visible; }
}
/* -- Responsive: Mobile (<600px) — Mein Bereich Shell --------- */
@media (max-width: 599px) {
  .ich-tablist { padding: 0 var(--space-3); justify-content: center; }
  .ich-tab { min-height: 44px; }
  .ich-tab.active { font-weight: var(--fw-medium); }
  /* Firmenkalender (PowerBI): auf Mobile ausblenden — Iframe nicht sinnvoll nutzbar */
  #ich-tab-firmenkalender { display: none; }
  /* Paket hartes Overflow-Sicherheitsnetz
 auf allen Containern, damit kein Element ueber den Viewport rausragt. Plus
 max-width:100% damit feste-px-Inhalte (Buttons, Cards) nie groesser werden
 als der Container. */
  .ich-tabpanel { overflow-x: hidden; }
  .ich-ub-wrap { padding: var(--space-3); overflow-x: hidden; max-width: 100%; box-sizing: border-box; }
  .ich-ub-grid { gap: var(--space-2); max-width: 100%; }
  .ich-ub-grid > * { min-width: 0; max-width: 100%; }
  .ich-card { border-radius: var(--radius-md); overflow: hidden; min-width: 0; }
  .ich-card-header { padding: var(--space-2) var(--space-3); }
  .ich-card-body { padding: var(--space-2) var(--space-3); }
  /* Antrags-Modal: volle Breite (generisches BookingModal) */
  .bm-modal--sm { width: 100vw; max-width: 100vw; border-radius: 0; }
}