/* ---------------------------------------------------------------------------------------------
 * mauzo on phones and small tablets (below 992px, where the sidebar gives way): an app.
 *   - one-row top bar: logo, search, profile (+ New, theme and business live elsewhere)
 *   - a tab bar at the bottom: Home, Sales, + New, Customers, Menu
 *   - the menu is a full-screen sheet
 *   - stats are a strip you swipe; page buttons keep the main one, the rest go under "⋯"
 *   - tables become cards (web/js/mauzo-mobile.js labels each value)
 *   - 16px fields (no zoom on iPhone), 40px tap targets
 * Desktop is untouched: everything here is inside the media queries.
 * ------------------------------------------------------------------------------------------- */
:root { --mz-tabbar-h: 64px; }
@keyframes mz-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mz-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mz-tab-new-menu.show, .mz-tab-new::before { animation: none !important; } }

@media (max-width: 991.98px) {
    /* The sidebar's own header row (logo, toggler) gives way to the top bar; the menu is a sheet. */
    .page > .mz-sidebar { display: none !important; }
    html.mz-menu-open .page > .mz-sidebar { display: flex !important; position: fixed !important; inset: 0; z-index: 1085; width: 100% !important; height: 100%; overflow-y: auto;
        background: var(--surface) !important; padding-bottom: calc(var(--mz-tabbar-h) + env(safe-area-inset-bottom)); }
    html.mz-menu-open .mz-sidebar #sidebar-menu { display: block !important; }
    html.mz-menu-open .mz-sidebar .navbar-toggler { display: none; }
    html.mz-menu-open, html.mz-menu-open body { overflow: hidden; }
    .mz-sheet-close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--ink-strong);
        display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
    html.mz-menu-open .mz-sidebar .mz-side-search { display: flex !important; }

    /* Top bar: one row. */
    .mz-topbar { gap: 8px; padding: 0 12px; padding-top: env(safe-area-inset-top); }
    .mz-topbar-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
    .mz-topbar .mz-search { flex: 1; min-width: 0; }
    .mz-topbar .mz-search kbd { display: none !important; }
    .mz-topbar #mz-theme-toggle, .mz-topbar .mz-business-btn, .mz-topbar .mz-new-btn { display: none !important; }

    /* Room for the tab bar. */
    .page-wrapper { padding-bottom: calc(var(--mz-tabbar-h) + env(safe-area-inset-bottom)); }
    .page-wrapper .footer { display: none; }

    /* Tab bar. */
    .mz-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080; display: flex; align-items: stretch; justify-content: space-around;
        height: calc(var(--mz-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
        border-top: 1px solid var(--border); }
    .mz-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; border: 0; background: none;
        color: var(--muted); font-size: 11px; font-weight: 500; text-decoration: none; -webkit-tap-highlight-color: transparent; }
    .mz-tab svg { width: 24px; height: 24px; }
    .mz-tab.active, .mz-tab[aria-expanded="true"] { color: var(--brand); }
    /* Only the tab buttons shrink when pressed. The + wrapper holds the New menu: scaling it moved the
       fixed menu mid-tap, so the finger lifted on the page behind and the item never opened. */
    .mz-tab:not(.mz-tab-new):active, .mz-tab-new-btn:active { transform: scale(.94); }
    .mz-tab-new:active { transform: none; }
    .mz-tab-new { flex: 0 0 72px; position: relative; }
    .mz-tab-new-btn { width: 52px; height: 52px; margin-top: -14px; border: 0; border-radius: 50%; background: var(--brand-strong); color: var(--on-brand);
        display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -4px rgba(255, 0, 0, .55); }
    .mz-tab-new-btn svg { width: 26px; height: 26px; }
    /* "+": a full-width sheet from the bottom over a dimmed page, so only the menu is in view.
       The tab bar drops its blur while open (a blurred parent would trap the fixed sheet). */
    .mz-tabbar:has(.mz-tab-new-menu.show) { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
    .mz-tab-new:has(.mz-tab-new-menu.show)::before { content: ""; position: fixed; inset: 0; z-index: 1; background: var(--overlay); animation: mz-fade var(--motion-base) var(--ease-brand); }
    .mz-tab-new-menu { display: none; }
    .mz-tab-new-menu.show { display: block; position: fixed !important; inset: auto 0 0 0 !important; transform: none !important; margin: 0 !important; z-index: 2;
        width: 100%; max-height: 85vh; overflow-y: auto; border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-pop);
        padding: 0 8px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); animation: mz-rise var(--motion-rise) var(--ease-brand); }
    .mz-sheet-head { position: sticky; top: 0; display: flex; align-items: center; padding: 18px 8px 10px; background: var(--surface); }
    .mz-sheet-grip { position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); }
    .mz-sheet-title { flex: 1; font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; color: var(--ink-strong); }
    .mz-sheet-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--ink-strong); display: inline-flex; align-items: center; justify-content: center; }
    .mz-tab-new-menu .dropdown-item { min-height: 52px; display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; border-radius: var(--radius-md); }
    .mz-tab-new-menu .dropdown-item svg { width: 18px; height: 18px; color: var(--faint); }
    html:has(.mz-tab-new-menu.show), body:has(.mz-tab-new-menu.show) { overflow: hidden; }

    /* No sideways page scroll (the swipeable stats strip bleeds to the edge on purpose). */
    .page-wrapper { overflow-x: clip; }

    /* Campaign editor: the steps show numbers, with the current step's name; the Back / Save / Next
       bar sits above the tab bar. */
    #c-steps { flex-wrap: nowrap; margin-bottom: 1rem !important; }
    #c-steps .step-item:not(.active) .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    #c-steps .step-item.active .step-label { white-space: nowrap; font-weight: 600; }
    form .card.position-sticky.bottom-0 { bottom: calc(var(--mz-tabbar-h) + env(safe-area-inset-bottom)) !important; margin-left: -4px; margin-right: -4px; }
    form .card.position-sticky.bottom-0 .card-body { flex-wrap: nowrap !important; }
    form .card.position-sticky.bottom-0 #save-status { display: none; }


    /* Page header: the main button stays, the rest go under "⋯" (mauzo-mobile.js). */
    .page-header .btn-list { flex-wrap: nowrap; }
    .page-header .row > .col-auto { width: 100%; }
    .mz-actions-more .dropdown-menu { min-width: 220px; }
    .mz-actions-more .dropdown-item { min-height: 44px; display: flex; align-items: center; gap: 8px; }
}

