/* =========================================================
   MOYLI v1.0.19 — MOBILE-FIRST LAYER
   Loaded after style.css and design-system.css. Everything here is scoped to
   max-width: 800px (phones / small tablets) except the hidden defaults, so the desktop
   layout, including the desktop sidebar, is untouched.

   Fixed bars live OUTSIDE the zoomed content only in the sense of z-order: <body> carries
   the typography preset (zoom), so bars scale with the chosen text size and every inset
   below is divided by --ds-zoom to keep the real device safe area exact.
   ========================================================= */

.m-nav, .m-sheet { display: none; }

@media (max-width: 800px) {

    :root {
        --m-nav-h: 62px;
        --m-safe-b: calc(env(safe-area-inset-bottom, 0px) / var(--ds-zoom, 1));
        --m-safe-t: calc(env(safe-area-inset-top, 0px) / var(--ds-zoom, 1));
        --m-safe-l: calc(env(safe-area-inset-left, 0px) / var(--ds-zoom, 1));
        --m-safe-r: calc(env(safe-area-inset-right, 0px) / var(--ds-zoom, 1));
    }

    /* theme tokens (--ds-*) are defined on <body>, so these must be too */
    body {
        --m-bar-bg: var(--ds-surface, #07341c);
        --m-bar-border: var(--ds-border, rgba(43, 234, 132, 0.25));
    }

    /* the hamburger is gone: page headers no longer reserve its 56 px */
    :is(
        .topbar:not([hidden]),
        #salesPage .sales-header,
        #clientsPage .clients-page__head,
        #warehousePage .warehouse-page__head,
        #notificationsPage .notifications-page__head
    ) { padding: 10px 12px !important; }

    /* the bottom navigation replaces the floating hamburger */
    .mobile-menu-button { display: none !important; }

    .app .main {
        padding-top: calc(12px + var(--m-safe-t)) !important;
        padding-left: calc(12px + var(--m-safe-l)) !important;
        padding-right: calc(12px + var(--m-safe-r)) !important;
        padding-bottom: calc(var(--m-nav-h) + var(--m-safe-b) + 20px) !important;
    }

    /* ---------------- bottom navigation ---------------- */
    .m-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 800;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 0 var(--m-safe-r) var(--m-safe-b) var(--m-safe-l);
        background: var(--m-bar-bg);
        border-top: 1px solid var(--m-bar-border);
        box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.14);
        transition: transform 0.18s ease;
    }

    .m-nav__item {
        position: relative;
        min-width: 0;
        min-height: var(--m-nav-h);
        padding: 8px 2px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0;
        background: transparent;
        color: var(--ds-text-soft, #8fbca4);
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .m-nav__item span { max-width: 100%; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
    .m-nav__icon { width: 24px; height: 24px; flex: 0 0 24px; stroke: currentColor; fill: none; }
    .m-nav__item svg[fill="currentColor"] { fill: currentColor; stroke: none; }

    .m-nav__item.is-active { color: var(--ds-accent-strong, #17c964); }
    .m-nav__item.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 22%;
        right: 22%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--ds-accent-strong, #17c964);
    }
    .m-nav__item:active { background: var(--ds-accent-soft, rgba(43, 234, 132, 0.12)); }
    .m-nav__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ds-accent-strong, #17c964); }

    .m-nav__badge,
    .m-sheet__badge {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #e5313f;
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
    }
    .m-nav__badge { position: absolute; top: 6px; left: calc(50% + 6px); }
    .m-nav__badge[hidden], .m-sheet__badge[hidden] { display: none; }

    /* hide fixed bars while the on-screen keyboard is open or a full-screen modal is up */
    body.m-kb-open .m-nav { transform: translateY(110%); }
    body.m-sheet-open { overflow: hidden; }

    /* ---------------- "Boshqa" sheet ---------------- */
    .m-sheet { position: fixed; inset: 0; z-index: 1500; display: block; }
    .m-sheet[hidden] { display: none; }
    .m-sheet__backdrop { position: absolute; inset: 0; background: rgba(2, 14, 8, 0.55); }
    .m-sheet__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: calc((100dvh / var(--ds-zoom, 1)) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px calc(16px + var(--m-safe-r)) calc(18px + var(--m-safe-b)) calc(16px + var(--m-safe-l));
        border-radius: 22px 22px 0 0;
        background: var(--ds-surface, #07341c);
        color: var(--ds-text, #ecfdf4);
        border: 1px solid var(--m-bar-border);
        border-bottom: 0;
        box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.32);
        animation: m-sheet-in 0.2s ease-out;
    }
    @keyframes m-sheet-in { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .m-sheet__panel { animation: none; } .m-nav { transition: none; } }

    .m-sheet__grab { display: block; width: 44px; height: 5px; margin: 4px auto 8px; border-radius: 5px; background: var(--ds-border, rgba(255, 255, 255, 0.25)); }
    .m-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .m-sheet__head h2 { margin: 0; font-size: 20px; color: var(--ds-text, #ecfdf4); }
    .m-sheet__close {
        width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--ds-surface-2, rgba(255, 255, 255, 0.06));
        color: var(--ds-text, #ecfdf4); font-size: 26px; line-height: 1; cursor: pointer;
    }

    .m-sheet__prefs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
    .m-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 14px; background: var(--ds-surface-2, rgba(255, 255, 255, 0.06)); border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12)); }
    .m-seg[hidden] { display: none; }
    .m-seg button {
        min-width: 52px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 11px; background: transparent;
        color: var(--ds-text-soft, #8fbca4); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    }
    .m-seg button.is-active { background: var(--ds-accent-strong, #17c964); color: #ffffff; }

    .m-sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .m-sheet__item {
        position: relative;
        min-height: 64px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
        border-radius: 14px;
        background: var(--ds-surface-2, rgba(255, 255, 255, 0.04));
        color: var(--ds-text, #ecfdf4);
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .m-sheet__item svg { width: 24px; height: 24px; flex: 0 0 24px; stroke: currentColor; fill: none; color: var(--ds-accent-strong, #17c964); }
    .m-sheet__item span { min-width: 0; overflow-wrap: anywhere; }
    .m-sheet__item.is-active { border-color: var(--ds-accent-strong, #17c964); background: var(--ds-accent-soft, rgba(43, 234, 132, 0.12)); }
    .m-sheet__item:focus-visible, .m-seg button:focus-visible, .m-sheet__close:focus-visible { outline: none; box-shadow: var(--ds-focus, 0 0 0 3px rgba(24, 204, 131, 0.45)); }
    .m-sheet__badge { margin-left: auto; }

    /* ---------------- ergonomics: 16 px fields (no iOS focus-zoom), 44 px targets ---------------- */
    .app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    .app select,
    .app textarea { font-size: 16px !important; }
    .app select,
    .app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { min-height: 46px; }
    .app button { touch-action: manipulation; }

    /* modal action rows keep clear of the home-indicator / gesture area */
    .client-vehicle-edit-actions,
    .cash-modal-actions,
    .warehouse-product-modal-actions,
    .sales-client-modal-actions,
    .sales-service-modal-actions { padding-bottom: calc(12px + var(--m-safe-b)); }
}

/* =========================================================
   SALES — step flow on phones (see mobile.js, "sales: step flow")
   ========================================================= */
.m-steps, .m-stepbar { display: none; }

@media (max-width: 800px) {

    :root { --m-bar-h: 112px; }

    /* chips: sticky progress bar */
    body.m-sales-open .m-steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        list-style: none;
        margin: 0 0 12px;
        padding: 8px 0;
        position: sticky;
        top: 0;
        z-index: 30;
        background: var(--ds-bg, #031f10);
    }
    .m-steps li { min-width: 0; display: flex; }
    .m-steps button {
        flex: 1;
        min-width: 0;
        min-height: 52px;
        padding: 6px 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.14));
        border-radius: 12px;
        background: var(--ds-surface, #07341c);
        color: var(--ds-text-soft, #8fbca4);
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        touch-action: manipulation;
    }
    .m-steps button b {
        width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
        background: var(--ds-surface-2, rgba(255, 255, 255, 0.08)); color: inherit; font-size: 12px;
    }
    .m-steps button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .m-steps button.is-done b { background: var(--ds-accent-strong, #17c964); color: #ffffff; }
    .m-steps button.is-done { color: var(--ds-text, #ecfdf4); }
    .m-steps button.is-active { border-color: var(--ds-accent-strong, #17c964); color: var(--ds-text, #ecfdf4); box-shadow: inset 0 0 0 1px var(--ds-accent-strong, #17c964); }
    .m-steps button.is-active b { background: var(--ds-accent-strong, #17c964); color: #ffffff; }
    .m-steps button:focus-visible { outline: none; box-shadow: var(--ds-focus, 0 0 0 3px rgba(24, 204, 131, 0.45)); }

    /* only the sections of the current step are shown; the rest stays mounted (state is kept) */
    body.m-sales-open .sales-workspace[data-mstep-active="1"] [data-mstep]:not([data-mstep~="1"]),
    body.m-sales-open .sales-workspace[data-mstep-active="2"] [data-mstep]:not([data-mstep~="2"]),
    body.m-sales-open .sales-workspace[data-mstep-active="3"] [data-mstep]:not([data-mstep~="3"]),
    body.m-sales-open .sales-workspace[data-mstep-active="4"] [data-mstep]:not([data-mstep~="4"]) { display: none !important; }
    /* the checkout panel only holds step 3 / 4 content; the POS layout only step 2 content */
    body.m-sales-open .sales-workspace[data-mstep-active="1"] .sales-pos-layout,
    body.m-sales-open .sales-workspace[data-mstep-active="1"] .sales-checkout,
    body.m-sales-open .sales-workspace[data-mstep-active="2"] .sales-checkout { display: none !important; }
    /* the bar's primary button replaces the inline finish button */
    body.m-sales-open .sales-finish-btn { display: none !important; }

    /* ---------------- action bar ---------------- */
    body.m-sales-open .m-nav { display: none; }
    body.m-sales-open .m-stepbar:not([hidden]) {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 810;
        padding: 8px calc(12px + var(--m-safe-r)) calc(8px + var(--m-safe-b)) calc(12px + var(--m-safe-l));
        background: var(--m-bar-bg);
        border-top: 1px solid var(--m-bar-border);
        box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.14);
    }
    body.m-sales-open .app .main { padding-bottom: calc(var(--m-bar-h) + var(--m-safe-b) + 24px) !important; }
    body.m-kb-open .m-stepbar { display: none !important; }

    .m-stepbar__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
    .m-stepbar__back, .m-stepbar__next {
        min-height: 52px;
        padding: 0 18px;
        border-radius: 14px;
        font: inherit;
        font-size: 16px;
        font-weight: 800;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .m-stepbar__back { border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.2)); background: transparent; color: var(--ds-text, #ecfdf4); }
    .m-stepbar__next { border: 0; background: var(--ds-accent-strong, #17c964); color: #ffffff; min-width: 0; }
    .m-stepbar__next.is-finish { letter-spacing: 0.02em; }
    .m-stepbar__back:focus-visible, .m-stepbar__next:focus-visible { outline: none; box-shadow: var(--ds-focus, 0 0 0 3px rgba(24, 204, 131, 0.45)); }
    .m-stepbar__total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 8px; line-height: 1.15; }
    .m-stepbar__total small { font-size: var(--ds-fs-secondary); color: var(--ds-text-soft, #8fbca4); }
    .m-stepbar__total strong { font-size: 19px; color: var(--ds-text, #ecfdf4); text-align: right; overflow-wrap: anywhere; }
    .m-stepbar__msg {
        margin: 0 0 8px;
        padding: 9px 12px;
        border-radius: 10px;
        background: rgba(229, 49, 63, 0.12);
        border: 1px solid rgba(229, 49, 63, 0.4);
        color: #d6303d;
        font-size: 14px;
        font-weight: 700;
    }
    .m-stepbar__msg[hidden] { display: none; }

    /* ---------------- large controls inside the sale ---------------- */
    #salesWorkspace .sales-payment-methods { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    #salesWorkspace .sales-payment-methods button { min-height: 60px; font-size: 15px; }
    #salesWorkspace .sales-cart-qty button { width: 44px !important; height: 44px !important; font-size: 22px; border-radius: 12px; }
    #salesWorkspace .sales-cart-qty__input { height: 44px; width: 84px; }
    #salesWorkspace .sales-cart-remove { width: 44px !important; height: 44px !important; }
    #salesWorkspace .ds-product-card__add { width: 52px; height: 52px; }
    #salesWorkspace .ds-pill { min-height: 44px; }
    #salesWorkspace .sales-technical-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 800px) {
    /* while a sale is being stepped through, the page chrome above the chips is dropped:
       the bar's Orqaga already leaves the sale, and the chips + strip say where we are */
    body.m-sales-open #salesPage > .sales-header,
    body.m-sales-open #salesWorkspace .sales-workspace__top { display: none !important; }

    .m-who { display: none; }
    body.m-sales-open .m-who:not([hidden]) {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 10px;
        align-items: baseline;
        margin: -4px 0 12px;
        padding: 8px 12px;
        border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.14));
        border-radius: 12px;
        background: var(--ds-surface, #07341c);
        color: var(--ds-text-soft, #8fbca4);
        font-size: 14px;
        font-weight: 600;
    }
    .m-who__name { color: var(--ds-text, #ecfdf4); font-weight: 800; }

    /* heads that hold a button (Tozalash) wrap instead of clipping */
    body.m-sales-open #salesWorkspace .ds-card-head { flex-wrap: wrap; }
    body.m-sales-open #salesWorkspace .ds-clear-btn { margin-left: auto; }
}

@media (max-width: 800px) {
    /* the legacy 760 px scrolling table is replaced by compact cart cards on phones */
    .sales-products-table { overflow: visible !important; }
    .sales-products-table__head { display: none !important; }
    .sales-products-list,
    .sales-product-row--fast { min-width: 0 !important; width: 100%; padding-right: 0 !important; }
}

/* =========================================================
   TABLES AS CARDS (phones) — Ombor, Kassa, Hisobotlar, Arxiv
   mobile.js copies each header title into its cells as data-label; empty cells ("—") get
   data-empty and are skipped. Every action, total, date and filter stays available.
   ========================================================= */
@media (max-width: 800px) {

    :is(.warehouse-products-table, .cash-table-wrap, .reports-table-wrap, .archive-v99__panel) {
        overflow: visible !important;
    }
    :is(.warehouse-products-table__head, .cash-table-head, .reports-table-head, .archive-v99__table-head) {
        display: none !important;
    }
    :is(.warehouse-products-list, .cash-table-body, .reports-table-body, .archive-v99__rows) {
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    :is(.warehouse-product-row, .cash-movement-row, .reports-table-row, .archive-v99__row) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row dense;
        gap: 8px 14px;
        align-items: start;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 0 10px;
        padding: 14px !important;
        border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.14)) !important;
        border-radius: 14px;
        background: var(--ds-surface, #07341c);
        overflow-wrap: anywhere;
    }
    :is(.warehouse-product-row, .cash-movement-row, .reports-table-row, .archive-v99__row):last-child { margin-bottom: 0; }

    :is(.warehouse-product-row, .cash-movement-row, .reports-table-row, .archive-v99__row) > * {
        min-width: 0;
        text-align: left !important;
        justify-content: flex-start !important;
    }
    :is(.warehouse-product-row, .cash-movement-row, .reports-table-row, .archive-v99__row) > [data-empty] { display: none !important; }
    :is(.warehouse-product-row, .cash-movement-row, .reports-table-row, .archive-v99__row) > [data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--ds-text-soft, #8fbca4);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
    }
    /* first cell is the card title, last cell holds the actions: both span the card, untitled */
    :is(.warehouse-product-row, .cash-movement-row, .reports-table-row, .archive-v99__row) > :first-child,
    :is(.warehouse-product-row, .cash-movement-row, .reports-table-row, .archive-v99__row) > :last-child { grid-column: 1 / -1; }
    :is(.warehouse-product-row, .cash-movement-row, .reports-table-row, .archive-v99__row) > :first-child::before,
    :is(.warehouse-product-row, .cash-movement-row, .reports-table-row, .archive-v99__row) > :last-child::before { display: none; }

    /* Ombor */
    .warehouse-product-row > .warehouse-stock-status::before { display: none; } /* the pill already says it */
    .warehouse-product-row > :first-child strong { font-size: 17px; }
    .warehouse-product-row .warehouse-product-actions { display: flex; gap: 8px; }
    .warehouse-product-row .warehouse-product-actions button { min-height: 44px; flex: 1; }

    /* Kassa: client and note read across the card; the sticky action cell becomes a normal row */
    .cash-movement-row > :nth-child(3),
    .cash-movement-row > :nth-child(7) { grid-column: 1 / -1; }
    .cash-movement-row > :last-child {
        position: static !important;
        box-shadow: none !important;
        background: transparent !important;
        display: flex !important;
        align-self: auto !important;
        padding-top: 4px;
    }
    .cash-movement-row .cash-row-action-buttons { display: flex; gap: 10px; }
    .cash-movement-row .cash-row-edit,
    .cash-movement-row .cash-row-delete,
    .cash-movement-row .cash-debtor-pay { min-width: 44px; min-height: 44px; }

    /* Hisobotlar: who/when read across, the sale total closes the card */
    .reports-table-row > :nth-child(2) { grid-column: 1 / -1; }
    .reports-table-row > :last-child { text-align: left; border-top: 1px solid var(--ds-border, rgba(255, 255, 255, 0.14)); padding-top: 8px; }

    /* Arxiv */
    .archive-v99__row > :nth-child(3) { grid-column: 1 / -1; }
    .archive-v99__row .archive-v99__detail-btn { min-height: 44px; width: 100%; }
}

/* =========================================================
   FILTERS — two per row, search / actions full width (phones)
   ========================================================= */
@media (max-width: 800px) {
    :is(.warehouse-toolbar, .cash-toolbar, .archive-v99__toolbar) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    :is(.warehouse-search, .cash-search, .archive-v99__search, .warehouse-toolbar-actions, .cash-refresh-btn, .archive-v99__refresh,
        .clients-search-field, .clients-refresh-btn, .reports-quick-range, .reports-primary-btn, .ds-export-group) { grid-column: 1 / -1; }
    .archive-v99__toolbar > select { grid-column: auto; }
    .warehouse-toolbar-actions { display: flex; gap: 10px; }
    .warehouse-toolbar-actions > * { flex: 1; min-height: 46px; }
    .ds-export-group { display: flex; gap: 10px; }
    .ds-export-group > * { flex: 1; min-height: 46px; }
    .reports-quick-range { display: flex; flex-wrap: wrap; gap: 8px; }
    .reports-quick-range > * { flex: 1 1 auto; min-height: 44px; }
    .sales-history-tools { flex-wrap: wrap; gap: 10px; }
    .sales-history-tools > label { flex: 1 1 140px; min-width: 0; }
    .sales-history-search-wrap { flex: 1 1 100%; }
}

/* =========================================================
   CUSTOMERS — full-screen customer card (phones)
   The sticky "Savdoni boshlash" button is the last item of the scrolling card, so the end of the
   history is always reachable above it; the history list scrolls with the card (no inner scroller).
   ========================================================= */
@media (max-width: 800px) {

    #clientCardPanel.client-card,
    body.client-card-list-open #clientCardPanel {
        max-height: none !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: calc(100dvh / var(--ds-zoom, 1));
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 calc(12px + var(--m-safe-r)) 0 calc(12px + var(--m-safe-l)) !important;
        gap: 12px !important;
        transform: none !important;
        box-shadow: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        background: var(--ds-surface, #062d18) !important;
    }
    .client-card[hidden] { display: none !important; }
    body.client-card-open .client-card,
    body.client-card-list-open #clientCardPanel:not([hidden]) { opacity: 1 !important; visibility: visible !important; }

    /* header stays visible: name, edit, close */
    .client-card__top {
        position: sticky !important;
        top: 0;
        z-index: 6;
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) 48px !important;
        grid-template-areas: "avatar identity close" "edit edit edit";
        align-items: center;
        gap: 8px 10px !important;
        margin: 0 calc(-12px - var(--m-safe-r)) 0 calc(-12px - var(--m-safe-l)) !important;
        padding: calc(10px + var(--m-safe-t)) calc(12px + var(--m-safe-r)) 10px calc(12px + var(--m-safe-l)) !important;
        background: var(--ds-surface, #062d18) !important;
        border-bottom: 1px solid var(--ds-border, rgba(255, 255, 255, 0.14)) !important;
    }
    .client-card__avatar { grid-area: avatar; width: 44px; height: 44px; }
    .client-card__identity { grid-area: identity; min-width: 0; }
    .client-card__identity h2 { font-size: 20px; overflow-wrap: anywhere; }
    .client-card__identity p { overflow-wrap: anywhere; }
    .client-card-edit { grid-area: edit; justify-self: start; min-height: 44px; padding: 0 18px; }
    .client-card-back {
        grid-area: close;
        position: static !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        justify-self: end;
        font-size: 28px !important;
        border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.2)) !important;
        background: var(--ds-surface-2, rgba(255, 255, 255, 0.06)) !important;
        color: var(--ds-text, #ecfdf4) !important;
    }

    .client-card-stats--compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* history: part of the card scroll, not a 300 px box with its own scroller */
    #clientCardPanel .client-card-history-section { flex: 0 0 auto !important; min-height: 0 !important; overflow: visible !important; }
    body.client-card-list-open #clientCardPanel .client-history-list,
    #clientCardPanel .client-history-list { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }

    /* history rows: wrap instead of cutting names */
    .client-history-row__head { flex-wrap: wrap; gap: 6px 12px; }
    .client-history-line { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; }
    .client-history-line strong { overflow-wrap: anywhere; white-space: normal; }

    /* sticky action: clear of the gesture area, readable on the green, last in the scroll flow */
    .client-card-new-sale,
    body.client-card-list-open #clientCardPanel .client-card-new-sale {
        position: sticky !important;
        bottom: calc(12px + var(--m-safe-b)) !important;
        flex: 0 0 auto;
        min-height: 54px !important;
        margin: 4px 0 calc(12px + var(--m-safe-b)) !important;
        font-size: 17px;
        font-weight: 800;
        color: #ffffff !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
    }
    .client-card-new-sale span, .client-card-new-sale svg { color: #ffffff !important; }

    /* list rows: bigger targets */
    .client-list-row { min-height: 72px; }
}

/* =========================================================
   OFFLINE NOTICE (all screen sizes) — see mobile.js "PWA"
   ========================================================= */
#moyliOfflineBanner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2100;
    padding: calc(8px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 8px calc(14px + env(safe-area-inset-left, 0px));
    background: #b45f06;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   SALE CONFIRMATION + DETAIL LINES (phones)
   Name and quantity on the left, the line total on the right; long product names wrap.
   ========================================================= */
@media (max-width: 800px) {
    .sales-confirm-line {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "name total" "qty total";
        row-gap: 2px;
    }
    .sales-confirm-line > div { grid-area: name; }
    .sales-confirm-line > span { grid-area: qty; text-align: left !important; white-space: normal; }
    .sales-confirm-line > strong { grid-area: total; align-self: center; white-space: nowrap; }
    .sales-confirm-line > div strong { white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; }
}

@media (max-width: 800px) {
    /* step 1: the customer / vehicle card fits any width, even with the largest text preset */
    #salesWorkspace .sales-selected-client { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #salesWorkspace .sales-selected-client > * { min-width: 0; overflow-wrap: anywhere; }
    #salesWorkspace .sales-selected-client .ds-card-head,
    #salesWorkspace .sales-selected-client__info,
    #salesWorkspace .sales-selected-client__vehicle { grid-column: 1 / -1 !important; }
}