/**
 * components.css — Wiederverwendbare UI-Bausteine.
 * Namespace `ip-` (kollidiert NICHT mit bestehender Modul-CSS, Migration Seite für Seite).
 * Alle Farben/Maße über die Tokens aus theme.css. Visual-only.
 *
 * Tint-Modifier (auf Summary-Card / Pill / Icon-Chip): .tint-blue .tint-green
 * .tint-amber .tint-purple .tint-slate .tint-red  +  .filled (voller Tint, weißer Text).
 */

/* ============================================================
   CARD
   ============================================================ */
.ip-card {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.ip-card + .ip-card { margin-top: var(--gap-grid); }

.ip-page-title { font-size: var(--fs-title); font-weight: var(--fw-title); color: var(--navy); }
.ip-page-subtitle { font-size: var(--fs-caption); color: var(--slate); margin-top: 2px; }

/* Tabellenziffern überall für Beträge */
.ip-num { font-variant-numeric: tabular-nums; }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* ============================================================
   SUMMARY-CARDS
   ============================================================ */
.ip-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid);
}
.ip-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.ip-icon-chip {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-chip);
  font-size: 16px; line-height: 1;
}
.ip-summary-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ip-summary-label {
  font-size: var(--fs-caption2);
  font-weight: var(--fw-caption2);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-text-muted);
}
.ip-summary-value {
  font-size: var(--fs-headline);
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Tints für Icon-Chip */
.ip-icon-chip.tint-blue   { color: var(--blue);   background: var(--blue-bg); }
.ip-icon-chip.tint-green  { color: var(--green);  background: var(--green-bg); }
.ip-icon-chip.tint-amber  { color: var(--amber);  background: var(--amber-bg); }
.ip-icon-chip.tint-purple { color: var(--purple); background: var(--purple-bg); }
.ip-icon-chip.tint-slate  { color: var(--slate);  background: rgba(71,85,105,.12); }
.ip-icon-chip.tint-red    { color: var(--red);    background: var(--color-error-bg); }

/* Gefüllte Headline-Karte (z.B. Remaining) */
.ip-summary-card.filled { border: none; }
.ip-summary-card.filled .ip-summary-label { color: rgba(255,255,255,.85); }
.ip-summary-card.filled .ip-summary-value { color: #fff; }
.ip-summary-card.filled.tint-green { background: var(--green); }
.ip-summary-card.filled.tint-red   { background: var(--red); }
.ip-summary-card.filled.tint-amber { background: var(--amber); }
.ip-summary-card.filled.tint-blue  { background: var(--blue); }
.ip-summary-card.filled .ip-icon-chip { background: rgba(255,255,255,.18); color: #fff; }

@media (max-width: 720px) {
  .ip-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PILLS / BADGES
   ============================================================ */
.ip-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.ip-pill.tint-gold   { color: var(--brand-gold); background: var(--brand-gold-18); }
.ip-pill.tint-blue   { color: var(--blue);   background: var(--blue-bg); }
.ip-pill.tint-green  { color: var(--green);  background: var(--green-bg); }
.ip-pill.tint-amber  { color: var(--amber-text); background: var(--amber-bg); }
.ip-pill.tint-purple { color: var(--purple); background: var(--purple-bg); }
.ip-pill.tint-slate  { color: var(--slate);  background: rgba(71,85,105,.12); }
.ip-pill.tint-red    { color: var(--red);    background: var(--color-error-bg); }

/* ============================================================
   PROGRESS-BAR
   ============================================================ */
.ip-progress {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(71,85,105,.18);
  overflow: hidden;
}
.ip-progress > .ip-progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brand-gold);
  transition: width var(--transition-normal);
}
.ip-progress.over > .ip-progress-fill { background: var(--red); }

/* ============================================================
   ACCORDION
   ============================================================ */
.ip-accordion { display: flex; flex-direction: column; gap: var(--gap-grid); }
.ip-acc {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ip-acc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.ip-acc-chevron {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}
.ip-acc.open .ip-acc-chevron { transform: rotate(90deg); }
.ip-acc-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-headline);
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ip-acc-summary {            /* rechtsbündiger Summen-Block in Header-Zeile */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}
.ip-acc-body { padding: 0 16px 14px; }
.ip-acc:not(.open) .ip-acc-body { display: none; }
.ip-acc.excluded { opacity: .75; }

/* ============================================================
   TABELLE (fixe Spaltenbreiten, Kopf + Zeilen fluchten)
   ============================================================ */
.ip-table { width: 100%; border-collapse: collapse; }
.ip-table thead th {
  font-size: var(--fs-caption2);
  font-weight: var(--fw-caption2);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-text-muted);
  text-align: left;
  padding: 8px 10px;
  background: var(--nested-bg);
}
.ip-table thead th:first-child { border-top-left-radius: var(--radius-nested); }
.ip-table thead th:last-child  { border-top-right-radius: var(--radius-nested); }
.ip-table tbody td {
  padding: 10px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-subheadline);
  color: var(--color-text);
  vertical-align: middle;
}
.ip-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ip-table tbody tr.clickable { cursor: pointer; }
.ip-table tbody tr.clickable:hover { background: var(--nested-bg); }