@media (max-width: 767.98px) {
    /* No zoom on focus (iOS zooms into fields under 16px). */
    input.form-control, select.form-select, textarea.form-control, .form-control, .form-select,
    input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
        font-size: 16px !important;
    }
    /* Fingers, not pointers. */
    .btn { min-height: 40px; }
    .btn-sm, .btn-group-sm > .btn { min-height: 36px; }
    .form-control, .form-select { min-height: 44px; }
    .dropdown-item { min-height: 40px; display: flex; align-items: center; }
    .page-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    .nav-tabs .nav-link, .nav-pills .nav-link { min-height: 40px; display: flex; align-items: center; }

    /* Stats: a 2-column grid (no sideways scrolling, no cut-off cards). */
    .page-body .row:is(.row-cards, .row-deck):has(> [class*="col"] > .card .subheader):not(:has(canvas, .apexcharts-canvas, table, form)),
    .page-body .ld-kpi {
        display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 1rem; overflow: visible;
    }
    .page-body .row:is(.row-cards, .row-deck):has(> [class*="col"] > .card .subheader):not(:has(canvas, .apexcharts-canvas, table, form)) > [class*="col"],
    .page-body .ld-kpi > [class*="col"] { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
    .page-body .row:is(.row-cards, .row-deck):has(> [class*="col"] > .card .subheader):not(:has(canvas, .apexcharts-canvas, table, form)) .card-body { padding: 12px 14px; }
    .page-body .row:is(.row-cards, .row-deck):has(> [class*="col"] > .card .subheader):not(:has(canvas, .apexcharts-canvas, table, form)) .subheader { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .page-body .row:is(.row-cards, .row-deck):has(> [class*="col"] > .card .subheader):not(:has(canvas, .apexcharts-canvas, table, form)) :is(.h1, .h2) { font-size: 1.15rem !important; white-space: normal !important; overflow-wrap: anywhere; }

    /* Tables as cards (mauzo-mobile.js adds .mz-cards and a data-label to each cell). */
    .table-responsive:has(> table.mz-cards) { overflow: visible; }
    table.mz-cards, table.mz-cards tbody, table.mz-cards tr, table.mz-cards td { display: block; width: 100% !important; }
    table.mz-cards thead { display: none; }
    table.mz-cards tbody tr { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--border); }
    table.mz-cards tbody tr:last-child { border-bottom: 0; }
    table.mz-cards tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0 !important; border: 0 !important; text-align: right !important; white-space: normal !important; }
    table.mz-cards tbody td::before { content: attr(data-label); flex: 0 0 auto; color: var(--muted); font-size: 12px; text-align: left; }
    table.mz-cards tbody td[data-label=""]::before { content: none; }
    table.mz-cards tbody td.mz-card-title { display: block; text-align: left !important; font-weight: 600; font-size: 15px; padding-bottom: 6px !important; padding-right: 44px !important; }
    table.mz-cards tbody td.mz-card-title::before { content: none; }
    table.mz-cards tbody td.mz-card-title * { text-align: left; }
    table.mz-cards tbody td.mz-card-menu { position: absolute; top: 8px; right: 8px; width: auto !important; padding: 0 !important; }
    table.mz-cards tbody td.mz-card-menu::before { content: none; }
    table.mz-cards tbody td:empty, table.mz-cards tbody td.mz-card-empty { display: none; }
    table.mz-cards tbody td .mz-v { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; text-align: right; }
    table.mz-cards tbody td .mz-v > * { text-align: right; }
    table.mz-cards tbody td .mz-v .text-secondary, table.mz-cards tbody td .mz-v .small, table.mz-cards tbody td .mz-v small { font-size: 12px; }
    table.mz-cards tbody td.mz-card-menu .btn, table.mz-cards tbody td.mz-card-menu > a { min-height: 40px; min-width: 40px; }
    table.mz-cards tbody tr.empty td, table.mz-cards tbody td[colspan] { display: block; text-align: center !important; }
    table.mz-cards tbody td[colspan]::before { content: none; }
    table.mz-cards tbody tr:active { background: var(--surface-2); }
}

