/* ==========================================================================
   Timetable Mobile — responsive breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   Phones (≤ 768px) — main layout
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .page-content {
        padding-top: 5rem;
    }

    .main-content-grid {
        flex-direction: column;
    }

    /*
     * Let the flex wrapper grow with its stacked children. On desktop it is a
     * fixed-height row (height: calc(100vh - 200px)); on mobile that fixed
     * height is shorter than the stacked column, so the children overflowed
     * below the box and the following sections (campus filter, footer) drew on
     * top of them. height:auto makes the column flow normally. We also reclaim
     * the redundant inner gutter so the scaled grid gets more width.
     */
    .container {
        height: auto !important;
        min-height: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .search-section {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    #searchResults {
        max-height: 200px;
        overflow-y: auto;
    }

    .features-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 1rem 0;
    }

    .features-icons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 0.5rem;
    }

    .feature-name {
        text-align: center;
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }

    .timetable-section {
        width: 100% !important;
        height: auto !important;
        background: white !important;
    }

    /*
     * The grid is rendered at its native desktop size (675px wide, absolute
     * pixel positioning from domain/position.js) and uniformly scaled down to
     * fit the viewport by applyGridScale() in pages/timetable.js. Scaling the
     * whole element keeps headers, hour lines, time labels and course blocks
     * perfectly aligned — the old approach squeezed headers to 60px columns
     * while course blocks stayed at desktop x-coordinates, so they no longer
     * lined up. JS sets the transform + a compensating container height (the
     * scaled element still reserves its un-scaled box otherwise).
     */
    .timetable-scroll-container {
        /* Drop the desktop `flex-1` here: as a flex item it would grow to the
         * intrinsic height of #schTimes (min-height: 1200px), leaving ~500px of
         * empty space below the scaled grid. flex:none lets applyGridScale()'s
         * pinned height (the real scaled grid height) take effect. */
        flex: none !important;
        overflow-x: hidden;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    #schTimes {
        /* height is driven by layout.css; width stays native (inline 675px).
           transform-origin/transform are applied by JS. */
        transform-origin: top left;
        background: white !important;
    }

    .right-section {
        width: 100% !important;
        margin-top: 1rem;
    }

    /* Mobile popup styles */
    .popup-container {
        width: 90% !important;
        max-width: none !important;
        padding: 1rem !important;
    }

    /* Remove border and background from timetable container in mobile view */
    .timetable-section .bg-white {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* Action bar — keep all controls comfortably on one row on phones. */
    #timetable-bar {
        gap: 0.35rem;
        padding: 0.4rem 0.5rem;
    }

    .tb-action-btn {
        padding: 0.4rem 0.55rem;
    }

    /* Consistent vertical rhythm between the stacked cards. This rule
       predates the 2026-09 desktop restructure, when #campus-selection sat
       OUTSIDE .main-content-grid and needed its own 1rem separation. It now
       lives inside the flex column, whose 1rem gap supplies exactly that
       rhythm — so the margin is zeroed (1rem here would double the gap).
       Verified pixel-identical by tests/mobile_freeze.py. */
    #campus-selection {
        margin-top: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Phones (≤ 768px) — AI floating button
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    #ai-floating-button {
        bottom: 1.5rem !important;
        left: 1.5rem !important;
    }

    #ai-floating-button button {
        width: 3.5rem !important;
        height: 3.5rem !important;
        box-shadow: 0 6px 24px rgba(147, 51, 234, 0.3) !important;
    }

    #ai-floating-button button > div {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    #ai-help-bubble {
        max-width: 260px !important;
        bottom: 4.5rem !important;
        left: -0.5rem !important;
        padding: 1rem !important;
    }

    #ai-help-bubble h4 {
        font-size: 1rem !important;
    }

    #ai-help-bubble p {
        font-size: 0.825rem !important;
    }
}

/* --------------------------------------------------------------------------
   Phones (≤ 768px) — filter bar
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .modern-filter-card {
        padding: 1rem !important;
    }

    .filter-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    /* Stack each label above a full-width select. The desktop layout is an
       inline-flex row (label beside select); on a phone that row plus a
       100%-wide select was wider than the card and overflowed the viewport. */
    .filter-select-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        width: 100%;
    }

    .modern-filter-select {
        width: 100%;
        min-width: 0;
        font-size: 0.813rem;
    }

    .modern-filter-button {
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
    }
}

/* --------------------------------------------------------------------------
   Tablet (769px – 1024px) — AI floating button
   -------------------------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {
    #ai-floating-button {
        bottom: 2rem;
        left: 2rem;
    }
}