/* ============================================================
   SERVICE-CARD (liturgischer Farbstreifen)
   ============================================================ */
.ip-service-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.ip-lit-stripe {
  flex: 0 0 var(--lit-stripe-w);
  width: var(--lit-stripe-w);
  border-radius: var(--lit-stripe-r);
  background: var(--slate);            /* Fallback; echte Farbe inline via --lit-color */
  background: var(--lit-color, var(--slate));
}
.ip-service-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ip-service-title { font-size: var(--fs-headline); font-weight: 600; color: var(--navy); }
.ip-service-sub { font-size: var(--fs-subheadline); color: var(--slate); }
.ip-service-cantor { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--brand-gold); }

/* ============================================================
   BUTTONS
   ============================================================ */
.ip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-nested);
  font-size: var(--fs-subheadline);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ip-btn-primary { background: var(--brand-gold); color: #fff; }
.ip-btn-primary:hover { background: var(--brand-gold-86); }
.ip-btn-secondary { background: var(--card-bg); color: var(--navy); border-color: var(--hairline); }
.ip-btn-secondary:hover { background: var(--nested-bg); }

/* ============================================================
   VOLLBILD-MODAL (Detail-Ansicht)
   ============================================================ */
.ip-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15,23,42,.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
}
.ip-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
}
.ip-modal-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  min-height: 56px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--hairline);
}
.ip-modal-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-headline);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ip-modal-done {
  flex: 0 0 auto;
  padding: 7px 16px;
  border: none;
  border-radius: var(--radius-nested);
  background: var(--brand-gold);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.ip-modal-done:hover { background: var(--brand-gold-86); }
.ip-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--pad-content);
}

/* Overlays auf Basis von .modal (main.css: Bottom-Sheet auf Mobil) ab Tablet
   ebenfalls auf die Content-Fläche und oben bei 4vh — Print-Label-Dialoge,
   Re-Analyze, Archiv-Detail. Gestapelte Folge-Modale setzt der modal-manager
   per Inline-Style auf das darunterliegende Modal, die bleiben unberührt. */
@media (min-width: 768px) {
  .modal {
    /* Fläche + linker Innenabstand: siehe „ABDUNKLUNG ÜBER ALLES" am Dateiende. */
    padding: 4vh 16px 16px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
  .modal > .modal-content { max-height: 100%; }
}

/* ============================================================
   STANDARD-MODAL über den modal-manager (einheitlich).
   Ein Box-Modal, das via modalManager.open() geöffnet wird, trägt .mm-modal
   und zentriert sich auf die CONTENT-Fläche (Sidebar zählt nicht).
   modal-manager liefert Backdrop + ESC + Scroll-Lock + Stacking.
   ============================================================ */
.mm-modal {
  /* Standard-Geometrie aller Modale (wie .dynamic-layout-dialog und die
     Services-Dialoge): oben bei 4vh verankert, links auf die Sidebar eingerückt
     und per margin-inline über der Inhaltsfläche zentriert — KEIN transform,
     damit Datums-Popups im Modal nicht abgeschnitten werden. */
  position: fixed;
  top: 4vh;
  left: var(--sidebar-w, 0px);
  right: 0;
  bottom: auto;
  margin-inline: auto;
  margin-block: 0;
  transform: none;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100vw - var(--sidebar-w, 0px) - 32px);
  display: none;
  z-index: 1000;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  color: var(--color-text);
  max-height: 92vh;
  overflow: hidden;
}
.mm-modal.modal-active { display: flex; flex-direction: column; }