/* UX audit (docs/UX-AUDIT.md), phones ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* 44px tap targets. */
    .btn { min-height: 44px; }
    .btn-sm, .btn-group-sm > .btn, .btn-group > .btn { min-height: 36px; }
    /* Chip rows (filter buttons in a group): spaced out, not joined edge to edge. */
    .btn-group.mz-chips, .page-body .btn-group:not(:has(.dropdown-toggle, .dropdown-menu)):has(> .btn:nth-child(3)) { gap: 6px; flex-wrap: wrap; }
    .btn-group.mz-chips > .btn, .page-body .btn-group:not(:has(.dropdown-toggle, .dropdown-menu)):has(> .btn:nth-child(3)) > .btn { border-radius: var(--radius-pill) !important; margin: 0 !important; }
    .dropdown-item, .nav-tabs .nav-link, .nav-pills .nav-link { min-height: 44px; }
    .mz-info { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .page-pretitle a { display: inline-block; padding-block: 8px; }
    .form-check:not(.form-switch) { min-height: 44px; display: flex; align-items: center; gap: 10px; padding-left: 0; }
    .form-check:not(.form-switch) > .form-check-input { float: none; margin: 0; width: 22px; height: 22px; flex: none; }
    .form-switch { min-height: 44px; display: flex; align-items: center; }
    html.mz-menu-open #sidebar-menu .nav-link { min-height: 48px; font-size: 16px; }

    /* Tips and System information cards: desktop extras. */
    .mz-hide-mobile,
    .page-body .card:has(> .card-header path[d^="M9 16a5 5 0 1 1 6 0"]) { display: none !important; }

    /* Sub-tab rows that scroll: no scrollbar, a faded right edge as the hint. */
    .page-body .nav-tabs, .page-body .nav-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .page-body .nav-tabs::-webkit-scrollbar, .page-body .nav-pills::-webkit-scrollbar { display: none; }
    .page-body .nav-tabs .nav-link, .page-body .nav-pills .nav-link { white-space: nowrap; }

    /* Label above value in detail tables (Yii DetailView). */
    .page-body table.detail-view tr { display: grid; }
    .page-body table.detail-view th { border: 0; padding-bottom: 0; text-transform: none; font-size: 13px; width: auto !important; }
    .page-body table.detail-view td { padding-top: 2px; }
    /* Empty fields (Yii's "(not set)") are left out on phones. */
    .page-body table.detail-view tr:has(> td > .not-set:only-child) { display: none; }

    /* Sticky action bar above the tab bar (create and detail pages). */
    .mz-sticky-actions { position: sticky; bottom: calc(var(--mz-tabbar-h) + env(safe-area-inset-bottom)); z-index: 20;
        display: flex; gap: 8px; align-items: center; padding: 10px 12px; margin: 0 -12px;
        background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, .25); }
    .mz-sticky-actions .btn { flex: 1; }
    .mz-sticky-actions .mz-sticky-total { flex: 1.2; font-weight: 700; font-size: 15px; white-space: nowrap; }
}

