/* ==========================================================================
 ressourcenplanung-drawer.css — Ressourcenplanung-Drawer

 Konsument: web/js/components/drawers/rp-drawer.js

 Selektor-Praefix: .rp-* (ressourcenplanung). Drawer-Body-Layout:
 Title-Row → Konfiguration-Grid → Section-Actions → Team-Tabelle →
 Vorschau-Matrix.

 Aus sections/kontingente/kontingente.css extrahiert
 (war dort Z. 207-555 als "Block"). `.rp-*`
 ist Drawer-CSS, nicht Section-Layout — Mirror-Topologie zu
 web/js/components/drawers/.
 ========================================================================== */

/* Title-Row im Body — scrollt mit (RP01) ──────────────────────────────── */
.rp-titlerow {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-1) var(--space-xxs) var(--space-3) var(--space-xxs);
  border-bottom: 1px solid var(--lod-border-light);
  margin-bottom: var(--space-3-5);
  flex-wrap: wrap;
}
.rp-titlerow-name {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--lod-darkblue);
}
.rp-titlerow-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill-sm);
  background: var(--lod-bg-soft);
  color: var(--lod-muted);
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

/* Konfiguration-Grid: Tage (full) → Zeitraum (full) → Von | Bis (je 50%) ── */
.rp-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2-5) var(--space-3-5);
  margin-top: var(--space-1);
}
.rp-config-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.rp-config-row--full { grid-column: 1 / -1; }
.rp-config-label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lod-muted);
}
.rp-config-control {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
}
.rp-config-control .app-drawer-input,
.rp-config-control .app-drawer-select,
.rp-config-control .select {
  flex: 1 1 auto;
  min-width: 0;
}
/* Tage pro Monat: kompaktes Zahlenfeld statt voller Zeilenbreite — eine kleine
   Zahl in einer 600px-Box wirkt leer. Native Spinner-Pfeile ausblenden für den
   ruhigen App-eigenen Look (Eingabe per Tastatur, step 0.5). */
.rp-config-control .app-drawer-input[data-rp-tage] {
  flex: 0 0 auto;
  width: 132px;
}
.rp-config-grid input[type="number"]::-webkit-outer-spin-button,
.rp-config-grid input[type="number"]::-webkit-inner-spin-button,
.rp-anteil-input::-webkit-outer-spin-button,
.rp-anteil-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Auch das Anteil-Feld in der Team-Tabelle (nicht im .rp-config-grid) spinnerlos —
   sonst kollidieren die nativen Pfeile im 60px-Feld mit Zahl + %-Suffix. */
.rp-config-grid input[type="number"],
.rp-anteil-input { -moz-appearance: textfield; }
/* Von/Bis-Monats-Trigger fuellen ihre Grid-Zelle. Der globale
   .app-scope .app-drawer-date-trigger-Stil (_shared/drawer-field-primitives.css) erzwingt
   min-width:180px + flex:0 1 auto — im schmalen RP-Grid (2 Spalten à ~330px)
   würde der Trigger dadurch aus der rechten Drawer-Kante ragen. Höhere
   Spezifität (3 Klassen) gewinnt über die globale Regel. */
.rp-config-grid .rp-config-control .app-drawer-date-trigger {
  flex: 1 1 auto;
  min-width: 0;
}
.rp-config-grid .rp-config-control .app-drawer-date-trigger:disabled,
.rp-config-grid .rp-config-control .app-drawer-date-trigger.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--lod-bg-soft);
}

/* Section-Actions: Buttons unter der Team-Tabelle ──────────────────────
   2026-05-01: Refactored — vorher hatte's einen permanent sichtbaren
   AsyncPicker-Slot (alter Such-Pattern). Jetzt zwei klare Action-Buttons:
   primary "Mitarbeiter hinzufuegen" + ghost "Gleichmaessig verteilen". */
.rp-section-actions {
  display: flex;
  gap: var(--space-2-5);
  margin-top: var(--space-3-5);
  align-items: center;
  flex-wrap: wrap;
}
.rp-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 7px var(--space-3-5);
  border: 1px solid var(--lod-gray-200);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  color: var(--lod-darkblue);
  transition: background var(--duration-quick), border-color var(--duration-quick);
}
.rp-action-btn:hover {
  background: var(--lod-gray-50);
  border-color: var(--lod-darkblue-300);
}
.rp-action-btn:focus-visible {
  outline: 2px solid var(--lod-turquoise);
  outline-offset: 1px;
}
.rp-action-btn img { opacity: 0.75; }
.rp-action-btn--primary {
  background: var(--lod-darkblue);
  border-color: var(--lod-darkblue);
  color: var(--lod-white);
}
.rp-action-btn--primary:hover {
  background: var(--lod-darkblue-700);
  border-color: var(--lod-darkblue-700);
}
.rp-action-btn--primary img { filter: brightness(0) invert(1); opacity: 0.9; }

