/* ============================================================================
   Bulk Basket — Supplier admin redesign layer
   Design tokens + reskinned shell + bbx-* content components.
   Loaded LAST in suppliers/layouts/header.blade.php so it wins the cascade.
   Only loaded on supplier admin pages (not the React/welcome SPA).

   Namespacing rule: generic content classes are all bbx-* prefixed so they
   never clobber Bootstrap on the ~84 not-yet-migrated admin pages. Shell
   selectors target the existing Qompac classes directly (safe — this file
   only loads inside the admin shell).
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
    /* cool, green-biased neutrals */
    --bbx-bg: #F5F8F6;
    --bbx-surface: #FFFFFF;
    --bbx-surface-2: #FBFCFB;
    /* Row banding ONLY (thead tint, row hover, open row + its detail panel, calc/total rows).
       --bbx-surface-2 is a faint PANEL wash used by ~150 chips, thumbs, troughs and subcards; at
       1.03:1 on white it is invisible as a band, and darkening it would turn every chip into a
       button. Two tokens instead of one compromised value. 1.12:1 on white — Bootstrap's step. */
    --bbx-row-band: #EFF3F0;
    --bbx-border: #E4EAE7;
    --bbx-border-strong: #D3DCD8;
    --bbx-text: #15201B;
    --bbx-text-2: #43524C;
    /* #6C7C75 measured 4.11:1 on the page ground and 4.27:1 on panel surfaces — under the 4.5
       floor for normal text. Darkened to clear AA on all four light grounds; nudged again from
       #65756E (4.34:1 on the new row band) to hold 4.5 there — 4.53 / 4.74 / 4.93 / 5.07. */
    --bbx-muted: #62726B;
    --bbx-faint: #93A199;

    /* brand accent — deep spruce, primary + active nav only */
    --bbx-accent: #1C6B4C;
    --bbx-on-accent: #fff;
    --bbx-accent-hover: #175A40;
    --bbx-accent-weak: #E7F1EC;
    --bbx-accent-ink: #0F3D2C;
    /* chip/pill tint + its edge, mixed from the accent so both track the brand */
    --bbx-accent-soft: color-mix(in srgb, var(--bbx-accent) 12%, transparent);
    --bbx-accent-border: color-mix(in srgb, var(--bbx-accent) 28%, transparent);

    /* semantic state — distinct from accent */
    --bbx-warn: #986310;
    --bbx-warn-bg: #FBF1DE;
    --bbx-warn-line: #E4B45A;
    --bbx-crit: #A5323F;
    --bbx-crit-bg: #FBE7E9;
    --bbx-crit-line: #D77A84;
    --bbx-ok: #1C6B4C;
    --bbx-ok-bg: #E7F1EC;

    /* categorical — pricing modes are categories, not status */
    --bbx-mode-mrp: #2F5E96;
    --bbx-mode-mrp-bg: #E7EEF7;
    --bbx-mode-cost: #97662A;
    --bbx-mode-cost-bg: #F6ECDD;

    /* loading — sheen sweeps across --bbx-border, so it must invert per theme */
    --bbx-skeleton-sheen: rgba(255, 255, 255, .85);

    --bbx-radius: 11px;
    --bbx-radius-sm: 8px;
    --bbx-shadow: 0 1px 2px rgba(16, 40, 30, .05), 0 8px 24px -16px rgba(16, 40, 30, .22);
    --bbx-shadow-pop: 0 12px 40px -12px rgba(16, 40, 30, .30);
    --bbx-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bbx-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bbx-bg: #000000;
        --bbx-surface: #131415;
        --bbx-surface-2: #0B0C0D;
        /* Band goes UP here, not down: below #131415 the only room left is the pure-black page
           ground, so a darker band would eat the panel edge. Lifting instead keeps the same
           perceptual step as light mode (ΔL* 4.6) and stays clear of --bbx-border. */
        --bbx-row-band: #1B1D1C;
        --bbx-border: #232426;
        --bbx-border-strong: #313335;
        --bbx-text: #F1F3F2;
        --bbx-text-2: #B6BCBA;
        --bbx-muted: #868B89;
        --bbx-faint: #626765;
        --bbx-accent: #38B27C; --bbx-on-accent: #0B1F17;
        --bbx-accent-hover: #45C089;
        --bbx-accent-weak: #16342697;
        --bbx-accent-ink: #BFEBD6;
        --bbx-warn: #E7B85E; --bbx-warn-bg: #2C2413; --bbx-warn-line: #6E5623;
        --bbx-crit: #EB8A94; --bbx-crit-bg: #2E1618; --bbx-crit-line: #713036;
        --bbx-ok: #38B27C; --bbx-ok-bg: #163426;
        --bbx-mode-mrp: #7FB0E6; --bbx-mode-mrp-bg: #16283C;
        --bbx-mode-cost: #DDA967; --bbx-mode-cost-bg: #2E2415;
        --bbx-skeleton-sheen: rgba(255, 255, 255, .07);
        --bbx-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .6);
        --bbx-shadow-pop: 0 12px 44px -12px rgba(0, 0, 0, .7);
    }

    /* guarded so an explicit light choice keeps the light tint */
    :root:not([data-theme="light"]) {
        --bbx-accent-soft: color-mix(in srgb, var(--bbx-accent) 18%, transparent);
        --bbx-accent-border: color-mix(in srgb, var(--bbx-accent) 40%, transparent);
    }
}

/* explicit toggle wins over the media query, both directions */
:root[data-theme="light"] {
    --bbx-bg: #F5F8F6; --bbx-surface: #FFFFFF; --bbx-surface-2: #FBFCFB; --bbx-row-band: #EFF3F0; --bbx-border: #E4EAE7; --bbx-border-strong: #D3DCD8;
    /* keep --bbx-muted in sync with the :root default above (AA fix, was #6C7C75 then #65756E) —
       the no-flash init always stamps data-theme, so THIS block is the one that actually applies. */
    --bbx-text: #15201B; --bbx-text-2: #43524C; --bbx-muted: #62726B; --bbx-faint: #93A199;
    --bbx-accent: #1C6B4C; --bbx-accent-hover: #175A40; --bbx-accent-weak: #E7F1EC; --bbx-accent-ink: #0F3D2C;
    --bbx-accent-soft: color-mix(in srgb, var(--bbx-accent) 12%, transparent);
    --bbx-accent-border: color-mix(in srgb, var(--bbx-accent) 28%, transparent);
    --bbx-on-accent: #fff;
    --bbx-warn: #986310; --bbx-warn-bg: #FBF1DE; --bbx-warn-line: #E4B45A; --bbx-crit: #A5323F; --bbx-crit-bg: #FBE7E9; --bbx-crit-line: #D77A84;
    --bbx-ok: #1C6B4C; --bbx-ok-bg: #E7F1EC; --bbx-mode-mrp: #2F5E96; --bbx-mode-mrp-bg: #E7EEF7; --bbx-mode-cost: #97662A; --bbx-mode-cost-bg: #F6ECDD;
    --bbx-skeleton-sheen: rgba(255, 255, 255, .85);
    --bbx-shadow: 0 1px 2px rgba(16, 40, 30, .05), 0 8px 24px -16px rgba(16, 40, 30, .22); --bbx-shadow-pop: 0 12px 40px -12px rgba(16, 40, 30, .30);
}

:root[data-theme="dark"] {
    --bbx-bg: #000000; --bbx-surface: #131415; --bbx-surface-2: #0B0C0D; --bbx-row-band: #1B1D1C; --bbx-border: #232426; --bbx-border-strong: #313335;
    --bbx-text: #F1F3F2; --bbx-text-2: #B6BCBA; --bbx-muted: #868B89; --bbx-faint: #626765;
    --bbx-accent: #38B27C; --bbx-on-accent: #0B1F17; --bbx-accent-hover: #45C089; --bbx-accent-weak: #16342697; --bbx-accent-ink: #BFEBD6;
    /* stronger mix than light — a 12% tint is invisible on the dark ground */
    --bbx-accent-soft: color-mix(in srgb, var(--bbx-accent) 18%, transparent);
    --bbx-accent-border: color-mix(in srgb, var(--bbx-accent) 40%, transparent);
    --bbx-warn: #E7B85E; --bbx-warn-bg: #2C2413; --bbx-warn-line: #6E5623; --bbx-crit: #EB8A94; --bbx-crit-bg: #2E1618; --bbx-crit-line: #713036;
    --bbx-ok: #38B27C; --bbx-ok-bg: #163426; --bbx-mode-mrp: #7FB0E6; --bbx-mode-mrp-bg: #16283C; --bbx-mode-cost: #DDA967; --bbx-mode-cost-bg: #2E2415;
    --bbx-skeleton-sheen: rgba(255, 255, 255, .07);
    --bbx-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .6); --bbx-shadow-pop: 0 12px 44px -12px rgba(0, 0, 0, .7);
}

/* ============================================================================
   SHELL — restyle the existing Qompac layout to the redesign.
   Targets existing classes; does not touch the sidebar DOM or permission JS.
   ========================================================================= */

body {
    background: var(--bbx-bg);
    color: var(--bbx-text);
    -webkit-font-smoothing: antialiased;
}

.content-inner {
    background: var(--bbx-bg);
    color: var(--bbx-text);
}

/* ---- Sidebar ---- */
.sidebar.sidebar-base {
    background: var(--bbx-surface);
    border-right: 1px solid var(--bbx-border);
    box-shadow: none;
}

.sidebar .sidebar-header {
    border-bottom: 1px solid var(--bbx-border);
    background: var(--bbx-surface);
}

#sidebar-menu .nav-link {
    color: var(--bbx-text-2);
    font-weight: 550;
    font-size: 13.5px;
    border-radius: var(--bbx-radius-sm);
    padding: 9px 12px;
}

#sidebar-menu .nav-link .icon,
#sidebar-menu .nav-link > i,
#sidebar-menu .nav-link svg {
    color: var(--bbx-muted);
}

#sidebar-menu .nav-link:hover {
    background: var(--bbx-surface-2);
    color: var(--bbx-text);
}

#sidebar-menu .nav-link.active {
    background: var(--bbx-accent-weak);
    color: var(--bbx-accent-ink);
    font-weight: 650;
}

#sidebar-menu .nav-link.active .icon,
#sidebar-menu .nav-link.active svg,
#sidebar-menu .nav-link.active > i {
    color: var(--bbx-accent);
}

#sidebar-menu .item-name {
    letter-spacing: -.1px;
}

/* section eyebrow (Qompac "static-item" rows like Home) */
#sidebar-menu .static-item .nav-link,
#sidebar-menu .nav-link.static-item {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--bbx-faint);
    opacity: 1;
}

/* sub-nav (collapse children) */
#sidebar-menu .sub-nav .nav-link {
    color: var(--bbx-muted);
    font-size: 13px;
    font-weight: 500;
}

#sidebar-menu .sub-nav .nav-link:hover {
    color: var(--bbx-text-2);
    background: var(--bbx-surface-2);
}

#sidebar-menu .sub-nav .nav-link.active {
    background: var(--bbx-accent-weak);
    color: var(--bbx-accent-ink);
    font-weight: 600;
}

/* nav badge (e.g. Pricing Engine needs-attention count) */
#sidebar-menu .badge,
#sidebar-menu .nav-badge {
    background: var(--bbx-crit);
    color: #fff;
}

/* ---- Topbar ---- */
.iq-navbar {
    background: color-mix(in srgb, var(--bbx-bg) 82%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bbx-border);
    box-shadow: none;
}

.iq-navbar .navbar-list .nav-link,
.iq-navbar .caption-title {
    color: var(--bbx-text-2);
}

.iq-navbar .caption-sub-title {
    color: var(--bbx-muted);
}

/* Hide the Qompac template's own theme dropdown — we ship our own toggle */
.iq-navbar .theme-scheme-dropdown {
    display: none !important;
}

/* Our theme toggle button in the topbar */
.bbx-theme-toggle {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--bbx-surface);
    border: 1px solid var(--bbx-border);
    border-radius: 9px;
    color: var(--bbx-text-2);
    margin: 0 4px;
    transition: border-color .16s ease, color .16s ease;
}

.bbx-theme-toggle:hover {
    border-color: var(--bbx-border-strong);
    color: var(--bbx-text);
}

.bbx-theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* ============================================================================
   DARK-MODE BASELINE for not-yet-migrated Bootstrap content.
   Keeps legacy admin pages usable when the toggle is dark, without theming
   all of Bootstrap. Reskinned pages use bbx-* and don't rely on this.
   ========================================================================= */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--bbx-surface);
    border-color: var(--bbx-border);
    color: var(--bbx-text);
}

/* select2 draws its list outside the page's own boxes, on a white ground of its own. */
:root[data-theme="dark"] .select2-dropdown {
    background-color: var(--bbx-surface);
    border-color: var(--bbx-border);
    color: var(--bbx-text);
}
:root[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--bbx-surface-2);
    border-color: var(--bbx-border);
    color: var(--bbx-text);
}
:root[data-theme="dark"] .select2-results__option--selected,
:root[data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: var(--bbx-row-band);
}

:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
    background-color: var(--bbx-surface);
    border-color: var(--bbx-border);
    color: var(--bbx-text);
}

:root[data-theme="dark"] .table {
    color: var(--bbx-text);
    border-color: var(--bbx-border);
}

:root[data-theme="dark"] .table > :not(caption) > * > * {
    border-color: var(--bbx-border);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--bbx-surface-2);
    border-color: var(--bbx-border);
    color: var(--bbx-text);
}

:root[data-theme="dark"] .text-muted {
    color: var(--bbx-muted) !important;
}

:root[data-theme="dark"] .dropdown-item {
    color: var(--bbx-text);
}

:root[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bbx-surface-2);
}

/* bulkbasket-theme.css sets `#page_layout label { color: #425466 }` — a mid-slate that is legible on
   the old white pages but not on the dark theme. Legacy Bootstrap modals deliberately sit OUTSIDE
   .bbx (their JS is wired to Bootstrap), so the .bbx rules never reach their labels. Fix at the
   same specificity as the theme's ID rule, dark theme only, so light pages are untouched. */
:root[data-theme="dark"] #page_layout label,
:root[data-theme="dark"] .modal label,
:root[data-theme="dark"] #page_layout .form-label {
    color: var(--bbx-text-2);
}

/* Same problem, worse consequence: the theme also inks form controls via `#page_layout .form-control`
   (#1f2d3a), so typed text was near-invisible on the dark ground — on legacy pages and inside modals
   alike. Restate at ID specificity for the dark theme only. */
:root[data-theme="dark"] #page_layout .form-control,
:root[data-theme="dark"] #page_layout .form-select,
:root[data-theme="dark"] #page_layout .bb-form-control,
:root[data-theme="dark"] #page_layout input,
:root[data-theme="dark"] #page_layout select,
:root[data-theme="dark"] #page_layout textarea,
:root[data-theme="dark"] .modal .form-control,
:root[data-theme="dark"] .modal .form-select,
:root[data-theme="dark"] .modal input,
:root[data-theme="dark"] .modal select,
:root[data-theme="dark"] .modal textarea {
    background-color: var(--bbx-surface-2);
    border-color: var(--bbx-border);
    color: var(--bbx-text);
}
:root[data-theme="dark"] #page_layout ::placeholder,
:root[data-theme="dark"] .modal ::placeholder { color: var(--bbx-faint); opacity: 1; }

/* bulkbasket-theme.css hardcodes `.modal .modal-body`/`.modal-footer { background:#fff }`. The dark
   baseline above only darkened .modal-content, so in dark mode a modal kept a WHITE body/footer
   sheet while our near-white ink sat on it — plain body copy ("Are you sure…?") was invisible.
   Modals sit outside .bbx by policy, so key off the theme attribute (the no-flash init in
   layouts/header.blade.php always stamps data-theme, so this never misses). */
:root[data-theme="dark"] .modal .modal-body,
:root[data-theme="dark"] .modal .modal-footer {
    background: var(--bbx-surface);
    border-color: var(--bbx-border);
    color: var(--bbx-text);
}

/* Legacy Bootstrap tables are themed through `#page_layout .table …` (ID specificity), so their
   cream `#f6faf3` header ground survived into dark mode — on un-migrated pages AND inside modals.
   Restate with the theme attribute in front to outrank it. `color` needs !important because
   custom.min.css ships `th, td { color: black !important }` (see the .bbx-table note below).
   Does NOT touch .bbx-table — the conversion recipe drops the Bootstrap `table` class. */
:root[data-theme="dark"] #page_layout .table thead th,
:root[data-theme="dark"] .modal .table thead th {
    background: var(--bbx-surface-2);
    border-bottom-color: var(--bbx-border);
    color: var(--bbx-text-2) !important;
}
:root[data-theme="dark"] #page_layout .table tbody td,
:root[data-theme="dark"] .modal .table tbody td {
    border-color: var(--bbx-border);
    color: var(--bbx-text) !important;
}

/* ============================================================================
   CONTENT COMPONENTS — bbx-* (used by redesigned pages, inside a .bbx wrapper)
   ========================================================================= */
.bbx { color: var(--bbx-text); font-family: var(--bbx-ui); }
.bbx :focus-visible { outline: 2px solid var(--bbx-accent); outline-offset: 2px; border-radius: 6px; }

/* Breadcrumbs + page head */
.bbx-crumbs { display: flex; align-items: center; gap: 7px; color: var(--bbx-muted); font-size: 12.5px; font-weight: 500; margin-bottom: 12px; }
.bbx-crumbs .sep { color: var(--bbx-faint); }
.bbx-crumbs .here { color: var(--bbx-text-2); font-weight: 600; }

.bbx-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.bbx-page-head h1 { font-size: 23px; letter-spacing: -.5px; margin: 0; color: var(--bbx-text); }
.bbx-page-head p { margin: 5px 0 0; color: var(--bbx-muted); font-size: 13.5px; max-width: 62ch; }
/* ⚠️ THIS ROW COULD NEITHER SHRINK NOR WRAP, so a head with enough buttons was simply CUT OFF at
   the right edge. `flex: none` refuses to shrink and there was no `flex-wrap`, so the buttons kept
   their full intrinsic width and ran off the panel — the parent's `flex-wrap` cannot help, because
   the actions block itself was one unbreakable line. Adding Export and WhatsApp to the Order
   Challan is what pushed it over, but the fault is here and every screen with a full head has it:
   Print / Export / WhatsApp / Order history / Back to new orders comes to ~550px of buttons.
   Wrapping to a second line, right-aligned, is what a toolbar should do when it runs out of room. */
.bbx-head-actions { display: flex; gap: 9px; flex: 0 1 auto; min-width: 0; align-items: center;
    flex-wrap: wrap; justify-content: flex-end; }

/* Buttons */
.bbx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 9px;
    font-size: 13px; font-weight: 600; border: 1px solid var(--bbx-border); background: var(--bbx-surface);
    color: var(--bbx-text-2); cursor: pointer; text-decoration: none; transition: border-color .16s, color .16s, background .16s; }
.bbx-btn svg { width: 16px; height: 16px; }
.bbx-btn:hover { border-color: var(--bbx-border-strong); color: var(--bbx-text); }
/* A REFUSED CONTROL MUST LOOK REFUSED — app-wide, and it never did.
   `.bbx-btn` carries `cursor: pointer`, so a `<span class="bbx-btn" aria-disabled="true">` — the
   pattern every v2 screen uses to keep a withheld action in the layout — rendered at full opacity
   with a hand cursor, identical to a live button, and did nothing when clicked. The client
   reported exactly that against the pick ticket Cancel. Only two screens had ever styled it, and
   one of them matched `.bbx-rowbtn` alone, which is why Cancel misled where Invoice beside it did
   not. `:hover` is neutralised too, or the control still lights up under the pointer. */
.bbx-btn[aria-disabled="true"], .bbx-rowbtn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
.bbx-btn[aria-disabled="true"]:hover, .bbx-rowbtn[aria-disabled="true"]:hover {
    border-color: var(--bbx-border); color: var(--bbx-text-2); background: var(--bbx-surface); }
.bbx-btn.primary { background: var(--bbx-accent); border-color: var(--bbx-accent); color: var(--bbx-on-accent); box-shadow: 0 6px 16px -8px var(--bbx-accent); }
.bbx-btn.primary:hover { background: var(--bbx-accent-hover); border-color: var(--bbx-accent-hover); color: var(--bbx-on-accent); }
.bbx-btn.sm { padding: 6px 11px; font-size: 12.5px; }

.bbx-proposal { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: var(--bbx-accent-ink); background: var(--bbx-accent-weak);
    border: 1px solid color-mix(in srgb, var(--bbx-accent) 30%, transparent); padding: 4px 10px; border-radius: 999px; }

/* KPI strip */
.bbx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.bbx-kpi { background: var(--bbx-surface); border: 1px solid var(--bbx-border); border-radius: var(--bbx-radius);
    padding: 15px 16px; box-shadow: var(--bbx-shadow); position: relative; overflow: hidden; }
