/* ==========================================================
   AgencyOS - Shared Modal Components

   Consolidated modal styles from public-shared.css,
   public-booking.css, public-book.css, and
   portal-calendar-modals.css.

   Eliminates ~250 lines of duplication.
   ========================================================== */

/* ========================================
   MODAL BACKDROP/OVERLAY
   ======================================== */

/**
 * Modal backdrop - full-screen overlay
 * Base style for all modal backgrounds
 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal-backdrop);
  animation: fadeIn 0.2s ease-out;
}

/**
 * Modal backdrop with branded gradient background
 * Used for public-facing modals (login, booking)
 * Uses --modal-bg-image custom property for tenant-specific backgrounds
 */
.modal-backdrop--branded {
  background:
    linear-gradient(
      var(--c-brand-overlay),
      var(--c-accent-overlay)
    ),
    var(--modal-bg-image, url('/tenants/demo/images/main-block-background.webp')) center center / cover no-repeat;
}

/* Legacy support - maps to .modal-backdrop */
.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal-backdrop);
  background:
    linear-gradient(
      var(--c-brand-overlay),
      var(--c-accent-overlay)
    ),
    var(--modal-bg-image, url('/tenants/demo/images/main-block-background.webp')) center center / cover no-repeat;
}

/* ========================================
   MODAL DIALOG/WINDOW
   ======================================== */

/**
 * Modal dialog - the actual modal container
 * Base style for all modal windows
 * Modals have subtle branded border for professional appearance
 */
.modal-dialog {
  background: var(--c-white);
  border: 8px solid var(--c-brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
  animation: modalSlideIn 0.3s ease-out;
}

/* Size variants */
.modal-dialog--small {
  max-width: 400px;
}

.modal-dialog--medium {
  max-width: 600px;
}

.modal-dialog--large {
  max-width: 800px;
}

.modal-dialog--xlarge {
  max-width: 1000px;
}

/* Legacy support - maps to .modal-dialog */
.modal-window {
  background: var(--c-white);
  padding: 10px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 320px;
  max-width: 90%;
  text-align: center;
}

/* ========================================
   MODAL HEADER
   ======================================== */

/**
 * Modal header
 * Contains title and close button
 */
.modal-header {
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-header--branded {
  background: linear-gradient(135deg, var(--c-brand), var(--c-accent));
  color: var(--c-white);
  border-bottom: 3px solid var(--c-border);
}

/**
 * Modal title
 */
.modal-title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--c-brand);
}

.modal-header--branded .modal-title {
  color: var(--c-white);
}

/**
 * Modal subtitle/subtext
 */
.modal-subtext {
  margin: 4px 0 0;
  color: var(--c-muted);
  font-size: var(--font-size-sm);
}

.modal-header--branded .modal-subtext {
  color: rgba(255, 255, 255, 0.9);
}

/* ========================================
   MODAL CLOSE BUTTON
   ======================================== */

/**
 * Close button (×)
 * Positioned in top-right of modal header
 */
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--c-gray-500);
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
  flex-shrink: 0;
}

.modal-close:focus {
  outline: none;
}

.modal-close:hover {
  background: var(--c-gray-100);
  color: var(--c-gray-700);
}

.modal-header--branded .modal-close {
  color: var(--c-white);
}

.modal-header--branded .modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-white);
}

/* ========================================
   MODAL BODY
   ======================================== */

/**
 * Modal body
 * Main content area, scrollable if needed
 * Top and bottom padding set to 0 for tighter layout
 */
.modal-body {
  padding: 0 var(--spacing-xl);
  overflow-y: auto;
  flex: 1;
}

.modal-body--compact {
  padding: 0 var(--spacing-lg);
}

.modal-body--spacious {
  padding: 0 var(--spacing-2xl);
}

/* Scrollbar styling for modal body */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: var(--c-gray-100);
  border-radius: var(--radius-sm);
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--c-gray-400);
  border-radius: var(--radius-sm);
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--c-gray-500);
}

