/* ==========================================================================
 kontingente.css — Section-Layout-SSOT fuer den Kontingente-Tab

 Konsument: web/js/sections/kontingente.js

 Inhalt: Tab-Container, Cards, Detail, Sub-Tabs, Charts, Inline-Edit.
 Cross-Cutting-Basen: .lod-section-* + .card-grid (layout.css),
 .dash-scroll-host (domain/dashboard/dashboard.css), Card-Utilities
 (components/cards/card.css).
 ========================================================================== */

/* ── Tab-Container: Flush-to-Edges (wie Projekte/Board) ────── */
#tab-content-kontingente {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
#tab-content-kontingente.hidden { display: none; }

/* ── Kontingente Grid ──────────────────────────────────────── */
.kont-grid {
  /* Host ist kein Grid mehr — das Karten-Grid liegt jetzt im GroupedList-Container
     .gl-group-cards--grid (Keyed-Reconcile gegen Flackern). Spalten-Layout unten
     auf diesen Container umgescopt (Desktop + Responsive identisch zu vorher). */
  display: block;
}
.kont-grid .gl-group-cards--grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
}

/* Monatsnavigation: der Switcher wird jetzt von LoD.MonthSwitcher.buildNavRow
   (eigene Klassen) gerendert — die frueheren .kont-monat-nav/-btn/-label
   (V1-Toolbar) sind mit dem Legacy-JS entfallen. */

/* ── Leerzustand (Onboarding) ─────────────────────────────── */
.kont-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center;
}
.kont-empty-icon { opacity: 0.4; }
.kont-empty-title { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); color: var(--color-text); }
.kont-empty-text { font-size: var(--font-size-sm); color: var(--color-text-muted); max-width: 400px; line-height: 1.5; }
.kont-empty-text a { color: var(--brand-default); text-decoration: none; }
.kont-empty-text a:hover { text-decoration: underline; }

/* Der frühere .kont-ma-filter-Select (V1-Toolbar) ist entfallen — die
   Mitarbeiter-Auswahl lebt im FilterPopover (searchable-chips). */


/* ══════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1399px) {
  .kont-grid .gl-group-cards--grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (max-width: 999px) {
  .kont-grid .gl-group-cards--grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .kont-grid .gl-group-cards--grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════
 Kontingente-Karten via Card.
 ═════════════════════════════════════════════════════════════════════ */

/* Hoehe nutzt SSOT aus card.css (`.card-v2 { height: 180px }`),
   einheitlich ueber alle Breakpoints. Das gap:4px bleibt: Kontingent hat
   eine Section mehr (4-Tile-Stats-Grid) als andere Card-Typen, und 4px
   statt 8px ist der einzige Weg, alle
   Sections in 180px unterzubringen ohne Inhalt rauszuwerfen. */
.app-scope .card-v2.kont-card-app {
  gap: var(--space-1);
}
.app-scope .card-v2.kont-card-app .card-app-title {
  display: block;
  -webkit-line-clamp: unset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}
/* Subtitle (% erfuellt) + Meta (Projekt-Pille) sitzen direkt unter dem
   Title und brauchen kein zusaetzliches margin-top. Vorher: 4px margin
   (in card.css definiert) oben drauf, was zusammen mit gap:4px schon
   ueberreichlich Platz waere. */
.app-scope .card-v2.kont-card-app .card-app-body-subtitle { margin-top: 0; }
.app-scope .card-v2.kont-card-app .card-app-meta { margin-top: 0; }


/* Hoehe kommt aus card.css SSOT. Auf engen Viewports wird der Stats-Row-
   Gap reduziert, damit die 4 Tiles nebeneinander passen — das aendert
   keine Card-Hoehe. */

/* Ressourcenplanung-Drawer (.rp-*) liegt in
 web/styles/components/drawers/rp-drawer.css. PHASE-8-MARKER-RP-START */
/* PHASE-8-MARKER-RP-END */

/* Drawer-Section-Count Badge (wiederverwendbar; falls noch nicht vorhanden) */
.drawer-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 var(--space-1-5);
  margin-left: var(--space-1-5);
  border-radius: var(--radius-grouped-count);
  background: var(--lod-darkblue);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  vertical-align: middle;
}

/* Datum-Quick-Buttons im Kontingent-Drawer: rechtsbuendig
   (justify-content: flex-end), analog zu Action-Buttons im Repo. */
.app-scope .kont-date-quicks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: 0;
  margin-left: auto;          /* KONT-D4 Quick-Reihe rechtsbuendig im Date-Wrap, neben dem Trigger */
  justify-content: flex-end;
  flex: 0 0 auto;
}
/* Date-Wrap im Kontingent-Drawer auf volle Slot-Breite. Trigger nimmt
   natuerliche Breite, Quicks fliessen rechts. */
.app-scope [data-kont-field-content] .app-drawer-date-wrap {
  width: 100%;
  flex-wrap: wrap;
}
.app-scope .kont-date-quick-btn {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: background var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick);
}
.app-scope .kont-date-quick-btn:hover {
  background: var(--lod-bg-soft);
  border-color: var(--brand-default);
  color: var(--brand-default);
}
.app-scope .kont-date-quick-btn:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────
 Kontingent-Karten: Stats-Grid (Soll | Erfüllt / Rest | %-Erfüllung) als
 2x2-Grid am Kartenboden. Greift direkt auf das card-app-meta-row mit der
 Klasse `kont-stats-grid` — die 4 Meta-Items werden vom Grid in 2 Spalten
 und 2 Reihen verteilt. Phase-5-`kont-meta-anchor` schiebt die Reihe via margin-top:auto an den Karten-
 boden (analog .card-meta-anchor in card.css).
 ───────────────────────────────────────────────────────────────────────── */

