/**
 * Modal Component - PPL Questions v2
 *
 * Unified modal system that replaces all existing modal implementations:
 * - .modal (profile, practice)
 * - .quiz-dialog (quiz)
 * - .mock-popup (mock exam)
 * - .break-prompt (mock exam)
 * - .user-modal (admin)
 *
 * Features:
 * - Fullscreen on mobile (< 768px)
 * - Multiple size variants (sm, md, lg, xl)
 * - Header variants (default, danger)
 * - Smooth animations
 * - Accessible (focus trap ready, escape to close)
 *
 * Usage:
 *   <div class="modal-backdrop" id="my-modal">
 *       <div class="modal modal--md">
 *           <div class="modal__header">
 *               <h2 class="modal__title">Title</h2>
 *               <button class="modal__close">&times;</button>
 *           </div>
 *           <div class="modal__body">Content</div>
 *           <div class="modal__footer">
 *               <button class="btn btn--secondary">Cancel</button>
 *               <button class="btn btn--primary">Confirm</button>
 *           </div>
 *       </div>
 *   </div>
 */

/* =========================================================================
   BODY STATE WHEN MODAL IS OPEN
   Prevents scrolling behind the modal
   ========================================================================= */

body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* =========================================================================
   MODAL BACKDROP
   The dark overlay behind the modal
   ========================================================================= */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-backdrop-color, rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop, 11000);
    padding: var(--spacing-lg, 1.5rem);

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Smooth transition */
    transition: opacity var(--transition-normal, 300ms ease),
                visibility var(--transition-normal, 300ms ease);
}

/* Active state - show the modal */
.modal-backdrop.active,
.modal-backdrop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Closing animation */
.modal-backdrop.closing {
    opacity: 0;
}

/* =========================================================================
   MODAL CONTAINER
   The white box containing the content
   ========================================================================= */

