/* ===========================================================================
   Bridge Platform — design system (refined light SaaS)
   Single source of truth: tokens + components. Loaded by every surface.
   Class names mirror the existing markup so JS keeps binding; only the LOOK
   changes. See /Users/.../plans for the redesign plan.
   =========================================================================== */

/* ---- Fonts (self-hosted Geist) ---- */
@font-face {
  font-family: "Geist";
  src: url("/static/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --brand: #2563eb; --brand-hover: #1d4ed8; --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-700: #1d4ed8;
  --success: #16a34a; --success-hover: #15803d; --success-50: #ecfdf5; --success-100: #d1fae5; --success-700: #15803d;
  --danger: #dc2626; --danger-hover: #b91c1c; --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-700: #b91c1c;
  --warning: #d97706; --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-700: #92400e;

  --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8;
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f8fafc;
  --border: #e8eaed; --border-strong: #d6dae0; --row-hover: #f8fafc;

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sh-2: 0 4px 6px -2px rgba(16,24,40,.05), 0 12px 28px -6px rgba(16,24,40,.12);
  --sh-pop: 0 16px 40px -12px rgba(16,24,40,.28);

  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --header-h: 58px;
  --maxw: 1240px;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 18px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
h3 { font-size: 15px; font-weight: 650; margin: 0; }
small { color: var(--muted); }
code, .mono { font-family: var(--font-mono); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); border-radius: var(--r-sm); }

/* ---- App header / nav (sticky white bar, brand as accent) ---- */
.app-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 24px;
  background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
}
.app-header__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.app-header__brand:hover { text-decoration: none; }
.app-header__brand .dot { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--brand), #4f7cf7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), var(--sh-1); }
.app-nav { display: flex; align-items: center; gap: 4px; }
.app-nav a {
  position: relative; color: var(--muted); font-weight: 550; font-size: 13.5px;
  padding: 8px 12px; border-radius: var(--r-sm); transition: color .15s, background .15s;
}
.app-nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.app-nav a.active { color: var(--brand); }
.app-nav a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px; }
.app-header__right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.app-header__right .who { font-weight: 600; color: var(--ink-2); }

/* ---- Page container ---- */
.page, .container { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 56px; }
.page--narrow { max-width: 920px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }

/* ---- Cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 22px; box-shadow: var(--sh-1); transition: box-shadow .18s ease, transform .18s ease, border-color .18s;
}
a.card { color: var(--ink); display: block; }
a.card:hover { text-decoration: none; box-shadow: var(--sh-2); transform: translateY(-2px); border-color: #dfe3e8; }
.card h2, .card h3 { margin: 0 0 6px; }
.card .desc, .card p { color: var(--muted); font-size: 13.5px; margin: 0; }
.card-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; background: var(--brand-50); color: var(--brand); margin-bottom: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.cards .section-label { grid-column: 1 / -1; margin: 8px 0 -6px; }

/* metric/summary cards */
.summary, .summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.summary-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sh-1); }
.summary-card .label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.summary-card .value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; font-family: var(--font-mono); }
.summary-card .value.green, .summary-card .value.positive { color: var(--success); }
.summary-card .value.red, .summary-card .value.negative { color: var(--danger); }

/* info / alert banners */
.alert-banner, .project-banner { background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); border-radius: var(--r); padding: 12px 16px; font-size: 13.5px; margin-bottom: 18px; }
.alert-banner.warn { background: var(--warning-50); border-color: var(--warning-100); color: var(--warning-700); }
.alert-banner.error { background: var(--danger-50); border-color: var(--danger-100); color: var(--danger-700); }

