/*  ═══════════════════════════════════════════════════════════
    OSmart shared components  v1  (2026-10-09)
    Same brand as osmart-design-system.css; this file only adds
    surface/tint tokens with a dark value each, and the pieces the
    dispatch / order pages used to re-invent per page (.bd-, .lt-,
    .gp-, .ac-, .dt-, .ps-). Reference page: /dashboard/ui-kit/.
    ═══════════════════════════════════════════════════════════  */

/* ── Tokens: every colour has a light and a dark value ─────── */
:root {
    --os-surface: #ffffff;          /* cards */
    --os-surface-2: #f8fafc;        /* card footers, totals, detail panes */
    --os-border: rgba(15, 23, 42, .10);
    --os-border-soft: rgba(15, 23, 42, .06);
    --os-text: #0f172a;
    --os-text-muted: #64748b;
    --os-focus: 0 0 0 3px rgba(102, 126, 234, .45);

    /* Tints: background / foreground pairs */
    --os-ok-bg: #dcfce7;    --os-ok-fg: #166534;
    --os-warn-bg: #fef3c7;  --os-warn-fg: #92400e;
    --os-bad-bg: #fee2e2;   --os-bad-fg: #991b1b;
    --os-info-bg: #e0e7ff;  --os-info-fg: #3730a3;   /* brand-tinted: load pills, info */
    --os-muted-bg: #f1f5f9; --os-muted-fg: #475569;
    --os-busy-bg: #fffbeb;  --os-busy-fg: #92400e;   /* BUSY narration (amber) */
    --os-staff-fg: #dc2626;                          /* staff note (red, owner 2026-10-09) */
    --os-ship-bg: #7c3aed;                           /* SHIP TO badge */
    --os-promo-bg: #fdf4ff; --os-promo-fg: #86198f;
    --os-plate-bg: #fef9c3; --os-plate-fg: #111827;  /* vehicle number plate */
}

[data-theme="dark"] {
    --os-surface: #1e293b;
    --os-surface-2: #172033;
    --os-border: rgba(148, 163, 184, .22);
    --os-border-soft: rgba(148, 163, 184, .12);
    --os-text: #e2e8f0;
    --os-text-muted: #94a3b8;

    --os-ok-bg: rgba(16, 185, 129, .18);   --os-ok-fg: #6ee7b7;
    --os-warn-bg: rgba(245, 158, 11, .18); --os-warn-fg: #fcd34d;
    --os-bad-bg: rgba(239, 68, 68, .20);   --os-bad-fg: #fca5a5;
    --os-info-bg: rgba(99, 102, 241, .22); --os-info-fg: #c7d2fe;
    --os-muted-bg: rgba(148, 163, 184, .15); --os-muted-fg: #cbd5e1;
    --os-busy-bg: rgba(245, 158, 11, .12); --os-busy-fg: #fcd34d;
    --os-staff-fg: #f87171;
    --os-promo-bg: rgba(192, 38, 211, .14); --os-promo-fg: #f0abfc;
}

/* ── Page wrapper: opt-in phone rules for migrated pages ───── */
.os-page { color: var(--os-text); }
.os-page :focus-visible { outline: none; box-shadow: var(--os-focus); border-radius: 6px; }
.os-muted { color: var(--os-text-muted); font-size: .82rem; }
@media (max-width: 575.98px) {
    .os-page { font-size: .9375rem; }               /* 15px body on phone */
    .os-page .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .os-page .btn-link { min-height: 0; }
    .os-page .form-control, .os-page .form-select { min-height: 44px; font-size: 1rem; }
}

/* ── os-page-head: title + subtitle left, actions right ────── */
.os-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; margin-bottom: 1rem; }
.os-page-head__title { margin: 0; font-family: var(--os-font-display); font-size: 1.35rem; font-weight: 700; color: var(--os-text); }
.os-page-head__title i { color: var(--os-primary); margin-right: .4rem; }
.os-page-head__sub { color: var(--os-text-muted); font-size: .85rem; margin-top: .2rem; max-width: 72ch; }
.os-page-head__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 575.98px) {
    .os-page-head__actions { margin-left: 0; width: 100%; }
    .os-page-head__actions > * { flex: 1 1 auto; }
}

