/* =====================================================================================================
   BULLY BLAST EMPLOYEE PORTAL - DESIGN SYSTEM (Build 278)

   Visual authority: the approved unified prototype (Build 263, native app). Values below are taken from
   its tokens.css and from the prototype's COMPUTED styles as rendered (which include the later QA
   corrections its view host applies), not from the older standalone page files.

   Layers:  1 fonts   2 tokens (light, dark)   3 base   4 shell   5 primitives   6 responsive
   Every primitive reads tokens only, so both themes apply to all of them without per-page rules.
   ===================================================================================================== */

/* ---------------------------------------------------------------- 1 FONTS (bundled; never fetched from a third party) */
@font-face { font-family: 'Anton'; src: url('fonts/anton-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- 2 TOKENS: LIGHT (default) */
:root {
	--font-display: 'Anton', 'Arial Narrow', sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--sidebar-w: 240px;
	--topbar-h: 56px;
	--radius: 8px;                 /* visual build 301-V: cards, panels, lists and tables (was 0px, the Build 227 square-corner direction) */
	--r-control: 6px;              /* visual build 301-V: buttons, form fields, icon buttons, navigation items */
	--pill: 999px;                 /* status badges and filter chips keep their pill shape */
	/* visual build 301-V: one 8px-based spacing scale */
	--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
	--bb-ribbon-h: 0px;            /* height of the SANDBOX ribbon when one is drawn (sandbox only) */

	--t-page: #f5f6f8;
	--t-content: #faf9f5;
	--t-surface: #ffffff;
	--t-surface-2: #fbfaf6;
	--t-surface-3: #f4f3ee;
	--t-sunken: rgba(20, 20, 22, .045);
	--t-text: #1c1c1e;
	--t-text-2: #3a3a38;
	--t-text-muted: #6c6c66;
	--t-text-invert: #ffffff;
	--t-border: rgba(20, 20, 22, .10);            /* visual build 301-V: lighter (was .12) */
	--t-border-card: rgba(20, 20, 22, .10);       /* visual build 301-V: lighter (was .14) */
	--t-border-strong: rgba(20, 20, 22, .28);
	--t-field-bd: rgba(20, 20, 22, .24);
	--t-field-bd-hover: rgba(20, 20, 22, .42);
	--t-input: #ffffff;
	--t-thead: #f4f3ee;
	--t-row-hover: rgba(243, 234, 34, .10);
	--t-shadow: rgba(20, 20, 22, .05);
	--t-card-shadow: 0 1px 2px rgba(20, 20, 22, .05), 0 2px 8px rgba(20, 20, 22, .05);   /* visual build 301-V: lighter, one family for every card */
	--t-soft-shadow: 0 1px 2px rgba(20, 20, 22, .05);
	--t-accent-soft: #fdf9c8;      /* visual build 301-V: icon tiles and quiet highlights */
	--t-accent: #f3ea22;
	--t-accent-ink: #1c1c1e;
	--t-accent-glow: rgba(243, 234, 34, .30);
	--t-sidebar: #141416;
	--t-on-dark: rgba(255, 255, 255, .72);
	--t-on-dark-dim: rgba(255, 255, 255, .55);
	--t-on-dark-line: rgba(255, 255, 255, .12);
	--t-nav-text: #cfd3da;
	--t-nav-sub: #aeb3bc;
	--t-focus: #b58900;

	/* status families: same meaning in every module */
	/* amber and green text are 4% and 2% darker than the prototype's #8a6d12 / #37792a, which give 4.32:1 and
	   4.41:1 on their pills - below WCAG AA (4.5:1) for this small text. Now 4.65:1; the look is unchanged. */
	--t-act-bg: #fbf0cf;  --t-act-tx: #846811;   /* needs action (amber) */
	--t-prog-bg: #dce7f4; --t-prog-tx: #2f5d8c;  /* in progress (blue) */
	--t-wait-bg: #dcefd2; --t-wait-tx: #357528;  /* waiting / done (green) */
	--t-bad-bg: #f7dcd6;  --t-bad-tx: #a3341f;   /* flagged (red) */
	--t-info-bg: #d6efeb; --t-info-tx: #1f7069;
	color-scheme: light;
}

/* ---------------------------------------------------------------- 2 TOKENS: DARK (the prototype's dark palette) */
:root[data-theme="dark"] {
	--t-page: #131315;
	--t-content: #191919;
	--t-surface: #25252a;
	--t-surface-2: #2b2b31;
	--t-surface-3: #313138;
	--t-sunken: rgba(255, 255, 255, .045);
	--t-text: #f2f1ea;
	--t-text-2: #cfcec6;
	--t-text-muted: #9a9a93;
	--t-text-invert: #1c1c1e;
	--t-border: rgba(255, 255, 255, .13);
	--t-border-card: rgba(255, 255, 255, .13);
	--t-border-strong: rgba(255, 255, 255, .30);
	--t-field-bd: rgba(255, 255, 255, .26);
	--t-field-bd-hover: rgba(255, 255, 255, .44);
	--t-input: #1b1b1f;
	--t-thead: #232327;
	--t-row-hover: rgba(243, 234, 34, .09);
	--t-shadow: rgba(0, 0, 0, .45);
	--t-card-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .22);
	--t-soft-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	--t-accent-soft: rgba(243, 234, 34, .14);
	--t-accent-glow: rgba(243, 234, 34, .18);
	--t-sidebar: #0f0f11;
	--t-on-dark: rgba(255, 255, 255, .78);
	--t-on-dark-dim: rgba(255, 255, 255, .58);
	--t-on-dark-line: rgba(255, 255, 255, .14);
	--t-focus: #f3ea22;
	--t-act-bg: rgba(243, 208, 60, .16); --t-act-tx: #e8c65a;
	--t-prog-bg: rgba(94, 150, 214, .18); --t-prog-tx: #8fbdea;
	--t-wait-bg: rgba(96, 176, 86, .18); --t-wait-tx: #8ed07f;
	--t-bad-bg: rgba(211, 86, 62, .20);  --t-bad-tx: #f0937c;
	--t-info-bg: #16302e; --t-info-tx: #5fc8bd;
	color-scheme: dark;
}

/* ---------------------------------------------------------------- 3 BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.bb-portal { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--t-text); background: var(--t-page); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* zero specificity, so every component's own link colour wins (Log out, Back, navigation) */
:where(.bb-portal) a { color: inherit; }
.bb-portal :focus-visible { outline: 2px solid var(--t-focus); outline-offset: 2px; }
.bb-portal h1, .bb-portal h2, .bb-portal h3 { margin: 0; font-weight: 400; }
.bb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bb-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--t-surface); color: var(--t-text); padding: 8px 12px; border: 1px solid var(--t-border-strong); }
.bb-skip:focus { left: 8px; }
.bb-mono { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.bb-muted { color: var(--t-text-muted); }

/* ---------------------------------------------------------------- 4 SHELL */
.bb-app { min-height: 100vh; }
.bb-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 45; width: var(--sidebar-w); display: flex; flex-direction: column; background: var(--t-sidebar); color: var(--t-nav-text); }
.bb-side__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px 16px; border-bottom: 1px solid var(--t-on-dark-line); text-decoration: none; }
.bb-side__brand img { display: block; width: 100%; max-width: 168px; height: auto; }
.bb-side__tag { font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--t-on-dark-dim); }
.bb-side__nav { flex: 1; overflow-y: auto; padding: 6px 10px; }
.bb-nav { list-style: none; margin: 0; padding: 0; }
.bb-nav__link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin-bottom: 2px; border-left: 3px solid transparent; border-radius: var(--radius); color: var(--t-nav-text); font-size: 13.5px; font-weight: 600; line-height: 20px; text-decoration: none; }
.bb-nav__link svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bb-nav__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.bb-nav__link.is-active { background: var(--t-accent); border-left-color: var(--t-accent); color: var(--t-accent-ink); }
.bb-nav__sub { list-style: none; margin: 2px 0 8px 6px; padding: 0 0 0 8px; border-left: 1px solid var(--t-on-dark-line); }
.bb-nav__sub a { display: block; padding: 6px 10px; border-radius: var(--radius); color: var(--t-nav-sub); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.bb-nav__sub a:hover { color: #fff; }
.bb-nav__sub a.is-active { color: var(--t-accent); }
.bb-side__foot { padding: 12px 18px 16px; border-top: 1px solid var(--t-on-dark-line); font-size: 12.5px; }
.bb-side__who { font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.bb-side__role { color: var(--t-on-dark-dim); font-size: 12px; }
.bb-side__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.bb-signout { display: inline-block; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius); color: var(--t-accent); font-size: 12px; font-weight: 600; letter-spacing: .72px; text-transform: uppercase; text-decoration: none; }
.bb-signout:hover { background: rgba(255, 255, 255, .08); }
.bb-side__admin { color: var(--t-on-dark-dim); font-size: 11.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bb-side__admin:hover { color: #fff; }

.bb-work { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; background: var(--t-content); }
.bb-top { position: sticky; top: 0; z-index: 35; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 22px; background: var(--t-surface); border-bottom: 1px solid var(--t-border); }
.bb-top__title { font-size: 16px; line-height: 1.25; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bb-top__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.bb-top__who { font-size: 12.5px; text-align: right; line-height: 1.25; }
.bb-top__who b { display: block; }
.bb-top__who span { color: var(--t-text-muted); }
.bb-hb { display: none; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--t-border); background: var(--t-surface); color: var(--t-text); border-radius: var(--radius); font-size: 18px; line-height: 1; text-decoration: none; }
.bb-scrim { display: none; }
.bb-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; padding: 2px 6px 3px; border: 1px solid var(--t-border); border-radius: var(--radius); background: var(--t-surface-3); color: var(--t-text); cursor: pointer; }
.bb-iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bb-iconbtn:hover { background: var(--t-surface-2); border-color: var(--t-border-strong); }
.bb-iconbtn:active { transform: translateY(1px); }
.bb-themeform { margin: 0; display: inline-flex; }
.bb-main { flex: 1; width: 100%; max-width: 1480px; padding: 22px 22px 48px; }
.bb-main:focus { outline: none; }

/* ---------------------------------------------------------------- 5 PRIMITIVES */
/* page header */
.bb-pagehead { margin: 0 0 18px; }
.bb-back { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--t-text-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.bb-back:hover { color: var(--t-text); }
.bb-title { font-family: var(--font-display); font-size: 32px; line-height: 1.5; letter-spacing: .4px; text-transform: uppercase; color: var(--t-text); overflow-wrap: anywhere; }
.bb-title--record { font-size: 30px; line-height: 1.5; letter-spacing: .3px; text-transform: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.bb-title__ref { color: var(--t-text-muted); }
.bb-lede { margin: 4px 0 0; color: var(--t-text-muted); font-size: 16px; line-height: 1.25; }
.bb-lede b { color: var(--t-text); font-weight: 700; }
/* list pages: the prototype's slightly smaller title and summary line */
.bb-pagehead--list .bb-title { font-size: 30.4px; line-height: 1; letter-spacing: .3px; }
.bb-pagehead--list .bb-lede { margin-top: 8px; font-size: 13.5px; line-height: 1.45; }
.bb-section { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 22px 0 12px; }
.bb-section h2 { font-family: var(--font-display); font-size: 16.8px; line-height: 1.15; letter-spacing: .34px; text-transform: uppercase; }
.bb-section span { color: var(--t-text-muted); font-size: 13px; }

/* panel (card with a header bar) */
.bb-panel { background: var(--t-surface); border: 1px solid var(--t-border-card); border-radius: var(--radius); box-shadow: 0 1px 2px var(--t-shadow); margin: 0 0 16px; min-width: 0; }
.bb-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 16px 20px; border-bottom: 1px solid var(--t-border); }
.bb-panel__head h2 { font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.bb-panel__note { margin-left: auto; color: var(--t-text-muted); font-size: 12px; font-weight: 600; }
.bb-kick { margin-left: auto; color: var(--t-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.bb-panel__body { padding: 16px 20px; }
.bb-panel__foot { padding: 0 20px 16px; color: var(--t-text-muted); font-size: 12.5px; }

/* fact grid (Order summary cells) */
.bb-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--t-border); }
.bb-fact { background: var(--t-surface); padding: 14px 20px; min-width: 0; }
.bb-fact--wide { grid-column: span 2; }
.bb-fact--full { grid-column: 1 / -1; }
.bb-fact__label { margin: 0 0 5px; color: var(--t-text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.bb-fact__value { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.bb-fact__value small { display: block; margin-top: 2px; color: var(--t-text-muted); font-size: 12.5px; font-weight: 500; }
.bb-fact__value.is-absent { color: var(--t-text-muted); font-weight: 500; }

/* label / value rows (Payment, Record) */
.bb-rows { margin: 0; }
.bb-rows > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--t-border); font-size: 13px; }
.bb-rows > div:first-child { border-top: 0; }
.bb-rows dt { color: var(--t-text-muted); }
.bb-rows dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.bb-rows dt { min-width: 0; }
/* stacked: label above value, for long text (Storefront content) */
.bb-rows--stack > div { display: block; padding: 12px 0; }
.bb-rows--stack dt { margin-bottom: 4px; color: var(--t-text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.bb-rows--stack dd { text-align: left; font-size: 14px; font-weight: 500; }

/* stat (module cards) */
.bb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin: 12px 0 16px; }
.bb-stat__label { color: var(--t-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.bb-stat__value { font-family: var(--font-display); font-size: 20px; line-height: 22px; letter-spacing: .2px; }
.bb-stat__value--act { color: var(--t-act-tx); }
.bb-stat__value--wait { color: var(--t-wait-tx); }
.bb-stat__value--bad { color: var(--t-bad-tx); }

/* pills (status) and tags (kind) */
.bb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--font-body); border: 1px solid rgba(20, 20, 22, .14); border-radius: var(--pill); font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: .44px; text-transform: uppercase; white-space: nowrap; }
.bb-pill--lg { padding: 6px 12px; }
/* the record-level form: sentence case with a status dot (prototype order header and summary) */
.bb-pill--dot { text-transform: none; letter-spacing: .2px; }
.bb-pill--dot.bb-pill--caps { text-transform: uppercase; letter-spacing: .44px; }
.bb-pill--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bb-pill--act { background: var(--t-act-bg); color: var(--t-act-tx); }
.bb-pill--prog { background: var(--t-prog-bg); color: var(--t-prog-tx); }
.bb-pill--wait { background: var(--t-wait-bg); color: var(--t-wait-tx); }
.bb-pill--bad { background: var(--t-bad-bg); color: var(--t-bad-tx); }
.bb-pill--neutral { background: var(--t-surface-3); color: var(--t-text-2); }
.bb-pill--sandbox { background: var(--t-act-bg); color: var(--t-act-tx); border-style: dashed; }
.bb-pill--live { background: var(--t-wait-bg); color: var(--t-wait-tx); }
:root[data-theme="dark"] .bb-pill { border-color: rgba(255, 255, 255, .14); }
.bb-tag { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--t-border); border-radius: var(--pill); background: var(--t-surface-3); color: var(--t-text-2); font-size: 9.92px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }

/* buttons: primary (yellow), secondary (bordered), ghost (text) */
.bb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--t-border-strong); border-radius: var(--radius); background: var(--t-surface-3); color: var(--t-text); font-family: var(--font-body); font-size: 13px; font-weight: 800; line-height: 18px; letter-spacing: .2px; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px var(--t-shadow); cursor: pointer; }
.bb-btn:hover { border-color: var(--t-field-bd-hover); background: var(--t-surface-2); }
.bb-btn--primary { background: var(--t-accent); border-color: rgba(20, 20, 22, .22); color: var(--t-accent-ink); box-shadow: 0 1px 2px rgba(20, 20, 22, .10), 0 3px 10px var(--t-accent-glow); }
.bb-btn--primary:hover { background: #e9df12; border-color: rgba(20, 20, 22, .4); }
.bb-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.bb-btn--ghost:hover { background: var(--t-sunken); border-color: transparent; }
.bb-btn--sm { padding: 7px 12px; font-size: 12px; line-height: 16px; }
.bb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* module card (Dashboard) */
.bb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bb-modcard { display: flex; flex-direction: column; padding: 18px 20px; background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--radius); box-shadow: var(--t-card-shadow); min-width: 0; }
.bb-modcard__title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 16px; font-weight: 400; letter-spacing: .4px; text-transform: uppercase; }
.bb-modcard__title svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bb-modcard .bb-actions { margin-top: auto; }

/* toolbar: search + sort + filter chips + legend. A layout primitive: a module renders a control here
   ONLY when that control works. Build 278 renders none on the Active page. */
.bb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.bb-toolbar__search { position: relative; flex: 1 1 320px; min-width: 0; }
.bb-toolbar__search svg { position: absolute; left: 12px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); fill: none; stroke: var(--t-text-muted); stroke-width: 1.8; }
.bb-field { width: 100%; height: 40px; padding: 9px 12px; border: 1px solid var(--t-field-bd); border-radius: var(--radius); background: var(--t-input); color: var(--t-text); font: 600 13.5px/1.2 var(--font-body); box-shadow: 0 1px 2px var(--t-shadow); }
.bb-field:hover { border-color: var(--t-field-bd-hover); }
.bb-toolbar__search .bb-field { padding-left: 36px; font-weight: 400; }
.bb-toolbar__sort { display: flex; align-items: center; gap: 8px; color: var(--t-text-muted); font-size: 12.8px; font-weight: 600; }
.bb-toolbar__sort .bb-field { width: auto; min-width: 196px; }
.bb-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.bb-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--t-border); border-radius: var(--pill); background: var(--t-surface); color: var(--t-text); font: 700 12.16px/1.2 var(--font-body); text-decoration: none; cursor: pointer; }
.bb-chip.is-on { background: #141416; border-color: #141416; color: rgba(255, 255, 255, .72); }
.bb-chip__n { padding: 0 7px; border-radius: var(--pill); background: var(--t-sunken); font-size: 10.88px; }
.bb-chip.is-on .bb-chip__n { background: rgba(255, 255, 255, .22); }
.bb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; width: 100%; color: var(--t-text-muted); font-size: 11.84px; }
.bb-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }

/* record list (the Active orders list): a header row and record rows on a shared column template */
.bb-list { background: var(--t-surface); border: 1px solid var(--t-border-card); border-radius: var(--radius); box-shadow: 0 1px 2px var(--t-shadow); overflow-x: auto; }   /* a list never widens the page; at worst it scrolls inside itself */
.bb-list__row { display: grid; grid-template-columns: var(--bb-cols, minmax(150px, 1.2fr) minmax(140px, 1.3fr) 110px 90px minmax(150px, 1.1fr) 110px auto); align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--t-border); border-left: 4px solid transparent; }
.bb-list__row:last-child { border-bottom: 0; }
.bb-list__row--head { padding: 11px 18px; background: var(--t-thead); color: var(--t-text); font-size: 10.56px; font-weight: 800; letter-spacing: 1.056px; text-transform: uppercase; }
.bb-list__row--rec:hover { background: var(--t-row-hover); }
.bb-list__cell { min-width: 0; }
.bb-list__cell--num { text-align: right; font-variant-numeric: tabular-nums; }
.bb-list__title { display: block; font-size: 15.68px; font-weight: 800; white-space: nowrap; color: var(--t-text); text-decoration: none; }
.bb-list__sub { display: block; color: var(--t-text-muted); font-size: 12.5px; }
.bb-list__strong { font-size: 15.04px; font-weight: 600; }
.bb-list__items { font-size: 14.4px; font-weight: 600; }
.bb-list__label { display: none; }
.bb-list__end { justify-self: end; }
.bb-list__tags { display: grid; justify-items: start; gap: 4px; }

/* catalog list (Products): image, product, SKU, channel, retail, dealer, catalog/storefront, View */
.bb-list--catalog .bb-list__row { --bb-cols: 52px minmax(190px, 1.9fr) minmax(100px, .9fr) 92px 86px 86px minmax(170px, 1.2fr) auto; }
.bb-list__thumb { width: 40px; height: 40px; border: 1px solid var(--t-border); background: var(--t-surface-3); object-fit: cover; display: flex; align-items: center; justify-content: center; color: var(--t-text-muted); font-family: var(--font-display); font-size: 15px; }
.bb-list__thumb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bb-list__foot { padding: 12px 18px; border-top: 1px solid var(--t-border); color: var(--t-text-muted); font-size: 13px; }
.bb-mono-cell { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }

/* page header with actions on the right (prototype Products overview / catalog) */
.bb-pagehead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.bb-pagehead__text { min-width: 0; max-width: 760px; }
.bb-eyebrow { margin: 0 0 2px; color: var(--t-text-muted); font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.bb-metarow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 0; }

