/* modal.css — v2 Shared Modal (zentriertes Dialog-Overlay)

 Quelle: extrahiert aus app.css ("Shared Modal"-Block). Inhalt 1:1.
 Konsumenten: ConfirmDialog, weitere body-appended Modals (auch via
 .scoped-Variante in Drawer-Container gemounted).

 Cascade-Hinweis: confirm-modal.css ergaenzt .modal-foot (Button-Breiten +
 Stapel-Variante modal-foot--stacked). Damit confirm-modal.css gewinnt, MUSS
 modal.css _vor_ confirm-modal.css geladen werden (in index.html: modal.css am
 Anfang des Phase-2-Blocks, confirm-modal.css spaeter im Phase-1-Block).
 ========================================================================== */

/* Standard-Backdrop (Modal ausserhalb Drawer) */
.app-scope .modal-backdrop {
  position: fixed; inset: 0;
  /* Leichter Schleier statt Voll-Verdunkelung: der Kontext dahinter bleibt
     erkennbar. Zentrale Scrim-SSOT (tokens.css) — Mitarbeiter empfanden den
     frueheren kraeftig-blauen Scrim als zu dominant. */
  background: var(--lod-scrim);
  /* Frosted Scrim (Charakter B) — hebt die Modal-Hierarchie, ohne den
     Hintergrund unkenntlich zu machen. */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--z-drawer-modal-bg);
  display: grid; place-items: center;
  padding: var(--space-10) var(--space-5);
  animation: app-drawerFade var(--motion-quick) var(--ease-enter) both;
}
/* Modal mit klarem Border + starkem Shadow + Fluent-Radius */
.app-scope .modal {
  background: var(--lod-white);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--lod-radius-lg);
  box-shadow: var(--lod-shadow-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
  overflow: hidden;
  animation: app-modalPop var(--motion-overlay) var(--ease-enter-strong) both;
}
/* min(440px, 100%): auf breiten Viewports 440px, auf schmalen Handys fluide
   die volle Breite der (bereits mit --space-5 gepolsterten) Backdrop-Zelle —
   nie breiter als der Bildschirm. */
.app-scope .modal.size-sm { width: min(440px, 100%); }
/* size-lg: breite Übersichts-/Cockpit-Modals (z.B. Kaltakquise-Auftrags-Cockpit). */
.app-scope .modal.size-lg { width: min(820px, 100%); }

@keyframes app-modalPop {
  from { transform: scale(0.96) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Exit (Charakter B) — getriggert via .is-closing am .modal-backdrop
   (LoD.motion.animateOut). Backdrop fadet, Modal schrumpft leicht weg. Schneller
   als der Enter (Accelerate). pointer-events:none waehrend des Schliessens. */
.app-scope .modal-backdrop.is-closing { pointer-events: none; animation: app-backdropOut var(--motion-exit) var(--ease-exit) forwards; }
.app-scope .modal-backdrop.is-closing .modal { animation: app-modalOut var(--motion-exit) var(--ease-exit) forwards; }
@keyframes app-backdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes app-modalOut {
  from { transform: scale(1) translateY(0); opacity: 1; }
  to   { transform: scale(0.97) translateY(4px); opacity: 0; }
}

/* Modal-Stacking: Confirm-Modal ueber Drawer, verstaerkter Backdrop */
.app-scope .modal-backdrop.stack-over-drawer {
  z-index: var(--z-drawer-modal-bg-strong);
  /* Etwas kraeftiger als der Standard-Scrim — der Dialog liegt hier ueber einem
     bereits gedimmten Drawer und muss ihn klar dominieren, der Hintergrund
     bleibt aber weiter erkennbar. */
  background: var(--lod-scrim-strong);
}

/* Scoped-Backdrop: wird in einen Container gemountet (z.B. Drawer-Container)
   statt an body. Dann absolut im Container, nicht fixed im Viewport.
   Dadurch bleibt Topbar+Tabs unverdeckt, was mit der Drawer-UX konsistent ist. */
.app-scope .modal-backdrop.scoped {
  position: absolute;
  inset: 0;
}

/* Confirm-Footer darf bei sehr schmalen Dialogen umbrechen (Fallback <400px) */
.app-scope .modal-foot { flex-wrap: wrap; }

.app-scope .modal-head {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-4-5) var(--space-3);
  border-bottom: 1px solid var(--lod-gray-100);
}
.app-scope .modal-title-area { display: flex; flex-direction: column; gap: var(--space-xxs); flex: 1; }

.app-scope .modal-title {
  font-family: var(--lod-font-display);
  font-size: 18px; font-weight: 700;
  color: var(--lod-darkblue);
  letter-spacing: 0.01em;
}
.app-scope .modal-body {
  padding: var(--space-4) var(--space-6) var(--space-6);
  overflow-y: auto;
  flex: 1;
}
/* Confirm-Dialog-Message — einzelner Absatz im natuerlichen Fluss. Mehrere
   Absaetze (wenn Consumer "\n\n" im Text setzt) werden mit space getrennt. */
.app-scope .modal-body .modal-message {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--lh-loose);
  color: var(--lod-fg-1);
}
.app-scope .modal-body .modal-message + .modal-message {
  margin-top: var(--space-3);
}
/* Label-Absatz direkt ueber dem Freitext-Feld (ConfirmModal inputField.label) —
   kleiner fester Abstand zum Input statt des Absatz-Rasters. */
.app-scope .modal-body .modal-input-label { margin-bottom: var(--space-1); }
/* Optionales Freitext-Feld im Confirm-Modal (ConfirmModal.open inputField —
   z.B. Kommentar bei Antrags-Entscheidung). Volle Breite, kein Fixmaß. */
.app-scope .modal-body .modal-prompt-input {
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-md);
  line-height: var(--lh-loose);
  color: var(--lod-fg-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
}
.app-scope .modal-body .modal-prompt-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.app-scope .modal-foot {
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--lod-gray-100);
  display: flex; gap: var(--space-2); align-items: center;
  justify-content: flex-end;
  background: var(--lod-gray-50);
}

/* Mobile (<600px): body-gemountetes Modal (Confirm etc.) MUSS ueber dem
   Bottom-Sheet liegen. Das Topbar-Dropdown wird auf Mobil zum Vollbild-Sheet
   (--z-bottom-sheet 1051 + Vollbild-Scrim); ein daraus geoeffneter Confirm
   (z.B. Personalantrag genehmigen) verschwand sonst HINTER dem Scrim — man sah
   nur die graue Flaeche und kam an keinen Button. Scoped-Backdrops (in einen
   Container gemountet, position:absolute) bleiben unberuehrt. */
@media (max-width: 599px) {
  .app-scope .modal-backdrop:not(.scoped) {
    z-index: var(--z-modal-over-sheet);
  }
}