/* Varial — Consistent modal sizing and chrome */

/* ── Global modal chrome ────────────────────────────── */
.modal-header {
  background-color: var(--varial-card-bg, #fff);
  border-bottom-color: var(--varial-border, #E4E2DC);
  padding: 0.625rem 1rem;
}

.modal-footer {
  border-top: 1px solid var(--varial-border, #E4E2DC);
  background: var(--varial-card-bg, #fff);
  padding: 0.5rem 1rem;
}

.modal-title {
  font-family: var(--varial-font-heading);
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  color: var(--varial-gray-900, #131210);
}

/* ── Compact modal — confirmations, small single-field forms ── */
.modal-compact .modal-header {
  padding: 0.625rem 1rem;
}

.modal-compact .modal-body {
  padding: 0.75rem 1rem;
}

.modal-compact .modal-footer {
  padding: 0.5rem 1rem;
}

/* ── Wide modal — larger tables or complex forms ─────────── */
@media (min-width: 768px) {
  .modal-wide .modal-dialog {
    max-width: 720px;
  }
}

/* ── Scrollable modal body — JSON preview, long content ────── */
.modal-scrollable .modal-body {
  max-height: calc(80vh - 120px);
  overflow-y: auto;
}

/* ── Granularity modal (wizard page granularity selector) ──── */
#granularity-modal .modal-dialog {
  max-width: 480px;
}

/* ── Dark mode ────────────────────────────────────── */
[data-bs-theme="dark"] .modal-footer {
  background: var(--varial-bg-subtle);
  border-top-color: var(--varial-border);
}

[data-bs-theme="dark"] .modal-header {
  border-bottom-color: var(--varial-border);
}