/* ==========================================================================
 leistungen-grid.css — Leistungen-Liste + Buchungen-Tabelle (Domain-Modul)

 Konsument: web/js/domain/kontingente/kt-leistungen-grid.js
 (window.LeistungenGrid)

 Selektor-Praefix: .kont-leist-* (Avatar-Stack, Status-Pille, Tage-Pille,
 Allokations-Bar mit Tone-Modifiern, Row-Grid-Layout, Buchungen-Tabelle).

 Layout-Pattern (Leistungs-Zeile):
 SubgridList rendert <li class="subgrid-row kont-leist-row"> als 6-Spalten-
 Grid: Icon | Monat | Laufend-Pille | Avatar-Stack | Tage | Allok-Bar.
 Container-Query (subgrid <480px) reduziert auf 4 Spalten (Avatar-Stack
 + Status-Pille + Allok-Text raus).

 Aus sections/kontingente/kontingente.css extrahiert
 in die Mirror-Topologie zu web/js/domain/kontingente/.
 ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   Avatar-Stack im Leistungen-Subgrid (Audit-Fix T12 2026-04-26)
   Final-Override 22x22 (Z. weiter unten in der Cascade-Position) ueberschreibt
   die 18x18-Defaults — beide hier zusammen.
   ───────────────────────────────────────────────────────────────────────── */
.app-scope .kont-leist-avatars {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-1);
}
.app-scope .kont-leist-avatar {
  display: inline-flex;
  margin-left: -4px;
  border: 1.5px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-surface);
  /* 2026-05-01: Final-Wrapper-Groesse auf 22px — Profilbilder besser lesbar.
     Ueberschreibt den frueheren 18px-Default oben durch Cascade-Position. */
  width: 22px;
  height: 22px;
}
.app-scope .kont-leist-avatar:first-child { margin-left: 0; }
.app-scope .kont-leist-avatar img,
.app-scope .kont-leist-avatar .avatar {
  width: 22px;
  height: 22px;
  font-size: 9.5px;
}
.app-scope .kont-leist-avatar-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;
  padding: 0 var(--space-1);
  border-radius: 50%;
  border: 1.5px solid var(--color-surface);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  /* 2026-05-01: Final-Groesse 22x22 + LoD-Gray-Tones. */
  width: 22px;
  height: 22px;
  background: var(--lod-gray-100);
  color: var(--lod-gray-700);
}

/* ─────────────────────────────────────────────────────────────────────────
   Leistungen-Liste
   - Datum als "Mai 2026" statt "2026-05" (im Modul gesetzt)
   - Aktueller Monat optisch hervorgehoben (Bold + dezenter Background)
   - "Laufend"-Pille fuer aktuellen Monat
   - Allokations-Mini-Bar mit Tone-Faerbung
   - Tage-Pille kompakter (Soll-Anker)
   ───────────────────────────────────────────────────────────────────────── */

/* Aktueller Monat: Title Bold + leichter Background-Tint */
.app-scope .kont-leist-row-title--current {
  font-weight: var(--fw-bold);
  color: var(--lod-darkblue);
}
.app-scope .kont-leist-row-title--past {
  color: var(--lod-gray-600);
}

/* "Laufend"-Pille rechts neben dem Titel des aktuellen Monats */
.app-scope .kont-leist-status-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-px) var(--space-2);
  border-radius: var(--radius-circular);
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: var(--space-1);
}
.app-scope .kont-leist-status-pill--current {
  background: color-mix(in srgb, var(--lod-turquoise) 15%, #fff);
  color: var(--lod-turquoise-900);
}
/* Platzhalter-Pille fuer past/future Months — nimmt Grid-Spalte 3 in Anspruch
   damit die Avatare/Werte rechts an der gleichen Position bleiben, ist aber
   visuell unsichtbar. */
.app-scope .kont-leist-status-pill--placeholder {
  background: transparent;
  color: transparent;
  pointer-events: none;
}
.app-scope .kont-leist-avatars--empty {
  display: inline-block;
  min-height: 1px;
}

/* Allok-Slot wenn keine Buchungen — dezente Stille statt leerer Bar */
.app-scope .kont-leist-alloc--empty {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}
.app-scope .kont-leist-alloc-empty-text {
  white-space: nowrap;
}

/* Tage-Pille: dezent, klein — der Soll-Anker. Nicht so dominant wie die
   Allokations-Bar, weil die der Live-Stand ist. */
.app-scope .kont-leist-tage-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--lod-gray-100);
  color: var(--lod-gray-700);
  font-size: 11px;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Allokations-Bar: 80px breit + Wert daneben. Tone-Farben analog
   MA-Erfuellungs-Bar (success/info/warning/overdue). */