/* Native <dialog>, die über den modal-manager laufen (statt showModal/[open]):
   per .modal-active sichtbar machen — gleiche Geometrie wie .mm-modal oben
   (4vh von oben, über der Inhaltsfläche zentriert, kein transform). Gilt für
   JEDEN Dialog ohne eigene Positionsregel; Modul-Regeln per ID (Choir-Dialoge)
   dürfen nur Breite/Optik ergänzen, nicht die Position.
   Datums-Popups escapen in den body (z 999999) → erscheinen über dem Dialog (kein Top-Layer). */
dialog.modal-active:not(.dynamic-layout-dialog):not(.confirm-dialog-backdrop) {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 4vh;
  left: var(--sidebar-w, 0px);
  right: 0;
  bottom: auto;
  margin-inline: auto;
  margin-block: 0;
  transform: none;
  max-width: calc(100vw - var(--sidebar-w, 0px) - 32px);
  max-height: 92vh;
  overflow: hidden;
}
/* Ohne eigene Optik: helle Karte statt Browser-Standard (2px-Rahmen, 1em Padding). */
dialog.modal-active:not(.dynamic-layout-dialog):not(.confirm-dialog-backdrop) {
  padding: 0;
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--radius-card, 12px);
  background: var(--color-bg-elevated, #fff);
  color: var(--color-text, #1E293B);
  box-shadow: var(--shadow-xl, 0 24px 60px rgba(0,0,0,.18));
}
/* Kopf und Fuß stehen, der Body scrollt — auch bei der Standard-Struktur
   .modal-content > .modal-header / .modal-body / .modal-footer. */
dialog.modal-active > .modal-content,
dialog.modal-active > .email-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
}
dialog.modal-active .modal-body,
dialog.modal-active .email-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ============================================================
   MODAL-SICHERHEITSNETZ: NIE OBEN/UNTEN ABGESCHNITTEN
   Zentrierende Overlays (fixed + inset:0 + flex-center) schneiden eine zu hohe
   Box in BEIDE Richtungen ab — der obere Teil (Titel, X-Button) wird dabei
   unerreichbar, weil der Body-Scroll währenddessen gesperrt ist. Auf großen
   Displays fällt das nie auf, auf Laptops/kleinen Fenstern sofort.
   Zwei Ebenen:
     1) Overlay scrollt selbst + „safe center" → passt die Box nicht, rutscht sie
        an den oberen Rand statt überzulaufen. Garantie: alles bleibt erreichbar.
     2) Box wird auf die Overlay-Höhe gedeckelt und scrollt intern (Kopf/Fuß
        bleiben stehen) → das ist die eigentlich gewollte Darstellung.
   Modul-CSS lädt später → !important.
   (Absichtlich NICHT hier: .loading-overlay, .ip-modal, .mb-overlay, .aim-lb — Vollbild
    (.aim-lb ist die Bild-Lupe des Archiv-Imports: dunkles Vollbild mit 90vw/90vh-Bild,
     eingerueckt auf die Inhaltsflaeche saehe eine Lupe falsch aus);
    .modal aus main.css — Bottom-Sheet-Verhalten auf Mobil.)
   ============================================================ */
.budget-modal, .bp-calc-popup-modal,
.archive-modal, .wl-modal,
.auto-assign-modal,
.payments-modal, .privat-modal,
.settings-modal, .cdm-modal, .eim-modal,
.reason-prompt-overlay,
.cal-dialog-backdrop,
.ai-rep-overlay, .ai-link-overlay,
.occ-files-modal, .practice-overlay,
.delpg-overlay, .cbe-overlay,
.wu-modal-overlay,
/* zur Laufzeit per <style> injiziert (JS-Module) — !important greift trotzdem */
.apc-overlay, .crop-modal-overlay, .upload-modal-backdrop,
.occ-ed-overlay, .pdfprev-overlay, .aim-backdrop, .psync-modal, .cwm-modal,
.reanalyze-modal, .confirm-dialog-backdrop {
  /* Oben 4vh wie alle Box-Modale (.mm-modal, dialog.modal-active,
     .dynamic-layout-dialog): die Box hängt am oberen Rand statt mittig,
     damit jedes Modal der App an derselben Stelle aufgeht. */
  padding: 4vh 16px 16px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  align-items: flex-start !important;
}

/* Innen liegende Backdrops müssen beim Scrollen stehen bleiben, sonst wandert
   die Abdunklung mit und gibt den Seiteninhalt frei. */
.settings-modal > .modal-backdrop,
.cdm-modal > .cdm-backdrop {
  position: fixed !important;
}

/* Ebene 2 — Standard-Konvention (.modal-container / .modal-box / .modal-content
   mit .modal-header / .modal-body / .modal-footer). 100% = Overlay-Höhe minus
   dessen Padding, deshalb robuster als geratene vh-Werte. */
