/* ============================================================
   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;
    }

    /* Channel/DM hover-only action icons — set via inline style, so
       !important is required to win over the inline opacity:0/1. */
    .ch-act, .dm-bookmark-act {
        opacity: 1 !important;
    }

    /* 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: list view by default, detail view (message
       thread / conversation) takes over once a channel/DM is selected — see
       _selectChannel()/_selectDm() toggling the .lms-mobile-detail class. */
    #ch-sidebar, #dm-list-panel {
        width: 100% !important;
        min-width: 0 !important;
    }
    #ch-main, #dm-convo-panel {
        display: none !important;
    }
    #ch-root.lms-mobile-detail #ch-sidebar,
    #dm-root.lms-mobile-detail #dm-list-panel {
        display: none !important;
    }
    #ch-root.lms-mobile-detail #ch-main {
        display: flex !important;
        width: 100%;
    }
    #dm-root.lms-mobile-detail #dm-convo-panel {
        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;
    }
}