/* Shared overlays and feedback surfaces.
   Pages keep their current appearance by setting the CSS variables below
   in shared login/dashboard styles or page-local overrides. */

.modal-overlay,
.modal-backdrop {
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: var(--ui-modal-overlay-padding, 20px);
  background: var(--ui-modal-overlay-bg, rgba(15, 23, 42, 0.45));
  z-index: var(--ui-modal-overlay-z, 100);
}

.modal-overlay {
  display: flex;
}

.modal-overlay[hidden],
.modal-overlay.hidden {
  display: none !important;
}

.modal-backdrop {
  display: none;
}

.modal-backdrop[hidden],
.modal-backdrop.hidden {
  display: none !important;
}

.modal-backdrop.open {
  display: flex;
}

.modal-card {
  width: var(--ui-modal-width, auto);
  max-width: var(--ui-modal-max-width, none);
  max-height: var(--ui-modal-max-height, none);
  overflow: var(--ui-modal-overflow, visible);
  border-radius: var(--ui-modal-radius, 16px);
  background: var(--ui-modal-bg, #ffffff);
  border: var(--ui-modal-border, none);
  box-shadow: var(--ui-modal-shadow, 0 18px 45px rgba(15, 23, 42, 0.2));
  padding: var(--ui-modal-padding, 20px);
  color: var(--ui-modal-text, inherit);
}

.modal-card h3 {
  margin-top: 0;
  margin-bottom: var(--ui-modal-heading-gap, 8px);
}

.modal-card p {
  margin: 0;
  color: var(--ui-modal-copy, inherit);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--ui-modal-header-gap, 10px);
}

.modal-title {
  margin: 0;
  font-size: var(--ui-modal-title-size, 18px);
}

.modal-close {
  border: var(--ui-modal-close-border, 1px solid rgba(255, 255, 255, 0.35));
  background: var(--ui-modal-close-bg, rgba(255, 255, 255, 0.08));
  color: var(--ui-modal-close-text, inherit);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 600;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: var(--ui-modal-actions-margin-top, 16px);
}

.modal-actions button {
  min-width: var(--ui-modal-action-min-width, auto);
  border-radius: var(--ui-modal-action-radius, 999px);
}

.modal-actions .secondary {
  border: var(--ui-modal-secondary-border, 1px solid rgba(203, 213, 245, 1));
  background: var(--ui-modal-secondary-bg, #ffffff);
  color: var(--ui-modal-secondary-text, inherit);
}

.modal-actions .primary {
  border: var(--ui-modal-primary-border, none);
  background: var(--ui-modal-primary-bg, linear-gradient(120deg, #2563eb 0%, #1d4ed8 100%));
  color: var(--ui-modal-primary-text, #ffffff);
}