/* static/css/hp-mobile.css
 * Phone layout (<= 768px), Material 3 / Flutter style:
 * one-line top app bar, bottom navigation bar, "+" button, bottom-sheet dialogs,
 * tables that scroll sideways, 2-column stat cards.
 * Loaded in templates/base.html after hp-restyle.css. Desktop is untouched.
 * Markup: .m-bottom-nav / .m-fab in base.html; JS (active tab, table wrap) in _base_scripts.html.
 */

.m-bottom-nav,
.m-fab { display: none; }

@media screen and (max-width: 768px) {
    :root { --m-nav-h: 64px; }

    /* ── Shell ─────────────────────────────────────────── */
    /* The bottom bar's "More" replaces the floating hamburger */
    .sidebar-mobile-toggle,
    #back-to-top { display: none !important; }
    body > footer { display: none; }

    /* The hidden drawer cast a shadow along the left edge of every page */
    .app-sidebar { box-shadow: none; }
    .app-sidebar.mobile-open { box-shadow: 4px 0 24px rgba(0, 0, 0, .25); z-index: 1050; }
    .sidebar-overlay.active { z-index: 1045; }      /* the open drawer covers the bottom bar */

    .app-main { padding-bottom: calc(var(--m-nav-h) + 24px + env(safe-area-inset-bottom)); }

    /* ── Top app bar: one row, title cut with "…" ───────── */
    .app-topbar,
    .app-topbar.m3-scrolled {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        min-height: 56px;
        padding: 6px 6px 6px 16px !important;
    }
    .app-topbar-left {
        flex: 1 1 auto;
        min-width: 0;
    }
    .app-topbar-left h1 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Subtitles and breadcrumbs don't fit; the bottom bar handles going back */
    .app-topbar-left > :is(p, small, nav),
    .app-topbar-subtitle { display: none !important; }
    .app-topbar-right {
        flex: 0 0 auto;
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }
    .app-topbar-right .topbar-icon-btn {
        width: 40px !important;
        height: 40px !important;
        box-shadow: none !important;
    }
    /* Labelled bar buttons ("Export") become icon buttons */
    .app-topbar-right .topbar-icon-btn.wide {
        font-size: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        justify-content: center;
    }
    .app-topbar-right .topbar-icon-btn.wide i { font-size: 20px; }
    /* Bars with no icon (e.g. "← Back to Request") would be blank circles; form pages have Cancel below */
    .app-topbar-right .topbar-icon-btn.wide:not(:has(i)) { display: none !important; }
    /* Form pages put the title straight in the bar (no .app-topbar-left) */
    .app-topbar > h1 {
        flex: 1 1 auto !important;
        min-width: 0;
        margin: 0 !important;
        font-size: 20px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .app-topbar > .autosave-badge { flex: 0 0 auto; margin-left: 0 !important; }
    .app-topbar > .autosave-badge #autosaveText { display: none; }

    /* "New Request" lives on the + button instead */
    .app-topbar-right a[href*="/request/create/"] { display: none !important; }
    .topbar-lang-toggle { transform: scale(.9); transform-origin: right center; }

    /* ── Bottom navigation bar (Material 3 NavigationBar) ── */
    .m-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        height: calc(var(--m-nav-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--hp-card);
        box-shadow: 0 -1px 0 var(--hp-line), 0 -4px 16px rgba(0, 0, 0, .06);
    }
    .m-nav-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--hp-muted);
        font: 500 12px/1.2 var(--font);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .m-nav-item:hover { color: var(--hp-text); }
    .m-nav-label {
        max-width: 100%;
        padding: 0 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-nav-ind {
        position: relative;
        width: 56px;
        height: 30px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color .2s;
    }
    .m-nav-ind i { font-size: 22px; }
    .m-nav-item.active { color: var(--hp-text); font-weight: 700; }
    .m-nav-item.active .m-nav-ind {
        background: color-mix(in srgb, var(--hp-accent) 18%, transparent);
        color: var(--hp-accent);
    }
    .m-nav-badge {
        position: absolute;
        top: -3px;
        left: 32px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--hp-danger);
        color: #FFFFFF;
        font: 700 11px/18px var(--font);
        text-align: center;
    }

    /* ── "+" button (New Request) on Home and Requests ──── */
    body:is([data-mnav="home"], [data-mnav="requests"]) .m-fab {
        display: flex;
        position: fixed;
        right: 16px;
        bottom: calc(var(--m-nav-h) + 16px + env(safe-area-inset-bottom));
        z-index: 1029;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        align-items: center;
        justify-content: center;
        background: var(--hp-fill);
        color: var(--hp-on-fill);
        font-size: 26px;
        text-decoration: none;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 6px 16px var(--accent-glow);
    }

    /* Form pages bring their own fixed bottom bar (Save / Submit), and detail pages get
       .m-actionbar (Approve / Reject, moved out of the top bar by JS): no nav there */
    body:has(#mainContent :is(.action-bar, .m-actionbar)) :is(.m-bottom-nav, .m-fab) { display: none !important; }
    body:has(#mainContent .action-bar) .app-main { padding-bottom: 0; }

    /* Two buttons per row, every button visible (Finance has four: Revision, Review, Approve, Reject).
       A lone last button takes the whole row. JS sets --m-actionbar-h so the page can scroll past it. */
    .m-actionbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: var(--hp-card);
        box-shadow: 0 -1px 0 var(--hp-line), 0 -4px 16px rgba(0, 0, 0, .08);
    }
    .m-actionbar > * { min-width: 0; margin: 0 !important; }
    .m-actionbar > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .m-actionbar form { display: flex; }
    .m-actionbar .rd-act {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        padding-left: 8px !important;
        padding-right: 8px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body:has(#mainContent .m-actionbar) .app-main { padding-bottom: calc(var(--m-actionbar-h, 64px) + 24px); }

    /* ── Tables shown as cards (table.m-cards, labels set by JS) ── */
    table.m-cards,
    table.m-cards :is(tbody, tfoot, tr, td) {
        display: block;
        width: 100% !important;
    }
    table.m-cards thead { display: none; }
    table.m-cards tbody tr {
        position: relative;
        margin: 0 0 10px;
        padding: 10px 14px;
        background: var(--hp-card);
        border: 1px solid var(--hp-line) !important;
        border-radius: 14px;
    }
    table.m-cards tbody tr:last-child { margin-bottom: 0; }
    table.m-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0 !important;
        border: 0 !important;
        text-align: right !important;
        white-space: normal !important;
    }
    table.m-cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        color: var(--hp-muted);
        font-size: 13px;
        font-weight: 500;
        text-align: left;
    }
    /* Cells with no column name (checkbox, row number) and empty cells */
    table.m-cards tbody td:not([data-label])::before,
    table.m-cards tbody td[data-label=""]::before,
    table.m-cards tbody td[data-label="#"]::before { content: none; }
    table.m-cards tbody td:empty { display: none; }
    /* "Nothing here" rows span every column: centre them, no label */
    table.m-cards tbody td[colspan] { justify-content: center; text-align: center !important; }
    table.m-cards tbody td[colspan]::before { content: none; }
    table.m-cards tbody tr:has(> td[colspan]:only-child) { border: 0 !important; background: none; }
    table.m-cards tfoot td {
        display: block;
        padding: 8px 4px !important;
        text-align: right !important;
    }
    .m-cards-wrap { overflow: visible !important; }   /* parent of a table.m-cards (set in _base_scripts) */
    table.m-cards tbody td[data-label="#"] { display: none; }
    /* Selection checkbox sits in the card's top-right corner */
    table.m-cards tbody td:first-child:has(> input[type="checkbox"]) {
        position: absolute;
        top: 12px;
        right: 14px;
        width: auto !important;
        padding: 0 !important;
        z-index: 1;
    }
    /* The row's first real column (request #, name…) is the card title: full width, no label */
    table.m-cards tbody td.m-cell-title {
        display: block;
        max-width: none !important;
        padding-right: 32px !important;
        text-align: left !important;
        font-size: 15px;
        font-weight: 600;
    }
    table.m-cards tbody td.m-cell-title::before { content: none; }
    .pa-table-hint { display: none !important; }

    /* ── Filter / search bars (same classes on most list pages) ──
       Search on its own line; then each "Label [dropdown]" pair gets a line;
       sort buttons share one line; the result count sits at the end. */
    #mainContent :is(.toolbar-row, .pa-toolbar, .po-toolbar) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 8px !important;
    }
    #mainContent :is(.toolbar-row, .pa-toolbar, .po-toolbar) .toolbar-search-wrap { flex: 1 0 100%; max-width: none !important; }
    #mainContent :is(.toolbar-row, .pa-toolbar, .po-toolbar) .toolbar-search-wrap input {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px;
        border-radius: 22px !important;
        padding-left: 2.2rem !important;
    }
    #mainContent :is(.toolbar-row, .pa-toolbar, .po-toolbar) .toolbar-sep { display: none !important; }
    #mainContent :is(.toolbar-row, .pa-toolbar, .po-toolbar) .toolbar-label {
        flex: 0 0 64px;
        margin: 0 !important;
        font-size: 13px !important;
        color: var(--hp-muted);
    }
    #mainContent :is(.toolbar-row, .pa-toolbar, .po-toolbar) > :is(select, input:not([type="hidden"])) {
        flex: 1 0 calc(100% - 72px);
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 44px;
        border-radius: 12px !important;
    }
    /* Sort buttons: grow to fill the line, wrap to the next one if their text is long */
    #mainContent :is(.toolbar-row, .pa-toolbar, .po-toolbar) > .sort-btn {
        flex: 1 1 auto;
        min-height: 40px;
        justify-content: center;
        white-space: nowrap;
    }
    #mainContent :is(.toolbar-row, .pa-toolbar, .po-toolbar) > button:not(.sort-btn) { flex: 1 0 100%; min-height: 44px; justify-content: center; }
    #mainContent :is(.toolbar-row, .pa-toolbar, .po-toolbar) .toolbar-meta {
        flex: 1 0 auto;
        margin-left: auto !important;
        text-align: right;
        font-size: 13px;
    }
    /* Cash Advances: status tabs (a swipeable row) above the search + filter; side by side the
       tabs were squeezed to nothing */
    #mainContent .adv-tabbar { flex-wrap: wrap !important; }
    #mainContent .adv-tabbar > .adv-tabs { flex: 1 0 100% !important; }
    #mainContent .adv-filters { flex: 1 1 100% !important; min-width: 0; flex-wrap: wrap !important; gap: 8px !important; }
    #mainContent .adv-filters .adv-search { flex: 1 0 100%; order: -1; max-width: none !important; }
    #mainContent .adv-filters .adv-search input { width: 100% !important; min-height: 44px; }
    #mainContent .adv-filters > :not(.adv-search) { flex: 1 1 0; min-width: 0; min-height: 44px; }

    /* ── Dashboard charts: shorter, legend under the donut ── */
    #mainContent .chart-container { height: 220px !important; }
    #mainContent .donut-row {
        flex-direction: column;
        align-items: stretch !important;
        height: auto !important;
        gap: 14px !important;
    }
    #mainContent .donut-row > :first-child { margin: 0 auto; width: 200px !important; height: 200px !important; }
    #statusDonutLegend { width: 100%; font-size: 14px !important; }

    /* Back arrow (detail pages) and status chips under the title */
    .app-topbar .m-back { flex: 0 0 auto; margin-left: -10px; }
    .app-topbar .m-back i { font-size: 22px; }
    .m-title-chips {
        display: flex;
        gap: 6px;
        margin-top: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .m-title-chips::-webkit-scrollbar { display: none; }
    .m-title-chips > * {
        flex: 0 0 auto;
        font-size: 12px !important;
        padding: 2px 8px !important;
    }
    .action-bar {
        flex-wrap: nowrap !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
    }
    .action-bar .bar-stats {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .action-bar .bar-stats::-webkit-scrollbar { display: none; }
    .action-bar .bar-acts { display: flex; gap: 8px; }
    .action-bar .bar-acts > * {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        min-height: 44px;
    }
    .action-bar .kbd-tip { display: none !important; }
    /* Edit Request names its button row .action-bar-right / .btn-action */
    .action-bar .action-bar-right { display: flex; gap: 8px; width: 100%; }
    .action-bar .action-bar-right > * {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        padding-left: 6px !important;
        padding-right: 6px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Cancel takes only what it needs, so "Save & Submit" fits */
    .action-bar :is(.bar-acts, .action-bar-right) > .cancel { flex: 0 0 auto !important; padding-left: 12px !important; padding-right: 12px !important; }

    /* ── Page content ──────────────────────────────────── */
    /* Grid/flex children may shrink below their content (charts made pages wider than the screen) */
    #mainContent :is(.chart-card, [class*="grid"] > *, [class*="-row"] > *) { min-width: 0; }
    #mainContent canvas { max-width: 100%; }

    /* Stat cards: two per row, compact */
    /* (not Bootstrap .row: its col-6 children already make two columns) */
    html #mainContent :is(.stat-cards-row, .stats-grid, .stat-grid, .kpi-grid, .kpi-row, .stats-row, .summary-grid):not(.row) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    html #mainContent :is(.stat-cards-row, .stats-grid, .stat-grid, .kpi-grid, .kpi-row, .stats-row, .summary-grid):not(.row) > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    html #mainContent :is(.stat-card, .kpi-card):not(#hp) { padding: 14px !important; }
    html #mainContent :is(.stat-card, .kpi-card):not(#hp) :is([class*="num"], [class*="value"]):not(#hp) {
        font-size: 26px !important;
    }

    /* Filter tabs / chips: one row that scrolls sideways */
    #mainContent :is(.filter-tab-group, .filter-tabs, .status-tabs, .tab-pills) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #mainContent :is(.filter-tab-group, .filter-tabs, .status-tabs, .tab-pills)::-webkit-scrollbar { display: none; }
    #mainContent :is(.filter-tab-group, .filter-tabs, .status-tabs, .tab-pills) > * {
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    /* Wide tables scroll sideways inside their card (wrapper added by JS) */
    .m-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .m-scroll > table { min-width: 100%; }
    .m-scroll th,
    .m-scroll td { white-space: nowrap; }

    /* Touch: 16px inputs stop iOS zooming in; 44px tap targets */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea { font-size: 16px !important; }
    .btn:not(.btn-sm):not(.btn-close) { min-height: 44px; }

    /* ── Dialogs slide up as bottom sheets ─────────────── */
    .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
        min-height: 0 !important;
        align-items: flex-end;
    }
    .modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.2, 0, 0, 1);
    }
    .modal.show .modal-dialog { transform: none; }
    .modal-content {
        border-radius: 28px 28px 0 0 !important;
        max-height: 90vh;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .modal-content::before {
        content: "";
        display: block;
        flex: 0 0 auto;
        width: 32px;
        height: 4px;
        margin: 10px auto 0;
        border-radius: 2px;
        background: var(--hp-muted);
        opacity: .4;
    }

    /* Toasts sit above the bottom bar's area, at the top as on desktop */
    #toast-container { top: 12px !important; }

    /* ── My Requests cards: title + status on one line, number under the title ── */
    .req-card-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 8px;
        row-gap: 2px;
        align-items: start !important;
    }
    .req-card-header > :first-child {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .req-card-header > :nth-child(2):not(.req-card-status) { grid-column: 1; grid-row: 2; }
    .req-card-header > .req-card-status { grid-column: 2; grid-row: 1; }

    /* ── New / Edit Request: each item is a card ───────────
       Same column order on both pages: 1 # 2 photo 3 code 4 description 5 qty 6 unit
       7 supplier 8 price 9 amount 10 remove. Labels come from data-label (JS).
       Price and amount are hidden: Purchasing fills them later. */
    .items-scroll:has(#itemsBody) { overflow: visible !important; padding: 12px; }
    :is(#itemsTbl, #itemsTable),
    :is(#itemsTbl, #itemsTable) > tbody { display: block; width: 100%; }
    :is(#itemsTbl, #itemsTable) > :is(thead, tfoot) { display: none; }
    #itemsBody > tr:not(:has(> td[colspan])) {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 44px;
        grid-template-areas:
            "num  num  num  del"
            "img  desc desc desc"
            "qty  qty  unit unit"
            "code code sup  sup";
        gap: 10px;
        margin-bottom: 12px;
        padding: 12px 14px 14px;
        background: var(--hp-card);
        border: 1px solid var(--hp-line);
        border-radius: 16px;
        box-shadow: var(--hp-shadow-sm);
        -webkit-user-drag: none;           /* rows are draggable on desktop; a long press must not start a drag */
    }
    #itemsBody > tr.invalid { border-color: var(--hp-danger); }
    #itemsBody > tr > td,
    #itemsBody > tr:hover > td {
        display: block !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }
    #itemsBody > tr > td:nth-child(8),
    #itemsBody > tr > td:nth-child(9) { display: none !important; }
    #itemsBody > tr > td:nth-child(1)  { grid-area: num; }
    #itemsBody > tr > td:nth-child(2)  { grid-area: img; }
    #itemsBody > tr > td:nth-child(3)  { grid-area: code; }
    #itemsBody > tr > td:nth-child(4)  { grid-area: desc; align-self: center; }
    #itemsBody > tr > td:nth-child(5)  { grid-area: qty; }
    #itemsBody > tr > td:nth-child(6)  { grid-area: unit; }
    #itemsBody > tr > td:nth-child(7)  { grid-area: sup; }
    #itemsBody > tr > td:nth-child(10) { grid-area: del; }

    /* Card header: "Item 1" + remove */
    #itemsBody > tr > td:nth-child(1) {
        display: flex !important;
        align-items: center;
        color: var(--hp-text);
        font-size: 15px;
        font-weight: 700;
    }
    #itemsBody > tr > td:nth-child(1)::before { content: attr(data-label) "\00a0"; }
    #itemsBody > tr > td:nth-child(1) :is(.rn, .row-num-val) {
        font: inherit !important;
        color: inherit !important;
    }
    #itemsBody > tr > td:nth-child(10) > div { justify-content: flex-end !important; }
    #itemsBody :is(.drag-h, .drag-handle) { display: none !important; }
    #itemsBody :is(.btn-del, .btn-remove-item) {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 1rem;
    }

    /* Small label above Code / Qty / Unit / Supplier */
    #itemsBody > tr > td:is(:nth-child(3), :nth-child(5), :nth-child(6), :nth-child(7))[data-label]::before {
        content: attr(data-label);
        display: block;
        margin: 0 0 4px 2px;
        color: var(--hp-muted);
        font-size: 13px;
        font-weight: 600;
    }
    #itemsBody > tr :is(input:not([type="hidden"]):not([type="file"]), select) {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 46px;
        margin: 0;
        padding: .55rem .75rem !important;
        border-radius: 10px !important;
        text-align: left !important;
    }
    #itemsBody > tr > td:nth-child(7) input + input { margin-top: 8px !important; }

    /* Photo button */
    #itemsBody > tr > td:nth-child(2) :is(.img-lbl, .img-prv, .img-upload-btn, .img-thumb) {
        width: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        font-size: 1.35rem;
    }
    #itemsBody > tr > td:nth-child(2) :is(.img-n, .img-label) { text-align: left; }

    /* "No items yet" row (no !important: the page hides it with an inline style once items exist) */
    #itemsBody > tr:has(> td[colspan]) { display: block; }
    #itemsBody > tr > td[colspan] { display: block !important; }

    /* Add Item: full width */
    :is(.add-bar, .add-item-wrap):has(:is(.btn-add, #addItemBtn)) { padding: 0 12px 14px; }
    :is(.btn-add, #addItemBtn) {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        font-size: 15px !important;
        border-radius: 12px !important;
    }
    .add-bar #cp2 { display: none; }

    /* New Request: catalog search on its own line; draft notice keeps only its buttons;
       the bottom bar's "$0.00 / 0% done" row is hidden */
    .cat-toggle { flex-wrap: wrap !important; }
    .cat-srch-wrap { order: 5; flex: 1 0 100% !important; max-width: none !important; margin: 0 !important; }
    .cat-chev { margin-left: auto; }
    .cat-srch { padding-top: .55rem !important; padding-bottom: .55rem !important; }
    .cat-plus { opacity: 1 !important; transform: none !important; }
    .draft-pill :is(.dp-text, .dp-sub) { display: none; }
    .action-bar .bar-stats { display: none !important; }

    /* ── Add / Edit Pricing (templates/workflow/pricing_form.html) ──
       Columns: 1 #  2 item  3 unit price  4 currency  5 supplier  6 available  7 line total.
       The table's min-widths made the page ~1000px wide; each item is now a card. */
    .pricing-layout > * { min-width: 0; }
    .pricing-table-wrap { overflow: visible !important; padding: 0 12px; }
    table.m-form-cards,
    table.m-form-cards > tbody { display: block; width: 100%; }
    table.m-form-cards > thead { display: none; }
    table.m-form-cards > tbody > tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        grid-template-areas:
            "num   total"
            "item  item"
            "price cur"
            "sup   sup"
            "avail avail";
        gap: 10px;
        margin-bottom: 12px;
        padding: 12px 14px 14px;
        background: var(--hp-card) !important;
        border: 1px solid var(--hp-line) !important;
        border-radius: 16px;
        box-shadow: var(--hp-shadow-sm);
    }
    table.m-form-cards > tbody > tr > td {
        display: block;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
    }
    table.m-form-cards > tbody > tr > td:nth-child(1) { grid-area: num; align-self: center; }
    table.m-form-cards > tbody > tr > td:nth-child(2) { grid-area: item; }
    table.m-form-cards > tbody > tr > td:nth-child(3) { grid-area: price; }
    table.m-form-cards > tbody > tr > td:nth-child(4) { grid-area: cur; }
    table.m-form-cards > tbody > tr > td:nth-child(5) { grid-area: sup; }
    table.m-form-cards > tbody > tr > td:nth-child(6) { grid-area: avail; }
    table.m-form-cards > tbody > tr > td:nth-child(7) {
        grid-area: total;
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 8px;
        text-align: right !important;
    }
    /* Labels: above the fields; inline before the total */
    table.m-form-cards > tbody > tr > td:is(:nth-child(3), :nth-child(4), :nth-child(5))[data-label]::before {
        content: attr(data-label);
        display: block;
        margin: 0 0 4px 2px;
        color: var(--hp-muted);
        font-size: 13px;
        font-weight: 600;
    }
    table.m-form-cards > tbody > tr > td:nth-child(7)[data-label]::before {
        content: attr(data-label);
        white-space: nowrap;
        color: var(--hp-muted);
        font-size: 13px;
        font-weight: 600;
    }
    table.m-form-cards .item-desc { font-size: 16px !important; }
    table.m-form-cards .line-total { font-size: 17px; font-weight: 700; }
    table.m-form-cards :is(.compact-input, .compact-select, .supplier-wrap input) {
        width: 100% !important;
        max-width: none !important;
        min-height: 46px;
        padding: .55rem .75rem !important;
        border-radius: 10px !important;
        text-align: left !important;
    }
    table.m-form-cards .supplier-wrap { flex-direction: column; gap: 8px; }
    table.m-form-cards .supplier-contact { width: auto; }
    /* "Available" as a big tappable row: checkbox + its name */
    table.m-form-cards > tbody > tr > td:nth-child(6) .avail-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }
    table.m-form-cards > tbody > tr > td:nth-child(6) .avail-wrap::after {
        content: attr(data-m-label);
        font-size: 15px;
        font-weight: 600;
        color: var(--hp-text);
    }
    table.m-form-cards .avail-checkbox { width: 24px !important; height: 24px !important; }

    /* Quick actions: one row of chips that swipes sideways */
    .quick-actions-bar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin: 12px !important; }
    .quick-actions-bar::-webkit-scrollbar { display: none; }
    .quick-actions-bar > * { flex: 0 0 auto; }
    .quick-actions-label { display: none; }
    .quick-btn { min-height: 38px; }

    /* Delivery: fee + currency side by side, notes full width */
    .delivery-grid { grid-template-columns: minmax(0, 1fr) 96px !important; }
    .delivery-grid > :last-child { grid-column: 1 / -1; }
    .delivery-grid .field-input { min-height: 44px; }

    /* Cancel / Save Draft / Save & Submit: fixed at the bottom; the tab bar steps aside */
    body:has(#pricingForm .actions-row) :is(.m-bottom-nav, .m-fab) { display: none !important; }
    /* The columns' fade-in leaves a transform behind, which would pin the bar inside the card */
    .pricing-layout > :is(.form-col, .summary-col) { animation: none !important; transform: none !important; }
    body:has(#pricingForm .actions-row) .app-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    #pricingForm .actions-row {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        gap: 8px;
        margin: 0 !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
        background: var(--hp-card);
        border: 0 !important;
        box-shadow: 0 -1px 0 var(--hp-line), 0 -4px 16px rgba(0, 0, 0, .08);
    }
    #pricingForm .actions-row > * {
        flex: 1 1 0;
        min-width: 0;
        min-height: 46px;
        justify-content: center;
        padding-left: 8px !important;
        padding-right: 8px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #pricingForm .actions-row > .cancel { flex: 0 0 auto; padding-left: 14px !important; padding-right: 14px !important; }
    /* Keyboard tips don't apply on a phone; the quick-action toast clears the bottom bar */
    #pricingForm .tips-box { display: none; }
    /* Flat containers on the pricing page: no shadow on the card or the item cards */
    #mainContent:has(#pricingForm) :is(.pricing-card, .summary-card, tr.item-row) { box-shadow: none !important; }
    .action-toast { bottom: calc(80px + env(safe-area-inset-bottom)) !important; right: 16px !important; left: 16px; }

    /* ── Request detail ────────────────────────────────── */
    .rd-tabs { padding: 4px !important; }
    .rd-tabs-list {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .rd-tabs-list::-webkit-scrollbar { display: none; }
    .rd-tabs-list > li { flex: 0 0 auto; }
    .rd-tabs-list .tab-btn { white-space: nowrap; }
    .rd-pr-badge { display: none !important; }      /* the number is already the page title */
    #items-split-wrapper { align-items: stretch !important; }

    /* Workflow steps: fixed-width steps in a row that swipes sideways (JS centres the current one);
       role names wrap instead of running into each other */
    .workflow-steps {
        overflow-x: auto;
        scrollbar-width: none;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .workflow-steps::-webkit-scrollbar { display: none; }
    .workflow-step { flex: 0 0 88px !important; }
    .workflow-step :is(.step-label, .step-sublabel) {
        max-width: 84px;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    .workflow-header { flex-wrap: wrap; gap: 4px 12px; }

    /* Total budget / Items / Age / Pending: two per row */
    .bento-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .bento-grid .metric-card { min-width: 0; }
    /* 16px lets "FINANCE_CONTROLLER" fit a half-width card; it still wraps if a name is longer */
    html #mainContent .bento-grid .metric-card:not(#hp) [class*="value"]:not(#hp) {
        font-size: 16px !important;
        overflow-wrap: anywhere;
    }

    /* Timeline: date goes under the name when it doesn't fit; no hover nudge on touch */
    .tl-header { flex-wrap: wrap; gap: 2px 10px; }
    .tl-body:hover { transform: none !important; }

    /* Lifecycle: three steps share the width */
    #lifecycle-tab .tab-content-card > div:first-child { gap: 6px; }
    #lifecycle-tab .tab-content-card > div:first-child > div { flex: 1 1 0; min-width: 0; text-align: center; }
    #lifecycle-tab [style*="width:64px"] { width: 52px !important; height: 52px !important; font-size: 1.4rem !important; }
    #lifecycle-tab .badge { white-space: normal; }
}