.budget-modal > .modal-container,
.archive-modal > .modal-container,
.payments-modal > .modal-container,
.privat-modal > .modal-container,
.settings-modal > .modal-container,
.cdm-modal > .cdm-container,
.auto-assign-modal > .modal-box,
.eim-modal > .eim-modal-content,
.wl-modal > .wl-modal-box,
.occ-files-modal > .occ-modal-box,
.ai-link-overlay > .ai-link-box,
.ai-rep-overlay > .ai-rep-modal,
.practice-overlay > .practice-modal,
.delpg-overlay > .delpg-modal,
.cbe-overlay > .cbe-modal,
.wu-modal-overlay > .wu-modal,
.bp-calc-popup-modal > .bp-calc-popup {
  max-height: 100% !important;
  display: flex;
  flex-direction: column;
}

/* Boxen ohne eigenen Kopf/Body/Fuß-Aufbau: als Ganzes scrollen lassen. */
.cal-dialog-backdrop > .cal-dialog,
.reason-prompt-overlay > .reason-prompt-box {
  max-height: 100% !important;
  overflow-y: auto;
}

/* Kopf und Fuß bleiben stehen, nur der Body scrollt. */
.modal-header, .modal-footer,
.wl-modal-head, .wl-modal-foot,
.eim-modal-header, .eim-modal-footer {
  flex: 0 0 auto;
}
.wl-modal-body,
.eim-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Ausnahme: der Auto-Assign-Dialog ist auf schmalen Viewports absichtlich
   randlos (Availability.css @media 768px) — Rahmen dort zurücknehmen, der
   Höhendeckel (100% = jetzt volle Viewport-Höhe) bleibt. */
@media (max-width: 768px) {
  .auto-assign-modal { padding: 0 !important; }
  .auto-assign-modal > .modal-box { border-radius: 0; }
}

/* Modul-Kopfzeilen entfallen: der Modulname steht jetzt oben in der Leiste
   („St. Ignatius Martyr · Services", siehe setTopbarTitle in src/app.js). Das spart in jedem
   Modul mit Kopfzeile eine Zeile. id + Klasse, damit die Regel auch gegen die spaeter
   geladenen Modul-Stylesheets gewinnt. Das Dashboard hat einen eigenen Kopfbereich
   (.dashboard-header mit „Edit Profile") und bleibt unberuehrt. */
#tab-content .module-header { display: none; }

/* ============================================================
   KLEINE VERSAND-/EXPORT-DIALOGE (dialog.email-draft-dialog)
   Services „Email Schedule"/„Download Schedule"/„Export Choir Schedule",
   Choir „Email Schedule" (src/core/choir-schedule-mail.js). Optik war bisher
   per ID nur in Services.css definiert — im Chor-Bereich fehlte sie ganz.
   Geometrie kommt von dialog.modal-active (oben).
   ============================================================ */