/* ---- Buttons ---- */
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; padding: 9px 15px; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s, transform .05s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn:hover { text-decoration: none; }
.btn-primary, .btn-primary:visited { background: var(--brand); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary, .btn-outline { background: var(--surface); color: var(--ink-2); border-color: var(--border-strong); }
.btn-secondary:hover, .btn-outline:hover { background: var(--surface-2); border-color: #c3c9d2; color: var(--ink); }
.btn-danger, .btn-reject { background: var(--danger); color: #fff; }
.btn-danger:hover, .btn-reject:hover { background: var(--danger-hover); }
.btn-green, .btn-approve { background: var(--success); color: #fff; }
.btn-green:hover, .btn-approve:hover { background: var(--success-hover); }
.btn-yellow { background: var(--warning); color: #fff; }
.btn-yellow:hover { background: var(--warning-700); }
.btn-copy { background: var(--ink-2); color: #fff; }
.btn-copy:hover { background: var(--ink); }
.btn-copy.copied { background: var(--success); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-disabled, .btn:disabled, button:disabled { background: #e9ecf1 !important; color: var(--faint) !important; border-color: transparent !important; cursor: not-allowed; box-shadow: none; }
.btn-disabled:hover, .btn:disabled:hover, button:disabled:hover { background: #e9ecf1 !important; }

/* bare buttons (billing uses <button id=...>) inherit a sane default */
button { font-family: inherit; }
button.secondary { background: var(--surface); color: var(--ink-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 9px 15px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
button.secondary:hover { background: var(--surface-2); }

/* ---- Forms ---- */
label { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 9px 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
input::placeholder { color: var(--faint); }
.search { max-width: 320px; }
.field { margin-bottom: 16px; }
/* Password show/hide toggle (eye icon inside the field) */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 42px; display: grid; place-items: center; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--faint); border-radius: 0 var(--r-sm) var(--r-sm) 0; transition: color .15s; }
.pw-toggle:hover { color: var(--muted); }
.pw-toggle:focus-visible { outline: none; color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.30); }
.pw-toggle svg { width: 18px; height: 18px; display: block; }
.pw-toggle .icon-hide { display: none; }
.pw-toggle.is-visible .icon-show { display: none; }
.pw-toggle.is-visible .icon-hide { display: block; }
.error, .err { color: var(--danger); font-size: 13px; }
.success { color: var(--success); font-size: 13px; }
.hint, .muted { color: var(--muted); font-size: 13px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }

/* ---- Tables ---- */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-1); overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { position: sticky; top: 0; z-index: 1; }
th { text-align: left; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .045em; padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--ink-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--row-hover); }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.price { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.skip, .na { color: var(--faint); }
.positive { color: var(--success); font-weight: 600; }
.negative { color: var(--danger); font-weight: 600; }
tr.section td { background: var(--surface-2); font-weight: 650; color: var(--ink); text-transform: none; }
tr.subtotal td { background: #fbfcfe; font-weight: 600; }
tr.grand td { background: var(--brand-50); font-weight: 700; color: var(--ink); font-size: 14px; }
tr.section-divider td { background: var(--warning-50); color: var(--warning-700); font-weight: 600; font-size: 12px; }
tr.add-row td { background: var(--surface-2); }
input.changed, input[type=number].changed, input[type=text].changed { border-color: var(--warning); background: var(--warning-50); }
.device-count { color: var(--faint); font-weight: 500; font-size: 12px; }
.count { color: var(--muted); font-size: 13px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.you { color: var(--faint); font-size: 11px; margin-left: 6px; }
.email { color: var(--muted); font-size: 13px; }

/* status text (ecommerce batch list) */
.status-ready { color: var(--success); font-weight: 600; }
.status-completed { color: var(--brand); font-weight: 600; }
.status-pending { color: var(--warning); font-weight: 600; }

/* ---- Badges ---- */
.badge { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.badge-admin { background: var(--brand-50); color: var(--brand-700); }
.badge-user { background: #f1f3f5; color: var(--muted); }
.badge-active, .badge-green, .badge-functional { background: var(--success-50); color: var(--success-700); }
.badge-pending, .badge-amber, .badge-improvement { background: var(--warning-50); color: var(--warning-700); }
.badge-error, .badge-asis { background: var(--danger-50); color: var(--danger-700); }
.badge-repair { background: var(--brand-50); color: var(--brand-700); }
.new-badge { background: var(--success-50); color: var(--success-700); border-radius: var(--r-pill); padding: 2px 8px; font-size: 10px; font-weight: 700; margin-left: 6px; text-transform: uppercase; letter-spacing: .04em; }

/* decision pills (ecommerce) */
.decision-approved { color: var(--success-700); background: var(--success-50); padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.decision-rejected { color: var(--danger-700); background: var(--danger-50); padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.decision-processing, .decision-pending { color: var(--warning-700); background: var(--warning-50); padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }

/* ---- Modal ---- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); z-index: 2000; justify-content: center; align-items: center; padding: 24px; }
.modal-overlay.active { display: flex; animation: fade .15s ease; }
.modal { background: var(--surface); border-radius: var(--r-lg); width: 460px; max-width: 100%; max-height: 88vh; overflow: auto; padding: 26px; box-shadow: var(--sh-pop); position: relative; animation: pop .18s ease; }
.modal h2, .modal h3 { margin: 0 0 18px; }
.modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--faint); cursor: pointer; padding: 4px; }
.modal-close:hover { color: var(--ink); }
.modal-loader { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 16px 0; }
.spinner { width: 20px; height: 20px; border: 2.5px solid var(--border-strong); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-body { display: none; }
.modal-body.ready { display: block; }
.modal-meta { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.modal-actions { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.listing-field { margin-bottom: 14px; }
.listing-field label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.listing-field .value { color: var(--ink); font-size: 14px; margin-top: 2px; }
.listing-field ul { margin: 4px 0 0; padding-left: 18px; }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---- Toast ---- */
.toast { display: none; position: fixed; top: 18px; right: 18px; padding: 12px 18px; border-radius: var(--r-sm); color: #fff; font-weight: 600; font-size: 13.5px; z-index: 3000; box-shadow: var(--sh-pop); animation: toastin .2s ease; }
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
@keyframes toastin { from { opacity: 0; transform: translateX(12px); } }

/* ---- Tabs (OSL billing) ---- */
.tabs, .tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-btn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 13.5px; padding: 10px 14px; cursor: pointer; margin-bottom: -1px; }
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.cat-select { min-width: 160px; }

/* ---- Billing controls ---- */
.controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.controls .field { margin-bottom: 0; }
.loader { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 28px; justify-content: center; }
.diag { color: var(--muted); font-size: 12px; font-family: var(--font-mono); white-space: pre-wrap; }

/* ---- Chat (empty hero -> active conversation) ---- */
/* Natural page scroll: the whole document scrolls (header is sticky above, the
   composer is sticky below) so a wheel/trackpad scroll works from anywhere on the
   page — not only inside the centered message column. */
.chat-shell { max-width: 760px; margin: 0 auto; padding: 0 24px; width: 100%; display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); }
/* empty state: greeting + composer centered together */
.chat-shell.is-empty { justify-content: center; gap: 26px; padding-bottom: 7vh; }
.chat-shell.is-empty #chat-window { display: none; }
.chat-shell.is-active .chat-hero { display: none; }

.chat-hero { text-align: center; }
.chat-hero__spark { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 16px; display: grid; place-items: center; color: var(--brand); background: var(--brand-50); box-shadow: var(--sh-1); }
.chat-hero h1 { font-size: 27px; font-weight: 650; letter-spacing: -.025em; line-height: 1.2; }
.chat-hero .sub { color: var(--muted); font-size: 14.5px; margin: 10px 0 0; }

#chat-window { flex: 1 0 auto; padding: 26px 2px; display: flex; flex-direction: column; gap: 16px; }
/* bottom-anchor: the latest exchange sits just above the composer instead of
   leaving a dead gap; scroll-safe (no flex-end overflow clipping). */
#chat-window > :first-child { margin-top: auto; }
.message { max-width: 80%; padding: 12px 16px; border-radius: var(--r-lg); font-size: 14.5px; line-height: 1.55; }
.message.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.message.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; box-shadow: var(--sh-1); }
.message.bot em { color: var(--ink-2); }
.message.bot .sql { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 8px; overflow-x: auto; color: var(--ink-2); }
.thinking { color: var(--muted); font-style: italic; }
.message.bot table { font-size: 12px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; box-shadow: none; }
.message.bot th { position: static; background: var(--surface-2); color: var(--ink-2); text-transform: none; letter-spacing: 0; font-size: 11px; padding: 6px 9px; }
.message.bot td { padding: 6px 9px; }

/* composer */
.composer-wrap { width: 100%; }
.chat-shell.is-active .composer-wrap { position: sticky; bottom: 0; z-index: 10; background: var(--bg); padding: 12px 0 16px; box-shadow: 0 -10px 16px -10px rgba(15, 23, 42, .06); }
#input-area { display: flex; align-items: flex-end; gap: 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 14px 14px 14px 20px; box-shadow: var(--sh-2); transition: border-color .15s, box-shadow .15s; }
#input-area:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
#question { flex: 1; border: none; background: transparent; color: var(--ink); font-family: inherit; font-size: 15.5px; line-height: 1.6; padding: 6px 0; resize: none; min-height: 56px; max-height: 240px; overflow-y: auto; }
#question:focus { outline: none; box-shadow: none; }
#question::placeholder { color: var(--faint); }
#send-btn { flex: none; width: 42px; height: 42px; border-radius: 12px; border: none; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .05s; }
#send-btn:hover { background: var(--brand-hover); }
#send-btn:active { transform: translateY(1px); }

.composer-hint { text-align: center; color: var(--faint); font-size: 11.5px; margin-top: 9px; }
.composer-hint kbd { font-family: var(--font-mono); font-size: 10.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--muted); }

.chat-suggestions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 16px; }
.chat-shell.is-active .chat-suggestions { display: none; }
.chat-suggestions button { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 9px 15px; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: color .15s, background .15s, border-color .15s; font-family: inherit; }
.chat-suggestions button:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }

/* ---- Chat: streaming stage, answer, results ---- */
.chat-stage { color: var(--muted); font-style: italic; font-size: 13px; margin-bottom: 2px; }
.chat-answer ul { margin: 6px 0 2px; padding-left: 20px; }
.chat-answer li { margin: 2px 0; }
.message.bot .kv-card { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.kv-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 10px; font-size: 12.5px; }
.kv-row:nth-child(even) { background: var(--surface-2); }
.kv-k { color: var(--ink-2); }
.kv-v { font-weight: 600; text-align: right; }
.truncation-note { color: var(--faint); font-size: 11.5px; margin-top: 6px; }

/* results action bar (export / copy) */
.chat-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-actions button { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 11px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s, background .15s; }
.chat-actions button:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }

/* inline SVG bar chart */
.chat-chart { margin-top: 10px; }
.chart-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 8px; }
.chart-toggle button { background: var(--surface); border: none; padding: 4px 12px; font-size: 11.5px; color: var(--muted); cursor: pointer; font-family: inherit; }
.chart-toggle button.on { background: var(--brand); color: #fff; }
.chart-view { overflow-x: auto; }
.chart-svg { max-width: 100%; display: block; }
.chart-svg .c-bar { fill: var(--brand); }
.chart-svg .c-lbl { fill: var(--ink-2); font-size: 11px; }
.chart-svg .c-val { fill: var(--muted); font-size: 11px; font-weight: 600; }

/* ---- Chat: mobile ---- */
@media (max-width: 640px) {
    .chat-shell { padding: 0 12px; }
    .message { max-width: 92%; }
    .chat-shell.is-active { padding-bottom: 0; }
    .chat-shell.is-active .composer-wrap { position: sticky; bottom: 0; padding: 8px 0 10px; background: var(--bg); border-top: 1px solid var(--border); }
    .message.bot .table-wrap, .chart-view { overflow-x: auto; }
    .chart-svg { min-width: 420px; }
}

/* ---- Auth (login / set password) ---- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, #eef2ff 0%, var(--bg) 55%); }
.auth-card { width: 360px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 34px 30px; box-shadow: var(--sh-2); }
.auth-card .brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 22px; font-weight: 700; font-size: 17px; }
.auth-card .brand .dot { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), #4f7cf7); }
.auth-card h2 { text-align: center; margin: 0 0 20px; }
.auth-card .field:last-of-type { margin-bottom: 20px; }

/* ---- Footer / misc ---- */
.footer { color: var(--faint); font-size: 12px; text-align: center; padding: 28px 0 8px; }
.section-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: 24px 0 10px; }

/* ===========================================================================
   Data-page components (ecommerce dashboard, analytics, billing)
   Added so the Python-embedded templates can drop their own <style> and rely
   on these shared classes. Additive only — never overrides the above.
   =========================================================================== */

/* empty state */
.empty { color: var(--muted); text-align: center; padding: 48px 0; font-size: 14px; }

/* wider modal (ecommerce listing preview) */
.modal--wide { width: 680px; }

/* full-width button (form submit) */
.btn-block { width: 100%; }

/* compact, side-by-side action buttons in table rows (ecommerce approve/reject) */
.actions .btn-approve, .actions .btn-reject { padding: 6px 12px; font-size: 12.5px; }
.actions--inline { flex-wrap: nowrap; }

/* form card (Telus Weekly form) */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px 32px; box-shadow: var(--sh-1); }
.form-card h2 { margin: 0 0 6px; }
.form-card p { margin: 0 0 22px; color: var(--muted); font-size: 13.5px; }

/* alert-banner inner pieces (TW report unpriced-models warning) */
.alert-banner .alert-title { font-weight: 700; color: var(--danger-700); font-size: 14px; margin-bottom: 8px; }
.alert-banner .alert-models { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.alert-banner .alert-models span { display: inline-block; background: var(--surface); border: 1px solid var(--danger-100); padding: 2px 10px; border-radius: var(--r-sm); margin: 2px 4px 2px 0; font-size: 12px; }
.alert-banner a { color: var(--danger-700); font-weight: 600; text-decoration: underline; }

/* breakdown chip row (TW report) */
.breakdown { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.breakdown span { font-size: 13px; color: var(--muted); }
.breakdown strong { color: var(--ink); }

/* toolbar (price review) */
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.model-name { font-weight: 600; min-width: 200px; color: var(--ink); }
tr.new-model-row td { background: var(--warning-50); }
tr.new-model-row:hover td { background: var(--warning-100); }
/* Type column select: size to its options (+chevron) instead of the narrow column */
select[data-field="device_type"], #new-type { width: auto; min-width: 116px; }

/* compact manual inputs inside billing tables */
input.manual { width: 80px; padding: 6px 8px; }

/* OSL tab nav (alias) + category toolbar + AI button */
.tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.cat-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.btn.ai-btn, button.ai-btn { background: #7c3aed; color: #fff; }
.btn.ai-btn:hover, button.ai-btn:hover { background: #6d28d9; }

/* TMS flat-table data tab */
.flat-scroll { max-height: 60vh; overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
.flat-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.flat-table th { position: sticky; top: 0; background: #f8fafc; z-index: 1; text-align: left;
                 padding: 6px 10px; border-bottom: 1px solid #e5e7eb; font-weight: 600; }
.flat-table td { padding: 5px 10px; border-bottom: 1px solid #f1f5f9; }

/* Global route/navigation loader — spinner shown while a page loads */
.route-loader { position: fixed; inset: 0; z-index: 3000; display: none;
  align-items: center; justify-content: center;
  background: rgba(15,23,42,.42); backdrop-filter: blur(2px); }
.route-loader.active { display: flex; animation: fade .15s ease; }
.route-loader__box { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 34px; background: #fff; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(2,6,23,.28); }
.route-loader__spinner { width: 40px; height: 40px;
  border: 4px solid var(--border-strong, #cbd5e1); border-top-color: var(--brand, #2563eb);
  border-radius: 50%; animation: spin .7s linear infinite; }
.route-loader__label { color: var(--muted, #64748b); font-size: 13px; font-weight: 500; }

/* ===========================================================================
   Billing Home Page — Stepper selector, compare, period label, report slots
   =========================================================================== */

/* Period status row */
.bh-period-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.bh-period-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bh-period-label span {
  color: var(--ink);
  font-weight: 700;
}
.bh-checks {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.bh-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  min-height: 32px;
}
.bh-checks input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
  cursor: pointer;
}
.bh-checks input[type=checkbox]:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 1px; }

/* ---- Ecommerce scrape-scope card ---- */
.scope-card { margin-bottom: 22px; }
.scope-card h3 { font-size: 15px; margin: 0 0 4px; }
.scope-card > p.muted { margin: 0 0 4px; }
.scope-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--border); }
.scope-row__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); min-width: 84px; }
.scope-cats { margin-left: 0; }  /* override .bh-checks margin-left:auto */
.scope-scope { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.scope-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0; cursor: pointer; user-select: none; }
.scope-radio input[type=radio] { width: auto; accent-color: var(--brand); cursor: pointer; }
.scope-scope input[type=number] { width: 62px; padding: 6px 8px; }
.scope-scope input[type=number]:disabled { background: #e9ecf1; color: var(--faint); cursor: not-allowed; }
.scope-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
#scope-preview-out { font-size: 13px; }

/* expandable "Preview impact" details */
.scope-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; margin: 0; padding: 4px 2px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; }
.scope-toggle[hidden] { display: none; }
.scope-toggle:hover { text-decoration: underline; }
.scope-toggle__caret { font-size: 10px; line-height: 1; }
.scope-details { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 18px; }
.scope-details[hidden] { display: none; }
.scope-details__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.scope-details__scroll { overflow-x: auto; }
.scope-details__note { margin: 8px 0 0; }
.scope-details tbody tr.scope-total-row td { font-weight: 700; color: var(--ink); background: var(--surface-2); border-top: 1px solid var(--border-strong); }

/* Report slots */
.bh-report-slot {
  margin-bottom: 28px;
}
.bh-report-slot table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.bh-report-slot table thead th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
}
.bh-report-slot table thead th:not(:first-child) { text-align: right; }
.bh-report-slot table tbody tr { transition: background .1s; }
.bh-report-slot table tbody tr:hover { background: var(--row-hover); }
.bh-report-slot table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  vertical-align: middle;
}
.bh-report-slot table tbody td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.bh-report-slot table tbody tr.bh-section-row td {
  background: var(--surface-2);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  border-bottom: none;
}
.bh-report-slot table tbody tr.bh-total-row td {
  font-weight: 700;
  border-top: 2px solid var(--border-strong);
  border-bottom: none;
  color: var(--ink);
}
.bh-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}
.bh-note a { color: var(--brand); }

/* Slot spinner */
.bh-slot-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
}
.bh-slot-loader .spinner { width: 22px; height: 22px; }
.bh-slot-error {
  padding: 14px 16px;
  background: var(--danger-50);
  border: 1px solid var(--danger-100);
  border-radius: var(--r-sm);
  color: var(--danger-700);
  font-size: 13px;
  margin-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .bh-checks input[type=checkbox] { transition: none; }
}
@media (max-width: 480px) {
  .bh-checks { margin-left: 0; }
  .bh-period-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- Selector A (Stepper) — namespaced to .bha- ---- */
.bha-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  padding: 3px;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.bha-stepper__btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; min-width: 40px; min-height: 40px;
  background: none; border: none; border-radius: var(--r-pill);
  color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0;
}
.bha-stepper__btn:hover { background: var(--surface-2); color: var(--brand); }
.bha-stepper__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); }
.bha-stepper__btn:active { transform: scale(.94); }
.bha-label {
  display: flex; align-items: center; gap: 5px; padding: 0 10px;
  height: 34px; min-height: 40px; min-width: 136px; justify-content: center;
  background: none; border: none; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 14px; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer;
  transition: background .15s, color .15s; white-space: nowrap; letter-spacing: -.01em;
}
.bha-label:hover { background: var(--brand-50); color: var(--brand); }
.bha-label:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); }
.bha-label[aria-expanded="true"] { background: var(--brand-50); color: var(--brand); }
.bha-label svg.bha-chevron { transition: transform .2s; flex-shrink: 0; }
.bha-label[aria-expanded="true"] svg.bha-chevron { transform: rotate(180deg); }
.bha-this-month {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--brand);
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--r-pill); padding: 5px 11px; cursor: pointer;
  transition: background .15s, border-color .15s; white-space: nowrap; height: 32px;
}
.bha-this-month:hover { background: var(--brand-100); border-color: var(--brand); }
.bha-this-month:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); }
.bha-this-month.bha-is-current { color: var(--muted); background: var(--surface-2); border-color: var(--border); cursor: default; pointer-events: none; }
.bha-popover {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 500; width: 264px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-pop); padding: 14px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.bha-popover.bha-open {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.bha-year-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.bha-year-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 40px; min-height: 40px;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s;
}
.bha-year-btn:hover { background: var(--surface-2); color: var(--brand); }
.bha-year-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); border-radius: var(--r-sm); }
.bha-year-display {
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink); letter-spacing: -.01em;
}
.bha-month-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.bha-month-btn {
  position: relative; background: none; border: none; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 13px; font-weight: 550; color: var(--ink-2);
  padding: 8px 4px; min-height: 40px; cursor: pointer;
  transition: background .12s, color .12s; text-align: center;
}
.bha-month-btn:hover { background: var(--surface-2); color: var(--ink); }
.bha-month-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); }
.bha-month-btn.bha-selected { background: var(--brand); color: #fff; font-weight: 700; }
.bha-month-btn.bha-selected:hover { background: var(--brand-hover); }
.bha-month-btn.bha-today::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--brand);
}
.bha-month-btn.bha-selected.bha-today::after { background: rgba(255,255,255,.8); }
.bha-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
@media (max-width: 480px) {
  .bha-popover { left: 0; right: 0; transform: none; width: auto; min-width: 240px; }
  .bha-popover.bha-open { transform: none; }
  .bha-label { min-width: 110px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bha-popover { transition: none; }
  .bha-label svg.bha-chevron { transition: none; }
}

/* ---- Compare controls — namespaced to .bhac- ---- */
/* Toolbar wrapper for stepper + compare button */
.bha-toolbar-outer {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
/* Divider between stepper and compare trigger */
.bhac-divider {
  width: 1px; height: 28px; background: var(--border); flex-shrink: 0; margin: 0 4px;
}
/* "+ Compare month" trigger button */
.bhac-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; min-width: 40px; padding: 6px 12px; border-radius: var(--r-sm);
  border: 1px dashed var(--border-strong); background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.bhac-trigger:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand); border-style: solid; }
