/*
 * Mobile navigation, one file for every area: storefront, customer area,
 * tenant admin, platform admin. Below 900px it is the navigation; above it
 * the area's own sidebar or top menu takes over and none of this renders.
 *
 * Colours come from whatever palette the page already set, so the drawer in
 * a tenant's storefront is that tenant's, and the one in the admin is the
 * admin's. No palette is written here beyond the last-resort fallbacks.
 */

.mobile-nav {
    --nav-accent: var(--primary, var(--accent, #2563eb));
    --nav-ink: var(--primary-contrast, var(--accent-ink, #ffffff));
    --nav-surface: var(--surface, #ffffff);
    --nav-border: var(--border, rgba(0, 0, 0, .12));
    display: none;
}

@media (max-width: 899px) {

.mobile-nav { display: block; }

.mobile-nav-backdrop { position: fixed; inset: 0; max-width: 100vw; z-index: 55; background: rgba(0, 0, 0, .45); }

.mobile-drawer {
    position: fixed; z-index: 60; top: 0; bottom: 0; inset-inline-start: 0;
    width: min(19rem, 86vw); display: flex; flex-direction: column; gap: var(--gap-inline);
    padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    border-inline-end: 1px solid var(--nav-border);
    border-start-end-radius: 20px; border-end-end-radius: 20px;
    background: var(--nav-surface); color: var(--text);
    box-shadow: 0 0 40px rgba(0, 0, 0, .3);
    animation: drawer-in .18s ease-out;
}
[dir="rtl"] .mobile-drawer { animation-name: drawer-in-rtl; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes drawer-in-rtl { from { transform: translateX(100%); } to { transform: none; } }

.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inline); }
.drawer-title { margin: 0; font-weight: 800; }
.drawer-currency { display: flex; }
.drawer-currency .currency-pill {
    display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: 999px;
    border: 1px solid var(--nav-border); color: var(--muted); font-size: .8rem; font-weight: 700;
}
.drawer-currency .currency-pill:hover { text-decoration: none; border-color: var(--nav-accent); }
/* The parent opens its drawer with the balance, in the accent, and what you
   do with it behind a chevron. */
.drawer-balance-menu { position: relative; margin: 0 0 var(--gap-inline); }
.drawer-balance-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inline); width: 100%; padding: var(--space-3) var(--space-4); font: inherit; font-weight: 800; border: 0; border-radius: var(--radius-sm, 10px); background: var(--primary, #f0b90b); color: var(--primary-contrast, #1a1300); cursor: pointer; }
.drawer-balance-chip[aria-expanded=true] .select-caret { transform: rotate(90deg); }
/* Opened in place, pushing the menu down, rather than laid over it. The
   drawer is glass, and a box with a backdrop-filter is the backdrop root of
   everything inside it: a list floated over the drawer's own rows could not
   blur them, so the rows read straight through the currencies. With nothing
   underneath there is nothing to read through, and the drawer scrolls if the
   list is long. */
.drawer-balance-panel { margin-top: var(--space-2); display: grid; gap: var(--space-1); padding: var(--space-2); background: var(--surface, #fff); border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm, 10px); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.drawer-balance-panel a { display: block; padding: var(--space-3); border-radius: var(--radius-sm, 10px); color: var(--text, #111); }
.drawer-balance-panel a:hover { background: var(--surface-2, rgba(0, 0, 0, .05)); text-decoration: none; }

.drawer-user {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: center;
    padding: var(--pad-card-tight); border-radius: var(--radius, 16px); background: var(--surface-2, rgba(0, 0, 0, .05));
}
.drawer-avatar {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px;
    background: var(--nav-accent); color: var(--nav-ink); font-weight: 800;
}
/* The name and the balance are both margin-free, and this wrapper cancelled
   the drawer grid's gap for them, so the two sat line on line; and with an
   automatic minimum a long shop name widened the whole drawer. */
.drawer-user-text { display: grid; gap: var(--space-1); min-width: 0; }
.drawer-welcome { margin: 0; font-weight: 700; }
.drawer-balance { margin: 0; color: var(--muted); font-size: .85rem; font-weight: 700; }
.drawer-user-actions { grid-column: 1 / -1; display: flex; gap: var(--gap-inline); flex-wrap: wrap; }
.drawer-user-actions form { margin: 0; }

.drawer-menu { display: flex; flex-direction: column; gap: var(--space-1); min-height: 0; overflow-y: auto; }
.drawer-item {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: 999px;
    color: var(--text); font-weight: 600;
}
.drawer-item:hover { text-decoration: none; background: var(--surface-2, rgba(0, 0, 0, .05)); }
.drawer-item.is-active { background: var(--nav-accent); color: var(--nav-ink); }
.drawer-item.is-active svg, .drawer-item.is-active [data-lucide] { color: var(--nav-ink); }

.tab-bar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
    /* One equal column per tab, however many there are. auto-fit with a
       zero minimum is degenerate: no number of tracks ever fails to
       fit, so the count is unbounded, the tabs size to their content
       and the bar came out 1109px wide inside a 414px phone. The page
       then scrolled sideways and only the first two tabs were on it. */
    /* minmax(0, 1fr), not 1fr. A 1fr track is minmax(auto, 1fr) and that auto
       minimum is the column's own min-content width, so five tabs with words
       like Dashboard and Customers in them made a 977px bar inside a 380px
       phone - and because the bar is fixed and as wide as its content, the
       whole document went with it: every admin page scrolled sideways and
       three of the five tabs were off the screen. The same trap as the
       auto-fit note above, one line down. The labels ellipsis instead. */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    /* And clamped to the window itself, not to whatever box turns out to be
       holding it. Measured on the services screen: the bar was 977px inside a
       380px phone, the document went with it, and the page scrolled sideways
       with three of the five tabs off the edge. */
    max-width: 100vw; overflow: hidden;
    background: var(--nav-surface); border-top: 1px solid var(--nav-border);
    padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar a { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-1); min-width: 0; color: var(--muted); font-size: .68rem; font-weight: 700; text-align: center; }
.tab-bar a:hover { text-decoration: none; }
.tab-bar a.is-active { color: var(--nav-accent); }
.tab-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; }
.tab-bar a.is-active .tab-icon {
    transform: translateY(-.4rem); background: var(--nav-accent); color: var(--nav-ink);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6);
}
.tab-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The page keeps room for the bar, and anything else pinned low moves above it. */
body:has(.tab-bar) { padding-bottom: calc(3.9rem + env(safe-area-inset-bottom)); }
body:has(.tab-bar) .whatsapp-fab { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
body:has(.tab-bar) .app-banner, body:has(.tab-bar) .low-balance { bottom: calc(3.9rem + env(safe-area-inset-bottom)); }

/* Glass from the shared tokens in glass.css. This sheet used to carry its
   own @supports and its own reduced-transparency opt-out with its own blur
   and alpha, which is two places to change one finish; both now come from
   the token set. --nav-surface is the surface these belong to, so it is what
   the glass is mixed from. */
    .mobile-drawer, .tab-bar, .drawer-balance-panel {
        --surface: var(--nav-surface);
        background-color: var(--glass-bg);
        background-image: var(--glass-image);
        -webkit-backdrop-filter: var(--glass-filter);
        backdrop-filter: var(--glass-filter);
        border: 1px solid var(--glass-edge);
        box-shadow: var(--glass-shadow);
    }

    /* The active tab and the active drawer row keep their accent fill and
       take the gloss over it. */
    .drawer-balance-chip, .drawer-item.is-active, .tab-bar a.is-active .tab-icon {
        background-image: var(--glass-image);
    }

@media (prefers-reduced-motion: reduce) {
    .mobile-drawer { animation: none; }
    .tab-bar a.is-active .tab-icon { transform: none; }
}

}

@media print { .mobile-nav { display: none !important; } }