/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/modal.css
   Version: 0.1.0 · Build: 2026-09-13 · Benötigt: tokens.css, base.css
   VENDORED — READ-ONLY.

   Ersetzt vier Altformen: .modal-box/.modal-overlay (ticketsystem, forum),
   .dialog-* , .modal-content (demo) und das Nebeneinander beider in polls.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-modal {
  position: fixed;
  inset: 0;
  z-index: var(--bh-z-modal);

  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--bh-space-4);
}
.bh-modal.is-open,
.bh-modal[data-state="open"] { display: flex; }

.bh-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bh-surface-overlay);
}

.bh-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: calc(100vh - var(--bh-space-6) * 2);

  border: 1px solid var(--bh-border-strong);
  border-radius: var(--bh-radius-xl);
  background: var(--bh-surface-1);
  box-shadow: var(--bh-shadow-3);

  transition: opacity var(--bh-transition-enter), transform var(--bh-transition-enter);
}
.bh-modal:not(.is-open) .bh-modal__panel,
.bh-modal[data-state="closed"] .bh-modal__panel { opacity: 0; transform: translateY(var(--bh-space-2)); }

.bh-modal__panel--sm { width: min(420px, 100%); }
.bh-modal__panel--lg { width: min(800px, 100%); }

.bh-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bh-space-3);
  padding: var(--bh-space-4) var(--bh-space-5);
  border-bottom: 1px solid var(--bh-border-subtle);
}

.bh-modal__title {
  margin: 0;
  color: var(--bh-text-primary);
  font-size: var(--bh-text-md);
  font-weight: var(--bh-weight-semibold);
}
.bh-modal__description {
  margin: var(--bh-space-1) 0 0;
  color: var(--bh-text-muted);
  font-size: var(--bh-text-xs);
}

.bh-modal__close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  margin: -2px -6px 0 0;
  border: 0; border-radius: var(--bh-radius-md);
  background: none;
  color: var(--bh-text-muted);
  cursor: pointer;
  transition: background var(--bh-transition), color var(--bh-transition);
}
.bh-modal__close > svg { width: var(--bh-icon-size); height: var(--bh-icon-size); }
.bh-modal__close:hover  { background: var(--bh-surface-hover); color: var(--bh-text-primary); }
.bh-modal__close:active { background: var(--bh-surface-3); }
.bh-modal__close:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}
.bh-modal__close:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.bh-modal__body {
  padding: var(--bh-space-5);
  overflow-y: auto;
  color: var(--bh-text-secondary);
}

.bh-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bh-space-2);
  padding: var(--bh-space-4) var(--bh-space-5);
  border-top: 1px solid var(--bh-border-subtle);
}
/* Hinweistext links, Aktionen rechts. */
.bh-modal__foot--split { justify-content: space-between; }
.bh-modal__hint { color: var(--bh-text-muted); font-size: var(--bh-text-xs); }

/* ── Mobil: Sheet von unten ──────────────────────────────────────────────── */
@media (max-width: 639px) {
  .bh-modal { align-items: flex-end; padding: 0; }
  .bh-modal__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--bh-radius-xl) var(--bh-radius-xl) 0 0;
    border-bottom: 0;
  }
  .bh-modal:not(.is-open) .bh-modal__panel,
  .bh-modal[data-state="closed"] .bh-modal__panel { transform: translateY(var(--bh-space-5)); }
}

@media (prefers-reduced-motion: reduce) {
  .bh-modal__panel { transition: opacity 0.01ms linear; transform: none !important; }
}