.modal {
    position: relative;
    background: var(--color-bg-card, #ffffff);
    border-radius: var(--radius-xl, 12px);
    box-shadow: var(--shadow-2xl, 0 20px 60px rgba(0, 0, 0, 0.3));
    width: 100%;
    max-width: var(--modal-max-width-md, 500px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: var(--z-modal, 11500);

    /* Entry animation */
    transform: scale(0.9) translateY(-20px);
    opacity: 0;
    transition: transform var(--transition-normal, 300ms ease),
                opacity var(--transition-normal, 300ms ease);
}

/* Show modal animation */
.modal-backdrop.active .modal,
.modal-backdrop.show .modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Closing animation */
.modal-backdrop.closing .modal {
    transform: scale(0.9) translateY(-20px);
    opacity: 0;
}

/* =========================================================================
   MODAL SIZE VARIANTS
   ========================================================================= */

.modal--sm {
    max-width: var(--modal-max-width-sm, 400px);
}

.modal--md {
    max-width: var(--modal-max-width-md, 500px);
}

.modal--lg {
    max-width: var(--modal-max-width-lg, 700px);
}

.modal--xl {
    max-width: var(--modal-max-width-xl, 900px);
}

.modal--full {
    max-width: 95vw;
    max-height: 95vh;
}

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

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-lg, 1.5rem) var(--spacing-xl, 2rem);
    border-bottom: 1px solid var(--color-border-light, #e9ecef);
    flex-shrink: 0;
    gap: var(--spacing-md, 1rem);
    box-sizing: border-box;
}

.modal__title {
    margin: 0;
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #212529);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    line-height: var(--line-height-tight, 1.25);
}

.modal__title svg,
.modal__title .icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Header variants */
.modal__header--primary {
    background: var(--color-primary, #368BC1);
    color: var(--color-white, #ffffff);
    border-bottom: none;
    border-radius: var(--radius-xl, 12px) var(--radius-xl, 12px) 0 0;
}

.modal__header--primary .modal__title {
    color: var(--color-white, #ffffff);
}

.modal__header--primary .modal__close {
    color: var(--color-white, #ffffff);
}

.modal__header--primary .modal__close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal__header--danger {
    background: var(--color-danger, #dc3545);
    color: var(--color-white, #ffffff);
    border-bottom: none;
    border-radius: var(--radius-xl, 12px) var(--radius-xl, 12px) 0 0;
}

.modal__header--danger .modal__title {
    color: var(--color-white, #ffffff);
}

.modal__header--danger .modal__close {
    color: var(--color-white, #ffffff);
}

.modal__header--danger .modal__close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal__header--success {
    background: var(--color-success, #28a745);
    color: var(--color-white, #ffffff);
    border-bottom: none;
    border-radius: var(--radius-xl, 12px) var(--radius-xl, 12px) 0 0;
}

.modal__header--success .modal__title {
    color: var(--color-white, #ffffff);
}

.modal__header--warning {
    background: var(--color-warning, #ffc107);
    color: var(--color-warning-dark, #856404);
    border-bottom: none;
    border-radius: var(--radius-xl, 12px) var(--radius-xl, 12px) 0 0;
}

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

.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md, 6px);
    color: var(--color-text-secondary, #6c757d);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease);
}

.modal__close:hover {
    background: var(--color-gray-100, #f1f3f5);
    color: var(--color-text-primary, #212529);
}

.modal__close:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary, #368BC1);
}

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

.modal__body {
    flex: 1 1 auto;
    width: 100%;
    padding: var(--spacing-xl, 2rem);
    overflow-y: auto;
    min-height: 0; /* Required for flex overflow */
    color: var(--color-text-secondary, #495057);
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-normal, 1.6);
    box-sizing: border-box;
}

/* Scrollbar styling */
.modal__body::-webkit-scrollbar {
    width: 8px;
}

.modal__body::-webkit-scrollbar-track {
    background: var(--color-gray-100, #f1f3f5);
    border-radius: 4px;
}

.modal__body::-webkit-scrollbar-thumb {
    background: var(--color-gray-400, #ced4da);
    border-radius: 4px;
}

.modal__body::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500, #adb5bd);
}

/* Body content helpers */
.modal__body p {
    margin: 0 0 var(--spacing-md, 1rem) 0;
}

.modal__body p:last-child {
    margin-bottom: 0;
}

.modal__body strong {
    color: var(--color-text-primary, #212529);
    font-weight: var(--font-weight-semibold, 600);
}

/* Centered content variant */
.modal__body--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

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

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-lg, 1.5rem) var(--spacing-xl, 2rem);
    border-top: 1px solid var(--color-border-light, #e9ecef);
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Footer buttons - consistent sizing */
.modal__footer .btn {
    min-width: 120px;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
}

/* Footer variants */
.modal__footer--centered {
    justify-content: center;
}

.modal__footer--spread {
    justify-content: space-between;
}

.modal__footer--stacked {
    flex-direction: column;
}

.modal__footer--stacked .btn {
    width: 100%;
}

/* Footer actions wrapper - for grouping buttons in center */
.modal__footer-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

/* =========================================================================
   MODAL CONTENT SECTIONS
   For modals with multiple content areas
   ========================================================================= */

.modal__section {
    margin-bottom: var(--spacing-lg, 1.5rem);
    padding-bottom: var(--spacing-lg, 1.5rem);
    border-bottom: 1px solid var(--color-border-light, #e9ecef);
}

.modal__section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.modal__section-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-primary, #368BC1);
    margin: 0 0 var(--spacing-md, 1rem) 0;
}

/* =========================================================================
   CONFIRMATION MODAL STYLES
   Special styling for confirm/cancel dialogs
   ========================================================================= */

.modal--confirm .modal__body {
    text-align: center;
    padding: var(--spacing-xl, 2rem) var(--spacing-xl, 2rem) var(--spacing-lg, 1.5rem);
}

.modal--confirm .modal__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-lg, 1.5rem);
    border-radius: var(--radius-circle, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal--confirm .modal__icon--warning {
    background: var(--color-warning-light, #fff3cd);
    color: var(--color-warning, #ffc107);
}

.modal--confirm .modal__icon--danger {
    background: var(--color-danger-light, #f8d7da);
    color: var(--color-danger, #dc3545);
}

.modal--confirm .modal__icon--success {
    background: var(--color-success-light, #d4edda);
    color: var(--color-success, #28a745);
}

.modal--confirm .modal__icon--info {
    background: var(--color-primary-light, #e8f4fc);
    color: var(--color-primary, #368BC1);
}

.modal--confirm .modal__icon svg {
    width: 32px;
    height: 32px;
}

.modal--confirm .modal__message {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-secondary, #495057);
    margin: 0;
}

.modal--confirm .modal__title svg {
    color: var(--color-danger, #dc3545);
}

.modal--confirm .modal__footer {
    justify-content: flex-end;
}

/* =========================================================================
   ALERT/INFO MODAL
   For displaying information with a single OK button
   ========================================================================= */

.modal--alert .modal__footer {
    justify-content: center;
}

.modal--alert .modal__footer .btn {
    min-width: 120px;
}

/* =========================================================================
   LOADING STATE
   When modal content is loading
   ========================================================================= */

.modal__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl, 3rem);
    gap: var(--spacing-md, 1rem);
}

.modal__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-gray-200, #e9ecef);
    border-top-color: var(--color-primary, #368BC1);
    border-radius: var(--radius-circle, 50%);
    animation: modal-spin 1s linear infinite;
}

@keyframes modal-spin {
    to {
        transform: rotate(360deg);
    }
}

.modal__loading-text {
    color: var(--color-text-secondary, #6c757d);
    font-size: var(--font-size-base, 1rem);
}

/* =========================================================================
   MOBILE STYLES - FULLSCREEN
   On mobile devices (< 768px), modals become fullscreen
   ========================================================================= */

@media (max-width: 768px) {
    .modal-backdrop {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        transform: translateY(100%);
        opacity: 1;
    }

    .modal-backdrop.active .modal,
    .modal-backdrop.show .modal {
        transform: translateY(0);
    }

    .modal-backdrop.closing .modal {
        transform: translateY(100%);
    }

    /* All size variants become fullscreen */
    .modal--sm,
    .modal--md,
    .modal--lg,
    .modal--xl {
        max-width: 100%;
    }

    /* Header adjustments */
    .modal__header {
        padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
        position: sticky;
        top: 0;
        background: var(--color-bg-card, #ffffff);
        z-index: 10;
    }

    .modal__header--primary,
    .modal__header--danger,
    .modal__header--success,
    .modal__header--warning {
        border-radius: 0;
    }

    .modal__title {
        font-size: var(--font-size-xl, 1.25rem);
    }

    .modal__close {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }

    /* Body adjustments */
    .modal__body {
        padding: var(--spacing-lg, 1.5rem);
        flex: 1;
        -webkit-overflow-scrolling: touch;
    }

    /* Footer adjustments */
    .modal__footer {
        padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
        position: sticky;
        bottom: 0;
        background: var(--color-bg-card, #ffffff);
        z-index: 10;
        flex-wrap: wrap;
    }

    /* Buttons in footer */
    .modal__footer .btn {
        flex: 1;
        min-width: 0;
        min-height: 48px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .modal__header {
        padding: var(--spacing-md, 1rem);
    }

    .modal__body {
        padding: var(--spacing-md, 1rem);
    }

    .modal__footer {
        padding: var(--spacing-md, 1rem);
        gap: var(--spacing-sm, 0.5rem);
    }

    .modal__title {
        font-size: var(--font-size-lg, 1.125rem);
    }

    /* Stack buttons on very small screens */
    .modal__footer {
        flex-direction: column;
    }

    .modal__footer .btn {
        width: 100%;
    }
}

/* =========================================================================
   ANIMATION VARIANTS
   ========================================================================= */

/* Fade only (no scale) */
.modal--fade .modal {
    transform: none;
    opacity: 0;
}

.modal--fade.active .modal,
.modal--fade.show .modal {
    opacity: 1;
}

/* Slide from bottom */
.modal--slide-up .modal {
    transform: translateY(50px);
    opacity: 0;
}

.modal--slide-up.active .modal,
.modal--slide-up.show .modal {
    transform: translateY(0);
    opacity: 1;
}

/* Slide from right */
.modal--slide-right .modal {
    transform: translateX(50px);
    opacity: 0;
}

.modal--slide-right.active .modal,
.modal--slide-right.show .modal {
    transform: translateX(0);
    opacity: 1;
}

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

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .modal {
        transition: opacity var(--transition-fast, 150ms ease);
    }

    .modal {
        transform: none !important;
    }

    .modal__spinner {
        animation: none;
    }
}

/* Focus visible styles */
.modal__close:focus-visible {
    outline: 2px solid var(--color-primary, #368BC1);
    outline-offset: 2px;
}

/* =========================================================================
   LEGACY CLASS SUPPORT
   Support for existing modal structure:
   <div class="modal">
       <div class="modal-overlay"></div>
       <div class="modal-content">...</div>
   </div>
   ========================================================================= */

/* Legacy wrapper - hidden by default, becomes visible with .active
   This pattern is for: body > div.modal > .modal-overlay + .modal-content
   NOT for the NOTAM pattern: body > .modal-overlay > .modal */
div.modal:not(.modal--notam):not(.modal--confirm) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal-backdrop, 11000);
    display: none;
    align-items: center;
    justify-content: center;
}

div.modal:not(.modal--notam):not(.modal--confirm).active {
    display: flex;
}

/* Legacy overlay - backdrop inside the .modal wrapper */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-backdrop-color, rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
    /* Hidden by default - JS sets display:flex to show */
    display: none;
}

/* =========================================================================
   MODAL OVERLAY PATTERNS
   Supports two patterns:
   1. NOTAM: body > .modal-overlay > .modal (appended via JS)
   2. Admin: .modal-overlay > .modal (inline in HTML, toggled via display)
   ========================================================================= */

/* When .modal-overlay is appended directly to body (NOTAM pattern)
   JS must set display:flex, then add .show class for animation
   z-index must be higher than .top header (10000) */
body > .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999 !important;
    /* No display here - JS sets display:flex when opening */
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg, 1.5rem);
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 300ms ease,
                backdrop-filter 300ms ease,
                -webkit-backdrop-filter 300ms ease;
}

body > .modal-overlay.show {
    background: var(--modal-backdrop-color, rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
}

/* Admin/Profile pattern: .modal-overlay contains .modal, uses display:flex + .show class
   JS sets display:flex, then adds .show class for opacity animation
   z-index must be higher than .top header (10000) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999 !important;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg, 1.5rem);
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 300ms ease,
                backdrop-filter 300ms ease,
                -webkit-backdrop-filter 300ms ease;
}

.modal-overlay.show {
    background: var(--modal-backdrop-color, rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 4px));
}

/* The .modal inside .modal-overlay (all patterns)
   Base styles with animation - hidden state
   Using high specificity to override styles.css .modal animation */
.modal-overlay > .modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: var(--color-bg-card, #ffffff) !important;
    border-radius: var(--radius-xl, 12px) !important;
    box-shadow: var(--shadow-2xl, 0 20px 60px rgba(0, 0, 0, 0.3)) !important;
    width: var(--modal-width, 90%);
    max-width: var(--modal-max-width, 600px);
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1 !important;
    /* Animation: start hidden and scaled down (scale only, no translateY) */
    transform: scale(0.9) !important;
    opacity: 0 !important;
    /* Reset any keyframe animations from styles.css and use transitions only */
    animation: none !important;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 300ms ease !important;
}

/* Show state - animate in */
.modal-overlay.show > .modal {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* Legacy modal content - the actual modal box */
.modal-content {
    position: relative;
    background: var(--color-bg-card, #ffffff);
    border-radius: var(--radius-xl, 12px);
    box-shadow: var(--shadow-2xl, 0 20px 60px rgba(0, 0, 0, 0.3));
    width: 90%;
    max-width: var(--modal-max-width-md, 500px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
    transform: scale(0.9);
    opacity: 0;
    transition: transform var(--transition-normal, 300ms ease),
                opacity var(--transition-normal, 300ms ease);
}

div.modal.active .modal-content,
.modal-overlay.show .modal-content {
    transform: scale(1);
    opacity: 1;
}

/* Legacy modal header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg, 1.5rem) var(--spacing-xl, 2rem);
    border-bottom: 1px solid var(--color-border-light, #e9ecef);
    flex-shrink: 0;
    gap: var(--spacing-md, 1rem);
}

.modal-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #212529);
    display: flex;
    align-items: center;
}

/* Danger header variant */
.modal-header.danger {
    background: var(--color-danger, #dc3545);
    color: var(--color-white, #ffffff);
    border-bottom: none;
    border-radius: var(--radius-xl, 12px) var(--radius-xl, 12px) 0 0;
}

.modal-header.danger h2 {
    color: var(--color-white, #ffffff);
}

.modal-header.danger .modal-close {
    color: var(--color-white, #ffffff);
}

.modal-header.danger .modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Legacy modal close button */
.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md, 6px);
    color: var(--color-text-secondary, #6c757d);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease);
}

.modal-close:hover {
    background: var(--color-gray-100, #f1f3f5);
    color: var(--color-text-primary, #212529);
}

/* Legacy modal body */
.modal-body {
    flex: 1 1 auto;
    padding: var(--spacing-xl, 2rem);
    overflow-y: auto;
    min-height: 0;
    color: var(--color-text-secondary, #495057);
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-normal, 1.6);
}

/* Legacy modal footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-lg, 1.5rem) var(--spacing-xl, 2rem);
    border-top: 1px solid var(--color-border-light, #e9ecef);
    flex-shrink: 0;
}

/* =========================================================================
   LEGACY MOBILE FULLSCREEN (< 768px)
   ========================================================================= */
@media (max-width: 768px) {
    /* All modal overlays - fullscreen on mobile */
    body > .modal-overlay,
    .modal-overlay.show,
    .modal-overlay:has(> .modal) {
        z-index: var(--z-modal-backdrop, 11000) !important;
        padding: 0;
    }

    /* All modal content - fullscreen on mobile, no animation */
    body > .modal-overlay > .modal,
    body > .modal-overlay.show > .modal,
    .modal-overlay.show .modal-content,
    .modal-overlay.show > .modal,
    .modal-overlay:has(> .modal).show > .modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: var(--z-modal, 11500) !important;
    }

    div.modal.active .modal-content {
        transform: none;
    }

    /* Legacy and BEM header styles */
    .modal-overlay.show .modal-header,
    .modal-overlay.show .modal__header,
    .modal-header {
        padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
        position: sticky;
        top: 0;
        background: var(--color-bg-card, #ffffff);
        z-index: 10;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .modal-header.danger {
        border-radius: 0;
    }

    .modal-header h2,
    .modal-header-title h2,
    .modal__title {
        font-size: var(--font-size-lg, 1.125rem);
        margin: 0;
    }

    .modal-header-title {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .modal-header-title svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .modal-close,
    .modal__close {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        font-size: 1.5rem;
        color: #495057;
    }

    .modal-overlay.show .modal-body,
    .modal-overlay.show .modal__body,
    .modal-body {
        padding: var(--spacing-lg, 1.5rem);
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-overlay.show .modal-footer,
    .modal-overlay.show .modal__footer,
    .modal-footer {
        padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
        position: sticky;
        bottom: 0;
        background: var(--color-bg-card, #ffffff);
        z-index: 10;
        flex-wrap: wrap;
        flex-shrink: 0;
        border-top: 1px solid #e9ecef;
    }

    .modal-footer .btn {
        flex: 1;
        min-width: 0;
        min-height: 48px;
    }
}

/* Very small screens - stack footer buttons */
@media (max-width: 480px) {
    .modal-header {
        padding: var(--spacing-md, 1rem);
    }

    .modal-body {
        padding: var(--spacing-md, 1rem);
    }

    .modal-footer {
        padding: var(--spacing-md, 1rem);
        gap: var(--spacing-sm, 0.5rem);
        flex-direction: column;
    }

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

    .modal-header h2 {
        font-size: var(--font-size-lg, 1.125rem);
    }
}

/* ============================================
   DARK MODE STYLES
   ============================================ */

/* Forced Dark Mode */

/* Modal Backdrop */
html.dark-mode .modal-backdrop {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Modal Container */
html.dark-mode .modal,
html.dark-mode .modal-overlay > .modal,
html.dark-mode .modal-content {
    background: #1a1d23 !important;
    border: 1px solid #363c47 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Modal Header */
html.dark-mode .modal__header,
html.dark-mode .modal-header {
    background: #22262e !important;
    border-bottom: 1px solid #363c47 !important;
}

html.dark-mode .modal__title,
html.dark-mode .modal-header h2 {
    color: #f3f4f6 !important;
}

/* Header Variants - keep colored headers as-is */
html.dark-mode .modal__header--primary,
html.dark-mode .modal__header--danger,
html.dark-mode .modal__header--success,
html.dark-mode .modal__header--warning,
html.dark-mode .modal-header.danger {
    border-bottom: none !important;
}

/* Modal Close Button */
html.dark-mode .modal__close,
html.dark-mode .modal-close {
    color: #9ca3af !important;
    background: transparent !important;
}

html.dark-mode .modal__close:hover,
html.dark-mode .modal-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f3f4f6 !important;
}

/* Modal Body */
html.dark-mode .modal__body,
html.dark-mode .modal-body {
    background: #1a1d23 !important;
    color: #d1d5db !important;
}

html.dark-mode .modal__body strong,
html.dark-mode .modal-body strong {
    color: #f3f4f6 !important;
}

html.dark-mode .modal__body p,
html.dark-mode .modal-body p {
    color: #d1d5db !important;
}

/* Modal Body Scrollbar */
html.dark-mode .modal__body::-webkit-scrollbar-track,
html.dark-mode .modal-body::-webkit-scrollbar-track {
    background: #22262e !important;
}

html.dark-mode .modal__body::-webkit-scrollbar-thumb,
html.dark-mode .modal-body::-webkit-scrollbar-thumb {
    background: #4b5563 !important;
}

html.dark-mode .modal__body::-webkit-scrollbar-thumb:hover,
html.dark-mode .modal-body::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
}

/* Modal Footer */
html.dark-mode .modal__footer,
html.dark-mode .modal-footer {
    background: #22262e !important;
    border-top: 1px solid #363c47 !important;
}

/* Modal Section */
html.dark-mode .modal__section {
    border-bottom-color: #363c47 !important;
}

html.dark-mode .modal__section-title {
    color: #4a9ed4 !important;
}

/* Confirmation Modal Icons */
html.dark-mode .modal--confirm .modal__icon--warning {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fcd34d !important;
}

html.dark-mode .modal--confirm .modal__icon--danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

html.dark-mode .modal--confirm .modal__icon--success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}

html.dark-mode .modal--confirm .modal__icon--info {
    background: rgba(74, 158, 212, 0.15) !important;
    color: #4a9ed4 !important;
}

html.dark-mode .modal--confirm .modal__message {
    color: #d1d5db !important;
}

/* Loading State */
html.dark-mode .modal__loading {
    background: #1a1d23 !important;
}

html.dark-mode .modal__spinner {
    border-color: #363c47 !important;
    border-top-color: #4a9ed4 !important;
}

html.dark-mode .modal__loading-text {
    color: #9ca3af !important;
}

/* Mobile Header/Footer Backgrounds */
@media (max-width: 768px) {
    html.dark-mode .modal__header,
    html.dark-mode .modal-header {
        background: #1a1d23 !important;
    }

    html.dark-mode .modal__footer,
    html.dark-mode .modal-footer {
        background: #1a1d23 !important;
    }

    html.dark-mode .modal-close,
    html.dark-mode .modal__close {
        background: #22262e !important;
        border: 1px solid #363c47 !important;
        color: #d1d5db !important;
    }

    html.dark-mode .modal-close:hover,
    html.dark-mode .modal__close:hover {
        background: #2a2f38 !important;
        color: #f3f4f6 !important;
    }
}

/* Legacy Modal Overlay */
html.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

html.dark-mode .modal-overlay.show {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* ============================================
   AUTO DARK MODE (System Preference)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Modal Backdrop */
    html.dark-mode-auto .modal-backdrop {
        background: rgba(0, 0, 0, 0.8);
    }

    /* Modal Container */
    html.dark-mode-auto .modal,
    html.dark-mode-auto .modal-overlay > .modal,
    html.dark-mode-auto .modal-content {
        background: #1a1d23;
        border: 1px solid #363c47;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    }

    /* Modal Header */
    html.dark-mode-auto .modal__header,
    html.dark-mode-auto .modal-header {
        background: #22262e;
        border-bottom: 1px solid #363c47;
    }

    html.dark-mode-auto .modal__title,
    html.dark-mode-auto .modal-header h2 {
        color: #f3f4f6;
    }

    /* Modal Close Button */
    html.dark-mode-auto .modal__close,
    html.dark-mode-auto .modal-close {
        color: #9ca3af;
        background: transparent;
    }

    html.dark-mode-auto .modal__close:hover,
    html.dark-mode-auto .modal-close:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #f3f4f6;
    }

    /* Modal Body */
    html.dark-mode-auto .modal__body,
    html.dark-mode-auto .modal-body {
        background: #1a1d23;
        color: #d1d5db;
    }

    html.dark-mode-auto .modal__body strong,
    html.dark-mode-auto .modal-body strong {
        color: #f3f4f6;
    }

    html.dark-mode-auto .modal__body p,
    html.dark-mode-auto .modal-body p {
        color: #d1d5db;
    }

    /* Modal Body Scrollbar */
    html.dark-mode-auto .modal__body::-webkit-scrollbar-track,
    html.dark-mode-auto .modal-body::-webkit-scrollbar-track {
        background: #22262e;
    }

    html.dark-mode-auto .modal__body::-webkit-scrollbar-thumb,
    html.dark-mode-auto .modal-body::-webkit-scrollbar-thumb {
        background: #4b5563;
    }

    html.dark-mode-auto .modal__body::-webkit-scrollbar-thumb:hover,
    html.dark-mode-auto .modal-body::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
    }

    /* Modal Footer */
    html.dark-mode-auto .modal__footer,
    html.dark-mode-auto .modal-footer {
        background: #22262e;
        border-top: 1px solid #363c47;
    }

    /* Modal Section */
    html.dark-mode-auto .modal__section {
        border-bottom-color: #363c47;
    }

    html.dark-mode-auto .modal__section-title {
        color: #4a9ed4;
    }

    /* Confirmation Modal Icons */
    html.dark-mode-auto .modal--confirm .modal__icon--warning {
        background: rgba(251, 191, 36, 0.15);
        color: #fcd34d;
    }

    html.dark-mode-auto .modal--confirm .modal__icon--danger {
        background: rgba(239, 68, 68, 0.15);
        color: #f87171;
    }

    html.dark-mode-auto .modal--confirm .modal__icon--success {
        background: rgba(34, 197, 94, 0.15);
        color: #4ade80;
    }

    html.dark-mode-auto .modal--confirm .modal__icon--info {
        background: rgba(74, 158, 212, 0.15);
        color: #4a9ed4;
    }

    html.dark-mode-auto .modal--confirm .modal__message {
        color: #d1d5db;
    }

    /* Loading State */
    html.dark-mode-auto .modal__loading {
        background: #1a1d23;
    }

    html.dark-mode-auto .modal__spinner {
        border-color: #363c47;
        border-top-color: #4a9ed4;
    }

    html.dark-mode-auto .modal__loading-text {
        color: #9ca3af;
    }

    /* Mobile Header/Footer Backgrounds */
    @media (max-width: 768px) {
        html.dark-mode-auto .modal__header,
        html.dark-mode-auto .modal-header {
            background: #1a1d23;
        }

        html.dark-mode-auto .modal__footer,
        html.dark-mode-auto .modal-footer {
            background: #1a1d23;
        }

        html.dark-mode-auto .modal-close,
        html.dark-mode-auto .modal__close {
            background: #22262e;
            border: 1px solid #363c47;
            color: #d1d5db;
        }

        html.dark-mode-auto .modal-close:hover,
        html.dark-mode-auto .modal__close:hover {
            background: #2a2f38;
            color: #f3f4f6;
        }
    }

    /* Legacy Modal Overlay */
    html.dark-mode-auto .modal-overlay {
        background: rgba(0, 0, 0, 0.8);
    }

    html.dark-mode-auto .modal-overlay.show {
        background: rgba(0, 0, 0, 0.8);
    }
}