/* =====================================================================
   Prime Car — Showroom cross-page fixes (2026-10-22, review round 1).
   Shared components only; every rule is scoped to the Showroom theme.
   ===================================================================== */

/* ---------- desktop tables: every cell on one line; showroom.js fitTables() lets only the
   widest text columns wrap (by whole words, never narrower than 11em) when a table would
   not fit its card ---------- */
@media (min-width: 761px) {
    [data-theme="showroom"] :is(.lv-t, .table) td { white-space: nowrap; }
    [data-theme="showroom"] :is(.lv-t, .table) td.wrap, [data-theme="showroom"] :is(.lv-t, .table) td:has(p, textarea, ul) { white-space: normal; }
    [data-theme="showroom"] :is(.lv-t, .table) td.sr-wrapcol { white-space: normal !important; min-width: 11em; overflow-wrap: normal; word-break: normal; }
    [data-theme="showroom"] :is(.lv-t, .table) td.sr-wrapcol :is(.pill, .st, .chip, bdi, .btn, .sr-nowrap) { white-space: nowrap; }
    [data-theme="showroom"] :is(.lv-t, .table) td .pill, [data-theme="showroom"] :is(.lv-t, .table) td .st { white-space: nowrap; }
    [data-theme="showroom"] .lv-wrap, [data-theme="showroom"] .table-scroll {
        background:
            linear-gradient(to right, var(--pc-surface) 30%, transparent) left / 32px 100% no-repeat local,
            linear-gradient(to left, var(--pc-surface) 30%, transparent) right / 32px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(22, 22, 22, .14), transparent) left / 12px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(22, 22, 22, .14), transparent) right / 12px 100% no-repeat scroll;
    }
}