.bbx-kpi .lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--bbx-muted); }
.bbx-kpi .val { font-family: var(--bbx-mono); font-size: 25px; font-weight: 600; letter-spacing: -1px; margin-top: 7px;
    font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; color: var(--bbx-text); }
.bbx-kpi .val .unit { font-size: 13px; color: var(--bbx-muted); font-weight: 500; }
.bbx-kpi .sub { font-size: 12px; font-weight: 600; margin-top: 5px; color: var(--bbx-muted); }
.bbx-kpi.alert { border-color: var(--bbx-warn-line); }
.bbx-kpi.alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bbx-warn); }
.bbx-kpi.alert.crit { border-color: var(--bbx-crit-line); }
.bbx-kpi.alert.crit::before { background: var(--bbx-crit); }

/* Toolbar */
.bbx-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bbx-toolbar .grow { flex: 1; }

/* Panel + table */
.bbx-panel { background: var(--bbx-surface); border: 1px solid var(--bbx-border); border-radius: var(--bbx-radius);
    box-shadow: var(--bbx-shadow); overflow: hidden; }
.bbx-panel + .bbx-panel { margin-top: 16px; }
.bbx-panel-head { padding: 15px 18px; border-bottom: 1px solid var(--bbx-border); }
.bbx-panel-head h2 { font-size: 15px; margin: 0; color: var(--bbx-text); letter-spacing: -.2px; }
.bbx-panel-head p { margin: 4px 0 0; color: var(--bbx-muted); font-size: 12.5px; }
.bbx-panel-body { padding: 18px; }
/* action row at the bottom of a panel (esp. a flush/table panel) */
.bbx-panel-foot { padding: 14px 18px; border-top: 1px solid var(--bbx-border);
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.bbx-panel-foot:empty, .bbx-panel-foot:has(> .d-none:only-child) { display: none; }

.bbx-table-scroll { overflow-x: auto; }
.bbx-table { width: 100%; border-collapse: collapse; }
.bbx-table thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--bbx-muted); padding: 12px 16px; border-bottom: 1px solid var(--bbx-border); background: var(--bbx-row-band); white-space: nowrap; }
.bbx-table thead th.num, .bbx-table td.num { text-align: right; }
.bbx-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--bbx-border); vertical-align: middle; color: var(--bbx-text); }
.bbx-table tbody tr:last-child td { border-bottom: 0; }
.bbx-table tbody tr { transition: background .12s; }
.bbx-table tbody tr:hover { background: var(--bbx-row-band); }
.bbx-table tbody tr.attn td:first-child { box-shadow: inset 3px 0 0 var(--bbx-warn); }
.bbx-table tbody tr.attn.crit td:first-child { box-shadow: inset 3px 0 0 var(--bbx-crit); }
.bbx-idx { color: var(--bbx-faint); font-family: var(--bbx-mono); font-size: 12px; font-variant-numeric: tabular-nums; }

/* product cell */
.bbx-prod { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.bbx-thumb { width: 42px; height: 42px; border-radius: 9px; flex: none; object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); background: var(--bbx-surface-2); }
.bbx-prod .nm { font-weight: 600; font-size: 13.5px; color: var(--bbx-text); }
/* emphasised product name in a plain table cell (no thumb) */
.bbx-prod-name { font-weight: 650; color: var(--bbx-text); }
.bbx-prod .meta { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.bbx-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    padding: 3px 7px; border-radius: 6px; background: var(--bbx-surface-2); border: 1px solid var(--bbx-border); color: var(--bbx-muted);
    max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbx-cat { color: var(--bbx-text-2); font-size: 13px; font-weight: 500; }

/* mode pill (categorical) */
.bbx-mode { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.bbx-mode .d { width: 7px; height: 7px; border-radius: 50%; }
.bbx-mode .rate { font-family: var(--bbx-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.bbx-mode.mrp { background: var(--bbx-mode-mrp-bg); color: var(--bbx-mode-mrp); }
.bbx-mode.mrp .d { background: var(--bbx-mode-mrp); }
.bbx-mode.cost { background: var(--bbx-mode-cost-bg); color: var(--bbx-mode-cost); }
.bbx-mode.cost .d { background: var(--bbx-mode-cost); }
.bbx-mode.off { background: var(--bbx-surface-2); color: var(--bbx-muted); border: 1px solid var(--bbx-border); }
.bbx-mode.off .d { background: var(--bbx-faint); }

/* flag (state) */
.bbx-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 650; }
.bbx-flag svg { width: 13px; height: 13px; }
.bbx-flag.warn { background: var(--bbx-warn-bg); color: var(--bbx-warn); }
.bbx-flag.crit { background: var(--bbx-crit-bg); color: var(--bbx-crit); }
.bbx-flag.ok { background: var(--bbx-ok-bg); color: var(--bbx-ok); }

/* rotation, price, updated */
.bbx-rot { font-size: 12.5px; font-weight: 600; color: var(--bbx-text-2); }
.bbx-rot small { display: block; color: var(--bbx-faint); font-weight: 500; font-size: 11px; }
.bbx-price { font-family: var(--bbx-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; color: var(--bbx-text); }
.bbx-price small { color: var(--bbx-faint); font-weight: 500; }
.bbx-price.none { color: var(--bbx-faint); }
.bbx-upd { color: var(--bbx-muted); font-size: 12.5px; white-space: nowrap; }

.bbx-rowbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px;
    font-size: 12.5px; font-weight: 600; border: 1px solid var(--bbx-border); background: var(--bbx-surface); color: var(--bbx-text-2);
    cursor: pointer; text-decoration: none; }
.bbx-rowbtn:hover { border-color: var(--bbx-accent); color: var(--bbx-accent); }
.bbx-rowbtn svg { width: 13px; height: 13px; }

/* table footer / pager */
.bbx-tfoot { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-top: 1px solid var(--bbx-border);
    color: var(--bbx-muted); font-size: 12.5px; flex-wrap: wrap; gap: 10px; }
.bbx-tfoot b { color: var(--bbx-text-2); }
.bbx-pager { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.bbx-pager .page-link, .bbx-pager button, .bbx-pager a { min-width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--bbx-border);
    background: var(--bbx-surface); color: var(--bbx-text-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; text-decoration: none; }
.bbx-pager .active .page-link, .bbx-pager .page-item.active .page-link { background: var(--bbx-accent); border-color: var(--bbx-accent); color: var(--bbx-on-accent); }
.bbx-pager .page-link:hover { border-color: var(--bbx-border-strong); }
.bbx-pager .disabled .page-link { opacity: .5; }

/* forms inside bbx (filter bar, config) */
.bbx-field-label { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--bbx-muted); margin-bottom: 5px; display: block; }
.bbx-input, .bbx select.bbx-input { width: 100%; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--bbx-border);
    background: var(--bbx-surface); color: var(--bbx-text); font-size: 13px; font-family: inherit; }
.bbx-input:focus { border-color: var(--bbx-accent); outline: none; }

.bbx-note { color: var(--bbx-muted); font-size: 12.5px; }
.bbx-empty { padding: 22px; text-align: center; color: var(--bbx-muted); font-size: 13.5px; }
.bbx-callout { border-radius: var(--bbx-radius-sm); padding: 12px 14px; font-size: 13px; }
.bbx-callout.ok { background: var(--bbx-ok-bg); color: var(--bbx-ok); }
.bbx-callout.warn { background: var(--bbx-warn-bg); color: var(--bbx-warn); }
.bbx-callout.crit { background: var(--bbx-crit-bg); color: var(--bbx-crit); }

/* Inline diagnostic sub-card (e.g. "how the standard price is calculated") */
.bbx-subcard { border: 1px solid var(--bbx-border); border-radius: var(--bbx-radius-sm); padding: 10px 12px; background: var(--bbx-surface-2); }
.bbx-subcard .lbl { color: var(--bbx-muted); font-size: 11.5px; margin-bottom: 4px; }

/* Pill colour variants (small inline tags) */
.bbx-pill.accent { background: var(--bbx-accent-soft); border-color: var(--bbx-accent-border); color: var(--bbx-accent); }
.bbx-pill.warn { background: var(--bbx-warn-bg); border-color: var(--bbx-warn-line); color: var(--bbx-warn); }
.bbx-pill.ok { background: var(--bbx-ok-bg); border-color: transparent; color: var(--bbx-ok); }
.bbx-pill.crit { background: var(--bbx-crit-bg); border-color: var(--bbx-crit-line); color: var(--bbx-crit); }

/* Destructive row button (Remove) */
.bbx-rowbtn.danger:hover { border-color: var(--bbx-crit); color: var(--bbx-crit); }

/* Compact table variant + preview row states (breakdown / bulk ladder) */
.bbx-table.compact thead th { padding: 8px 12px; }
.bbx-table.compact tbody td { padding: 8px 12px; }
.bbx-table tbody tr.is-new td { background: var(--bbx-warn-bg); }
.bbx-table tbody tr.is-new:hover td { background: var(--bbx-warn-bg); }
.bbx-table tbody tr.calc-row td { background: var(--bbx-row-band); }
.bbx-table tbody tr.calc-row:hover td { background: var(--bbx-row-band); }
.bbx-table tbody tr.total-row td { font-weight: 700; color: var(--bbx-text); }

/* ============================================================================
   The stock reports' reading surface.

   A report is not a dashboard. The client's reference is Busy (their ERP spec, pages 2-3), and
   what Busy gets right is that a ledger is DENSE, its totals sit under their own columns, and the
   opening and closing balance are stated as figures rather than left to be inferred from the last
   row. Everything here serves reading a long column of numbers:

     - the header stays while the rows scroll, because a number in column seven means nothing once
       the heading has gone;
     - the totals stay too, pinned to the bottom, so the bottom line is always on screen;
     - numbers are tabular, so digits line up in a column instead of shimmering;
     - the row the keyboard is on is visible, because the spec asks for the page to be usable
       without a mouse and an invisible cursor is not usable.
   ========================================================================= */

/* The band above the table: what the report is about, and its opening/closing figures. */
.bbx-report-band { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px;
    padding: 11px 16px; border-bottom: 1px solid var(--bbx-border); background: var(--bbx-row-band); }
.bbx-report-band .k { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--bbx-muted); margin-right: 7px; }
.bbx-report-band .v { font-family: var(--bbx-mono); font-variant-numeric: tabular-nums; font-weight: 700;
    color: var(--bbx-text); }
.bbx-report-band .grow { margin-left: auto; }

/* A long report scrolls inside its own box so the heading and the totals never leave. `62vh` keeps
   the filter bar above and the notes below reachable without scrolling the whole page. */
.bbx-table-scroll.pinned { max-height: 62vh; overflow-y: auto; }
.bbx-table-scroll.pinned thead th { position: sticky; top: 0; z-index: 2; }
.bbx-table-scroll.pinned tfoot td { position: sticky; bottom: 0; z-index: 2; }

/* Totals under the columns they total.

   ⚠️ SCOPED TO THIS TABLE, and it has to be. A bare `.bbx-table tfoot td` reached seven screens that
   already had totals rows — the challan charges ladder, MRN edit, create estimate, generate PO —
   making every one of their totals monospace and bold, so the grand total stopped reading as the
   grand total. It also LOST its own padding and border to an identical selector 700 lines below
   (the totals-ladder rule), so the denser row it was written for never rendered either. */
#stockReportTable tfoot td { padding: 11px 12px; border-top: 2px solid var(--bbx-border);
    background: var(--bbx-surface-2); font-family: var(--bbx-mono); font-variant-numeric: tabular-nums;
    font-weight: 700; color: var(--bbx-text); white-space: nowrap; }
#stockReportTable tfoot td.lbl { font-family: inherit; font-size: 11px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; color: var(--bbx-muted); }

/* Digits line up. Applies to every right-aligned cell, which on these reports is every figure. */
.bbx-table th.text-end, .bbx-table td.text-end { text-align: right; font-variant-numeric: tabular-nums; }

/* Where the keyboard is. Enter opens this row's document. */
.bbx-table tbody tr.is-cursor td { background: var(--bbx-accent-soft); }
.bbx-table tbody tr.is-cursor td:first-child { box-shadow: inset 3px 0 0 var(--bbx-accent); }

/* The selected-lines subtotal. Sits under the table, appears only once something is ticked. */
.bbx-report-band.bbx-picked { border-bottom: 0; border-top: 1px solid var(--bbx-border);
    background: var(--bbx-accent-soft); }
.bbx-pick-cell { width: 1%; padding-right: 0 !important; }
.bbx-rowpick { width: 15px; height: 15px; accent-color: var(--bbx-accent); cursor: pointer; vertical-align: middle; }

/* Busy prints its shortcuts along the toolbar. Hiding them would make a keyboard-first screen a
   secret, so they are on the page, quiet, under the table. */
.bbx-keys { display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 9px 16px; font-size: 11.5px;
    color: var(--bbx-muted); border-top: 1px solid var(--bbx-border); }
.bbx-keys kbd { font-family: var(--bbx-mono); font-size: 10.5px; padding: 2px 6px; border-radius: 5px;
    border: 1px solid var(--bbx-border); background: var(--bbx-surface-2); color: var(--bbx-text-2);
    box-shadow: 0 1px 0 var(--bbx-border); }

/* Severity row tints. The Bootstrap aliases matter: several pages (outward-stock,
   inward-product-wise) build rows in JS and stamp `table-danger`/`table-warning`/
   `table-success` on them. Those Bootstrap classes only paint through the
   `.table > :not(caption) > * > *` rule, and the bbx recipe DROPS the `table` class —
   so the rows would silently lose their meaning. Alias them here instead of editing
   the JS, which keeps the row-state logic untouched. */
.bbx-table tbody tr.is-crit td, .bbx-table tbody tr.table-danger td,
.bbx-table tbody tr.is-crit:hover td, .bbx-table tbody tr.table-danger:hover td { background: var(--bbx-crit-bg); }
.bbx-table tbody tr.is-warn td, .bbx-table tbody tr.table-warning td,
.bbx-table tbody tr.is-warn:hover td, .bbx-table tbody tr.table-warning:hover td { background: var(--bbx-warn-bg); }
.bbx-table tbody tr.is-ok td, .bbx-table tbody tr.table-success td,
.bbx-table tbody tr.is-ok:hover td, .bbx-table tbody tr.table-success:hover td { background: var(--bbx-ok-bg); }

/* Totals block in a table foot (order/estimate/challan forms): subtotal → GST → round-off → grand total */
.bbx-table tfoot tr.total-row td { background: var(--bbx-row-band); font-weight: 700; color: var(--bbx-text);
    border-top: 1px solid var(--bbx-border); }
.bbx-table tfoot tr.total-row.grand td { background: var(--bbx-accent-weak); color: var(--bbx-accent-ink); }
.bbx-table tfoot .estimate-total-label { text-align: right; }

/* Bare Bootstrap sub-headings inside a bbx page (e.g. "Billing Address") — without this they keep
   the template's near-black ink and disappear against the dark theme's true-black ground. */
.bbx h5, .bbx h6 { color: var(--bbx-text); }

/* Bootstrap's semantic text utilities on non-cell elements (a <span> or <small> inside a cell —
   e.g. the "Any (rotation)" batch hint, the "Expiring Soon" flag). The td-level rules further down
   only reach the cell itself, so these kept Bootstrap's near-black greys on the dark ground.
   `!important` is REQUIRED: Bootstrap ships these utilities as `.text-danger { color: … !important }`,
   so a plain `.bbx .text-danger` silently loses despite the higher specificity. Verified in the
   harness — without it `.text-danger` stayed #C03221 (3.27:1) on the dark ground instead of
   adopting --bbx-crit. */
/* --bbx-muted, NOT --bbx-faint: faint (#93A199) is for de-emphasised numerals, and using it for
   real copy measured 2.62–2.69:1 on white. `.text-muted` marks secondary text, so it maps to muted. */
.bbx .text-muted { color: var(--bbx-muted) !important; }
.bbx .text-danger { color: var(--bbx-crit) !important; }
.bbx .text-success { color: var(--bbx-ok) !important; }
.bbx .text-warning { color: var(--bbx-warn) !important; }
/* `.text-dark` is Bootstrap's "near-black ink" utility — literally the wrong instruction in the
   dark theme, where it renders #161D2B on the #131415 surface (1.09:1, invisible). It means
   "primary ink", so map it to --bbx-text. `.text-info` is Bootstrap's cyan (#08B1BA), which fails
   in LIGHT mode at 2.62:1 on white; it marks informational links, so map it to the categorical
   slate-blue (checked in both themes) rather than to the brand accent, which is reserved. */
.bbx .text-dark { color: var(--bbx-text) !important; }
.bbx .text-info { color: var(--bbx-mode-mrp) !important; }
/* `.text-dark` almost always rides on `.bg-light` (Bootstrap's neutral chip: `<span class="badge
   bg-light text-dark">`). Re-pointing .text-dark at --bbx-text without also darkening .bg-light
   put near-white ink on the #DEE2E6 chip in dark mode — 1.17:1, worse than what it replaced.
   The two must move together. Caught on `stock-audit` by the full-corpus sweep. */
.bbx .bg-light { background-color: var(--bbx-surface-2) !important; }
.bbx .border { border-color: var(--bbx-border) !important; }

/* custom.min.css ships `th, td { color: black !important }`. Un-!important-ed bbx table ink loses to
   it, so every table cell renders black-on-black in the dark theme. Re-assert ours at equal weight.
   Cells whose own class carries meaning (muted/price-none, grand total) are restated below it. */
.bbx .bbx-table thead th,
.bbx .bbx-table thead td,
.bbx .bbx-table tbody td,
.bbx .bbx-table tbody th,
.bbx .bbx-table tfoot td,
.bbx .bbx-table tfoot th { color: var(--bbx-text) !important; }
/* `thead td` is not a typo: the MRN/purchase grids (mrn-edit, inward-stock) build their header
   row out of <td>, not <th>, so `thead th` alone left them black-on-black in dark mode. */
.bbx .bbx-table thead th,
.bbx .bbx-table thead td { color: var(--bbx-muted) !important; }
.bbx .bbx-table td.bbx-price.none, .bbx .bbx-table td.muted,
.bbx .bbx-table td.text-muted { color: var(--bbx-faint) !important; }
.bbx .bbx-table td.text-danger { color: var(--bbx-crit) !important; }
.bbx .bbx-table td.text-success { color: var(--bbx-ok) !important; }
.bbx .bbx-table td.text-warning { color: var(--bbx-warn) !important; }
.bbx .bbx-table tfoot tr.total-row.grand td { color: var(--bbx-accent-ink) !important; }

/* Document previews (.bbx-paper — the challan / estimate print views). That subtree is exactly what
   printcontent() emits, so it is deliberately left un-themed: hardcoded black ink, inline black
   rules. In dark mode it became black-on-black. Rather than restyle the document (which would
   change what prints), give the sheet itself a paper ground in BOTH themes. Opt in per page with
   `.bbx-paper` — do NOT key off #PrintOrder, which converted bbx pages also reuse. */
