/**
 * App shell styles: sidebar (desktop rail + phone drawer), topbar, footer,
 * and the small-screen repairs that apply to every page.
 *
 * Loaded LAST (after sb-admin-2, shivam-theme and custom) so it is the single
 * authority on layout at every width. Replaces mobile.css and the sidebar /
 * mobile blocks that used to live in shivam-theme.css and custom.css.
 *
 * State classes (set by static/js/shell.js):
 *   body.sidebar-toggled / .sidebar.toggled   desktop icon rail (≥ 768px)
 *   body.drawer-open                          phone drawer visible (< 768px)
 */

/* ============================================================
   1. Every width
   ============================================================ */

/* Current page in the sidebar. */
.sidebar .nav-item .nav-link.is-current,
.sidebar .collapse-item.is-current {
    color: var(--text-primary) !important;
    background-color: var(--accent-light);
    box-shadow: inset 3px 0 0 var(--accent-hover);
}
.sidebar .nav-item .nav-link.is-current i { color: var(--text-primary); }

/* Drawer header (brand + close) — phone only. */
.sidebar-drawer-head { display: none; }

/* Scroll-to-top: SB Admin hid it with display:none and faded it in with jQuery. */
.scroll-to-top { display: none; }
.scroll-to-top.is-visible { display: flex; align-items: center; justify-content: center; }

/* Topbar brand shown when the sidebar is off-canvas. */
.topbar-brand {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary) !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.95rem;
    text-decoration: none !important;
}
.topbar-brand i { color: var(--text-secondary); }

/* Topbar user menu: name visible from small tablets up. */
.topbar .user-name { color: var(--text-secondary) !important; }

