/* ============================================================================
 * REDESIGN PASS 2 — per-page polish
 * Page-scoped additive refinements (depth, motion, green accents, typography).
 * Globals (KPI depth+numerals, .kpi-section-label accent, table row-hover,
 * :focus-visible rings, fixed-surface glass) live elsewhere — NOT re-declared.
 * GREEN identity only. No layout/density changes. No transform on live cards.
 * Hover gated to (hover:hover) and (pointer:fine).
 * ========================================================================== */

/* ── Kanban (#kanbanView, .kanban-card) ─────────────────────────────────────
   The lane-head underline animation, mono count pill, 13px/600 brand, lane
   shadows and green card-hover that lived here are GONE — they fought the
   Sample-board SMX anatomy the orders kanban now renders from index.html's
   base rules (tinted heads, bare "(n)" counts, 14px/700 titles, neutral
   hover). Only the semantic aged/warn day-chip recolours remain. */
#kanbanView .kanban-card-days.aged { background: var(--danger-bg); color: var(--danger); }
#kanbanView .kanban-card-days.warn { background: var(--warn-bg); color: var(--warn); }

/* ── Sales (#salesView) ─────────────────────────────────────────────────── */
#salesView .kpi { transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
#salesView .kpi-value { font-feature-settings: "tnum"; letter-spacing: -0.015em; }
#salesView .sales-card-title { font-weight: 600; letter-spacing: -0.02em; }
#salesView .sales-customer-row {
  transition: box-shadow 0.15s var(--ease-out), border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#salesView .sales-customer-qty { font-variant-numeric: tabular-nums; }
#salesView .sales-metric-toggle button { transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out); }
#salesView .sales-fy-summary-card { transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  #salesView .kpi:hover { box-shadow: 0 8px 24px rgba(60,117,56,0.12); border-color: var(--brand-300); }
  #salesView .sales-customer-row:hover { box-shadow: 0 6px 16px rgba(60,117,56,0.1); border-color: var(--brand); }
  #salesView .sales-fy-summary-card:hover { border-color: var(--brand-300); box-shadow: 0 4px 12px rgba(60,117,56,0.08); }
}

/* ── Customers (#customersView) ─────────────────────────────────────────── */
#customersView .ci-kpi {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-sm) !important;
  transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out), background 150ms var(--ease-out) !important;
}
#customersView .ci-kpi .k-value {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
}
#customersView .ci-tabs button.active {
  background: var(--surface) !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 2px 8px rgba(60,117,56,0.1) !important;
}
#customersView .ci-toggle button.active {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(60,117,56,0.18) !important;
}
#customersView .ci-chip {
  background: var(--brand-bg) !important;
  border: 1px solid var(--brand-300, #7FB07A) !important;
  color: var(--brand) !important;
}
#customersView .ci-chip button { background: var(--brand) !important; color: #fff !important; }
#customersView .customers-search {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out) !important;
}
#customersView .customers-search:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(60,117,56,0.1) !important;
  outline: none !important;
}
#customersView .ci-topbar {
  padding-bottom: 2px !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 200ms var(--ease-out) !important;
}
#customersView #ciTable td { font-variant-numeric: tabular-nums !important; }
#customersView .ci-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-sm) !important;
  transition: box-shadow 150ms var(--ease-out) !important;
}
@media (hover:hover) and (pointer:fine) {
  #customersView .ci-kpi:hover {
    border-color: var(--brand-300, #7FB07A) !important;
    background: var(--brand-bg) !important;
    box-shadow: 0 4px 16px rgba(60,117,56,0.12) !important;
  }
  #customersView .customers-table tbody tr:hover {
    background: var(--brand-bg) !important;
    box-shadow: inset 0 0 8px rgba(60,117,56,0.06) !important;
  }
  #customersView .ci-card:hover { box-shadow: var(--sh-md) !important; }
}

/* ── Shipped (#shippedView) ─────────────────────────────────────────────── */
#shippedView .pane-head-slim { position: sticky; top: 64px; z-index: 20; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #shippedView .pane-head-slim {
    background: rgba(255,255,255,0.88) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    backdrop-filter: blur(8px) saturate(1.2);
    border-bottom: 1px solid var(--border);
  }
}
#shippedView .shipped-metric-pill,
#shippedView .sales-metric-pill,
#shippedView .shipped-status-toggle button {
  transition: all 0.16s var(--ease-out);
  border-radius: var(--r-md) !important;
}
#shippedView .shipped-status-toggle button.active,
#shippedView .sales-metric-pill.active {
  background: var(--brand-bg) !important;
  color: var(--brand-700) !important;
  border-color: var(--brand-ring) !important;
  box-shadow: 0 2px 4px rgba(60,117,56,0.08);
}
#shippedView .shipped-export-btn { transition: all 0.15s var(--ease-out); }
#shippedView .card-head h3 { font-weight: 600 !important; letter-spacing: -0.015em !important; }
#shippedView .card-head .sub { font-size: 12px; letter-spacing: 0.02em; color: var(--text-3); }
#shippedView .card-table table tbody td .num,
#shippedView .card-table table tbody td[data-num] {
  font-feature-settings: "tnum" 1 !important;
  letter-spacing: -0.01em;
}
#shippedView .kpi { transition: box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out) !important; }
@media (hover: hover) and (pointer: fine) {
  #shippedView .shipped-status-toggle button:hover,
  #shippedView .sales-metric-pill:hover { background: var(--surface-2) !important; border-color: var(--border-strong); }
  #shippedView .shipped-status-toggle button.active:hover,
  #shippedView .sales-metric-pill.active:hover { box-shadow: 0 4px 8px rgba(60,117,56,0.12); }
  #shippedView .shipped-export-btn:hover { box-shadow: var(--sh-md) !important; border-color: var(--border-strong) !important; }
  #shippedView .card-table table tbody tr:hover { background: var(--brand-bg) !important; }
  #shippedView .kpi:hover { box-shadow: var(--sh-md) !important; border-color: var(--brand-300) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #shippedView .shipped-metric-pill,
  #shippedView .sales-metric-pill,
  #shippedView .shipped-status-toggle button,
  #shippedView .shipped-export-btn,
  #shippedView .kpi { transition: none !important; }
}

/* ── Tasks (#tasksView) ─────────────────────────────────────────────────── */
#tasksView .tasks-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 24px; border-bottom: 1px solid var(--border);
  background: var(--surface); transition: background .15s var(--ease-out);
}
#tasksView .filter-pill {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); border-radius: 20px; font-weight: 550;
  padding: 6px 14px; font-size: 13px; letter-spacing: .01em;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out),
              color .15s var(--ease-out), box-shadow .15s var(--ease-out);
  cursor: pointer;
}
#tasksView .filter-pill.active {
  background: var(--brand-bg); color: var(--brand-700);
  border-color: var(--brand-ring); box-shadow: 0 0 0 2px var(--brand-ring);
}
#tasksView .tasks-view-toggle {
  background: var(--surface-3); border-radius: var(--r-md);
  padding: 3px; border: 1px solid var(--border); display: flex; gap: 2px;
}
#tasksView .tasks-view-toggle button {
  border: 0; background: transparent; color: var(--text-2);
  font-weight: 550; border-radius: 6px; padding: 5px 12px; font-size: 13px;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
#tasksView .tasks-view-toggle button.active {
  background: var(--surface); color: var(--brand-700); box-shadow: var(--sh-sm);
}
#tasksView .btn-primary.tasks-new-btn {
  display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--sh-sm);
}
#tasksView .task-card {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
  transition: box-shadow .16s var(--ease-out), border-color .16s var(--ease-out);
}
#tasksView .pill {
  border-radius: 16px; font-weight: 550; font-size: 11.5px;
  letter-spacing: .02em; padding: 4px 9px;
  font-family: var(--mono); display: inline-block;
}
#tasksView .pill-err { background: var(--danger-bg); color: var(--danger); }
#tasksView .pill-warn { background: var(--warn-bg); color: var(--warn); }
#tasksView .pill-info { background: var(--info-bg); color: var(--info); }
#tasksView .tk-matrix {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; padding: 16px 24px;
}
#tasksView .tk-quad {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm);
}
#tasksView .tk-quad-head {
  background: var(--surface-2); padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
#tasksView .tk-quad-title {
  display: block; font-weight: 600; color: var(--text);
  font-size: 13px; letter-spacing: -.01em; margin-bottom: 2px;
}
#tasksView .tk-quad-sub {
  display: block; font-size: 11px; color: var(--text-3);
  font-weight: 500; letter-spacing: .02em;
}
#tasksView .tk-card {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-md); padding: 12px; margin: 8px;
  transition: box-shadow .16s var(--ease-out), border-color .16s var(--ease-out);
  cursor: pointer;
}
#tasksView .tk-card-title {
  font-weight: 550; color: var(--text); font-size: 13px;
  letter-spacing: -.01em; margin-bottom: 6px; line-height: 1.3;
}
#tasksView .tk-card-meta {
  font-size: 11px; color: var(--text-3); font-family: var(--mono);
  font-feature-settings: "tnum";
}
#tasksView .list-search input {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 8px 12px 8px 36px; background: var(--surface);
  font-family: var(--font); transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
#tasksView .list-search input:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none;
}
#tasksView .loading-state,
#tasksView .error-state {
  padding: 32px 24px; text-align: center; color: var(--text-3); font-size: 13px;
}
#tasksView .error-state { color: var(--danger); }
@media (hover: hover) and (pointer: fine) {
  #tasksView .filter-pill:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
  #tasksView .task-card:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); }
  #tasksView .tk-card:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); }
}
@media (prefers-reduced-motion: reduce) {
  #tasksView .filter-pill,
  #tasksView .task-card,
  #tasksView .tk-card,
  #tasksView .tasks-view-toggle button,
  #tasksView .list-search input { transition: none !important; }
}