.rp-empty {
  padding: var(--space-4);
  color: var(--lod-muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  background: var(--lod-gray-50);
  border-radius: var(--radius-md);
  border: 1px dashed var(--lod-gray-200);
}

/* Team-Tabelle (2026-05-01 Refactor) ───────────────────────────────────
   SSOT-Look analog Mitarbeiter-Erfuellung + Buchungen-Tabelle. */
.rp-team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.rp-team-table th,
.rp-team-table td {
  padding: var(--space-2);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-light);
}
.rp-team-table thead th {
  text-align: left;
  font-weight: var(--fw-medium);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  padding-bottom: var(--space-1-5);
}
.rp-team-table thead th.rp-th-anteil,
.rp-team-table thead th.rp-th-stunden { text-align: right; }
.rp-team-table thead th.rp-th-actions { width: 36px; }
.rp-th-anteil { width: 140px; }
.rp-th-stunden { width: 110px; }

.rp-team-row { transition: background var(--duration-quick); }
.rp-team-row:hover td { background: var(--lod-gray-50); }
.rp-team-row-sum:hover td { background: var(--lod-gray-50); }

.rp-cell-name {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  min-width: 0;
}
.rp-cell-name .rp-name {
  font-weight: var(--fw-medium);
  color: var(--lod-darkblue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Anteil-Input: schmaler Rahmen, rechtsbuendige Zahl, %-Suffix */
.rp-cell-anteil {
  text-align: right;
}
.rp-anteil-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  justify-content: flex-end;
}
.rp-anteil-input {
  width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* nutzt die globalen .app-drawer-input Borders, hier nur Padding-Tweak */
  padding: var(--space-1) var(--space-2);
  height: 28px;
}
.rp-anteil-suffix {
  font-size: var(--font-size-sm);
}

.rp-cell-stunden {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--lod-darkblue);
  white-space: nowrap;
}
.rp-cell-actions { text-align: right; }
.rp-row-remove {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-1-5);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--duration-quick), background var(--duration-quick), border-color var(--duration-quick);
  color: var(--lod-gray-700);
}
.rp-row-remove:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--lod-danger) 12%, #fff);
  border-color: var(--lod-danger);
  color: var(--lod-danger);
}
.rp-team-row-sum 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);
}
.rp-sum-ok    { color: var(--status-success-fg); }
.rp-sum-over  { color: var(--status-danger-fg); }
.rp-sum-low   { color: var(--status-warning-fg); }

/* Avatar-Pille — lod_mitarbeiter -> systemuser Mapping passiert im
   Drawer-JS (KtMaCache.resolveUserId), hier nur die geometrischen
   Constraints. */
.rp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.rp-avatar .avatar,
.rp-avatar .al-avatar,
.rp-avatar .al-avatar-fallback {
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xs);
}

/* Vorschau-Matrix (RP08/RP09/RP10) ────────────────────────────────────── */
.rp-matrix-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: var(--space-1-5);
  border: 1px solid var(--lod-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  -webkit-overflow-scrolling: touch;
}
.rp-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
}
.rp-matrix th,
.rp-matrix td {
  padding: var(--space-1-5) var(--space-2-5);
  text-align: center;
  border-bottom: 1px solid var(--lod-border-light);
  white-space: nowrap;
}
.rp-matrix thead th {
  background: var(--lod-bg-soft);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-badge);
  position: sticky;
  top: 0;
  z-index: 2;
}
.rp-matrix-th-ma,
.rp-matrix-cell-ma {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 1;
  min-width: 220px;
  border-right: 1px solid var(--lod-border-light);
}
.rp-matrix thead .rp-matrix-th-ma {
  background: var(--lod-bg-soft);
  z-index: 3;
}
.rp-matrix-cell-ma > * { vertical-align: middle; }
.rp-matrix-cell-ma .rp-avatar {
  margin-right: var(--space-2);
}
.rp-matrix-ma-name {
  font-weight: var(--fw-medium);
  color: var(--lod-darkblue);
}
.rp-matrix-ma-pct {
  display: inline-block;
  margin-left: var(--space-1-5);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  color: var(--lod-muted);
  background: var(--lod-bg-soft);
  padding: var(--space-xxs) var(--space-1-5);
  border-radius: var(--radius-lg);
  font-variant-numeric: tabular-nums;
}
.rp-matrix-th-monat {
  text-align: center !important;
  min-width: 64px;
}
.rp-matrix-th-sum {
  background: var(--lod-bg-soft) !important;
  border-left: 1px solid var(--lod-border-light);
}
.rp-matrix-cell {
  font-variant-numeric: tabular-nums;
}
.rp-matrix-cell-empty {
  color: var(--lod-muted);
}
.rp-matrix-cell-sum {
  background: var(--lod-bg-soft);
  border-left: 1px solid var(--lod-border-light);
}
.rp-matrix-row-sum td {
  border-top: 2px solid var(--lod-border);
  background: var(--lod-bg-soft);
  font-weight: var(--fw-semibold);
}
.rp-matrix-row-sum .rp-matrix-cell-ma {
  background: var(--lod-bg-soft);
}