/* Sidebar SKU lookup forms stay compact on desktop. */
.sidebar .form-inline .form-control,
.sidebar .form-inline .btn {
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* Icon rail (desktop, collapsed): keep the SKU form from overflowing the flyout. */
.sidebar.toggled .collapse-inner form { padding-left: 0.5rem; padding-right: 0.5rem; }

/* ---------------- Auth pages (login / create user) ---------------- */
body.auth-page #content-wrapper { min-height: 100dvh; }
body.auth-page .container-fluid { padding: 0; display: flex; flex: 1 0 auto; }
.auth-wrap {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(51, 75, 128, 0.35), transparent 60%),
        var(--bg-primary);
}
.auth-wrap-inline { min-height: 0; padding: 0; background: none; justify-content: flex-start; }
.auth-card {
    width: 100%;
    max-width: 24rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.auth-brand {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    color: var(--text-primary); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    font-size: 0.9rem; margin-bottom: 1.25rem;
}
.auth-brand i { font-size: 1.6rem; color: var(--accent-hover); }
.auth-title { font-size: 1.35rem; margin-bottom: 1.25rem; text-align: center; }
.auth-label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary) !important; margin-bottom: 0.35rem; }
.auth-input, .form-control.auth-input {
    min-height: 48px;
    font-size: 16px;            /* no iOS zoom; also what Chrome's touch-to-fill expects */
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
}
.auth-password { position: relative; }
.auth-password .auth-input { padding-right: 3rem; }
.auth-eye {
    position: absolute; top: 0; right: 0; bottom: 0; width: 3rem;
    border: 0; background: transparent; color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center; border-radius: 0 8px 8px 0;
}
.auth-eye:hover, .auth-eye:focus-visible { color: var(--text-primary); }
.auth-remember { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0 1.25rem; }
.auth-remember label { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
.auth-check { width: 1.25rem; height: 1.25rem; accent-color: var(--accent-hover); margin: 0; }
.auth-submit, .btn.auth-submit { min-height: 48px; font-size: 1rem; font-weight: 600; border-radius: 8px; }
body.auth-page .alert { max-width: 24rem; margin: 1rem auto -0.5rem; position: relative; z-index: 1; }
body.auth-page .container-fluid > .alert { position: absolute; left: 0; right: 0; top: 1rem; }

/* ============================================================
   2. Phone drawer (< 768px)
   ============================================================ */
@media (max-width: 767.98px) {

    /* Off-canvas drawer. Width is !important to beat SB Admin's
       `.sidebar.toggled { width: 0 !important }`. */
    .sidebar,
    .sidebar.toggled {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(20rem, 86vw) !important;
        max-width: 100%;
        min-height: 0;
        height: 100dvh;
        z-index: 1050;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 240ms ease, visibility 0s linear 240ms;
        box-shadow: none;
    }
    body.drawer-open .sidebar {
        transform: translateX(0);
        visibility: visible;
        transition: transform 240ms ease, visibility 0s;
        box-shadow: 0 0 0 1px var(--border-color), 0 12px 40px rgba(0, 0, 0, 0.6);
    }

    /* Scrim. */
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
    }
    body.drawer-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    body.drawer-open { overflow: hidden; }

    /* Content never shifts: the drawer is an overlay. */
    #content-wrapper { margin-left: 0 !important; width: 100%; }

    /* Drawer header: brand + close. Replaces the sidebar-brand block. */
    .sidebar .sidebar-brand { display: none !important; }
    .sidebar-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.75rem 0.75rem 0.75rem 1rem;
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--accent-secondary);
        border-bottom: 1px solid var(--border-color);
    }
    .sidebar-drawer-head .brand {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: var(--text-primary) !important;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none !important;
    }
    .sidebar-drawer-head .brand i { font-size: 1.4rem; }
    #sidebarClose {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--text-secondary);
        font-size: 1.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #sidebarClose:hover, #sidebarClose:focus-visible { background: var(--bg-hover); color: var(--text-primary); }

    /* Undo SB Admin's 6.5rem icon-rail styling that it applies to every width < 768. */
    .sidebar .nav-item .nav-link,
    .sidebar.toggled .nav-item .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        text-align: left;
        padding: 0.8rem 1rem;
        min-height: 48px;
        font-size: 0.95rem;
    }
    .sidebar .nav-item .nav-link i {
        font-size: 1rem;
        width: 1.5rem;
        margin-right: 0.6rem;
        text-align: center;
    }
    .sidebar .nav-item .nav-link span {
        display: inline;
        font-size: inherit;
        flex: 1 1 auto;
        white-space: normal;
        line-height: 1.3;
    }
    /* Chevron on accordion togglers (SB Admin only draws it ≥ 768). */
    .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        display: inline-block;
        width: 1rem;
        text-align: center;
        color: var(--text-muted);
        transition: transform 150ms ease;
    }
    .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after { transform: rotate(-90deg); }

    .sidebar .sidebar-heading,
    .sidebar.toggled .sidebar-heading {
        text-align: left;
        padding: 0.75rem 1rem 0.25rem;
        margin: 0;
    }
    .sidebar hr.sidebar-divider { margin: 0.25rem 1rem; }
    .sidebar .nav-item:last-child { margin-bottom: 0; }

    /* Accordion panels render inline (SB Admin positions them as flyouts). */
    .sidebar .nav-item .collapse,
    .sidebar .nav-item .collapsing,
    .sidebar.toggled .nav-item .collapse,
    .sidebar.toggled .nav-item .collapsing {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0.5rem 0.5rem;
        animation: none !important;
    }
    .sidebar .nav-item .collapsing {
        display: block;
        transition: height 0.2s ease;
    }
    .sidebar .nav-item .collapse .collapse-inner,
    .sidebar .nav-item .collapsing .collapse-inner {
        min-width: 0;
        margin: 0 0 0.5rem;
        padding: 0.25rem 0;
        box-shadow: none;
        border: 1px solid var(--border-color);
        background-color: var(--bg-card) !important;
    }
    .sidebar .collapse-inner .collapse-header {
        padding: 0.5rem 1rem 0.25rem;
        white-space: normal;
    }
    .sidebar .collapse-inner .collapse-item {
        padding: 0.7rem 1rem;
        margin: 0;
        min-height: 44px;
        white-space: normal;
        line-height: 1.3;
        display: flex;
        align-items: center;
    }
    .sidebar .collapse-inner .collapse pl-3,
    .sidebar .collapse-inner .collapse.pl-3 { padding-left: 0 !important; }
    .sidebar .collapse-inner .collapse .collapse-item { padding-left: 1.75rem; }

    /* SKU lookup inside the drawer: comfortable, no iOS zoom. */
    .sidebar .form-inline { display: flex; gap: 0.5rem; flex-wrap: nowrap; }
    .sidebar .form-inline .form-control {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        min-height: 44px;
        font-size: 16px;
    }
    .sidebar .form-inline .btn { min-height: 44px; padding: 0.25rem 0.9rem; }

    /* Desktop-only chrome. */
    .sidebar #sidebarToggle, .sidebar .sidebar-divider.d-md-block { display: none !important; }

    /* Topbar: brand in the middle, hamburger left, user right. */
    .topbar { min-height: 3.75rem; padding: 0.25rem 0.5rem; }
    .topbar-brand { display: inline-flex; margin-right: auto; }
    #sidebarToggleTop {
        min-width: 44px;
        min-height: 44px;
        margin-right: 0.5rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }
    .topbar .img-profile { width: 2rem; height: 2rem; }
    .topbar .navbar-nav .nav-item .nav-link { min-height: 44px; display: inline-flex; align-items: center; }
    .topbar .dropdown-menu { max-width: calc(100vw - 1.5rem); }
    .topbar .dropdown-item { min-height: 44px; display: flex; align-items: center; }
    .topbar.mb-4 { margin-bottom: 1rem !important; }

    .sticky-footer { padding: 0.75rem 0; }
    .sticky-footer .copyright { font-size: 0.75rem; }
}