/* ── Approvals (#approvalsView) ─────────────────────────────────────────── */
#approvalsView .approval-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-sm) !important;
  transition: box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out) !important;
}
#approvalsView .approval-card.approval-status-pending { border-left-color: var(--warn) !important; }
#approvalsView .approval-card.approval-status-approved { border-left-color: var(--brand) !important; opacity: 0.85; }
#approvalsView .approval-card.approval-status-rejected { border-left-color: var(--danger) !important; background: var(--danger-bg) !important; }
#approvalsView .approval-card.approval-status-superseded { border-left-color: var(--text-3) !important; opacity: 0.7; background: var(--surface-3) !important; }
#approvalsView .approval-id {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  background: var(--surface-3) !important;
  border-radius: var(--r-sm) !important;
  padding: 2px 7px !important;
  font-feature-settings: "tnum" 1;
}
#approvalsView .approval-btn-approve {
  border-radius: var(--r-md) !important;
  font-weight: 550 !important;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out) !important;
}
#approvalsView .approval-btn-reject {
  border-radius: var(--r-md) !important;
  font-weight: 550 !important;
  color: var(--danger) !important;
  border-color: var(--danger-bg) !important;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out) !important;
}
#approvalsView .approval-note {
  background: var(--danger-bg) !important;
  border-left: 2px solid var(--danger) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  color: var(--text) !important;
  font-style: italic;
}
@media (hover: hover) and (pointer: fine) {
  #approvalsView .approval-card:hover { box-shadow: var(--sh-md) !important; border-color: var(--border-strong) !important; }
  #approvalsView .approval-card.approval-status-pending:hover { border-left-color: var(--warn) !important; }
  #approvalsView .approval-card.approval-status-approved:hover { border-left-color: var(--brand-300) !important; }
  #approvalsView .approval-btn-reject:hover { background: var(--danger-bg) !important; border-color: var(--danger) !important; }
}

/* ── Leads (#leadsIntel) ────────────────────────────────────────────────── */
#leadsIntel .lds-kpi,
#leadsIntel .lds-card,
#leadsIntel .lds-ai {
  transition: box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
#leadsIntel .lds-rail {
  box-shadow: 0 2px 8px rgba(60,117,56,0.08);
  backdrop-filter: blur(12px);
}
@media (hover:hover) and (pointer:fine) {
  #leadsIntel .lds-kpi:hover,
  #leadsIntel .lds-card:hover {
    box-shadow: 0 4px 12px rgba(60,117,56,0.12);
    border-color: var(--g-l, #6BA866);
  }
  #leadsIntel .lds-ai:hover { box-shadow: 0 6px 16px rgba(60,117,56,0.16); }
  #leadsIntel .lds-btn:not(.p):hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
  #leadsIntel .lds-pill:hover:not(.on) { background: var(--bg); box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
  #leadsIntel .lds-ht td:hover { box-shadow: 0 0 0 1px var(--g-l, #6BA866); border-radius: 6px; }
}

/* ── Settings (#settingsNav, .set-sticky-head) ──────────────────────────── */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #settingsNav { background: rgba(255,255,255,.68) !important; -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3) !important; }
}
#settingsNav .set-nav-item {
  border: 1px solid transparent;
  transition: background .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
#settingsNav .set-nav-item:hover { background: var(--surface-3); border-color: var(--border-strong); box-shadow: var(--sh-sm); }
#settingsNav .set-nav-item.active { background: var(--brand-bg); border-color: var(--brand-ring); color: var(--brand); position: relative; padding-left: 7px; }
#settingsNav .set-nav-item.active::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 0 2px 2px 0; background: linear-gradient(180deg, var(--brand), var(--brand-300)); }
.set-sticky-head { background: var(--surface); display: flex; align-items: center; gap: 10px; }
.set-sticky-head::before { content: ""; flex: none; width: 3px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--brand), var(--brand-300)); }

/* ── OVX accordion (.ovx-acc) ───────────────────────────────────────────── */
.ovx-acc {
  box-shadow: 0 1px 3px rgba(40,38,30,0.06);
  transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.ovx-acc.open { box-shadow: 0 4px 12px rgba(60,117,56,0.1); border-color: var(--border-strong); }
.ovx-acc-head { transition: background 0.2s var(--ease-out); position: relative; }
.ovx-acc-head::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: transparent; border-radius: 12px 0 0 12px;
  transition: background 0.2s var(--ease-out);
}
.ovx-acc.open .ovx-acc-head::before { background: var(--brand); }
.ovx-acc-chev { transition: transform 0.25s var(--ease-out), color 0.25s var(--ease-out); }
.ovx-cnt {
  font-variant-numeric: tabular-nums;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.ovx-acc.open .ovx-acc-body { background: rgba(255,255,255,0.3); backdrop-filter: blur(0.5px); }
@media (hover: hover) and (pointer: fine) {
  .ovx-acc:hover { box-shadow: 0 3px 8px rgba(60,117,56,0.09); border-color: var(--border-strong); }
  .ovx-acc-head:hover .ovx-acc-chev { color: var(--brand); }
  .ovx-acc-head:hover .ovx-cnt { background: var(--border-strong); border-color: var(--border-strong); color: var(--text); }
}

/* ── Vendor Master (#vendorMasterOverlay) ───────────────────────────────── */
#vendorMasterOverlay #vmToolbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-sm); position: relative;
}
#vendorMasterOverlay #vmToolbar strong { color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
#vendorMasterOverlay #vmToolbar::before {
  content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%;
  background: var(--brand); border-radius: var(--r-sm) 0 0 var(--r-sm);
}
#vendorMasterOverlay #vmSearch {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  border-radius: var(--r-md);
}
#vendorMasterOverlay #vmSearch:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
#vendorMasterOverlay #vmCloseBtn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: var(--r-md); transition: all 150ms var(--ease-out); cursor: pointer;
}
#vendorMasterOverlay #vmCloseBtn:hover { background: var(--surface-3); border-color: var(--border-strong); }
#vendorMasterOverlay table {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md);
}
#vendorMasterOverlay thead th {
  background: var(--surface-2); color: var(--text-3); font-weight: 600;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
#vendorMasterOverlay tbody tr {
  transition: background-color 150ms var(--ease-out);
  border-bottom: 1px solid var(--border);
}
#vendorMasterOverlay .vendor-type-badge,
#vendorMasterOverlay .capability-badge {
  background: var(--brand-bg); color: var(--brand);
  border: 1px solid rgba(60,117,56,0.22); border-radius: var(--r-md);
  font-size: 11px; padding: 2px 8px; display: inline-block; font-weight: 500;
  transition: all 150ms var(--ease-out);
}
#vendorMasterOverlay .vm-edit {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: var(--r-md); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all 150ms var(--ease-out);
}
#vendorMasterOverlay .vm-edit:active { transform: translateY(0.5px); }
#vendorMasterOverlay .vm-del {
  border: 1px solid var(--border); background: var(--surface); color: var(--danger);
  border-radius: var(--r-md); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all 150ms var(--ease-out);
}
#vendorMasterOverlay .vm-del:active { transform: translateY(0.5px); }
#vendorMasterOverlay .vm-name { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; }
#vendorMasterOverlay div[style*="max-width:660px"] {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
#vendorMasterOverlay div[style*="max-width:660px"] h3 { color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
#vendorMasterOverlay input[type="text"],
#vendorMasterOverlay input[type="email"],
#vendorMasterOverlay input[type="tel"],
#vendorMasterOverlay input[type="number"],
#vendorMasterOverlay textarea {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--r-md); transition: all 150ms var(--ease-out);
}
#vendorMasterOverlay input[type="text"]:focus,
#vendorMasterOverlay input[type="email"]:focus,
#vendorMasterOverlay input[type="tel"]:focus,
#vendorMasterOverlay input[type="number"]:focus,
#vendorMasterOverlay textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
#vendorMasterOverlay label[style*="display:inline-flex"] {
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text-2);
  transition: all 150ms var(--ease-out); cursor: pointer;
}
#vendorMasterOverlay label[style*="display:inline-flex"] input:checked { accent-color: var(--brand); }
@media (hover:hover) and (pointer:fine) {
  #vendorMasterOverlay tbody tr:hover { background: var(--brand-bg); }
  #vendorMasterOverlay .vendor-type-badge:hover { border-color: var(--brand); background: rgba(60,117,56,0.08); }
  #vendorMasterOverlay .capability-badge:hover { border-color: var(--brand); background: rgba(60,117,56,0.12); }
  #vendorMasterOverlay .vm-edit:hover { background: var(--brand-bg); border-color: var(--brand); color: var(--brand); }
  #vendorMasterOverlay .vm-del:hover { background: var(--danger-bg); border-color: var(--danger); }
  #vendorMasterOverlay label[style*="display:inline-flex"]:hover { background: var(--brand-bg); border-color: var(--brand); color: var(--brand); }
}

