/*
 * Brodi theme system
 * Change brand colours, surfaces, borders and shadows here.
 * Component layout stays in styles.css.
 */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --ink: #17221d;
  --muted: #68766f;
  --line: #dfe6e1;
  --canvas: #f4f7f4;
  --panel: #ffffff;
  --surface-soft: #f7faf8;
  --surface-raised: #ffffff;
  --surface-selected: #f0f8f4;
  --green: #176b4a;
  --green-2: #228661;
  --green-soft: #e5f4ec;
  --amber: #a86618;
  --amber-soft: #fff1d9;
  --blue: #356fae;
  --blue-soft: #e7f0fb;
  --violet: #6f57a0;
  --violet-soft: #eee9f7;
  --red: #ba4e49;
  --red-soft: #fae8e6;
  --navy: #18373b;
  --sidebar-bg: #102f2c;
  --sidebar-text: #dbe9e4;
  --input-bg: #ffffff;
  --dropdown-bg: #ffffff;
  --product-image-bg: #eef4f0;
  --control-bg: #eef2ef;
  --control-active-bg: #ffffff;
  --control-active-text: #203129;
  --icon-muted: #7d8b84;
  --neutral-badge-bg: #edf0ee;
  --neutral-badge-text: #59685f;
  --warning-bg: #fff8eb;
  --warning-border: #ead4ac;
  --warning-text: #805119;
  --warning-muted: #8d6c3f;
  --overlay: rgba(12, 29, 25, .56);
  --shadow: 0 12px 35px rgba(35, 58, 45, .10);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ecf4f0;
  --muted: #c0cec7;
  --line: #40564d;
  --canvas: #14201c;
  --panel: #1d2b26;
  --surface-soft: #23342d;
  --surface-raised: #293b34;
  --surface-selected: #234337;
  --green: #61c597;
  --green-2: #7ad3aa;
  --green-soft: #213e32;
  --amber: #efbd6d;
  --amber-soft: #49371f;
  --blue: #83b5ef;
  --blue-soft: #243a50;
  --violet: #c0a7e7;
  --violet-soft: #392f4a;
  --red: #efa09a;
  --red-soft: #4a2e2d;
  --navy: #d7ebe3;
  --sidebar-bg: #0b2522;
  --sidebar-text: #e2f1eb;
  --input-bg: #253a31;
  --dropdown-bg: #2a4036;
  --product-image-bg: #2b4138;
  --control-bg: #26372f;
  --control-active-bg: #3a4d44;
  --control-active-text: #f3faf6;
  --icon-muted: #9fb2a8;
  --neutral-badge-bg: #31443b;
  --neutral-badge-text: #d3e1da;
  --warning-bg: #382e1f;
  --warning-border: #66502d;
  --warning-text: #f0cd8b;
  --warning-muted: #d5b87f;
  --overlay: rgba(2, 8, 6, .72);
  --shadow: 0 14px 40px rgba(0, 0, 0, .28);
}

body,
.main {
  background: var(--canvas);
  color: var(--ink);
}

/* Shared mobile navigation control: identical treatment in both themes. */
.mobile-menu {
  border-color:var(--line);
  background:var(--control-bg);
  color:var(--ink);
  box-shadow:0 2px 8px color-mix(in srgb,var(--overlay) 20%,transparent);
}
.mobile-menu svg { color:currentColor; }
.mobile-menu[aria-expanded="true"] {
  border-color:color-mix(in srgb,var(--green) 45%,var(--line));
  background:var(--green-soft);
  color:var(--green);
}

.global-search {
  border-color:var(--line);
  background:var(--input-bg);
  color:var(--icon-muted);
}
.global-search input { color:var(--ink); }
.global-search input::placeholder { color:var(--muted); }
.global-search kbd { border-color:var(--line);background:var(--control-bg);color:var(--muted); }