.bbx .bbx-paper { background: #fff; color: #111827; border-radius: var(--bbx-radius-sm); }
.bbx .bbx-paper h1, .bbx .bbx-paper h2, .bbx .bbx-paper h3,
.bbx .bbx-paper h4, .bbx .bbx-paper h5, .bbx .bbx-paper h6,
.bbx .bbx-paper p, .bbx .bbx-paper span, .bbx .bbx-paper td, .bbx .bbx-paper th,
.bbx .bbx-paper strong, .bbx .bbx-paper b, .bbx .bbx-paper u, .bbx .bbx-paper small { color: #111827; }

/* Field rows on the order/estimate forms. Replaces the old raw `.d-flex` rows, which squeezed
   selects into unusable slivers on phones because flex children never wrapped. */
.bbx .bbx-field-row { display: grid; gap: 12px; align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bbx .bbx-address-grid { display: grid; gap: 12px; align-items: end;
    grid-template-columns: minmax(170px, .9fr) minmax(130px, .7fr) minmax(160px, .85fr) minmax(320px, 2fr); }
.bbx .bbx-field-row > *, .bbx .bbx-address-grid > * { min-width: 0; }
.bbx .bbx-field-row label, .bbx .bbx-address-grid label { color: var(--bbx-text-2); font-size: 12px;
    font-weight: 800; line-height: 1.1; margin-bottom: 7px; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 1199.98px) { .bbx .bbx-address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .bbx .bbx-address-grid, .bbx .bbx-field-row { grid-template-columns: 1fr; } }

/* Compact figure beside a page title (e.g. "Active Amount Rs. 1,200.00") */
.bbx-stat-inline { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.bbx-stat-inline small { color: var(--bbx-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.bbx-stat-inline strong { font-size: 15px; }

/* calc steps (explain math) */
.bbx .calc-steps { font-family: var(--bbx-mono); font-size: 12px; color: var(--bbx-text-2); }

/* Toolbar search + filter button */
.bbx-search { display: inline-flex; align-items: center; gap: 9px; background: var(--bbx-surface);
    border: 1px solid var(--bbx-border); border-radius: 9px; color: var(--bbx-muted);
    flex: 1; min-width: 180px; max-width: 440px; }
.bbx-search svg { width: 16px; height: 16px; flex: none; margin-left: 12px; }
.bbx-search input { border: 0; background: none; outline: none; color: var(--bbx-text); font-size: 13px; width: 100%; font-family: inherit;
    padding: 8px 12px 8px 0; margin: 0; height: auto; line-height: 1.4; box-shadow: none; }
.bbx-count-badge { background: var(--bbx-accent); color: var(--bbx-on-accent); font-size: 11px; font-weight: 700; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; margin-left: 2px; }
.bbx-sort { max-width: 210px; }

/* Off-canvas filter drawer (right) */
.bbx-drawer-backdrop { position: fixed; inset: 0; background: rgba(8, 16, 12, .44); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease; z-index: 3000; }
.bbx-drawer-backdrop.open { opacity: 1; visibility: visible; }
.bbx-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(400px, 92vw); background: var(--bbx-surface);
    border-left: 1px solid var(--bbx-border); box-shadow: var(--bbx-shadow-pop); transform: translateX(100%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1); z-index: 3001; display: flex; flex-direction: column; }
.bbx-drawer.open { transform: translateX(0); }
.bbx-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--bbx-border); }
.bbx-drawer-head h2 { font-size: 15px; margin: 0; color: var(--bbx-text); }
.bbx-drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.bbx-drawer-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--bbx-border); }
.bbx-drawer-foot > * { flex: 1; justify-content: center; }
.bbx-drawer-field { margin-bottom: 16px; }
.bbx-drawer-field:last-child { margin-bottom: 0; }
.bbx-icon-x { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0;
    border-radius: 8px; color: var(--bbx-muted); cursor: pointer; }
.bbx-icon-x:hover { background: var(--bbx-surface-2); color: var(--bbx-text); }
.bbx-icon-x svg { width: 18px; height: 18px; }
.bbx-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bbx-text-2); margin-bottom: 7px; }
.bbx-range { display: flex; gap: 8px; }

/* Preview / publish-before-go-live */
.bbx-badge-preview { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px;
    font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--bbx-accent);
    background: var(--bbx-accent-soft); border: 1px solid var(--bbx-accent-border); }
.bbx-diff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 10px 12px; border-radius: 10px;
    background: var(--bbx-surface-2); border: 1px solid var(--bbx-border); }
.bbx-diff-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--bbx-muted); }
.bbx-diff-old { font-family: var(--bbx-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--bbx-muted); text-decoration: line-through; }
.bbx-diff-arrow { color: var(--bbx-muted); font-weight: 700; }
.bbx-diff-new { font-family: var(--bbx-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; color: var(--bbx-text); }
.bbx-diff-new.changed { color: var(--bbx-accent); }

/* Centered confirmation modal (reuses the drawer backdrop pattern) */
.bbx-modal-backdrop { position: fixed; inset: 0; background: rgba(8, 16, 12, .44); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease; z-index: 3200; display: grid; place-items: center; padding: 20px; }
.bbx-modal-backdrop.open { opacity: 1; visibility: visible; }
/* `100%`, not `96vw`: the backdrop is a grid box with 20px padding, so the track is 100vw-40px,
   and 96vw overflowed it. Note this expression only ever resolves to the fixed 560px in practice —
   below 640 the `.bbx-modal` rule in bb-responsive.css wins (equal specificity, loaded later) and
   IT is what governs the narrow case. Kept correct here so the two agree. */
/* `position: relative` is load-bearing, not tidying. The `transform` below makes this box the
   containing block for anything absolutely positioned inside it, but jQuery's `offsetParent()`
   knows nothing about transforms and walks past a STATIC box to the backdrop. select2 positions a
   dropdown by subtracting its offset parent's page offset, so with `dropdownParent` set to a modal
   every dropdown landed exactly one modal-offset down and to the right — off the box, clipped, and
   reported as "no options displayed". Positioning the box makes the two agree. */
.bbx-modal { position: relative; width: min(560px, 100%); max-height: 90vh; overflow: hidden; display: flex; flex-direction: column;
    background: var(--bbx-surface); border: 1px solid var(--bbx-border); border-radius: 14px; box-shadow: var(--bbx-shadow-pop);
    transform: translateY(8px) scale(.98); transition: transform .2s cubic-bezier(.4, 0, .2, 1); }
.bbx-modal-backdrop.open .bbx-modal { transform: translateY(0) scale(1); }
.bbx-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--bbx-border); }
.bbx-modal-head h2 { font-size: 15px; margin: 0; color: var(--bbx-text); }
.bbx-modal-body { padding: 18px; overflow-y: auto; }
.bbx-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--bbx-border); }

/* ============================================================================
   The stock report overlay, and the embedded page inside it.

   Busy opens a report as a window over the workspace, and the client has asked for that shape
   repeatedly. `.bbx-full` is a `.bbx-modal-backdrop`, so bbx-ui.js already owns its Escape, its
   focus trap, its focus restore and the body scroll lock — this only makes the box big.

   ⚠️ THE EXTRA CLASS IS LOAD-BEARING. `bb-responsive.css` sets `.bbx-modal { width: 100% }` at
   equal specificity and loads later, so a plain `.bbx-modal` override here would lose below 640px.
   `.bbx-full .bbx-modal` outranks it at every width.
   ========================================================================= */
.bbx-modal-backdrop.bbx-full { padding: 2vh 2vw; }
.bbx-modal-backdrop.bbx-full .bbx-modal { width: 100%; height: 96vh; max-height: none; }
/* ⚠️ `flex: 1 1 auto` ON THE BODY, not just on the iframe. `.bbx-modal` is a column flex box and
   the base `.bbx-modal-body` sets no flex, so it sizes to its content — and an iframe's content is
   opaque to the parent, leaving it at the 150px default height with a 1,100px report inside it.
   `min-height: 0` because a flex child will not shrink below its content box without it, which is
   what lets the frame scroll instead of overflowing the modal. */
.bbx-full .bbx-modal-body { padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bbx-full iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; display: block; }
.bbx-full-error { padding: 28px; text-align: center; color: var(--bbx-muted); }

/* The page INSIDE the frame. The shell is not rendered at all in this mode (see the `@if` in
   layouts/header.blade.php) — this only reclaims the space the shell used to occupy. */
body.bbx-embed .main-content { margin: 0 !important; padding: 0 !important; width: 100% !important; }
body.bbx-embed .content-inner { margin: 0 !important; padding: 12px 14px !important; max-width: none !important; }
body.bbx-embed .bbx-page-head { padding-top: 0; }

/* ============================================================================
   Loading states
   Two primitives, used for two different situations:
     .bbx-progress — full page navigation. The old page stays on screen and
       readable until the new HTML lands, so the only honest signal is a
       non-blocking bar. JS drives --bbx-progress-value (0..1).
     .bbx-skeleton — content arriving async into a layout that is already
       mounted. Only correct where we know the shape of what's coming.
   ========================================================================= */

/* ---------- Navigation progress bar ---------- */
.bbx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99999; pointer-events: none;
    opacity: 0; transition: opacity .2s ease; }
.bbx-progress.is-active { opacity: 1; }
/* scaleX, not width — stays on the compositor, so it can't jank the page it's reporting on */
.bbx-progress::before { content: ""; display: block; height: 100%; width: 100%;
    background: var(--bbx-accent); box-shadow: 0 0 10px var(--bbx-accent), 0 0 4px var(--bbx-accent);
    transform: scaleX(var(--bbx-progress-value, 0)); transform-origin: 0 50%;
    transition: transform .25s cubic-bezier(.2, .8, .3, 1); }

/* ---------- Skeleton ---------- */
.bbx-skeleton { display: block; position: relative; overflow: hidden; width: 100%; min-height: 12px;
    background: var(--bbx-border); border-radius: var(--bbx-radius-sm);
    color: transparent !important; user-select: none; }
.bbx-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, var(--bbx-skeleton-sheen) 50%, transparent 100%);
    animation: bbxSkeletonSweep 1.3s ease-in-out infinite; }
.bbx-skeleton-text { height: 11px; border-radius: 4px; }
/* stagger the sweeps so a block of bones reads as one surface, not a row of clones */
.bbx-skeleton-row:nth-child(2n) .bbx-skeleton::after { animation-delay: .09s; }
.bbx-skeleton-row:nth-child(3n) .bbx-skeleton::after { animation-delay: .17s; }
.bbx-table tbody tr.bbx-skeleton-row td { vertical-align: middle; }
@keyframes bbxSkeletonSweep { to { transform: translateX(100%); } }

/* DataTables paints its own floating "Processing…" box; we cover the rows with bones instead */
.dataTables_wrapper .dataTables_processing { display: none !important; }

/* Overlay, not a tbody swap: DataTables owns the row nodes and breaks if we replace them.
   Bone heights are set inline from the real rows, so this must not impose one. */
.bbx-dt-loading { position: absolute; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column;
    justify-content: flex-start; gap: 10px; padding: 5px 12px; overflow: hidden; background: var(--bbx-surface); }

/* ============================================================================
   Component library (Wave 0) — support styles for the bbx-* Blade components
   in resources/views/components/bbx/. Base styles only; small-screen rules
   live in bb-responsive.css.
   ========================================================================= */

/* panel head as a flex row (title left, actions right) */
.bbx-panel-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bbx-panel-body.flush { padding: 0; }

/* button variants (base + .primary + .sm are defined above) */
.bbx-btn.danger { border-color: var(--bbx-crit-line); color: var(--bbx-crit); }
.bbx-btn.danger:hover { background: var(--bbx-crit-bg); border-color: var(--bbx-crit); color: var(--bbx-crit); }
.bbx-btn.ghost { border-color: transparent; background: transparent; }
.bbx-btn.ghost:hover { background: var(--bbx-surface-2); border-color: transparent; }
.bbx-btn.block { width: 100%; justify-content: center; }
.bbx-btn[disabled], .bbx-btn:disabled { opacity: .55; cursor: not-allowed; }

/* form field wrapper + plain <select> caret + textarea */
.bbx-field { margin-bottom: 15px; }
.bbx-field:last-child { margin-bottom: 0; }
.bbx-field-label .req { color: var(--bbx-crit); margin-left: 2px; }
.bbx-field-hint { color: var(--bbx-muted); font-size: 11.5px; margin-top: 5px; }
.bbx-field-error { color: var(--bbx-crit); font-size: 11.5px; margin-top: 5px; }
.bbx-field.has-error .bbx-input { border-color: var(--bbx-crit-line); }
textarea.bbx-input { min-height: 84px; resize: vertical; }
select.bbx-input { appearance: none; -webkit-appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236C7C75' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; }

/* two-column form grid (collapses to one column on phones in bb-responsive.css) */
.bbx-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
.bbx-form-grid .span-2 { grid-column: 1 / -1; }

/* empty state (base .bbx-empty is defined above) */
.bbx-empty-title { font-weight: 650; color: var(--bbx-text-2); font-size: 14px; margin-bottom: 4px; }
.bbx-empty-text { color: var(--bbx-muted); font-size: 13px; }
.bbx-empty-action { margin-top: 14px; }

/* lock body scroll behind an open modal/drawer */
body.bbx-noscroll { overflow: hidden; }

/* ============================================================================
   DataTables rendered inside a .bbx page — restyle the wrapper controls
   (search, length, info, pagination, export buttons) + the table itself to the
   bbx system, so the ~40 DataTable list pages convert with just: wrap the page
   in .bbx, add a page-head + panel, and give the <table> class="dataTable
   bbx-table" (keep `dataTable` so initProjectDataTable still fires; drop the
   Bootstrap `table` class so it doesn't fight .bbx-table). Scoped to .bbx so
   un-migrated pages' DataTables are untouched.
   ========================================================================= */
.bbx .dataTables_wrapper { padding: 4px 2px; }
.bbx .dataTables_wrapper .row { align-items: center; row-gap: 10px; }

.bbx .dataTables_length label,
.bbx .dataTables_filter label { color: var(--bbx-muted); font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.bbx .dataTables_length select,
.bbx .dataTables_filter input { border: 1px solid var(--bbx-border); background: var(--bbx-surface);
    color: var(--bbx-text); border-radius: 9px; padding: 7px 11px; font-size: 13px; font-family: inherit; height: auto; }
.bbx .dataTables_filter input:focus,
.bbx .dataTables_length select:focus { border-color: var(--bbx-accent); outline: none; box-shadow: none; }

.bbx .dataTables_info { color: var(--bbx-muted); font-size: 12.5px; }

/* pagination — Bootstrap-5 markup driven by CSS variables (clean override, no !important).
   Covers BOTH pager sources: DataTables' `.dataTables_paginate .pagination` and Laravel's
   `$paginator->links()`, which emits a bare `<ul class="pagination">` with no DataTables wrapper.
   Scoping this to `.dataTables_paginate` alone left the Laravel pagers (ware-house-location,
   products, pricing-engine, search-admin-*) as an unthemed white slab with theme-green links
   in BOTH themes — 2.31:1. */
.bbx .dataTables_paginate .pagination,
.bbx .pagination { gap: 5px; margin: 10px 0 0; flex-wrap: wrap;
    --bs-pagination-color: var(--bbx-text-2);
    --bs-pagination-bg: var(--bbx-surface);
    --bs-pagination-border-color: var(--bbx-border);
    --bs-pagination-border-radius: 8px;
    --bs-pagination-hover-color: var(--bbx-accent);
    --bs-pagination-hover-bg: var(--bbx-surface-2);
    --bs-pagination-hover-border-color: var(--bbx-border-strong);
    --bs-pagination-focus-color: var(--bbx-accent);
    --bs-pagination-focus-bg: var(--bbx-surface-2);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: var(--bbx-on-accent);
    --bs-pagination-active-bg: var(--bbx-accent);
    --bs-pagination-active-border-color: var(--bbx-accent);
    --bs-pagination-disabled-color: var(--bbx-faint);
    --bs-pagination-disabled-bg: var(--bbx-surface);
    --bs-pagination-disabled-border-color: var(--bbx-border); }
.bbx .dataTables_paginate .page-link,
.bbx .pagination .page-link { min-width: 32px; height: 32px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* bulkbasket-theme.css paints the pager through `#page_layout …` with !important, which outranks
   the variable-driven rules above (the ID-specificity landmine). Restate with the ID in front. */
#page_layout .bbx .pagination .page-link { background: var(--bbx-surface) !important;
    border-color: var(--bbx-border) !important; color: var(--bbx-text-2) !important; }
#page_layout .bbx .pagination .page-item.active .page-link { background: var(--bbx-accent) !important;
    border-color: var(--bbx-accent) !important; color: var(--bbx-on-accent) !important; }
#page_layout .bbx .pagination .page-item.disabled .page-link { color: var(--bbx-faint) !important; }

/* export buttons — rendered as `.btn.btn-secondary.buttons-html5` inside a `.dt-buttons.btn-group`
   and force-coloured green by the theme; override to the neutral bbx button. */
.bbx .dt-buttons { gap: 8px; flex-wrap: wrap; }
.bbx .dt-buttons.btn-group { display: inline-flex; }
.bbx .dt-buttons .btn,
.bbx .dt-buttons .buttons-html5,
.bbx .dt-buttons .dt-button { background: var(--bbx-surface) !important; border: 1px solid var(--bbx-border) !important;
    color: var(--bbx-text-2) !important; border-radius: 9px !important; padding: 8px 13px; font-size: 12.5px;
    font-weight: 600; box-shadow: none !important; }
.bbx .dt-buttons .btn:hover,
.bbx .dt-buttons .buttons-html5:hover,
.bbx .dt-buttons .dt-button:hover { border-color: var(--bbx-accent) !important; color: var(--bbx-accent) !important; }

/* Status tab strip (.bb-status-tabs — pick tickets, customers, po, inward-report, stock history).
   bulkbasket-theme.css hardcodes it light (#f6faf3 ground, #315f22 ink, green gradient on .active),
   so on a converted page it stayed a cream slab in dark mode. Re-token it inside .bbx only. */
.bbx .bb-status-tabs { background: var(--bbx-surface-2); border-color: var(--bbx-border); box-shadow: none; }
.bbx .bb-status-tabs a,
.bbx .bb-status-tabs button { color: var(--bbx-text-2); }
.bbx .bb-status-tabs a:hover, .bbx .bb-status-tabs a:focus,
.bbx .bb-status-tabs button:hover, .bbx .bb-status-tabs button:focus { background: var(--bbx-accent-weak); color: var(--bbx-accent-ink); }
.bbx .bb-status-tabs a.active,
.bbx .bb-status-tabs button.active { background: var(--bbx-accent); background-image: none; box-shadow: none; color: var(--bbx-on-accent); }

/* qompac-ui.min.css ships a BARE `.nav { background: #fff }` — one class, so it paints every
   .nav-tabs / .nav-pills strip a white slab in dark mode unless the page happens to declare its
   own ground. Found on `users` (the Users / User Hierarchy tabs: muted ink on white, 3.46:1).
   Let the panel behind show through instead; strips that want a ground set it themselves at a
   higher specificity (e.g. .customer-profile-scope .nav-pills). */
.bbx .nav { background: transparent; }

/* Bare Bootstrap `.nav-tabs` inside .bbx (the search-admin pages, which were never part of an
   earlier wave's audit). qompac overrides --bs-nav-tabs-link-active-bg with a washed grey-green
   and --bs-nav-link-color with a mid grey, giving 2.14:1 on the active tab and 3.56:1 on the
   inactive ones. Token them like .bb-user-tabs / .bb-status-tabs. Pages that theme their own
   strip at higher specificity (customer-profile's .nav-pills) are unaffected. */
.bbx .nav-tabs .nav-link { color: var(--bbx-text-2); border-color: transparent; }
.bbx .nav-tabs .nav-link:hover { color: var(--bbx-text); }
.bbx .nav-tabs .nav-link.active {
    background: var(--bbx-accent);
    border-color: var(--bbx-accent);
    color: var(--bbx-on-accent);
}

/* Bootstrap's `.btn-warning` is an amber fill that is only legible with DARK ink; the template
   forces white on it (3.08:1 on `create-estimate`'s Save Draft). Restate both halves against the
   bbx warn ramp rather than leaving it to whichever sheet loads last. */
.bbx .btn-warning {
    background-color: var(--bbx-warn-bg);
    border-color: var(--bbx-warn-line);
    color: var(--bbx-warn);
}
.bbx .btn-warning:hover, .bbx .btn-warning:focus {
    /* Was `--bbx-warn-line` (#E4B45A) under `--bbx-warn` ink (#986310) = 2.66:1 — the hover state
       shipped WORSE than the 3.08:1 it was introduced to fix. Keep the fill, move the border. */
    background-color: var(--bbx-warn-bg);
    border-color: var(--bbx-warn);
    color: var(--bbx-warn);
}

/* ---- "bb-* layer inside .bbx" compatibility ----------------------------------------------
   A batch of inventory/report pages were built against an earlier in-house layer (.bb-panel,
   .bb-kpi-grid/.bb-kpi-card, .bb-grid-2) that hardcodes white grounds + slate ink. Rather than
   rewrite that markup page by page (churn = broken JS), adopt it into the bbx look the same way
   the Bootstrap compat layer does. Two classes beat their one-class originals, so no !important.
   The shared `components/page-hero.blade.php` now emits bbx-page-head directly. */
.bbx .bb-panel {
    background: var(--bbx-surface); border: 1px solid var(--bbx-border);
    border-radius: var(--bbx-radius); padding: 18px;
}
.bbx .bb-panel h1, .bbx .bb-panel h2, .bbx .bb-panel h3,
.bbx .bb-panel h4, .bbx .bb-panel h5, .bbx .bb-panel h6 {
    color: var(--bbx-text); font-weight: 650; letter-spacing: -.2px;
}
.bbx .bb-panel h4 { font-size: 15px; margin-bottom: 0; }

.bbx .bb-kpi-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.bbx .bb-kpi-card {
    background: var(--bbx-surface); border: 1px solid var(--bbx-border);
    border-radius: var(--bbx-radius); padding: 14px 16px;
}
.bbx .bb-kpi-card span {
    color: var(--bbx-muted); display: block; font-size: 11px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase;
}
.bbx .bb-kpi-card strong {
    color: var(--bbx-text); display: block; font-size: 24px; font-weight: 650;
    font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px;
}
.bbx .bb-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bbx .bb-table-card {
    background: var(--bbx-surface); border: 1px solid var(--bbx-border);
    border-radius: var(--bbx-radius); overflow: hidden;
}
@media (max-width: 991.98px) {
    .bbx .bb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bbx .bb-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) { .bbx .bb-kpi-grid { grid-template-columns: 1fr; } }

/* Filter row used by most inventory/report pages (a few selects + dates + Search/Reset).
   auto-fit means it reflows from 5 columns down to 1 with no media queries; the trailing
   .bbx-filter-actions cell keeps the buttons on the baseline of the last row. */
.bbx-filter-grid { display: grid; gap: 12px; align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.bbx-filter-grid > * { min-width: 0; }
/* A HINT MUST NOT MOVE ITS OWN CONTROL. The hint renders BELOW the control and this grid
   bottom-aligns (deliberately — that is what keeps the Search/Reset cell on the inputs' baseline),
   so a field carrying a hint had its input pushed UP by the height of that hint while every
   hintless sibling stayed put. On Create Order that left Delivery Time visibly out of line with
   Delivery Date beside it. Taking the hint out of flow makes every cell end at its control, so the
   controls line up and the actions cell still lands on their baseline. Only a grid that actually
   carries a hint pays the extra row spacing the out-of-flow hint needs. */
.bbx-filter-grid > .bbx-field { position: relative; }
.bbx-filter-grid > .bbx-field > .bbx-field-hint { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; }
.bbx-filter-grid:has(> .bbx-field > .bbx-field-hint) { row-gap: 34px; padding-bottom: 18px; }
.bbx-filter-actions { display: flex; gap: 8px; align-items: center; }
@media (max-width: 575.98px) {
    .bbx-filter-grid { grid-template-columns: 1fr; }
    .bbx-filter-actions { flex-direction: column; align-items: stretch; }
}

/* meta pills in the shared page-hero (label + value, sat on the old gradient) */
.bbx-head-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bbx-meta-pill {
    display: inline-flex; align-items: center; gap: 8px; line-height: 1.1;
    padding: 7px 11px; border-radius: 8px;
    background: var(--bbx-surface-2); border: 1px solid var(--bbx-border);
}
.bbx-meta-pill span { color: var(--bbx-muted); font-size: 12px; font-weight: 600; }
.bbx-meta-pill strong { color: var(--bbx-text); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Shared legacy table helpers (bulkbasket-theme.css) — .bb-index-badge, .bb-table-thumb and the
   .bb-switch-* chips are all hardcoded light (#eef3f7 / #dfe7ef grounds, slate ink), so on a
   converted page they read as bright chips floating on the dark ground. Re-token inside .bbx only.
   Used by products + the inventory/stock tables, so keep this central rather than per page. */
.bbx .bb-index-badge { background: var(--bbx-surface-2); border-color: var(--bbx-border); color: var(--bbx-text-2); }
.bbx .bb-table-thumb { border-color: var(--bbx-border); background: var(--bbx-surface-2); }
.bbx .bb-switch-chip { background: var(--bbx-surface-2); border: 1px solid var(--bbx-border); }
.bbx .bb-switch-chip label { color: var(--bbx-text-2); }

/* bulkbasket-theme.css styles the whole DataTables chrome through `#page_layout .dataTables_wrapper …`
   with !important. An ID beats our classes on specificity, so the rules above never reached these
   elements and the info line, length select and pager kept slate-on-slate ink — invisible in dark.
   Re-declare them with #page_layout in front so we outrank it. Keep in sync with the .bbx rules above. */
#page_layout .bbx .dataTables_wrapper .dataTables_length,
#page_layout .bbx .dataTables_wrapper .dataTables_filter,
#page_layout .bbx .dataTables_wrapper .dataTables_info,
#page_layout .bbx .dataTables_wrapper .dataTables_paginate { color: var(--bbx-muted) !important; font-size: 12.5px; }
#page_layout .bbx .dataTables_wrapper .dataTables_length label,
#page_layout .bbx .dataTables_wrapper .dataTables_filter label { color: var(--bbx-muted) !important; }
#page_layout .bbx .dataTables_wrapper .dataTables_length select,
#page_layout .bbx .dataTables_wrapper .dataTables_filter input { background: var(--bbx-surface) !important;
    border: 1px solid var(--bbx-border) !important; color: var(--bbx-text) !important; }
#page_layout .bbx .dataTables_wrapper .dataTables_paginate .page-link { background: var(--bbx-surface) !important;
    border-color: var(--bbx-border) !important; color: var(--bbx-text-2) !important; }
#page_layout .bbx .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: var(--bbx-accent) !important;
    border-color: var(--bbx-accent) !important; color: var(--bbx-on-accent) !important; }
#page_layout .bbx .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { color: var(--bbx-faint) !important; }
#page_layout .bbx .dataTables_wrapper .dt-button,
#page_layout .bbx .dataTables_wrapper .buttons-excel,
#page_layout .bbx .dataTables_wrapper .buttons-csv { background: var(--bbx-surface) !important;
    border: 1px solid var(--bbx-border) !important; color: var(--bbx-text-2) !important; border-radius: 9px !important;
    font-size: 12.5px !important; font-weight: 600 !important; box-shadow: none !important; }
