/* ==========================================================================
   Responsive

   Loaded LAST on every layout (storefront + admin/vendor/customer dashboards)
   so it wins over shop.css, dashboard.css and the Start Bootstrap template
   without rewriting any of them.

   Structure
     1. Foundations      - overflow guards, media, tap targets
     2. Storefront       - header, mobile menu drawer, rails, cards, tables
     3. Dashboards       - top bar, sidebar drawer, content, tables, panels
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Foundations
   -------------------------------------------------------------------------- */

/* `clip` rather than `hidden`: it contains a wide child without turning
   <body> into a scroll container, which would break the sticky header. */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: clip;
}

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

img,
video {
    height: auto;
}

/* A flex/grid child that holds text is what actually forces a page wide:
   without min-width:0 the child refuses to shrink below its content. */
.row > [class*="col"] > .card,
.d-flex > .flex-grow-1 {
    min-width: 0;
}

/* Long product/email names must not push cards open. */
h1, h2, h3, h4, h5, h6,
.fw-semibold, .fw-bold, .fw-medium {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Long unbroken strings (URLs, SKUs, tokens) are the usual culprit. */
a, p, span, td, th, li, code {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   Tap targets - 44px is the smallest comfortable touch size.
   Only for genuine controls, so text links inside paragraphs are untouched.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .btn,
    .btn-group > .btn,
    form button[type="submit"] {
        min-height: 44px;
    }

    .form-control,
    .form-select {
        /* 16px stops iOS Safari zooming the viewport on focus. */
        font-size: 16px;
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   2. Storefront
   -------------------------------------------------------------------------- */

/* Announcement bar: three columns of text will not fit a phone. */
@media (max-width: 767.98px) {
    .shop-announce {
        font-size: .72rem;
        text-align: center;
    }

    .shop-announce .container {
        justify-content: center !important;
        gap: .25rem;
        flex-wrap: wrap;
    }
}

/* Category rail: desktop only. Below lg the whole row is replaced by the
   category list inside the mobile drawer (see .shop-mobile-menu below), so
   the rail is hidden rather than scrolled sideways. */
@media (max-width: 991.98px) {
    .shop-cat-rail {
        display: none !important;
    }
}

/* The mega menu is a 500px hover flyout - meaningless on touch, and it would
   overflow any narrow viewport if it ever opened. */
@media (max-width: 991.98px) {
    .mega-menu-dropdown {
        display: none !important;
    }
}

/* ---- Mobile header: logo | search | cart | hamburger ------------------ */

/* The hamburger never appears on desktop - the full link row is shown there. */
.shop-menu-toggle {
    display: none;
}

/* Below lg the storefront bar keeps only the logo, the search box, the cart
   and the hamburger. The wishlist/compare/account/theme links are tagged
   .shop-header-extra in the markup and hidden here; every one of them - plus
   the entire category rail - is listed in the .shop-mobile-menu drawer, so
   nothing becomes unreachable on a phone. */
@media (max-width: 991.98px) {
    .shop-header-extra {
        display: none !important;
    }

    .shop-menu-toggle {
        display: inline-flex;
    }

    /* The wordmark "Shop Hub" is the thing that must not show. The logo image
       alone carries the brand, and the link has an aria-label for screen
       readers. */
    .shop-brand-name {
        display: none;
    }

    .shop-header-inner {
        gap: .6rem;
        padding: .6rem 0;
    }

    /* Let the search take the space the freed-up items were using. */
    .shop-search-wrapper {
        max-width: none;
        min-width: 0;
    }

    /* The search input needs room to shrink, or the logo is pushed off. */
    .shop-search,
    .shop-search .form-control {
        min-width: 0;
    }
}

/* ---- Mobile menu drawer ---------------------------------------------- */

/* Slides in from the right. The wrapper is present in the markup at every
   breakpoint but only rendered below lg (see the rule at the end of this
   block). Opened by #shopMenuToggle, which the header renders. */
.shop-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1090;                     /* above the sticky header (1030) */
    display: none;
}

.shop-mobile-menu.is-open {
    display: block;
}

.shop-mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 34, .55);
    opacity: 0;
    transition: opacity .25s ease;
}