/* ── Production Tracker (#prodTrackerOverlay) ───────────────────────────── */
#prodTrackerOverlay .pt-kpi .l {
  font-size: 11px; font-weight: 800; letter-spacing: 0.085em;
  text-transform: uppercase; color: var(--text-2);
  display: flex; align-items: center; gap: 7px;
}
#prodTrackerOverlay .pt-kpi .l::before {
  content: ''; flex: none; width: 2px; height: 11px; border-radius: 1px;
  background: linear-gradient(180deg, var(--brand), var(--brand-300));
}
#prodTrackerOverlay .pt-kpi .v { font-feature-settings: 'tnum' 1; letter-spacing: -0.015em; font-weight: 600; }
#prodTrackerOverlay .pt-card-head {
  display: flex; align-items: center; gap: 10px; padding-left: 12px;
  border-left: 3px solid var(--brand); font-weight: 600; letter-spacing: -0.005em;
}
#prodTrackerOverlay .pt-card-head .ic { font-size: 18px; }
#prodTrackerOverlay .pf-tab {
  transition: box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
  font-weight: 550;
}
#prodTrackerOverlay .pf-tab.active { background: var(--brand); border-color: var(--brand); color: #ffffff; box-shadow: var(--sh-sm); }
#prodTrackerOverlay .pt-chip { font-weight: 550; letter-spacing: -0.005em; }
#prodTrackerOverlay .pt-table tbody tr { transition: background 0.12s var(--ease-out); }
#prodTrackerOverlay .pt-vend { transition: color 0.15s var(--ease-out), text-shadow 0.15s var(--ease-out); }
#prodTrackerOverlay .pt-table thead th {
  font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  font-size: 10.5px; color: var(--text-2);
}
#prodTrackerOverlay .pt-edit,
#prodTrackerOverlay .pt-del,
#prodTrackerOverlay .pf-edit,
#prodTrackerOverlay .pf-del,
#prodTrackerOverlay .pt-add,
#prodTrackerOverlay .pf-add {
  transition: background 0.12s var(--ease-out), border-color 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  #prodTrackerOverlay .pf-tab:hover { border-color: var(--brand-300); box-shadow: 0 0 0 2px var(--brand-ring); }
  #prodTrackerOverlay .pt-chip:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
  #prodTrackerOverlay .pt-table tbody tr:hover { background: var(--brand-bg); }
  #prodTrackerOverlay .pt-vend:hover { color: var(--brand); text-shadow: 0 0 8px rgba(60,117,56,0.15); }
  #prodTrackerOverlay .pt-edit:hover,
  #prodTrackerOverlay .pf-edit:hover { background: var(--brand-bg); color: var(--brand); }
}

/* ── Printing Tracker (#printingOverlay) ────────────────────────────────── */
#printingOverlay .pfx-wrap { padding: 16px 18px 40px !important; }
#printingOverlay .pfx-top { margin-bottom: 14px !important; }
#printingOverlay .pfx-stages { gap: 7px !important; }
#printingOverlay .pfx-stage {
  font-weight: 600 !important; letter-spacing: -.006em;
  transition: background .15s var(--ease-out), color .15s var(--ease-out),
              border-color .15s var(--ease-out), box-shadow .15s var(--ease-out) !important;
}
#printingOverlay .pfx-stage.on { box-shadow: var(--sh-sm) !important; }
#printingOverlay .pfx-order {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  box-shadow: var(--sh-sm) !important;
  transition: box-shadow .16s var(--ease-out), border-color .15s var(--ease-out) !important;
}
#printingOverlay .pfx-order.open { border-color: var(--brand) !important; box-shadow: var(--sh-md) !important; }
#printingOverlay .pfx-o-title { font-weight: 700 !important; letter-spacing: -.015em; }
#printingOverlay .pfx-d-stage { font-feature-settings: "tnum" !important; letter-spacing: .03em !important; }
#printingOverlay .pfx-chip {
  font-weight: 600 !important;
  transition: background .14s var(--ease-out), color .14s var(--ease-out) !important;
}
#printingOverlay .pfx-btn.primary {
  box-shadow: var(--sh-sm) !important;
  transition: background .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .12s var(--ease-out) !important;
}
#printingOverlay .pfx-bulkbar { background: var(--brand-bg) !important; border: 1px solid var(--brand-300) !important; }
#printingOverlay .pfx-form input,
#printingOverlay .pfx-form select,
#printingOverlay .pfx-form textarea {
  border-color: var(--border) !important;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out) !important;
}
#printingOverlay .pfx-form input:focus,
#printingOverlay .pfx-form select:focus,
#printingOverlay .pfx-form textarea:focus {
  border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-ring) !important; outline: none !important;
}
#printingOverlay .pfx-modal { background: rgba(0,0,0,.12) !important; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #printingOverlay .pfx-modal { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}
@media (hover:hover) and (pointer:fine) {
  #printingOverlay .pfx-stage:hover { box-shadow: var(--sh-sm); border-color: var(--brand-300); }
  #printingOverlay .pfx-order:hover { box-shadow: var(--sh-md) !important; border-color: var(--brand-300) !important; }
  #printingOverlay .pfx-chip a:hover { opacity: .85; }
  #printingOverlay .pfx-btn.primary:hover { box-shadow: var(--sh-md) !important; }
}
@media (hover:none) {
  #printingOverlay .pfx-btn.primary:active { box-shadow: var(--sh-md) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #printingOverlay .pfx-order, #printingOverlay .pfx-stage, #printingOverlay .pfx-btn,
  #printingOverlay .pfx-chip, #printingOverlay .pfx-form input,
  #printingOverlay .pfx-form select, #printingOverlay .pfx-form textarea {
    transition: none !important;
  }
}

/* ── Accessories Tracker (#accessoriesOverlay) ──────────────────────────── */
#accessoriesOverlay .pfx-top {
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(60,117,56,0.15); background: rgba(255,255,255,0.8);
}
#accessoriesOverlay .pfx-stage {
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
#accessoriesOverlay .pfx-stage.on { background: var(--brand-bg); color: var(--brand-700); border-color: var(--brand-300); }
#accessoriesOverlay .pfx-stage b { font-feature-settings: "tnum"; font-weight: 700; }
#accessoriesOverlay .pfx-board { gap: 16px; padding: 16px 24px; }
#accessoriesOverlay .pfx-col,
#accessoriesOverlay .pfx-lane {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
#accessoriesOverlay .pfx-col h3,
#accessoriesOverlay .pfx-lane h3 {
  position: relative; padding-left: 12px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text); margin: 0 0 0 -3px;
  padding-top: 12px; padding-bottom: 8px;
}
#accessoriesOverlay .pfx-col h3::before,
#accessoriesOverlay .pfx-lane h3::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--brand); border-radius: var(--r-sm) var(--r-sm) 0 0;
}
#accessoriesOverlay .pfx-card {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
  transition: box-shadow 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
#accessoriesOverlay .pfx-search {
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
#accessoriesOverlay .pfx-search:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); outline: none;
}
#accessoriesOverlay .pfx-btn.primary {
  transition: background 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
#accessoriesOverlay .pfx-modal { box-shadow: var(--sh-lg); }
#accessoriesOverlay .pfx-modal-box { border-radius: var(--r-xl); border: 1px solid var(--border); }
#accessoriesOverlay .pfx-modal-head {
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  font-weight: 600; letter-spacing: -0.01em;
}
@media (hover:hover) and (pointer:fine) {
  #accessoriesOverlay .pfx-card:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); }
  #accessoriesOverlay .pfx-btn.primary:hover { box-shadow: var(--sh-md); }
}
@media (max-width: 900px) {
  #accessoriesOverlay .pfx-board { gap: 12px; padding: 12px 16px; }
  #accessoriesOverlay .pfx-col h3::before { height: 2px; }
}

/* ── AI Assistant (#aiOverlay) ──────────────────────────────────────────── */
#aiOverlay .ai-head {
  border-bottom: 1px solid var(--border) !important; padding: 14px 16px !important;
  display: flex; align-items: center; justify-content: space-between;
}
#aiOverlay .ai-head-title {
  font-weight: 600 !important; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px; color: var(--text);
}
#aiOverlay .ai-head-title::before {
  content: ''; display: block; width: 3px; height: 14px; border-radius: 1.5px;
  background: linear-gradient(180deg, var(--brand), var(--brand-300)); flex: none;
}
#aiOverlay .ai-head-ico, #aiOverlay .ai-x {
  width: 28px; height: 28px; border-radius: var(--r-md); border: none;
  background: transparent; color: var(--text-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.14s var(--ease-out), color 0.14s var(--ease-out);
}
#aiOverlay .ai-msg { border-radius: var(--r-lg) !important; transition: box-shadow 0.15s var(--ease-out); }
#aiOverlay .ai-msg.user, #aiOverlay .ai-msg-user { box-shadow: var(--sh-sm) !important; }
#aiOverlay .ai-msg.bot, #aiOverlay .ai-msg.assistant, #aiOverlay .ai-msg-bot { box-shadow: var(--sh-sm) !important; }
#aiOverlay .ai-qa, #aiOverlay .ai-rep {
  border-radius: 20px !important; font-weight: 550 !important;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
  cursor: pointer; box-shadow: var(--sh-sm);
}
#aiOverlay .ai-qa:active, #aiOverlay .ai-rep:active { transform: scale(0.97); }
#aiOverlay .ai-ta {
  border-radius: var(--r-md) !important; border: 1px solid var(--border) !important;
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
#aiOverlay .ai-ta:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-ring) !important; outline: none !important; }
#aiOverlay .ai-btn {
  border-radius: var(--r-md) !important; background: var(--brand) !important; color: #fff !important;
  font-weight: 600 !important; border: 1px solid var(--brand) !important;
  transition: background 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
  cursor: pointer; box-shadow: var(--sh-sm);
}
#aiOverlay .ai-menu { border-radius: var(--r-md) !important; box-shadow: var(--sh-lg) !important; border: 1px solid var(--border) !important; }
#aiOverlay .ai-menu button { transition: background 0.12s var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  #aiOverlay .ai-head-ico:hover, #aiOverlay .ai-x:hover { background: var(--surface-3); color: var(--text-2); }
  #aiOverlay .ai-qa:hover, #aiOverlay .ai-rep:hover { background: var(--surface-3) !important; box-shadow: var(--sh-md); }
  #aiOverlay .ai-btn:hover { background: var(--brand-600) !important; box-shadow: var(--sh-md); }
  #aiOverlay .ai-menu button:hover { background: var(--surface-3) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #aiOverlay .ai-head-ico, #aiOverlay .ai-x, #aiOverlay .ai-msg,
  #aiOverlay .ai-qa, #aiOverlay .ai-rep, #aiOverlay .ai-ta,
  #aiOverlay .ai-btn, #aiOverlay .ai-menu button { transition: none !important; }
}