.bhac-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); }
/* Compare row (shown when compare is active) */
.bhac-row {
  display: none; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--r-sm); margin-bottom: 10px;
}
.bhac-row.bhac-visible { display: flex; }
.bhac-vs-label {
  font-size: 12px; font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
/* The compare pill: "vs  ‹ Month ▾ ›" */
.bhac-stepper {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--brand-100);
  border-radius: var(--r-pill); box-shadow: var(--sh-1);
  padding: 2px; position: relative; font-variant-numeric: tabular-nums;
}
.bhac-stepper__btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; min-width: 40px; min-height: 40px;
  background: none; border: none; border-radius: var(--r-pill);
  color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0;
}
.bhac-stepper__btn:hover { background: var(--brand-50); color: var(--brand); }
.bhac-stepper__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); }
.bhac-stepper__btn:active { transform: scale(.94); }
.bhac-label {
  display: flex; align-items: center; gap: 5px; padding: 0 8px;
  height: 30px; min-height: 40px; min-width: 110px; justify-content: center;
  background: none; border: none; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 13.5px; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer;
  transition: background .15s, color .15s; white-space: nowrap; letter-spacing: -.01em;
}
.bhac-label:hover { background: var(--brand-50); color: var(--brand); }
.bhac-label:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); }
.bhac-label[aria-expanded="true"] { background: var(--brand-50); color: var(--brand); }
.bhac-label svg.bhac-chevron { transition: transform .2s; flex-shrink: 0; }
.bhac-label[aria-expanded="true"] svg.bhac-chevron { transform: rotate(180deg); }
/* Compare popover */
.bhac-popover {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 500; width: 240px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-pop); padding: 14px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.bhac-popover.bhac-open {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.bhac-year-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.bhac-year-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 40px; min-height: 40px;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s;
}
.bhac-year-btn:hover { background: var(--surface-2); color: var(--brand); }
.bhac-year-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); }
.bhac-year-display {
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink); letter-spacing: -.01em;
}
.bhac-month-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.bhac-month-btn {
  position: relative; background: none; border: none; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 13px; font-weight: 550; color: var(--ink-2);
  padding: 8px 4px; min-height: 40px; cursor: pointer;
  transition: background .12s, color .12s; text-align: center;
}
.bhac-month-btn:hover { background: var(--surface-2); color: var(--ink); }
.bhac-month-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); }
.bhac-month-btn.bhac-selected { background: #7c3aed; color: #fff; font-weight: 700; }
.bhac-month-btn.bhac-selected:hover { background: #6d28d9; }
.bhac-month-btn.bhac-today::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--brand);
}
.bhac-month-btn.bhac-selected.bhac-today::after { background: rgba(255,255,255,.8); }
/* "x" remove button */
.bhac-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; min-width: 40px; min-height: 40px;
  border-radius: var(--r-sm); border: none; background: rgba(37,99,235,.10);
  color: var(--brand); cursor: pointer; font-family: inherit;
  margin-left: auto; transition: background .12s, color .12s;
}
.bhac-remove:hover { background: var(--brand); color: #fff; }
.bhac-remove:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.30); }