#page_layout .bbx .dataTables_wrapper .dt-button:hover,
#page_layout .bbx .dataTables_wrapper .buttons-excel:hover,
#page_layout .bbx .dataTables_wrapper .buttons-csv:hover { border-color: var(--bbx-accent) !important;
    color: var(--bbx-accent) !important; }

/* ============================================================================
   Bootstrap-inside-bbx compatibility — form controls & primary buttons on a
   converted (.bbx) page adopt the bbx look without touching each field. Scoped
   to .bbx so un-migrated pages are untouched; higher specificity than Bootstrap's
   single-class rules, so no !important needed. Semantic buttons (danger/success/
   warning/info) keep their Bootstrap colour.
   ========================================================================= */
.bbx .form-control,
.bbx .form-select {
    border: 1px solid var(--bbx-border); background: var(--bbx-surface); color: var(--bbx-text);
    border-radius: 9px; font-size: 13px; padding: 8px 11px; box-shadow: none; font-family: inherit; }
.bbx .form-control:focus,
.bbx .form-select:focus { border-color: var(--bbx-accent); box-shadow: none; outline: none; }
.bbx .form-control:disabled, .bbx .form-control[readonly],
.bbx .form-select:disabled { background: var(--bbx-surface-2); color: var(--bbx-muted); }
.bbx .form-control::placeholder { color: var(--bbx-faint); }
.bbx .form-label, .bbx .form-group > label, .bbx label.form-label { color: var(--bbx-text-2); font-weight: 600; font-size: 12.5px; }
.bbx .form-check-input:checked { background-color: var(--bbx-accent); border-color: var(--bbx-accent); }
.bbx .btn-primary { background: var(--bbx-accent); border-color: var(--bbx-accent); color: var(--bbx-on-accent); }
.bbx .btn-primary:hover, .bbx .btn-primary:focus { background: var(--bbx-accent-hover); border-color: var(--bbx-accent-hover); color: var(--bbx-on-accent); }
.bbx .btn-outline-primary { border-color: var(--bbx-accent); color: var(--bbx-accent); }
.bbx .btn-outline-primary:hover { background: var(--bbx-accent); border-color: var(--bbx-accent); color: var(--bbx-on-accent); }
/* btn-outline-secondary still resolves to the old lilac (#ACA4BC) left over from the pre-graphite
   palette — 2.32:1 on a panel. Neutralise it to the standard bbx outline button. */
.bbx .btn-outline-secondary { border-color: var(--bbx-border); color: var(--bbx-text-2); }
/* Bootstrap's .form-text helper keeps its own slate (#718096) — 4.02:1 on a panel. The theme
   styles it through `#page_layout .form-text`, so restate with the ID in front to outrank it
   (the same ID-specificity landmine documented for the DataTables chrome). */
.bbx .form-text,
#page_layout .bbx .form-text { color: var(--bbx-muted); }
.bbx .btn-outline-secondary:hover { background: var(--bbx-surface-2); border-color: var(--bbx-border-strong); color: var(--bbx-text); }
/* Select2 single/multi rendered inside a bbx page picks up the input look */
.bbx .select2-container--default .select2-selection { border: 1px solid var(--bbx-border) !important;
    background: var(--bbx-surface) !important; border-radius: 9px !important; min-height: 38px; }
.bbx .select2-container--default .select2-selection__rendered { color: var(--bbx-text) !important; line-height: 36px; }
.bbx .select2-container--default .select2-selection--multiple { min-height: 38px; }

/* the DataTable itself, styled as a bbx table */
.bbx table.bbx-table.dataTable { border-collapse: collapse; }
.bbx table.bbx-table.dataTable thead th { cursor: pointer; }
.bbx table.bbx-table.dataTable > tbody > tr { background: transparent; }
.bbx table.bbx-table.dataTable thead .sorting:before, .bbx table.bbx-table.dataTable thead .sorting:after,
.bbx table.bbx-table.dataTable thead .sorting_asc:before, .bbx table.bbx-table.dataTable thead .sorting_asc:after,
.bbx table.bbx-table.dataTable thead .sorting_desc:before, .bbx table.bbx-table.dataTable thead .sorting_desc:after { opacity: .4; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) { .bbx-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bbx-kpis { grid-template-columns: 1fr; } .bbx-page-head { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) {
    .bbx *, .bbx-btn, .iq-navbar { transition: none !important; }
    .bbx-skeleton::after { animation: none; }
    .bbx-progress::before { transition: none; }
}

/* ============================================================================
   Create Challan v2 — the 2-column entry shell, the pinned credit panel, the
   item-detail side tabs, and the Busy-style function-key bar.

   Introduced for suppliers/create-challan-v2.blade.php. Scoped to .bbx and to
   the v2-only class names, so nothing here reaches the 92 other converted pages.
   ========================================================================= */

/* ---- 2-column shell ---- */
/* min-width:0 on the main column is load-bearing: without it the item table's
   horizontal scroll box refuses to shrink and blows the grid past the viewport. */
.bbx-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.bbx-split-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bbx-split-side { min-width: 0; position: sticky; top: 84px; max-height: calc(100vh - 100px);
    overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 1399.98px) { .bbx-split { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 1199.98px) {
    .bbx-split { grid-template-columns: 1fr; }
    .bbx-split-side { position: static; max-height: none; overflow: visible; }
    /* Credit is the reason the sidebar exists — on one column it belongs under the
       page head, not below a 200-row item table. */
    .bbx-credit { order: -1; }
}

/* ---- pinned credit panel ---- */
.bbx-credit { background: var(--bbx-surface); border: 1px solid var(--bbx-border);
    border-radius: var(--bbx-radius); padding: 14px 16px; box-shadow: var(--bbx-shadow); }
.bbx-credit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.bbx-credit-head h3 { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--bbx-muted); margin: 0; }
.bbx-credit-head .who { font-size: 13px; font-weight: 650; color: var(--bbx-text); text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bbx-credit-bar { height: 7px; border-radius: 99px; background: var(--bbx-surface-2);
    border: 1px solid var(--bbx-border); overflow: hidden; margin: 10px 0 6px; }
.bbx-credit-bar > span { display: block; height: 100%; width: 0; background: var(--bbx-accent);
    transition: width .18s ease, background .18s ease; }
.bbx-credit-bar.warn > span { background: var(--bbx-warn-line); }
.bbx-credit-bar.crit > span { background: var(--bbx-crit); }
.bbx-credit-note { font-size: 11.5px; color: var(--bbx-muted); font-variant-numeric: tabular-nums; }

/* ---- label/value rows (credit figures, item info, price trace) ---- */
.bbx-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0;
    font-variant-numeric: tabular-nums; }
.bbx-kv dt { font-size: 12px; color: var(--bbx-muted); font-weight: 600; }
.bbx-kv dd { font-size: 12.5px; color: var(--bbx-text); font-weight: 650; margin: 0; text-align: right;
    overflow-wrap: anywhere; }
.bbx-kv dd.warn { color: var(--bbx-warn); }
.bbx-kv dd.crit { color: var(--bbx-crit); }
.bbx-kv dd.ok { color: var(--bbx-ok); }

/* ---- item-detail side tabs ---- */
/* WRAP, do not scroll. Five tabs in a ~360px rail overflowed with no scroll affordance: the
   client's screenshot ends at "Item │ Price │ Party │ M…", so Market and Purchases were simply
   unreachable by mouse and read as "not showing". A second row costs 34px; a hidden tab costs
   the feature. */
.bbx-sidetabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--bbx-border);
    background: var(--bbx-surface); border-radius: var(--bbx-radius) var(--bbx-radius) 0 0; padding: 0 6px; }
.bbx-sidetab { flex: 0 0 auto; appearance: none; background: none; border: 0; cursor: pointer;
    padding: 10px 9px; font-size: 12px; font-weight: 650; color: var(--bbx-muted);
    font-family: inherit; white-space: nowrap; }
.bbx-sidetab:hover { color: var(--bbx-text); }
.bbx-sidetab.active { color: var(--bbx-accent); box-shadow: inset 0 -2px 0 var(--bbx-accent); }
.bbx-sidepanes { background: var(--bbx-surface); border: 1px solid var(--bbx-border); border-top: 0;
    border-radius: 0 0 var(--bbx-radius) var(--bbx-radius); }
.bbx-sidepane { display: none; padding: 14px 16px; }
.bbx-sidepane.active { display: block; }
.bbx-sidepane h4 { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--bbx-muted); margin: 0 0 8px; }
.bbx-sidepane h4 + .bbx-kv { margin-bottom: 14px; }
.bbx-sidepane .bbx-table-scroll { margin: 0 -16px; }
.bbx-sidepane .bbx-table thead th, .bbx-sidepane .bbx-table tbody td { padding: 6px 10px; font-size: 11.5px; }

/* the pricing engine's own explanation of how it got to this price */
.bbx-trace { list-style: none; margin: 0; padding: 0; font-size: 11.5px; color: var(--bbx-text-2); }
.bbx-trace li { padding: 5px 0; border-bottom: 1px dashed var(--bbx-border); display: flex;
    justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.bbx-trace li:last-child { border-bottom: 0; }
.bbx-trace li span { color: var(--bbx-muted); }

/* ---- entry grid (the row you key into) ---- */
/* Seven across only where the main column is genuinely wide enough. The sidebar and gutters
   eat ~440px, and the seven hard minimums plus gaps and panel padding need ~888px — so the
   honest threshold is a VIEWPORT of ~1330, not the main column's own width. Set at 1400 for
   margin: 1440 (the common monitor) keeps the whole entry row on one line, 1280 drops to
   four. Four across is the middle state — two tidy rows, not three. */
.bbx-entry-grid { display: grid; gap: 10px; align-items: end;
    grid-template-columns: minmax(200px, 2.4fr) minmax(96px, .8fr) minmax(150px, 1.4fr)
                           minmax(78px, .6fr) minmax(96px, .8fr) minmax(96px, .8fr) auto; }
.bbx-entry-grid > * { min-width: 0; }
@media (max-width: 1399.98px) { .bbx-entry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .bbx-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .bbx-entry-grid { grid-template-columns: 1fr; } }

.bbx-itemcount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 16px;
    border-top: 1px solid var(--bbx-border); border-bottom: 1px solid var(--bbx-border);
    background: var(--bbx-surface-2); font-size: 12px; color: var(--bbx-muted);
    font-variant-numeric: tabular-nums; }
.bbx-itemcount strong { color: var(--bbx-text); font-weight: 700; }
/* The Keys toggle sits at the far end of the count strip, away from the figures. */
.bbx-hint-toggle { margin-left: auto; }
.bbx-hint-toggle.is-on { border-color: var(--bbx-accent); color: var(--bbx-accent); }

/* ---- charges: picked from a list, Busy-style, rather than six permanent rows ---- */
.bbx-charge-name { font-weight: 600; color: var(--bbx-text); }
/* The %/₹ basis toggle rides inline with the charge name (was six lines of inline style).
   `.bbx select.bbx-input` at :499 is (0,2,1) and sets width:100%. The inline style this replaced
   always beat it; a bare `.bbx-charge-basis` at (0,1,0) does NOT — it stretched the select to
   607px, overflowed its own cell by 50px and flung the × button across the totals block. Match
   the specificity and win on order. */
.bbx select.bbx-charge-basis { width: auto; display: inline-block; margin-left: 8px;
    padding: 2px 6px; font-size: 11.5px; }
.bbx-charge-x { margin-left: 8px; width: 20px; height: 20px; line-height: 1; padding: 0;
    border: 1px solid var(--bbx-border); border-radius: 6px; background: var(--bbx-surface);
    color: var(--bbx-muted); font-size: 14px; cursor: pointer; vertical-align: middle; }
.bbx-charge-x:hover { border-color: var(--bbx-crit-line); color: var(--bbx-crit); background: var(--bbx-crit-bg); }
.bbx-charge-x:focus-visible { outline: 2px solid var(--bbx-accent); outline-offset: 1px; }
/* Constrained so the picker reads as one control, not a full-width bar across the totals. */
.charges-add #chargePicker { width: auto; min-width: 220px; max-width: 100%; font-size: 12px; }
.charges-add td { padding-top: 10px; }

/* the row the keyboard is currently on — Alt+Up/Down moves it, F9 deletes it */
.bbx-table tbody tr.is-active td { background: var(--bbx-accent-weak); }
.bbx-table tbody tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--bbx-accent); }
.bbx-table tbody tr.is-active:hover td { background: var(--bbx-accent-weak); }

/* ---- keyboard affordances ---- */
.bbx-kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 5px;
    border: 1px solid var(--bbx-border-strong); background: var(--bbx-surface-2);
    font-family: var(--bbx-mono); font-size: 10.5px; font-weight: 700; line-height: 1.5;
    color: var(--bbx-text-2); text-align: center; }

/* Busy's function-key strip: always on screen, so the key map is never a training cost.
   Sticky rather than fixed so it scrolls into place instead of overlaying the totals. */
.bbx-keybar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px 12px; margin-top: 4px; background: var(--bbx-surface);
    border: 1px solid var(--bbx-border); border-radius: var(--bbx-radius);
    box-shadow: 0 -6px 20px -14px rgba(16, 40, 30, .5); }
.bbx-keybar button { appearance: none; display: inline-flex; align-items: center; gap: 6px;
    background: var(--bbx-surface-2); border: 1px solid var(--bbx-border); border-radius: 7px;
    padding: 4px 9px; font-family: inherit; font-size: 11.5px; font-weight: 600;
    color: var(--bbx-text-2); cursor: pointer; white-space: nowrap; }
.bbx-keybar button:hover { border-color: var(--bbx-accent); color: var(--bbx-accent); }
.bbx-keybar button .bbx-kbd { pointer-events: none; }

/* ---- totals ladder ---- */
.bbx-table tfoot td { padding: 7px 16px; font-size: 12.5px; color: var(--bbx-text-2);
    font-variant-numeric: tabular-nums; border-top: 1px solid var(--bbx-border); }
.bbx-table tfoot td.num { text-align: right; }
.bbx-table tfoot tr.grand td { font-size: 15px; font-weight: 700; color: var(--bbx-text);
    background: var(--bbx-row-band); border-top: 2px solid var(--bbx-border-strong); }
.bbx-table tfoot input.bbx-input { max-width: 120px; margin-left: auto; text-align: right; padding: 4px 8px; font-size: 12px; }

/* ---- Create Challan v2, UX pass: party line, stock chip, insert bar, tax summary ---- */

/* Busy states the party on one line and gives the screen back to the item grid. */
.bbx-partyline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 14px; padding: 9px 12px; border-radius: var(--bbx-radius-sm);
    background: var(--bbx-surface-2); border: 1px solid var(--bbx-border);
    font-size: 12.5px; color: var(--bbx-muted); font-variant-numeric: tabular-nums; }
.bbx-partyline strong { color: var(--bbx-text); font-weight: 650; }
.bbx-partyline-name { font-size: 14px; font-weight: 700; color: var(--bbx-text); letter-spacing: -.1px; }
.bbx-partyline-sep { color: var(--bbx-faint); }
.bbx-partyline .bbx-btn { margin-left: auto; }

/* "Cur. Stock", stated under the entry grid where Busy states it — near the qty you are keying,
   but not inside its cell, where it would grow the cell and break the row's baseline. */
.bbx-stockchip { margin-top: 8px; font-size: 12px; font-weight: 650; color: var(--bbx-muted);
    font-variant-numeric: tabular-nums; }
.bbx-stockchip.warn { color: var(--bbx-warn); }
.bbx-stockchip.crit { color: var(--bbx-crit); }

.bbx-insertbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.bbx-insertbar .bbx-btn { margin-left: auto; }

.bbx-taxsummary { padding: 14px 16px 4px; border-top: 1px solid var(--bbx-border); }
.bbx-taxsummary .bbx-table-scroll { margin: 8px -16px 0; }

.bbx-credit-ship { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bbx-border); }
.bbx-credit-ship .bbx-field-label { display: block; }

.bbx-rowacts { display: flex; gap: 4px; justify-content: flex-end; }
.bbx-rowacts .bbx-btn { padding: 4px 8px; font-size: 11.5px; }

