/* board-modal.css — Fluent-2-Dialog-Komponente fuer Board-Module.
 Konsumenten: Admin-Mail-Templates, Notifications, ant-drawer + andere
 Modal-Use-Cases. aus legacy-shared.css extrahiert. */

/* Scrim-SSOT (tokens.css): leichter, brand-getoenter Schleier + Frost —
   Kontext dahinter bleibt erkennbar (frueher hartes 45% Schwarz). */
.bm-overlay { position: fixed; inset: 0; background: var(--lod-scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: var(--z-bm-overlay); }
.bm-overlay.hidden { display: none; }
.bm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  min-height: 400px;
  max-width: 90vw;
  max-height: 85vh;
  background: var(--color-surface);
  z-index: var(--z-bm-modal);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-64);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bm-modal.hidden { display: none; }
.bm-modal--sm { width: 440px; min-height: auto; }
.bm-modal--sm .bm-modal-body { scrollbar-gutter: auto; }
.bm-modal-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.bm-modal-badges { display: flex; gap: var(--space-1-5); flex: 1; flex-wrap: wrap; align-items: center; }
.bm-modal-header-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.bm-modal-body { padding: var(--space-6); flex: 1; overflow-y: auto; scrollbar-gutter: stable; }
.bm-modal-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-2);
}
.bm-field { display: flex; flex-direction: column; gap: var(--space-xxs); position: relative; min-width: 0; }
.bm-field-val { font-size: var(--font-size-md); display: flex; align-items: center; gap: var(--space-1); }

/* Mobile (<600): Modal full-viewport (vermeidet iOS Keyboard-Bugs) */
@media (max-width: 599px) {
  .bm-modal {
    width: 100vw; max-width: 100vw; min-height: 0;
    border-radius: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    height: auto; max-height: none;
    transform: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
    background: var(--color-surface);
  }
  .bm-modal--sm {
    width: 100vw; max-width: 100vw; min-height: 0;
    border-radius: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    height: auto; max-height: none;
    transform: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
    background: var(--color-surface);
  }
  .bm-modal-body { padding: var(--space-3); overflow-x: hidden; overscroll-behavior: contain; }
  .bm-modal-header { padding: var(--space-2) var(--space-3); position: sticky; top: 0; z-index: 2; background: var(--color-surface); }
  .bm-modal-footer { padding: var(--space-2) var(--space-3); }
  .bm-field input, .bm-field select, .bm-field textarea { max-width: 100%; box-sizing: border-box; }
}

/* Tablet (<999): Modal-Padding kompakter */
@media (max-width: 999px) {
  .bm-modal { width: 90vw; }
  .bm-modal-body { padding: var(--space-3); }
  .bm-modal-header, .bm-modal-footer { padding: var(--space-xxs) var(--space-3); }
}

/* Entrance (Charakter B) — vorher erschien das Modal instant via .hidden-Toggle
   (harter Pop). Backdrop fadet, Modal kommt mit Scale-Pop. Nur >=600px (auf
   Mobile ist das Modal full-viewport mit transform:none → kein Scale-Translate).
   prefers-reduced-motion ist global (base.css) abgefangen. */
@media (min-width: 600px) {
  .bm-overlay:not(.hidden) { animation: bmOverlayIn var(--motion-quick) var(--ease-enter) both; }
  .bm-modal:not(.hidden)   { animation: bmModalIn var(--motion-overlay) var(--ease-enter-strong) both; }
}
@keyframes bmOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bmModalIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}