/* ---- Compare column layout ---- */
.bh-compare-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: flex-start;
}
.bh-compare-col-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--border);
}
.bh-compare-col-head.bh-primary { border-color: var(--brand); }
.bh-compare-col-head.bh-compare-side { border-color: #7c3aed; }
.bh-compare-col-head h3 { font-size: 15px; margin: 0; }
.bh-compare-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: var(--r-pill);
}
.bh-compare-badge.bh-primary { background: var(--brand-50); color: var(--brand); }
.bh-compare-badge.bh-compare-side { background: #ede9fe; color: #6d28d9; }
.bh-compare-delta {
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  margin-top: 10px; padding: 7px 12px;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border);
}
.bh-compare-delta.bh-delta-pos { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
.bh-compare-delta.bh-delta-neg { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
.bh-compare-pair { margin-bottom: 32px; }
@media (max-width: 700px) {
  .bh-compare-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bhac-popover { transition: none; }
  .bhac-label svg.bhac-chevron { transition: none; }
  .bhac-trigger { transition: none; }
}
/* audit log */
.audit-filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.audit-filters input[type=date], .audit-filters select { font: inherit; padding:7px 10px; border:1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); }
.badge-cat-navigation { background:#eef2ff; color:#3730a3; }
.badge-cat-action     { background: var(--brand-50); color: var(--brand-700); }
.badge-cat-chat       { background:#ecfdf5; color:#047857; }
.badge-cat-auth       { background:#fff7ed; color:#c2410c; }
.status-err { color: var(--danger); font-weight:600; }
.audit-detail-pre { background: var(--surface-2); border-radius: var(--r-sm); padding:14px; font-size:12.5px; white-space:pre-wrap; word-break:break-word; max-height:60vh; overflow:auto; }
.pager { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:18px; color: var(--muted); font-size:13px; }

@media (max-width: 480px) {
  .bhac-row { padding: 8px 10px; }
  .bhac-label { min-width: 90px; font-size: 12.5px; }
}

/* ===========================================================================
   Telus Client Reports (PBIX mirror) — status strip, filter chips, matrices
   =========================================================================== */
.status-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.status-pill { display: inline-flex; gap: 6px; align-items: center; font-size: 12px;
  padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface);
  border: 1px solid var(--border); color: var(--muted); }
.status-pill b { color: var(--ink-2); font-weight: 600; }
.status-pill.ok b { color: var(--success-700); }
.status-pill.stale b { color: var(--warning-700); }
.status-pill.error b { color: var(--danger-700); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-family: inherit; font-size: 12.5px; padding: 4px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.chip:hover { border-color: var(--brand); }
.chip.is-on { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); font-weight: 600; }

.visual-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
@media (min-width: 1100px) { .visual-grid--2 { grid-template-columns: 1fr 1fr; } }
.visual { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh-1); padding: 14px 16px; margin-bottom: 18px; }
.visual-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.visual-head h3 { margin: 0; font-size: 14px; }
.visual-head .actions { display: flex; gap: 6px; }
.matrix-wrap { max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }

table.matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.matrix th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
table.matrix td.mx-label { white-space: nowrap; }
table.matrix tr[data-level="1"] td.mx-label { padding-left: 30px; }
table.matrix tr[data-level="2"] td.mx-label { padding-left: 50px; }
table.matrix tr[data-level="3"] td.mx-label { padding-left: 70px; }
table.matrix tr.is-hidden { display: none; }
table.matrix tr[data-level="0"] td { background: var(--surface-2); font-weight: 600; }
table.matrix tr.grand td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--border-strong); }
.mx-toggle { width: 18px; height: 18px; margin-right: 8px; border: 1px solid var(--border-strong);
  border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1;
  cursor: pointer; padding: 0; vertical-align: middle; }
.mx-toggle::before { content: "+"; }
table.matrix tr[aria-expanded="true"] > td > .mx-toggle::before { content: "\2212"; }
.mx-spacer { display: inline-block; width: 18px; margin-right: 8px; }
table.matrix tr.mx-leaf td.mx-label { cursor: pointer; }
table.matrix tr.mx-leaf:hover td { background: var(--brand-50); }
table.matrix tr.mx-selected td { background: var(--brand-100) !important; }

.data-label { margin: 0 0 8px; font-size: 12.5px; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding: 8px 0 0; font-size: 12.5px; color: var(--muted); }