.sidebar { background: var(--sidebar-bg);color:var(--sidebar-text); }
.topbar,
.panel,
.metric-card,
.catalog-summary,
.product-row,
.customer-card,
.relationship-map,
.order-create-modal,
.product-modal,
.order-drawer,
.drawer-section,
.detail-page-card,
.review-card,
.selected-customer-strip,
.order-product-card,
.set-component-row,
.selected-component-card,
.bundle-review,
.bundle-value-summary {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

.create-order-body,
.product-picker { background:var(--canvas);color:var(--ink); }
.order-cart { background:var(--surface-soft);color:var(--ink); }
.selected-customer-strip,
.create-order-header,
.create-order-footer,
.drawer-header,
.drawer-footer { background:var(--panel);color:var(--ink); }
.customer-select-card,
.order-product-card,
.order-cart-item,
.review-card { background:var(--surface-raised);color:var(--ink);border-color:var(--line); }
.order-relationship-field select { background:var(--input-bg);border-color:var(--line);color:var(--ink); }
.customer-picker-input,.selected-order-customer,.custom-contact-select > button,.custom-select-menu,
.order-variant-select > button,.cart-selling-input { background:var(--input-bg);border-color:var(--line);color:var(--ink); }
.custom-select-menu { background:var(--dropdown-bg);box-shadow:var(--shadow); }
.custom-select-menu button { background:transparent;color:var(--ink);border-color:var(--line); }
.custom-select-menu button:hover,.custom-select-menu button.selected { background:var(--surface-selected); }
.custom-select-menu small,.selected-order-customer small,.cart-field-head,.cart-last-price { color:var(--muted); }
.product-art,.product-art.cloth,.product-art.spray,.product-art.brush,.product-art.set,.product-art.has-image { background:var(--product-image-bg);border-color:var(--line); }
.order-relationship-field small,.order-selection-summary small,.order-billing-preview small,.order-billing-preview p { color:var(--muted); }
.order-selection-summary,.order-billing-preview { background:var(--surface-raised);border-color:var(--line);color:var(--ink); }
.order-selection-icon { background:var(--green-soft);color:var(--green); }
.order-billing-preview > b { background:var(--neutral-badge-bg);color:var(--neutral-badge-text); }
.customer-select-card.selected { background:var(--surface-selected);border-color:var(--green); }
.create-step > span { background:var(--control-bg);border-color:var(--line);color:var(--muted); }
.create-step.active > span { background:var(--green);border-color:var(--green);color:#fff; }
.create-step.done > span { background:var(--green-soft);border-color:var(--green);color:var(--green); }
.create-step strong,.order-step-heading h3,.order-product-heading h3,.order-cart-head h3,
.review-card h4,.review-item strong,.review-item b,.order-product-info strong { color:var(--ink); }
.create-step small,.order-step-heading p,.customer-select-card small,.customer-select-card em,
.selected-customer-strip em,.order-product-heading p,.order-product-info span,.order-cart-head span,
.review-customer-content span,.review-customer-content small,.review-item span { color:var(--muted); }
.order-currency,.product-type-tabs { background:var(--control-bg);border:1px solid var(--line); }
.order-currency button,.product-type-tabs button { color:var(--muted); }
.order-currency button.active,.product-type-tabs button.active { background:var(--control-active-bg);color:var(--green); }
.order-product-heading > span {
  background:var(--neutral-badge-bg);
  border:1px solid var(--line);
  color:var(--neutral-badge-text);
}
.review-ready {
  background:var(--green-soft);
  border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));
  color:var(--green);
}
.product-picker-tools > label,.order-variant-select select,.review-sidebar input,.review-sidebar select,
.review-card textarea,.pricing-field input,.pricing-field select,.pricing-money input { background:var(--input-bg);border-color:var(--line);color:var(--ink); }
.quick-add { background:var(--green-soft);color:var(--green); }
.quantity-control,.cart-item-bottom,.order-cart-head,.order-cart-totals,.review-card > header,.review-item { border-color:var(--line); }
.quantity-control button { background:var(--control-bg);color:var(--ink); }
.quantity-control span { color:var(--ink); }
.order-cart-empty > span { background:var(--surface-raised);color:var(--icon-muted); }
.order-cart-empty,.order-cart-empty strong,.order-cart-empty p { color:var(--muted); }
.review-customer-content > em,.source-pill,.selected-check { background:var(--neutral-badge-bg);color:var(--neutral-badge-text); }
.payment-method-picker button { background:var(--control-bg);border-color:var(--line);color:var(--ink); }
.payment-method-picker button small { color:var(--muted); }
.payment-method-picker button > svg { color:var(--icon-muted); }
.payment-method-picker button:hover { background:var(--surface-soft);border-color:color-mix(in srgb,var(--green) 45%,var(--line)); }
.payment-method-picker button.active { background:var(--surface-selected);border-color:var(--green);box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 14%,transparent); }
.payment-method-picker button.active > svg,.payment-method-picker button.active strong { color:var(--green); }
.payment-account-note { background:var(--surface-soft);border-color:var(--line);color:var(--ink); }
.card-settlement-note { background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 35%,var(--line));color:var(--green); }
.card-settlement-note small { color:var(--muted); }
.rep-commission-context { background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 38%,var(--line));color:var(--amber); }
.rep-commission-context span { color:var(--warning-muted); }
.rep-commission-context.warning { background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 38%,var(--line));color:var(--red); }
.rep-commission-context.warning span { color:var(--muted); }

