/*
 * Banker — responsive admin tweaks.
 *
 * Goals:
 *   1. The left nav sidebar collapses into a slide-in overlay on narrower
 *      screens (tablets and phones) instead of eating horizontal space.
 *   2. The right filter panel is collapsible too, so the data table gets first
 *      claim on the viewport width (collapse first, scroll only as a fallback).
 *   3. No horizontal scrolling of the whole page — a wide data table scrolls
 *      inside its own container, and the layout never exceeds the viewport.
 *
 * Loaded after Django's own admin CSS (via base_site.html extrastyle), so
 * these rules win on equal specificity.
 */

/* --- 1. Never let the page itself scroll sideways ------------------------- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Keep every major admin container inside the viewport. */
#container,
#content,
#content-main,
.dashboard #content {
    max-width: 100%;
    box-sizing: border-box;
}

/* --- 2. The DATA TABLE gets first claim on the viewport width ------------- */
/* The table fills whatever width is available and only scrolls INSIDE its own
   box as a last resort — never the whole page. We deliberately do NOT force a
   `min-width: max-content` here: that would make the table always overflow and
   show a scrollbar even when there's room. Priority order is therefore:
   collapse the surrounding chrome first (left sidebar + right filter), and let
   the table go scrollable only if it still doesn't fit. */
#changelist .results,
.change-list .results {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
    width: 100%;
}

/* Let the flexible table column actually shrink below its content width so the
   #changelist flex row never pushes past the viewport. */
#changelist .changelist-form-container {
    min-width: 0;
    max-width: 100%;
}

/* Change/add forms: let long rows wrap rather than push the page wider. */
.form-row {
    overflow-x: auto;
}

/* --- 2b. Collapsible RIGHT filter panel ---------------------------------- */
/* A slim handle (injected by admin_responsive.js) sits between the table and
   the filter panel, mirroring the left sidebar's toggle. Collapsing the filter
   gives its width back to the table. */
.toggle-filter-sidebar {
    flex: 0 0 24px;
    align-self: stretch;
    box-sizing: border-box;
    padding: 8px 0;
    border: none;
    border-left: 1px solid var(--hairline-color);
    background: var(--darkened-bg);
    color: var(--body-quiet-color);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    order: 1;                 /* sit just left of #changelist-filter (also order:1) */
}

.toggle-filter-sidebar:hover,
.toggle-filter-sidebar:focus {
    color: var(--link-fg);
}

/* Glyph: » = collapse (push the panel away), « = expand (pull it back). */
.toggle-filter-sidebar::before {
    content: "\00BB";
}

#changelist.filters-collapsed .toggle-filter-sidebar::before {
    content: "\00AB";
}

/* Animate the collapse so the panel slides shut (and the table slides open in
   tandem) like the left drawer, instead of snapping. The panel's flex-basis and
   margin transition on the same 0.2s ease-in-out curve; overflow:hidden clips
   the content as it narrows. */
#changelist-filter {
    min-width: 0;
    overflow: hidden;
    transition: flex-basis 0.2s ease-in-out,
                margin 0.2s ease-in-out,
                opacity 0.2s ease-in-out;
}

/* Keep each filter row on a single line so that as the panel narrows during the
   slide it is clipped horizontally (a clean wipe) rather than rewrapping its
   text onto extra lines. Labels are short, so this is invisible when open. */
#changelist-filter h2,
#changelist-filter h3,
#changelist-filter li,
#changelist-filter summary {
    white-space: nowrap;
}

/* Collapsed: the filter panel yields all of its width to the table. */
#changelist.filters-collapsed > #changelist-filter {
    flex-basis: 0;
    margin-left: 0;
    padding: 0;
    border: none;
    opacity: 0;
}

/* Below the side-by-side breakpoint the panel is stacked under the table, so a
   width slide doesn't apply — just hide it when collapsed. */
@media (max-width: 767px) {
    #changelist-filter {
        transition: none;
    }
    #changelist.filters-collapsed > #changelist-filter {
        display: none;
    }
}

/* The drawer backdrop is hidden by default at every width; only the overlay
   media query below reveals it while the drawer is open. Without this global
   default it would show as a full-screen dim layer on desktop. */
#nav-backdrop {
    display: none;
}

/* --- 3. Collapse the nav sidebar into an off-canvas drawer <= 1024px ------ */
@media (max-width: 1024px) {
    /* Drawer width, reused for the sidebar AND the position of the toggle
       handle when open, so the handle always rides the drawer's right edge. */
    :root {
        --drawer-w: min(275px, 80vw);
    }

    /* Django hides these entirely below 768px — keep them so the drawer is
       reachable on tablets AND phones (button stays flex so its arrow centres). */
    #nav-sidebar {
        display: block;
    }
    #toggle-nav-sidebar {
        display: flex;
    }

    /* Sidebar floats above the content as a fixed drawer, parked off-canvas by
       default so it never widens the layout or triggers horizontal scroll. */
    .main > #nav-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: calc(-1 * (var(--drawer-w) + 30px));   /* fully off-screen incl. shadow */
        width: var(--drawer-w);
        max-width: none;
        height: 100vh;
        margin-left: 0;
        z-index: 2000;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
        transition: left 0.2s ease-in-out, visibility 0.2s ease-in-out;
    }

    /* Toggled open (Django adds .shifted): slide it in. */
    .main.shifted > #nav-sidebar {
        left: 0;
        visibility: visible;
    }

    /* Content is always full width — the drawer overlays, it doesn't push. */
    .main > #nav-sidebar + .content,
    .main.shifted > #nav-sidebar + .content {
        max-width: 100%;
    }

    /* The toggle handle:
       - CLOSED: left in Django's normal IN-FLOW position (a 24px column at the
         left edge). Because it's in flow it PUSHES the content right by its own
         width rather than painting over it — no overlap/shadow on the content.
       - OPEN: becomes a fixed tab riding the drawer's RIGHT edge (« to close),
         so it never covers the menu labels (that was the earlier clipping bug).
       Making it fixed in BOTH states was wrong — it then overlapped the content
       while collapsed. */
    .toggle-nav-sidebar {
        z-index: 2001;
    }
    .main.shifted .toggle-nav-sidebar {
        position: fixed;
        top: 0;
        left: var(--drawer-w);
        width: 24px;
        height: 100vh;
        max-height: none;
        transition: left 0.2s ease-in-out;
    }

    /* Dimmed backdrop behind the open drawer; clicking it closes the drawer
       (wired in admin_responsive.js). Sits below the drawer and its handle. */
    #nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1999;
        background: rgba(0, 0, 0, 0.45);
    }
    .main.shifted #nav-backdrop {
        display: block;
    }
}

/* --- Phones: stack the changelist search toolbar ------------------------- */
@media (max-width: 767px) {
    #changelist #toolbar form#changelist-search {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
}