.shop-mobile-menu.is-open .shop-mobile-menu__backdrop {
    opacity: 1;
}

.shop-mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 320px;
    max-width: 86vw;
    background: var(--shop-surface);
    color: var(--shop-ink);
    box-shadow: -14px 0 40px rgba(15, 18, 34, .28);
    transform: translateX(102%);
    transition: transform .28s ease;
    overscroll-behavior: contain;
}

.shop-mobile-menu.is-open .shop-mobile-menu__panel {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .shop-mobile-menu__backdrop,
    .shop-mobile-menu__panel {
        transition: none;
    }
}

.shop-mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-shrink: 0;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--shop-gray-200);
}

.shop-mobile-menu__brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    color: var(--shop-ink);
    font-weight: 800;
    font-size: 1.05rem;
    text-decoration: none;
}

.shop-mobile-menu__brand > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The shared logo partial renders at 56px, which is too tall for this bar. */
.shop-mobile-menu__brand .brand-logo-img {
    height: 34px;
}

.shop-mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 0;
    border-radius: 12px;
    background: var(--shop-gray-100);
    color: var(--shop-gray-700);
    font-size: 1rem;
}

.shop-mobile-menu__close:hover {
    background: var(--shop-gray-200);
    color: var(--shop-ink);
}

.shop-mobile-menu__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .35rem .75rem 1.5rem;
}

.shop-mobile-menu__heading {
    margin: 1rem .5rem .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--shop-gray-400);
}

.shop-mobile-menu__link {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 44px;                  /* comfortable touch target */
    padding: .55rem .6rem;
    border: 0;
    border-radius: .7rem;
    background: none;
    color: var(--shop-gray-700);
    font-size: .92rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.shop-mobile-menu__link:hover,
.shop-mobile-menu__link:focus-visible {
    background: var(--shop-gray-100);
    color: var(--shop-ink);
}

.shop-mobile-menu__link .bi {
    flex-shrink: 0;
    font-size: 1.05rem;
}

.shop-mobile-menu__link > span:not(.shop-mobile-menu__badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-mobile-menu__link--child {
    min-height: 38px;
    padding-left: 1.9rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--shop-gray-500);
}

.shop-mobile-menu__link--danger,
.shop-mobile-menu__link--danger > span {
    color: #dc2626;
}

.shop-mobile-menu__link--danger:hover {
    background: rgba(220, 38, 38, .08);
}

.shop-mobile-menu__badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .35rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--shop-gray-100);
    color: var(--shop-gray-600);
    font-size: .7rem;
    font-weight: 700;
}

/* Keep the page behind the drawer from scrolling, and stop the floating
   buttons (z-index 9999) punching through the 1090 overlay. */
body.shop-menu-open {
    overflow: hidden;
}

body.shop-menu-open .whatsapp-float-btn,
body.shop-menu-open .back-to-top-btn {
    display: none;
}

/* Desktop: the drawer does not exist - the bar shows every link instead. */
@media (min-width: 992px) {
    .shop-mobile-menu {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .shop-header-inner {
        gap: .4rem;
    }

    .shop-navlink {
        padding: .5rem .5rem;
    }

    /* Keep the red cart count visible even when its label is hidden. */
    .shop-badge-count {
        top: -2px;
        right: -2px;
    }

    /* The search submit button is redundant next to the magnifier icon. */
    .shop-search .btn-submit {
        display: none;
    }
}

/* Toasts were a fixed 300px min-width plus page padding - wider than a 320px
   phone. */
@media (max-width: 575.98px) {
    .toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        align-items: stretch;
    }

    .toast-notification {
        min-width: 0;
        width: 100%;
        max-width: none;
    }
}

/* Tables: let them scroll inside their card rather than widening the page.
   ::-webkit-scrollbar keeps a visible affordance for mouse users. */