.app-scope .kont-leist-alloc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.app-scope .kont-leist-alloc-bar {
  position: relative;
  width: 64px;
  height: 6px;
  border-radius: var(--radius-circular);
  background: var(--lod-gray-100);
  overflow: hidden;
  flex-shrink: 0;
  min-width: 32px;
}
.app-scope .kont-leist-alloc-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-circular);
  transition: width var(--duration-normal) var(--ease-soft);
}
.app-scope .kont-leist-alloc-bar-fill--success { background: var(--status-success-fg); }
.app-scope .kont-leist-alloc-bar-fill--info    { background: var(--brand-default); }
.app-scope .kont-leist-alloc-bar-fill--warning { background: var(--status-warning-fg); }
.app-scope .kont-leist-alloc-bar-fill--overdue { background: var(--status-danger-fg); }
.app-scope .kont-leist-alloc-bar-fill--default { background: var(--lod-gray-300); }
.app-scope .kont-leist-alloc-bar-overrun {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 4px,
    rgba(255, 255, 255, 0.4) 4px 8px
  );
  pointer-events: none;
}
.app-scope .kont-leist-alloc-text {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--lod-gray-700);
  font-weight: var(--fw-medium);
  min-width: 0;
}

/* 2026-05-01: Leistungs-Zeile bekommt fixe Spaltenbreiten, damit alle Werte
   untereinander an den gleichen Stellen sitzen — unabhaengig davon ob der
   Monatsname kurz ("Mai") oder lang ("September") ist und ob die "LAUFEND"-
   Pille angezeigt wird oder nicht.
   Spalten: Icon | Monat (140px) | Laufend-Pille (78px) | Avatar-Stack (1fr) | Tage (76px) | Allok (160px)
   Die "Laufend"-Pille bekommt ihre eigene Spalte mit fester Breite, damit die
   Avatare in jeder Zeile an der gleichen X-Position starten. Bei vergangenen/
   zukuenftigen Monaten ist die Spalte einfach leer — dadurch keine Verschiebung.
   Selektor matcht die SubgridList-<li> via rowClassName="kont-leist-row" und
   den Default-flex-Container ueberschrieben mit grid. */
.app-scope .subgrid-row.kont-leist-row,
.subgrid-row.kont-leist-row {
  display: grid;
  grid-template-columns: 18px 140px 78px 1fr 76px 160px;
  align-items: center;
  gap: var(--space-2-5);
}
/* Avatar-Stack-Spalte: rechtsbuendig in der Spalte, damit der Stack rechts
   neben den variablen Slots klebt. */
.app-scope .kont-leist-row .kont-leist-avatars {
  justify-self: end;
}
/* Status-Pille-Spalte (Slot 3): klebt links in ihrer Spalte, kein margin. */
.app-scope .kont-leist-row .kont-leist-status-pill {
  margin-left: 0;
  justify-self: start;
}
/* Tage-Pille (Slot 5) + Allok (Slot 6): jeweils rechtsbuendig in ihrer Spalte. */
.app-scope .kont-leist-row .kont-leist-tage-pill {
  justify-self: end;
}
.app-scope .kont-leist-row .kont-leist-alloc {
  justify-self: end;
  width: 100%;
  justify-content: flex-end;
}
/* Title-Spalte: linksbuendig, ellipsis wenn Monatsname doch zu lang. */
.app-scope .kont-leist-row .wd-subgrid-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Override: das alte "erste Meta margin-left:auto" (in subgrid-row Default)
   greift hier nicht, weil wir feste Grid-Spalten haben. Reset, damit nichts
   verrutscht. */
.app-scope .kont-leist-row > .wd-subgrid-row-meta:first-of-type {
  margin-left: 0;
}
/* Wenn Drawer schmal wird: Allok kompakter, Avatare einklappen */
@media (max-width: 999px) {
  .app-scope .subgrid-row.kont-leist-row,
  .subgrid-row.kont-leist-row {
    grid-template-columns: 18px 110px 0 1fr 64px 130px;
    gap: var(--space-1-5);
  }
  .app-scope .kont-leist-row .kont-leist-status-pill { display: none; }
}