/* overview: figure tiles, sub-headings inside panels, and a two-column split */
.bb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0 0 18px; }
.bb-tile { position: relative; padding: 16px 16px 14px; background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--radius); box-shadow: 0 1px 2px var(--t-shadow); min-width: 0; }
.bb-tile::before { content: ''; position: absolute; top: -1px; left: -1px; width: 28px; height: 3px; background: var(--t-accent); }
.bb-tile__value { margin: 4px 0 2px; font-family: var(--font-display); font-size: 28px; line-height: 1.1; }
.bb-tile__hint { color: var(--t-text-muted); font-size: 12px; }
.bb-subhead { margin: 18px 0 6px; font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.bb-subhead:first-child { margin-top: 0; }
.bb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* the toolbar as one form: its children lay out in the toolbar row */
.bb-toolbar__form { display: contents; }
.bb-toolbar .bb-actions .bb-btn { height: 40px; }

/* media (Products listing) */
.bb-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.bb-media figure { margin: 0; }
.bb-media img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--t-border); background: var(--t-surface-3); }
.bb-media figcaption { margin-top: 4px; color: var(--t-text-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.bb-prose { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.bb-inherit { display: inline-block; margin-top: 4px; }

/* ---- forms (Build 280): the prototype's labelled fields, segmented choices, steps and banners ---- */
.bb-form { margin: 0; }
.bb-formgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; }
.bb-ff { min-width: 0; }
.bb-ff--wide { grid-column: 1 / -1; }
.bb-ff__label { display: block; margin: 0 0 6px; padding: 0; color: var(--t-text); font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.bb-ff__hint { margin: 6px 0 0; color: var(--t-text-muted); font-size: 12px; line-height: 1.45; }
.bb-ff__error { margin: 6px 0 0; color: var(--t-bad-tx); font-size: 12.5px; font-weight: 700; }
.bb-ff--error .bb-field { border-color: var(--t-bad-tx); }
.bb-field { width: 100%; max-width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--t-border-strong); border-radius: var(--radius); background: var(--t-surface); color: var(--t-text); font: inherit; font-size: 14px; }
.bb-field::placeholder { color: var(--t-text-muted); }
.bb-field--area { min-height: 96px; resize: vertical; line-height: 1.5; }
.bb-field--money { max-width: 200px; }
/* the product editor's header and featured-image row (Build 285: the prototype's listing header) */
.bb-listinghead__actions { margin-top: 14px; flex-wrap: wrap; }
.bb-featured { display: flex; align-items: center; gap: 14px; }
.bb-featured img, .bb-featured .bb-thumb { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--t-border); }
.bb-featured .bb-thumb--none { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--t-text-muted); background: var(--t-surface-3); }
input[type="file"].bb-field { padding: 7px 10px; }
.bb-seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.bb-seg__opts { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--t-border-strong); border-radius: var(--radius); background: var(--t-surface-3); }
.bb-seg__opt { position: relative; margin: 0; }
.bb-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bb-seg__opt span { display: inline-block; padding: 9px 16px; font-size: 13px; font-weight: 800; cursor: pointer; border-right: 1px solid var(--t-border); }
.bb-seg__opt:last-child span { border-right: 0; }
.bb-seg__opt input:checked + span { background: var(--t-accent); color: var(--t-accent-ink); box-shadow: inset 0 0 0 2px var(--t-accent-ink); }
.bb-seg__opt input:focus-visible + span { outline: 2px solid var(--t-focus); outline-offset: 2px; }
.bb-formactions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.bb-formactions__note { font-size: 12.5px; }
.bb-formsep { margin: 20px 0 16px; border: 0; border-top: 1px solid var(--t-border); }
.bb-notice { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--t-border); border-left: 4px solid var(--t-wait-tx); background: var(--t-surface); font-weight: 600; }
.bb-notice--act { border-left-color: var(--t-act-tx); background: var(--t-act-bg); color: var(--t-act-tx); }
.bb-notice--bad { border-left-color: var(--t-bad-tx); background: var(--t-bad-bg); color: var(--t-bad-tx); }
.bb-notice--neutral { border-left-color: var(--t-border-strong); }
.bb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.bb-steps__step > a, .bb-steps__in { display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px; border: 1px solid var(--t-border); background: var(--t-surface); color: inherit; text-decoration: none; }
.bb-steps__step.is-current > .bb-steps__in { border: 2px solid var(--t-text); }
.bb-steps__n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--t-border-strong); font-weight: 800; font-size: 12px; }
.bb-steps__step.is-current .bb-steps__n { background: var(--t-accent); color: var(--t-accent-ink); border-color: var(--t-accent-ink); }
.bb-steps__step.is-done .bb-steps__n { background: var(--t-wait-bg); color: var(--t-wait-tx); border-color: transparent; }
.bb-steps__t { display: flex; flex-direction: column; min-width: 0; }
.bb-steps__t strong { font-size: 13px; }
.bb-steps__t small { color: var(--t-text-muted); font-size: 11.5px; }
.bb-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin: 0 0 12px; }
.bb-pick { position: relative; display: block; cursor: pointer; }
.bb-pick input { position: absolute; opacity: 0; }
.bb-pick img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--t-border); background: var(--t-surface-3); }
.bb-pick input:checked + img { border-color: var(--t-text); box-shadow: 0 0 0 3px var(--t-accent); }
.bb-pick input:focus-visible + img { outline: 2px solid var(--t-focus); outline-offset: 2px; }
.bb-pick small { display: block; margin-top: 3px; color: var(--t-text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-mediactl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.bb-mediactl form { margin: 0; }
.bb-danger { border-color: var(--t-bad-tx); }
.bb-danger .bb-panel__head { border-bottom-color: var(--t-bad-tx); }
.bb-btn--danger { background: var(--t-bad-tx); border-color: var(--t-bad-tx); color: #fff; }
.bb-inlineforms { display: grid; gap: 14px; }
/* the unified editor's save bar (Build 283): always reachable, sticks to the bottom of the screen */
.bb-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; padding: 12px 20px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--t-surface); border: 1px solid var(--t-border-card); border-top: 3px solid var(--t-border-strong); box-shadow: 0 -2px 10px var(--t-shadow); }
.bb-savebar.is-dirty { border-top-color: var(--t-accent); }
.bb-savebar__status { font-weight: 700; font-size: 13.5px; }
.bb-savebar.is-dirty .bb-savebar__status::before { content: '●'; color: var(--t-act-tx); margin-right: 6px; }
.bb-savebar .bb-actions { margin: 0; }
.bb-btn.is-busy { opacity: .6; pointer-events: none; }
/* the New product steps' navigation row (Build 284): Back left, then Cancel, then the step's primary action */
.bb-wizardnav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }
.bb-wizardnav__gap { flex: 1 1 auto; }
.bb-inline { display: inline; }
@media (max-width: 520px) { .bb-wizardnav { flex-direction: column-reverse; align-items: stretch; } .bb-wizardnav .bb-btn { justify-content: center; text-align: center; } .bb-wizardnav__gap { display: none; } }
.bb-ff.is-changed .bb-field, .bb-seg.is-changed .bb-seg__opts { box-shadow: 0 0 0 2px var(--t-accent); }
/* the New product steps keep the prototype's readable form column; the step indicator spans the page */
.bb-steps ~ .bb-panel, .bb-steps ~ .bb-form, .bb-steps ~ .bb-formactions, .bb-steps ~ .bb-callout { max-width: 1000px; }
/* money fields are short, as in the prototype */
.bb-steps__step form { margin: 0; height: 100%; }
.bb-steps__btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 10px 12px; border: 1px solid var(--t-border); background: var(--t-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bb-steps__btn:hover { border-color: var(--t-border-strong); }
.bb-steps__btn:focus-visible { outline: 2px solid var(--t-focus); outline-offset: 2px; }
.bb-static { margin: 0; min-height: 40px; display: flex; align-items: center; font-weight: 600; }
.bb-list-plain { margin: 0; padding-left: 18px; }
.bb-list-plain li { margin: 4px 0; }
.bb-seg__opt .is-chosen { background: var(--t-accent); color: var(--t-accent-ink); box-shadow: inset 0 0 0 2px var(--t-accent-ink); }
@media (max-width: 900px) {
	.bb-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 520px) {
	.bb-formgrid { grid-template-columns: minmax(0, 1fr); }
	.bb-steps__t small { display: none; }
}

/* line items (Order contents) */
.bb-lines { margin: 0; padding: 0; list-style: none; }
.bb-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px minmax(150px, auto); align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--t-border); }
.bb-line:first-child { border-top: 0; }
.bb-thumb { width: 52px; height: 52px; border: 1px solid var(--t-border); background: var(--t-surface-3); object-fit: cover; display: block; }
.bb-thumb--none { display: flex; align-items: center; justify-content: center; color: var(--t-text-muted); }
.bb-thumb--none svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bb-line__name { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.bb-line__sku { display: block; color: var(--t-text-muted); font-size: 12.5px; font-weight: 600; letter-spacing: .3px; }
.bb-line__meta { display: block; margin-top: 2px; color: var(--t-text-muted); font-size: 12px; }
.bb-qty { display: flex; flex-direction: column; align-items: center; }
.bb-qty__n { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 3px solid var(--t-border-strong); border-radius: 50%; background: var(--t-surface-2); color: var(--t-text-2); font-size: 15px; font-weight: 800; }
.bb-qty__l { margin-top: 1px; color: var(--t-text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.bb-line__money { text-align: right; font-variant-numeric: tabular-nums; }
.bb-line__money b { display: block; font-size: 14.5px; }
.bb-line__money span { color: var(--t-text-muted); font-size: 12px; }

/* callout (an emphasised notice, prototype "step" card shape) */
.bb-callout { margin: 0 0 16px; padding: 16px 20px; background: var(--t-surface); border: 1px solid var(--t-border-card); border-left: 6px solid var(--t-accent); border-radius: var(--radius); }
.bb-callout__eyebrow { margin: 0 0 4px; color: var(--t-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.bb-callout__text { margin: 0; color: var(--t-text-2); }

/* timeline (Order history) */
.bb-timeline { margin: 0; padding: 0; list-style: none; }
.bb-timeline li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--t-border); font-size: 13px; }
.bb-timeline li:first-child { border-top: 0; }
.bb-timeline time { color: var(--t-text-muted); font-size: 12.5px; }

/* empty / not found / denied */
.bb-empty { padding: 40px 24px; text-align: center; background: var(--t-surface); border: 1px dashed var(--t-border-strong); border-radius: var(--radius); }
.bb-empty__title { margin: 0 0 6px; font-family: var(--font-display); font-size: 20px; letter-spacing: .4px; text-transform: uppercase; }
.bb-empty p { margin: 0 0 14px; color: var(--t-text-muted); }

/* the sign-in / no-access gate (no shell) */
.bb-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--t-sidebar); }
.bb-gate__box { width: 100%; max-width: 460px; padding: 28px; background: var(--t-surface); border: 1px solid var(--t-border-card); border-radius: var(--radius); }
.bb-gate__box img { display: block; width: 150px; height: auto; margin: 0 0 6px; }
.bb-gate__tag { margin: 0 0 18px; color: var(--t-text-muted); font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.bb-gate__box h1 { margin: 0 0 8px; font-family: var(--font-display); font-size: 24px; letter-spacing: .4px; text-transform: uppercase; }
.bb-gate__box p { margin: 0 0 16px; color: var(--t-text-2); }

/* ---------------------------------------------------------------- 6 RESPONSIVE */
@media (max-width: 1180px) {
	/* beside the sidebar the list gets ~750-940px: columns give up their minimums, text wraps, the order number never breaks */
	.bb-list--orders .bb-list__row { --bb-cols: minmax(96px, auto) minmax(0, 1.2fr) minmax(0, auto) minmax(0, auto) minmax(0, 1fr) minmax(0, auto) auto; gap: 12px; padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 1180px) {
	.bb-list--catalog .bb-list__row { --bb-cols: 44px minmax(0, 1.8fr) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, 1.1fr) auto; gap: 12px; padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 900px) {
	.bb-split { grid-template-columns: minmax(0, 1fr); }
	.bb-side { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
	.bb-side:target { transform: none; }
	.bb-side:target ~ .bb-scrim { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(12, 12, 13, .42); }
	.bb-work { margin-left: 0; }
	.bb-hb { display: inline-flex; }
	.bb-side__brand img { max-width: 132px; }
	.bb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-main { padding: 18px 16px 40px; }
	.bb-top { padding: 0 14px; }
}
@media (max-width: 760px) {
	.bb-list__row--head { display: none; }
	.bb-list__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; }
	.bb-list__row > .bb-list__cell { grid-column: 1; }
	.bb-list__row > .bb-list__end { grid-column: 2; grid-row: 1; align-self: start; }
	.bb-list__cell--num { text-align: left; }
	/* the prototype's phone card shows values only; each value keeps its column name for screen readers */
	.bb-list__label { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.bb-list__tags { display: flex; flex-wrap: wrap; }
	/* the catalog's phone cards keep their labels: two bare prices (retail, dealer) would be ambiguous */
	.bb-list--catalog .bb-list__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; margin-right: 6px; color: var(--t-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
	.bb-line { grid-template-columns: 44px minmax(0, 1fr) auto; }
	.bb-line .bb-thumb { width: 44px; height: 44px; }
	.bb-line__money { grid-column: 2 / -1; text-align: left; }
	.bb-top__who { display: none; }
	.bb-title { font-size: 28px; }
	.bb-title--record { font-size: 26px; }
}
@media (max-width: 520px) {
	/* the prototype keeps the summary in two columns on a phone */
	.bb-fact { padding: 12px 14px; }
	.bb-cards { grid-template-columns: minmax(0, 1fr); }
	.bb-toolbar__sort .bb-field { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .bb-side { transition: none; } }
@media (pointer: coarse) { .bb-iconbtn { width: 44px; height: 40px; } }

/* Build 288: the catalog grouped by product family - a family heading, its variants indented under it with a small
   connector. Presentation only: rows, columns, filters, search and paging are the catalog's own. */
.bb-list__row--family { display: block; padding: 10px 18px 8px; background: var(--t-surface-3, var(--t-thead)); border-top: 1px solid var(--t-border); }
.bb-list__family { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bb-list__famname { font-weight: 800; font-size: 14px; color: var(--t-text); }
.bb-list__famnote { color: var(--t-text-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .3px; }
.bb-list__row--child { padding-left: 42px; position: relative; }
.bb-list__row--child::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 50%; width: 10px; border-left: 1.5px solid var(--t-border-card, var(--t-border)); border-bottom: 1.5px solid var(--t-border-card, var(--t-border)); border-bottom-left-radius: 3px; }
.bb-list__row--child:has(+ .bb-list__row--child)::after { content: ""; position: absolute; left: 24px; top: 50%; bottom: 0; border-left: 1.5px solid var(--t-border-card, var(--t-border)); }
@media (max-width: 760px) {
	.bb-list__row--child { padding-left: 34px; }
	.bb-list__row--child::before, .bb-list__row--child:has(+ .bb-list__row--child)::after { left: 16px; }
}

/* Build 292: Administration - Team & Access (the prototype's Employees list, employee page and Roles & Permissions) */
.bb-list--team .bb-list__row { --bb-cols: minmax(170px, 1.3fr) minmax(170px, 1.3fr) minmax(110px, .8fr) minmax(150px, 1.2fr) 120px auto; }
.bb-list--link .bb-list__row { --bb-cols: minmax(150px, 1.1fr) minmax(170px, 1.2fr) minmax(100px, .7fr) minmax(190px, 1.3fr) 92px; }   /* Build 297: fixed last column so every row lines up */
.bb-list--roles .bb-list__row { --bb-cols: minmax(200px, 1.5fr) 110px 90px minmax(200px, 2fr); }
.bb-list__email { overflow-wrap: anywhere; }
.bb-rolecount { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--pill); background: var(--t-sidebar); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.bb-heldroles { list-style: none; margin: 0; padding: 0; }
.bb-heldrole { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--t-border); }
.bb-heldrole:first-child { border-top: 0; padding-top: 0; }
.bb-heldrole__text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.bb-heldrole__form { display: flex; align-items: center; gap: 8px; flex: 0 1 380px; min-width: 0; }
.bb-heldrole__form .bb-field { height: 34px; }
.bb-rolecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.bb-rolecards > legend { margin-bottom: 8px; }
.bb-rolecards.is-readonly { margin: 0; }
.bb-rolecard { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--t-border-card); border-radius: var(--radius); background: var(--t-surface-2); cursor: pointer; min-width: 0; }
.bb-rolecard:has(input:checked) { border-color: var(--t-text); box-shadow: inset 0 0 0 1px var(--t-text); background: var(--t-surface); }
.bb-rolecard:has(input:focus-visible) { outline: 2px solid var(--t-focus); outline-offset: 2px; }
.bb-rolecard.is-off { cursor: default; opacity: .78; }
.bb-rolecards.is-readonly .bb-rolecard input { display: none; }
.bb-rolecard input { margin: 3px 0 0; accent-color: var(--t-text); }
.bb-rolecard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bb-rolecard__name { font-weight: 800; font-size: 13.5px; }
.bb-rolecard__meta { color: var(--t-text-muted); font-size: 12px; }
.bb-rolecard__why { color: var(--t-text-2); font-size: 11.5px; font-weight: 700; }
.bb-access__group + .bb-access__group { margin-top: 14px; }
.bb-access { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--t-border); }
.bb-access__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--t-border); font-size: 13px; }
.bb-access__item:first-child { border-top: 0; }
.bb-access__item:not(.is-on) > span:first-child { color: var(--t-text-muted); }
.bb-access__src { color: var(--t-text-muted); font-size: 11.5px; font-weight: 600; text-align: right; }
.bb-disclose > summary { cursor: pointer; list-style: none; }
.bb-disclose > summary::-webkit-details-marker { display: none; }
.bb-disclose > summary .bb-panel__note { margin-left: auto; }
.bb-disclose > summary::after { content: "+"; margin-left: 12px; font-weight: 800; font-size: 18px; line-height: 1; }
.bb-disclose[open] > summary::after { content: "\2212"; }
.bb-disclose:not([open]) > summary { border-bottom: 0; }
@media (max-width: 1180px) {
	.bb-list--team .bb-list__row { --bb-cols: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, auto) auto; gap: 12px; padding-left: 14px; padding-right: 14px; }
	.bb-list--roles .bb-list__row { --bb-cols: minmax(0, 1.5fr) minmax(0, auto) minmax(0, auto) minmax(0, 2fr); gap: 12px; }
}
@media (max-width: 760px) {
	.bb-heldrole__form { flex: 1 1 100%; }
	.bb-access__item { grid-template-columns: minmax(0, 1fr) auto; }
	.bb-access__src { grid-column: 1; grid-row: 2; text-align: left; }
	.bb-list--roles .bb-list__label, .bb-list--team .bb-list__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; margin-right: 6px; color: var(--t-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
}

/* Build 293: Administration > Activity (the prototype's Activity Log) - filters, list, one event */
.bb-actf { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.bb-actf__search { width: 100%; flex: none; }   /* the toolbar's flex-basis is a width; in this column it would be a height */
.bb-actf__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.bb-actf__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 150px; max-width: 260px; }
.bb-actf__field .bb-field { width: 100%; min-width: 0; }
.bb-actf__label { color: var(--t-text-muted); font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.bb-actf__go { flex: 0 0 auto; }
.bb-actf__record { margin: -4px 0 14px; font-size: 13px; color: var(--t-text-2); }
.bb-list--activity .bb-list__row { --bb-cols: minmax(110px, 1fr) 84px minmax(150px, 1.3fr) minmax(130px, 1.2fr) minmax(70px, .8fr) minmax(70px, .8fr) 104px 96px auto; gap: 12px; padding-left: 14px; padding-right: 14px; font-size: 13px; }
.bb-list--activity .bb-list__title { white-space: normal; font-size: 14px; }
.bb-list--activity .bb-list__cell { min-width: 0; }
.bb-list--activity .bb-mono { font-size: 11px; overflow-wrap: anywhere; word-break: break-all; }
.bb-act__rec { display: block; font-weight: 600; overflow-wrap: anywhere; }
.bb-act__val { overflow-wrap: anywhere; color: var(--t-text-2); }
.bb-actpager { margin-top: 14px; }
.bb-actdiff { display: block; }
.bb-actdiff__row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: 12px; padding: 9px 20px; border-top: 1px solid var(--t-border); font-size: 13px; overflow-wrap: anywhere; }
.bb-actdiff__row--head { border-top: 0; background: var(--t-thead); color: var(--t-text-muted); font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.bb-actdiff__row > span:first-child { color: var(--t-text-2); font-weight: 600; }
.bb-actdiff__row.is-changed > span:last-child { font-weight: 700; }
.bb-actdiff__row.is-changed { background: var(--t-row-hover); }
.bb-actdiff__lbl { display: none; }
@media (max-width: 1180px) {
	.bb-list--activity .bb-list__row { --bb-cols: minmax(0, 1fr) minmax(0, auto) minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, auto) minmax(0, auto) auto; }
}
@media (max-width: 760px) {
	.bb-actf__field { flex: 1 1 calc(50% - 6px); max-width: none; }
	.bb-actf__go { flex: 1 1 100%; }
	.bb-list--activity .bb-list__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; margin-right: 6px; color: var(--t-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
	.bb-actdiff__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 16px; }
	.bb-actdiff__row--head { display: none; }
	.bb-actdiff__lbl { display: inline; margin-right: 6px; color: var(--t-text-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
}

/* Build 295: Administration > Accounts (read-only inventory) */
.bb-list--accounts .bb-list__row { --bb-cols: minmax(150px, 1fr) minmax(150px, .9fr) minmax(130px, .9fr) minmax(110px, .7fr) minmax(260px, 2.2fr); gap: 14px; }
.bb-list--accounts .bb-list__cell { min-width: 0; }
.bb-list--accounts .bb-pill, .bb-list--accounts .bb-tag { white-space: normal; max-width: 100%; text-align: left; line-height: 1.3; }
.bb-list--accounts .bb-tag { display: inline-block; margin: 0 4px 4px 0; }
.bb-list--accounts .bb-mono { overflow-wrap: anywhere; font-size: 11px; }
.bb-acct__conf { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.45; }
.bb-acct__conf + .bb-acct__conf { margin-top: 6px; }
@media (max-width: 1180px) { .bb-list--accounts .bb-list__row { --bb-cols: minmax(0, 1fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .7fr) minmax(0, 2fr); gap: 12px; } }
@media (max-width: 760px) { .bb-list--accounts .bb-list__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; margin-right: 6px; color: var(--t-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } .bb-acct__conf { flex-wrap: wrap; } }

/* ---- Build 297: create employee, link list ---- */
.bb-form--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.bb-form--grid > .bb-ff--wide, .bb-form--grid > fieldset, .bb-form--grid > .bb-formactions, .bb-form--grid > .bb-seg, .bb-form--grid > p { grid-column: 1 / -1; }
.bb-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
.bb-check input { margin-top: 3px; }
.bb-field--mono { font-family: var(--f-mono, ui-monospace, monospace); font-size: 12px; width: 100%; }
.bb-list--link .bb-list__sub { white-space: normal; max-width: 42ch; }
@media (max-width: 760px) { .bb-form--grid { grid-template-columns: minmax(0, 1fr); } }

/* Build 300: Marketing > Website Content and Site Messaging */
.bb-list--content .bb-list__row { --bb-cols: minmax(220px, 2fr) 190px minmax(150px, 1fr) auto; }
.bb-list--content5 .bb-list__row { --bb-cols: minmax(220px, 2.2fr) minmax(150px, 1fr) 190px minmax(140px, 1fr) auto; }
.bb-list--content .bb-list__end, .bb-list--content5 .bb-list__end { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.bb-wc-json { white-space: pre-wrap; max-height: 320px; overflow: auto; margin: 4px 0 10px; padding: 10px; border: 1px solid var(--t-border); background: var(--t-surface-3); }
.bb-timeline .bb-disclose { margin-top: 6px; }

/* system 301 B1: top-bar search and notifications */
.bb-topsearch { position: relative; display: flex; align-items: center; }
.bb-topsearch svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--t-text-muted); pointer-events: none; }
.bb-topsearch .bb-field { width: 280px; padding-left: 32px; min-height: 36px; }
.bb-bell { position: relative; }
.bb-bell__n { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--t-act-bg, #f5e100); color: #111; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
@media (max-width: 900px) { .bb-topsearch { display: none; } }

/* === system 301 B9 === Timekeeping */
.bb-tk-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.bb-tk-nav__now { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.bb-tk-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; }
.bb-tk-act .bb-subhead { margin-top: 0; }
.bb-tk-req { padding: 12px 0; border-top: 1px solid var(--t-border); }
.bb-tk-req:first-child { border-top: 0; padding-top: 0; }
.bb-tk-req p { margin: 0 0 8px; }
.bb-tk-set { padding: 12px 0; border-top: 1px solid var(--t-border); }
.bb-tk-set:first-child { border-top: 0; padding-top: 0; }
.bb-list--tkdays .bb-list__row { --bb-cols: 120px minmax(0, 2.6fr) 84px 84px 84px; }
.bb-list--tkteam .bb-list__row { --bb-cols: minmax(180px, 2fr) 84px 84px 84px minmax(80px, auto) minmax(140px, 1fr); }
.bb-list--tk4 .bb-list__row { --bb-cols: minmax(0, 2fr) 96px 96px minmax(96px, auto); }
.bb-list--tkreq .bb-list__row { --bb-cols: minmax(0, 2fr) minmax(110px, auto) minmax(90px, auto); }
.bb-list--tkentries .bb-list__row { --bb-cols: minmax(0, 2fr) 150px 150px; }
.bb-list--tklinks .bb-list__row { --bb-cols: minmax(0, 1fr) minmax(0, 1.3fr) minmax(90px, auto); }
.bb-list--tkimports .bb-list__row { --bb-cols: 170px 110px minmax(0, 2fr); }
.bb-list--tkdays .bb-list__cell, .bb-list--tkentries .bb-list__cell { overflow-wrap: anywhere; }
.bb-list--tkdays .bb-pill, .bb-list--tkteam .bb-pill { margin-top: 2px; }
.bb-list + .bb-subhead, .bb-list-plain + .bb-subhead { margin-top: 20px; }
.bb-list--tkdays .bb-list__row--head .bb-list__cell:nth-child(n+3), .bb-list--tkteam .bb-list__row--head .bb-list__cell:nth-child(n+2):nth-child(-n+4), .bb-list--tk4 .bb-list__row--head .bb-list__cell:nth-child(n+2):nth-child(-n+3) { text-align: right; }
/* === system 301 B6 === marketing, sales, community */
.bb-bars { display: flex; align-items: flex-end; gap: 4px; height: 180px; margin: 0; padding: 0 0 22px; list-style: none; position: relative; }
.bb-bars li { flex: 1 1 0; min-width: 6px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bb-bars__bar { display: block; width: 100%; min-height: 1px; background: var(--t-accent); border: 1px solid var(--t-border); }
.bb-bars__label { position: absolute; bottom: -20px; font-size: 10.5px; color: var(--t-text-muted); white-space: nowrap; }
.bb-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .bb-cols3 { grid-template-columns: 1fr; } }
.bb-media--lib { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bb-media--review { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bb-media--review img, .bb-media--review video { display: block; width: 100%; max-height: 320px; object-fit: contain; aspect-ratio: auto; background: var(--t-surface-3); border: 1px solid var(--t-border); }
.bb-media__big { display: block; max-width: 100%; max-height: 360px; margin: 0 0 12px; border: 1px solid var(--t-border); background: var(--t-surface-3); }
.bb-quote { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--t-accent); background: var(--t-surface-3); white-space: pre-wrap; }
.bb-form--row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.bb-form--row .bb-field { width: auto; min-width: 180px; flex: 1 1 180px; }
.bb-list--promotions .bb-list__row { --bb-cols: minmax(200px, 2fr) 110px 110px 110px minmax(170px, 1.4fr) 100px 64px 56px 90px 100px; gap: 12px; }
.bb-list--codes .bb-list__row { --bb-cols: minmax(150px, 1.3fr) 110px minmax(130px, 1fr) 90px 70px minmax(150px, 1.2fr) minmax(150px, 1fr) auto; gap: 12px; }
.bb-list--rewards .bb-list__row { --bb-cols: minmax(200px, 2fr) 80px 60px 130px 90px auto; }
.bb-list--rules .bb-list__row { --bb-cols: 90px 110px 90px 100px 60px 90px auto; }
.bb-list--ledger .bb-list__row { --bb-cols: 170px minmax(150px, 1.2fr) 100px 70px minmax(170px, 1.5fr) 120px; gap: 12px; }
.bb-list--assets .bb-list__row { --bb-cols: minmax(220px, 2fr) 90px auto; }
.bb-list--sales5 .bb-list__row { --bb-cols: minmax(220px, 2fr) 80px 110px 80px 100px; }
.bb-list--sales3 .bb-list__row { --bb-cols: minmax(220px, 2fr) 80px 80px; }
.bb-list--community .bb-list__row { --bb-cols: minmax(200px, 2fr) minmax(150px, 1fr) 100px minmax(120px, 1fr) 110px 90px auto; gap: 12px; }
.bb-list--placements .bb-list__row { --bb-cols: minmax(180px, 1.5fr) 170px minmax(200px, 1.5fr) 70px 90px auto; gap: 12px; }
.bb-list--reports .bb-list__row { --bb-cols: 80px minmax(170px, 1.3fr) minmax(140px, 1fr) 170px 120px minmax(260px, 2fr); gap: 12px; }
.bb-list--history .bb-list__row { --bb-cols: minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(150px, 1.4fr) minmax(130px, 1fr) 170px; gap: 12px; }
.bb-list--promotions .bb-list__end, .bb-list--codes .bb-list__end, .bb-list--rewards .bb-list__end, .bb-list--rules .bb-list__end, .bb-list--placements .bb-list__end, .bb-list--reports .bb-list__end { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.bb-list--codes .bb-pill, .bb-list--community .bb-pill { margin: 0 4px 4px 0; }
@media (max-width: 760px) {
	.bb-list--promotions .bb-list__label, .bb-list--codes .bb-list__label, .bb-list--rewards .bb-list__label, .bb-list--rules .bb-list__label, .bb-list--ledger .bb-list__label, .bb-list--sales5 .bb-list__label, .bb-list--sales3 .bb-list__label, .bb-list--community .bb-list__label, .bb-list--placements .bb-list__label, .bb-list--reports .bb-list__label, .bb-list--history .bb-list__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; margin-right: 6px; color: var(--t-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
}
select.bb-field[multiple] { min-height: 150px; height: auto; padding: 6px; }
/* === system 301 B5: the product page editor (Products) === */
.bb-pp-table{width:100%;border-collapse:collapse;margin:6px 0 4px;}
.bb-pp-table th{text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t-text-muted,#6c6c66);padding:4px 6px;}
.bb-pp-table td{padding:4px 6px;vertical-align:top;}
.bb-pp-table td:first-child{width:84px;}
.bb-pp-sec{border:1px solid var(--t-border,rgba(20,20,22,.12));border-radius:8px;padding:10px 14px;margin:0 0 10px;}
.bb-pp-sec > summary{cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none;}
.bb-pp-sec > summary::-webkit-details-marker{display:none;}
.bb-pp-sec[open] > summary{margin-bottom:12px;}
.bb-pp-blocks{list-style:none;margin:0 0 12px;padding:0;border-top:1px solid var(--t-border,rgba(20,20,22,.12));}
.bb-pp-block{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--t-border,rgba(20,20,22,.12));flex-wrap:wrap;}
.bb-pp-block > span:first-child{min-width:0;overflow-wrap:anywhere;}
.bb-inline{display:inline-flex;gap:6px;align-items:center;margin:0;}
.bb-pp-card{border:1px solid var(--t-border,rgba(20,20,22,.12));border-radius:6px;padding:10px 12px;margin:0 0 10px;}
.bb-pp-catedit{display:inline-block;}
.bb-pp-catedit[open]{display:block;margin-top:8px;}
.bb-altform{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;margin:6px 0;}
.bb-altform .bb-field{flex:1 1 140px;min-width:0;}
.bb-check{display:flex;gap:8px;align-items:center;font-weight:600;}
/* === system 301 B2 === Fulfillment: dashboard, queues, order L4, Shipping Manager, packing slip, settings */
.bb-syncchips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.bb-syncchip { display: inline-flex; gap: 10px; align-items: center; padding: 8px 14px; background: var(--t-surface); border: 1px solid var(--t-border-card); font-size: 13px; }
.bb-attnlist { list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--t-border-card); background: var(--t-surface); }
.bb-attn { padding: 10px 16px; border-bottom: 1px solid var(--t-border); border-left: 4px solid var(--t-act-tx); }
.bb-attn--critical { border-left-color: var(--t-bad-tx); }
.bb-attn a { color: inherit; text-decoration: none; }
.bb-attn a:hover { text-decoration: underline; }
.bb-callout--plain { margin: 0 0 18px; border-left: 4px solid var(--t-border-strong); background: var(--t-surface); padding: 12px 18px; }
.bb-panel--steps { padding: 16px 20px 0; }
.bb-panel--steps .bb-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bb-shipmgr .bb-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bb-donow { border-left: 4px solid var(--t-accent); }
.bb-kicker { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t-text-muted); }
.bb-donow__title { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.bb-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; max-width: 520px; margin: 4px 0 12px; }
.bb-progress__bar { grid-column: 1 / -1; height: 8px; background: var(--t-sunken); }
.bb-progress__bar i { display: block; height: 100%; background: var(--t-accent); }
.bb-linework { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 8px; }
.bb-qtyform { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.bb-field--qty { width: 76px; height: 34px; }
.bb-flag { color: var(--t-bad-tx); font-weight: 800; }
.bb-strike { text-decoration: line-through; color: var(--t-text-muted); }
.bb-whylist { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; }
.bb-pkglist { margin: 6px 0 12px; padding-left: 20px; }
.bb-pkglist li { margin: 0 0 6px; }
.bb-note { white-space: pre-wrap; padding: 8px 10px; background: var(--t-act-bg); color: var(--t-text); }
.bb-btn.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.bb-shipmgr { border: 1px solid var(--t-border-card); background: var(--t-surface); }
.bb-shipmgr__head { padding: 16px 20px 0; background: var(--t-surface-3); border-bottom: 1px solid var(--t-border); }
.bb-shipmgr__body { padding: 18px 20px 22px; }
.bb-h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.bb-addrcard { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--t-border-card); background: var(--t-surface-2); }
.bb-addrcard--suggest { border-color: var(--t-act-tx); }
.bb-pkg { margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--t-border-card); }
.bb-pkg legend { padding: 0 6px; font-weight: 800; }
.bb-pkg__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; align-items: center; margin: 8px 0; }
.bb-pkg__items label { font-size: 13px; font-weight: 700; }
.bb-rates { border: 0; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.bb-rate { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--t-border-card); background: var(--t-surface-2); cursor: pointer; }
.bb-rate.is-disabled { opacity: .55; cursor: not-allowed; }
.bb-rate__amt { margin-left: auto; }
.bb-datefilter { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: -6px 0 16px; }
.bb-datefilter .bb-field { width: auto; }
.bb-sliptools { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; }
.bb-slip { max-width: 820px; padding: 28px 32px; background: #fff; color: #111; border: 1px solid var(--t-border-card); }
.bb-slip__head { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 12px; }
.bb-slip__head h1 { margin: 0 0 6px; font-family: var(--font-display); font-size: 30px; text-transform: uppercase; }
.bb-slip__table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.bb-slip__table th, .bb-slip__table td { padding: 8px 6px; border-bottom: 1px solid #ccc; text-align: left; }
.bb-slip__box { width: 24px; font-size: 18px; }
.bb-slip__qty { font-weight: 800; text-align: right; }
.bb-slip__rush { padding: 2px 6px; background: #111; color: #fff; }
.bb-slip__foot { margin-top: 18px; font-size: 12px; color: #555; }
.bb-list--fuldone .bb-list__row { --bb-cols: minmax(130px, 1fr) minmax(150px, 1.2fr) 90px minmax(170px, 1.4fr) 130px auto; }
.bb-list--fullabels .bb-list__row { --bb-cols: minmax(150px, 1fr) minmax(170px, 1.2fr) minmax(150px, 1fr) auto; }
.bb-list--fulpack .bb-list__row { --bb-cols: minmax(170px, 1.6fr) 90px 120px minmax(120px, 1fr) 80px 80px 80px 90px 80px auto; }
.bb-list--fulstates .bb-list__row { --bb-cols: minmax(140px, 1fr) 120px minmax(200px, 2fr) 90px minmax(120px, 1fr) auto; }
.bb-list--fulzips .bb-list__row { --bb-cols: 80px minmax(120px, 1fr) 120px minmax(200px, 2fr) auto; }
.bb-list--fulprod .bb-list__row { --bb-cols: minmax(220px, 2fr) minmax(170px, 1fr) auto; }
.bb-list--fullabels .bb-list__end, .bb-list--fulpack .bb-list__end, .bb-list--fulzips .bb-list__end, .bb-list--fulprod .bb-list__end { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 900px) { .bb-panel--steps .bb-steps, .bb-shipmgr .bb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print {
	.bb-side, .bb-top, .bb-noprint, .bb-skip, .bb-scrim, .bb-notice { display: none !important; }
	.bb-main { padding: 0 !important; }
	.bb-slip { border: 0; max-width: none; padding: 0; }
}
/* === system 301 B3 === Inventory, Manufacturing, Production, Purchasing, Pricing & Costing */
.bb-list--invprev .bb-list__row { --bb-cols: minmax(180px, 2fr) minmax(90px, 1fr) 90px 90px 100px 120px; }
.bb-list--invrows .bb-list__row { --bb-cols: minmax(150px, 1.8fr) minmax(80px, .8fr) minmax(90px, 1fr) 62px 62px 62px 62px 56px 76px 76px 104px minmax(84px, auto); gap: 8px; padding-left: 12px; padding-right: 12px; font-size: 13px; }
.bb-list--invrows .bb-list__row--head, .bb-list--invledger .bb-list__row--head, .bb-list--invmat .bb-list__row--head, .bb-list--invcost .bb-list__row--head { font-size: 10.5px; }
.bb-list--invhist .bb-list__row { --bb-cols: 120px minmax(110px, 1fr) minmax(170px, 1.6fr) minmax(110px, 1fr) minmax(110px, 1fr) 96px; }
.bb-list--invledger .bb-list__row { --bb-cols: minmax(140px, 1.4fr) 56px 70px 56px minmax(160px, 1.8fr) minmax(90px, .9fr) 104px minmax(140px, 1.3fr) 80px; gap: 10px; padding-left: 14px; padding-right: 14px; font-size: 13px; }
.bb-list--invcounts .bb-list__row { --bb-cols: 110px minmax(150px, 1.2fr) 120px minmax(120px, 1fr) minmax(170px, 1.4fr) 130px; }
.bb-list--invcount .bb-list__row { --bb-cols: minmax(220px, 2fr) 100px 140px 100px 120px; }
.bb-list--invmat .bb-list__row { --bb-cols: minmax(140px, 1.6fr) minmax(90px, 1fr) minmax(80px, .9fr) 44px 66px 66px 66px 60px 90px 80px 80px; gap: 10px; padding-left: 14px; padding-right: 14px; font-size: 13px; }
.bb-list--invmhist .bb-list__row { --bb-cols: 120px minmax(170px, 1.6fr) 84px 96px minmax(110px, 1fr) minmax(110px, 1fr) 96px 96px; }
.bb-list--invjobs .bb-list__row { --bb-cols: 90px minmax(170px, 1.6fr) 100px 80px 100px minmax(110px, 1fr) minmax(170px, 1.4fr); }
.bb-list--invbatch .bb-list__row { --bb-cols: minmax(170px, 1.2fr) minmax(150px, 1.2fr) 110px minmax(200px, 2fr) minmax(130px, 1fr) 110px; }
.bb-list--invcheck .bb-list__row { --bb-cols: minmax(200px, 2fr) 110px 100px 100px 130px; }
.bb-list--invrun .bb-list__row { --bb-cols: minmax(180px, 1.6fr) 120px minmax(200px, 1.6fr) 90px 140px; }
.bb-list--invpo .bb-list__row { --bb-cols: 100px minmax(160px, 1.5fr) minmax(150px, 1.2fr) 130px 110px 100px 110px; }
.bb-list--invpol .bb-list__row { --bb-cols: minmax(190px, 2fr) 110px 90px 90px 90px 100px 110px; }
.bb-list--invrcpt .bb-list__row { --bb-cols: 100px 100px minmax(240px, 2.4fr) minmax(150px, 1.2fr) 100px 110px; }
.bb-list--invven .bb-list__row { --bb-cols: minmax(190px, 1.8fr) minmax(130px, 1.2fr) 90px 90px 80px 100px; }
.bb-list--invcost .bb-list__row { --bb-cols: minmax(150px, 1.6fr) minmax(80px, .8fr) 96px 72px 72px 82px minmax(120px, 1.2fr) 70px 70px 64px auto; gap: 10px; padding-left: 14px; padding-right: 14px; font-size: 13px; }
.bb-list--invbom .bb-list__row { --bb-cols: minmax(200px, 2fr) minmax(150px, 1.3fr) 110px 110px 110px; }
.bb-list--invrows .bb-list__end, .bb-list--invcost .bb-list__end { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.bb-invinline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 8px 4px 0; }
.bb-invinline .bb-field { width: auto; min-width: 0; }
.bb-invtabs { margin: 0 0 16px; }
.bb-poline { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; grid-column: 1 / -1; }
.bb-polines { border: 0; margin: 0; padding: 0; grid-column: 1 / -1; }
.bb-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 4px 0 10px; }
.bb-runactions { margin-top: 18px; }
.bb-invchart { margin: 10px 0; color: var(--t-text); }
.bb-invchart svg { display: block; width: 100%; max-width: 640px; height: auto; background: var(--t-surface-2); border: 1px solid var(--t-border); }
.bb-invchart circle { fill: currentColor; }
.bb-attn--warn { border-left-color: var(--t-act-tx); }
@media (max-width: 1180px) {
	.bb-list--invrows .bb-list__row, .bb-list--invledger .bb-list__row, .bb-list--invmat .bb-list__row, .bb-list--invcost .bb-list__row { gap: 8px; padding-left: 12px; padding-right: 12px; }
}

/* === system 301 B4 === Customers: overview, search, customer detail, cases, returns, refunds */
.bb-tabs { margin: 0 0 16px; }
.bb-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bb-subtitle { margin: -4px 0 14px; font-size: 1.05rem; font-weight: 700; color: var(--t-text); }
.bb-stack { display: flex; flex-direction: column; gap: 12px; }
.bb-stack .bb-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.bb-stack .bb-inline .bb-ff { margin: 0; min-width: 200px; }
.bb-checks { border: 0; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.bb-thread { display: flex; flex-direction: column; gap: 10px; }
.bb-msg { border: 1px solid var(--t-border-card); border-radius: 10px; padding: 10px 14px; background: var(--t-surface); }
.bb-msg header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .86rem; }
.bb-msg p { margin: 6px 0 0; overflow-wrap: anywhere; }
.bb-msg--customer { background: var(--t-surface-2); }
.bb-msg--internal { border-style: dashed; border-color: var(--t-act-tx); background: var(--t-act-bg); color: var(--t-act-tx); }
.bb-msg--internal p { color: var(--t-text); }
.bb-list--customers .bb-list__row { --bb-cols: minmax(170px, 1.4fr) minmax(170px, 1.3fr) minmax(110px, .8fr) 70px 110px minmax(120px, 1fr) auto; }
.bb-list--cases .bb-list__row { --bb-cols: minmax(110px, auto) minmax(200px, 2fr) minmax(130px, 1fr) 90px minmax(110px, .9fr) 110px auto; }
.bb-list--returns .bb-list__row { --bb-cols: minmax(100px, auto) 100px minmax(200px, 2fr) 90px minmax(120px, 1fr) 110px auto; }
.bb-list--refunds .bb-list__row { --bb-cols: minmax(100px, auto) 90px 110px 100px minmax(150px, 1.1fr) minmax(150px, 1.4fr) 110px; }
@media (max-width: 900px) {
	.bb-grid2 { grid-template-columns: minmax(0, 1fr); }
	.bb-stack .bb-inline .bb-ff { min-width: 0; flex: 1 1 100%; }
}

/* === system 301 B8 === Finance: overview figures, expense forms, lists, P&L table, accounting */
@media (min-width: 761px) {
	.bb-list--finance .bb-list__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.bb-list--finance .bb-list__row--family { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
}
.bb-list--finance .bb-list__cell { overflow-wrap: anywhere; }
.bb-list--finance .bb-list__end .bb-disclose { text-align: left; }
.bb-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bb-fin-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.bb-fin-filter .bb-ff { margin: 0; min-width: 150px; flex: 1 1 150px; }
.bb-fin-filter .bb-actions { margin: 0; }
.bb-fin-form .bb-field[type="file"] { padding: 10px; }
.bb-fin-form .bb-formactions .bb-btn { min-height: 44px; }
.bb-fin-bars { display: grid; gap: 8px; }
.bb-fin-bar { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(150px, auto); gap: 10px; align-items: center; font-size: 13px; }
.bb-fin-bar__m { color: var(--t-text-muted); font-variant-numeric: tabular-nums; }
.bb-fin-bar__track { display: grid; gap: 3px; }
.bb-fin-bar__track i { display: block; height: 8px; border-radius: 4px; min-width: 2px; }
.bb-fin-bar__rev { background: var(--t-wait-tx); }
.bb-fin-bar__exp { background: var(--t-act-tx); }
.bb-fin-bar__v { text-align: right; font-variant-numeric: tabular-nums; }
.bb-fin-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bb-fin-table th, .bb-fin-table td { padding: 8px 10px; border-bottom: 1px solid var(--t-border); text-align: right; }
.bb-fin-table th[scope="row"], .bb-fin-table thead th:first-child { text-align: left; font-weight: 600; }
.bb-fin-table thead th { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--t-text-muted); }
.bb-fin-table .bb-fin-head th { text-align: left; padding-top: 16px; font-weight: 800; color: var(--t-text); background: var(--t-surface-2); }
.bb-fin-table .bb-fin-sub th, .bb-fin-table .bb-fin-sub td { font-weight: 800; }
.bb-fin-table .bb-fin-total th, .bb-fin-table .bb-fin-total td { font-weight: 800; border-top: 2px solid var(--t-text); }
@media (max-width: 900px) {
	.bb-grid3 { grid-template-columns: minmax(0, 1fr); }
	.bb-fin-bar { grid-template-columns: 60px minmax(0, 1fr); }
	.bb-fin-bar__v { grid-column: 1 / -1; text-align: left; }
	.bb-fin-table { display: block; overflow-x: auto; }
}

/* === system 301 B7 === */
/* Dealer lists: columns follow the header count */
.bb-list--dl4 .bb-list__row { --bb-cols: minmax(180px, 2fr) minmax(110px, 1fr) minmax(100px, .9fr) minmax(90px, auto); }
.bb-list--dl5 .bb-list__row { --bb-cols: minmax(170px, 1.8fr) minmax(120px, 1.2fr) minmax(100px, .9fr) minmax(100px, .9fr) minmax(80px, auto); }
.bb-list--dl6 .bb-list__row { --bb-cols: minmax(150px, 1.4fr) minmax(150px, 1.6fr) minmax(90px, .8fr) minmax(90px, .8fr) minmax(90px, .9fr) minmax(80px, auto); }
.bb-list--dl7 .bb-list__row { --bb-cols: minmax(140px, 1.3fr) minmax(130px, 1.4fr) minmax(80px, .8fr) minmax(100px, .9fr) minmax(90px, .8fr) minmax(80px, .7fr) auto; }
@media (max-width: 900px) { .bb-list--dl4 .bb-list__row, .bb-list--dl5 .bb-list__row, .bb-list--dl6 .bb-list__row, .bb-list--dl7 .bb-list__row { --bb-cols: minmax(0, 1fr) auto; } }
/* Dealer Portal cards, store and checklist */
.bb-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0 0 18px; }
.bb-dcard { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bb-dcard h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.bb-dcard p { margin: 0; }
.bb-dprod img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--t-surface-2, #f4f3ee); border-radius: 8px; }
.bb-field--qty { width: 84px; }
.bb-navcount { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--t-accent, #f3ea22); color: #141416; font-size: 11px; font-weight: 800; text-align: center; margin-left: auto; }
.bb-req { border: 1px solid var(--t-border); border-radius: 10px; padding: 12px 14px; }
.bb-req header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.bb-req p { margin: 4px 0; }
/* Dealer sign-in: what the portal offers, beside the form (prototype dealer/login) */
.bb-dlogin__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; width: min(980px, 100%); align-items: center; }
.bb-dlogin__hero { color: #f4f3ee; }
.bb-dlogin__hero h2 { font-family: 'Anton', 'Inter', sans-serif; text-transform: uppercase; font-size: clamp(30px, 5vw, 48px); line-height: .95; margin: 8px 0 12px; }
.bb-dlogin__hero p { color: #d3d3ce; max-width: 46ch; }
.bb-dlogin__perks { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; color: #d3d3ce; }
.bb-dlogin__perks b { color: #f3ea22; }
.bb-dlogin__apply a { color: #f3ea22; }
.bb-dlogin__box { text-align: left; }
@media (max-width: 820px) { .bb-dlogin__wrap { grid-template-columns: minmax(0, 1fr); } .bb-dlogin__hero { text-align: center; } .bb-dlogin__perks { justify-items: center; } }

/* === system 301 B10 === */
/* Dashboard: integration banner, My tasks / Needs attention rows, activity feed, quick links */
.bb-warnbox { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--t-bad-tx); border-left-width: 4px; background: var(--t-bad-bg); color: var(--t-text); border-radius: var(--radius); }
.bb-warnbox a { color: inherit; text-decoration: underline; }
.bb-dash-att { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.bb-dash-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; background: var(--t-surface); border: 1px solid var(--t-border-card); border-left: 4px solid var(--t-prog-tx, var(--t-border)); border-radius: var(--radius); min-width: 0; }
.bb-dash-row--critical { border-left-color: var(--t-bad-tx); }
.bb-dash-row--warning { border-left-color: var(--t-act-tx); }
.bb-dash-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bb-dash-row__tag { color: var(--t-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.bb-dash-row__t { font-weight: 700; overflow-wrap: anywhere; }
.bb-dash-row__m { color: var(--t-text-muted); font-size: 13px; overflow-wrap: anywhere; }
.bb-dash-moreatt { margin: 0 0 16px; }
.bb-dash-moreatt > summary { cursor: pointer; display: inline-block; padding: 8px 14px; border: 1px solid var(--t-border); border-radius: var(--radius); font-weight: 700; margin-bottom: 10px; }
.bb-dash-moreatt[open] > summary { margin-bottom: 10px; }
.bb-dash-more { margin: 0 0 16px; }
.bb-dash-empty { margin: 0 0 18px; padding: 14px 16px; background: var(--t-surface); border: 1px solid var(--t-border-card); border-radius: var(--radius); color: var(--t-text-muted); text-align: center; }
.bb-dash-empty--ok { color: var(--t-wait-tx); font-weight: 700; }
.bb-dash-foot { margin-top: 8px; }
.bb-feed { list-style: none; margin: 0; padding: 0; }
.bb-feed li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--t-border); min-width: 0; }
.bb-feed li:last-child { border-bottom: 0; }
.bb-feed__a { font-weight: 600; overflow-wrap: anywhere; }
.bb-feed__b { color: var(--t-text-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.bb-quick { list-style: none; margin: 0; padding: 0; }
.bb-quick a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--t-border); color: inherit; text-decoration: none; font-weight: 600; }
.bb-quick li:last-child a { border-bottom: 0; }
/* Administration: settings, the role editor and the individual permission editor */
.bb-setting { padding: 14px 0; border-bottom: 1px solid var(--t-border); min-width: 0; }
.bb-setting:last-child { border-bottom: 0; }
.bb-setting__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; overflow-wrap: anywhere; }
.bb-setting__val { margin: 4px 0; }
.bb-setting__help { margin: 4px 0 8px; font-size: 13px; }
.bb-setform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-setform .bb-field { max-width: 100%; }
.bb-capgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 10px 0 16px; }
.bb-capgroup { margin: 0; padding: 10px 14px; border: 1px solid var(--t-border); border-radius: var(--radius); min-width: 0; }
.bb-capgroup legend { padding: 0 6px; font-weight: 800; }
.bb-capgroup .bb-check { display: block; padding: 4px 0; overflow-wrap: anywhere; }
.bb-check.is-off { opacity: .6; }
.bb-checkrow { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 10px; }
.bb-permgroup { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.bb-permgroup legend { font-weight: 800; margin-bottom: 6px; }
.bb-perms { list-style: none; margin: 0; padding: 0; border: 1px solid var(--t-border); border-radius: var(--radius); }
.bb-perm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 180px) auto 150px; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--t-border); }
.bb-perm:last-child { border-bottom: 0; }
.bb-perm.is-on .bb-perm__label { font-weight: 600; }
.bb-perm__label, .bb-perm__src { min-width: 0; overflow-wrap: anywhere; }
.bb-perm select { width: 100%; }
.bb-table { width: 100%; border-collapse: collapse; }
.bb-table th, .bb-table td { padding: 8px 10px; border-bottom: 1px solid var(--t-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.bb-tablewrap { overflow-x: auto; }
.bb-list--integrations .bb-list__row { --bb-cols: minmax(140px, 1fr) minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(150px, 1.4fr); }
.bb-list--hero .bb-list__row { --bb-cols: minmax(150px, 1.3fr) minmax(170px, 1.4fr) 110px minmax(130px, 1fr) 60px auto; }
.bb-hero-thumb { display: block; width: 64px; height: 40px; object-fit: contain; background: var(--t-thead); border-radius: 4px; margin-bottom: 6px; }
.bb-hero-artform select { max-width: 160px; }
@media (max-width: 760px) {
	.bb-dash-row { grid-template-columns: minmax(0, 1fr) auto; }
	.bb-dash-row__sev { grid-column: 1 / -1; }
	.bb-perm { grid-template-columns: minmax(0, 1fr) auto; }
	.bb-perm__src { grid-column: 1; }
	.bb-perm select { grid-column: 1 / -1; }
	.bb-capgrid { grid-template-columns: minmax(0, 1fr); }
	.bb-hero-artform select { max-width: 100%; }
}
.bb-list--sales7 .bb-list__row { --bb-cols: minmax(200px, 2fr) 70px 100px 70px 90px 110px 150px; }
.bb-list--salescat .bb-list__row { --bb-cols: minmax(200px, 2fr) 80px 110px 80px; }
@media (max-width: 760px) {
	.bb-list--sales7 .bb-list__label, .bb-list--salescat .bb-list__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; margin-right: 6px; color: var(--t-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
}

/* =====================================================================================================
   7 VISUAL REFINEMENT (Build 301-V) - presentation only

   One layer, after everything above, so it can be read (and removed) as a unit. It changes shape, spacing,
   shadow and the navigation's look; no colour meaning, column, label or destination changes.
     - corners: cards / panels / lists / tables 8px (--radius), buttons / fields / navigation 6px (--r-control),
       status badges and filter chips keep their pill
     - shadows: one light family (--t-card-shadow, --t-soft-shadow); borders lighter
     - sidebar: chevrons that open a module in place, compact counters, its own scrolling with no visible bar,
       and room for the SANDBOX ribbon (sandbox only)
     - operational lists stay compact: a list row is never taller than before, and usually shorter
   ===================================================================================================== */

/* ---- the SANDBOX ribbon (sandbox only): the sidebar and top bar start below it instead of under it */
body.bb-portal:has(> .bb-sandbox-ribbon) { --bb-ribbon-h: 30px; }
.bb-side { top: var(--bb-ribbon-h); }
.bb-top { top: var(--bb-ribbon-h); }

/* ---- sidebar: brand, independent scrolling without a visible bar */
.bb-side__brand { padding: 16px 20px 14px; }
.bb-side__nav { padding: 10px 10px 12px; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.bb-side__nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
.bb-side__foot { padding: 12px 18px 14px; }
.bb-signout { border-radius: var(--r-control); }

/* ---- navigation items: link, counter and chevron share one row */
.bb-nav__item { position: relative; margin: 0 0 2px; }
.bb-nav__link { margin-bottom: 0; padding: 8px 12px; border-left: 0; border-radius: var(--r-control); gap: 10px; transition: background-color .12s ease, color .12s ease; }
.bb-nav__item.has-sub > .bb-nav__link { padding-right: 40px; }
.bb-nav__item:has(> .bb-nav__count) > .bb-nav__link { padding-right: 46px; }
.bb-nav__item.has-sub:has(> .bb-nav__count) > .bb-nav__link { padding-right: 72px; }
.bb-nav__link.is-active { box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.bb-nav__more { margin: 0; }
.bb-nav__toggle { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-control); background: transparent; color: var(--t-nav-sub); cursor: pointer; list-style: none; }
.bb-nav__toggle::-webkit-details-marker { display: none; }
.bb-nav__toggle::marker { content: ''; }
.bb-nav__toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.bb-nav__toggle:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.bb-nav__more[open] > .bb-nav__toggle svg { transform: rotate(180deg); }
.bb-nav__toggle:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 0; }
.bb-nav__link.is-active ~ .bb-nav__more > .bb-nav__toggle { color: var(--t-accent-ink); }
.bb-nav__link.is-active ~ .bb-nav__more > .bb-nav__toggle:hover { background: rgba(20, 20, 22, .10); color: var(--t-accent-ink); }

/* counters: compact, right-aligned, beside the chevron; yellow when something waits on someone */
.bb-nav__count { position: absolute; top: 9px; right: 10px; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--pill); background: rgba(255, 255, 255, .14); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.bb-nav__item.has-sub > .bb-nav__count { right: 38px; }
.bb-nav__count--act { background: var(--t-accent); color: var(--t-accent-ink); }
.bb-nav__link.is-active ~ .bb-nav__count { background: var(--t-accent-ink); color: var(--t-accent); }
.bb-nav__sub li { position: relative; }
.bb-nav__sub .bb-nav__count { top: 6px; right: 6px; }
.bb-nav__sub li:has(> .bb-nav__count) > a { padding-right: 40px; }

/* sub-pages: indented under the module, the current one marked */
.bb-nav__sub { margin: 4px 0 8px 22px; padding: 0 0 0 10px; }
.bb-nav__sub a { padding: 6px 10px; border-radius: var(--r-control); line-height: 18px; }
.bb-nav__sub a:hover { background: rgba(255, 255, 255, .06); }
.bb-nav__sub a.is-active { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 2px 0 0 var(--t-accent); }

/* dealer portal: its cart counter in the same style (it sits inside the link) */
.bb-nav__link .bb-navcount { min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--pill); font-size: 11px; line-height: 18px; }

/* ---- top bar */
.bb-top { gap: 12px; padding: 0 24px; box-shadow: 0 1px 0 var(--t-border); border-bottom-color: transparent; }
.bb-iconbtn, .bb-hb { border-radius: var(--r-control); }
.bb-topsearch .bb-field { border-radius: var(--r-control); background: var(--t-surface-2); }

/* ---- controls: buttons and fields 6px */
.bb-btn { border-radius: var(--r-control); box-shadow: var(--t-soft-shadow); }
.bb-btn--primary { box-shadow: 0 1px 2px rgba(20, 20, 22, .10), 0 2px 6px var(--t-accent-glow); }
.bb-btn--ghost { box-shadow: none; }
.bb-field { border-radius: var(--r-control); box-shadow: none; }
.bb-field:focus { border-color: var(--t-text); outline: none; box-shadow: 0 0 0 3px var(--t-accent-glow); }
.bb-seg__opts { border-radius: var(--r-control); overflow: hidden; }
.bb-steps__step > a, .bb-steps__in, .bb-steps__btn { border-radius: var(--r-control); }
.bb-dash-moreatt > summary { border-radius: var(--r-control); }
.bb-hero-thumb, .bb-pp-card { border-radius: var(--r-control); }

/* ---- surfaces: cards, panels, lists, tables 8px with one shadow family */
.bb-panel, .bb-list, .bb-modcard, .bb-tile, .bb-callout, .bb-empty, .bb-gate__box, .bb-warnbox, .bb-dash-row, .bb-dash-empty,
.bb-shipmgr, .bb-syncchip, .bb-attnlist, .bb-addrcard, .bb-pkg, .bb-rate, .bb-dcard, .bb-req, .bb-msg, .bb-access, .bb-perms,
.bb-capgroup, .bb-rolecard, .bb-notice, .bb-savebar, .bb-callout--plain, .bb-slip, .bb-pp-sec, .bb-wc-json, .bb-quote, .bb-note,
.bb-tablewrap, .bb-media img, .bb-media__big, .bb-pick img, .bb-invchart svg, .bb-thumb, .bb-list__thumb, .bb-featured img, .bb-featured .bb-thumb {
	border-radius: var(--radius);
}
.bb-panel, .bb-list, .bb-tile, .bb-dash-row, .bb-dash-empty, .bb-callout, .bb-syncchip, .bb-attnlist, .bb-shipmgr, .bb-dcard, .bb-notice { box-shadow: var(--t-soft-shadow); }
.bb-modcard { box-shadow: var(--t-card-shadow); }
.bb-attnlist, .bb-shipmgr, .bb-perms, .bb-access { overflow: hidden; }   /* row backgrounds follow the rounded corner (panels are not clipped: a sticky save bar and focus rings must never be) */
.bb-panel > .bb-facts:last-child, .bb-panel > .bb-lines:last-child { border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.bb-shipmgr__head { border-radius: var(--radius) var(--radius) 0 0; }
.bb-quote, .bb-callout, .bb-dash-row, .bb-attn, .bb-notice { border-left-width: 4px; }
.bb-attnlist .bb-attn:last-child { border-bottom: 0; }
.bb-panel__head { padding: 14px 20px; }
.bb-panel__body { padding: 16px 20px; }

/* tiles: the accent mark follows the corner */
.bb-tile { overflow: hidden; }
.bb-tile::before { top: 0; left: 0; width: 32px; border-radius: 0 0 var(--r-control) 0; }

/* Dashboard module cards: a quiet icon tile and a little more room (dashboards may breathe) */
.bb-modcard { padding: 18px 20px 16px; transition: box-shadow .15s ease, border-color .15s ease; }
.bb-modcard:hover { border-color: var(--t-border-strong); }
.bb-modcard__title { gap: 12px; }
.bb-modcard__title svg { box-sizing: content-box; width: 20px; height: 20px; padding: 7px; border-radius: var(--r-control); background: var(--t-accent-soft); color: var(--t-text); }
.bb-stats { gap: 10px 12px; }
.bb-cards { gap: 16px; }

/* ---- operational lists: compact rows, the same columns */
.bb-list__row { padding-top: 11px; padding-bottom: 11px; }
.bb-list__row--head { padding-top: 10px; padding-bottom: 10px; }
.bb-list__tags { gap: 3px; }   /* kind tags stay stacked (a narrow column must never squeeze the next one) */
.bb-list__tags .bb-pill { padding: 2px 8px; font-size: 10px; }   /* the same pills, compact inside a list cell: shorter rows, narrower column */
.bb-list__row--rec { transition: background-color .1s ease; }
.bb-list__foot { border-radius: 0 0 var(--radius) var(--radius); }

/* tables inside panels: a quiet header and row hover */
.bb-table th, .bb-fin-table thead th { color: var(--t-text-muted); font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.bb-table tbody tr:hover td, .bb-fin-table tbody tr:hover td, .bb-fin-table tbody tr:hover th { background: var(--t-row-hover); }
.bb-tablewrap { border: 1px solid var(--t-border-card); background: var(--t-surface); }
.bb-tablewrap > .bb-table tr:last-child td { border-bottom: 0; }

/* chips (filters) keep their pill; the selected one uses the sidebar charcoal in both themes */
.bb-chip { transition: border-color .1s ease, background-color .1s ease; }
.bb-chip:not(.is-on):hover { border-color: var(--t-border-strong); }

/* page head: a little air between the head and the first control row */
.bb-pagehead { margin-bottom: 16px; }
.bb-toolbar { margin-bottom: 12px; }

/* ---- responsive: the ribbon wraps on narrow screens; the off-canvas menu sits above it */
@media (max-width: 900px) {
	.bb-side { top: 0; z-index: 100001; }
	.bb-side:target ~ .bb-scrim { z-index: 100000; }
	.bb-top { top: 0; }
	body.bb-portal:has(> .bb-sandbox-ribbon) .bb-top { position: relative; }   /* the wrapped ribbon already holds the top of the screen */
	.bb-top { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.bb-nav__toggle svg, .bb-nav__link, .bb-modcard, .bb-chip, .bb-list__row--rec { transition: none; }
}