/* Jahreswechsler ueber Verbrauch-ueber-Zeit-Chart + Leistungen
   (Audit T09 2026-04-26, Layout-Refresh 2026-04-30 KONT-D8).
   Full-Width-Header mit Border/Background, sodass der Switcher als
   eigenstaendiger Filter-Bereich erkennbar ist und der Sub-Title
   klarstellt, dass auch die Leistungen davon gefiltert werden. */
.app-scope .kont-verlauf-yearswitcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-3-5);
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.app-scope .kont-verlauf-yearswitcher-left {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.app-scope .kont-verlauf-yearswitcher-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-scope .kont-verlauf-year-label {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  min-width: 56px;
  text-align: center;
  letter-spacing: 0.4px;
}
.app-scope .kont-verlauf-year-prev,
.app-scope .kont-verlauf-year-next {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
}
.app-scope .kont-verlauf-year-prev:hover:not(:disabled),
.app-scope .kont-verlauf-year-next:hover:not(:disabled) {
  border-color: var(--brand-default);
  background: var(--color-bg-subtle);
}
.app-scope .kont-verlauf-year-prev:disabled,
.app-scope .kont-verlauf-year-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (max-width: 599px) {
  .app-scope .kont-verlauf-yearswitcher-hint { display: none; }
}

/* Mehr-/Minus-Saldo-Leiste unter dem Verlauf-Chart (Feature Kontingent-Saldo
   2026-06-27): kumulierte Entwicklung pro Monat als kleine Chips + Gesamt-Saldo.
   flex-wrap → responsiv ohne eigene Breakpoints. */
.app-scope .kont-saldo-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.app-scope .kont-saldo-strip-lbl {
  font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-text-muted);
}
.app-scope .kont-saldo-strip-hint { font-weight: var(--fw-normal, 400); opacity: .8; }
.app-scope .kont-saldo-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.app-scope .kont-saldo-chip {
  font-size: 11px; padding: 1px 6px; white-space: nowrap;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill-sm, 10px);
  color: var(--color-text-muted);
}
.app-scope .kont-saldo-chip.is-plus  { color: var(--status-success-fg, #1a7f5a); border-color: var(--status-success-border, #b7e0cd); }
.app-scope .kont-saldo-chip.is-minus { color: var(--lod-danger, #c1375c); border-color: var(--lod-danger, #c1375c); }
.app-scope .kont-saldo-strip-total {
  font-size: var(--font-size-sm); font-weight: var(--fw-bold); margin-left: auto;
}
.app-scope .kont-saldo-strip-total.is-plus  { color: var(--status-success-fg, #1a7f5a); }
.app-scope .kont-saldo-strip-total.is-minus { color: var(--lod-danger, #c1375c); }

/* MA-Erfuellung-Tabelle (.kont-ma-*) 2026-05-08 nach
 web/styles/domain/kontingente/kt-ma-erfuellung.css verschoben.
 PHASE-8-MARKER-MA-START */
/* PHASE-8-MARKER-MA-END */

/* Leistungen-Avatar-Stack 2026-05-08 nach domain/kontingente/leistungen-
 grid.css verschoben. PHASE-8-MARKER-LEIST-AVATAR */

/* KONT-DB1 Dashboard-Hoehen-Kette analog Wissen-Tab —
 Top-Mitarbeiter & Ablauf-Risiko sollen die volle Bildschirmhoehe nutzen,
 bisher hing das Dashboard auf seiner natuerlichen Hoehe und liess gigantischen
 Leerraum unten. Eltern-Container bekommen flex/min-height:0, dash-scroll-host
 streckt das Dashboard auf 100% und gibt das Stretch-Signal an die Cards weiter. */
#kont-panel-dashboard {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#kont-panel-dashboard.hidden { display: none; }
#kont-panel-dashboard .dash-scroll-host,
#kont-panel-dashboard .kont-dash-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#kont-panel-dashboard .dash-scroll-host > [data-kont-dash-host] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (max-width: 999px) {
  #kont-panel-dashboard .dash-scroll-host,
  #kont-panel-dashboard .kont-dash-scroll {
    overflow-y: auto;
    display: block;
  }
}

/* Leistungen-Liste + Buchungen-Tabelle (.kont-leist-*) 2026-05-08 nach
 web/styles/domain/kontingente/kt-leistungen-grid.css verschoben.
 PHASE-8-MARKER-LEIST-START */
/* PHASE-8-MARKER-LEIST-END */

/* KPI-Firmen-Drill: aktiver Firmen-Filter als entfernbarer Chip im Toolbar-Slot. */
#tab-content-kontingente .kont-firmachip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-2-5);
  border-radius: var(--radius-pill, 999px);
  background: var(--lod-darkblue-50);
  border: 1px solid var(--lod-darkblue-100, var(--lod-gray-200));
  color: var(--lod-darkblue);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
}
#tab-content-kontingente .kont-firmachip:hover { background: var(--lod-darkblue-100, var(--lod-gray-100)); }
#tab-content-kontingente .kont-firmachip-x { font-size: 11px; opacity: 0.7; }
#tab-content-kontingente .kont-firmachip:hover .kont-firmachip-x { opacity: 1; }
#tab-content-kontingente .kont-firmachip:focus-visible { outline: 2px solid var(--lod-darkblue); outline-offset: 1px; }