/* ============================================================================
   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;
    --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 7 steps to clear AA on all three light grounds
       (4.54 / 4.72 / 4.86) without a perceptible change in the palette. */
    --bbx-muted: #65756E;
    --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;

    /* 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;
        --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);
    }
}

/* explicit toggle wins over the media query, both directions */
:root[data-theme="light"] {
    --bbx-bg: #F5F8F6; --bbx-surface: #FFFFFF; --bbx-surface-2: #FBFCFB; --bbx-border: #E4EAE7; --bbx-border-strong: #D3DCD8;
    /* keep --bbx-muted in sync with the :root default above (AA fix, was #6C7C75) — the no-flash
       init always stamps data-theme, so THIS block is the one that actually applies in the app. */
    --bbx-text: #15201B; --bbx-text-2: #43524C; --bbx-muted: #65756E; --bbx-faint: #93A199;
    --bbx-accent: #1C6B4C; --bbx-accent-hover: #175A40; --bbx-accent-weak: #E7F1EC; --bbx-accent-ink: #0F3D2C;
    --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-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);
}

/* ============================================================================
   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);
}

: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; }
.bbx-head-actions { display: flex; gap: 9px; flex: none; align-items: center; }

/* 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); }
.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-surface-2); 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-surface-2); }
.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-surface-2); }
.bbx-table tbody tr.calc-row:hover td { background: var(--bbx-surface-2); }
.bbx-table tbody tr.total-row td { font-weight: 700; color: var(--bbx-text); }

/* 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-surface-2); 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, rgba(46, 125, 80, .12)); border: 1px solid var(--bbx-accent-border, rgba(46, 125, 80, .28)); }
.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. */
.bbx-modal { 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); }

/* ============================================================================
   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; }
.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-surface-2); 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-surface-2); }
#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; }