/* ── Pings Chat panel (#wsxPanel) ───────────────────────────────────────── */
#wsxPanel .wsx-bubble {
  box-shadow: 0 1px 3px rgba(20,40,30,.07), 0 .5px 0 var(--border);
  transition: box-shadow .16s var(--ease-out), border-color .16s var(--ease-out);
}
#wsxPanel .wsx-composer textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
#wsxPanel .wsx-cl-search { display: flex; align-items: center; gap: 8px; }
#wsxPanel .wsx-cl-search::before {
  content: ""; flex: none; width: 3px; height: 13px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--brand-300)); opacity: 0;
}
#wsxPanel .wsx-nt-ico {
  border: 1px solid rgba(60,117,56,.12);
  transition: border-color .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
#wsxPanel .wsx-pin-bar { box-shadow: inset 0 -1px 0 rgba(200,150,50,.15); }
#wsxPanel .wsx-cl-time,
#wsxPanel .wsx-msg-time,
#wsxPanel .wsx-pin-lbl,
#wsxPanel .wsx-cl-badge {
  font-feature-settings: "tnum" 1; letter-spacing: -.015em;
}
@media (hover:hover) and (pointer:fine) {
  #wsxPanel .wsx-cl-row {
    box-shadow: 0 1px 0 var(--border);
    transition: box-shadow .18s var(--ease-out), background .13s var(--ease-out);
  }
  #wsxPanel .wsx-cl-row:hover { box-shadow: 0 2px 6px rgba(60,117,56,.08), 0 1px 0 var(--border); }
  #wsxPanel .wsx-msg:hover .wsx-bubble { box-shadow: 0 3px 8px rgba(60,117,56,.1); border-color: var(--brand-300); }
  #wsxPanel .wsx-nt:hover .wsx-nt-ico { border-color: var(--brand-300); box-shadow: 0 0 0 2px var(--brand-ring); }
}

/* ============================================================================
 * REDESIGN PASS 3 — bolder bespoke treatments: Orders/Kanban + Leads
 * (additive, namespaced, token-based, no transform on live cards). ===========*/

/* ── Orders / Kanban: (pass-3 lane/card overrides REMOVED) ──────────────────
   surface-2 lanes, sticky surface-2 heads, 650!important brands and green
   card-hover flattened the SMX colour-identity look — the orders kanban now
   takes the Sample-board anatomy from index.html's base rules verbatim. */

/* ── Leads: confident masthead, mono KPI values, green-gradient funnel/bars ── */
#leadsIntel .lds-title{ font-weight:700!important; letter-spacing:-.025em; }
#leadsIntel .lds-kpi{ border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  transition:box-shadow .18s var(--ease-out),border-color .18s var(--ease-out); }
#leadsIntel .lds-kpi .k-val{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
#leadsIntel .lds-bar > span,
#leadsIntel .lds-fstep-fill,
#leadsIntel .lds-rank-fill,
#leadsIntel .lds-stage-fill{ background:linear-gradient(90deg,var(--brand),var(--brand-300))!important; }
#leadsIntel .lds-card{ border-radius:var(--r-lg); }
@media (hover:hover) and (pointer:fine){
  #leadsIntel .lds-kpi:hover{ box-shadow:var(--sh-md); border-color:var(--brand-300); }
}

/* ============================================================================
 * TASKS mobile — controls on ONE line + New-task FAB bottom-left as a circle
 * ========================================================================== */
@media (max-width:700px){
  /* user-picker + filter pills + List/Matrix toggle on a single scrollable row */
  #tasksView .tasks-toolbar{ flex-direction:row!important; flex-wrap:nowrap!important;
    align-items:center; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  #tasksView .tasks-toolbar::-webkit-scrollbar{ display:none; }
  #tasksView .tasks-toolbar > *{ flex-shrink:0; }
  #tasksView .tasks-user-picker{ flex-direction:row!important; align-items:center; gap:6px; }
  #tasksView .tasks-user-picker label{ display:none!important; }       /* drop "View tasks of" to save width */
  #tasksView .tasks-user-picker select{ max-width:128px; }
}
/* New-task FAB → bottom-LEFT, circular, icon-only (was a pill bottom-right) */
.mobile-fab{
  left:18px!important; right:auto!important;
  bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;
  width:var(--fab); height:var(--fab); padding:0!important; gap:0!important; justify-content:center;
  border-radius:50%!important; box-shadow:0 8px 22px rgba(60,117,56,.42);
}
.mobile-fab span{ display:none!important; }                            /* hide "New task" label */
.mobile-fab svg{ width:var(--fab-ico)!important; height:var(--fab-ico)!important; }

/* Tasks toolbar — keep everything VISIBLE on one line: pin the user-picker and
 * the List/Matrix toggle; let ONLY the filter pills scroll in the middle, so the
 * right-hand toggle is never cut off. Overrides the earlier scroll-whole-row. */
@media (max-width:700px){
  #tasksView .tasks-toolbar{ overflow:visible!important; gap:7px; }
  #tasksView .tasks-user-picker{ flex:0 0 auto; }
  #tasksView .tasks-user-picker select{ max-width:92px; font-size:12px; }
  #tasksView .tasks-filter{ flex:1 1 auto; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #tasksView .tasks-filter::-webkit-scrollbar{ display:none; }
  #tasksView .tasks-filter .filter-pill{ padding:6px 11px; font-size:12px; }
  #tasksView .tasks-view-toggle{ flex:0 0 auto; }
  #tasksView .tasks-view-toggle button{ padding:6px 10px; font-size:12px; }
}

/* A task's assignee role is written "Name (Designation)". The parenthetical is
 * plain text, so a narrow column split it as "(Production" / "Manager)," and
 * the card read like three ragged columns. Keep the role in one piece — the
 * line may break BETWEEN assignees, never inside one job title. */
.task-meta .task-role{ white-space:nowrap; }

/* Tasks toolbar, phone — give the pills their OWN row.
 *
 * The one-line rule above pins the picker and the List/Matrix toggle and hands
 * the leftovers to the pills: at 390px that is 180px of track for 430px of
 * pills, so the row opened on "All · Overdue · Pe…" — a word cut in half with
 * nothing to say it scrolls. Filters are the primary control on this page and
 * were getting the smallest share of the width.
 *
 * Wrap instead: who/how (picker + view toggle) on row 1, the full-width filter
 * track on row 2. The pills go from 180px to the full 366px, which is All,
 * Overdue and Pending visible at rest instead of one and a half. */
@media (max-width:700px){
  #tasksView .tasks-toolbar{ flex-wrap:wrap!important; row-gap:8px; }
  /* Size to the name it holds — the row is no longer contested, but a select
   * stretched to 297px for the word "Sreeni" just looks like a mistake. */
  #tasksView .tasks-user-picker{ order:1; flex:0 1 auto; min-width:0; }
  #tasksView .tasks-user-picker select{ max-width:190px; width:auto; }
  #tasksView .tasks-view-toggle{ order:2; margin-left:auto; }
  #tasksView .tasks-filter{ order:3; flex:0 0 100%; width:100%; scroll-behavior:smooth; }
  /* Fade the trailing edge so the overflow reads as "more to the right"
   * rather than as a pill that happens to be clipped. */
  #tasksView .tasks-filter{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
  }
}

/* List/Matrix toggle → icon buttons (centered) */
#tasksViewToggle button{ display:inline-flex; align-items:center; justify-content:center; }
#tasksViewToggle button svg{ display:block; }

/* Chat FAB — drop the green OUTER GLOW; use a neutral, contained drop shadow
 * (no coloured halo, no white ring). Cleaner, less "shiny widget". */
#wsxMobChat{ box-shadow:0 4px 14px rgba(20,40,25,.20)!important; border:none!important; }
.wsx-edge-chat{ box-shadow:0 4px 12px rgba(20,40,25,.16)!important; border:none!important; }

/* Chat FAB — Option C: mini + tucked. 46px flat-green circle, lighter shadow,
 * nudged into the corner; logo scaled down. (overrides the earlier de-glow rule) */
#wsxMobChat{
  width:46px!important; height:46px!important; border-radius:50%!important;
  background:var(--brand,#3C7538)!important;
  box-shadow:0 3px 10px rgba(20,40,25,.16)!important; border:none!important;
  right:14px!important; bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
}
#wsxMobChat img{ width:26px!important; height:26px!important; border-radius:7px!important; padding:2px!important; }

/* ============================================================================
 * FABs — chat-bubble ICON (not the brand logo) + consistent MINI sizing,
 * on mobile AND desktop. Green identity, neutral shadow, no glow.
 * ========================================================================== */
