/**
 * Snout & About Pet Care - Modal Components
 * Version: 1.0.0
 *
 * Unified modal component system with consistent scrolling behavior.
 * This file replaces duplicate modal code in style.css and customers.css.
 *
 * IMPORTANT: This consolidates modal scrolling fixes that were previously
 * duplicated and conflicting. All modals now use a single, tested implementation.
 */

/* ============================================
   BASE MODAL STRUCTURE
   ============================================ */

.modal-content {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  border: none;
  color: var(--color-text-primary);
}

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

.modal-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-neutral);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}

/* Primary Modal Header (Gradient) */
.modal-header-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-text-inverse);
  border-bottom: none;
}

.modal-header-primary .modal-title {
  color: var(--color-text-inverse);
}

.modal-header-primary .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Secondary Modal Header */
.modal-header-secondary {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
  color: var(--color-text-primary);
  border-bottom: none;
}

/* Success Modal Header */
.modal-header-success {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
  border-bottom: none;
}

.modal-header-success .modal-title {
  color: var(--color-text-inverse);
}

.modal-header-success .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Warning Modal Header */
.modal-header-warning {
  background-color: var(--color-warning);
  color: var(--color-text-primary);
  border-bottom: none;
}

/* Error/Danger Modal Header */
.modal-header-danger,
.modal-header-error {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  border-bottom: none;
}

.modal-header-danger .modal-title,
.modal-header-error .modal-title {
  color: var(--color-text-inverse);
}

.modal-header-danger .btn-close,
.modal-header-error .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================
   MODAL TITLE
   ============================================ */

.modal-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

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

.modal-body {
  padding: var(--space-6);
  color: var(--color-text-primary);
}

/* Compact body */
.modal-body-compact {
  padding: var(--space-4);
}

/* Spacious body */
.modal-body-spacious {
  padding: var(--space-8);
}

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

.modal-footer {
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-background);
  border-top: 1px solid var(--color-neutral);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ============================================
   SCROLLABLE MODAL FIX
   Consolidated solution - replaces duplicate code
   ============================================ */

/*
 * Bootstrap's modal-dialog-scrollable class enables scrolling
 * This is the SINGLE SOURCE OF TRUTH for modal scrolling
 */

.modal-dialog-scrollable {
  max-height: calc(100vh - 3.5rem);
  display: flex;
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header and footer stay fixed */
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}

/* Body scrolls */
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/*
 * Additional fix for ALL modal bodies to ensure scrolling works
 * This is a safety net for modals without .modal-dialog-scrollable
 */
.modal .modal-body {
  overflow-y: auto;
}

/*
 * Large and XL modals need explicit max-height
 */
.modal-lg .modal-body,
.modal-xl .modal-body {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

/*
 * Specific modals that need scrolling (legacy support)
 */
#editCustomerModalV2 .modal-body,
#editPetModal .modal-body {
  overflow-y: scroll;
  max-height: 60vh;
}

/* ============================================
   MODAL SIZES
   ============================================ */

.modal-sm .modal-dialog {
  max-width: 400px;
}

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

.modal-lg .modal-dialog {
  max-width: 900px;
}

.modal-xl .modal-dialog {
  max-width: 1140px;
}

.modal-fullscreen .modal-dialog {
  max-width: none;
  margin: 0;
  width: 100%;
  height: 100%;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border-radius: 0;
}

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

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.modal-backdrop.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.modal-backdrop.show {
  opacity: 1;
}

/* ============================================
   CENTERED MODAL
   ============================================ */

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

@media (min-width: 576px) {
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
}

/* ============================================
   MODAL ANIMATIONS
   ============================================ */

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  transform: none;
}

/* ============================================
   MODAL CONTENT VARIANTS
   ============================================ */

/* Confirmation Modal */
.modal-confirm .modal-body {
  text-align: center;
  padding: var(--space-8);
}

.modal-confirm .modal-icon {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-4);
}

.modal-confirm .modal-icon-success {
  color: var(--color-success);
}

.modal-confirm .modal-icon-warning {
  color: var(--color-warning);
}

.modal-confirm .modal-icon-error {
  color: var(--color-error);
}

.modal-confirm .modal-message {
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}

/* Form Modal */
.modal-form .form-group:last-child {
  margin-bottom: 0;
}

/* ============================================
   RESPONSIVE MODAL
   ============================================ */

@media (max-width: 767.98px) {
  /* Full-width modals on mobile */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  /* Larger text for readability */
  .modal-title {
    font-size: var(--text-xl);
  }

  /* Reduce padding on mobile */
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--space-4);
  }

  /* Stack footer buttons vertically on mobile */
  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* Adjust scrollable modal height for mobile */
  .modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 200px);
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Ensure modals are keyboard accessible */
.modal {
  outline: none;
}

.modal-dialog {
  outline: none;
}

/* Focus trap within modal */
.modal.show {
  overflow-x: hidden;
  overflow-y: auto;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .modal-content {
    border: 2px solid var(--color-text-primary);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }

  .modal-backdrop.fade {
    transition: none;
  }
}

/* ============================================
   Z-INDEX MANAGEMENT
   ============================================ */

.modal-backdrop {
  z-index: var(--z-modal-backdrop);
}

.modal {
  z-index: var(--z-modal);
}

/* Nested modals (if needed) */
.modal.show ~ .modal {
  z-index: calc(var(--z-modal) + 10);
}

.modal.show ~ .modal-backdrop {
  z-index: calc(var(--z-modal-backdrop) + 10);
}