/* ============================================================
   3. Small-screen page repairs (< 768px) — apply to every page
   ============================================================ */
@media (max-width: 767.98px) {
    html, body { overflow-x: hidden; }
    #content-wrapper, #content { min-width: 0; }

    .container-fluid {
        padding: 0.75rem 0.75rem 1rem;
        overflow-x: clip;
    }

    /* Type scale. */
    h1, .h1, h1.h3 { font-size: 1.4rem; overflow-wrap: anywhere; }
    h2, .h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
    h3, .h3 { font-size: 1.1rem; }

    /* Tables scroll inside their container instead of widening the page.
       A bare <table class="table"> becomes its own scroll box; one already
       wrapped in .table-responsive(-mobile) is left as a real table. */
    .container-fluid table.table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive > table.table,
    .table-responsive-mobile > table.table,
    .table-responsive > .table,
    .table-responsive-mobile > .table {
        display: table;
        overflow: visible;
    }
    .table-responsive, .table-responsive-mobile {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table th, .table td {
        padding: 0.5rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }
    .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Tap targets and iOS zoom. */
    .btn, .form-control, select.form-control, .form-select { min-height: 44px; }
    .btn { white-space: normal; }
    .btn-sm, table .btn, table .btn-sm { min-height: 36px; padding: 0.25rem 0.6rem; font-size: 0.85rem; }
    .btn-group .btn { min-height: 44px; }
    input[type="text"], input[type="number"], input[type="email"], input[type="password"],
    input[type="search"], input[type="url"], input[type="tel"], input[type="date"],
    input[type="datetime-local"], input[type="time"], select, textarea,
    .form-control, .form-select { font-size: 16px; }

    /* Button rows wrap instead of squeezing into tall slivers. */
    .d-flex.gap-1, .d-flex.gap-2, .d-flex.gap-3, .btn-toolbar, .btn-group { flex-wrap: wrap; }
    .btn-group > .btn { flex: 1 1 auto; }
    td .btn + .btn, td form + form, td form + .btn, td .btn + form { margin-top: 0.25rem; }

    /* Heading + actions rows stack. */
    .page-header-row,
    .d-sm-flex.align-items-center.justify-content-between,
    .d-flex.justify-content-between.align-items-center.mb-4,
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }
    .page-header-row > *,
    .d-sm-flex.align-items-center.justify-content-between > *,
    .d-flex.justify-content-between.align-items-center.mb-4 > *,
    .d-flex.justify-content-between.align-items-center.mb-3 > * { width: 100%; }

    .form-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .form-inline .form-control { flex: 1 1 auto; }

    .card { margin-bottom: 1rem; }
    .card-body, .card-header { padding: 0.75rem; }

    .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); }
    .modal-content { max-height: calc(100dvh - 1rem); }
    .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }

    .pagination .page-link {
        min-height: 44px; min-width: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }

    .dropdown-menu { max-width: calc(100vw - 2rem); }
    img { max-width: 100%; height: auto; }

    .fancy-table img.table-img { width: 40px; height: 40px; }
    .fancy-table td.image-column { width: 40px; }
    .media-item { width: 80px; height: 80px; }
    .media-display-item { width: 100px; height: 100px; }
    .memo-summary-box { width: 100%; margin-left: 0; margin-top: 1rem; }

    .row { margin-left: -0.5rem; margin-right: -0.5rem; }
    .col, [class*="col-"] { padding-left: 0.5rem; padding-right: 0.5rem; }

    .alert { padding: 0.75rem 2.5rem 0.75rem 0.75rem; font-size: 0.95rem; }

    /* Search page. */
    .search-hero { padding: 0.75rem; }
    .search-hero h1 { font-size: 1.2rem; }
    .kind-toggle { flex-wrap: nowrap; }
    .kind-toggle .btn { min-width: 0 !important; flex: 1 1 0; }
}

/* Phones in portrait. */
@media (max-width: 575.98px) {
    html { font-size: 93.75%; }
    .container-fluid { padding: 0.75rem 0.75rem 1rem; }
}

/* ============================================================
   4. Tablets (768–991px): rail sidebar is the default; nothing else to do
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .filter-card { max-width: 100%; }
}

/* ============================================================
   5. Print: no chrome
   ============================================================ */
@media print {
    .sidebar, .sidebar-backdrop, .topbar, .sticky-footer, .scroll-to-top { display: none !important; }
    #content-wrapper { margin: 0 !important; }
}