/* ========================================
   MODAL FOOTER
   ======================================== */

/**
 * Modal footer
 * Contains action buttons
 */
.modal-footer {
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
  flex-shrink: 0;
}

.modal-footer--centered {
  justify-content: center;
}

.modal-footer--space-between {
  justify-content: space-between;
}

.modal-footer--stacked {
  flex-direction: column;
}

/* Right-aligned button group within footer */
.modal-footer-right {
  display: flex;
  gap: var(--spacing-md);
  margin-left: auto;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/**
 * Tablet and mobile: Full-screen modal treatment
 * Removes borders, uses full viewport dimensions
 * Modal body becomes scrollable while header/footer remain fixed
 */
@media (max-width: 768px) {
  .modal-dialog,
  .modal-dialog--small,
  .modal-dialog--medium,
  .modal-dialog--large,
  .modal-dialog--xlarge {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border: none;
    border-radius: 0;
    margin: 0;
  }

  /* Backdrop styling remains unchanged on mobile - keeps background image, color, and overlay consistent */
  /* .modal-backdrop background intentionally not modified on mobile */

  .modal-header {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .modal-title {
    font-size: var(--font-size-xl);
  }

  .modal-body {
    padding: 0 var(--spacing-lg);
    /* Ensure scrolling works properly in full-screen mode */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    flex-direction: column;
  }

  .modal-footer > *,
  .modal-footer-right > * {
    width: 100%;
  }

  /* Exception: Alert modal buttons keep their natural width */
  .modal-footer--alert > *,
  .modal-footer--alert > .btn,
  .modal-footer--alert > button {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* Stack footer button groups */
  .modal-footer-right {
    flex-direction: column;
    width: 100%;
    margin-left: 0;
  }

  /* Keep login modal at fixed size regardless of screen width */
  .login-main .modal-dialog {
    width: 90% !important;
    height: auto !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    border: 8px solid var(--c-brand) !important;
    border-radius: var(--radius-lg) !important;
    margin: auto !important;
  }

  /* Keep login modal title font size unchanged */
  .login-main .modal-title {
    font-size: var(--font-size-2xl) !important;
  }

  /* Keep login modal header padding unchanged */
  .login-main .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  /* Keep login modal body padding unchanged */
  .login-main .modal-body {
    padding: 0 var(--spacing-xl) !important;
  }

  /* Keep login buttons on same line, full width, evenly spaced */
  .login-main .modal-footer {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  .login-main .modal-footer > * {
    flex: 1 !important;
    max-width: none !important;
  }

  /* Keep MFA modal at fixed size regardless of screen width */
  #mfa-modal .modal-dialog {
    width: 90% !important;
    height: auto !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    border: 8px solid var(--c-brand) !important;
    border-radius: var(--radius-lg) !important;
    margin: auto !important;
  }

  /* Keep MFA modal title font size unchanged */
  #mfa-modal .modal-title {
    font-size: var(--font-size-2xl) !important;
  }

  /* Keep MFA modal header padding unchanged */
  #mfa-modal .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  /* Keep MFA modal body padding unchanged */
  #mfa-modal .modal-body {
    padding: 0 var(--spacing-xl) !important;
  }

  /* Keep MFA buttons on same line, full width, evenly spaced */
  #mfa-modal .modal-footer {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  #mfa-modal .modal-footer > * {
    flex: 1 !important;
    max-width: none !important;
  }

  /* Add extra bottom padding to password reset modals */
  #forgot-password-modal .modal-footer,
  #password-reset-modal .modal-footer {
    padding-bottom: calc(var(--spacing-lg) + 60px) !important;
  }

  /* Keep Password Reset Required modal title size and padding unchanged */
  #password-reset-modal .modal-title {
    font-size: var(--font-size-2xl) !important;
  }

  #password-reset-modal .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  /* Keep Forgot Password modal title size and padding unchanged */
  #forgot-password-modal .modal-title {
    font-size: var(--font-size-2xl) !important;
  }

  #forgot-password-modal .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  /* Keep password reset modal body padding unchanged */
  #forgot-password-modal .modal-body,
  #password-reset-modal .modal-body {
    padding: 0 var(--spacing-xl) !important;
  }

  /* Keep password reset modal buttons on same line, full width, evenly spaced */
  #forgot-password-modal .modal-footer,
  #password-reset-modal .modal-footer {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  #forgot-password-modal .modal-footer > *,
  #password-reset-modal .modal-footer > * {
    flex: 1 !important;
    max-width: none !important;
  }

  /* Keep alert modal at fixed size regardless of screen width */
  .modal-dialog--alert {
    width: 90% !important;
    height: auto !important;
    max-width: 450px !important;
    max-height: 90vh !important;
    border: 8px solid var(--c-brand) !important;
    border-radius: var(--radius-lg) !important;
    margin: auto !important;
  }

  /* Keep delete confirmation modal at fixed size regardless of screen width */
  #deleteModal .modal-dialog {
    width: 90% !important;
    height: auto !important;
    max-width: 400px !important;
    max-height: 90vh !important;
    border: 8px solid var(--c-brand) !important;
    border-radius: var(--radius-lg) !important;
    margin: auto !important;
  }

  #deleteModal .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  #deleteModal .modal-title {
    font-size: var(--font-size-2xl) !important;
    color: var(--c-brand) !important;
  }

  #deleteModal .modal-body {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  #deleteModal .modal-footer {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
    flex-direction: row !important;
    gap: var(--spacing-md) !important;
  }

  #deleteModal .modal-footer > * {
    width: auto !important;
  }

  /* Keep rate limit modals at fixed size and styling unchanged */
  [id^="rate-limit-modal-"] .modal-dialog {
    width: 90% !important;
    height: auto !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    border: 8px solid var(--c-brand) !important;
    border-radius: var(--radius-lg) !important;
    margin: auto !important;
  }

  [id^="rate-limit-modal-"] .modal-title {
    font-size: var(--font-size-2xl) !important;
  }

  [id^="rate-limit-modal-"] .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  [id^="rate-limit-modal-"] .modal-body {
    padding: 0 var(--spacing-xl) !important;
  }

  [id^="rate-limit-modal-"] .modal-footer {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
    flex-direction: row !important;
    justify-content: center !important;
  }

  [id^="rate-limit-modal-"] .modal-footer > * {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

/**
 * Small mobile: Additional refinements for very small screens
 */
@media (max-width: 640px) {
  .modal-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .modal-title {
    font-size: var(--font-size-lg);
  }

  .modal-body {
    padding: 0 var(--spacing-md);
  }

  .modal-footer {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Exception: Alert modal buttons keep their natural width */
  .modal-footer--alert > *,
  .modal-footer--alert > .btn,
  .modal-footer--alert > button {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* Keep login modal at fixed size regardless of screen width */
  .login-main .modal-dialog {
    width: 90% !important;
    height: auto !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    border: 8px solid var(--c-brand) !important;
    border-radius: var(--radius-lg) !important;
    margin: auto !important;
  }

  /* Keep login modal title font size unchanged */
  .login-main .modal-title {
    font-size: var(--font-size-2xl) !important;
  }

  /* Keep login modal header padding unchanged */
  .login-main .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  /* Keep login modal body padding unchanged */
  .login-main .modal-body {
    padding: 0 var(--spacing-xl) !important;
  }

  /* Keep login buttons on same line, full width, evenly spaced */
  .login-main .modal-footer {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  .login-main .modal-footer > * {
    flex: 1 !important;
    max-width: none !important;
  }

  /* Keep MFA modal at fixed size regardless of screen width */
  #mfa-modal .modal-dialog {
    width: 90% !important;
    height: auto !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    border: 8px solid var(--c-brand) !important;
    border-radius: var(--radius-lg) !important;
    margin: auto !important;
  }

  /* Keep MFA modal title font size unchanged */
  #mfa-modal .modal-title {
    font-size: var(--font-size-2xl) !important;
  }

  /* Keep MFA modal header padding unchanged */
  #mfa-modal .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  /* Keep MFA modal body padding unchanged */
  #mfa-modal .modal-body {
    padding: 0 var(--spacing-xl) !important;
  }

  /* Keep MFA buttons on same line, full width, evenly spaced */
  #mfa-modal .modal-footer {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  #mfa-modal .modal-footer > * {
    flex: 1 !important;
    max-width: none !important;
  }

  /* Add extra bottom padding to password reset modals */
  #forgot-password-modal .modal-footer,
  #password-reset-modal .modal-footer {
    padding-bottom: calc(var(--spacing-sm) + 60px) !important;
  }

  /* Keep Password Reset Required modal title size and padding unchanged */
  #password-reset-modal .modal-title {
    font-size: var(--font-size-2xl) !important;
  }

  #password-reset-modal .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  /* Keep Forgot Password modal title size and padding unchanged */
  #forgot-password-modal .modal-title {
    font-size: var(--font-size-2xl) !important;
  }

  #forgot-password-modal .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  /* Keep password reset modal body padding unchanged */
  #forgot-password-modal .modal-body,
  #password-reset-modal .modal-body {
    padding: 0 var(--spacing-xl) !important;
  }

  /* Keep password reset modal buttons on same line, full width, evenly spaced */
  #forgot-password-modal .modal-footer,
  #password-reset-modal .modal-footer {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  #forgot-password-modal .modal-footer > *,
  #password-reset-modal .modal-footer > * {
    flex: 1 !important;
    max-width: none !important;
  }

  /* Keep alert modal at fixed size regardless of screen width */
  .modal-dialog--alert {
    width: 90% !important;
    height: auto !important;
    max-width: 450px !important;
    max-height: 90vh !important;
    border: 8px solid var(--c-brand) !important;
    border-radius: var(--radius-lg) !important;
    margin: auto !important;
  }

  /* Keep delete confirmation modal at fixed size regardless of screen width */
  #deleteModal .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  #deleteModal .modal-title {
    font-size: var(--font-size-2xl) !important;
    color: var(--c-brand) !important;
  }

  #deleteModal .modal-body {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  #deleteModal .modal-footer {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
    flex-direction: row !important;
    gap: var(--spacing-md) !important;
  }

  #deleteModal .modal-footer > * {
    width: auto !important;
  }

  /* Keep button styles unchanged */
  #deleteModal .btn {
    padding: 10px 18px !important;
    min-width: 120px !important;
    font-size: 0.95rem !important;
  }

  /* Keep rate limit modals at fixed size and styling unchanged */
  [id^="rate-limit-modal-"] .modal-dialog {
    width: 90% !important;
    height: auto !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    border: 8px solid var(--c-brand) !important;
    border-radius: var(--radius-lg) !important;
    margin: auto !important;
  }

  [id^="rate-limit-modal-"] .modal-title {
    font-size: var(--font-size-2xl) !important;
  }

  [id^="rate-limit-modal-"] .modal-header {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
  }

  [id^="rate-limit-modal-"] .modal-body {
    padding: 0 var(--spacing-xl) !important;
  }

  [id^="rate-limit-modal-"] .modal-footer {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
    flex-direction: row !important;
    justify-content: center !important;
  }

  [id^="rate-limit-modal-"] .modal-footer > * {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

/* ========================================
   RATE LIMIT MODAL STYLING
   ======================================== */

.rate-limit-content {
  text-align: center;
  padding: 1rem 0;
}

.rate-limit-countdown {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 1rem;
  color: var(--c-brand);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/**
 * Hide modal (use with JavaScript toggling)
 */
.modal-hidden {
  display: none;
}

/**
 * Show modal
 */
.modal-visible {
  display: flex;
}