/* Totals use a normal elevated surface in both themes; green is reserved for actions and status. */
.review-total-card {
  background:var(--surface-raised);
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:var(--shadow);
}
.review-total-card > span,.review-total-card > small,.review-total-card > div { color:var(--muted);border-color:var(--line); }
.review-total-card b { color:var(--ink); }
.review-total-card > strong { color:var(--green); }

/* Order identity, thumbnails and icons share the same semantic component colours. */
.placed-avatar,.contact-chip > i,.order-item .product-art,.customer-select-avatar {
  background:var(--green-soft);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 20%,var(--line));
}
.placed-by-card span,.placed-by-card small,.drawer-section-head span,.order-item span,.order-item small,
.total-row,.detail-block span,.activity span,.activity time { color:var(--muted); }
.next-action { background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text); }
.next-action > i { background:var(--amber-soft);color:var(--amber); }
.next-action span { color:var(--warning-muted); }
.track-step::before,.activity:not(:last-child)::after { background:var(--line); }
.track-step i { background:var(--panel);border-color:var(--line); }
html[data-theme="dark"] .track-step.done i {
  background:var(--green);
  border-color:color-mix(in srgb,var(--green) 78%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent);
}
html[data-theme="dark"] .track-step.current i {
  background:var(--panel);
  border-color:color-mix(in srgb,var(--green) 82%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 24%,transparent);
}
.order-item,.order-totals,.total-row.grand,.contact-chip { border-color:var(--line); }
.activity > i { background:var(--green-soft);color:var(--green); }

/* Initials and product tiles are true centered components. Several legacy text
   selectors set nested spans to block; this shared rule keeps every tile aligned. */
.avatar,.rep-avatar,.customer-list-avatar,.customer-detail-avatar,.customer-select-avatar,
.placed-avatar,.product-art,.catalog-pick-art,.opportunity-avatar,.territory-insight-avatar,
.rep-customer > span,.cms-page-icon {
  display:grid !important;
  place-items:center !important;
  align-content:center;
  justify-content:center;
  line-height:1;
  text-align:center;
}

.toolbar,
.wizard-steps,
.create-order-steps,
.create-order-body,
.order-cart,
.bundle-price-card,
.variant-head,
.option-group header,
.selection-summary,
.review-total-card + * {
  border-color: var(--line);
}

.global-search,
.table-search,
.text-input,
.component-search,
.customer-search,
.money-input,
.money-input input,
.order-variant-select select,
.review-sidebar input,
.review-sidebar select,
.review-card textarea,
.tool-popover select {
  background: var(--input-bg);
  border-color: var(--line);
  color: var(--ink);
}

.global-search:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}

.filter-button,
.view-toggle,
.icon-button,
.help-button,
.modal-close,
.button.secondary,
.select-actions button,
.date-popover button,
.tool-popover {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--ink);
}

.modal-backdrop,
.drawer-backdrop { background:var(--overlay); }
.drawer-backdrop { backdrop-filter:none; }
.order-drawer { background:var(--panel) !important;isolation:isolate; }
th,
.variant-head,
.wizard-steps,
.create-order-steps { background:var(--surface-soft); }
td,
.drawer-header,
.drawer-footer,
.create-order-header,
.create-order-footer,
.product-modal > header,
.product-modal > footer { background:var(--panel);border-color:var(--line);color:var(--ink); }
.order-clickable:hover,
.catalog-pick-row:hover,
.catalog-pick-row.selected { background:var(--surface-soft) !important; }
.theme-toggle { font-size:18px !important; }