dialog.email-draft-dialog::backdrop {
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(4px);
}
.email-draft-dialog .email-modal-content {
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 100%;
}
.email-draft-dialog .email-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  background: var(--color-bg-subtle, #eceae6);
  border-bottom: 1px solid var(--color-border, #e0ddd8);
}
.email-draft-dialog .email-modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary, #1e3a5f);
}
.email-draft-dialog .email-modal-body {
  padding: 1.5rem;
  min-height: 0;
  overflow-y: auto;
}
.email-draft-dialog .email-modal-body p {
  color: var(--color-text-secondary, #5a5a5a);
}
.email-draft-dialog .email-modal-footer {
  padding: 1.25rem;
  background: var(--color-bg, #f5f5f3);
  border-top: 1px solid var(--color-border-light, #ebe9e5);
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}
.email-draft-dialog .email-form-group {
  margin-top: 1rem;
}
.email-draft-dialog .email-form-group label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-secondary, #5a5a5a);
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: .05em;
}
.email-draft-dialog .email-form-control {
  width: 100%;
  background: #fff;
  border: 1px solid var(--color-border, #e0ddd8);
  color: var(--color-text, #2c2c2c);
  padding: .75rem;
  border-radius: 8px;
  font-size: .95rem;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235a5a5a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1.2rem;
}
.email-draft-dialog .email-form-control:focus {
  border-color: var(--color-primary-light, #2d5a87);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}
.email-draft-dialog select option {
  background-color: #fff;
  color: var(--color-text, #2c2c2c);
}
.email-draft-dialog .email-btn {
  padding: .6rem 1.25rem;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.email-draft-dialog .email-btn-primary {
  background: var(--color-primary, #1e3a5f);
  color: #fff;
  border: none;
}
.email-draft-dialog .email-btn-primary:hover {
  background: var(--color-primary-dark, #152a45);
}
.email-draft-dialog .email-btn-cancel {
  background: transparent;
  border: 1px solid var(--color-border, #e0ddd8);
  color: var(--color-text-secondary, #5a5a5a);
}
.email-draft-dialog .email-btn-cancel:hover {
  background: var(--color-bg-subtle, #eceae6);
}
.email-draft-dialog .email-close-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #8a8a8a);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.email-draft-dialog .email-close-btn:hover {
  color: var(--color-text, #2c2c2c);
}
/* Auswahl „welcher Plan an wen": eine Zeile je Versandweg. */
.email-draft-dialog .sched-mail-opt {
  padding: .75rem .9rem;
  border: 1px solid var(--color-border, #e0ddd8);
  border-radius: 8px;
  margin-bottom: .75rem;
  background: var(--color-bg, #f5f5f3);
}
.email-draft-dialog .sched-mail-opt label { cursor: pointer; font-size: .92rem; }
.email-draft-dialog .sched-mail-opt .email-form-group { margin-top: .6rem; }
.email-draft-dialog .sched-mail-opt input[type="radio"] { accent-color: var(--color-primary, #1e3a5f); margin-right: .4rem; }

/* ============================================================
   ABDUNKLUNG ÜBER ALLES, BOX ÜBER DER INHALTSFLÄCHE
   Ein Overlay spannt sich wieder über das GANZE Fenster — sonst blieb die
   Sidebar hell, während der Inhalt abgedunkelt war (in Archive besonders
   auffällig, weil dort mehrere Modale ohne den modal-manager aufgehen und es
   also gar keine zweite Abdunklung gab). Damit die Box trotzdem mittig über
   der Inhaltsfläche sitzt, schiebt sie der linke Innenabstand hinüber:
   die Flex-Zentrierung rechnet innerhalb der Polsterung.
   Steht bewusst ganz unten — das Sicherheitsnetz oben setzt `padding` als
   Kurzform und würde einen früher notierten Innenabstand überschreiben.
   (.confirm-dialog-backdrop fehlt hier absichtlich: der Bestätigungsdialog
    zentriert sich über dem ganzen Fenster und dunkelt schon alles ab.)
   ============================================================ */
.budget-modal, .bp-calc-popup-modal,
.archive-modal, .wl-modal,
.auto-assign-modal,
.payments-modal, .privat-modal,
.reason-prompt-overlay,
.cal-dialog-backdrop,
.ai-rep-overlay,
.occ-files-modal,
.settings-modal, .cdm-modal, .eim-modal,
.wu-modal-overlay, .delpg-overlay, .cbe-overlay,
.ai-link-overlay, .practice-overlay,
/* zur Laufzeit per <style> injiziert (JS-Module) */
.cwm-modal, .apc-overlay, .crop-modal-overlay, .upload-modal-backdrop,
.occ-ed-overlay, .pdfprev-overlay, .aim-backdrop, .psync-modal,
.reanalyze-modal,
/* .modal (main.css) ab Tablet — Etiketten, Archiv-Detail, Re-Analyze */
.modal {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  padding-left: calc(var(--sidebar-w, 0px) + 16px) !important;
}

@media (max-width: 767px) {
  /* Auf Mobil ist die Sidebar eine schmale Icon-Leiste bzw. ausgeblendet —
     dann keine Extra-Polsterung, sonst klebt die Box am rechten Rand. */
  .budget-modal, .bp-calc-popup-modal,
.archive-modal, .wl-modal,
.auto-assign-modal,
.payments-modal, .privat-modal,
.reason-prompt-overlay,
.cal-dialog-backdrop,
.ai-rep-overlay,
.occ-files-modal,
.settings-modal, .cdm-modal, .eim-modal,
.wu-modal-overlay, .delpg-overlay, .cbe-overlay,
.ai-link-overlay, .practice-overlay,
/* zur Laufzeit per <style> injiziert (JS-Module) */
.cwm-modal, .apc-overlay, .crop-modal-overlay, .upload-modal-backdrop,
.occ-ed-overlay, .pdfprev-overlay, .aim-backdrop, .psync-modal,
.reanalyze-modal,
  .modal { padding-left: 16px !important; }
}