@media (max-width: 767.98px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tables that are not already wrapped still get a scroll region. */
    .card .table:not(.table-responsive) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Cart / checkout / product detail side-by-side columns already stack via
   Bootstrap's col-lg-*, but the sticky summary panels are pinned with a large
   top offset that looks broken once they become static. */
@media (max-width: 991.98px) {
    .shop-sticky-card,
    .shop-summary-card,
    .checkout-card.summary {
        position: static !important;
        top: auto !important;
        margin-top: 1rem;
    }
}

/* Quantity steppers and other fixed-size control clusters. */
@media (max-width: 575.98px) {
    .quantity-box button {
        width: 44px;
        height: 44px;
    }
}

/* --------------------------------------------------------------------------
   3. Dashboards (admin + vendor + customer)
   -------------------------------------------------------------------------- */

/* ---- 3a. Top bar ------------------------------------------------------- */

/* The bar is one flex row: toggle + brand + search + store pill + 3 icon
   buttons + avatar. That is ~700px of content and it has to fit a 360px
   phone, so the decorative search is dropped first (it is
   `onsubmit="return false"` - it never submitted anything anyway). */
@media (max-width: 1199.98px) {
    .dashboard-topbar__search {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .dashboard-topbar__inner {
        padding: .6rem .9rem;
        gap: .5rem;
    }

    /* Let the brand text shrink instead of forcing the bar wider. */
    .dashboard-topbar__start {
        min-width: 0;
        flex: 1 1 auto;
    }

    .dashboard-topbar__brand {
        min-width: 0;
    }

    .dashboard-topbar__brand-text {
        min-width: 0;
        overflow: hidden;
    }

    .dashboard-topbar__brand-name,
    .dashboard-topbar__page-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dashboard-topbar__end {
        gap: .35rem;
        flex-shrink: 0;
    }
}

/* On the narrowest screens the store pill keeps only its icon. The label is
   still announced via the icon's title/aria, and the full label stays in the
   user dropdown. */
@media (max-width: 575.98px) {
    .dashboard-topbar__store-pill {
        display: none !important;
    }

    .dashboard-topbar__brand {
        display: none !important;
    }

    .dashboard-topbar__search {
        display: none !important;
    }

    .dashboard-topbar__icon-btn:not(.dashboard-topbar__icon-btn--dot) {
        display: none !important;
    }

    .dashboard-topbar__avatar {
        display: none !important;
    }

    .dashboard-topbar__user-role {
        display: none !important;
    }

    .dashboard-topbar__chevron {
        display: none !important;
    }

    .dashboard-topbar__logo,
    .dashboard-topbar__toggle {
        width: 34px;
        height: 34px;
    }

    .dashboard-topbar__icon-btn {
        width: 34px;
        height: 34px;
    }
}

/* ---- 3b. Sidebar drawer ------------------------------------------------ */

/* dashboard.css declared the mobile drawer BACKWARDS: `body:not(.sb-sidenav-
   toggled)` translated the sidebar to 0, so a phone loaded with the sidebar
   covering 225px of a 360px screen, and the backdrop rule (which fires on the
   class) contradicted it. These rules correct the direction and give all
   three layouts the same overlay behaviour, not just the admin one.

   `!important` is not decoration here: dashboard.css ships
   `body:not(.sb-sidenav-toggled) #layoutSidenav #layoutSidenav_nav {
        transform: translateX(0) }`
   (2 ids + 1 class + 1 element) and again in its "interaction polish" block,
   which outranks a plain `#layoutSidenav #layoutSidenav_nav` (2 ids) no
   matter how late this file loads. Without the flag the drawer stayed open
   on every dashboard page the moment the viewport dropped below lg. */
@media (max-width: 991.98px) {
    /* Closed by default. */
    #layoutSidenav #layoutSidenav_nav {
        transform: translateX(-101%) !important;
        width: 280px;
        max-width: 82vw;
        z-index: 1036;
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }

    /* sb-sidenav-toggled means "drawer open" here (the toggle script in
       partials/dashboard-topbar.blade.php agrees). */
    body.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
        transform: translateX(0) !important;
    }

    /* Content goes full width under the overlay. */
    body > #layoutSidenav_content,
    #layoutSidenav > #layoutSidenav_content,
    #layoutSidenav_content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    body.dashboard-admin-workspace > #layoutSidenav_content {
        left: 0;
        width: 100%;
    }

    /* dashboard.css drew its own backdrop on the admin content pane. Two
       dimming layers would double-darken the page, so that one is switched
       off and a single overlay is used for all three layouts. */
    body.sb-sidenav-toggled > #layoutSidenav_content::before {
        display: none !important;
    }

    body.sb-sidenav-toggled::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 18, 34, .5);
        z-index: 1035;
    }

    body.sb-sidenav-toggled .vendor-backdrop {
        display: none !important;
    }
}