.bbx-keybar-tail { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.bbx-keybar-total { font-size: 12px; color: var(--bbx-muted); font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.bbx-keybar-total strong { font-size: 15px; font-weight: 700; color: var(--bbx-text); margin-left: 5px; }
/* On a phone the key bar wraps to two rows; the total must not be the thing that falls off. */
@media (max-width: 575.98px) {
    .bbx-keybar-tail { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* A wrapped key bar is 255px tall at 390px wide — 38% of a real phone viewport, leaving about the
   entry row and three bill lines. On a screen whose sticky footer is meant to buy space back, that
   is the opposite of the point. Below 640 the chips become ONE horizontally scrollable row (~40px)
   and the total stays pinned on its own line, so nothing is lost — just reached by swiping the
   strip instead of by growing it. Above 640 the bar is unchanged. */
@media (max-width: 639.98px) {
    .bbx-keybar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .bbx-keybar::-webkit-scrollbar { display: none; }
    .bbx-keybar button { flex: 0 0 auto; }
    /* Out of the scrolling strip and onto its own line, so the figure the operator watches is
       never the thing that scrolls away. */
    .bbx-keybar-tail { position: sticky; right: 0; flex: 0 0 auto; width: auto; margin-left: auto;
        gap: 10px; padding-left: 10px; background: var(--bbx-surface); }
}

/* ---- Create Challan v2: Busy-style transactions list ---- */
.bbx-histhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; }
.bbx-histtitle { font-size: 15px; font-weight: 700; color: var(--bbx-text); letter-spacing: -.1px; }
.bbx-histtoggles { display: flex; flex-wrap: wrap; gap: 6px; }
/* Busy prints the weighted average under the list — the number you negotiate against. */
.bbx-histfoot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bbx-border);
    font-size: 12.5px; color: var(--bbx-muted); font-variant-numeric: tabular-nums; }
.bbx-histfoot strong { color: var(--bbx-text); font-size: 14px; font-weight: 700; }
/* `--bbx-faint` is for de-emphasised numerals; "(weighted average)" is running copy and came out
   at 2.69:1 light / 3.20:1 dark. `--bbx-muted` reads 4.86:1 and 5.33:1 — both clear AA. */
.bbx-histfoot span { color: var(--bbx-muted); }
/* the modal sits OUTSIDE .bbx, so its tables need their own ink rules */
#historyModal .bbx-table thead th { color: var(--bbx-muted); background: var(--bbx-row-band); }
#historyModal .bbx-table tbody td { color: var(--bbx-text); }
#historyModal .bbx-table tbody tr.is-warn td { background: var(--bbx-warn-bg); }
/* The base modal is width:min(560px,96vw), which beats a bare max-width — at 560px the Rate
   and Landed columns fell behind a horizontal scroll, and those are the only reason to open
   this list. Restate `width`, not `max-width`. */
#historyModal .bbx-modal { width: min(900px, 100%); }
/* In the modal the average lives on `.bbx-modal-foot`, which already draws the divider and the
   padding — so strip the ones it carries for the sidebar panes (#waParty and friends), where it
   is still a block under a list. Scoped to the foot so those panes are untouched. */
#historyModal .bbx-modal-foot .bbx-histfoot { margin: 0; padding: 0; border-top: 0; align-self: center; }

/* ---- Create Challan v2: receivables aging bar ---- */
.bbx-agebars { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin-top: 12px;
    background: var(--bbx-surface-2); border: 1px solid var(--bbx-border); }
.bbx-agebars span { display: block; height: 100%; }
.bbx-agebars .ok { background: var(--bbx-ok); }
.bbx-agebars .warn { background: var(--bbx-warn-line); }
/* 31-60 needs to read as worse than 0-30 but not yet critical — the warn ink, one step darker. */
.bbx-agebars .warn2 { background: var(--bbx-warn); }
.bbx-agebars .crit { background: var(--bbx-crit); }

/* ---- Create Challan v2: dispatch countdown (the "timer" on Order Urgency) ---- */
.bbx-countdown { margin-top: 5px; font-size: 11.5px; font-weight: 650; color: var(--bbx-muted);
    font-variant-numeric: tabular-nums; }
.bbx-countdown.warn, .bbx-keybar-total.warn { color: var(--bbx-warn); }
.bbx-countdown.crit, .bbx-keybar-total.crit { color: var(--bbx-crit); }
.bbx-keybar-total.warn strong, .bbx-keybar-total.crit strong { color: inherit; }

/* Weighted average derived from rows that look unit-inconsistent — say so, don't hide it. */
.bbx-mixed { color: var(--bbx-warn); font-weight: 600; }

/* ---- Focus mode ---------------------------------------------------------
   A keying screen owns the whole window: app chrome out, page to the edges.
   Driven by a class on <html> rather than by :fullscreen, so the layout still
   collapses correctly when the fullscreen request is refused (permissions
   policy, or a browser that will not grant it) and the operator still gets the
   space back. `.sidebar + .main-content` is the theme's own rule at (0,1,1);
   prefixing with html.bbx-focus outranks it without !important, but the
   display rules do need it because the shell is themed through #page_layout
   and qompac's own !important declarations. */
html.bbx-focus .sidebar,
html.bbx-focus .iq-navbar { display: none !important; }
html.bbx-focus .sidebar + .main-content { margin-left: 0 !important; }
html.bbx-focus .content-inner { padding: 14px 20px 0 !important; }
html.bbx-focus .bbx-crumbs { display: none; }

/* ============================================================================
   A panel that folds. `<details>` is the repo's disclosure idiom — no JS, keyboard-operable — and
   this only makes its summary look like the panel head it already is.
   ========================================================================= */
details.bbx-panel > summary { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; cursor: pointer; list-style: none; }
details.bbx-panel > summary::-webkit-details-marker { display: none; }
details.bbx-panel > summary h2 { margin: 0; }
details.bbx-panel > summary p { margin: 4px 0 0; }
details.bbx-panel > summary:hover .bbx-btn { border-color: var(--bbx-accent); color: var(--bbx-accent); }
details.bbx-panel[open] > summary .bbx-btn { color: var(--bbx-muted); }

/* ============================================================================
   Row menu — one primary action, and everything else behind a word.

   The invoices table carried NINE unlabelled grey squares per row: eye, clock,
   PDF, envelope, WhatsApp, file, arrow, ban, bin. Nobody can read that, it pushed
   the Status column off the right edge of a 1440px screen, and it treated "open
   this" and "withdraw a GST filing" as equals.

   They are not equals. An invoice is waiting for exactly ONE thing — to be filed,
   or to be dispatched, or nothing — and that is the button. Everything else is
   something you MIGHT do, which is a menu, with words in it.

   ⚠️ `position: fixed`, positioned by script. A menu inside a table cell is
   otherwise clipped by the scroll container the table lives in, which is the
   ordinary way this pattern breaks.
   ========================================================================= */
.bbx-rowmenu-pop { position: fixed; z-index: 3300; min-width: 210px; padding: 6px;
    background: var(--bbx-surface); border: 1px solid var(--bbx-border); border-radius: var(--bbx-radius);
    box-shadow: var(--bbx-shadow-pop); }
.bbx-rowmenu-pop[hidden] { display: none; }

/* Type-ahead list under a text box (bbx-suggest.js). Fixed and placed by script, so a modal or
   scroll box never clips it; keeps the server's order, which a <datalist> did not. */
.bbx-suggest { position: fixed; z-index: 3300; margin: 0; padding: 4px; list-style: none;
    max-height: min(320px, 50vh); overflow-y: auto;
    background: var(--bbx-surface); border: 1px solid var(--bbx-border); border-radius: var(--bbx-radius-sm);
    box-shadow: var(--bbx-shadow-pop); }
.bbx-suggest[hidden] { display: none; }
.bbx-suggest li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 7px 10px; font-size: 13px; line-height: 1.3; color: var(--bbx-text); border-radius: 6px; cursor: pointer; }
.bbx-suggest li[aria-selected="true"] { background: var(--bbx-accent-soft); }
.bbx-suggest li small { flex: none; font-size: 11.5px; color: var(--bbx-muted); }
.bbx-suggest li.bbx-suggest-note { cursor: default; font-size: 11.5px; color: var(--bbx-muted); }
.bbx-rowmenu-pop a,
.bbx-rowmenu-pop button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px;
    border: 0; background: none; text-align: left; font-size: 13px; font-weight: 500; line-height: 1.3;
    color: var(--bbx-text); border-radius: 7px; cursor: pointer; text-decoration: none; }
.bbx-rowmenu-pop a:hover,
.bbx-rowmenu-pop button:hover { background: var(--bbx-row-band); color: var(--bbx-text); }
.bbx-rowmenu-pop .danger { color: var(--bbx-crit); }
.bbx-rowmenu-pop .danger:hover { background: var(--bbx-crit-bg); }
/* Present and explained, never removed: a control that vanishes teaches nobody the rule that
   removed it. The title attribute carries the reason. */
.bbx-rowmenu-pop [aria-disabled="true"] { color: var(--bbx-faint); cursor: not-allowed; }
.bbx-rowmenu-pop [aria-disabled="true"]:hover { background: none; color: var(--bbx-faint); }
.bbx-rowmenu-head { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--bbx-muted); padding: 7px 10px 3px; }
.bbx-rowmenu-sep { height: 1px; margin: 5px 4px; background: var(--bbx-border); }
.bbx-rowactions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; white-space: nowrap; }

/* ============================================================================
   PRINT — the panel is not part of the document.

   A client photographed a Tax Invoice printed from this panel: two pages, each
   carrying the sidebar (Dashboard, Customers, Purchase Management … Logout) down
   the left with the invoice squeezed into the column beside it.

   ⚠️ THE CAUSE IS THAT THERE WAS NO PRINT STYLESHEET AT ALL. Every document view
   extends `suppliers.layouts.main`, so the shell is in the DOM, and the only thing
   that ever removed it was a JavaScript body swap inside the on-screen Print
   button (`printcontent()` in the footer, `bbxPrintInvoice()` on the invoice).
   That swap fails in two ordinary situations:

     - the operator prints with Ctrl/Cmd-P or File ▸ Print, so the handler never
       runs — which is exactly the client's "on SOME pages it prints the screen";
     - `window.print()` is not reliably blocking. On Safari, and on Firefox's async
       preview, the next statement restores the full page before the job is
       rasterised, so the printer receives the shell. That is the geometry in the
       photograph.

   CSS has neither failure mode: it applies to every print path on every screen.
   ========================================================================= */
@media print {

    /* Screen furniture. A printer renders all of this as blank inches. */
    aside.sidebar,
    .sidebar,
    nav.iq-navbar,
    .iq-navbar,
    #bbProgress,
    .bbx-progress,
    .bbx-crumbs,
    .bbx-head-actions,
    .bbx-keys,
    .bbx-filter-actions,
    .bbx-modal-backdrop,
    .bbx-drawer,
    .bbx-drawer-backdrop,
    .modal,
    .modal-backdrop,
    .offcanvas,
    #toast-container,
    .toast-container,
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate,
    .dataTables_processing,
    .dt-buttons,
    .no-print,
    .noPrint { display: none !important; }

    /* Reclaim the space the shell was holding. */
    html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
    main.main-content,
    .main-content,
    .content-inner,
    #page_layout { margin: 0 !important; padding: 0 !important; width: 100% !important; min-height: 0 !important; }

    /* Paper does not need a card.

       ⚠️ `overflow` IS THE LOAD-BEARING ONE. `.bbx-panel` sets `overflow: hidden` so its rounded
       corners clip their contents — harmless on screen, and on paper it truncates a document to a
       single sheet, because an ancestor that clips clips every page after the first. Measured on a
       three-sheet tax invoice: the panel was the one clipping ancestor left. */
    .bbx-panel, .bbx-panel-body, .bbx-paper, .card {
        border: 0 !important; box-shadow: none !important; background: #fff !important;
        overflow: visible !important; max-height: none !important; }

    /* A table that scrolls on screen must not be clipped on paper. */
    .bbx-table-scroll, .bbx-table-scroll.pinned {
        overflow: visible !important; max-height: none !important; }
    .bbx-table thead th, .bbx-table tfoot td { position: static !important; }
    .bbx-table { font-size: 9.5px; }
    .bbx-table thead { display: table-header-group; }
    .bbx-table tbody tr { break-inside: avoid; }

    /* ⚠️ A BUTTON IN A CELL IS CONTENT, NOT A CONTROL. The stock ledger's voucher
       number is a `bbx-btn` — hiding buttons wholesale, which this page used to do,
       blanked the one column somebody prints the report to read. Strip the chrome
       and let the label print as the text it always was. */
    .bbx-table .bbx-btn,
    .bbx-table .bbx-rowbtn {
        border: 0 !important; background: none !important; padding: 0 !important;
        color: inherit !important; box-shadow: none !important; }

    /* A page that HOLDS a document prints the document and nothing else.
       `#PrintOrder` is the existing convention — fifteen views already mark their
       printable node with it — so this needs no change to any of them.

       ⚠️ THE DOCUMENT STAYS IN NORMAL FLOW, and this is the whole trick.

       The obvious recipe — hide everything with `visibility: hidden`, then lift the
       document out with `position: absolute` — is wrong for anything longer than a
       sheet, and every invoice worth printing is longer than a sheet. An absolutely
       positioned box DOES NOT PAGINATE: the browser lays it out on the first page
       and clips whatever overflows, so a long invoice loses its later pages or
       breaks in the wrong places. `visibility: hidden` compounds it by leaving every
       hidden element's box in the layout, padding the document out with blank
       regions that then decide where the breaks fall.

       So instead: REMOVE everything that is neither an ancestor of the document nor
       part of it, and leave the document itself exactly where it is. Its ancestors
       stay displayed as ordinary blocks — reset above — and the browser paginates it
       the way it paginates any normal-flow content, which is what the document's own
       `thead`/`tfoot`/`page-break-inside` rules are written against. */
    body:has(#PrintOrder) :not(:has(#PrintOrder)):not(#PrintOrder):not(#PrintOrder *) { display: none !important; }
    body:has(#PrintOrder) #PrintOrder { padding: 0 !important; }
    /* NO ANCESTOR OF THE DOCUMENT MAY CLIP IT, whatever it is or gains later. One of them setting
       `overflow: hidden` for a rounded corner is enough to lose every sheet after the first, and
       that is not a thing anybody would look for. */
    body:has(#PrintOrder) :has(#PrintOrder) {
        overflow: visible !important; max-height: none !important; height: auto !important; }
}

/* ==========================================================================
   PRODUCT LABELS
   The editor is a two-column working surface: the content on the left, and a
   sticky preview plus the checks on the right, so an edit and its consequence
   are visible at the same time.
   ========================================================================== */

.bbx .bbx-label-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: 1.25rem;
    align-items: start;
}

/*
    ⚠️ A STICKY COLUMN MUST BE ABLE TO SCROLL ITSELF.
    Pinned alone, this column is taller than a laptop viewport (~1270px against ~730px), so the
    preview and the history below the Print panel became permanently unreachable — the page
    scrolls, the pinned column does not. Capping it to the viewport and letting it scroll keeps
    the preview beside the form without hiding it.
*/
.bbx .bbx-label-side {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}

/* The preview is a real iframe of the print document, so it needs a ground of its own. */
.bbx .bbx-preview-frame {
    background: #fff;
    border: 1px solid var(--bbx-border);
    border-radius: 6px;
    overflow: auto;
    max-height: 55vh;
}

.bbx .bbx-preview-frame iframe {
    display: block;
    width: 100%;
    min-height: 40vh;
    border: 0;
}

.bbx .bbx-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Findings read worst-first, with the severity carried in a left stripe as well as the pill. */
.bbx .bbx-findings { list-style: none; margin: 0.75rem 0 0; padding: 0; }

.bbx .bbx-findings li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-left: 3px solid var(--bbx-border);
    background: var(--bbx-surface-2);
    border-radius: 0 4px 4px 0;
}

.bbx .bbx-findings li + li { margin-top: 0.4rem; }
.bbx .bbx-findings li.is-blocker { border-left-color: var(--bbx-crit); }
.bbx .bbx-findings li.is-warning { border-left-color: var(--bbx-warn); }
.bbx .bbx-findings li span:not(.bbx-pill) { flex: 1 1 12rem; min-width: 0; }

.bbx .bbx-allergen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.35rem 0.75rem;
    margin-top: 0.4rem;
}

.bbx .bbx-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 400;
}

.bbx .bbx-check input { margin: 0; }

@media (max-width: 1100px) {
    .bbx .bbx-label-grid { grid-template-columns: minmax(0, 1fr); }
    .bbx .bbx-label-side { position: static; }
}

/* ==========================================================================
   QUOTATION BUILDER (.bbx-qt-*)
   A sticky header bar, the product browser in the main column, and a sticky
   Tray / Offers / Style panel beside it. Every figure is the server's.

   The script keeps --qt-top (under the topbar, whether or not it is sticky) and
   --qt-side-top (under the condensed bar) current, so nothing here guesses at
   the shell's height.
   ========================================================================== */

.bbx-qt { --qt-top: 0px; --qt-side-top: 88px; --qt-bar-gap: 0px; --qt-keybar-h: 58px; }
.bbx-qt .bbx-crumbs a { color: var(--bbx-muted); text-decoration: none; }
.bbx-qt .bbx-crumbs a:hover { color: var(--bbx-accent); }
.bbx-qt .bbx-qt-opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--bbx-faint); margin-left: 3px; }
.bbx-qt .bbx-qt-help { margin: 6px 0 0; font-size: 12px; }
.bbx-qt [hidden] { display: none !important; }

/* ---- header bar ---- */
.bbx-qt-bar-sentinel { height: 0; }
.bbx-qt-bar { position: sticky; top: var(--qt-top); z-index: 40; margin-bottom: calc(14px + var(--qt-bar-gap));
    background: var(--bbx-surface); border: 1px solid var(--bbx-border); border-radius: var(--bbx-radius);
    box-shadow: var(--bbx-shadow); padding: 12px 16px 14px; }
.bbx-qt-bar.is-stuck { padding: 8px 16px; box-shadow: var(--bbx-shadow-pop); border-top-left-radius: 0; border-top-right-radius: 0; }
.bbx-qt-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bbx-qt-docid { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.bbx-qt-docid-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--bbx-muted); }
.bbx-qt-docid-no { font-size: 20px; font-weight: 700; letter-spacing: -.4px; color: var(--bbx-text); line-height: 1.2; }
.bbx-qt-docid .bbx-pill { align-self: center; }
.bbx-qt-bar.is-stuck .bbx-qt-docid-no { font-size: 15px; }
.bbx-qt-bar.is-stuck .bbx-qt-docid-label { display: none; }
.bbx-qt-bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bbx-qt-bar-fields { display: grid; gap: 12px 14px; align-items: end; margin-top: 12px;
    grid-template-columns: minmax(220px, 1.4fr) auto minmax(130px, .7fr) minmax(150px, 1fr); }
.bbx-qt-bar-fields > * { min-width: 0; }
.bbx-qt-bar-fields .bbx-field-label { margin-bottom: 5px; }
.bbx-qt-bar.is-stuck .bbx-qt-bar-fields,
.bbx-qt-bar.is-stuck .bbx-qt-partyline,
.bbx-qt-bar.is-stuck .bbx-qt-prospect { display: none !important; }
.bbx-qt-fld-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.bbx-qt-fld-labelrow .bbx-field-label { margin: 0; }
.bbx-qt-validity { display: flex; align-items: center; gap: 8px; }
.bbx-qt-validity .bbx-input { width: 138px; }
.bbx-qt-prospect-name { display: flex; gap: 8px; }
.bbx-qt-prospect-name .bbx-input { flex: 1; }
.bbx-qt-custwrap .select2-container { width: 100% !important; }

/* the condensed bar's one-line summary */
.bbx-qt-mini { display: none; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; font-size: 12.5px; color: var(--bbx-muted);
    white-space: nowrap; overflow: hidden; }
.bbx-qt-bar.is-stuck .bbx-qt-mini { display: flex; }
.bbx-qt-mini strong { color: var(--bbx-text); font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.bbx-qt-mini .sep { color: var(--bbx-faint); }
.bbx-qt-mini .fig { font-family: var(--bbx-mono); font-variant-numeric: tabular-nums; color: var(--bbx-text); font-weight: 650; }

/* save status */
.bbx-qt-savestate { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--bbx-muted); }
.bbx-qt-savestate:empty { display: none; }
.bbx-qt-savestate::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bbx-ok); }
.bbx-qt-savestate.is-saving::before { background: var(--bbx-warn-line); animation: bbxQtPulse 1s ease-in-out infinite; }
.bbx-qt-savestate.is-error { color: var(--bbx-crit); }
.bbx-qt-savestate.is-error::before { background: var(--bbx-crit); }
@keyframes bbxQtPulse { 50% { opacity: .35; } }

