/**
 * Modal Mobile Fullscreen Styles
 *
 * Ensures ALL modals are fullscreen on mobile devices (< 768px)
 * This file overrides various modal implementations to be consistent
 *
 * Include this file AFTER all other CSS files to ensure overrides work
 */

/* ============================================================================
   MOBILE FULLSCREEN MODALS (< 768px)
   All modals should be fullscreen on mobile devices
   ============================================================================ */

@media (max-width: 768px) {

    /* ==========================================================================
       GENERIC MODAL OVERLAYS
       ========================================================================== */

    .modal-overlay,
    .modal,
    .user-modal-overlay,
    .quiz-dialog-backdrop,
    .annex-modal-overlay,
    .mock-popup-overlay,
    .break-prompt-overlay,
    .mock-leave-warning-backdrop,
    .feedback-modal-backdrop {
        padding: 0 !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    /* ==========================================================================
       GENERIC MODAL CONTAINERS
       ========================================================================== */

    .modal-content,
    .user-modal,
    .user-modal-content,
    .quiz-dialog,
    .annex-modal,
    .mock-popup,
    .break-prompt,
    .mock-leave-warning,
    .feedback-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;
        min-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ==========================================================================
       PROFILE PAGE MODALS
       ========================================================================== */

    /* Profile modal (delete account, etc) */
    .profile-container .modal.active .modal-content,
    #delete-modal .modal-content {
        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;
        display: flex !important;
        flex-direction: column !important;
    }

    .profile-container .modal-header,
    #delete-modal .modal-header {
        flex-shrink: 0;
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }

    .profile-container .modal-body,
    #delete-modal .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
    }

    .profile-container .modal-footer,
    #delete-modal .modal-footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid #dee2e6;
    }

    /* ==========================================================================
       PRACTICE PAGE MODALS
       ========================================================================== */

    /* Practice progress reset modal */
    .practice-app-wrapper .modal-overlay.show .modal-content,
    #progress-reset-modal .modal-content {
        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;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    /* Annex PDF modal */
    .annex-modal-overlay .annex-modal {
        border-radius: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .annex-modal-header {
        flex-shrink: 0;
    }

    .annex-modal-body {
        flex: 1 1 auto;
        height: calc(100% - 80px) !important;
    }

    /* ==========================================================================
       QUIZ PAGE MODALS
       ========================================================================== */

    /* Quiz confirmation dialog */
    .quiz-dialog-backdrop .quiz-dialog {
        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;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .quiz-dialog__header {
        flex-shrink: 0;
        padding: 1.5rem !important;
    }

    .quiz-dialog__body {
        flex: 1 1 auto;
        overflow-y: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem !important;
    }

    .quiz-dialog__footer {
        flex-shrink: 0;
        padding: 1.5rem !important;
        flex-direction: row !important;
    }

    .quiz-dialog__footer .btn {
        flex: 1;
        min-width: 0 !important;
    }

    /* ==========================================================================
       MOCK EXAM MODALS
       ========================================================================== */

    /* Mock popup (attention popup, subject selector) */
    .mock-popup-overlay .mock-popup,
    .mock-popup {
        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;
        min-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Break prompt between subjects */
    .break-prompt-overlay .break-prompt {
        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;
    }

    /* Leave exam warning */
    .mock-leave-warning-backdrop .mock-leave-warning {
        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;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    /* ==========================================================================
       USERS PAGE MODALS (Admin)
       ========================================================================== */

    /* User modals are already handled in users-v2.css at 1024px breakpoint */
    /* Adding explicit 768px styles for consistency */

    .user-modal-overlay .user-modal,
    .user-modal-overlay .user-modal-content,
    #view-user-modal .user-modal-content,
    #edit-user-modal .user-modal-content,
    #subscription-modal .user-modal-content,
    #delete-user-modal .user-modal-content,
    #reset-password-modal .user-modal-content,
    #quizzes-modal .user-modal,
    #mock-exams-modal .user-modal,
    #mock-exam-details-modal .user-modal-content {
        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;
    }

    /* ==========================================================================
       FEEDBACK MODAL
       ========================================================================== */

    .feedback-modal-backdrop .feedback-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;
        display: flex !important;
        flex-direction: column !important;
    }

    .feedback-modal__header {
        flex-shrink: 0;
    }

    .feedback-modal__body {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .feedback-modal__footer {
        flex-shrink: 0;
    }

    /* ==========================================================================
       SAVED QUESTIONS PAGE MODALS
       ========================================================================== */

    /* Any modals on saved questions page */
    .saved-questions-page .modal-content {
        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;
    }

    /* ==========================================================================
       MODAL HEADER/BODY/FOOTER COMMON STYLES
       ========================================================================== */

    /* Headers - sticky at top */
    .modal-header,
    .user-modal-header,
    .quiz-dialog__header,
    .mock-popup__header,
    .break-prompt__header,
    .feedback-modal__header {
        flex-shrink: 0;
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        border-bottom: 1px solid #dee2e6;
    }

    /* Bodies - scrollable */
    .modal-body,
    .user-modal-body,
    .quiz-dialog__body,
    .mock-popup__content,
    .break-prompt__content,
    .feedback-modal__body {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    /* Footers - sticky at bottom */
    .modal-footer,
    .user-modal-footer,
    .quiz-dialog__footer,
    .mock-popup__footer,
    .break-prompt__footer,
    .feedback-modal__footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 10;
        border-top: 1px solid #dee2e6;
    }

    /* ==========================================================================
       BUTTON TOUCH TARGETS
       ========================================================================== */

    /* Ensure all modal buttons have proper touch targets */
    .modal-footer .btn,
    .modal-actions .btn,
    .user-modal-footer .btn,
    .quiz-dialog__footer .btn,
    .mock-popup__footer .btn,
    .break-prompt__footer .btn,
    .feedback-modal__footer .btn {
        min-height: 48px;
        padding: 0.875rem 1.5rem;
    }

    /* Close buttons */
    .modal-close,
    .user-modal-close,
    .annex-modal-close,
    .mock-popup__close,
    .feedback-modal__close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================================================
   SMALL MOBILE DEVICES (< 480px)
   Additional adjustments for very small screens
   ============================================================================ */

@media (max-width: 480px) {

    /* Reduce padding on very small screens */
    .modal-header,
    .user-modal-header,
    .quiz-dialog__header,
    .mock-popup__header,
    .break-prompt__header {
        padding: 1rem !important;
    }

    .modal-body,
    .user-modal-body,
    .quiz-dialog__body,
    .mock-popup__content,
    .break-prompt__content {
        padding: 1rem !important;
    }

    .modal-footer,
    .user-modal-footer,
    .quiz-dialog__footer,
    .mock-popup__footer,
    .break-prompt__footer {
        padding: 1rem !important;
    }

    /* Stack buttons vertically on very small screens */
    .modal-footer,
    .modal-actions,
    .quiz-dialog__footer {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .modal-footer .btn,
    .modal-actions .btn,
    .quiz-dialog__footer .btn {
        width: 100% !important;
    }

    /* Smaller titles */
    .modal-header h2,
    .modal-title,
    .user-modal-header h2,
    .quiz-dialog__header {
        font-size: 1.1rem !important;
    }
}

/* ============================================================================
   DARK MODE - MOBILE MODALS
   ============================================================================ */

@media (max-width: 768px) {
    /* Headers - dark mode */
    html.dark-mode .modal-header,
    html.dark-mode .user-modal-header,
    html.dark-mode .quiz-dialog__header,
    html.dark-mode .mock-popup__header,
    html.dark-mode .break-prompt__header,
    html.dark-mode .feedback-modal__header {
        background: #1a1d23 !important;
        border-bottom-color: #363c47 !important;
    }

    /* Bodies - dark mode */
    html.dark-mode .modal-body,
    html.dark-mode .user-modal-body,
    html.dark-mode .quiz-dialog__body,
    html.dark-mode .mock-popup__content,
    html.dark-mode .break-prompt__content,
    html.dark-mode .feedback-modal__body,
    html.dark-mode .feedback-modal__form {
        background: #1a1d23 !important;
    }

    /* Footers - dark mode */
    html.dark-mode .modal-footer,
    html.dark-mode .user-modal-footer,
    html.dark-mode .quiz-dialog__footer,
    html.dark-mode .mock-popup__footer,
    html.dark-mode .break-prompt__footer,
    html.dark-mode .feedback-modal__footer,
    html.dark-mode .feedback-modal__actions {
        background: #1a1d23 !important;
        border-top-color: #363c47 !important;
    }

    /* Modal containers - dark mode */
    html.dark-mode .modal-content,
    html.dark-mode .user-modal,
    html.dark-mode .user-modal-content,
    html.dark-mode .quiz-dialog,
    html.dark-mode .annex-modal,
    html.dark-mode .mock-popup,
    html.dark-mode .break-prompt,
    html.dark-mode .mock-leave-warning,
    html.dark-mode .feedback-modal {
        background: #1a1d23 !important;
    }

    /* Profile page modals */
    html.dark-mode .profile-container .modal-header,
    html.dark-mode #delete-modal .modal-header {
        background: #1a1d23 !important;
    }

    html.dark-mode .profile-container .modal-footer,
    html.dark-mode #delete-modal .modal-footer {
        background: #1a1d23 !important;
        border-top-color: #363c47 !important;
    }

    /* Feedback Modal - Type Options */
    html.dark-mode .feedback-modal__type-label {
        color: #d1d5db !important;
    }

    html.dark-mode .feedback-type-option__box {
        background: #22262e !important;
        border-color: #363c47 !important;
        color: #d1d5db !important;
    }

    html.dark-mode .feedback-type-option__box svg {
        color: #9ca3af !important;
    }

    html.dark-mode .feedback-type-option:hover .feedback-type-option__box {
        border-color: #4b5563 !important;
    }

    html.dark-mode .feedback-type-option input:checked + .feedback-type-option__box {
        background: #1e3a5f !important;
        border-color: #4a9ed4 !important;
        color: #60a5fa !important;
    }

    html.dark-mode .feedback-type-option input:checked + .feedback-type-option__box svg {
        color: #60a5fa !important;
    }

    /* Feedback Modal - Textarea and Input */
    html.dark-mode .feedback-modal__textarea,
    html.dark-mode .feedback-modal__input {
        background: #22262e !important;
        border-color: #363c47 !important;
        color: #f3f4f6 !important;
    }

    html.dark-mode .feedback-modal__textarea::placeholder,
    html.dark-mode .feedback-modal__input::placeholder {
        color: #6b7280 !important;
    }

    html.dark-mode .feedback-modal__textarea:focus,
    html.dark-mode .feedback-modal__input:focus {
        border-color: #4a9ed4 !important;
        box-shadow: 0 0 0 3px rgba(74, 158, 212, 0.2) !important;
    }

    html.dark-mode .feedback-modal__label {
        color: #d1d5db !important;
    }

    html.dark-mode .feedback-modal__label-hint {
        color: #9ca3af !important;
    }

    html.dark-mode .feedback-modal__char-count {
        color: #9ca3af !important;
    }

    /* Feedback Modal - Buttons */
    html.dark-mode .feedback-modal__btn--secondary {
        background: #22262e !important;
        color: #d1d5db !important;
        border-color: #363c47 !important;
    }

    html.dark-mode .feedback-modal__btn--secondary:hover {
        background: #363c47 !important;
    }
}

/* Auto dark mode - Mobile modals */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    /* Headers - auto dark mode */
    html.dark-mode-auto .modal-header,
    html.dark-mode-auto .user-modal-header,
    html.dark-mode-auto .quiz-dialog__header,
    html.dark-mode-auto .mock-popup__header,
    html.dark-mode-auto .break-prompt__header,
    html.dark-mode-auto .feedback-modal__header {
        background: #1a1d23 !important;
        border-bottom-color: #363c47 !important;
    }

    /* Bodies - auto dark mode */
    html.dark-mode-auto .modal-body,
    html.dark-mode-auto .user-modal-body,
    html.dark-mode-auto .quiz-dialog__body,
    html.dark-mode-auto .mock-popup__content,
    html.dark-mode-auto .break-prompt__content,
    html.dark-mode-auto .feedback-modal__body,
    html.dark-mode-auto .feedback-modal__form {
        background: #1a1d23 !important;
    }

    /* Footers - auto dark mode */
    html.dark-mode-auto .modal-footer,
    html.dark-mode-auto .user-modal-footer,
    html.dark-mode-auto .quiz-dialog__footer,
    html.dark-mode-auto .mock-popup__footer,
    html.dark-mode-auto .break-prompt__footer,
    html.dark-mode-auto .feedback-modal__footer,
    html.dark-mode-auto .feedback-modal__actions {
        background: #1a1d23 !important;
        border-top-color: #363c47 !important;
    }

    /* Modal containers - auto dark mode */
    html.dark-mode-auto .modal-content,
    html.dark-mode-auto .user-modal,
    html.dark-mode-auto .user-modal-content,
    html.dark-mode-auto .quiz-dialog,
    html.dark-mode-auto .annex-modal,
    html.dark-mode-auto .mock-popup,
    html.dark-mode-auto .break-prompt,
    html.dark-mode-auto .mock-leave-warning,
    html.dark-mode-auto .feedback-modal {
        background: #1a1d23 !important;
    }

    /* Profile page modals */
    html.dark-mode-auto .profile-container .modal-header,
    html.dark-mode-auto #delete-modal .modal-header {
        background: #1a1d23 !important;
    }

    html.dark-mode-auto .profile-container .modal-footer,
    html.dark-mode-auto #delete-modal .modal-footer {
        background: #1a1d23 !important;
        border-top-color: #363c47 !important;
    }

    /* Feedback Modal - Type Options */
    html.dark-mode-auto .feedback-modal__type-label {
        color: #d1d5db !important;
    }

    html.dark-mode-auto .feedback-type-option__box {
        background: #22262e !important;
        border-color: #363c47 !important;
        color: #d1d5db !important;
    }

    html.dark-mode-auto .feedback-type-option__box svg {
        color: #9ca3af !important;
    }

    html.dark-mode-auto .feedback-type-option:hover .feedback-type-option__box {
        border-color: #4b5563 !important;
    }

    html.dark-mode-auto .feedback-type-option input:checked + .feedback-type-option__box {
        background: #1e3a5f !important;
        border-color: #4a9ed4 !important;
        color: #60a5fa !important;
    }

    html.dark-mode-auto .feedback-type-option input:checked + .feedback-type-option__box svg {
        color: #60a5fa !important;
    }

    /* Feedback Modal - Textarea and Input */
    html.dark-mode-auto .feedback-modal__textarea,
    html.dark-mode-auto .feedback-modal__input {
        background: #22262e !important;
        border-color: #363c47 !important;
        color: #f3f4f6 !important;
    }

    html.dark-mode-auto .feedback-modal__textarea::placeholder,
    html.dark-mode-auto .feedback-modal__input::placeholder {
        color: #6b7280 !important;
    }

    html.dark-mode-auto .feedback-modal__textarea:focus,
    html.dark-mode-auto .feedback-modal__input:focus {
        border-color: #4a9ed4 !important;
        box-shadow: 0 0 0 3px rgba(74, 158, 212, 0.2) !important;
    }

    html.dark-mode-auto .feedback-modal__label {
        color: #d1d5db !important;
    }

    html.dark-mode-auto .feedback-modal__label-hint {
        color: #9ca3af !important;
    }

    html.dark-mode-auto .feedback-modal__char-count {
        color: #9ca3af !important;
    }

    /* Feedback Modal - Buttons */
    html.dark-mode-auto .feedback-modal__btn--secondary {
        background: #22262e !important;
        color: #d1d5db !important;
        border-color: #363c47 !important;
    }

    html.dark-mode-auto .feedback-modal__btn--secondary:hover {
        background: #363c47 !important;
    }
}