/* ── os-company-tabs / os-seg: one style for every picker ──── */
.os-seg { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.os-seg a, .os-seg button {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 36px;
    padding: .3rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    border: 1px solid var(--os-border); background: var(--os-surface); color: var(--os-text-muted);
    text-decoration: none; transition: background .15s, color .15s;
}
.os-seg a:hover, .os-seg button:hover { color: var(--os-primary); border-color: var(--os-primary); }
.os-seg .is-active { background: var(--os-gradient); color: #fff; border-color: transparent; }
.os-seg .os-seg__count { font-weight: 700; opacity: .85; }
@media (max-width: 575.98px) { .os-seg a, .os-seg button { min-height: 44px; } }

/* ── os-chip: status chips ─────────────────────────────────── */
.os-chip {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    font-size: .75rem; font-weight: 700; line-height: 1.2; padding: .25rem .65rem; border-radius: 999px;
    background: var(--os-muted-bg); color: var(--os-muted-fg);
}
.os-chip--ok   { background: var(--os-ok-bg);   color: var(--os-ok-fg); }
.os-chip--warn { background: var(--os-warn-bg); color: var(--os-warn-fg); }
.os-chip--bad  { background: var(--os-bad-bg);  color: var(--os-bad-fg); }
.os-chip--info { background: var(--os-info-bg); color: var(--os-info-fg); }
.os-chip--solid-bad { background: var(--os-danger-dark); color: #fff; }
.os-chip--ship { background: var(--os-ship-bg); color: #fff; font-size: .68rem; padding: .15rem .5rem; }
.os-chip--sm { font-size: .68rem; padding: .12rem .5rem; }
/* Company badge (co_badge filter): GI blue, GPC green, VPI orange; solid so it reads in dark mode too */
.os-co { display: inline-flex; align-items: center; gap: .2rem; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
    line-height: 1.2; padding: .12rem .45rem; border-radius: 5px; background: #64748b; color: #fff; white-space: nowrap; vertical-align: middle; }
.os-co--gi  { background: #2563eb; }
.os-co--gpc { background: #16a34a; }
.os-co--vpi { background: #ea580c; }
.os-co .fa-check { font-size: .6rem; }
/* BUSY sale order number on the billing board: the biller types it into BUSY */
.os-sono { display: inline-block; font-weight: 800; font-size: .95rem; letter-spacing: .02em;
    padding: .1rem .55rem; border-radius: 6px; background: #fef08a; color: #713f12; border: 1px solid #facc15; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .os-sono { background: rgba(250, 204, 21, .22); color: #fde68a; border-color: #a16207; } }
:root[data-theme="dark"] .os-sono { background: rgba(250, 204, 21, .22); color: #fde68a; border-color: #a16207; }

/* ── os-note: narration / staff note / warning boxes ───────── */
.os-note { font-size: .83rem; margin-top: .35rem; padding: .35rem .6rem; border-radius: 8px; border-left: 3px solid transparent; }
.os-note i { margin-right: .3rem; }
.os-note--busy   { background: var(--os-busy-bg); color: var(--os-busy-fg); border-left-color: var(--os-warning); }
.os-note--staff  { color: var(--os-staff-fg); font-weight: 600; padding-left: 0; padding-top: 0; padding-bottom: 0; margin-top: .25rem; }
.os-note--danger { background: var(--os-bad-bg); color: var(--os-bad-fg); border-left-color: var(--os-danger); font-weight: 600; }
.os-note--warn   { background: var(--os-warn-bg); color: var(--os-warn-fg); border-left-color: var(--os-warning); }
.os-note--info   { background: var(--os-info-bg); color: var(--os-info-fg); border-left-color: var(--os-primary); }
.os-note--promo  { background: var(--os-promo-bg); color: var(--os-promo-fg); border-left-color: #c026d3; }
.os-note__list { margin: .15rem 0 0 1.1rem; }
.os-inarr { font-size: .8rem; font-weight: 700; color: var(--os-busy-fg); }   /* BUSY item narration */

/* ── os-load: Ltr / Kg / Pcs pills ─────────────────────────── */
.os-load { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.os-load span { font-size: .76rem; font-weight: 700; background: var(--os-info-bg); color: var(--os-info-fg); border-radius: 6px; padding: 2px 8px; }

/* ── os-party: name, town, phone ───────────────────────────── */
.os-party__name { font-weight: 700; color: var(--os-text); }
.os-party__meta { color: var(--os-text-muted); font-size: .82rem; display: inline-flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: center; }
.os-party__meta a { color: var(--os-primary); text-decoration: none; font-weight: 600; }
.os-party__meta a:hover { text-decoration: underline; }
@media (max-width: 575.98px) { .os-party__meta a { display: inline-block; padding: .35rem 0; } }

/* ── os-plate: vehicle number like a number plate ──────────── */
.os-plate { display: inline-block; font-weight: 800; letter-spacing: .04em; background: var(--os-plate-bg); color: var(--os-plate-fg);
    border: 2px solid #111827; border-radius: 6px; padding: 0 .5rem; line-height: 1.5; }
.os-plate--lg { font-size: 1.3rem; padding: 0 .7rem; }

/* ── os-trip-card: trip box with header and order rows ─────── */
.os-trip-card { background: var(--os-surface); color: var(--os-text); border: 1px solid var(--os-border);
    border-radius: 12px; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); overflow: hidden; }
.os-trip-card--bad { border-left: 6px solid var(--os-danger); }
.os-trip-card--ok  { border-left: 6px solid var(--os-success); }
.os-trip-card__head { padding: .7rem .9rem; border-bottom: 1px solid var(--os-border-soft); display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; }
.os-trip-card__code { font-weight: 800; font-size: 1.02rem; }
.os-trip-card__head > strong:first-child { font-weight: 800; }
.bd-toggle { cursor: pointer; }
.bd-open { font-size: .78rem; font-weight: 600; }
.os-trip-card__status { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.os-trip-card__row { padding: .65rem .9rem; border-bottom: 1px solid var(--os-border-soft); display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.os-trip-card__row:last-child { border-bottom: 0; }
.os-trip-card__row--changed { background: var(--os-warn-bg); }
.os-trip-card__foot { padding: .55rem .9rem; background: var(--os-surface-2); display: flex; align-items: center; gap: .6rem; }
.os-trip-card__waiting { border-color: var(--os-bad-bg); }
.os-trip-card__waiting .os-trip-card__head { background: var(--os-bad-bg); color: var(--os-bad-fg); }
.os-detail { background: var(--os-surface-2); border: 1px solid var(--os-border-soft); border-radius: 8px; padding: .5rem .6rem; color: var(--os-text); }
.os-detail .table { font-size: .82rem; color: inherit; background: transparent; --bs-table-bg: transparent; --bs-table-color: inherit; }

/* ── os-qty: big +/- quantity stepper (loader, gloves) ─────── */
.os-qty { display: inline-flex; align-items: center; gap: .3rem; }
.os-qty .btn { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; font-weight: 700; padding: 0; }
.os-qty input { width: 5.5rem; height: 2.75rem; text-align: center; font-weight: 700; font-size: 1.05rem; }
.os-check-lg { width: 1.4rem; height: 1.4rem; }
.os-qty { margin-left: auto; }
.os-trip-card__row--item { flex-wrap: nowrap; }
.os-trip-card__row--item > .flex-grow-1 { min-width: 0; }
.os-qty-read { margin-left: auto;  min-width: 4rem; text-align: right; font-weight: 800; font-size: 1.05rem; }

/* ── os-table ──────────────────────────────────────────────── */
.os-tbl { width: 100%; border-collapse: collapse; font-size: .875rem; color: var(--os-text); }
.os-tbl th { position: sticky; top: 0; background: var(--os-surface-2); color: var(--os-text-muted); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .03em; font-weight: 700; padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--os-border); }
.os-tbl td { padding: .5rem .75rem; border-bottom: 1px solid var(--os-border-soft); vertical-align: top; }
.os-tbl tbody tr:nth-child(even) td { background: rgba(102, 126, 234, .03); }
.os-tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
    .os-tbl--stack thead { display: none; }
    .os-tbl--stack tr { display: block; border: 1px solid var(--os-border); border-radius: 10px; margin-bottom: .6rem; background: var(--os-surface); }
    .os-tbl--stack td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .35rem .75rem; }
    .os-tbl--stack td::before { content: attr(data-label); color: var(--os-text-muted); font-size: .75rem; font-weight: 600; }
    .os-tbl--stack tbody tr:nth-child(even) td { background: transparent; }
}

/* ── os-empty ──────────────────────────────────────────────── */
.os-empty { text-align: center; color: var(--os-text-muted); padding: 2.5rem 1rem; border: 1px dashed var(--os-border); border-radius: 12px; background: var(--os-surface); }
.os-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--os-gray-400); }

/* ── Forms ─────────────────────────────────────────────────── */
.os-req::after { content: ' *'; color: var(--os-danger); }
.os-help { font-size: .78rem; color: var(--os-text-muted); margin-top: .2rem; }
.btn.is-saving { pointer-events: none; opacity: .75; }

/* ── Sticky action bar (bottom of long forms on phone) ─────── */
.os-actionbar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem; padding: .6rem 0;
    background: var(--os-gray-50); border-top: 1px solid var(--os-border-soft); }
[data-theme="dark"] .os-actionbar { background: #0f172a; }

/* ── Messages (dashboard/messages.html) ────────────────────── */
.os-alert { border: 0; border-left: 4px solid; border-radius: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.os-alert.alert-success { border-left-color: var(--os-success); }
.os-alert.alert-danger  { border-left-color: var(--os-danger); }
.os-alert.alert-warning { border-left-color: var(--os-warning); }
.os-alert.alert-info    { border-left-color: var(--os-info); }

/* ── Sidebar: collapsible sections ─────────────────────────── */
.os-sidebar__section.os-sec-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.os-sidebar__section.os-sec-toggle:hover { color: rgba(255, 255, 255, .7); }
.os-sidebar__section.os-sec-toggle::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .7rem; transition: transform .15s; }
.os-sidebar__section.os-sec-toggle.is-closed::after { transform: rotate(-90deg); }
.os-sidebar__nav li.os-sec-hidden { display: none; }

/* ── Bootstrap inside .os-page in dark theme: same slate palette ── */
.os-page[data-bs-theme="dark"] {
    --bs-body-bg: #1e293b;            /* cards, inputs, tables sit on this */
    --bs-body-color: #e2e8f0;
    --bs-emphasis-color: #f8fafc;
    --bs-secondary-color: #94a3b8;
    --bs-secondary-bg: #273449;
    --bs-tertiary-bg: #172033;
    --bs-border-color: #334155;
    --bs-border-color-translucent: rgba(148, 163, 184, .2);
    --bs-link-color: #a5b4fc;
    --bs-link-hover-color: #c7d2fe;
    --bs-link-color-rgb: 165, 180, 252;
    color: var(--bs-body-color);
}
.os-page[data-bs-theme="dark"] .text-muted { color: #94a3b8 !important; }
.os-page[data-bs-theme="dark"] .text-dark { color: #e2e8f0 !important; }
.os-page[data-bs-theme="dark"] .bg-white, .os-page[data-bs-theme="dark"] .bg-light { background-color: #1e293b !important; color: #e2e8f0; }
.os-page[data-bs-theme="dark"] .card { box-shadow: none; }
.os-page[data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #e2e8f0; --bs-btn-border-color: #64748b; --bs-btn-hover-bg: #334155; --bs-btn-hover-border-color: #64748b; --bs-btn-active-bg: #475569; }
.os-page[data-bs-theme="dark"] .btn-dark { --bs-btn-bg: #475569; --bs-btn-border-color: #475569; }
.os-page[data-bs-theme="dark"] .btn-light { --bs-btn-bg: #334155; --bs-btn-color: #e2e8f0; --bs-btn-border-color: #475569; --bs-btn-hover-bg: #475569; --bs-btn-hover-color: #fff; }
.os-page[data-bs-theme="dark"] .table-warning { --bs-table-bg: rgba(245, 158, 11, .15); --bs-table-color: #fde68a; }
.os-page[data-bs-theme="dark"] .table-danger  { --bs-table-bg: rgba(239, 68, 68, .15);  --bs-table-color: #fecaca; }
.os-page[data-bs-theme="dark"] .table-success { --bs-table-bg: rgba(16, 185, 129, .15); --bs-table-color: #a7f3d0; }
.os-page[data-bs-theme="dark"] .table-light   { --bs-table-bg: #273449; --bs-table-color: #e2e8f0; }

/* ── BUSY Reports in dark theme (owner, 2026-10-09) ───────────
   The report pages keep their own light styles; these give each of
   their hard-coded colours a dark value. Light theme is unchanged. */
[data-theme="dark"] .busy-workspace th,
[data-theme="dark"] .busy-workspace .label,
[data-theme="dark"] .busy-workspace .ca-kpi small,
[data-theme="dark"] .busy-workspace .rfm-kpi small,
[data-theme="dark"] .busy-workspace .dr-stat .l,
[data-theme="dark"] .busy-workspace .lc-stat .l,
[data-theme="dark"] .busy-workspace .dr-q,
[data-theme="dark"] .busy-scroll-hint { color: #94a3b8 !important; }
[data-theme="dark"] .busy-workspace .busy-kpi .value,
[data-theme="dark"] .busy-workspace .ageing-kpi .value { color: #f1f5f9; }
[data-theme="dark"] .busy-workspace .busy-kpi,
[data-theme="dark"] .busy-workspace .ageing-kpi,
[data-theme="dark"] .busy-workspace .ca-kpi,
[data-theme="dark"] .busy-workspace .rfm-kpi,
[data-theme="dark"] .busy-workspace .lb-podium { box-shadow: none; border: 1px solid #334155; }
[data-theme="dark"] .busy-workspace .ageing-kpi { border-top-width: 4px; }
[data-theme="dark"] .busy-workspace .dr-stat,
[data-theme="dark"] .busy-workspace .lc-stat { background: #172033; border-color: #334155; }
[data-theme="dark"] .busy-workspace .dr-p { color: #93c5fd; }
[data-theme="dark"] .busy-workspace .dr-neg, [data-theme="dark"] .busy-workspace .rfm-trend-down,
[data-theme="dark"] .busy-workspace .lc-late { color: #f87171 !important; }
[data-theme="dark"] .busy-workspace .dr-pos { color: #4ade80; }
[data-theme="dark"] .busy-workspace .dr-badge.down, [data-theme="dark"] .busy-workspace .dr-badge.stopped,
[data-theme="dark"] .busy-workspace .lc-badge.reg { background: var(--os-bad-bg); color: var(--os-bad-fg); }
[data-theme="dark"] .busy-workspace .dr-badge.up, [data-theme="dark"] .busy-workspace .dr-badge.new { background: var(--os-ok-bg); color: var(--os-ok-fg); }
[data-theme="dark"] .busy-workspace .dr-badge.flat, [data-theme="dark"] .busy-workspace .dr-badge.none { background: var(--os-muted-bg); color: var(--os-muted-fg); }
[data-theme="dark"] .busy-workspace .lc-badge.some { background: var(--os-warn-bg); color: var(--os-warn-fg); }
[data-theme="dark"] .busy-workspace .lb-bar { background: #334155; }
[data-theme="dark"] .busy-filter-panel > summary { border-color: #334155; background: #1e293b; color: #e2e8f0; }
/* Search drop-downs (Customer Analytics, Sync & Mapping) */
[data-theme="dark"] .ca-quick-results, [data-theme="dark"] .bs-quick-results { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .ca-quick-results button, [data-theme="dark"] .bs-quick-results button { background: #1e293b; color: #e2e8f0; border-bottom-color: #334155; }
[data-theme="dark"] .ca-quick-results button:hover, [data-theme="dark"] .ca-quick-results button:focus,
[data-theme="dark"] .bs-quick-results button:hover, [data-theme="dark"] .bs-quick-results button:focus { background: #273449; }
/* Company tabs on Customer Analytics */
[data-theme="dark"] .ca-co-tab { background: #1e293b; border-color: #4f46e5; color: #c7d2fe; }
[data-theme="dark"] .ca-co-tab small { color: #94a3b8; }
[data-theme="dark"] .ca-co-tab:hover { background: #273449; color: #e0e7ff; }
[data-theme="dark"] .ca-co-tab.active { background: #4f46e5; color: #fff; }
[data-theme="dark"] .ca-co-tab.active small { color: #e0e7ff; }
/* Party ledger */
[data-theme="dark"] .ca-opening, [data-theme="dark"] .ledger-boundary,
[data-theme="dark"] .ledger-table th { background: #172033 !important; color: #e2e8f0; border-color: #334155 !important; }
[data-theme="dark"] .ledger-explainer { background: #172033; color: #cbd5e1; }
[data-theme="dark"] .ledger-boundary small { color: #94a3b8; }
[data-theme="dark"] .ledger-closing { background: rgba(99, 102, 241, .18) !important; }
[data-theme="dark"] .ledger-actions { border-color: #334155 !important; }
/* Order review */
[data-theme="dark"] .mor-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .mor-party { color: #f1f5f9; }
[data-theme="dark"] .mor-lines td { border-top-color: #334155; }
[data-theme="dark"] .mor-zero { color: #f87171; }
/* Mobile / offline page */
[data-theme="dark"] .bm-kpi, [data-theme="dark"] .bm-card { background: #1e293b; box-shadow: none; border: 1px solid #334155; }
[data-theme="dark"] .bm-kpi strong { color: #f1f5f9; }
[data-theme="dark"] .bm-kpi small, [data-theme="dark"] .bm-table th { color: #94a3b8; }
[data-theme="dark"] .bm-tabs { background: rgba(15, 23, 42, .93); }
[data-theme="dark"] .bm-tab { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .bm-tab.active { background: #0f766e; border-color: #0f766e; color: #fff; }
[data-theme="dark"] .bm-tools { border-bottom-color: #334155; }
[data-theme="dark"] .bm-tools input, [data-theme="dark"] .bm-filter > * { background: #0f172a; color: #e2e8f0; border-color: #334155; }
[data-theme="dark"] .bm-table th, [data-theme="dark"] .bm-table td { border-bottom-color: #334155; color: #e2e8f0; }

.os-page[data-bs-theme="dark"] .nav-tabs { --bs-nav-tabs-border-color: #334155; }
.os-page[data-bs-theme="dark"] .nav-tabs .nav-link.active { background: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 #334155 #1e293b !important; }

/* ── os-filter: collapsible filter box (open on desktop, closed on phone) ── */
.os-filter > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; font-weight: 600; color: var(--os-text); }
.os-filter > summary::-webkit-details-marker { display: none; }
.os-filter > summary::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: .5rem; transition: transform .15s; }
.os-filter[open] > summary::after { transform: rotate(180deg); }
.os-filter > summary .ms-auto + * { margin-left: 0; }
.os-filter__count:not(:empty) { background: var(--os-primary); color: #fff; border-radius: 999px; font-size: .72rem; padding: .1rem .5rem; }
.os-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; align-items: center; }
.os-filter-grid__wide { grid-column: span 2; }
@media (max-width: 575.98px) { .os-filter-grid { grid-template-columns: 1fr 1fr; } .os-filter-grid__wide { grid-column: 1 / -1; } }

/* ── Sales CRM (2026-10-09) ────────────────────────────────── */
.crm-detail { max-width: 1200px; }
.crm-search { max-width: 480px; }
.crm-page .lead-stat-card, .crm-page .sr-card, .crm-page .dc-card, .crm-page .mp-card {
    background: var(--os-surface); border: 1px solid var(--os-border); border-radius: 12px; height: 100%; }
.crm-page .lead-stat-card { padding: 14px 16px; }
.crm-page .lead-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.crm-page .lead-stat-label { font-size: .72rem; color: var(--os-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .2rem; }
/* crm-stack: a wide table whose rows become cards on a phone */
@media (max-width: 767.98px) {
    .crm-stack thead { display: none; }
    .crm-stack, .crm-stack tbody { display: block; }
    .crm-stack tr { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--os-border); }
    .crm-stack td { display: flex; justify-content: space-between; gap: 1rem; border: 0 !important; padding: .2rem 0 !important; text-align: right; }
    .crm-stack td[data-label]::before { content: attr(data-label); color: var(--os-text-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; text-align: left; }
    .crm-stack td.crm-stack__title { display: block; text-align: left; font-size: 1rem; padding-bottom: .4rem !important; }
    .crm-stack td.crm-stack__action { display: block; padding-top: .5rem !important; }
    .crm-stack td.crm-stack__action .btn { width: 100%; }
}
.crm-page .lead-stat-value { font-variant-numeric: tabular-nums; }
.crm-c-callback { color: #9d174d; }
.crm-c-converted { color: #166534; }
.crm-soft { background: var(--os-surface-2); }
@media (max-width: 575.98px) {
    .crm-page .lead-stat-value { font-size: 1.35rem; }
    .crm-page .os-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .crm-page .os-seg::-webkit-scrollbar { display: none; }
    .crm-page .os-seg a { flex: 0 0 auto; }
}
[data-theme="dark"] .crm-c-callback { color: #f9a8d4; }
[data-theme="dark"] .crm-c-converted { color: #86efac; }
[data-theme="dark"] .crm-page .lead-stat-label,
[data-theme="dark"] .crm-page .sr-card .l, [data-theme="dark"] .crm-page .dc-card .l, [data-theme="dark"] .crm-page .mp-card .l,
[data-theme="dark"] .crm-page .sr-table th, [data-theme="dark"] .crm-page .dc-table th, [data-theme="dark"] .crm-page .mp-table th { color: #94a3b8; }
[data-theme="dark"] .crm-page .lead-stat-card.is-active { border-color: #818cf8; box-shadow: 0 0 0 2px rgba(129, 140, 248, .25); }
[data-theme="dark"] .crm-page .badge-status-new        { background: rgba(99, 102, 241, .22); color: #c7d2fe; }
[data-theme="dark"] .crm-page .badge-status-contacted  { background: var(--os-warn-bg); color: var(--os-warn-fg); }
[data-theme="dark"] .crm-page .badge-status-interested { background: var(--os-ok-bg); color: var(--os-ok-fg); }
[data-theme="dark"] .crm-page .badge-status-callback   { background: rgba(236, 72, 153, .2); color: #f9a8d4; }
[data-theme="dark"] .crm-page .badge-status-converted  { background: var(--os-ok-bg); color: #86efac; }
[data-theme="dark"] .crm-page .badge-status-lost       { background: var(--os-bad-bg); color: var(--os-bad-fg); }
[data-theme="dark"] .crm-page .callback-due, [data-theme="dark"] .crm-page .mp-soon { background: rgba(245, 158, 11, .10) !important; }
[data-theme="dark"] .crm-page .bulk-toolbar { background: #172033; border-bottom-color: #334155; }
[data-theme="dark"] .crm-page .lead-mobile-card { border-bottom-color: #334155; }
[data-theme="dark"] .crm-page .lead-age-stale, [data-theme="dark"] .crm-page .sr-bad, [data-theme="dark"] .crm-page .dc-bad { color: #f87171; }
[data-theme="dark"] .crm-page .dc-good { color: #4ade80; }
[data-theme="dark"] .crm-page .sr-badge.red   { background: var(--os-bad-bg); color: var(--os-bad-fg); }
[data-theme="dark"] .crm-page .sr-badge.amber { background: var(--os-warn-bg); color: var(--os-warn-fg); }
[data-theme="dark"] .crm-page .sr-badge.green { background: var(--os-ok-bg); color: var(--os-ok-fg); }
[data-theme="dark"] .crm-page .sr-badge.muted { background: var(--os-muted-bg); color: var(--os-muted-fg); }
[data-theme="dark"] .crm-page .sr-flag.red { color: #fca5a5; }
[data-theme="dark"] .crm-page .sr-flag.amber { color: #fcd34d; }
[data-theme="dark"] .crm-page .sr-group { background: #172033; }
[data-theme="dark"] .crm-page .dc-out { background: var(--os-ok-bg); color: var(--os-ok-fg); }
[data-theme="dark"] .crm-page .dc-out.nc { background: var(--os-muted-bg); color: var(--os-muted-fg); }
[data-theme="dark"] .crm-page .dc-out.hot { background: rgba(59, 130, 246, .2); color: #93c5fd; }
[data-theme="dark"] .crm-page .call-log-item { background: #172033; }

/* Top bar user name: was .text-dark, invisible in the dark theme */
.os-navbar__user { color: var(--os-text); }
.os-navbar__user:hover { color: var(--os-primary); }

/* Dark theme, app-wide defaults now that <html> carries data-bs-theme */
[data-bs-theme="dark"] {
    --bs-body-bg: #0f172a;
    --bs-body-color: #e2e8f0;
    --bs-secondary-color: #94a3b8;
    --bs-secondary-bg: #273449;
    --bs-tertiary-bg: #172033;
    --bs-border-color: #334155;
    --bs-link-color: #a5b4fc;
    --bs-link-hover-color: #c7d2fe;
    --bs-link-color-rgb: 165, 180, 252;
}
[data-bs-theme="dark"] .card, [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .list-group-item, [data-bs-theme="dark"] .offcanvas { --bs-card-bg: #1e293b; --bs-modal-bg: #1e293b; --bs-dropdown-bg: #1e293b; --bs-list-group-bg: #1e293b; --bs-offcanvas-bg: #1e293b; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #e2e8f0; --bs-table-border-color: #334155; --bs-table-striped-bg: rgba(148,163,184,.06); --bs-table-hover-bg: rgba(99,102,241,.08); --bs-table-hover-color: #f1f5f9; }
[data-bs-theme="dark"] .text-muted { color: #94a3b8 !important; }
[data-bs-theme="dark"] .text-dark { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .text-black-50 { color: #94a3b8 !important; }
[data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] .bg-body { background-color: #1e293b !important; }
[data-bs-theme="dark"] .table-light { --bs-table-bg: #273449; --bs-table-color: #e2e8f0; --bs-table-border-color: #334155; }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: rgba(245, 158, 11, .15); --bs-table-color: #fde68a; }
[data-bs-theme="dark"] .table-danger  { --bs-table-bg: rgba(239, 68, 68, .15);  --bs-table-color: #fecaca; }
[data-bs-theme="dark"] .table-success { --bs-table-bg: rgba(16, 185, 129, .15); --bs-table-color: #a7f3d0; }
[data-bs-theme="dark"] .table-info    { --bs-table-bg: rgba(59, 130, 246, .15); --bs-table-color: #bfdbfe; }
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: #273449; --bs-table-color: #e2e8f0; }
[data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #e2e8f0; --bs-btn-border-color: #64748b; --bs-btn-hover-bg: #334155; --bs-btn-hover-border-color: #64748b; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #475569; }
[data-bs-theme="dark"] .btn-dark { --bs-btn-bg: #475569; --bs-btn-border-color: #475569; }
[data-bs-theme="dark"] .btn-light { --bs-btn-bg: #334155; --bs-btn-color: #e2e8f0; --bs-btn-border-color: #475569; --bs-btn-hover-bg: #475569; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .nav-tabs { --bs-nav-tabs-border-color: #334155; --bs-nav-tabs-link-active-bg: #1e293b; --bs-nav-tabs-link-active-color: #f1f5f9; --bs-nav-tabs-link-active-border-color: #334155 #334155 #1e293b; }
@media print {
    /* Paper is always light */
    [data-bs-theme="dark"] body { background: #fff !important; color: #000 !important; }
}

/* BUSY Reports menu as tabs (2026-10-09): one tidy wrap of pills instead of 17 buttons */
.busy-tabs { gap: .3rem; }
.busy-tabs a { min-height: 32px; padding: .25rem .7rem; font-size: .8rem; }
.busy-tabs a i { opacity: .8; }
.busy-tabs a.btn-warning:not(.is-active) { color: #b45309; }

/* Salesman Quick Actions (2026-10-09): on a phone all 8 show as a 4×2 grid
   instead of a sideways strip where "New Party" and the rest were cut off. */
@media (max-width: 575.98px) {
    .quick-actions-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible !important; scroll-snap-type: none !important; }
    .quick-actions-row .quick-action-btn { min-width: 0 !important; width: 100%; }
    .quick-actions-row .quick-action-btn span { white-space: normal !important; text-align: center; overflow-wrap: anywhere; }
}

/* Sidebar search (2026-10-09) */
.os-sidebar__search { display: flex; align-items: center; gap: .5rem; margin: .25rem .25rem .5rem; padding: .35rem .7rem; border-radius: 8px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .55); }
.os-sidebar__search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-size: .85rem; }
.os-sidebar__search input::placeholder { color: rgba(255, 255, 255, .45); }
.os-sidebar__search:focus-within { background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 2px rgba(102, 126, 234, .5); }
.os-sidebar__nav li.os-search-hide { display: none !important; }
.os-sidebar__nav.is-searching li.os-sec-hidden:not(.os-search-hide) { display: list-item !important; }

/* Desktop: the ☰ button hides the sidebar (2026-10-10). Staff pages have no
   sidebar, so the button only shows where there is one. */
@media (min-width: 992px) {
    body:has(#osSidebar) .os-navbar__toggle { display: block; }
    html.os-sb-hidden .os-sidebar { transform: translateX(-100%); }
    html.os-sb-hidden .os-main { margin-left: 0; }
}

/* BUSY Reports: "Without GST / With GST" switch (2026-10-10). */
.busy-gst-row { display: flex; justify-content: flex-end; margin: -.25rem 0 .5rem; }
.busy-gst-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--os-gray-100, #f1f5f9); border: 1px solid var(--os-gray-200, #e2e8f0); font-size: .85rem; }
.busy-gst-switch__label { padding: 0 .5rem 0 .6rem; color: var(--os-gray-600, #475569); font-weight: 600; }
.busy-gst-switch a { padding: .35rem .85rem; border-radius: 999px; color: var(--os-gray-700, #334155); text-decoration: none; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; }
.busy-gst-switch a.is-active { background: var(--os-gradient, linear-gradient(135deg, #667eea, #764ba2)); color: #fff; }
.busy-gst-switch a:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.busy-gst-print { display: none; }
[data-theme="dark"] .busy-gst-switch { background: #1e293b; border-color: rgba(148, 163, 184, .28); }
[data-theme="dark"] .busy-gst-switch__label { color: #94a3b8; }
[data-theme="dark"] .busy-gst-switch a:not(.is-active) { color: #e2e8f0; }
@media (max-width: 575.98px) { .busy-gst-row { justify-content: stretch; } .busy-gst-switch { width: 100%; justify-content: space-between; } }
@media print { .busy-gst-row { justify-content: flex-start; margin: 0; } .busy-gst-print { display: inline; font-size: 10px; font-weight: 700; } }
.busy-gst-tag { font-weight: 600; font-size: .72em; color: var(--os-gray-500, #64748b); text-transform: none; letter-spacing: 0; }