/* ---------- phone cards: rich / long cells take the full card width (cardify marks them) ---------- */
@media (max-width: 760px) {
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td.sr-wide { grid-column: 1 / -1; }
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td { overflow-wrap: normal; word-break: normal; }
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td > * { flex-wrap: wrap; }
    /* KPI tiles: icon beside the number, not a tall empty column */
    [data-theme="showroom"] .grid:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    [data-theme="showroom"] .stat { min-height: 0 !important; padding: 14px !important; gap: 10px !important; }
    [data-theme="showroom"] .stat .stat__top { margin: 0 !important; }
    [data-theme="showroom"] .stat__icon { width: 36px !important; height: 36px !important; border-radius: 12px !important; }
    [data-theme="showroom"] .stat__value { font-size: 22px !important; }
    [data-theme="showroom"] .stat__label { font-size: 12px !important; line-height: 1.4; }
    /* filter toolbars: an even 2-column grid, search on its own row */
    [data-theme="showroom"] .lv-tools:has(select, input, .srch, .btn) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
    [data-theme="showroom"] .lv-tools:has(select, input, .srch, .btn) > * { min-width: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; }
    /* a tools row of plain info pills just wraps */
    [data-theme="showroom"] .lv-tools:not(:has(select, input, .srch, .btn)) { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
    [data-theme="showroom"] .lv-tools:not(:has(select, input, .srch, .btn)) .pill { white-space: normal; max-width: 100%; }
    [data-theme="showroom"] .lv-tools > :is(.srch, form, .btn--primary:last-child) { grid-column: 1 / -1; }
    [data-theme="showroom"] .lv-tools .btn { justify-content: center; }
    [data-theme="showroom"] .lv-tools input[type="date"] { width: 100% !important; }
    /* short tab bars wrap (every tab visible); long chip rows keep scrolling */
    [data-theme="showroom"] :is(.ship-tabs, .lv-views, .cat-chips) { -webkit-mask-size: 100%; }
}

/* ---------- back buttons: the chevron points back, not down ---------- */
[data-theme="showroom"] a.btn > .pf-chevron:first-child { transform: rotate(-90deg); }
:root[dir="ltr"][data-theme="showroom"] a.btn > .pf-chevron:first-child { transform: rotate(90deg); }
[data-theme="showroom"] .btn, [data-theme="showroom"] .btn:hover { text-decoration: none; }

/* ---------- form controls in the theme's own style ---------- */
[data-theme="showroom"] input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; flex: none; margin: 0; vertical-align: -4px;
    width: 20px; height: 20px; border-radius: 7px; border: 1.5px solid var(--pc-line-strong); background: var(--pc-surface);
    display: inline-grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s;
}
[data-theme="showroom"] input[type="checkbox"]::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s; }
[data-theme="showroom"] input[type="checkbox"]:checked { background: var(--pc-ink); border-color: var(--pc-ink); }
[data-theme="showroom"] input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
[data-mode="dark"][data-theme="showroom"] input[type="checkbox"]::after { border-color: var(--pc-canvas); }
[data-mode="dark"][data-theme="showroom"] input[type="checkbox"]:not(:checked) { border-color: var(--pc-faint); background: var(--pc-surface-2); }
[data-theme="showroom"] input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--pc-primary-100); }
[data-theme="showroom"] input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
[data-theme="showroom"] input[type="radio"] { accent-color: var(--pc-ink); width: 18px; height: 18px; }
/* native file input → pill button + file name */
[data-theme="showroom"] input[type="file"] { max-width: 100%; font: inherit; font-size: 13px; color: var(--pc-muted); padding: 6px; border-radius: 16px; border: 1.5px dashed var(--pc-line-strong); background: var(--pc-surface-2); width: 100%; cursor: pointer; }
[data-theme="showroom"] input[type="file"]::file-selector-button { font: inherit; font-weight: 600; font-size: 13px; border: 0; border-radius: 999px; min-height: 36px; padding: 0 16px; margin-inline-end: 12px; background: var(--pc-dark); color: #fff; cursor: pointer; }
[data-mode="dark"][data-theme="showroom"] input[type="file"]::file-selector-button { background: #3A3935; color: var(--pc-ink); }
/* <details> disclosures: a themed chevron instead of the browser triangle */
[data-theme="showroom"] details > summary { list-style: none; }
[data-theme="showroom"] details > summary::-webkit-details-marker { display: none; }
[data-theme="showroom"] details:not(.lv-adv):not(.att-out):not(.sr-nomark) > summary:not(.lv-head):not(.act-btn):not(.btn):not(.chip):not(:has(.chev)) { position: relative; padding-inline-start: 22px; cursor: pointer; }
[data-theme="showroom"] details:not(.lv-adv):not(.att-out):not(.sr-nomark) > summary:not(.lv-head):not(.act-btn):not(.btn):not(.chip):not(:has(.chev))::before {
    content: ""; position: absolute; inset-inline-start: 4px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
    border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .6; transition: transform .15s;
}
[data-theme="showroom"] details[open]:not(.lv-adv):not(.att-out):not(.sr-nomark) > summary:not(.lv-head):not(.act-btn):not(.btn):not(.chip):not(:has(.chev))::before { transform: rotate(-135deg); margin-top: -1px; }
/* date fields: render left-to-right so the browser's placeholder segments read in order */
[data-theme="showroom"] input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"]) { direction: ltr; text-align: start; min-width: 150px; }
:root[dir="rtl"][data-theme="showroom"] input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"]) { text-align: right; }

/* ---------- sidebar: the promo card never hides nav items on short screens ---------- */
@media (max-height: 940px) and (min-width: 1025px) {
    [data-theme="showroom"] .sr-promo { display: none; }
}

/* ---------- car identity: no orphan separators when the sub-line wraps ---------- */
[data-theme="showroom"] .car-ident__wh { white-space: nowrap; }

/* ---------- phone card labels: always the UI font, never the cell's mono/tiny size ---------- */
@media (max-width: 760px) {
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td[data-label]::before { font-family: var(--pc-font, "IBM Plex Sans Arabic", system-ui, sans-serif) !important; letter-spacing: 0 !important; font-weight: 500 !important; color: var(--pc-muted) !important; direction: rtl; }
    :root[dir="ltr"][data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td[data-label]::before { direction: ltr; }
    /* a table written left-to-right inside an RTL page keeps the page's card direction */
    :root[dir="rtl"][data-theme="showroom"] :is(table.sr-cards, .lv-t)[dir="ltr"] tbody tr,
    :root[dir="rtl"][data-theme="showroom"] :is(table.sr-cards, .lv-t) tbody tr[dir="ltr"] { direction: rtl; }
}
/* avatars hold two letters comfortably */
[data-theme="showroom"] .av--xs { width: 28px; height: 28px; font-size: 10.5px; letter-spacing: -.02em; }

/* dates/times/codes stay on one line (showroom.js marks them) */
[data-theme="showroom"] .sr-nowrap, [data-theme="showroom"] td.sr-nowrap { white-space: nowrap !important; }
[data-theme="showroom"] :is(.lv-t, .table) td :is(.pill, .badge, .st, .chip) { white-space: nowrap; }
/* an empty date field shows the field's own calendar icon only — the browser's RTL segment
   placeholder («yyyy/رهش/موي») is unreadable; it appears again as soon as the field is focused */
[data-theme="showroom"] input.sr-empty:not(:focus)::-webkit-datetime-edit { color: transparent; }
[data-theme="showroom"] input.sr-empty:not(:focus) { color: transparent; }

/* desktop tables: a dir="ltr" value (date, amount, code) lines up with its header like every other cell */
@media (min-width: 761px) {
    :root[dir="rtl"][data-theme="showroom"] :is(.lv-t, .table) td[dir="ltr"]:not(.c-num):not(.c-time) { text-align: right; }
    :root[dir="rtl"][data-theme="showroom"] :is(.lv-t, .table) td[dir="ltr"]:is(.c-num, .c-time) { text-align: left; }
}

/* phone KPI tiles: icon beside the number — no tall empty column */
@media (max-width: 760px) {
    [data-theme="showroom"] .app-content .stat { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 14px !important; min-height: 0 !important; }
    [data-theme="showroom"] .app-content .stat .stat__top { position: static !important; margin: 0 !important; flex: none; }
    [data-theme="showroom"] .app-content .stat > div:last-child { padding: 0 !important; flex: 1; min-width: 0; }
    [data-theme="showroom"] .app-content .stat .stat__value { line-height: 1.15; overflow-wrap: anywhere; white-space: normal; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) { align-items: stretch !important; }
}

/* list headers on phones: the title gets its own line, counts and ranges sit under it */
@media (max-width: 760px) {
    [data-theme="showroom"] .lv-head { flex-wrap: wrap; }
    [data-theme="showroom"] .lv-head > .lv-title { flex: 1 1 100%; flex-wrap: wrap; row-gap: 2px; }
}

/* phone cards: a cell is a block — its label on one line, its content flowing inline beneath
   (a flex column stacked icon / number / word of the same value one under another) */
@media (max-width: 760px) {
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td:not(.c-act) { display: block !important; }
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td:not(.c-act)[data-label]::before { display: block !important; margin-bottom: 2px; }
    :root[dir="rtl"][data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td[dir="ltr"]:not(.c-act) { text-align: right !important; }
    :root[dir="rtl"][data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td[dir="ltr"]:not(.c-act)::before { text-align: right; }
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td .idn { display: flex; }
}
@media (max-width: 760px) {
    [data-theme="showroom"] .lv-t tbody td.c-name::before { display: none !important; }
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td .idn { flex-wrap: nowrap !important; align-items: center; }
}

/* dark mode: dark paints (black, navy) keep a faint rim so the car never melts into its tile */
[data-mode="dark"][data-theme="showroom"] :is(.idn__car, .sd-unit__car, .sd-journey__car) { filter: drop-shadow(0 0 1px rgba(255, 250, 240, .55)) drop-shadow(0 0 .5px rgba(255, 250, 240, .35)); }
[data-mode="dark"][data-theme="showroom"] .idn__ic--paint { background: #2C2B28; }

@media (max-width: 760px) {
    /* long KPI figures: full row, one line */
    [data-theme="showroom"] .app-content .stat.sr-stat-wide { grid-column: 1 / -1; }
    [data-theme="showroom"] .app-content .stat .stat__value { white-space: nowrap !important; overflow-wrap: normal !important; }
    /* single long tokens (emails, codes) break only when they would overflow the card */
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td { overflow-wrap: break-word !important; }
    /* summary rows (merged cells): one line of totals, no column labels */
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody tr.sr-sumrow { display: flex !important; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; background: var(--pc-surface); }
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody tr.sr-sumrow td { border: 0 !important; padding: 2px 0 !important; font-weight: 700; }
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody tr.sr-sumrow td::before { display: none !important; }
    /* toolbar buttons may wrap their own label instead of spilling out of the pill */
    [data-theme="showroom"] .lv-tools .btn { white-space: normal !important; height: auto !important; min-height: 40px; line-height: 1.3; padding-block: 8px; text-align: center; }
}

/* ---------- report filter bars: one tidy grid card (reports/sales, inventory, performance, operations, daily) ---------- */
[data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px !important; align-items: end;
    padding: 16px; border-radius: 24px; background: var(--pc-surface); box-shadow: var(--pc-shadow-sm); margin-bottom: 18px;
}
[data-mode="dark"][data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) { box-shadow: none; border: 1px solid var(--pc-line); }
[data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) form[action*="/reports/"] { display: contents !important; }
[data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) .toolbar__spacer { display: none; }
[data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) .srch { grid-column: span 2; min-width: 0 !important; }
[data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) :is(select, .select, input:not([type="hidden"]):not([type="checkbox"])) { width: 100% !important; min-width: 0; }
[data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) label.meta { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 4px !important; font-size: 12px; white-space: nowrap; }
[data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) label:has(> input[type="checkbox"]) { flex-direction: row !important; align-items: center !important; min-height: 44px; }
[data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) .btn--primary[type="submit"] { justify-content: center; min-height: 44px; }
[data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) .toolbar__actions-grp { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--pc-line); }
@media (max-width: 760px) {
    [data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
    [data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) .toolbar__actions-grp { justify-content: stretch; }
    [data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) .toolbar__actions-grp > * { flex: 1 1 auto; justify-content: center; }
}

/* buttons inside table rows never break their label word-under-word */
@media (min-width: 761px) {
    [data-theme="showroom"] :is(.lv-t, .table) td :is(.btn, .pill, button) { white-space: nowrap; }
}
/* phones: a button never clips its label — it wraps inside the pill instead */
@media (max-width: 760px) {
    [data-theme="showroom"] .app-content .btn { max-width: 100%; white-space: normal; height: auto; min-height: 40px; line-height: 1.3; padding-block: 8px; }
}


/* ---------- round 3 ---------- */
/* the floating dock never covers the last row */
[data-theme="showroom"] .app-content { padding-bottom: 120px; }
/* dark red pills keep readable ink */
[data-mode="dark"][data-theme="showroom"] .pill--red { color: #FF9C95; }
/* sale header: the VIN tile spans the row and never splits */
[data-theme="showroom"] .sr-salehead__facts > div:has(.sd-mono) { grid-column: 1 / -1; }
[data-theme="showroom"] .sr-salehead__facts .sd-mono { white-space: nowrap; }
@media (max-width: 760px) {
    /* any filter form in a page toolbar: an even 2-column grid of full-width controls */
    [data-theme="showroom"] .app-content :is(.toolbar, .lv-head, .card) form[method="get"]:not([action*="/reports/"]):has(:is(select, label, .srch, input:not([type="hidden"])) ~ :is(select, label, .srch, input:not([type="hidden"]))) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; width: 100%; }
    [data-theme="showroom"] .app-content :is(.toolbar, .lv-head, .card) form[method="get"]:not([action*="/reports/"]):has(:is(select, label, .srch, input:not([type="hidden"])) ~ :is(select, label, .srch, input:not([type="hidden"]))) > * { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; flex: none !important; }
    [data-theme="showroom"] .app-content :is(.toolbar, .lv-head, .card) form[method="get"]:not([action*="/reports/"]):has(:is(select, label, .srch, input:not([type="hidden"])) ~ :is(select, label, .srch, input:not([type="hidden"]))) > :is(.srch, label.srch, input[type="search"]) { grid-column: 1 / -1; }
    [data-theme="showroom"] .app-content :is(.toolbar, .lv-head, .card) form[method="get"] label:has(> input) { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 4px; }
    [data-theme="showroom"] .app-content :is(.toolbar, .lv-head, .card) form[method="get"] :is(select, input:not([type="checkbox"]):not([type="hidden"])) { width: 100% !important; }
    /* pills inside phone cards stay whole (dot + label on one line) */
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody td .pill { white-space: nowrap; max-width: 100%; }
}
/* desktop: a car's name line never breaks (the meta line under it may) */
@media (min-width: 761px) {
    [data-theme="showroom"] :is(.lv-t, .table) .car-ident .t b { white-space: nowrap !important; }
    [data-theme="showroom"] :is(.lv-t, .table) .car-ident .t b small.car-ident__meta { white-space: normal; }
}
@media (min-width: 761px) {
    /* fixed min-widths written into the views would defeat fitTables(): the content decides */
    [data-theme="showroom"] .app-content table:is(.lv-t, .table) { min-width: 0 !important; }
}
@media (min-width: 761px) {
    [data-theme="showroom"] table.sr-thwrap th { white-space: normal !important; line-height: 1.35; vertical-align: bottom; min-width: 5em; }
}
/* pending step circles (sales/show payment steps) */
:root[data-theme="showroom"] { --pc-step-off: #C9C5BE; }
:root[data-theme="showroom"][data-mode="dark"] { --pc-step-off: #4A4842; }

/* ---------- round 3 (final) ---------- */
/* report filter forms keep their own grid (display:contents) on phones too */
@media (max-width: 760px) {
    [data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) form[action*="/reports/"] { display: contents !important; }
    [data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) form[action*="/reports/"] > * { width: 100% !important; }
    [data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) form[action*="/reports/"] > :is(.srch, label.srch) { grid-column: 1 / -1; }
    [data-theme="showroom"] .toolbar:has(form[action*="/reports/"]) form[action*="/reports/"] > .btn--primary[type="submit"] { grid-column: 1 / -1; }
    /* phone cards fill gaps left by full-width cells */
    [data-theme="showroom"] :is(.lv-t, table.sr-cards) tbody tr { grid-auto-flow: row dense; }
}
/* dark mode: car thumbnails sit on a mid-tone tile so black and white paints both read */
[data-mode="dark"][data-theme="showroom"] .idn__ic--paint { background: #55534D; }
/* dark mode: the selected chip/tab is clearly selected */
[data-mode="dark"][data-theme="showroom"] :is(.chip[aria-pressed="true"], .ship-tabs .is-active, .lv-views .is-active) { background: var(--pc-ink) !important; color: var(--pc-canvas) !important; border-color: transparent !important; }
/* RTL pagers: «previous» points right, «next» points left */
:root[dir="rtl"][data-theme="showroom"] .pager :is(.pf-angle_left, .pf-angle_right) { transform: scaleX(-1); }
/* the shipping sub-nav fits one row on a laptop */
@media (min-width: 1025px) {
    [data-theme="showroom"] .ship-tabs { gap: 6px !important; }
    [data-theme="showroom"] .ship-tabs > * { padding-inline: 12px !important; font-size: 12.5px; }
}
/* desktop KPI figures: number + currency may wrap at the space instead of being cut */
@media (min-width: 761px) {
    [data-theme="showroom"] .stat__value { white-space: normal !important; overflow-wrap: normal; }
}
/* full-height work surfaces (WhatsApp inbox, team chat): the floating dock would cover the composer */
[data-theme="showroom"] body:has(.wa-list, .chat-wrap) .sr-dock { display: none; }
@media (min-width: 761px) {
    [data-theme="showroom"] table.sr-squeeze td:not(.c-act) { white-space: normal !important; min-width: 0 !important; overflow-wrap: anywhere; padding-inline: 10px; }
    [data-theme="showroom"] table.sr-squeeze th { padding-inline: 10px; }
}


/* ---------- phones: the KPI tiles of every page are ONE compact summary card ----------
   (separate big tiles took ~200px before any content). Cells are split by hairlines. */
@media (max-width: 760px) {
    [data-theme="showroom"] .app-content .grid:has(> .stat) {
        gap: 1px !important; padding: 0; overflow: hidden; border-radius: 22px;
        background: var(--pc-line) !important; box-shadow: var(--pc-shadow-sm);
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-bottom: 16px !important;
    }
    [data-mode="dark"][data-theme="showroom"] .app-content .grid:has(> .stat) { box-shadow: none; border: 1px solid var(--pc-line); }
    [data-theme="showroom"] .app-content .grid:has(> .stat) > .stat {
        border-radius: 0 !important; border: 0 !important; box-shadow: none !important; transform: none !important;
        background: var(--pc-surface) !important; color: var(--pc-ink) !important;
        padding: 11px 12px !important; gap: 10px !important; min-height: 0 !important;
    }
    [data-theme="showroom"] .app-content .grid:has(> .stat) > .stat::before,
    [data-theme="showroom"] .app-content .grid:has(> .stat) > .stat::after { display: none !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__icon { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__icon .icon { width: 17px; height: 17px; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat--hero .stat__icon { background: var(--pc-dark) !important; color: #fff !important; }
    [data-mode="dark"][data-theme="showroom"] .app-content .grid:has(> .stat) .stat--hero .stat__icon { background: var(--pc-ink) !important; color: var(--pc-canvas) !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__value { font-size: 19px !important; line-height: 1.15; color: var(--pc-ink) !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__value .dec { color: var(--pc-faint) !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__label { font-size: 11.5px !important; line-height: 1.35; color: var(--pc-muted) !important; margin-top: 1px; }
    /* extras beside the icon (e.g. «0%») stay small and inline */
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__top { display: flex; align-items: center; gap: 6px; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__top > :not(.stat__icon) { font-size: 11.5px !important; }
    /* an odd last cell takes the full row so there is no empty hole */
    [data-theme="showroom"] .app-content .grid:has(> .stat) > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) > :first-child:nth-last-child(odd) { grid-column: auto; }
}
@media (max-width: 760px) {
    [data-theme="showroom"] .app-content .grid:has(> .stat) { grid-auto-flow: row dense; }
    /* day navigators (‹ date › «today»): one row — the single date field takes the free width */
    [data-theme="showroom"] .toolbar:has(> form > input[type="date"]) { flex-wrap: wrap; gap: 8px !important; }
    [data-theme="showroom"] .toolbar > form:has(> input[type="date"]):not(:has(select)) { flex: 1 1 0; min-width: 0; }
    [data-theme="showroom"] .toolbar > form:has(> input[type="date"]):not(:has(select)) input[type="date"] { width: 100%; min-width: 0; }
    [data-theme="showroom"] .toolbar:has(> form > input[type="date"]) > a.btn { flex: none; min-height: 44px; padding-inline: 14px; }
    [data-theme="showroom"] .toolbar:has(> form > input[type="date"]) > .toolbar__spacer { flex-basis: 100%; height: 0; }
}
@media (max-width: 760px) {
    /* same selector as showroom.css so this later rule wins: hairline gaps, not 12px bands */
    [data-theme="showroom"] .app-content .grid:has(> .stat, > .card > .kpi):has(> .stat) { gap: 1px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- KPI tiles on every width: ONE summary bar, cells split by hairlines ----------
   (laptop: one row of up to 6 cells; phone: 2 columns — rule below) */
[data-theme="showroom"] .app-content .grid:has(> .stat, > .card > .kpi):has(> .stat) {
    gap: 1px !important; padding: 0 !important; overflow: hidden; border-radius: 24px; align-items: stretch !important;
    background: var(--pc-line) !important; box-shadow: var(--pc-shadow-sm);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; grid-auto-flow: row dense;
    margin-bottom: 20px !important;
}
[data-mode="dark"][data-theme="showroom"] .app-content .grid:has(> .stat, > .card > .kpi):has(> .stat) { box-shadow: none; border: 1px solid var(--pc-line); }
[data-theme="showroom"] .app-content .grid:has(> .stat) > .stat {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    border-radius: 0 !important; border: 0 !important; box-shadow: none !important; transform: none !important;
    background: var(--pc-surface) !important; color: var(--pc-ink) !important;
    padding: 16px 18px !important; gap: 14px !important; min-height: 0 !important;
}
[data-theme="showroom"] .app-content .grid:has(> .stat) > .stat:hover { background: var(--pc-surface-2) !important; }
[data-theme="showroom"] .app-content .grid:has(> .stat) > .stat::before,
[data-theme="showroom"] .app-content .grid:has(> .stat) > .stat::after { display: none !important; }
[data-theme="showroom"] .app-content .grid:has(> .stat) .stat__top { position: static !important; margin: 0 !important; flex: none; display: flex; align-items: center; gap: 6px; }
[data-theme="showroom"] .app-content .grid:has(> .stat) .stat__top > :not(.stat__icon) { font-size: 12px !important; }
[data-theme="showroom"] .app-content .grid:has(> .stat) > .stat > div:last-child { padding: 0 !important; flex: 1; min-width: 0; }
[data-theme="showroom"] .app-content .grid:has(> .stat) .stat__icon { width: 42px !important; height: 42px !important; border-radius: 13px !important; }
[data-theme="showroom"] .app-content .grid:has(> .stat) .stat__icon .icon { width: 20px; height: 20px; }
[data-theme="showroom"] .app-content .grid:has(> .stat) .stat--hero .stat__icon { background: var(--pc-dark) !important; color: #fff !important; }
[data-mode="dark"][data-theme="showroom"] .app-content .grid:has(> .stat) .stat--hero .stat__icon { background: var(--pc-ink) !important; color: var(--pc-canvas) !important; }
[data-theme="showroom"] .app-content .grid:has(> .stat) .stat__value { font-size: 24px !important; line-height: 1.15; color: var(--pc-ink) !important; white-space: nowrap !important; }
[data-theme="showroom"] .app-content .grid:has(> .stat) .stat__value .dec { color: var(--pc-faint) !important; }
[data-theme="showroom"] .app-content .grid:has(> .stat) .stat__label { font-size: 12.5px !important; line-height: 1.4; color: var(--pc-muted) !important; margin-top: 2px; }
[data-theme="showroom"] .app-content .grid:has(> .stat) > .stat.sr-stat-span { grid-column: span 2; }
@media (max-width: 760px) {
    [data-theme="showroom"] .app-content .grid:has(> .stat, > .card > .kpi):has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-radius: 22px; margin-bottom: 16px !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) > .stat { padding: 11px 12px !important; gap: 10px !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__icon { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__icon .icon { width: 17px; height: 17px; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__value { font-size: 19px !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) .stat__label { font-size: 11.5px !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat) > .stat.sr-stat-wide,
    [data-theme="showroom"] .app-content .grid:has(> .stat) > .stat.sr-stat-span { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    /* showroom.js decides which cells take a full row; the CSS-only guess is switched off */
    [data-theme="showroom"] .app-content .grid:has(> .stat) > .stat:last-child:nth-child(odd):not(.sr-stat-span):not(.sr-stat-wide) { grid-column: auto; }
}
@media (max-width: 760px) {
    [data-theme="showroom"] .app-content .grid:has(> .stat, > .card > .kpi) > .stat:first-child:nth-last-child(odd):not(.sr-stat-span):not(.sr-stat-wide) { grid-column: auto; }
}