/* Mobile chat FAB → white chat-bubble icon over the green circle (hide the logo img) */
#wsxMobChat img{ display:none!important; }
#wsxMobChat{
  background-color:var(--brand,#3C7538)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.4 8.4 8.4 0 0 1-3.8-.9L3 21l2-5.7a8.4 8.4 0 0 1 4.5-11.3 8.4 8.4 0 0 1 11 7z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:center!important; background-size:23px 23px!important;
}
/* Left "+ New" task FAB → mini 46px to match the chat FAB */
.mobile-fab{ width:46px!important; height:46px!important; }
.mobile-fab svg{ width:20px!important; height:20px!important; }
/* Desktop right-edge buttons: chat → mini circle + chat icon; notif bell → mini */
.wsx-edge-chat .wsx-edge-logo{ display:none!important; }
.wsx-edge-chat{
  width:44px!important; height:44px!important; border-radius:50%!important; border:none!important;
  box-shadow:0 3px 10px rgba(20,40,25,.16)!important;
  background-color:var(--brand,#3C7538)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.4 8.4 8.4 0 0 1-3.8-.9L3 21l2-5.7a8.4 8.4 0 0 1 4.5-11.3 8.4 8.4 0 0 1 11 7z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:center!important; background-size:21px 21px!important;
}
.wsx-edge-btn{ width:44px!important; height:44px!important; }
/* The chat button keeps its brand-green fill in every state (set !important
   just above), so "active" reads as a ring rather than a colour swap. */
.wsx-edge-chat.active{ box-shadow:0 0 0 3px rgba(60,117,56,.30), 0 3px 10px rgba(20,40,25,.20)!important; }

/* ============================================================================
 * REDESIGN PASS 4 — inner-page mobile + controls consistency
 * Page-scoped mobile polish (max-width:700px) for OVX order detail, Customers,
 * Sales, Settings/Users, Role permissions, My Profile; plus a global Controls
 * consistency layer (all viewports). GREEN identity only. Token-driven.
 * Additive — no desktop layout/flex-direction/transform changes.
 * ========================================================================== */

/* -- OVX order detail (mobile): iOS accordion cards, full-width, 44px targets -- */
@media (max-width:700px){
  .ovx-acc-row{ display:flex!important; flex-direction:column!important; gap:12px!important; }
  .ovx-acc{ margin:0!important; padding:0!important; }
  .ovx-acc-head{ min-height:44px!important; padding:10px 12px!important; display:flex!important; align-items:center!important; gap:10px!important; }
  .ovx-acc-ico{ min-width:36px!important; width:36px!important; height:36px!important; display:flex!important; align-items:center!important; justify-content:center!important; flex-shrink:0!important; border-radius:var(--r-md)!important; }
  .ovx-acc-titles, .ovx-acc-meta{ flex:1!important; display:flex!important; flex-direction:column!important; gap:2px!important; min-width:0!important; }
  .ovx-acc-title{ font-size:14px!important; font-weight:600!important; color:var(--text)!important; line-height:1.3!important; word-break:break-word!important; }
  .ovx-acc-summary, .ovx-acc-sub{ font-size:12px!important; color:var(--text-2)!important; line-height:1.3!important; }
  .ovx-acc-chev{ min-width:32px!important; width:32px!important; height:32px!important; display:flex!important; align-items:center!important; justify-content:center!important; color:var(--text-3)!important; flex-shrink:0!important; }
  /* inline-FLEX, not inline-block: the chip is <span.k>SALES</span><span.v>name</span>
     and its 6px gap only exists under flex — block rendered "SALESSudheesh". */
  .ovx-chip{ display:inline-flex!important; align-items:center!important; gap:6px!important; min-height:20px!important; padding:2px 8px!important; margin-left:8px!important; font-size:12px!important; font-weight:600!important; background:var(--brand-bg)!important; color:var(--brand)!important; border-radius:var(--r-sm)!important; font-family:var(--mono)!important; }
  .ovx-acc-body{ padding:12px!important; font-size:13px!important; line-height:1.5!important; overflow-x:hidden!important; }
  .ovx-acc-body button, .ovx-acc-body [role="button"], .ovx-acc-body a[onclick]{ min-height:44px!important; padding:10px 12px!important; font-size:13px!important; border-radius:var(--r-md)!important; display:inline-flex!important; align-items:center!important; gap:8px!important; }
  .ovx-modal{ padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important; }
}

/* -- OVX order page on a phone, pass 2 (mobile audit F12 F13 F15 F21 F44, 21 Oct 2026) — the OVX page's own 720px
 *    breakpoint (index.html), #orderModal-scoped so the inline <style> blocks below this sheet's <link> cannot win.
 *    F15: a 12px floor for meaningful text — 94 of 157 text nodes on VAR757 were 10–11.5px (stage dates and numbers,
 *         Sales/Merch chips, KPI labels, the subtitle's placed date and stage, card counts, the bottom bar's labels).
 *         Inline-styled small text inside the cards (erp-ovx-*.js) is caught by its style attribute.
 *    F13/F44: real 44x44 targets — Pin to top (15px wide), Delete order (31), remark History (26), the stamp's
 *         "history" (34), the BOM refresh (20), "Open tracker →" (16px tall), the All chip (38).
 *    F21: the section chips are ONE sticky, scrolling row under the order header; a chip tap also brings the row to
 *         the top (erp-ovx-organize.js revealFiltered) — before, the change happened below the fold.
 *    F12: the remark editors type at 16px (iOS zooms into a smaller field). */
@media (max-width:720px){
  #orderModal .ovx-hs-l, #orderModal .ovx-hs-n, #orderModal .ovx-hs-r, #orderModal .ovx-hp-meta, #orderModal .ovx-cnt,
  #orderModal .ovx-chip .k, #orderModal .ovx-chip .v, #orderModal .ovx-rrow .k, #orderModal .ovx-stat .k, #orderModal .ovx-stat .n,
  #orderModal .order-country, #orderModal .ovx-sub-placed, #orderModal .ovx-sub-stage .pill, #orderModal .ovx-sub-meta,
  #orderModal .ovx-ps-lbl, #orderModal .ovx-pinlocked, #orderModal .ovx-rmk-stamp, #orderModal .ovx-bottom button{ font-size:12px!important; }
  #orderModal [style*="font-size:9px"], #orderModal [style*="font-size:9.5px"], #orderModal [style*="font-size:10px"],
  #orderModal [style*="font-size:10.5px"], #orderModal [style*="font-size:11px"], #orderModal [style*="font-size:11.5px"],
  #orderModal [style*="font-size: 10px"], #orderModal [style*="font-size: 11px"]{ font-size:12px!important; }
  #orderModal .ovx-pinbtn{ min-width:44px; min-height:44px; justify-content:center; margin-left:0!important; }
  #orderModal .ovx-iconbtn{ min-width:44px; min-height:44px; }
  #orderModal .ovx-rrow{ padding-right:44px; min-height:46px; }   /* 44px button + the row's 1px rule: the next row never covers it */
  #orderModal .ovx-rmk-hist{ width:44px; height:44px; right:0; top:0; }
  #orderModal .ovx-rmk-stamp{ padding-right:0; }
  #orderModal .ovx-rmk-stamp button{ min-height:44px; min-width:44px; padding:0 4px; }
  #orderModal .ovx-rmk{ font-size:16px; }
  #orderModal .bom-ico{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  #orderModal .oso-top a, #orderModal .ovx-card-head a[onclick]{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }
  #orderModal #ovxCatStrip{ flex-wrap:nowrap!important; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    position:sticky; top:0; z-index:6; background:var(--surface,#fff); margin:0 -14px!important; padding:6px 14px!important;
    box-shadow:0 1px 0 var(--border,#E6E6E0); }
  #orderModal #ovxCatStrip::-webkit-scrollbar{ display:none; }
  #orderModal #ovxCatStrip button{ flex:none; min-height:44px; min-width:44px; font-size:13px!important; white-space:nowrap; }
}

/* -- Customers (mobile): KPI tiles, tabs, toggle, chips, search, table cards -- */
@media (max-width:700px){
  #customersView{ padding:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))!important; }
  #customersView .ci-kpi{ min-height:88px; padding:14px!important; border-radius:var(--r-md)!important; display:flex; flex-direction:column; justify-content:space-between; }
  #customersView .ci-kpi .k-label{ font-size:11px!important; }
  #customersView .ci-kpi .k-value{ font-size:20px!important; line-height:1.2!important; }
  #customersView .ci-tabs{ width:100%; display:flex; }
  #customersView .ci-tabs button{ flex:1; min-height:44px; padding:10px 8px!important; font-size:12.5px!important; }
  #customersView .ci-toggle{ width:100%; }
  #customersView .ci-toggle button{ flex:1; min-height:44px; padding:8px 6px!important; }
  #customersView .ci-chip{ margin-bottom:14px!important; min-height:40px; display:flex; align-items:center; }
  /* 16px, not 13: iOS zooms the page into a smaller field, and an !important here beat the app's own 16px phone rule (mobile audit F12) */
  #customersView .customers-search{ min-height:44px; padding:10px 12px!important; font-size:16px!important; }
  #customersView #ciTable tr{ margin-bottom:12px!important; padding:14px!important; }
  #customersView #ciTable td{ padding:6px 0!important; font-size:13px!important; }
  #customersView .ci-topbar{ flex-direction:column; gap:14px!important; }
}
@media (prefers-reduced-motion:reduce){
  #customersView .ci-kpi,
  #customersView .ci-tabs button,
  #customersView .ci-toggle button,
  #customersView .customers-search{ transition:none!important; }
}

/* -- Sales performance (mobile): filters, toggles, tabs, cards, leaderboard -- */
@media (max-width:700px){
  #salesView{ padding:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left)); }
  #salesView .sales-filters{ gap:8px; padding:8px 0; margin:12px 0; }
  #salesView .sales-filter-label{ white-space:nowrap; font-size:10px; }
  #salesView .sales-filter-select{ min-width:140px; min-height:44px; padding:10px 32px 10px 12px; font-size:13px; border-radius:var(--r-sm); }
  #salesView .sales-metric-toggle{ gap:1px; padding:4px; min-height:44px; align-items:center; }
  #salesView .sales-metric-pill{ padding:8px 16px; font-size:12px; min-height:36px; display:flex; align-items:center; }
  #salesView .sales-tabs{ gap:2px; padding:4px; min-height:44px; }
  #salesView .sales-tab-btn{ padding:8px 14px; min-height:36px; font-size:12px; display:flex; align-items:center; }
  #salesView .sales-active-period{ padding:10px 12px; margin-bottom:14px; font-size:12px; gap:8px; }
  #salesView .sales-active-period .value{ font-size:14px; }
  #salesView .sales-card{ padding:18px; margin-bottom:14px; }
  #salesView .sales-card-head{ gap:12px; margin-bottom:14px; }
  #salesView .sales-card-title{ font-size:16px; }
  #salesView .sales-kpi-grid{ gap:8px; margin-bottom:16px; }
  #salesView .sales-row-2col{ grid-template-columns:1fr; gap:14px; margin-bottom:16px; }
  #salesView .sales-customer-row{ padding:12px; min-height:44px; gap:12px; margin-bottom:8px; display:flex; align-items:center; }
  #salesView .sales-customer-name{ font-size:13px; }
  #salesView .sales-customer-qty{ font-size:13px; min-width:50px; text-align:right; }
  #salesView .sales-perf-grid{ grid-template-columns:1fr; gap:14px; }
  #salesView .sales-insight-panel{ padding:10px 12px; margin-top:12px; font-size:11px; }
  #salesView .sales-seg-legend{ font-size:12px; gap:8px; }
}

/* -- Settings & Users (mobile): table->cards, tabs, search, pane head, safe-area -- */
@media (max-width:700px){
  #usersView .users-desktop-table{ display:none!important; }
  #usersView .users-mobile-list{ display:block!important; }
  #usersView .user-card-mobile{ padding:14px 16px 12px!important; margin-bottom:10px!important; min-height:44px!important; display:flex!important; flex-direction:column!important; transition:box-shadow .15s var(--ease-out),border-color .15s var(--ease-out); }
  #usersView .user-card-mobile .uc-head{ min-height:44px!important; padding-right:8px!important; }
  #usersView .user-card-mobile .uc-name{ font-size:14px!important; font-weight:600!important; color:var(--text)!important; }
  #usersView .user-card-mobile .uc-row{ margin-top:6px!important; margin-bottom:4px!important; gap:8px!important; font-size:13px!important; min-height:20px!important; }
  #usersView .user-card-mobile .uc-label{ color:var(--text-3)!important; font-weight:500!important; flex:0 0 auto; }
  #usersView .user-card-mobile .uc-value{ color:var(--text-2)!important; word-break:break-word; font-family:var(--mono); }
  #usersView .users-tabs{ display:flex!important; gap:4px!important; padding:8px 12px!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch; }
  #usersView .users-tabs::-webkit-scrollbar{ display:none; }
  #usersView .users-tab{ min-height:44px!important; padding:8px 14px!important; font-size:13px!important; white-space:nowrap; flex-shrink:0; }
  #usersView .list-search-wrap{ flex-wrap:wrap!important; gap:8px!important; padding:12px 16px!important; }
  #usersView .list-search{ min-height:44px!important; }
  #usersView .list-search input{ min-height:44px!important; font-size:16px!important; }   /* 16px: iOS focus zoom (mobile audit F12) */
  #usersView .btn-primary{ min-height:44px!important; padding:8px 16px!important; }
  #usersView .pane-head{ padding:12px 16px!important; flex-wrap:wrap!important; gap:8px!important; }
  #usersView{ padding-bottom:env(safe-area-inset-bottom,0px)!important; }
}

/* -- Role permissions matrix (mobile): cat tabs, permission cards, 44px controls -- */
@media (max-width:700px){
  #usersTabPaneRoles .roles-matrix-card{ padding:0; }
  #usersTabPaneRoles .roles-cat-tabs{ gap:6px; margin-bottom:14px; padding:0 14px; }
  #usersTabPaneRoles .roles-cat-tab{ min-height:44px; display:flex; align-items:center; padding:10px 14px; font-size:13px; }
  #usersTabPaneRoles .roles-matrix-table tbody tr{ padding:12px 14px; margin-bottom:12px; border-radius:10px; gap:10px; }
  #usersTabPaneRoles .roles-matrix-table tbody td.role-col{ font-size:16px; font-weight:700; padding:0 0 10px 0; margin-bottom:6px; color:var(--text); }
  #usersTabPaneRoles .roles-matrix-table tbody td:not(.role-col){ min-height:44px; padding:8px 0; gap:12px; }
  #usersTabPaneRoles .roles-matrix-table tbody td::before{ font-size:13px; color:var(--text-3); font-weight:500; }
  #usersTabPaneRoles .role-checkbox{ min-width:44px; min-height:44px; width:44px; height:44px; margin:-12px -10px; padding:12px; flex:0 0 44px; }
  #usersTabPaneRoles .role-enum-select{ min-height:44px; padding:10px 24px 10px 12px; font-size:13px; flex:0 0 auto; }
  #usersTabPaneRoles .roles-matrix-table tbody td + td{ border-top:1px solid var(--border); }
  #usersTabPaneRoles .roles-add-row{ padding:12px 14px 16px; gap:10px; }
  #usersTabPaneRoles .roles-add-row .btn-secondary{ min-height:44px; padding:12px 16px; font-size:14px; }
  #usersTabPaneRoles .roles-legend{ padding:14px; margin-top:12px; }
  #usersTabPaneRoles .roles-legend-title{ font-size:14px; font-weight:600; color:var(--text); margin-bottom:8px; }
  #usersTabPaneRoles .roles-legend p{ font-size:12px; line-height:1.6; }
  #usersTabPaneRoles .roles-matrix-table tbody td.saving{ background:rgba(255,193,7,.12); }
  #usersTabPaneRoles .roles-matrix-table tbody td.saved-flash{ background:var(--brand-bg); }
  #usersTabPaneRoles .roles-matrix-table tbody td.error-flash{ background:rgba(181,61,31,.12); }
}

/* -- My Profile modal (mobile): full-width fields, 44px targets, stacked actions -- */
@media (max-width:700px){
  #editProfileModal .modal{ max-width:100%; border-radius:16px 16px 0 0; max-height:100dvh; }
  #editProfileModal .modal-body{ padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); max-height:calc(100dvh - 120px); }
  #editProfileModal .profile-avatar-row{ gap:12px; margin-bottom:20px; }
  #editProfileModal .profile-avatar{ width:64px; height:64px; font-size:24px; }
  #editProfileModal .profile-avatar-actions{ flex:1; gap:8px; }
  #editProfileModal .profile-avatar-actions .row{ flex-direction:column; }
  #editProfileModal .edit-grid{ display:flex; flex-direction:column; gap:12px; }
  #editProfileModal .edit-field{ gap:6px; }
  #editProfileModal .edit-field input,
  #editProfileModal .edit-field select{ min-height:44px; padding:10px 12px; font-size:16px; }
  #editProfileModal .btn-primary,
  #editProfileModal .btn-secondary{ min-height:44px; padding:10px 16px; font-size:14px; }
  #editProfileModal .profile-avatar-actions .btn-secondary{ width:100%; }
  #editProfileModal .profile-pin-status{ font-size:12px; margin-bottom:10px; }
  #editProfileModal .my-devices,
  #editProfileModal .notif-sounds{ gap:8px; }
  #editProfileModal .dev-row,
  #editProfileModal .nsnd-row{ padding:8px 10px; gap:8px; }
  #editProfileModal .nsnd-sel,
  #editProfileModal .nsnd-play{ min-height:44px; }
  #editProfileModal .modal-actions{ display:flex; flex-direction:column; gap:8px; margin-top:16px; padding-top:12px; }
  #editProfileModal .modal-actions .btn-secondary,
  #editProfileModal .modal-actions .btn-primary{ width:100%; justify-content:center; }
  #editProfileModal form > div[style*="margin-top:14px"]{ margin-top:12px!important; padding-top:10px!important; }
  #editProfileModal .profile-avatar-hint{ font-size:12px; }
}

/* -- Controls consistency (GLOBAL, all viewports) --
 * Native selects + date/month/time inputs aligned to the ERP green system and
 * erp-select.js custom dropdowns. 44px+ targets; mobile bumps to 48px/16px with
 * a custom chevron + green focus ring. */
select,
input[type=date],
input[type=month],
input[type=time]{ min-height:44px; padding:10px 12px; font-size:14px; line-height:1.4; }

@media (max-width:700px){
  select,
  input[type=date],
  input[type=month],
  input[type=time]{ min-height:48px; font-size:16px; padding:12px 14px; }
  select{
    appearance:none;
    background-image:url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" stroke="%23545450" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat:no-repeat; background-position:right 10px center; background-size:16px 16px; padding-right:38px;
  }
  input[type=date]:focus,
  input[type=month]:focus,
  input[type=time]:focus{ border-color:var(--brand)!important; box-shadow:0 0 0 3px var(--brand-ring)!important; }
}

/* Right-edge buttons → all consistent 44px circles (chat is already; make the
 * notification bell + focus button match for a clean mini stack). */
.wsx-edge-btn{ border-radius:50%!important; }

/* ============================================================================
 * LOGIN SCREEN — atmospheric, glassy, on-brand GREEN. Loads after the inline
 * head styles so these override at equal specificity (plus a few !important
 * for the input/button props the inline rules set). Perf-safe: backdrop-filter
 * only on the small fixed card, gated behind @supports; static gradient bg.
 * ==========================================================================*/
.login-screen{
  background:
    radial-gradient(820px 560px at 14% 10%, rgba(60,117,56,.12), transparent 60%),
    radial-gradient(760px 660px at 90% 92%, rgba(60,117,56,.09), transparent 62%),
    radial-gradient(560px 460px at 84% 6%, rgba(123,193,103,.14), transparent 60%),
    linear-gradient(180deg, #F5F7F2 0%, #EAEFE6 100%) !important;
}
/* faint dot grid for texture (cheap, static, no blur) */
.login-screen::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(rgba(60,117,56,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
}
.login-card{
  position:relative; z-index:1;
  border-radius:20px !important;
  padding:38px 38px 30px !important;
  border:1px solid rgba(255,255,255,.7) !important;
  background:rgba(255,255,255,.74) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 24px 60px -16px rgba(28,56,25,.26),
    0 8px 22px -10px rgba(28,56,25,.16) !important;
  animation: loginRise .5s cubic-bezier(.23,1,.32,1) both;
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .login-card{ backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35); }
}
/* transparent logo, no box — let the mark breathe on the glass card */
.login-logo{
  width:104px !important; height:104px !important; padding:0 !important;
  margin:0 auto 12px !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important;
  animation: loginPop .55s cubic-bezier(.34,1.56,.4,1) .06s both;
}
.login-logo img{ filter:drop-shadow(0 6px 14px rgba(60,117,56,.20)); }
.login-eyebrow{ color: var(--brand) !important; opacity:.75; }
/* fields: taller (44px touch target), softer surfaces */
.login-field input{
  padding:12px 14px !important; font-size:15px !important;
  border-radius:10px !important; background:rgba(255,255,255,.72) !important;
}
/* a phone types at 16px: under that iOS zooms the page on focus, and this !important would beat the app's own 16px phone rule (mobile audit F12) */
@media (max-width:900px), (hover:none) and (pointer:coarse){ .login-field input{ font-size:16px !important; } }
.password-input-wrap input{ border-radius:10px !important; }
/* primary CTA: gradient + lift + press feedback */
.login-btn{
  background:linear-gradient(180deg,#479043,#356B32) !important;
  border:none !important; border-radius:12px !important;
  padding:13px !important; font-size:15px !important; font-weight:600 !important;
  letter-spacing:.01em; color:#fff !important;
  box-shadow:0 9px 20px -7px rgba(53,107,50,.55), 0 1px 0 rgba(255,255,255,.28) inset !important;
  transition: transform .16s cubic-bezier(.23,1,.32,1), box-shadow .2s ease, filter .2s ease !important;
}
.login-btn:hover{ filter:brightness(1.05);
  box-shadow:0 13px 26px -7px rgba(53,107,50,.6), 0 1px 0 rgba(255,255,255,.32) inset !important; }
.login-btn:active{ transform:scale(.975);
  box-shadow:0 4px 11px -5px rgba(53,107,50,.5) !important; }
/* forgot-password / helper links inside the card */
.login-card a{ transition:color .15s ease, opacity .15s ease; }
.login-card a:hover{ opacity:.78; }
@keyframes loginRise{
  from{ opacity:0; transform:translateY(14px) scale(.985); filter:blur(2px); }
  to  { opacity:1; transform:none; filter:none; }
}
@keyframes loginPop{
  from{ opacity:0; transform:translateY(6px) scale(.86); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .login-card, .login-logo{ animation:none !important; }
}
@media (max-width:480px){
  .login-screen{ padding:18px !important; }
  .login-card{ padding:30px 22px 26px !important; border-radius:18px !important; }
}

/* ============================================================================
 * WORKSPACE SHELL POLISH — panel, chat list, notifications, dock popups, notes,
 * sticky notes, dock-settings modal, AI pane, edge buttons. Layered over
 * workspace.css (this file loads after it). Reuses --wsx-* tokens.
 * IMPORTANT: .wsx-pop / .wsx-sticky / .wsx-dockcfg position+open via transform
 * transitions — never set animation or transform on those CONTAINERS here
 * (it breaks their centering). Micro-motion lives on child buttons/rows only.
 * Perf-safe: motion via transform/opacity + custom ease-out.
 * ==========================================================================*/
:root{ --wsx-ease2:cubic-bezier(.23,1,.32,1); }

/* ---- Right panel header: branded hairline + crisper controls ---- */
.wsx-panel-head{
  padding:14px 14px 10px !important;
  border-bottom:1px solid rgba(60,117,56,.10);
  background:linear-gradient(180deg, rgba(60,117,56,.05), transparent);
}
.wsx-panel-h-title{ letter-spacing:-.01em; }
.wsx-panel-bell, .wsx-panel-x{
  border-radius:9px;
  transition:background .15s ease, color .15s ease, transform .12s var(--wsx-ease2);
}
.wsx-panel-bell:hover, .wsx-panel-x:hover{ background:rgba(60,117,56,.10); color:var(--wsx-green-d); }
.wsx-panel-bell:active, .wsx-panel-x:active{ transform:scale(.9); }

/* ---- Chat list rows → rounded inset pills with brand accent ---- */
.wsx-cl-row{
  position:relative; border-radius:12px; margin:1px 6px; padding:9px 10px !important;
  transition:background .14s ease;
}
.wsx-cl-row:hover{ background:rgba(60,117,56,.06); }
.wsx-cl-row.active{ background:#EAF4EC !important; }
.wsx-cl-row.active::before{
  content:''; position:absolute; left:1px; top:14px; bottom:14px; width:3px;
  border-radius:3px; background:var(--wsx-green);
}
.wsx-cl-av{ box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 2px 6px rgba(20,40,30,.12); }

/* ---- Notification rows ---- */
.wsx-nt{ position:relative; transition:background .14s ease, transform .14s var(--wsx-ease2); }
.wsx-nt:hover{ background:rgba(60,117,56,.05); transform:translateX(1px); }
.wsx-nt-ico{ border-radius:11px !important; box-shadow:0 2px 6px rgba(20,40,30,.08); }
.wsx-nt.unread::before{
  content:''; position:absolute; left:2px; top:12px; bottom:12px; width:3px;
  border-radius:3px; background:var(--wsx-green);
}
.wsx-notif-readall{ border-radius:999px; transition:transform .12s var(--wsx-ease2), background .15s ease; }
.wsx-notif-readall:active{ transform:scale(.97); }

/* ---- Message bubbles: tighter, layered shadow ---- */
.wsx-bubble{ box-shadow:0 1px 3px rgba(20,40,30,.07), 0 6px 16px -10px rgba(20,40,30,.18) !important; }

/* ---- Dock popups: elevated card + branded header (entrance kept from base) ---- */
.wsx-pop{
  border-radius:18px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 28px 70px -18px rgba(20,40,30,.42),
             0 10px 28px -14px rgba(20,40,30,.24) !important;
}
.wsx-pop-head{
  padding:14px 16px !important;
  background:linear-gradient(180deg, rgba(60,117,56,.06), transparent);
  border-bottom:1px solid rgba(60,117,56,.10) !important;
}
.wsx-pop-ico{
  width:30px !important; height:30px !important; border-radius:9px !important;
  background:linear-gradient(160deg,#EAF7EF,#D9EEDF) !important; color:var(--wsx-green-d);
  box-shadow:0 2px 6px rgba(60,117,56,.18);
}
.wsx-pop-title{ letter-spacing:-.01em; }
.wsx-pop-x{ transition:background .15s ease, color .15s ease, transform .12s var(--wsx-ease2); }
.wsx-pop-x:hover{ background:rgba(0,0,0,.05); }
.wsx-pop-x:active{ transform:scale(.9); }
.wsx-pop-body{ padding:16px !important; }

/* ---- Notes: segmented tabs + softer editor ---- */
.wsx-note-tabs{ background:rgba(60,117,56,.07); border-radius:10px; padding:3px; }
.wsx-note-tab{
  border-radius:8px !important; border:none !important;
  transition:background .15s ease, color .15s ease, transform .12s var(--wsx-ease2);
}
.wsx-note-tab.active{
  background:#fff !important; color:var(--wsx-green-d) !important;
  box-shadow:0 1px 3px rgba(20,40,30,.14);
}
.wsx-note-tab:active{ transform:scale(.96); }
.wsx-note-rt, .wsx-note-ta{ border-radius:12px !important; }
.wsx-note-rt:focus, .wsx-note-ta:focus{ box-shadow:0 0 0 3px rgba(60,117,56,.14) !important; }
.wsx-note-tb{ border-radius:7px !important; transition:background .14s ease; }
/* NOTE: no :active scale on the whole toolbar — pressing a button made the ENTIRE
   bar shrink (a button's ancestors also match :active). Only the pressed button
   animates now (see .wsx-note-tb button:active in workspace.css). */

/* ---- Sticky note: warmer paper, refined chrome (container entrance kept) ---- */
.wsx-sticky{
  border-radius:16px !important;
  background:linear-gradient(170deg,#FFFCEC,#FFF6D6) !important;
  box-shadow:0 22px 60px -16px rgba(60,52,10,.4), 0 6px 16px -8px rgba(60,52,10,.2) !important;
}
.wsx-sticky-head{
  background:linear-gradient(180deg,#FCEFB6,#FBE99E) !important;
  border-bottom:1px solid rgba(120,100,20,.16) !important;
}
.wsx-sticky-acts button{ border-radius:7px; transition:background .15s ease, transform .12s var(--wsx-ease2); }
.wsx-sticky-acts button:hover{ background:rgba(120,100,20,.14); }
.wsx-sticky-acts button:active{ transform:scale(.9); }
.wsx-sticky-fab{
  box-shadow:0 10px 24px -8px rgba(255,160,40,.6), 0 0 0 1px rgba(255,255,255,.4) inset !important;
}
.wsx-sticky-fab:hover{ transform:translateY(-2px) scale(1.04); }
.wsx-sticky-fab:active{ transform:scale(.94); }

/* ---- Dock-settings modal: deeper card + gradient primary ---- */
.wsx-dockcfg{
  border-radius:22px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 36px 90px -22px rgba(20,40,30,.5) !important;
}
.wsx-dockcfg-title{ letter-spacing:-.01em; }
.wsx-btn-primary{
  background:linear-gradient(180deg,#479043,#356B32) !important; border:none !important;
  box-shadow:0 8px 18px -7px rgba(53,107,50,.5) !important;
  transition:transform .14s var(--wsx-ease2), filter .2s ease, box-shadow .2s ease !important;
}
.wsx-btn-primary:hover{ filter:brightness(1.05); }
.wsx-btn-primary:active{ transform:scale(.97); }
.wsx-btn-ghost{ transition:transform .14s var(--wsx-ease2), background .15s ease; }
.wsx-btn-ghost:active{ transform:scale(.97); }

/* ---- AI pane: round the hosted input/send lightly ---- */
.wsx-tool-pane .ai-input, .wsx-tool-pane textarea{ border-radius:12px !important; }

/* ---- Edge buttons: press feedback (kept as circles) ---- */
.wsx-edge-btn, .wsx-edge-chat{
  transition:transform .14s var(--wsx-ease2), box-shadow .2s ease, background .15s ease !important;
}
.wsx-edge-btn:hover, .wsx-edge-chat:hover{ transform:translateY(-1px); }
.wsx-edge-btn:active, .wsx-edge-chat:active{ transform:scale(.92); }

/* ---- Chat message avatar: render profile photo (mirrored to loginDirectory) ---- */
.wsx-av{ overflow:hidden; }
.wsx-av img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Chat list: WhatsApp-style filter chips + Archived row ---- */
.wsx-cl-chips{ display:flex; gap:7px; padding:2px 12px 10px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
.wsx-cl-chips::-webkit-scrollbar{ display:none; }
.wsx-cl-chip{ flex:0 0 auto; border:1px solid var(--wsx-line,#e8e5da); background:#fff; color:var(--wsx-muted,#6B6A65);
  font-size:12.5px; font-weight:600; padding:5px 13px; border-radius:999px; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s cubic-bezier(.23,1,.32,1); }
.wsx-cl-chip:hover{ background:rgba(60,117,56,.06); }
.wsx-cl-chip:active{ transform:scale(.96); }
.wsx-cl-chip.active{ background:var(--wsx-green,#3C7538); border-color:var(--wsx-green,#3C7538); color:#fff; }
.wsx-cl-arch, .wsx-cl-archback{ display:flex; align-items:center; gap:12px; width:100%; border:none; background:transparent;
  cursor:pointer; padding:11px 14px; font-size:13.5px; color:var(--wsx-ink,#1A1A19);
  border-bottom:1px solid rgba(60,117,56,.07); transition:background .14s ease; }
.wsx-cl-arch:hover, .wsx-cl-archback:hover{ background:rgba(60,117,56,.05); }
.wsx-cl-arch-ic{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--wsx-green-d,#2F5C2C); }
.wsx-cl-arch-ic svg{ width:18px; height:18px; }
.wsx-cl-arch-t{ flex:1; font-weight:600; text-align:left; }
.wsx-cl-arch-n{ color:var(--wsx-green-d,#2F5C2C); font-weight:700; font-size:12.5px; }
.wsx-cl-archback{ font-weight:700; color:var(--wsx-green-d,#2F5C2C); }

/* ---- OVX accessories pipeline card (per-item stage rail + details) ---- */
.ovxacc-item{ padding:9px 2px; border-bottom:1px solid #f0f3ee; }
.ovxacc-item:last-child{ border-bottom:none; }
.ovxacc-item-top{ display:flex; align-items:center; gap:8px; }
.ovxacc-name{ font-size:13px; color:#2a3327; flex:1; }
.ovxacc-phase{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  border-radius:6px; padding:2px 8px; background:#eef3ec; color:#44523f; white-space:nowrap; }
.ovxacc-phase.stuck{ background:#FBEAE8; color:#B3261E; }
.ovxacc-rail{ display:flex; gap:4px; margin:7px 0 5px; }
.ovxacc-seg{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.ovxacc-seg i{ display:block; width:100%; height:4px; border-radius:3px; background:#e6ebe3; transition:background .2s ease; }
.ovxacc-seg em{ font-size:9.5px; font-style:normal; color:#9aa595; letter-spacing:.02em; }
.ovxacc-seg.done i{ background:#7FB98F; } .ovxacc-seg.done em{ color:#5b6b54; }
.ovxacc-seg.cur i{ background:var(--brand,#3C7538); } .ovxacc-seg.cur em{ color:var(--brand,#3C7538); font-weight:700; }
.ovxacc-facts{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:11.5px; color:#6c7a66; margin-top:2px; }
.ovxacc-dot{ color:#c4ccbe; }
.ovxacc-warn{ font-size:11px; color:#B3261E; font-weight:600; margin-top:3px; }
.ovxacc-openbtn{ border:none; background:var(--brand,#3C7538); color:#fff; border-radius:8px; padding:6px 12px;
  font-weight:700; cursor:pointer; transition:transform .12s cubic-bezier(.23,1,.32,1), filter .2s ease; }
.ovxacc-openbtn:hover{ filter:brightness(1.05); } .ovxacc-openbtn:active{ transform:scale(.97); }

/* ---- Shipped-overview section label → match the standard admin-card section
 * label (.kpi-section-label): serif, NOT italic, 13px/400. Fixes the "shipped
 * revenue section looks different" inconsistency on the Admin cards page. ---- */
.overview-shipped-kpi-label{
  font-style:normal !important;
  font-size:13px !important;
  font-weight:400 !important;
  letter-spacing:.02em !important;
  color:var(--text-muted) !important;
}
@media (max-width:900px){ .overview-shipped-kpi-label{ font-size:12px !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH TARGETS — coarse pointers only                      (12 Aug 2026)
   ═══════════════════════════════════════════════════════════════════════════
   An audit of all 30 ERP pages at 390x844 found no horizontal overflow — the
   earlier responsive waves hold — but the SHARED chrome was never sized for
   fingers. The same undersized controls appeared on every single page:

     .nav-item / .sgrp-head      219x36   every sidebar row, all 30 pages
     .user-avatar                 30x30   opens the user card
     .notif-bell / topbar icons   30x40   bell, calculator, search
     #salesView .sales-tab-btn   109x38   Overview / Performance / Orders

   The app ALREADY had a `(hover:none) and (pointer:coarse) { button,.nav-item
   { min-height:44px } }` rule in index.html — it just never won. components.css
   loads after the inline sheet and sets `.nav-item{min-height:36px}` at equal
   specificity, so source order decided it. That is why this block lives at the
   bottom of redesign-pages.css: it is the last sheet the page loads, so these
   are the last word without needing !important on everything.

   Apple asks 44pt, Material 48dp. Scoped to (pointer: coarse) so desktop
   density is untouched — the same trade the fabric tracker made for its own
   buttons. min-height (not height) so a row that wraps to two lines can grow.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .nav-item,
  .sgrp-item,
  .sgrp-head,
  .sgrp-flyitem,
  .sidebar-foot-nav { min-height: 44px; }

  /* The avatar is a button — it opens the user card — not decoration. */
  .user-avatar { width: 40px; height: 40px; }

  /* Icon buttons. These live in flex rows (topbar, toolbars, card corners),
     and a flex item SHRINKS below its `width` — setting width:44px alone left
     the calculator button 30px wide. min-width + flex:none is what actually
     holds the size; width is kept so it stays square rather than growing. */
  .notif-bell,
  .topbar-icon,
  .pager-btn,
  #topbarCalcBtn,
  #newOrderBtn,
  #weeklySettingsBtn,
  .kanban-lane-subs,
  .order-sheet-btn-card,
  .ship-truck-btn-card,
  .cust-contact-icon,
  .sales-orders-contact .cust-contact-icon,
  .notif-snz {
    min-width: 44px;
    min-height: 44px;
    flex: none;
  }
  /* …but on a kanban card the 44px order-sheet / truck button made the card's top row 44px tall
     for a 22px order id, leaving a 24px gap above the brand (design sweep, 14 Sep 2026). Negative
     vertical margins keep the whole 44px target while the row takes only the 26px the icon draws. */
  .kanban-card-actions .order-sheet-btn-card,
  .kanban-card-actions .ship-truck-btn-card { margin-top: -9px; margin-bottom: -9px; }

  /* Beats #salesView .sales-tab-btn / .sales-metric-pill{min-height:36px}
     earlier in this same file — later rule, equal specificity. */
  #salesView .sales-tab-btn,
  .sales-tab-btn,
  #salesView .sales-metric-pill,
  .sales-metric-pill { min-height: 44px; }

  /* NOTE: the per-view topbar icons (#topbarCalcBtn, #newOrderBtn) are pinned
     to 30x30 !important by a rule in index.html, and that rule CANNOT be
     overridden from this file — index.html carries inline <style> blocks far
     below the stylesheet <link>s, so its inline rules always come later in the
     cascade than anything here, whatever the specificity. Their coarse-pointer
     override therefore lives next to the 30px rule in index.html. */
}