/* ==========================================================================
   MOBILE / TABLET RESPONSIVE LAYER  —  loaded after app.css
   ==========================================================================

   Every rule in this file is inside a `max-width` media query, so on a desktop
   screen this stylesheet contributes nothing at all: the computer view stays
   byte-for-byte what it was. No markup, no JS and no application logic was
   touched to make the phone view work — only presentation.

   Breakpoints
     <= 1024px  tablet / phone  (sidebar already slides in, set up in app.css)
     <=  768px  phone           (the main pass: topbar, tables, forms, modals)
     <=  480px  small phone     (tighter spacing)
   ========================================================================== */


/* ==========================================================================
   1. TABLET AND BELOW — the off-canvas sidebar
   ========================================================================== */

@media (max-width: 1024px) {

    /* Never wider than the screen, and dvh so the drawer is not cut off by
       the mobile browser's URL bar. */
    .sidebar {
        width: min(260px, 82vw);
        left: calc(-1 * min(260px, 82vw));
        height: 100vh;
        height: 100dvh;
        overscroll-behavior: contain;
    }

    .sidebar-menu {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Roomier tap targets; long labels wrap instead of pushing the collapse
       arrow out of the drawer. */
    .menu-item a, .menu-item button { padding: 12px 14px; }
    .menu-item span { min-width: 0; }
}


/* ==========================================================================
   2. PHONE — the main pass
   ========================================================================== */

@media (max-width: 768px) {

    /* ---------- Topbar -------------------------------------------------- */

    .dashboard-topbar {
        height: 58px;
        padding: 0 10px;
        gap: 8px;
    }

    .topbar-title {
        font-size: 1rem;
        min-width: 0;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* There are ~10 action buttons up here. Rather than hide any of them (that
       would take features away on the device most used), the strip scrolls
       sideways and keeps every button reachable. */
    .topbar-actions {
        flex: 0 1 auto;
        min-width: 0;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 0;
    }

    .topbar-actions::-webkit-scrollbar { display: none; }

    .topbar-btn {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
    }

    /* The clock never fits next to ten buttons. */
    #topbarClock { display: none !important; }

    /* ---------- Topbar dropdown panels ---------------------------------- */
    /* These are 240–600px wide and anchored to the right edge, which puts them
       half off-screen on a phone. Turn them into near-full-width sheets.
       !important is required: the widths are inline styles in the markup. */

    .dashboard-topbar .theme-picker-panel,
    .dashboard-topbar .quick-note-panel,
    .dashboard-topbar .dropdown-menu {
        position: fixed !important;
        top: 62px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 74px) !important;
        max-height: calc(100dvh - 74px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .mega-menu-panel {
        position: fixed !important;
        top: 62px !important;
        left: 8px !important;
        right: 8px !important;
        max-height: calc(100vh - 74px) !important;
        max-height: calc(100dvh - 74px) !important;
    }

    /* ---------- Page body ----------------------------------------------- */

    .dashboard-content {
        padding: 12px 10px;
        gap: 16px;
    }

    .section-card { padding: 14px; }
    .glass-card { border-radius: 12px; }

    .section-header {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
    }

    .section-title { font-size: 1.05rem; }

    /* body has overflow-x:hidden, so an element with a hard inline pixel width
       would be silently clipped off the right edge. Shrink it to fit instead.
       Anything inside a data table is left alone — that scrolls on purpose. */
    .dashboard-content [style*="width:"]:not(.custom-table):not(.custom-table *) {
        max-width: 100% !important;
    }

    /* ---------- Data tables --------------------------------------------- */
    /* The table itself becomes the horizontal scroller, so it works whether or
       not the page wrapped it in .table-responsive. Cells stop wrapping — an
       accounting figure broken across three lines is worse than a swipe. */

    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .custom-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        font-size: 12.5px;
    }

    .custom-table th,
    .custom-table td {
        padding: 8px 10px;
        white-space: nowrap;
    }

    .custom-table th { font-size: 11px; }

    /* ---------- Forms ---------------------------------------------------- */
    /* 16px is the threshold below which iOS Safari zooms the page in when a
       field gains focus — which then leaves the layout scrolled sideways. */

    .form-control,
    .ef-input,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }

    .form-control { padding: 10px 12px; }

    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-search--dropdown .select2-search__field,
    body .select2-container--default .select2-results__option {
        font-size: 16px !important;
    }

    .select2-container { max-width: 100%; }

    /* Multi-column layouts are written inline all over the app as
       `grid-template-columns: repeat(N, 1fr)`. auto-fit keeps two columns
       where they still fit and drops to one where they do not, without having
       to know the original column count. */
    .dashboard-content [style*="grid-template-columns"] {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    }

    /* Inline button/filter bars are `display:flex` with no wrap, so they used
       to run off the right edge. */
    .dashboard-content [style*="display: flex"],
    .dashboard-content [style*="display:flex"] {
        flex-wrap: wrap;
    }

    /* ---------- Buttons -------------------------------------------------- */

    .btn {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 40px;
    }

    /* ---------- Modals ---------------------------------------------------- */

    .modal-overlay { padding: 10px; }

    .modal-container {
        max-width: 100% !important;
        max-height: 92vh;
        max-height: 92dvh;
        display: flex;
        flex-direction: column;
    }

    .modal-header { padding: 14px 16px; }
    .modal-title { font-size: 1.05rem; }

    .modal-body {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    /* ---------- Alerts / misc -------------------------------------------- */

    .alert {
        padding: 10px 12px;
        font-size: 0.85rem;
        margin-bottom: 14px;
    }

    .welcome-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px;
    }
}


/* ==========================================================================
   3. SMALL PHONE
   ========================================================================== */

@media (max-width: 480px) {

    .dashboard-content {
        padding: 10px 8px;
        gap: 12px;
    }

    .section-card { padding: 12px; }

    .topbar-title { font-size: 0.92rem; }
    .topbar-btn { width: 36px; height: 36px; }

    .btn {
        padding: 9px 12px;
        font-size: 12.5px;
    }

    .custom-table { font-size: 12px; }
    .custom-table th,
    .custom-table td { padding: 7px 8px; }

    /* One column: anything narrower than this is unreadable on a small phone. */
    .dashboard-content [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .modal-header,
    .modal-body,
    .modal-footer { padding-left: 12px; padding-right: 12px; }
}