/* Dashboard states use semantic tokens so every status remains readable in both themes. */
.metric-top,.metric-foot,.flow-step em,.panel-head p,.attention-list p { color:var(--muted); }
.metric-top svg { color:var(--icon-muted); }
.metric-icon.mint { background:var(--green-soft);color:var(--green); }
.metric-icon.sky { background:var(--blue-soft);color:var(--blue); }
.metric-icon.sand { background:var(--amber-soft);color:var(--amber); }
.metric-icon.lilac { background:var(--violet-soft);color:var(--violet); }
.metric-icon svg { color:currentColor; }
.neutral,.attention-list b { background:var(--neutral-badge-bg);color:var(--neutral-badge-text); }
.attention { background:var(--amber-soft);color:var(--amber); }
.trend.up { background:var(--green-soft);color:var(--green); }
.flow-step:hover,.attention-list > button:hover { background:var(--surface-soft); }
.flow-line,.attention-list > button { border-color:var(--line); }
.flow-line { background:var(--line); }
.flow-line::after { border-color:var(--line); }
.flow-callout {
  background:var(--warning-bg);
  border-color:var(--warning-border);
  color:var(--warning-text);
}
.flow-callout > svg { background:var(--amber-soft); }
.flow-callout span { color:var(--warning-muted); }
.flow-callout button { color:var(--warning-text); }
.segmented { background:var(--control-bg);border:1px solid var(--line); }
.segmented button { color:var(--muted); }
.segmented button.active { background:var(--control-active-bg);color:var(--control-active-text);box-shadow:var(--shadow); }
.currency-switch { background:var(--control-bg);border:1px solid var(--line); }
.currency-switch > span,.currency-switch button { color:var(--muted); }
.currency-switch button.active { background:var(--control-active-bg);color:var(--control-active-text);box-shadow:var(--shadow); }
.product-row:hover { background:var(--surface-soft);box-shadow:inset 3px 0 0 var(--green); }
.type-badge { background:var(--neutral-badge-bg);color:var(--neutral-badge-text); }
.money-input span { background:var(--surface-soft);border-color:var(--line);color:var(--muted); }
.wizard-step > span { background:var(--control-bg);border-color:var(--line);color:var(--muted); }
.wizard-step.active > span { background:var(--green);border-color:var(--green);color:var(--panel); }
.wizard-step.done > span { background:var(--green-soft);border-color:var(--green);color:var(--green); }
.wizard-step strong { color:var(--ink); }.wizard-step small { color:var(--muted); }
.wizard-steps > i { background:var(--line); }
.option-values > span,.variant-row > input:not([type="checkbox"]) { background:var(--input-bg);border-color:var(--line);color:var(--ink); }
.option-group header { background:var(--surface-soft);color:var(--ink); }
.option-group header small { color:var(--muted); }
.catalog-pick-list,.bundle-price-card { background:var(--surface-soft);border-color:var(--line);color:var(--ink); }
.component-controls select,.set-component-row select,.qty-field,.qty-field input { background:var(--input-bg);border-color:var(--line);color:var(--ink); }
.bundle-value-summary > div { background:var(--panel);border-color:var(--line); }
.bundle-value-summary > div:last-child { background:var(--green-soft); }
.bundle-value-summary span,.bundle-review-row small,.set-component-row small,.component-note { color:var(--muted); }
.bundle-value-summary strong,.catalog-pick-row strong,.component-selection-head { color:var(--ink); }
.add-value,.builder-tip,.selection-summary { background:var(--green-soft);border-color:var(--green);color:var(--green); }
.builder-tip p,.selection-summary { color:var(--muted); }
.variant-row { border-color:var(--line);color:var(--ink); }
.variant-row:not(.selected) { background:var(--surface-soft); }
.completion { background:var(--surface-soft);border:1px solid var(--line); }
.ring::after { background:var(--surface-soft); }
.attention-list > button { border-bottom-style:solid;border-bottom-width:1px; }

html[data-theme="dark"] .sidebar-card,
html[data-theme="dark"] .completion,
html[data-theme="dark"] .next-action,
html[data-theme="dark"] .selected-component-card,
html[data-theme="dark"] .set-component-row,
html[data-theme="dark"] .bundle-review,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .order-product-card,
html[data-theme="dark"] .customer-select-card,
html[data-theme="dark"] .catalog-pick-row,
html[data-theme="dark"] .order-cart-item {
  background:var(--surface-soft);
  border-color:var(--line);
}

