/**
 * Mobile-first repairs for SB Admin 2 layout.
 *
 * Loaded after sb-admin-2.min.css, shivam-theme.css, and custom.css so its
 * rules win when they need to. Scoped to actual mobile widths so desktop is
 * untouched.
 *
 * Design goals:
 *   - Tables never cause page-wide horizontal scroll (wrap in scroll containers).
 *   - Tap targets meet the 44×44px minimum.
 *   - iOS doesn't zoom on input focus (16px+ font-size).
 *   - Sidebar feels like a native drawer (off-canvas + scrim + click-outside).
 *   - Existing Bootstrap classes (`btn-block-mobile`, `d-md-none`) keep working.
 */

/* ============================================================
   1. Universal small-screen fixes (≤ 767.98px)
   ============================================================ */
@media (max-width: 767.98px) {

    /* --- Container padding ---
       Default container-fluid padding is too generous for a 360px screen. */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* --- Tables: never let them break out of the viewport ---
       A bare <table> at 100% width with many columns will cause body-level
       horizontal scroll on phones. Force every table to live inside a scroll
       container, even if the page didn't use .table-responsive. */
    .container-fluid table.table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* If the developer already wrapped it in .table-responsive, prefer that
       (revert the override so the wrapper does its job and the inner <table>
       stays a normal table). */
    .table-responsive > table.table,
    .table-responsive > .table {
        display: table;
        overflow: visible;
    }

    /* --- Headings ---
       Tighter scale so they don't dominate small screens. */
    h1.h3 { font-size: 1.4rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    /* --- Buttons & tap targets ---
       Apple HIG / WCAG recommend 44×44px minimum. SB Admin's default
       `padding: 0.375rem 0.75rem` produces ~32px tall buttons. */
    .btn,
    .btn-sm,
    .form-control,
    .form-select,
    select.form-control,
    input.form-control {
        min-height: 44px;
    }
    /* `.btn-sm` inside dense table rows would balloon row height — keep it
       readable but don't grow it beyond what's already there. */
    table .btn-sm {
        min-height: 36px;
        padding: 0.25rem 0.5rem;
    }

    /* --- Inputs: prevent iOS zoom on focus ---
       Safari iOS zooms when input font-size < 16px. Pin to 16 on mobile. */
    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 {
        font-size: 16px;
    }

    /* --- Action button rows ---
       Many pages render `<form><button>Edit</button></form><form><button>Delete</button></form>`
       inline; crowded on small. Stack with a small gap. */
    td .btn + .btn,
    td form + form,
    td form + .btn,
    td .btn + form {
        margin-top: 0.25rem;
    }
    td .btn,
    td form > .btn {
        display: inline-block;
    }

    /* --- Forms ---
       form-inline doesn't wrap nicely; force columns to stack. */
    .form-inline {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .form-inline .form-control {
        flex: 1 1 auto;
    }

    /* --- Cards ---
       Tighten card padding so content takes precedence over chrome. */
    .card-body {
        padding: 0.75rem;
    }
    .card-header {
        padding: 0.75rem;
    }

    /* --- Page header rows that pair a heading + action(s) ---
       Common pattern: <div class="d-flex justify-content-between"><h1>Title</h1><div>buttons</div></div>
       On mobile, stack vertically with the buttons full-width. */
    .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;
    }
    .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%;
    }

    /* --- Modals ---
       Make modals scrollable on small so long forms aren't trapped. */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    .modal-content {
        max-height: calc(100vh - 1rem);
    }
    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Pagination ---
       Page-link buttons need at least 44px to be tappable. */
    .pagination .page-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Topbar ---
       The toggle button needs a comfortable hit area. */
    #sidebarToggleTop {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Search page: stack filter sidebar above results ---
       Already col-lg-9/col-lg-3, so it stacks at <992. The form rows in the
       hero may be too wide on phones — tighten the gap. */
    .search-hero {
        padding: 0.75rem;
    }
    .search-hero h1 { font-size: 1.2rem; }
    .kind-toggle .btn {
        min-width: 0;
        flex: 1;
    }
}

/* ============================================================
   2. Phone-only fixes (≤ 575.98px)
   ============================================================ */
@media (max-width: 575.98px) {
    /* Stack the topbar's user dropdown to keep it from cramping the nav row. */
    .topbar .img-profile {
        width: 32px;
        height: 32px;
    }

    /* Sidebar mini-form (SKU input) is too narrow at 100px. Let it grow. */
    #productSkuInput,
    #jewelrySkuInput {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    #productSkuForm,
    #jewelrySkuForm {
        display: flex;
        gap: 0.5rem;
        align-items: stretch;
    }
}

/* ============================================================
   3. Mobile sidebar drawer behavior
   ============================================================ */
@media (max-width: 767.98px) {
    /* Off-canvas sidebar.
       Convention used by this app's sb-admin-2.min.js (verified at lines
       22-26 of that file): on mobile, `.sidebar.toggled` means CLOSED
       (off-canvas); without `.toggled` the sidebar is OPEN.
       So OPEN = translateX(0), CLOSED = translateX(-100%). */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 14rem !important;
        z-index: 1050;
        transform: translateX(0);
        transition: transform 250ms ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar.toggled {
        transform: translateX(-100%);
    }
    /* Make sure body content doesn't get pushed by the sidebar on mobile —
       it's an overlay drawer. */
    #content-wrapper {
        margin-left: 0;
    }

    /* Backdrop / scrim for off-canvas sidebar. */
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
    }
    .sidebar-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Hide the desktop sidebar collapse-toggle button on mobile — sidebar is
       always full-width in the drawer. */
    .sidebar #sidebarToggle {
        display: none;
    }

    /* Sidebar nested submenu fix:
       SB Admin 2 positions .collapse absolutely with left: calc(6.5rem + ...)
       — a desktop pattern that pushes nested menus off-screen on mobile.
       Render them inline instead. */
    .sidebar .nav-item .collapse,
    .sidebar .nav-item .collapsing {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
    }
    .sidebar .nav-item .collapse .collapse-inner,
    .sidebar .nav-item .collapsing .collapse-inner {
        box-shadow: none;
        background: transparent;
    }

    /* Sidebar nav-link width: SB Admin 2 hardcodes width: 6.5rem; reset to fluid. */
    .sidebar .nav-item .nav-link {
        width: auto;
        text-align: left;
    }
    .sidebar .nav-item .nav-link span {
        font-size: 0.95rem;
        display: inline-block;
        margin-left: 0.5rem;
    }

    /* Larger tap targets for sidebar links. */
    .sidebar .nav-item .nav-link,
    .sidebar .nav-item .collapse-item {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    /* Prevent body scrolling when drawer is open (so the page behind doesn't
       slide around when the user scrolls inside the menu). */
    body.sidebar-mobile-open {
        overflow: hidden;
    }
}

/* ============================================================
   4. Tablet adjustments (768–991px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* On tablets, the search page's sidebar filter is col-lg-3 → stacks above
       results (col-lg-9). Cap the filter card width so it doesn't run edge-to-edge. */
    .filter-card {
        max-width: 100%;
    }
}