/* ---- 3c. Content ------------------------------------------------------- */

@media (max-width: 991.98px) {
    /* Dashboard content must never be pinned to a fixed height. */
    #layoutSidenav_content {
        min-height: 0;
    }

    .dashboard-charts .dashboard-panel__body,
    .dashboard-panel__body {
        min-width: 0;
    }

    /* SimpleDataTables renders its own wrapper; let it scroll. */
    .datatable-wrapper,
    .dataTables_scrollBody {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hub-page-head,
    .dashboard-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .hub-page-head__actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .hub-page-head__actions .btn {
        flex: 1 1 auto;
    }
}

/* Tables inside dashboard cards scroll rather than stretch the page.
   `display: block` makes the table itself the scroll container; the row
   groups are deliberately LEFT as row groups so the browser wraps them in a
   single anonymous table box and the header still lines up with the body.
   (The previous `display: table` on thead/tbody generated two separate
   tables, so every header drifted out of alignment with its column.) */
@media (max-width: 767.98px) {
    #layoutSidenav_content table.table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    #layoutSidenav_content .table-responsive,
    #layoutSidenav_content .dataTables_wrapper {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* The label column of a two-column detail table must not be crushed. */
    #layoutSidenav_content table.table th,
    #layoutSidenav_content table.table td {
        white-space: nowrap;
    }

    #layoutSidenav_content table.table td:last-child,
    #layoutSidenav_content table.table th:last-child {
        white-space: normal;
    }
}

/* ---- 3d. Cards, panel heads and controls ------------------------------- */

@media (max-width: 991.98px) {
    /* Panel/card headers pair a title with an action - stack them once the
       row no longer fits instead of letting the title wrap to three lines. */
    .dashboard-panel__head,
    .hub-card__head,
    .card-header {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    .dashboard-panel__head > div,
    .hub-card__head > div {
        min-width: 0;
    }

    /* Filter/search rows in list pages: full-width controls read better than
       two cramped half columns on a phone. */
    .card-body > .row.g-2 > [class*="col-md"],
    .card-body > .row.g-3 > [class*="col-md"] {
        min-width: 0;
    }

    /* Bootstrap's default 1rem card padding wastes a phone's width. */
    .card-body {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .hub-tile,
    .dashboard-stat-card,
    .dashboard-card {
        padding: 1rem;
    }

    /* Long action rows (Export / Print / New) fill the width instead of
       squeezing onto one line. */
    .hub-page-head__actions .btn {
        flex: 1 1 auto;
    }

    /* Pagination and list pagers stay inside the viewport. */
    .pagination {
        flex-wrap: wrap;
        row-gap: .25rem;
    }

    /* Modals nearly full-screen so their forms stay usable. */
    .modal-dialog {
        margin: .5rem;
    }

    /* Nested tab bars scroll sideways instead of wrapping to three lines. */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* Keep dashboard content clear of the fixed WhatsApp FAB. */
    #layoutSidenav_content,
    .vendor-main-content,
    .user-main-content {
        padding-bottom: 5rem !important;
    }
}