/* Issue, with the reasons it is refused on hover */
.bbx-qt-issuewrap { position: relative; display: inline-flex; }
.bbx-qt-tip { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 300px; padding: 10px 12px;
    background: var(--bbx-surface); border: 1px solid var(--bbx-crit-line); border-radius: var(--bbx-radius-sm);
    box-shadow: var(--bbx-shadow-pop); font-size: 12.5px; color: var(--bbx-text); }
.bbx-qt-tip strong { display: block; color: var(--bbx-crit); margin-bottom: 4px; font-size: 12px; }
.bbx-qt-tip ul { margin: 0; padding-left: 16px; }
.bbx-qt-tip li + li { margin-top: 3px; }
.bbx-qt-issuewrap:not(:hover):not(:focus-within) .bbx-qt-tip { display: none; }

/* the party, stated on one line under the fields */
.bbx-qt-partyline { display: flex; align-items: center; gap: 6px 10px; margin-top: 10px; padding: 7px 12px;
    border-radius: var(--bbx-radius-sm); background: var(--bbx-surface-2); border: 1px solid var(--bbx-border);
    font-size: 12.5px; color: var(--bbx-muted); white-space: nowrap; overflow: hidden; }
.bbx-qt-partyline > * { flex: none; }
.bbx-qt-partyline .rest { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bbx-qt-partyline .bbx-pill { max-width: none; }
.bbx-qt-partyline strong { color: var(--bbx-text); font-weight: 650; }
.bbx-qt-partyline .sep { color: var(--bbx-faint); }
.bbx-qt-prospect { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--bbx-border); }
.bbx-qt-prospect-grid { display: grid; gap: 10px 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bbx-qt-prospect-grid .bbx-field { margin: 0; min-width: 0; }
.bbx-qt-prospect-grid .span-2 { grid-column: span 2; }

/* segmented control */
.bbx-qt-seg { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--bbx-border); border-radius: 9px;
    background: var(--bbx-surface-2); }
.bbx-qt-seg.block { display: flex; }
.bbx-qt-seg.block > * { flex: 1; }
.bbx-qt-seg button { appearance: none; border: 0; background: none; border-radius: 7px; padding: 6px 10px; font: inherit;
    font-size: 12.5px; font-weight: 650; color: var(--bbx-muted); cursor: pointer; white-space: nowrap; }
.bbx-qt-seg button:hover { color: var(--bbx-text); }
.bbx-qt-seg button.active, .bbx-qt-seg button[aria-pressed="true"], .bbx-qt-seg button[aria-checked="true"] {
    background: var(--bbx-surface); color: var(--bbx-accent); box-shadow: 0 1px 2px rgba(16, 40, 30, .12), inset 0 0 0 1px var(--bbx-accent-border); }
.bbx-qt-seg button:disabled, .bbx-qt-seg button.is-off { opacity: .45; cursor: not-allowed; }
/* Three price kinds in a 320px popover: labels wrap rather than spill. */
.bbx-qt-pop .bbx-qt-seg button { white-space: normal; line-height: 1.25; padding: 6px; }
.bbx-qt-seg.sm button { padding: 3px 7px; font-size: 11.5px; }

/* switch */
.bbx-qt-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--bbx-text-2);
    cursor: pointer; margin: 0; user-select: none; }
.bbx-qt-switch.block { display: flex; padding: 5px 0; }
.bbx-qt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bbx-qt-switch-track { position: relative; flex: none; width: 30px; height: 17px; border-radius: 99px; background: var(--bbx-border-strong);
    transition: background .15s; }
.bbx-qt-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
    background: var(--bbx-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.bbx-qt-switch input:checked + .bbx-qt-switch-track { background: var(--bbx-accent); }
.bbx-qt-switch input:checked + .bbx-qt-switch-track::after { transform: translateX(13px); }
.bbx-qt-switch input:focus-visible + .bbx-qt-switch-track { outline: 2px solid var(--bbx-accent); outline-offset: 2px; }
.bbx-qt-switch input:disabled ~ * { opacity: .5; }
.bbx-qt-switch:has(input:disabled) { cursor: not-allowed; }

/* banners */
.bbx-qt-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; padding: 10px 14px;
    border-radius: var(--bbx-radius-sm); background: var(--bbx-warn-bg); border: 1px solid var(--bbx-warn-line);
    color: var(--bbx-text); font-size: 13px; }
.bbx-qt-banner > svg { width: 18px; height: 18px; flex: none; color: var(--bbx-warn); }
.bbx-qt-banner .grow { flex: 1 1 260px; min-width: 0; }
.bbx-qt-banner.is-info { background: var(--bbx-accent-weak); border-color: var(--bbx-accent-border); }
.bbx-qt-banner.is-info > svg { color: var(--bbx-accent); }

/* ---- the split ---- */
.bbx .bbx-qt-split { grid-template-columns: minmax(0, 1fr) 400px; }
.bbx .bbx-qt-side { top: var(--qt-side-top); max-height: calc(100vh - var(--qt-side-top) - var(--qt-keybar-h) - 16px);
    overflow-y: auto; overscroll-behavior: contain; gap: 0; border-radius: var(--bbx-radius);
    box-shadow: var(--bbx-shadow); scrollbar-width: thin; }
@media (max-width: 1399.98px) { .bbx .bbx-qt-split { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 1199.98px) {
    .bbx .bbx-qt-split { grid-template-columns: 1fr; }
    .bbx .bbx-qt-side { position: static; max-height: none; overflow: visible; }
    .bbx-qt-bar-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1399.98px) and (min-width: 1200px) {
    .bbx-qt-validity .bbx-qt-seg button { padding: 6px 8px; }
    .bbx-qt-keybar .opt { display: none; }
}
@media (max-width: 767.98px) {
    .bbx-qt-bar-fields, .bbx-qt-prospect-grid { grid-template-columns: 1fr; }
    .bbx-qt-prospect-grid .span-2 { grid-column: auto; }
    .bbx-qt-validity { flex-wrap: wrap; }
}
/* `flex: none`: the side is a column flexbox and would shrink the card to its own height, and a sticky
   head or foot inside a card that short scrolls away with it */
.bbx-qt-sidecard { display: flex; flex-direction: column; flex: none; min-height: 100%; background: var(--bbx-surface);
    border: 1px solid var(--bbx-border); border-radius: var(--bbx-radius); }
/* the tabs and the Expand button share one sticky head (the button is not a tab) */
.bbx-qt-sidehead { position: sticky; top: 0; z-index: 5; display: flex; align-items: stretch; background: var(--bbx-surface);
    border-bottom: 1px solid var(--bbx-border); border-radius: var(--bbx-radius) var(--bbx-radius) 0 0; }
.bbx-qt-tabs { flex: 1 1 auto; min-width: 0; border-bottom: 0; border-radius: var(--bbx-radius) 0 0 0; padding: 0 10px; }
.bbx-qt-tabs .bbx-sidetab { padding: 12px 10px; font-size: 12.5px; }
.bbx-qt-tabcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 3px;
    border-radius: 99px; font-size: 10.5px; font-weight: 700; background: var(--bbx-surface-2); color: var(--bbx-muted);
    border: 1px solid var(--bbx-border); font-variant-numeric: tabular-nums; }
.bbx-sidetab.active .bbx-qt-tabcount { background: var(--bbx-accent-soft); border-color: var(--bbx-accent-border); color: var(--bbx-accent); }
.bbx-qt-panes { flex: 1 1 auto; border: 0; border-radius: 0; }
.bbx-qt-panes .bbx-sidepane { padding: 4px 16px 14px; }

/* ---- browser ---- */
.bbx .bbx-qt-browser { overflow: visible; }
.bbx-qt-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px;
    border-bottom: 1px solid var(--bbx-border); }
.bbx-qt-search { max-width: none; flex: 1 1 220px; }
.bbx-qt-search input { font-size: 13.5px; }
.bbx-qt-slash { margin-right: 10px; }
.bbx-qt-sortlabel { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--bbx-muted); margin: 0; }
.bbx select.bbx-qt-sort { width: auto; min-width: 150px; flex: 0 0 auto; }
.bbx-qt-browse { display: grid; grid-template-columns: 208px minmax(0, 1fr); align-items: start; }
.bbx-qt-rail-slot { position: sticky; top: var(--qt-side-top); max-height: calc(100vh - var(--qt-side-top) - var(--qt-keybar-h) - 16px); overflow-y: auto;
    overscroll-behavior: contain; border-right: 1px solid var(--bbx-border); scrollbar-width: thin; }
@media (min-width: 1400px) { .bbx-qt-filterbtn { display: none; } }
@media (max-width: 1399.98px) {
    .bbx-qt-browse { grid-template-columns: minmax(0, 1fr); }
    .bbx-qt-rail-slot { display: none; }
}

/* filter rail */
.bbx-qt-rail { padding: 6px 14px 16px; }
.bbx-drawer .bbx-qt-rail { padding: 0; }
.bbx-qt-railsec { padding: 12px 0; border-bottom: 1px solid var(--bbx-border); }
.bbx-qt-railsec:last-of-type { border-bottom: 0; }
.bbx-qt-railhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--bbx-muted); }
.bbx-qt-linkbtn { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; font-weight: 650;
    letter-spacing: 0; text-transform: none; color: var(--bbx-accent); cursor: pointer; }
.bbx-qt-linkbtn:hover { text-decoration: underline; }
.bbx .bbx-qt-railsearch { padding: 6px 9px; font-size: 12.5px; margin-bottom: 6px; }
.bbx-qt-checklist { max-height: 228px; overflow-y: auto; margin: 0 -6px; scrollbar-width: thin; }
.bbx-qt-opt-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 12.5px;
    color: var(--bbx-text-2); cursor: pointer; margin: 0; }
.bbx-qt-opt-row:hover { background: var(--bbx-row-band); }
.bbx-qt-opt-row input { accent-color: var(--bbx-accent); margin: 0; flex: none; width: 14px; height: 14px; }
.bbx-qt-opt-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbx-qt-opt-row .ct { font-family: var(--bbx-mono); font-size: 11px; color: var(--bbx-faint); font-variant-numeric: tabular-nums; }
.bbx-qt-opt-row.is-on { color: var(--bbx-text); font-weight: 650; }
.bbx-qt-opt-row.is-zero { opacity: .55; }
.bbx-qt-tree { max-height: 320px; overflow-y: auto; margin: 0 -6px; scrollbar-width: thin; }
.bbx-qt-tree ul { list-style: none; margin: 0; padding: 0; }
.bbx-qt-tree ul ul { padding-left: 14px; }
.bbx-qt-tree .node { display: flex; align-items: center; }
.bbx-qt-tree .node .bbx-qt-opt-row { flex: 1; min-width: 0; }
.bbx-qt-caret { appearance: none; border: 0; background: none; width: 18px; height: 22px; padding: 0; flex: none; color: var(--bbx-faint);
    cursor: pointer; display: grid; place-items: center; }
.bbx-qt-caret svg { width: 12px; height: 12px; transition: transform .15s; }
.bbx-qt-caret[aria-expanded="true"] svg { transform: rotate(90deg); }
.bbx-qt-caret:hover { color: var(--bbx-text); }
.bbx-qt-caret.none { visibility: hidden; }
.bbx-qt-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.bbx-qt-chipbtn { appearance: none; border: 1px solid var(--bbx-border); background: var(--bbx-surface); color: var(--bbx-text-2);
    border-radius: 99px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; font-variant-numeric: tabular-nums; }
.bbx-qt-chipbtn small { color: var(--bbx-faint); font-weight: 600; margin-left: 3px; }
.bbx-qt-chipbtn:hover { border-color: var(--bbx-border-strong); color: var(--bbx-text); }
.bbx-qt-chipbtn[aria-pressed="true"] { background: var(--bbx-accent-soft); border-color: var(--bbx-accent-border); color: var(--bbx-accent); }
.bbx-qt-railclear { width: 100%; justify-content: center; margin-top: 12px; }
.bbx-drawer .bbx-qt-railclear { display: none; }

/* results */
.bbx-qt-results { min-width: 0; container-type: inline-size; }
.bbx-qt-fchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
.bbx-qt-fchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 5px 3px 10px; border-radius: 99px; font-size: 12px;
    font-weight: 650; background: var(--bbx-accent-soft); border: 1px solid var(--bbx-accent-border); color: var(--bbx-accent-ink); }
.bbx-qt-fchip button { appearance: none; border: 0; background: none; width: 18px; height: 18px; border-radius: 50%; padding: 0;
    display: grid; place-items: center; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; }
.bbx-qt-fchip button:hover { background: var(--bbx-accent-border); }
.bbx-qt-resulthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px; border-bottom: 1px solid var(--bbx-border); }
.bbx-qt-pickall { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; color: var(--bbx-muted); cursor: pointer; }
.bbx-qt-pickall strong { color: var(--bbx-text); font-variant-numeric: tabular-nums; }
.bbx-qt-resultacts { display: flex; gap: 8px; flex-wrap: wrap; }
.bbx-qt-resultacts .bbx-btn:disabled { opacity: .5; cursor: not-allowed; }
.bbx-qt-resultacts .bbx-btn svg { width: 14px; height: 14px; }

.bbx-qt-row { display: grid; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--bbx-border);
    grid-template-columns: 18px 48px minmax(0, 1fr) 132px 74px 196px; transition: background .12s; }
.bbx-qt-row:hover { background: var(--bbx-row-band); }
.bbx-qt-row:focus-within { background: var(--bbx-row-band); }
/* On the quote: the whole row is tinted (lighter than a ticked row) and keeps its accent edge. */
.bbx-qt-row.is-on { background: color-mix(in srgb, var(--bbx-accent) 7%, transparent); box-shadow: inset 3px 0 0 var(--bbx-accent); }
.bbx-qt-row.is-on:hover, .bbx-qt-row.is-on:focus-within { background: color-mix(in srgb, var(--bbx-accent) 10%, transparent); }
.bbx-qt-row.is-picked { background: var(--bbx-accent-soft); }
.bbx-qt-thumb { width: 48px; height: 48px; border-radius: 9px; object-fit: contain; background: #fff; flex: none;
    box-shadow: inset 0 0 0 1px var(--bbx-border); display: block; }
.bbx-qt-thumb.sm { width: 38px; height: 38px; border-radius: 8px; }
.bbx-qt-thumb.is-blank { display: grid; place-items: center; background: var(--bbx-surface-2); color: var(--bbx-faint);
    font-weight: 700; font-size: 16px; }