/* Line items (invoices, bills): each line is a card below 768px. */
@media (max-width: 767.98px) {
    .table-responsive:has(> table.invoice-items) { overflow: visible; border: 0; }
    table.invoice-items, table.invoice-items tbody { display: block; width: 100%; border: 0; }
    table.invoice-items thead, table.invoice-items tfoot { display: none; }
    table.invoice-items tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 10px; padding: 12px; margin-bottom: 10px;
        border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
    table.invoice-items td { display: block; border: 0 !important; padding: 0 !important; width: auto !important; min-width: 0; }
    table.invoice-items td:nth-child(1), table.invoice-items td:nth-child(2) { grid-column: 1 / -1; }
    table.invoice-items td::before { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
    table.invoice-items td:nth-child(1)::before { content: "Product"; }
    table.invoice-items.is-bill td:nth-child(1)::before { content: "Expense"; }
    table.invoice-items td:nth-child(2)::before { content: "Description"; }
    table.invoice-items td:nth-child(3)::before { content: "Qty"; }
    table.invoice-items td:nth-child(4)::before { content: "Unit price"; }
    table.invoice-items td:nth-child(5)::before { content: "Discount %"; }
    table.invoice-items td:nth-child(6)::before { content: "Tax %"; }
    table.invoice-items td:last-child { display: flex; align-items: end; justify-content: flex-end; }
    table.invoice-items td:last-child::before { content: none; }
}
@media (min-width: 768px) { .mz-sticky-bottom { position: sticky; bottom: 16px; z-index: 5; } }

/* A shared link (checkout, pay link) on its own row above Copy and Share, not cut to "htt". */
@media (max-width: 600px) {
    .share-box .input-group { flex-wrap: wrap; gap: 6px; }
    .share-box .input-group > .form-control { flex: 1 0 100%; width: 100%; border-radius: var(--radius-md) !important; }
    .share-box .input-group > .btn { flex: 1; border-radius: var(--radius-md) !important; margin: 0 !important; }
}