/* 2026-05-04 Mobile-Spalten-Drop: Avatar-Stack komplett raus, Allok-Bar
   ohne Text-Label (nur visueller Soll/Ist-Balken). Bindet an den
   Subgrid-Container (subgrid-list bekommt container-name:subgrid in
   subgrid-list.css), damit die Regel auch im engen Drawer greift —
   nicht nur am Mobile-Viewport. Spalten-Layout: Icon | Monat (1fr) |
   Tage | Allok-Bar. */
@container subgrid (max-width: 480px) {
  .app-scope .subgrid-row.kont-leist-row,
  .subgrid-row.kont-leist-row {
    grid-template-columns: 18px 1fr 64px 110px;
    gap: var(--space-1-5);
  }
  .app-scope .kont-leist-row .kont-leist-avatars,
  .app-scope .kont-leist-row .kont-leist-status-pill,
  .app-scope .kont-leist-row .kont-leist-alloc-text {
    display: none;
  }
  /* Allok-Bar fuellt jetzt den ganzen 110px-Slot ohne Text daneben. */
  .app-scope .kont-leist-row .kont-leist-alloc-bar {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   2026-05-01 — Buchungen-Tabelle im Leistung-Drawer
   ───────────────────────────────────────────────────────────────────────── */
.app-scope .kont-leist-buch-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-3-5);
}
.app-scope .kont-leist-buch-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2-5);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-1);
}
.app-scope .kont-leist-buch-header-icon { opacity: 0.7; }
.app-scope .kont-leist-buch-header-title {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.app-scope .kont-leist-buch-header-counter {
  background: var(--lod-gray-100);
  color: var(--lod-gray-700);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: var(--space-px) 7px;
  border-radius: var(--radius-circular);
  font-variant-numeric: tabular-nums;
}
.app-scope .kont-leist-buch-empty {
  padding: var(--space-4);
  text-align: center;
  font-size: 12.5px;
}
.app-scope .kont-leist-buch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.app-scope .kont-leist-buch-table thead th {
  text-align: left;
  font-weight: var(--fw-medium);
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}
.app-scope .kont-leist-buch-table thead th.kont-leist-buch-cell-num {
  text-align: right;
}
.app-scope .kont-leist-buch-table tbody td {
  padding: var(--space-2);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-light);
}
.app-scope .kont-leist-buch-table tbody tr:last-child td {
  border-bottom: none;
}
.app-scope .kont-leist-buch-row {
  cursor: pointer;
  transition: background var(--duration-quick);
}
.app-scope .kont-leist-buch-row:hover td {
  background: var(--lod-gray-50);
}
.app-scope .kont-leist-buch-row:focus-visible td {
  outline: 2px solid var(--brand-default);
  outline-offset: -2px;
}
.app-scope .kont-leist-buch-cell-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.app-scope .kont-leist-buch-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-scope .kont-leist-buch-avatar {
  flex-shrink: 0;
  display: inline-flex;
}
.app-scope .kont-leist-buch-cell-mode {
  white-space: nowrap;
}
.app-scope .kont-leist-buch-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.app-scope .kont-leist-buch-mode-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-circular);
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
.app-scope .kont-leist-buch-mode-pill--manuell {
  background: var(--lod-darkblue-50);
  color: var(--lod-darkblue);
}
.app-scope .kont-leist-buch-mode-pill--prozentual {
  background: color-mix(in srgb, var(--lod-amber-500) 15%, #fff);
  color: var(--lod-amber-700);
}
.app-scope .kont-leist-buch-row--totals td {
  border-top: 2px solid var(--color-border);
  border-bottom: none;
  padding-top: var(--space-2-5);
  font-size: 13px;
  background: var(--lod-gray-50);
}
.app-scope .kont-leist-buch-pct {
  font-weight: var(--fw-semibold);
  color: var(--lod-darkblue);
}
.app-scope .kont-leist-buch-pct--over {
  color: var(--status-warning-fg);
}
.app-scope .kont-leist-buch-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  background: transparent;
  border: 1px dashed var(--lod-gray-300);
  color: var(--lod-gray-700);
  padding: var(--space-2) var(--space-3-5);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-top: var(--space-2-5);
  font-size: 13px;
  font-weight: var(--fw-medium);
  transition: all var(--duration-quick);
}
.app-scope .kont-leist-buch-add-btn:hover {
  border-color: var(--lod-darkblue-300);
  background: var(--lod-gray-50);
  color: var(--lod-darkblue);
}
.app-scope .kont-leist-buch-add-btn img { opacity: 0.7; }