.bbx-qt-thumb.sm.is-blank { font-size: 13px; }
.bbx-qt-info { min-width: 0; }
.bbx-qt-name { font-size: 13.5px; font-weight: 650; color: var(--bbx-text); line-height: 1.3; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bbx-qt-meta { margin-top: 2px; font-size: 12px; color: var(--bbx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbx-qt-meta .sep { color: var(--bbx-faint); margin: 0 4px; }
.bbx-qt-last { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; color: var(--bbx-mode-mrp);
    font-weight: 600; font-variant-numeric: tabular-nums; }
.bbx-qt-last svg { width: 12px; height: 12px; }
.bbx-qt-pricecol { text-align: right; line-height: 1.25; font-variant-numeric: tabular-nums; }
.bbx-qt-offer { font-family: var(--bbx-mono); font-size: 14px; font-weight: 700; color: var(--bbx-text); }
.bbx-qt-offer.is-deal { color: var(--bbx-accent); }
.bbx-qt-was { font-family: var(--bbx-mono); font-size: 11.5px; color: var(--bbx-faint); text-decoration: line-through; margin-right: 5px; }
.bbx-qt-pricecol .bbx-qt-was { display: block; margin: 0 0 1px; }
.bbx-qt-mrp { font-size: 11px; color: var(--bbx-muted); margin-top: 2px; }
.bbx-qt-unpriced { font-size: 12px; font-weight: 650; color: var(--bbx-crit); }
.bbx-qt-offerpill { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700;
    background: var(--bbx-accent-soft); border: 1px solid var(--bbx-accent-border); color: var(--bbx-accent); max-width: 132px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.bbx-qt-stock { font-size: 12px; font-weight: 650; color: var(--bbx-text-2); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; }
.bbx-qt-stock small { display: block; font-size: 10.5px; font-weight: 600; color: var(--bbx-faint); text-transform: uppercase; letter-spacing: .3px; }
.bbx-qt-stock.is-out { color: var(--bbx-crit); }
.bbx-qt-addcol { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

.bbx-qt-stepper { display: inline-flex; align-items: stretch; height: 30px; border: 1px solid var(--bbx-border); border-radius: 8px;
    background: var(--bbx-surface); overflow: hidden; }
.bbx-qt-stepper button { appearance: none; border: 0; background: var(--bbx-surface-2); width: 24px; padding: 0; font-size: 15px;
    line-height: 1; color: var(--bbx-text-2); cursor: pointer; }
.bbx-qt-stepper button:hover { color: var(--bbx-accent); background: var(--bbx-accent-weak); }
.bbx-qt-stepper input { width: 40px; border: 0; border-left: 1px solid var(--bbx-border); border-right: 1px solid var(--bbx-border);
    text-align: center; font-family: var(--bbx-mono); font-size: 12.5px; font-weight: 650; color: var(--bbx-text); background: var(--bbx-surface);
    padding: 0; -moz-appearance: textfield; }
.bbx-qt-stepper input::-webkit-outer-spin-button, .bbx-qt-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bbx-qt-stepper input:focus { outline: none; background: var(--bbx-accent-weak); }
.bbx-qt-unit { font-size: 11.5px; color: var(--bbx-muted); font-weight: 600; }
.bbx-qt-add { min-width: 64px; justify-content: center; padding: 6px 10px; }
.bbx-qt-add.is-on { background: var(--bbx-ok-bg); border-color: transparent; color: var(--bbx-ok); }
.bbx-qt-add.is-on:hover { background: var(--bbx-ok-bg); color: var(--bbx-ok); border-color: var(--bbx-accent-border); }
.bbx-qt-add svg { width: 13px; height: 13px; }

.bbx-qt-more { padding: 14px 16px; text-align: center; color: var(--bbx-muted); font-size: 12.5px; }
.bbx-qt-more:empty { display: none; }
.bbx-qt-skelrow { display: grid; grid-template-columns: 48px 1fr 120px; gap: 12px; align-items: center; padding: 14px 16px 14px 46px;
    border-bottom: 1px solid var(--bbx-border); }
.bbx-qt-skelrow .bbx-skeleton.th { width: 48px; height: 48px; }

/* narrow main column: price and stock drop under the name */
@container (max-width: 720px) {
    .bbx-qt-row { grid-template-columns: 18px 44px minmax(0, 1fr) auto; grid-template-areas: "pick th info price" "pick th foot foot";
        row-gap: 8px; column-gap: 12px; align-items: start; }
    .bbx-qt-row > .pick { grid-area: pick; margin-top: 3px; }
    .bbx-qt-row > .bbx-qt-thumb { grid-area: th; width: 44px; height: 44px; }
    .bbx-qt-row > .bbx-qt-info { grid-area: info; }
    .bbx-qt-row > .bbx-qt-info .bbx-qt-last { display: none; }
    .bbx-qt-row > .bbx-qt-foot { grid-area: foot; display: flex; align-items: center; gap: 10px; min-width: 0; }
    .bbx-qt-foot > .bbx-qt-lastcell { display: block; flex: 1 1 auto; min-width: 0; }
    .bbx-qt-foot > .bbx-qt-addcol { flex: none; margin-left: auto; }
    .bbx-qt-row > .bbx-qt-pricecol { grid-area: price; }
    .bbx-qt-row > .bbx-qt-stock { display: none; }
    .bbx-qt-meta .stockword { display: inline; }
}
.bbx-qt-foot { display: contents; }
.bbx-qt-lastcell { display: none; }
.bbx-qt-lastcell .bbx-qt-last { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.bbx-qt-meta .stockword { display: none; }
.bbx-qt-meta .stockword.is-out { color: var(--bbx-crit); font-weight: 650; }

/* ---- tray ---- */
.bbx-qt-trayhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0 4px;
    font-size: 12px; color: var(--bbx-muted); }
.bbx-qt-group { margin-top: 6px; }
.bbx-qt-grouphead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 0 6px;
    border-bottom: 1px solid var(--bbx-border); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--bbx-text-2); }
.bbx-qt-grouphead span { font-weight: 600; color: var(--bbx-faint); letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.bbx-qt-line { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 10px; padding: 10px 0 10px;
    border-bottom: 1px dashed var(--bbx-border); position: relative; }
.bbx-qt-line:last-child { border-bottom: 0; }
.bbx-qt-line.is-block { box-shadow: inset 3px 0 0 var(--bbx-crit); padding-left: 8px; margin-left: -8px; }
.bbx-qt-line.is-pending { opacity: .72; }
.bbx-qt-line-body { min-width: 0; }
.bbx-qt-line-top { display: flex; align-items: flex-start; gap: 6px; }
.bbx-qt-line-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 650; color: var(--bbx-text); line-height: 1.3; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bbx-qt-line-sub { font-size: 11px; color: var(--bbx-muted); margin-top: 1px; }
.bbx-qt-iconbtn { appearance: none; border: 0; background: none; width: 24px; height: 24px; border-radius: 6px; padding: 0; flex: none;
    display: grid; place-items: center; color: var(--bbx-faint); cursor: pointer; }
.bbx-qt-iconbtn svg { width: 14px; height: 14px; }
.bbx-qt-iconbtn:hover { background: var(--bbx-surface-2); color: var(--bbx-text); }
.bbx-qt-iconbtn.danger:hover { background: var(--bbx-crit-bg); color: var(--bbx-crit); }
.bbx-qt-iconbtn:disabled { opacity: .35; cursor: not-allowed; }
.bbx-qt-line-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.bbx-qt-line-qty { display: flex; align-items: center; gap: 6px; }
.bbx-qt-line-qty .bbx-qt-stepper { height: 26px; }
.bbx-qt-line-qty .bbx-qt-stepper input { width: 38px; font-size: 12px; }
.bbx-qt-line-qty .bbx-qt-stepper button { width: 22px; }
.bbx-qt-line-price { text-align: right; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bbx-qt-line-price .p { font-family: var(--bbx-mono); font-size: 13px; font-weight: 700; color: var(--bbx-text); }
.bbx-qt-line-price .p.is-deal { color: var(--bbx-accent); }
.bbx-qt-line-price .amt { display: block; font-size: 11px; color: var(--bbx-muted); margin-top: 1px; }
.bbx-qt-line-price .amt b { font-family: var(--bbx-mono); color: var(--bbx-text-2); font-weight: 650; }
.bbx-qt-line-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.bbx-qt-line-foot .margin { margin-left: auto; font-size: 10.5px; color: var(--bbx-faint); font-weight: 600; font-variant-numeric: tabular-nums;
    white-space: nowrap; }
.bbx-qt-line-foot .margin b { color: var(--bbx-muted); font-weight: 700; }

.bbx-qt-chip { appearance: none; display: inline-flex; align-items: center; gap: 4px; max-width: 170px; padding: 2px 8px; border-radius: 99px;
    border: 1px solid var(--bbx-accent-border); background: var(--bbx-accent-soft); color: var(--bbx-accent); font: inherit;
    font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbx-qt-chip:hover { border-color: var(--bbx-accent); }
.bbx-qt-chip.is-special { background: var(--bbx-mode-cost-bg); border-color: transparent; color: var(--bbx-mode-cost); }
.bbx-qt-chip.is-usual { background: var(--bbx-surface-2); border-color: var(--bbx-border); color: var(--bbx-muted); font-weight: 650; }
.bbx-qt-chip.is-ghost { background: none; border-style: dashed; border-color: var(--bbx-border-strong); color: var(--bbx-text-2); font-weight: 650; }
.bbx-qt-chip.is-ghost:hover { color: var(--bbx-accent); border-color: var(--bbx-accent); }
.bbx-qt-chip svg { width: 11px; height: 11px; flex: none; }

.bbx-qt-find { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800;
    line-height: 1; cursor: help; flex: none; }
.bbx-qt-find.block, .bbx-qt-find.approval { background: var(--bbx-crit-bg); color: var(--bbx-crit); box-shadow: inset 0 0 0 1px var(--bbx-crit-line); }
.bbx-qt-find.warn { background: var(--bbx-warn-bg); color: var(--bbx-warn); box-shadow: inset 0 0 0 1px var(--bbx-warn-line); }
.bbx-qt-find.info { background: var(--bbx-surface-2); color: var(--bbx-muted); box-shadow: inset 0 0 0 1px var(--bbx-border); }
.bbx-qt-findtext { flex-basis: 100%; font-size: 11px; font-weight: 600; color: var(--bbx-crit); line-height: 1.35; }
.bbx-qt-findtext.warn { color: var(--bbx-warn); }

/* totals, pinned to the foot of the side column */
.bbx-qt-sidefoot { position: sticky; bottom: 0; z-index: 4; background: var(--bbx-surface); border-top: 1px solid var(--bbx-border);
    border-radius: 0 0 var(--bbx-radius) var(--bbx-radius); box-shadow: 0 -10px 18px -16px rgba(16, 40, 30, .45); }
.bbx-qt-totals { padding: 12px 16px 14px; }
.bbx-qt-breakdown > summary { cursor: pointer; font-size: 11.5px; color: var(--bbx-text-3); list-style: none; }
.bbx-qt-breakdown > summary::-webkit-details-marker { display: none; }
.bbx-qt-breakdown > summary::after { content: ' ▾'; }
.bbx-qt-breakdown[open] > summary::after { content: ' ▴'; }
.bbx-qt-breakdown[open] > .bbx-kv { margin-top: 6px; }
.bbx-qt-totals .bbx-qt-blockers { max-height: 92px; overflow-y: auto; }
.bbx-qt-totals .bbx-kv dt { font-size: 11.5px; }
.bbx-qt-totals .bbx-kv dd { font-family: var(--bbx-mono); font-size: 12px; font-weight: 600; color: var(--bbx-text-2); }
.bbx-qt-grand { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--bbx-border); }
.bbx-qt-grand span { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--bbx-muted); }
.bbx-qt-grand strong { font-family: var(--bbx-mono); font-size: 20px; font-weight: 700; letter-spacing: -.5px; color: var(--bbx-text);
    font-variant-numeric: tabular-nums; }
.bbx-qt-savings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bbx-qt-saving { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 650;
    background: var(--bbx-ok-bg); color: var(--bbx-ok); font-variant-numeric: tabular-nums; }
.bbx-qt-saving b { font-family: var(--bbx-mono); font-weight: 700; }
.bbx-qt-blockers { margin: 10px 0 0; padding: 8px 10px 8px 26px; border-radius: var(--bbx-radius-sm); background: var(--bbx-crit-bg);
    color: var(--bbx-crit); font-size: 11.5px; font-weight: 600; }
.bbx-qt-blockers li + li { margin-top: 3px; }
.bbx-qt-blockers-head { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; margin: 10px 0 -6px; color: var(--bbx-crit); }

/* ---- offers ---- */
.bbx-qt-offeracts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 6px; }
.bbx-qt-offeracts .bbx-btn svg { width: 13px; height: 13px; }
.bbx-qt-rulegroup { margin-top: 10px; }
.bbx-qt-rulehead { display: flex; align-items: center; gap: 6px; padding: 8px 0 6px; border-bottom: 1px solid var(--bbx-border);
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--bbx-text-2); }
.bbx-qt-rulehead .src { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbx-qt-rulehead .src span { color: var(--bbx-muted); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.bbx-qt-rule { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--bbx-border); }
.bbx-qt-rule:last-child { border-bottom: 0; }
.bbx-qt-rule-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--bbx-accent); }
.bbx-qt-rule-dot.is-idle { background: var(--bbx-border-strong); }
.bbx-qt-rule-body { flex: 1; min-width: 0; }
.bbx-qt-rule-text { font-size: 12.5px; font-weight: 650; color: var(--bbx-text); line-height: 1.35; }
.bbx-qt-rule-impact { margin-top: 2px; font-size: 11.5px; color: var(--bbx-muted); font-variant-numeric: tabular-nums; }
.bbx-qt-rule-impact b { color: var(--bbx-ok); font-weight: 700; }
.bbx-qt-rule-impact.is-idle { color: var(--bbx-faint); font-style: italic; }
.bbx-qt-rule-acts { display: flex; gap: 2px; }
.bbx-qt-stalechip { display: inline-block; padding: 1px 6px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .3px;
    background: var(--bbx-warn-bg); color: var(--bbx-warn); border: 1px solid var(--bbx-warn-line); }

/* ---- style ---- */
.bbx-qt-stylesec { padding: 12px 0; border-bottom: 1px solid var(--bbx-border); }
.bbx-qt-stylesec:last-child { border-bottom: 0; }
.bbx-qt-stylesec textarea.bbx-input { resize: vertical; min-height: 64px; line-height: 1.45; }
.bbx-qt-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bbx-qt-swatch { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; min-width: 32px; padding: 3px;
    border-radius: 99px; border: 1px solid var(--bbx-border); background: var(--bbx-surface); cursor: pointer; font: inherit;
    font-size: 12px; font-weight: 650; color: var(--bbx-text-2); margin: 0; position: relative; }
.bbx-qt-swatch.is-logo, .bbx-qt-swatch.is-custom { padding-right: 11px; }
.bbx-qt-swatch-dot { width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.bbx-qt-swatch.is-logo .bbx-qt-swatch-dot { background: conic-gradient(from 45deg, #437a3a, #1f3a5f, #8c3b2b, #437a3a); }
.bbx-qt-swatch:hover { border-color: var(--bbx-border-strong); }
.bbx-qt-swatch[aria-checked="true"] { border-color: var(--bbx-accent); box-shadow: 0 0 0 2px var(--bbx-accent-border); color: var(--bbx-text); }
.bbx-qt-swatch input[type="color"] { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.bbx-qt-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bbx-qt-swatch input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.bbx-qt-hexrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bbx .bbx-qt-hexrow .bbx-input { width: 104px; font-family: var(--bbx-mono); font-size: 12.5px; }

/* ---- popover ---- */
.bbx-qt-pop { position: fixed; z-index: 3300; width: 320px; max-width: calc(100vw - 24px); padding: 12px 14px;
    background: var(--bbx-surface); border: 1px solid var(--bbx-border); border-radius: var(--bbx-radius); box-shadow: var(--bbx-shadow-pop);
    font-size: 12.5px; color: var(--bbx-text); }
.bbx-qt-pop h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--bbx-muted); }
.bbx-qt-pop .bbx-trace li { justify-content: flex-start; }
.bbx-qt-pop .bbx-trace li::before { content: counter(qtstep); counter-increment: qtstep; flex: none; display: inline-grid; place-items: center;
    width: 16px; height: 16px; border-radius: 50%; background: var(--bbx-surface-2); border: 1px solid var(--bbx-border); font-size: 9.5px;
    font-weight: 700; color: var(--bbx-muted); }
.bbx-qt-pop .bbx-trace { counter-reset: qtstep; }
.bbx-qt-pop .bbx-trace li:last-child { color: var(--bbx-text); font-weight: 650; }
.bbx-qt-pop .notapplied { margin-top: 10px; }
.bbx-qt-pop .notapplied li { color: var(--bbx-muted); }
.bbx-qt-pop-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.bbx-qt-pop-row .bbx-input { flex: 1; }
.bbx-qt-pop-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.bbx-qt-pop .bbx-callout { margin-top: 10px; padding: 8px 10px; font-size: 12px; }
.bbx-qt-inputaffix { position: relative; flex: 1; }
.bbx-qt-inputaffix .bbx-input { padding-left: 24px; font-family: var(--bbx-mono); }
.bbx-qt-inputaffix span { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--bbx-muted); font-size: 12.5px;
    pointer-events: none; }

/* ---- modals ---- */
.bbx-qt-preview .bbx-modal-head { gap: 12px; }
.bbx-qt-previewhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.bbx-qt-previewacts { display: flex; align-items: center; gap: 8px; }
.bbx-qt-previewbody { position: relative; background: var(--bbx-bg); }
.bbx-qt-previewload { position: absolute; left: 0; right: 0; top: 0; height: 3px; overflow: hidden; }
.bbx-qt-previewload span { display: block; height: 100%; width: 40%; background: var(--bbx-accent); animation: bbxQtSlide 1s ease-in-out infinite; }
@keyframes bbxQtSlide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.bbx-qt-summary { margin: 0 0 12px; }
.bbx-qt-summary .bbx-kv dd { font-variant-numeric: tabular-nums; }
.bbx-qt-approval { margin-bottom: 12px; }
.bbx-qt-approval ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; }
#qtIssueModal .bbx-callout.crit ul { margin: 6px 0 0; padding-left: 18px; }
.bbx-qt-setfind { max-width: none; width: 100%; margin-bottom: 10px; }
.bbx-qt-setlist { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.bbx-qt-setcard { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border: 1px solid var(--bbx-border);
    border-radius: var(--bbx-radius-sm); background: var(--bbx-surface); }
.bbx-qt-setcard .body { flex: 1; min-width: 0; }
.bbx-qt-setcard .nm { font-weight: 650; font-size: 13px; color: var(--bbx-text); }
.bbx-qt-setcard .ds { font-size: 12px; color: var(--bbx-muted); margin-top: 2px; }
.bbx-qt-setcard.is-applied { background: var(--bbx-surface-2); }
.bbx-qt-setrules, .bbx-qt-setlinks { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding: 6px 8px;
    border: 1px solid var(--bbx-border); border-radius: var(--bbx-radius-sm); max-height: 220px; overflow-y: auto; }
.bbx-qt-setrules .bbx-qt-opt-row small { color: var(--bbx-faint); margin-left: auto; white-space: nowrap; font-size: 11px; }
.bbx-qt-confirmtext { margin: 0; font-size: 13.5px; color: var(--bbx-text-2); line-height: 1.5; }

/* ---- empty states ---- */
.bbx-qt-empty { padding: 26px 12px; text-align: center; }
.bbx-qt-empty svg { width: 34px; height: 34px; color: var(--bbx-faint); margin-bottom: 8px; }
.bbx-qt-empty .t { font-size: 13.5px; font-weight: 700; color: var(--bbx-text); }
.bbx-qt-empty .d { margin: 4px auto 12px; max-width: 34ch; font-size: 12.5px; color: var(--bbx-muted); line-height: 1.45; }
.bbx-qt-empty .bbx-btn { margin: 3px; }

/* ---- key bar ---- */
.bbx-qt-keybar { margin-top: 16px; }
.bbx-qt-keybar .bbx-qt-savestate { font-size: 11.5px; }

/* ---- rule editor (offer-rule-editor.js, also used on Offer Sets) ---- */
.bbx-ore .bbx-modal { width: min(620px, 100%); }
.bbx-ore-step { margin-bottom: 14px; }
.bbx-ore-step > .bbx-field-label { display: flex; align-items: center; gap: 7px; }
.bbx-ore-step > .bbx-field-label .n { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
    background: var(--bbx-accent-soft); color: var(--bbx-accent); font-size: 10px; letter-spacing: 0; }
.bbx-ore .bbx-qt-seg { flex-wrap: wrap; }
.bbx-ore-target { margin-top: 8px; }
.bbx-ore-target .select2-container { width: 100% !important; }
.bbx-ore-howgrid { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; align-items: end; }
.bbx-ore-howgrid .bbx-qt-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bbx-ore-value { position: relative; }
.bbx-ore-value .bbx-input { font-family: var(--bbx-mono); font-size: 15px; font-weight: 700; padding: 9px 30px 9px 12px; text-align: right; }
.bbx-ore-value .affix { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--bbx-muted); font-weight: 700;
    pointer-events: none; }
.bbx-ore-value .affix.pre { right: auto; left: 11px; }
.bbx-ore-value.has-pre .bbx-input { padding-left: 26px; padding-right: 12px; }
.bbx-ore-minrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bbx .bbx-ore-minrow .bbx-input { width: 90px; font-family: var(--bbx-mono); }
.bbx-ore-sentence { padding: 12px 14px; border-radius: var(--bbx-radius-sm); background: var(--bbx-accent-weak);
    border: 1px solid var(--bbx-accent-border); color: var(--bbx-accent-ink); font-size: 14px; font-weight: 650; line-height: 1.4; }
.bbx-ore-sentence small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--bbx-accent); margin-bottom: 3px; }
.bbx-ore-errors { margin: 10px 0 0; padding: 8px 10px 8px 26px; border-radius: var(--bbx-radius-sm); background: var(--bbx-crit-bg);
    color: var(--bbx-crit); font-size: 12px; font-weight: 600; }
.bbx-ore-errors:empty { display: none; }
@media (max-width: 575.98px) { .bbx-ore-howgrid { grid-template-columns: 1fr; } }

/* The theme styles every control under #page_layout by ID (uppercase 12px/800 labels, 40px inputs,
   6px corners), which outranks any class. Restated at the same weight for this screen's own
   controls; plain .bbx-input fields keep the house look every other screen has. */
#page_layout .bbx-qt label.bbx-qt-switch, #page_layout .bbx-qt label.bbx-qt-opt-row,
#page_layout .bbx-qt label.bbx-qt-pickall, #page_layout .bbx-qt label.bbx-qt-swatch {
    text-transform: none; letter-spacing: 0; margin-bottom: 0; font-size: 12.5px; }
#page_layout .bbx-qt label.bbx-qt-switch { color: var(--bbx-text-2); font-weight: 600; }
#page_layout .bbx-qt label.bbx-qt-opt-row { color: var(--bbx-text-2); font-weight: 500; }
#page_layout .bbx-qt label.bbx-qt-opt-row.is-on { color: var(--bbx-text); font-weight: 650; }
#page_layout .bbx-qt label.bbx-qt-pickall { color: var(--bbx-muted); font-weight: 500; }
#page_layout .bbx-qt label.bbx-field-label, #page_layout .bbx-qt label.bbx-qt-sortlabel {
    font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--bbx-muted); margin-bottom: 5px; }
#page_layout .bbx-qt .bbx-qt-fld-labelrow label.bbx-field-label { margin-bottom: 0; }
#page_layout .bbx-qt .bbx-qt-stepper input { min-height: 0; height: auto; border-radius: 0; border-top: 0; border-bottom: 0;
    border-color: var(--bbx-border); font-weight: 650; box-shadow: none; margin: 0; }
#page_layout .bbx-qt .bbx-qt-railsearch { min-height: 0; }
#page_layout .bbx-qt .bbx-qt-hexrow .bbx-input { min-height: 34px; }
.bbx-qt .bbx-qt-custwrap .select2-container--default .select2-selection { min-height: 40px; border-radius: 6px !important; }
.bbx-qt .bbx-qt-custwrap .select2-container--default .select2-selection__rendered { line-height: 38px; font-size: 13.5px;
    font-weight: 600; padding-left: 12px; }
.bbx-qt .bbx-qt-custwrap .select2-container--default .select2-selection__arrow { height: 38px; }
.bbx-ore .select2-container--default .select2-selection__rendered { font-size: 13.5px; font-weight: 600; }
#page_layout .bbx-qt .bbx-search input, #page_layout .bbx-qt .bbx-search input:focus { border: 0; box-shadow: none; min-height: 0; background: transparent; }
.bbx-qt .bbx-search:focus-within { border-color: var(--bbx-accent); }
#qtSaveSetModal .bbx-qt-help { margin: 0 0 14px; }

/* ---- document types: quotation · proforma · estimate · price list ---- */
.bbx-qt-typeseg { flex: none; }
.bbx-qt-typeseg button { padding: 5px 10px; }
.bbx-qt-bar.is-stuck .bbx-qt-typeseg { display: none; }
@media (max-width: 1399.98px) { .bbx-qt-typeseg button { padding: 5px 8px; font-size: 12px; } }
.bbx-qt-validity .bbx-qt-seg button { padding: 6px 8px; }
.bbx-qt-importbtn { flex: none; border-color: var(--bbx-accent-border); color: var(--bbx-accent); background: var(--bbx-accent-weak); }
.bbx-qt-importbtn:hover { border-color: var(--bbx-accent); color: var(--bbx-accent); background: var(--bbx-accent-soft); }
.bbx-qt-importbtn svg { width: 15px; height: 15px; }
.bbx-qt-importbtn .bbx-qt-opt { color: inherit; opacity: .7; }
@container (min-width: 720.02px) { .bbx-qt.is-pricelist .bbx-qt-row { grid-template-columns: 18px 48px minmax(0, 1fr) 132px 74px 104px; } }
@media (max-width: 1399.98px) {
    .bbx-qt-importbtn .bbx-qt-opt, .bbx-qt-importbtn .their { display: none; }
    .bbx .bbx-qt-search { flex-basis: 160px; }
    .bbx select.bbx-qt-sort { min-width: 128px; }
}
.bbx-qt-stepper input.is-blank { background: var(--bbx-warn-bg); }

