/* =========================================================
   Responsive layer for Wholesaler App
   Loaded after style.css — mobile-first refinements for
   the admin panel and (especially) the field executive UI.
   ========================================================= */

:root {
    --bottom-nav-height: 60px;
}

* { -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
    overflow-x: hidden;
}

img, svg { max-width: 100%; }

/* -----------------------------------------------------------
   General layout / spacing
----------------------------------------------------------- */
.container-fluid {
    max-width: 1600px;
}

@media (max-width: 767.98px) {
    .container-fluid.py-4.px-4 {
        padding: 16px !important;
    }
    h4 { font-size: 1.15rem; }
    h5 { font-size: 1.05rem; }
    h6 { font-size: .95rem; }
    .card { border-radius: 10px; }
    .card.p-4 { padding: 1rem !important; }
    /* Stack header rows (title + action button) instead of squeezing them */
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .d-flex.justify-content-between.align-items-center.mb-3 h4 {
        margin-bottom: 0;
    }
}

/* -----------------------------------------------------------
   Touch-friendly controls
----------------------------------------------------------- */
@media (max-width: 767.98px) {
    .btn {
        min-height: 44px;
        padding-top: .55rem;
        padding-bottom: .55rem;
    }
    .btn-sm {
        min-height: 38px;
    }
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }
    /* Filter / search rows: full-width stacked fields */
    form.row.g-2 > [class^="col-"],
    form.row.g-2 > [class*=" col-"] {
        width: 100%;
    }
}

/* -----------------------------------------------------------
   Navbar
----------------------------------------------------------- */
.navbar-brand {
    font-size: 1.05rem;
}
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: 75vh;
        overflow-y: auto;
    }
    .navbar-nav .nav-link {
        padding-top: .65rem;
        padding-bottom: .65rem;
    }
    .navbar-nav .dropdown-menu {
        border: none;
        padding-left: .5rem;
    }
}

/* -----------------------------------------------------------
   Stat cards / dashboard tiles
----------------------------------------------------------- */
@media (max-width: 575.98px) {
    .stat-card { padding: 16px; }
    .stat-card h3 { font-size: 1.5rem; }
}

/* -----------------------------------------------------------
   Responsive tables -> stacked cards
   Add class "table-cards" to any <table> inside a
   .table-responsive wrapper to enable this behaviour.
   responsive.js copies each <thead> label onto the matching
   <td data-label="..."> automatically.
----------------------------------------------------------- */
@media (max-width: 767.98px) {
    .table-responsive table.table-cards {
        border: none;
    }
    .table-responsive table.table-cards thead {
        display: none;
    }
    .table-responsive table.table-cards,
    .table-responsive table.table-cards tbody,
    .table-responsive table.table-cards tr,
    .table-responsive table.table-cards td {
        display: block;
        width: 100%;
    }
    .table-responsive table.table-cards tr {
        margin-bottom: 12px;
        border: 1px solid #e3e6ea;
        border-radius: 10px;
        padding: 8px 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }
    .table-responsive table.table-cards tr:last-child {
        margin-bottom: 0;
    }
    .table-responsive table.table-cards td {
        border: none;
        border-bottom: 1px solid #f1f2f4;
        padding: 8px 2px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        text-align: right;
    }
    .table-responsive table.table-cards td:last-child {
        border-bottom: none;
    }
    .table-responsive table.table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        text-align: left;
        flex-shrink: 0;
    }
    .table-responsive table.table-cards td[data-label=""]::before,
    .table-responsive table.table-cards td:not([data-label])::before {
        content: none;
    }
    /* Cells that hold a form control (select/input) or a button
       group get a stacked layout so the control gets full width */
    .table-responsive table.table-cards td.td-field {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    .table-responsive table.table-cards td.td-field::before {
        margin-bottom: 4px;
    }
    .table-responsive table.table-cards td.td-action {
        justify-content: flex-end;
    }
    /* Single "no records" row shouldn't look like a card */
    .table-responsive table.table-cards tbody tr:has(td[colspan]) {
        border: none;
        box-shadow: none;
        padding: 12px 0;
        text-align: center;
    }
    .table-responsive table.table-cards tbody tr:has(td[colspan]) td {
        display: block;
        text-align: center;
    }
    .table-responsive table.table-cards tbody tr:has(td[colspan]) td::before {
        content: none;
    }
}

