/* ========================================
   MOBILE PORTRAIT REDESIGN
   Target: Phones/Vertical Tablets (< 768px)
   Goal: Vertical Flow instead of Landscape Spread
   ======================================== */

@media only screen and (max-width: 768px) and (orientation: portrait) {

    /* --- GLOBAL LAYOUT --- */
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: relative !important;
        height: auto !important;
        min-height: 100vh;
        width: 100%;
        max-width: 100%;
    }

    .modes-page,
    .progress-page,
    .question-page {
        padding: 0 !important;
    }

    .page-container {
        display: flex;
        flex-direction: column;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 14px !important;
        padding-bottom: 24px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- HEADER (Timer, Streak, Branding) --- */

    /* Ensure the wrapper for Timer & Exit Icon is visible and static */
    #top-right-ui-cluster {
        position: static !important;
        display: flex !important;
        flex-direction: column-reverse;
        /* Put Timer above Exit Icon or vice versa */
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
    }

    #hivemind-icon-container {
        /* Keep Exit icon small and perhaps at the very top or bottom of this cluster */
        margin-bottom: 10px;
        order: -1;
        /* Put at top */
    }

    /* Streak Wheel Container */
    /* CORRECTED ID: matches dashboard-menu.html */
    #streak-wheel-main-container {
        position: static !important;
        margin: 0 auto 20px auto;
        /* Increased margin bottom */
        transform: scale(0.85);
        display: block;
        width: 100%;
        text-align: center;
        height: auto !important;
        /* Ensure it takes up space */
        min-height: 250px;
    }

    /* Fix Live Session Check Button - was absolute 100px top */
    #check-live-sessions-wrapper,
    #check-live-lessons-wrapper {
        position: static !important;
        margin: 10px auto;
        text-align: center;
        display: block;
        width: auto;
    }

    /* Daily Goal Timer */
    #daily-goal-timer-container {
        position: static !important;
        /* Ensure it overrides .hidden if logic wants it shown, OR just ensure spacing implies visibility when active */
        display: block;
        /* We'll let JS toggle .hidden, but when ON, it must be block */
        margin: 10px auto;
        width: 90%;
    }

    /* --- MENU PAGE --- */
    #menu-page .page-container {
        display: flex;
        flex-direction: column;
        padding-top: 20px !important;
    }

    .mode-groups {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 20px !important;
    }

    .mode-container {
        margin-top: 0 !important;
        /* Spacing handled by streak wheel margin now */
        margin-bottom: 20px !important;
    }

    /* Mode Cards */
    .mode-group {
        width: 100%;
        min-height: auto !important;
    }

    .mode-group__grid {
        grid-template-columns: 1fr 1fr;
        /* Keep buttons 2-up if they fit, or 1-up */
    }

    /* --- QUESTION PAGE --- */
    #question-page .page-container {
        padding-top: 10px !important;
    }

    /* Hard reset in case mode attribute is missing during initial render */
    #question-page,
    #question-page .page-container,
    #question-page #question-content-wrapper {
        opacity: 1 !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* Force clear visual state in ALL question modes on iOS/mobile (prevents washed-out rendering) */
    #question-page .page-container[data-mode] {
        opacity: 1 !important;
        filter: none !important;
        -webkit-filter: none !important;
        background-color: #fff !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    #question-page .page-container[data-mode] #question-content-wrapper,
    #question-page .page-container[data-mode] #mcq-options,
    #question-page .page-container[data-mode] #question-text,
    #question-page .page-container[data-mode] #answer-container,
    #question-page .page-container[data-mode] #correct-answer-container {
        opacity: 1 !important;
        filter: none !important;
        -webkit-filter: none !important;
        pointer-events: auto !important;
    }

    /* Prevent iOS from applying a gray tap overlay to large content regions. */
    #question-page,
    #question-page .page-container,
    #question-page #question-content-wrapper,
    #question-page #question-content-wrapper * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    }

    #question-page * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    }

    #question-page #mcq-options .btn,
    #question-page #confidence-section .confidence-button {
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    #question-page #show-answer-btn {
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        position: relative;
        z-index: 6;
    }

    /* Keep question text rendering stable on touch devices */
    #question-page #question-mode-title,
    #question-page #question-number,
    #question-page #question-text,
    #question-page #answer-text {
        opacity: 1 !important;
        filter: none !important;
        -webkit-filter: none !important;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    #question-page #question-text,
    #question-page #answer-text {
        color: #000 !important;
    }

    #question-page .btn,
    #question-page .hutton-reveal-btn {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    #question-page .page-container {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    #question-page input,
    #question-page textarea {
        -webkit-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
    }

    #question-page #answer-container,
    #question-page #answer-container *,
    #question-page #correct-answer-container,
    #question-page #correct-answer-container *,
    #question-page #user-response-container,
    #question-page #user-response-container * {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    /* Mobile-only: remove decorative background wash in flashcard modes */
    #question-page .page-container[data-mode="PrimeTime"]::before,
    #question-page .page-container[data-mode="Mastermind"]::before,
    #question-page .page-container[data-mode="TargetZone"]::before {
        display: none !important;
        opacity: 0 !important;
        background-image: none !important;
    }

    /* Touch-only press isolation: ignore browser hover/active synthesis, animate via JS class only. */
    #question-page .btn:hover,
    #question-page .btn:active,
    #question-page .hutton-reveal-btn:hover,
    #question-page .hutton-reveal-btn:active,
    #question-page .exit-button:hover,
    #question-page .exit-button:active {
        transform: none !important;
    }

    #question-page .btn:hover::before,
    #question-page .btn:active::before,
    #question-page .hutton-reveal-btn:hover::before,
    #question-page .hutton-reveal-btn:active::before,
    #question-page .exit-button:hover::before,
    #question-page .exit-button:active::before {
        left: -50% !important;
    }

    #question-page .btn.hm-touch-active,
    #question-page .hutton-reveal-btn.hm-touch-active,
    #question-page .exit-button.hm-touch-active {
        transform: translateY(-1px) scale(1.01) !important;
    }

    #question-page .btn.hm-touch-active::before,
    #question-page .hutton-reveal-btn.hm-touch-active::before,
    #question-page .exit-button.hm-touch-active::before {
        left: 100% !important;
    }

    /* iOS safeguard: glossy sheen layer must never capture taps. */
    #question-page .btn::before,
    #question-page .hutton-reveal-btn::before,
    #question-page .exit-button::before {
        pointer-events: none !important;
    }

    /* Keep bottom action buttons at base style for synthetic hover/active states. */
    #question-page #teacher-support-btn:hover,
    #question-page #teacher-support-btn:active {
        background: linear-gradient(135deg, rgba(52, 152, 219, 0.85) 0%, rgba(41, 128, 185, 0.85) 100%) !important;
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }

    #question-page #flag-question-btn:hover,
    #question-page #flag-question-btn:active {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.85) 0%, rgba(255, 152, 0, 0.85) 100%) !important;
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }

    #question-page #flag-question-btn.flagged:hover,
    #question-page #flag-question-btn.flagged:active {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.85) 0%, rgba(200, 35, 51, 0.85) 100%) !important;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }

    #question-page #exit-button-questions.exit-button.btn-danger:hover,
    #question-page #exit-button-questions.exit-button.btn-danger:active {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.85) 0%, rgba(200, 35, 51, 0.85) 100%) !important;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }

    #question-page .page-container[data-mode="TestZone"] #hutton-button-container,
    #question-page .page-container[data-mode="TestZoneLive"] #hutton-button-container {
        position: relative;
        z-index: 5;
        pointer-events: auto !important;
    }

    #question-page .page-container[data-mode="TestZone"] .hutton-reveal-btn,
    #question-page .page-container[data-mode="TestZoneLive"] .hutton-reveal-btn {
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    #question-content-wrapper {
        grid-row: auto !important;
        /* Reset grid placement */
        position: relative;
        z-index: 6;
        height: auto !important;
        overflow-y: visible !important;
        padding-bottom: 1rem !important;
        scroll-padding-bottom: 1rem !important;
    }

    /* Mobile question actions: stacked and in-flow to avoid overlap with Save button */
    .question-page-actions {
        position: relative !important;
        width: 100% !important;
        background: transparent !important;
        border-top: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        z-index: 8 !important;
    }

    #question-page #teacher-support-btn,
    #question-page #flag-question-btn {
        width: 100% !important;
    }

    #question-page .exit-button,
    #question-page #exit-button-questions,
    body:not(.landscape-overlay-active) #question-page .exit-button {
        position: static !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        margin: 0 !important;
        z-index: 2 !important;
    }

    /* Keep compatibility with older selector name */
    #save-session-btn {
        position: static !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Flash-response buttons: single visible set on mobile, with spacing */
    #question-page .page-container[data-mode="PrimeTime"] #answer-container > .mt-2,
    #question-page .page-container[data-mode="Mastermind"] #answer-container > .mt-2,
    #question-page .page-container[data-mode="TargetZone"] #answer-container > .mt-2 {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
    }

    #question-page .page-container[data-mode="PrimeTime"] #answer-container > .mt-2 .btn,
    #question-page .page-container[data-mode="Mastermind"] #answer-container > .mt-2 .btn,
    #question-page .page-container[data-mode="TargetZone"] #answer-container > .mt-2 .btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Prevent duplicated second set and keep Test Zone free of flash buttons */
    #question-page #response-buttons,
    #question-page .page-container[data-mode="TestZone"] #answer-container > .mt-2,
    #question-page .page-container[data-mode="TestZoneLive"] #answer-container > .mt-2 {
        display: none !important;
    }

    /* Fallback guard: if MCQ options are visible, never show flashcard response buttons. */
    #question-page #mcq-options:not(.hidden) ~ #answer-container > .mt-2 {
        display: none !important;
    }

    /* --- UTILS --- */
    .info-trigger {
        /* Make 'i' icons easier to tap */
        padding: 10px;
    }

    /* Fix "Developed By" overlapping content */
    #menu-page .page-container .developed-by {
        position: static !important;
        text-align: center;
        margin-top: 20px;
        font-size: 0.8rem;
    }

    /* Logout Button */
    #logout-button {
        position: static !important;
        float: left;
        margin-top: 20px;
    }

    /* --- POLISH --- */
    /* Check Live Sessions Button - make sure it overrides any absolute positioning */
    #check-live-sessions-wrapper,
    #check-live-lessons-wrapper {
        position: static !important;
        margin: 10px auto;
        text-align: center;
        display: block;
        width: auto;
    }

    /* HiveMind Banner - Double Size for Mobile */
    .hivemind-banner-img {
        width: 85% !important;
        /* Make it take up most of the width */
        max-width: 350px !important;
        /* Cap it so it doesn't look ridiculous on tablets */
        height: auto !important;
        transform: scale(1.2);
        /* Slight additional pop if needed, but width usually handles it */
        margin: 15px auto !important;
    }

    .hivemind-banner-container {
        margin-bottom: 30px !important;
        /* Ensure space below the larger banner */
        min-height: auto !important;
    }

    /* Hide Maintenance Banner on Mobile ("Site Under Maintenance") */
    /* specific selector + nuclear option to override inline styles */
    body #maintenance-banner {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        border: none !important;
    }

    /* Welcome Video - Move to "Blank Space" (Middle) on Mobile */
    #welcome-video-container {
        top: auto !important;
        /* USER: Increase this % (e.g. 45%, 50%) to move the video UP. Decrease it to move down. */
        bottom: 40% !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
        max-width: 400px !important;
    }
}