html[data-theme="dark"] .customer-select-card.selected,
html[data-theme="dark"] .type-card.active {
  background:#203a30;
}

html[data-theme="dark"] .type-card,
html[data-theme="dark"] .option-group,
html[data-theme="dark"] .variant-table {
  background:var(--panel);
  border-color:var(--line);
  color:var(--ink);
}

/* Shared raised surfaces: every compact card inherits the same dark theme treatment. */
html[data-theme="dark"] .entity,
html[data-theme="dark"] .shipping-entity,
html[data-theme="dark"] .customer-meta,
html[data-theme="dark"] .rep-metrics article,
html[data-theme="dark"] .earnings-total,
html[data-theme="dark"] .rule-note {
  background:var(--surface-raised);
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

html[data-theme="dark"] .customer-meta,
html[data-theme="dark"] .earnings-total,
html[data-theme="dark"] .rule-note { box-shadow:none; }

html[data-theme="dark"] .entity-contact,
html[data-theme="dark"] .customer-meta div + div,
html[data-theme="dark"] .rep-customer,
html[data-theme="dark"] .earnings-bars i { border-color:var(--line); }

html[data-theme="dark"] .rep-customer button {
  background:var(--surface-raised);
  border-color:var(--line);
  color:var(--ink);
}

html[data-theme="dark"] .earnings-bars i { background:var(--line); }
html[data-theme="dark"] .entity > small,
html[data-theme="dark"] .entity em,
html[data-theme="dark"] .entity-contact small,
html[data-theme="dark"] .customer-meta span,
html[data-theme="dark"] .rep-metrics small,
html[data-theme="dark"] .rep-customer small,
html[data-theme="dark"] .earnings-total span,
html[data-theme="dark"] .earnings-total small,
html[data-theme="dark"] .rule-note { color:var(--muted); }

html[data-theme="dark"] .rep-hero,
html[data-theme="dark"] .variant-banner {
  background:linear-gradient(135deg,#102e28,#194b3d);
}

html[data-theme="dark"] .status.in_shipping { color:#d6c2ec;background:#3b2d4c; }
html[data-theme="dark"] .status.invoiced { color:#bfe0cf;background:#223c32; }
html[data-theme="dark"] .status.qb_synced { color:#a9ebce;background:#174535; }
html[data-theme="dark"] .status.rfq { color:var(--red);background:var(--red-soft); }
html[data-theme="dark"] .status.pre_order { color:var(--amber);background:var(--amber-soft); }
html[data-theme="dark"] .status.order { color:var(--blue);background:var(--blue-soft); }
html[data-theme="dark"] .payment.paid { color:#8ed8b2; }
html[data-theme="dark"] .payment.due_later,
html[data-theme="dark"] .payment.pending { color:#e5c88e; }
html[data-theme="dark"] .payment.refunded { color:#d6c2ec; }
html[data-theme="dark"] .gate-row.complete > i,
html[data-theme="dark"] .gate-row.complete b { color:#a9dfc3;background:#204335; }
html[data-theme="dark"] .gate-row.blocked > i,
html[data-theme="dark"] .gate-row.blocked b { color:#e5c88e;background:#4a3b21; }

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#7e9288; }

[hidden] { display:none !important; }

/* Shared order controls and compact count badges. */
.stage-tabs { border-color:var(--line); }
.stage-tabs button { color:var(--muted); }
.stage-tabs button:hover { color:var(--ink); }
.stage-tabs span,
#activeFilterCount {
  background:var(--neutral-badge-bg);
  color:var(--neutral-badge-text);
  border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
}
.stage-tabs button.active span,
.filter-button.has-filters #activeFilterCount {
  background:var(--green-soft);
  color:var(--green);
  border-color:color-mix(in srgb,var(--green) 32%,transparent);
}
#orderDateLabel {
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
}
#orderFilterButton[aria-expanded="true"],
#orderCalendarButton[aria-expanded="true"] {
  border-color:var(--green);
  background:var(--green-soft);
  color:var(--green);
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important; }
}