/* Tables that intentionally stay tabular (e.g. printable invoice)
   just keep a comfortable min-width so table-responsive can scroll */
.table-static {
    min-width: 480px;
}

/* -----------------------------------------------------------
   Order item builder (order_add.php / order_edit.php)
----------------------------------------------------------- */
@media (max-width: 767.98px) {
    #itemsTable .product-select { margin-bottom: 4px; }
}

/* -----------------------------------------------------------
   Sticky mobile form actions (Submit / Cancel)
----------------------------------------------------------- */
@media (max-width: 767.98px) {
    .form-actions {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        gap: 8px;
        background: #fff;
        padding: 10px 0;
        margin-top: 12px;
        box-shadow: 0 -3px 10px rgba(0,0,0,.08);
        z-index: 1020;
    }
    .form-actions .btn {
        flex: 1;
        margin: 0 !important;
    }
    body.has-bottom-nav .form-actions {
        bottom: var(--bottom-nav-height);
    }
}

/* -----------------------------------------------------------
   Field executive bottom mobile nav
----------------------------------------------------------- */
.bottom-nav {
    display: none;
}
@media (max-width: 767.98px) {
    body.has-bottom-nav {
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--bottom-nav-height);
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
        border-top: 1px solid #e3e6ea;
        box-shadow: 0 -2px 10px rgba(0,0,0,.08);
        z-index: 1030;
    }
    .bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: #6c757d;
        text-decoration: none;
        font-size: .68rem;
        line-height: 1;
    }
    .bottom-nav a i {
        font-size: 1.2rem;
    }
    .bottom-nav a.active {
        color: var(--bs-primary, #0d6efd);
    }
}

/* -----------------------------------------------------------
   Login page
----------------------------------------------------------- */
@media (max-width: 575.98px) {
    .login-wrapper { padding: 16px; }
    .login-card { max-width: 100%; }
}

/* -----------------------------------------------------------
   Print (unchanged behaviour, kept intact)
----------------------------------------------------------- */
@media print {
    .bottom-nav { display: none !important; }
    .form-actions { position: static !important; box-shadow: none !important; }
}

/* -----------------------------------------------------------
   Bulk/report print fix
   A printed page's content width is usually well under the
   767.98px breakpoint above, so table.table-cards (built for
   phone screens) was collapsing into stacked "cards" on every
   printed report (Orders Report, Customer Sales, Field
   Performance, Pick-up List, Customer Balance, Inventory) —
   i.e. exactly the multi-row "bulk print" pages. Force those
   tables back into a normal table layout for print, regardless
   of the max-width rules above.
----------------------------------------------------------- */
@media print {
    .table-responsive {
        overflow: visible !important;
    }
    .table-responsive table.table-cards {
        border: inherit;
    }
    .table-responsive table.table-cards thead {
        display: table-header-group !important;
    }
    .table-responsive table.table-cards,
    .table-responsive table.table-cards tbody {
        display: table;
        width: 100%;
    }
    .table-responsive table.table-cards tbody {
        display: table-row-group;
    }
    .table-responsive table.table-cards tr {
        display: table-row !important;
        margin-bottom: 0;
        border: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
    .table-responsive table.table-cards td {
        display: table-cell !important;
        border: none;
        border-bottom: 1px solid #dee2e6;
        padding: 6px 8px;
        text-align: left;
        gap: 0;
    }
    .table-responsive table.table-cards td::before {
        content: none !important;
    }
    .table-responsive table.table-cards tbody tr:has(td[colspan]) td {
        display: table-cell !important;
        text-align: center;
    }
}