/* ==========================================================================
 ma-erfuellung.css — Mitarbeiter-Erfuellung-Tabelle (Domain-Modul)

 Konsument: web/js/domain/kontingente/kt-ma-erfuellung.js (window.MaErfuellung)

 Tabellarisches Layout mit rechtsbuendigen numerischen Spalten und
 Gesamt-Zeile am Ende. Trenner zwischen geplanten und nicht-geplanten MA.
 Header mit Monatsswitcher, Mini-Bar in der Erfuellungs-Spalte mit Tone-
 Faerbung (success/info/warning/muted) und Overrun-Hatching.

 Selektor-Praefix: .kont-ma-* (Card, Header, Table, Row-Varianten,
 Cells, Avatar, Month-Switcher, Pct-Bar mit Tone-Modifiern).

 Hinweis: `.kont-ma-filter` (Section-Toolbar-Filter-Dropdown) bleibt in
 sections/kontingente/kontingente.css — gehoert nicht zu diesem Domain-
 Modul.

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

/* ─────────────────────────────────────────────────────────────────────────
   Card + Tabellen-Grundlayout (Audit-Fix T16-T21 2026-04-26)
   ───────────────────────────────────────────────────────────────────────── */
.app-scope .kont-ma-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-3-5);
  /* Tabelle insgesamt im Container halten: Wenn der Drawer schmal wird,
     sollen die Numerischen Spalten kompakt bleiben. Container clipped
     horizontal — verhindert Rausrutsch ins Drawer-Padding. */
  overflow-x: hidden;
}
.app-scope .kont-ma-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);
  /* Monatsswitcher rechts neben dem Titel — flex-start damit der Switcher
     via margin-left:auto rechts klebt. */
  justify-content: flex-start;
}
.app-scope .kont-ma-header-icon { opacity: 0.7; }
.app-scope .kont-ma-header-title {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.app-scope .kont-ma-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  /* table-layout:auto laesst die Spalten nach Inhalt wachsen — bei engen
     Drawern rutschen die Werte aus dem Container. Mit Cell-min-width:0 +
     padding-right:6px schrumpft alles gleichmaessig statt eines harten
     Overflows. 2026-05-01. */
  table-layout: auto;
}
.app-scope .kont-ma-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) var(--space-2) var(--space-1-5) var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}
.app-scope .kont-ma-table thead th.kont-ma-cell-num {
  text-align: right;
}
.app-scope .kont-ma-table tbody td {
  padding: var(--space-2);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-light);
}
.app-scope .kont-ma-table tbody tr:last-child td {
  border-bottom: none;
}
.app-scope .kont-ma-cell-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.app-scope .kont-ma-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 0;
  /* Sub-Text (z.B. "(1,00 n. gepl.)") soll unter den Hauptwert rutschen
     wenn Platz knapp wird, statt rechts rauszulaufen. */
  padding-right: var(--space-1-5);
}
.app-scope .kont-ma-cell-soll {
  color: var(--color-text-muted);
}
.app-scope .kont-ma-cell-sub {
  display: block;
  font-size: 10.5px;
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
  margin-top: var(--space-xxs);
  white-space: nowrap;
}
.app-scope .kont-ma-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row-Varianten: Separator (geplant/nicht-geplant), Unplanned-Hervorhebung,
   Totals-Row mit Top-Border. */
.app-scope .kont-ma-row--separator td {
  padding: var(--space-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border-light);
}
.app-scope .kont-ma-row--unplanned {
  background: color-mix(in srgb, var(--status-warning-bg) 60%, transparent);
}
/* Leerzeile (keine Mitarbeiter) — zentriert mit etwas Luft. */
.app-scope .kont-ma-row--empty td {
  text-align: center;
  padding: 14px 0;
}
.app-scope .kont-ma-unplanned-badge {
  display: inline-block;
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-circular);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}
.app-scope .kont-ma-row--totals td {
  border-top: 2px solid var(--color-border);
  border-bottom: none;
  padding-top: var(--space-2-5);
  font-size: 13px;
}
/* Soll-Spalte in Totals etwas dezenter (analog Body-Soll) */
.app-scope .kont-ma-row--totals .kont-ma-cell-soll {
  color: var(--color-text-muted);
}
.app-scope .kont-ma-avatar {
  flex-shrink: 0;
  display: inline-flex;
}

/* ─────────────────────────────────────────────────────────────────────────
   Monatsswitcher rechts im Header (V2-Aufruestung 2026-05-01)
   ───────────────────────────────────────────────────────────────────────── */
.app-scope .kont-ma-month-switcher {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--lod-gray-50);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-xxs) var(--space-1);
}
.app-scope .kont-ma-month-btn {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-text);
  transition: background var(--duration-quick);
}
.app-scope .kont-ma-month-btn:hover { background: var(--lod-gray-100); }
.app-scope .kont-ma-month-btn:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 1px;
}
.app-scope .kont-ma-month-btn img { opacity: 0.7; }
.app-scope .kont-ma-month-label {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  min-width: 88px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Zebra-Stripes + Hover (Body-Rows, ohne Separator/Totals/Unplanned)
   ───────────────────────────────────────────────────────────────────────── */
.app-scope .kont-ma-table tbody tr.kont-ma-row:not(.kont-ma-row--separator):not(.kont-ma-row--totals):not(.kont-ma-row--unplanned):nth-child(even) td {
  background: color-mix(in srgb, var(--lod-gray-50) 60%, transparent);
}
.app-scope .kont-ma-table tbody tr.kont-ma-row:not(.kont-ma-row--separator):not(.kont-ma-row--totals):hover td {
  background: var(--lod-gray-50);
}

/* ─────────────────────────────────────────────────────────────────────────
   Mini-Bar fuer Erfuellungs-Spalte: 80px breit, 6px hoch, rechts.
   2026-05-01: min-width auf 0 reduziert + max-width 130px. Wenn der
   Container schmal ist (Drawer < 600px), schrumpft die Bar zuerst bevor
   irgendwas anderes rausrutscht.
   ───────────────────────────────────────────────────────────────────────── */
.app-scope .kont-ma-cell-pct-wrap {
  text-align: right;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  max-width: 140px;
}
.app-scope .kont-ma-table thead th.kont-ma-cell-pct-wrap {
  text-align: right;
  font-weight: var(--fw-medium);
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: var(--space-2) var(--space-2) var(--space-1-5) var(--space-2);
}
.app-scope .kont-ma-pct-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
  width: 100%;
}
.app-scope .kont-ma-pct-bar {
  position: relative;
  width: 60px;
  height: 6px;
  border-radius: var(--radius-circular);
  background: var(--lod-gray-100);
  overflow: hidden;
  flex-shrink: 1;
  min-width: 24px;
}
.app-scope .kont-ma-pct-bar--empty {
  background: var(--lod-gray-100);
}
.app-scope .kont-ma-pct-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-circular);
  transition: width var(--duration-normal) var(--ease-soft);
}
.app-scope .kont-ma-pct-bar-fill--success { background: var(--status-success-fg); }
.app-scope .kont-ma-pct-bar-fill--info    { background: var(--brand-default); }
.app-scope .kont-ma-pct-bar-fill--warning { background: var(--status-warning-fg); }
.app-scope .kont-ma-pct-bar-fill--muted   { background: var(--lod-gray-300); }
.app-scope .kont-ma-pct-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-ma-pct-value {
  font-weight: var(--fw-semibold);
  font-size: var(--font-size-sm);
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}