/* ============================================================
   Mobile/tablet responsive overrides.

   Breakpoint mirrors js-lms/constants.js MOBILE_BREAKPOINT (768).
   Everything in this file is additive and media-query-gated — the
   desktop experience above 768px must never change as a result of
   this file. See MOBILE_RESPONSIVE_AUDIT.md for the full review
   this file implements.
   ============================================================ */

@media (max-width: 768px) {

    /* Sidebar becomes a hamburger-toggled overlay drawer instead of
       a resizable flex panel — see js-lms/lms_layout.js _initMobileToggle(). */
    .lms-mobile-toggle {
        display: block;
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 1000;
    }

    .lms-panel-left {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        max-width: 280px;
        transform: translateX(-100%);
        transition: transform 0.2s;
        z-index: 999;
    }

    .lms-panel-left.lms-drawer-open {
        transform: translateX(0);
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
    }

    .lms-drawer-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 998;
    }

    /* Resizing is moot once the sidebar is an overlay drawer. */
    .lms-resize-handle {
        display: none;
    }

    /* The hamburger toggle is position:fixed at top:8px/left:8px (z-index
       1000), floating above whatever the main panel renders. Every panel
       (Dashboard, Settings, grid toolbars, channel headers, ...) lays its own
       content out flush from the top, so without this the toggle button sits
       directly on top of the page title/first toolbar row. Reserve a strip of
       space at the top of the main panel instead of patching each screen. */
    .lms-panel-main {
        width: 100%;
        padding-top: 48px;
        box-sizing: border-box;
    }

    /* Message hover-action bar — hover doesn't exist on touch, so keep the
       bar always visible and interactive. */
    .ch-msg-actions {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Rail section "+" buttons (new channel / new DM) are hover-revealed on
       desktop — always show them on touch. */
    .cd-section-add {
        opacity: 1 !important;
    }

    /* Row "⋯" options are hover-revealed on desktop — always show on touch
       (and keep the unread badge alongside). */
    .cd-row-more {
        display: flex !important;
    }
    .cd-row:hover .cd-row-badge {
        display: block;
    }

    /* Grid toolbars — allow horizontal scroll instead of overflowing. */
    .lms-tabgrid-toolbar, .w2ui-toolbar {
        flex-wrap: wrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Book Loan form two-column fields collapse to one column. */
    .lms-bd-col2, .lms-bd-col2last {
        display: block;
        width: 100%;
        margin-right: 0;
    }

    /* Book Loan form tab bar wraps instead of overflowing. */
    #bd-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
    }

    .bd-tab {
        flex: 1 1 auto;
        text-align: center;
        font-size: 11px;
        padding: 6px 8px;
    }

    /* @mention autocomplete — clamp to viewport width. */
    #ch-mention-menu {
        max-width: calc(100vw - 28px) !important;
    }

    /* Channels/DM master-detail: the shared rail by default, the conversation
       panel takes over once a channel/DM is selected — see _selectChannel()/
       _selectDm() toggling .lms-mobile-detail on #cd-root. */
    #cd-rail {
        width: 100% !important;
    }
    #cd-main {
        display: none !important;
    }
    #cd-root.lms-mobile-detail #cd-rail {
        display: none !important;
    }
    #cd-root.lms-mobile-detail #cd-main {
        display: flex !important;
    }
    .lms-mobile-back {
        display: inline-block !important;
    }

    /* Notification bell dropdown — clamp to viewport width. */
    #notif-dropdown {
        width: 92vw !important;
        max-width: 320px;
        right: -8px !important;
    }

    /* FK list-editor dropdown (Tabulator-generated) — cap height. */
    .tabulator-edit-list {
        max-height: 50vh !important;
        overflow-y: auto;
    }

    /* Dashboard (js-lms/dashboard.js) — KPI cards and the two chart grids are
       rendered with inline `grid-template-columns:repeat(4,...)`/`repeat(2,...)`
       styles, which need !important here to win over the inline rule. Drop to
       2 columns for KPI cards and stack the chart cards single-column. */
    .dash-root {
        padding: 16px !important;
    }
    .dash-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .dash-charts-grid {
        grid-template-columns: 1fr !important;
    }
    .dash-chart-card {
        padding: 14px 16px;
    }
    .dash-tickrow {
        grid-template-columns: 72px 1fr 52px;
        gap: 8px;
    }
}

@media (max-width: 480px) {

    /* Dashboard KPI cards collapse to a single column on phones. */
    .dash-kpi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}