/* price-list lines: the rate as it prints, its quantity breaks beneath */
.bbx-qt-line-rate { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin-top: 6px; }
.bbx-qt-line-rate .r { font-size: 13.5px; font-weight: 700; color: var(--bbx-text); font-variant-numeric: tabular-nums; letter-spacing: -.1px; }
.bbx-qt-line-rate.is-deal .r { color: var(--bbx-accent); }
.bbx-qt-line-rate.is-market .r { font-family: inherit; font-size: 12.5px; color: var(--bbx-mode-cost); }
.bbx-qt-line-rate .u { font-size: 11.5px; color: var(--bbx-muted); font-weight: 600; }
.bbx-qt-line-rate .bbx-qt-was { margin: 0 0 0 auto; }
.bbx-qt-tiers { list-style: none; margin: 4px 0 0; padding: 4px 0 0 8px; border-left: 2px solid var(--bbx-accent-border); }
.bbx-qt-tiers li { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--bbx-muted); line-height: 1.5; }
.bbx-qt-tiers b { font-weight: 650; color: var(--bbx-text-2); font-variant-numeric: tabular-nums; }
.bbx-qt-line.is-market .bbx-qt-thumb { opacity: .85; }
.bbx-qt-line-price .p.is-market { font-family: inherit; font-size: 12px; color: var(--bbx-mode-cost); }
.bbx-qt-line-price .amt.is-market { font-style: italic; }
.bbx-qt-chip.is-market { background: var(--bbx-mode-cost-bg); border-color: transparent; color: var(--bbx-mode-cost); }
.bbx-qt-chip.is-party { background: none; border-color: var(--bbx-border); color: var(--bbx-muted); font-weight: 600; max-width: 100%; }
/* A flex button cannot ellipsise its own text; the span can. */
.bbx-qt-chiptext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbx-qt-traynote, .bbx-qt-marketnote { font-size: 11.5px; color: var(--bbx-mode-cost); font-weight: 600; }
.bbx-qt-traynote { padding: 2px 0 4px; }
.bbx-qt-marketnote { margin-top: 4px; text-align: right; }

/* options for one of the party's items */
.bbx-qt-optset { margin: 8px 0 4px; padding: 0 0 0 10px; border-left: 2px solid var(--bbx-accent-border); }
.bbx-qt-opthead { padding: 6px 0 2px; font-size: 11.5px; color: var(--bbx-text-2); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbx-qt-opthead span { color: var(--bbx-muted); font-weight: 600; }
.bbx-qt-opthead em { font-style: normal; color: var(--bbx-faint); font-weight: 600; margin-left: 4px; }
.bbx-qt-optletter { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px; border-radius: 5px; vertical-align: 1px;
    background: var(--bbx-accent-soft); color: var(--bbx-accent); font-size: 10.5px; font-weight: 800; }

/* the counts a price list ends on */
/* One line, not three cards: on a short screen the cards left the tray room for a single line. */
.bbx-qt-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.bbx-qt-counts > div { padding: 0; }
.bbx-qt-counts b { font-family: var(--bbx-mono); font-size: 14px; font-weight: 700; color: var(--bbx-text); font-variant-numeric: tabular-nums; margin-right: 4px; }
.bbx-qt-counts span { font-size: 11px; font-weight: 600; color: var(--bbx-muted); }
.bbx-qt-counts .is-market b { color: var(--bbx-mode-cost); }
.bbx-qt-countnote { margin-top: 6px; font-size: 11.5px; color: var(--bbx-muted); }

/* a line's own menu */
.bbx-qt-lmnote { margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; }
.bbx-qt-lmfield { margin-top: 12px; }
.bbx-qt-lmfield .bbx-field-label { display: block; margin-bottom: 5px; }
.bbx-qt-pop .bbx-qt-pop-acts .grow { flex: 1; }

/* style: what prints */
.bbx-qt-showgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; margin: 0 -6px; }
.bbx-qt-seg-wrap button { white-space: normal; line-height: 1.25; }

/* terms */
.bbx-qt-termshead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bbx-qt-termshelp { margin: 2px 0 8px; }
.bbx-qt-terms { display: flex; flex-direction: column; gap: 4px; }
.bbx-qt-term { display: flex; align-items: flex-start; gap: 4px; padding: 3px 2px 3px 0; border-radius: 7px; border: 1px solid transparent; }
.bbx-qt-term.is-on { background: var(--bbx-accent-weak); border-color: var(--bbx-accent-border); }
.bbx-qt-term .bbx-qt-opt-row { flex: 1; min-width: 0; align-items: flex-start; }
.bbx-qt-term .bbx-qt-opt-row input { margin-top: 2px; }
.bbx-qt-term .bbx-qt-opt-row .nm { white-space: normal; overflow: visible; line-height: 1.4; }
.bbx-qt-termtag { display: inline-block; margin-left: 4px; font-size: 10.5px; font-weight: 700; color: var(--bbx-faint); }
.bbx-qt-termbtns { display: flex; flex: none; opacity: .55; }
.bbx-qt-term:hover .bbx-qt-termbtns, .bbx-qt-term:focus-within .bbx-qt-termbtns { opacity: 1; }
.bbx-qt-term.is-editing { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; border-color: var(--bbx-border); }
.bbx-qt-termacts { display: flex; justify-content: flex-end; gap: 6px; }
.bbx-qt-termadd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.bbx-qt-termadd .bbx-qt-opt-row { flex: 1; min-width: 0; margin-left: -6px; }
.bbx-qt-termsempty { padding: 10px 12px; border-radius: var(--bbx-radius-sm); border: 1px dashed var(--bbx-border-strong); font-size: 12px;
    color: var(--bbx-muted); line-height: 1.45; }

/* ---- import their list ---- */
.bbx-qt-import .bbx-modal { width: min(1180px, 100%); height: 90vh; max-height: none; }
.bbx-qt-import:not(.is-review) .bbx-modal { width: min(640px, 100%); height: auto; }
.bbx-qt-imphead { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.bbx-qt-imphead .bbx-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbx-qt-impbody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bbx-qt-import.is-review .bbx-qt-impbody { padding: 0; overflow: hidden; }
.bbx-qt-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 18px; margin: 0; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--bbx-border-strong); border-radius: var(--bbx-radius); background: var(--bbx-surface-2); transition: border-color .15s, background .15s; }
.bbx-qt-drop:hover, .bbx-qt-drop.is-over, .bbx-qt-drop:focus-within { border-color: var(--bbx-accent); background: var(--bbx-accent-weak); }
.bbx-qt-drop svg { width: 34px; height: 34px; color: var(--bbx-accent); margin-bottom: 4px; }
.bbx-qt-drop strong { font-size: 14px; color: var(--bbx-text); }
.bbx-qt-drop span { font-size: 12px; color: var(--bbx-muted); }
.bbx-qt-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bbx-qt-impsteps { margin: 16px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--bbx-text-2); line-height: 1.5; }
.bbx-qt-impsteps li + li { margin-top: 6px; }
.bbx-qt-impsteps b { color: var(--bbx-text); }
.bbx-qt-impbusy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 12px; text-align: center; }
.bbx-qt-impbusy strong { font-size: 14px; color: var(--bbx-text); }
.bbx-qt-imperr { margin-top: 12px; }
.bbx-qt-import.is-review .bbx-qt-imperr { margin: 10px 16px; }
.bbx-qt-impreview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bbx-qt-impbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--bbx-border);
    background: var(--bbx-surface); }
.bbx-qt-impbar .grow { flex: 1; }
.bbx-qt-impfilter button b { margin-left: 3px; font-family: var(--bbx-mono); font-weight: 700; color: var(--bbx-faint); font-variant-numeric: tabular-nums; }
.bbx-qt-impfilter button b.is-look { color: var(--bbx-warn); }
.bbx-qt-impfilter button.active b { color: inherit; }
.bbx-qt-imphead-row, .bbx-qt-improw { display: grid; align-items: center; column-gap: 12px;
    grid-template-columns: 34px minmax(150px, 1fr) 14px minmax(230px, 1.35fr) minmax(190px, 230px) 118px; }
.bbx-qt-imphead-row { padding: 7px 16px; border-bottom: 1px solid var(--bbx-border); background: var(--bbx-surface-2);
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--bbx-muted); }
.bbx-qt-improws { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.bbx-qt-improw { padding: 8px 16px; border-bottom: 1px solid var(--bbx-border); box-shadow: inset 3px 0 0 transparent; }
.bbx-qt-improw.is-use { box-shadow: inset 3px 0 0 var(--bbx-ok); }
.bbx-qt-improw.is-look, .bbx-qt-improw.is-none { box-shadow: inset 3px 0 0 var(--bbx-warn-line); background: var(--bbx-warn-bg); }
.bbx-qt-improw.is-skip { opacity: .55; }
.bbx-qt-improw.is-skip:hover { opacity: .85; }
.bbx-qt-impn { font-family: var(--bbx-mono); font-size: 11.5px; color: var(--bbx-faint); font-variant-numeric: tabular-nums; }
.bbx-qt-impthey { min-width: 0; }
.bbx-qt-impthey .lbl { font-size: 12.5px; font-weight: 650; color: var(--bbx-text); line-height: 1.3; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bbx-qt-impthey .meta { font-size: 11px; color: var(--bbx-muted); margin-top: 1px; text-transform: none; }
.bbx-qt-impthey .meta:empty { display: none; }
.bbx-qt-imparrow { color: var(--bbx-faint); font-size: 13px; }
.bbx-qt-impcol { min-width: 0; }
.bbx-qt-impours { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bbx-qt-impours.is-none { font-size: 12px; color: var(--bbx-warn); font-weight: 600; gap: 8px; flex-wrap: wrap; }
.bbx-qt-impprod { flex: 1; min-width: 0; }
.bbx-qt-impprod .nm { font-size: 12.5px; font-weight: 650; color: var(--bbx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbx-qt-impprod .meta { font-size: 11px; color: var(--bbx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbx-qt-score { flex: none; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--bbx-surface-2); color: var(--bbx-muted); border: 1px solid var(--bbx-border); }
.bbx-qt-score.hi { background: var(--bbx-ok-bg); color: var(--bbx-ok); border-color: transparent; }
.bbx-qt-score.mid { background: var(--bbx-warn-bg); color: var(--bbx-warn); border-color: var(--bbx-warn-line); }
.bbx-qt-score.lo { background: var(--bbx-crit-bg); color: var(--bbx-crit); border-color: transparent; }
.bbx-qt-impalts { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 0 48px; }
.bbx-qt-impalt { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 1px 4px 1px 8px; border-radius: 99px; font-size: 11px;
    background: var(--bbx-accent-soft); border: 1px solid var(--bbx-accent-border); color: var(--bbx-accent-ink); overflow: hidden; white-space: nowrap; }
.bbx-qt-impalt b { color: var(--bbx-accent); }
.bbx-qt-impalt button { appearance: none; border: 0; background: none; padding: 0 3px; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; }
.bbx-qt-impdup { margin: 4px 0 0 48px; font-size: 11px; color: var(--bbx-muted); font-style: italic; }
.bbx-qt-imppick { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.bbx .bbx-qt-imppick select.bbx-qt-impchoose { width: 100%; padding: 5px 8px; font-size: 12px; min-height: 0; }
.bbx-qt-impsearch { width: 100%; }
.bbx-qt-impsearch .select2-container { width: 100% !important; }
.bbx-qt-impstate { justify-self: end; }
.bbx-qt-impstate button { display: inline-flex; align-items: center; gap: 4px; }
.bbx-qt-impstate button svg { width: 11px; height: 11px; }
.bbx-qt-improw.is-use .bbx-qt-impstate [data-imp="use"] { color: var(--bbx-ok); }
.bbx-qt-improw.is-look .bbx-qt-impstate [data-imp="use"] { color: var(--bbx-accent); }
.bbx-qt-impsection { padding: 12px 16px 5px 62px; border-bottom: 1px solid var(--bbx-border); background: var(--bbx-surface-2);
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--bbx-text-2); }
.bbx-qt-impfoot { flex: 1; min-width: 0; font-size: 12.5px; }
.bbx-qt-impfoot b { font-family: var(--bbx-mono); color: var(--bbx-text); font-variant-numeric: tabular-nums; }
.bbx-qt-impfoot b.is-look { color: var(--bbx-warn); }
.bbx-qt-impfoot .sub { display: block; font-size: 11.5px; color: var(--bbx-muted); }
.bbx-qt-impopt b { display: block; font-size: 12.5px; font-weight: 650; }
.bbx-qt-impopt span { display: block; font-size: 11px; opacity: .75; }
@media (max-width: 991.98px) {
    .bbx-qt-imphead-row { display: none; }
    .bbx-qt-improw { grid-template-columns: 28px minmax(0, 1fr); row-gap: 6px; }
    .bbx-qt-improw .bbx-qt-imparrow { display: none; }
    .bbx-qt-improw > .bbx-qt-impcol, .bbx-qt-improw > .bbx-qt-imppick, .bbx-qt-improw > .bbx-qt-impstate { grid-column: 2; }
    .bbx-qt-impstate { justify-self: start; }
}
#page_layout .bbx-qt .bbx-qt-imppick select.bbx-qt-impchoose { min-height: 30px; height: 30px; font-size: 12px; font-weight: 600; text-transform: none; }
#page_layout .bbx-qt label.bbx-qt-drop { display: flex; width: 100%; text-transform: none; letter-spacing: 0; font-size: 12.5px; margin: 0; }
#page_layout .bbx-qt label.bbx-qt-drop span { font-weight: 500; }
#page_layout .bbx-qt .bbx-qt-lmfield label.bbx-field-label { margin-bottom: 5px; }
.bbx-qt-line-foot:empty { display: none; }
.bbx-qt-impthey .meta .rate { color: var(--bbx-text-2); font-style: italic; }
.bbx-qt-impmarket { display: inline-block; padding: 0 6px; border-radius: 99px; font-size: 10px; font-weight: 700;
    background: var(--bbx-mode-cost-bg); color: var(--bbx-mode-cost); }

/* ---- the tray by keyboard, and full screen ---- */
.bbx-qt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bbx-qt-focusbtn { flex: none; display: inline-flex; align-items: center; gap: 5px; margin: 6px 8px 6px 0; padding: 0 9px; border-radius: 8px;
    border: 1px solid var(--bbx-border); background: var(--bbx-surface); color: var(--bbx-text-2); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.bbx-qt-focusbtn:hover { border-color: var(--bbx-accent); color: var(--bbx-accent); }
.bbx-qt-focusbtn svg { width: 13px; height: 13px; }
.bbx-qt-focusbtn .close, .bbx-qt.is-trayfocus .bbx-qt-focusbtn .open { display: none; }
.bbx-qt.is-trayfocus .bbx-qt-focusbtn .close { display: inline; }
@media (max-width: 1399.98px) { .bbx-qt:not(.is-trayfocus) .bbx-qt-focusbtn .lbl { display: none; } }

/* the current line: where the keys act */
/* every line is inset alike, so the focus bar never shifts the layout */
.bbx-qt-line[data-act="line"] { outline: none; padding-left: 8px; margin-left: -8px; scroll-margin: 56px 0 160px; }
.bbx-qt-line:focus-within { box-shadow: inset 3px 0 0 var(--bbx-accent); background: var(--bbx-row-band); }
.bbx-qt-line:focus-visible { box-shadow: inset 3px 0 0 var(--bbx-accent), 0 0 0 2px var(--bbx-accent); border-radius: 6px; }
.bbx-qt-line.is-block:focus-within { box-shadow: inset 3px 0 0 var(--bbx-crit); }
.bbx-qt-line.is-arming { background: var(--bbx-crit-bg, var(--bbx-row-band)); box-shadow: inset 3px 0 0 var(--bbx-crit); }
.bbx-qt-line.is-arming .bbx-qt-line-name::after { content: ' — press Delete again to remove'; font-weight: 600; color: var(--bbx-crit); }

/* "% off MRP" with no MRP yet */
.bbx-qt-line-price .p.is-awaits { font-family: inherit; font-size: 12.5px; color: var(--bbx-accent); }
.bbx-qt-line-price .amt.is-awaits, .bbx-qt-line-rate .u.is-awaits { font-style: italic; color: var(--bbx-muted); }

/* full screen: the same panel over the page */
.bbx-qt-focusback { position: fixed; inset: 0; z-index: 3090; background: rgba(8, 16, 12, .44); }
html.bbx-qt-noscroll { overflow: hidden; }
/* The panel never scrolls: head and totals stay put, only the line list (the panes) scrolls. */
.bbx .bbx-qt.is-trayfocus .bbx-qt-side, .bbx-qt.is-trayfocus .bbx-qt-side { position: fixed; top: 20px; bottom: 20px; left: max(20px, 4vw); right: max(20px, 4vw);
    max-height: none; overflow: hidden; z-index: 3100; box-shadow: var(--bbx-shadow-pop); }
.bbx-qt.is-trayfocus .bbx-qt-sidecard { height: 100%; min-height: 0; }
.bbx-qt.is-trayfocus .bbx-qt-sidehead { position: static; flex: none; }
.bbx-qt.is-trayfocus .bbx-qt-panes { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.bbx-qt.is-trayfocus .bbx-qt-sidefoot { position: static; flex: none; max-height: 45vh; overflow-y: auto; }
.bbx-qt.is-trayfocus .bbx-qt-panes .bbx-sidepane { padding: 6px 24px 18px; }
.bbx-qt.is-trayfocus .bbx-qt-totals { padding: 14px 24px 16px; }
@media (max-width: 767.98px) { .bbx-qt.is-trayfocus .bbx-qt-side { top: 8px; bottom: 8px; left: 8px; right: 8px; } }
@media (min-width: 900px) {
    .bbx-qt.is-trayfocus .bbx-qt-line { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; padding-top: 12px; padding-bottom: 12px; }
    .bbx-qt.is-trayfocus .bbx-qt-line-body { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(250px, auto) minmax(0, 1.8fr);
        grid-template-areas: "top mid foot" "sub tiers foot"; column-gap: 24px; row-gap: 2px; align-items: center; }
    .bbx-qt.is-trayfocus .bbx-qt-line-top { grid-area: top; }
    .bbx-qt.is-trayfocus .bbx-qt-line-sub { grid-area: sub; }
    .bbx-qt.is-trayfocus .bbx-qt-line-mid, .bbx-qt.is-trayfocus .bbx-qt-line-rate { grid-area: mid; margin-top: 0; }
    .bbx-qt.is-trayfocus .bbx-qt-tiers { grid-area: tiers; }
    .bbx-qt.is-trayfocus .bbx-qt-line-foot { grid-area: foot; margin-top: 0; }
    .bbx-qt.is-trayfocus .bbx-qt-line-name { font-size: 13.5px; }
    .bbx-qt.is-trayfocus .bbx-qt-line-sub { font-size: 12px; }
    .bbx-qt.is-trayfocus .bbx-qt-line-mid { gap: 18px; }
    .bbx-qt.is-trayfocus .bbx-qt-line-qty .bbx-qt-stepper { height: 30px; }
    .bbx-qt.is-trayfocus .bbx-qt-line-qty .bbx-qt-stepper input { width: 56px; font-size: 13px; }
    .bbx-qt.is-trayfocus .bbx-qt-line-price .p { font-size: 14px; }
    .bbx-qt.is-trayfocus .bbx-qt-chip { max-width: 240px; }
}

/* the tray's keys, pinned above the totals while the Tray tab is open: a short set beside the page,
   everything in full screen (the page keybar sits behind the panel there) */
.bbx-qt-traykeys { padding: 7px 16px 6px; border-bottom: 1px dashed var(--bbx-border); font-size: 11px; line-height: 1.5; color: var(--bbx-muted); }
.bbx-qt-traykeys .grp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.bbx-qt-traykeys .grp + .grp { margin-top: 4px; }
.bbx-qt-traykeys .grp > span { white-space: nowrap; }
.bbx-qt-traykeys .lab { font-weight: 700; letter-spacing: .4px; text-transform: uppercase; font-size: 10px; color: var(--bbx-faint); }
.bbx-qt-traykeys .bbx-kbd { min-width: 0; padding: 0 4px; margin-right: 2px; font-size: 10px; line-height: 1.5; }
.bbx-qt-traykeys .full, .bbx-qt-traykeys .alt { display: none; }
.bbx-qt.is-pricelist .bbx-qt-traykeys .qty-only, .bbx-qt:not(.is-pricelist) .bbx-qt-traykeys .pl-only { display: none !important; }
.bbx-qt:not([data-tab="tray"]) .bbx-qt-traykeys { display: none; }
.bbx-qt.is-trayfocus .bbx-qt-traykeys { padding: 10px 24px 8px; font-size: 12px; }
.bbx-qt.is-trayfocus .bbx-qt-traykeys .full, .bbx-qt.is-trayfocus .bbx-qt-traykeys .alt { display: inline; }
.bbx-qt.is-trayfocus .bbx-qt-traykeys .grp.full { display: flex; }
.bbx-qt.is-trayfocus .bbx-qt-traykeys .page { display: none; }
.bbx-qt.is-trayfocus .bbx-qt-traykeys .bbx-kbd { font-size: 11px; }
@media (max-width: 767.98px) { .bbx-qt-traykeys { display: none; } }

/* the shortcut sheet */
.bbx-qt-keys h4 { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--bbx-muted); }
.bbx-qt-keys h4:first-child { margin-top: 0; }
.bbx-qt-keys dl { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 6px 14px; margin: 0; font-size: 12.5px; }
.bbx-qt-keys dt { white-space: nowrap; color: var(--bbx-text-2); }
.bbx-qt-keys dd { margin: 0; color: var(--bbx-text); }
.bbx-qt-keys .bbx-note { margin: 12px 0 0; }