/* ===================================================== */
/* CLIENT EXPERIENCE — inlined stylesheets (Consolidation) */
/* ===================================================== */

/* ----- tokens.css ----- */
/* ============================================================
   THE CLEAN LIFE — COMPLAINTS PORTAL
   Design Tokens (light + dark)
   ============================================================ */

.cx-scope {
  /* Brand — forest greens */
  --forest-900: #0d2318;
  --forest-800: #163a28;
  --forest-700: #1e5238;
  --forest-600: #276948;
  --forest-500: #2f8058;
  --forest-400: #4a9e72;
  --forest-300: #72bb94;
  --forest-200: #a8d8bc;
  --forest-100: #d4edde;
  --forest-50:  #edf7f1;

  /* Slate neutrals */
  --slate-950: #0a0d0f;
  --slate-900: #111417;
  --slate-800: #1c2026;
  --slate-750: #232830;
  --slate-700: #2c3340;
  --slate-600: #404a58;
  --slate-500: #5a6578;
  --slate-400: #7c8a9a;
  --slate-300: #a2adb9;
  --slate-200: #c8d0d9;
  --slate-150: #dde3ea;
  --slate-100: #eef1f4;
  --slate-50:  #f6f8fa;
  --white:     #ffffff;

  /* Semantic surfaces — LIGHT */
  --bg-base:       var(--slate-50);
  --bg-surface:    var(--white);
  --bg-overlay:    var(--slate-100);
  --bg-hover:      var(--slate-100);
  --bg-sunken:     var(--slate-100);
  --border:        var(--slate-150);
  --border-strong: var(--slate-200);
  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-500);
  --text-tertiary:  var(--slate-400);
  --text-inverse:   var(--white);

  /* Status colours */
  --status-new:       #6366f1;
  --status-open:      #3b82f6;
  --status-pending:   #f59e0b;
  --status-resolved:  #22c55e;
  --status-closed:    #7c8a9a;

  --priority-critical: #ef4444;
  --priority-high:     #f97316;
  --priority-medium:   #eab308;
  --priority-low:      #22c55e;

  --risk-critical: #dc2626;
  --risk-high:     #ea580c;
  --risk-medium:   #ca8a04;
  --risk-low:      #16a34a;

  --accent: var(--forest-500);
  --accent-hover: var(--forest-600);
  --accent-soft: var(--forest-50);
  --danger: #ef4444;
  --danger-soft: #fef2f2;
  --success: #22c55e;
  --success-soft: #f0fdf4;
  --warning: #f59e0b;
  --warning-soft: #fffbeb;
  --info: #3b82f6;
  --info-soft: #eff6ff;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.03);

  /* Radius / spacing / motion */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;
}

/* DARK MODE */
.cx-scope [data-theme="dark"] {
  --bg-base:       var(--slate-950);
  --bg-surface:    var(--slate-900);
  --bg-overlay:    var(--slate-800);
  --bg-hover:      var(--slate-800);
  --bg-sunken:     #0e1114;
  --border:        var(--slate-800);
  --border-strong: var(--slate-700);
  --text-primary:   var(--slate-100);
  --text-secondary: var(--slate-400);
  --text-tertiary:  var(--slate-500);
  --text-inverse:   var(--slate-900);

  --accent-soft: rgba(47,128,88,0.16);
  --danger-soft: rgba(239,68,68,0.12);
  --success-soft: rgba(34,197,94,0.12);
  --warning-soft: rgba(245,158,11,0.12);
  --info-soft: rgba(59,130,246,0.12);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.45);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.5);
}


/* ----- base.css ----- */
/* ============================================================
   BASE / RESET / APP SHELL
   ============================================================ */

.cx-scope * { box-sizing: border-box; margin: 0; padding: 0; }
/* The reset above was also wiping the page banner's own padding and
   spacing on the Client Interactions pages - put them back. */
.cx-scope .page-banner { padding: 26px 32px; margin-bottom: 22px; }
.cx-scope .page-banner .pb-eyebrow { margin-bottom: 6px; }
.cx-scope .page-banner h1 { margin: 0 0 4px; }
@media (max-width: 640px) { .cx-scope .page-banner { padding: 20px 18px; } }

.cx-scope html, .cx-scope body {
  height: 100%;
}

.cx-scope body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}

.cx-scope a { color: inherit; text-decoration: none; }
.cx-scope button { font-family: inherit; cursor: pointer; }
.cx-scope input, .cx-scope select, .cx-scope textarea { font-family: inherit; font-size: inherit; color: inherit; }
.cx-scope ul { list-style: none; }
.cx-scope svg { display: block; flex-shrink: 0; }

.cx-scope ::-webkit-scrollbar { width: 10px; height: 10px; }
.cx-scope ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid var(--bg-base); }
.cx-scope ::-webkit-scrollbar-track { background: transparent; }

/* ---------- App Shell ---------- */
.cx-scope .app {
  display: flex;
  min-height: 100vh;
}

.cx-scope .sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 40;
  transition: width var(--transition-slow), transform var(--transition-slow);
}
.cx-scope .sidebar.collapsed { width: var(--sidebar-w-collapsed); }

.cx-scope .sidebar-brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
}
.cx-scope .sidebar-brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; object-fit: cover;
}
.cx-scope .sidebar-brand-text { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity var(--transition); }
.cx-scope .sidebar.collapsed .sidebar-brand-text { opacity: 0; width: 0; }

.cx-scope .sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.cx-scope .sidebar-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); padding: var(--space-4) var(--space-3) var(--space-2); white-space: nowrap; overflow: hidden; }
.cx-scope .sidebar.collapsed .sidebar-section-label { opacity: 0; height: 0; padding: 0; }

.cx-scope .nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13.5px; font-weight: 500;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap; overflow: hidden;
  position: relative;
}
.cx-scope .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.cx-scope .nav-item.active { background: var(--accent-soft); color: var(--forest-700); }
.cx-scope [data-theme="dark"] .nav-item.active { color: var(--forest-300); }
.cx-scope .nav-item svg { width: 18px; height: 18px; }
.cx-scope .nav-item-label { opacity: 1; transition: opacity var(--transition); }
.cx-scope .sidebar.collapsed .nav-item-label { opacity: 0; width: 0; }
.cx-scope .nav-item .nav-badge { margin-left: auto; }
.cx-scope .sidebar.collapsed .nav-item .nav-badge { display: none; }

.cx-scope .sidebar-footer { padding: var(--space-3); border-top: 1px solid var(--border); }

.cx-scope .sidebar-toggle {
  position: absolute; top: 18px; right: -12px;
  width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--bg-surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
}
.cx-scope .sidebar-toggle:hover { color: var(--text-primary); }
.cx-scope .sidebar-toggle svg { width: 14px; height: 14px; transition: transform var(--transition); }
.cx-scope .sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* ---------- Main column ---------- */
.cx-scope .main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
  min-width: 0;
  transition: margin-left var(--transition-slow);
}
.cx-scope .sidebar.collapsed ~ .main { margin-left: var(--sidebar-w-collapsed); }

.cx-scope .topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6);
  position: sticky; top: 0; z-index: 30;
  gap: var(--space-4);
}
.cx-scope .topbar-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cx-scope .topbar-right { display: flex; align-items: center; gap: var(--space-2); }

.cx-scope .breadcrumbs { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text-secondary); min-width: 0; }
.cx-scope .breadcrumbs a:hover { color: var(--text-primary); }
.cx-scope .breadcrumbs .sep { color: var(--text-tertiary); }
.cx-scope .breadcrumbs .current { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cx-scope .page { padding: var(--space-6); flex: 1; max-width: 1400px; width: 100%; margin: 0 auto; }
.cx-scope .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.cx-scope .page-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.cx-scope .page-subtitle { color: var(--text-secondary); font-size: 13.5px; margin-top: 2px; }
.cx-scope .page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.cx-scope .mobile-only { display: none; }

/* ---------- Bottom nav (mobile) ---------- */
.cx-scope .bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--bg-surface); border-top: 1px solid var(--border);
  padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
  justify-content: space-around;
}
.cx-scope .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-tertiary); font-size: 10.5px; font-weight: 600; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); }
.cx-scope .bottom-nav-item.active { color: var(--forest-600); }
.cx-scope [data-theme="dark"] .bottom-nav-item.active { color: var(--forest-300); }
.cx-scope .bottom-nav-item svg { width: 21px; height: 21px; }

/* ---------- Responsive breakpoints ---------- */
@media (max-width: 1024px) {
  .cx-scope .sidebar { width: var(--sidebar-w-collapsed); }
  .cx-scope .sidebar .sidebar-brand-text, .cx-scope .sidebar .nav-item-label, .cx-scope .sidebar .sidebar-section-label { display: none; }
  .cx-scope .main { margin-left: var(--sidebar-w-collapsed); }
  .cx-scope .sidebar-toggle { display: none; }
}

@media (max-width: 768px) {
  .cx-scope .sidebar { transform: translateX(-100%); width: var(--sidebar-w); }
  .cx-scope .sidebar.mobile-open { transform: translateX(0); }
  .cx-scope .sidebar .sidebar-brand-text, .cx-scope .sidebar .nav-item-label, .cx-scope .sidebar .sidebar-section-label { display: block; }
  .cx-scope .main { margin-left: 0; padding-bottom: 64px; }
  .cx-scope .bottom-nav { display: flex; }
  .cx-scope .mobile-only { display: flex; }
  .cx-scope .page { padding: var(--space-4); }
  .cx-scope .page-header { flex-direction: column; }
  .cx-scope .topbar { padding: 0 var(--space-4); }
  .cx-scope .mobile-hide-search { display: none; }
  .cx-scope .sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 39; }
  .cx-scope .sidebar-scrim.show { display: block; }
}

/* ---------- Utility ---------- */
.cx-scope .flex { display: flex; }
.cx-scope .flex-col { display: flex; flex-direction: column; }
.cx-scope .items-center { align-items: center; }
.cx-scope .justify-between { justify-content: space-between; }
.cx-scope .gap-1 { gap: var(--space-1); } .cx-scope .gap-2 { gap: var(--space-2); } .cx-scope .gap-3 { gap: var(--space-3); } .cx-scope .gap-4 { gap: var(--space-4); }
.cx-scope .text-secondary { color: var(--text-secondary); }
.cx-scope .text-tertiary { color: var(--text-tertiary); }
.cx-scope .font-medium { font-weight: 500; } .cx-scope .font-semibold { font-weight: 600; } .cx-scope .font-bold { font-weight: 700; }
.cx-scope .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-scope .font-mono { font-family: var(--font-mono); }

/* Theme toggle icon swap */
.cx-scope .theme-icon-sun { display: none; }
.cx-scope [data-theme="dark"] .theme-icon-moon { display: none; }
.cx-scope [data-theme="dark"] .theme-icon-sun { display: block; }


/* ----- components.css ----- */
/* ============================================================
   COMPONENT LIBRARY
   ============================================================ */

/* ---------- Buttons ---------- */
.cx-scope .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent;
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.cx-scope .btn svg { width: 15px; height: 15px; }
.cx-scope .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cx-scope .btn:active { transform: scale(0.97); box-shadow: none; }
.cx-scope .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.cx-scope .btn-primary { background: var(--accent); color: #fff; }
.cx-scope .btn-primary:hover { background: var(--accent-hover); }

.cx-scope .btn-secondary { background: var(--bg-surface); border-color: var(--border-strong); color: var(--text-primary); }
.cx-scope .btn-secondary:hover { background: var(--bg-hover); }

.cx-scope .btn-ghost { background: transparent; color: var(--text-secondary); }
.cx-scope .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.cx-scope .btn-danger { background: var(--danger); color: #fff; }
.cx-scope .btn-danger:hover { background: #dc2626; }

.cx-scope .btn-danger-ghost { background: transparent; color: var(--danger); }
.cx-scope .btn-danger-ghost:hover { background: var(--danger-soft); }

.cx-scope .btn-sm { height: 28px; padding: 0 var(--space-3); font-size: 12px; }
.cx-scope .btn-lg { height: 40px; padding: 0 var(--space-5); font-size: 14px; }
.cx-scope .btn-icon { width: 34px; padding: 0; }
.cx-scope .btn-icon.btn-sm { width: 28px; }
.cx-scope .btn-block { width: 100%; }

/* ---------- Cards ---------- */
.cx-scope .card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.cx-scope .card-pad { padding: var(--space-5); }
.cx-scope .card-interactive { cursor: pointer; }
.cx-scope .card-interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-1px); }
.cx-scope .card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.cx-scope .card-title { font-size: 14px; font-weight: 600; }
.cx-scope .card-body { padding: var(--space-5); }

/* Stat card (dashboard) */
.cx-scope .stat-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.cx-scope .stat-card-top { display: flex; align-items: center; justify-content: space-between; }
.cx-scope .stat-icon { width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.cx-scope .stat-icon svg { width: 17px; height: 17px; }
.cx-scope .stat-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.cx-scope .stat-label { color: var(--text-secondary); font-size: 12.5px; font-weight: 500; }
.cx-scope .stat-trend { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.cx-scope .stat-trend.up { color: var(--danger); }
.cx-scope .stat-trend.down { color: var(--success); }
.cx-scope .stat-trend.flat { color: var(--text-tertiary); }

/* ---------- Board (Kanban) ---------- */
.cx-scope .board-view-toggle { display: inline-flex; gap: var(--space-2); }
.cx-scope .board-dashboard-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.cx-scope .board-columns-scroll {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: var(--space-4); padding-bottom: var(--space-3); align-items: start;
  /* Scrolls sideways within its own container when there are more
     columns than fit, so a real minimum column width (set per board
     below) can't push the whole page into horizontal scroll. */
  overflow-x: auto;
}
.cx-scope .board-column {
  width: 100%; min-width: 0;
  background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; max-height: 480px;
}
.cx-scope .board-column-header {
  padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.cx-scope .board-column-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cx-scope .board-column-title { font-size: 12px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.25; }
.cx-scope .board-column-count {
  font-size: 10.5px; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-surface); border-radius: var(--radius-full); padding: 1px 8px; min-width: 18px; text-align: center;
}
.cx-scope .board-column-meta { font-size: 9.5px; color: var(--text-tertiary); }
.cx-scope .board-column-body { flex: 1; overflow-y: auto; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Board: Toolbar (redesign) ---------- */
/* ---------- Client Interactions Dashboard: minimal stat list (not the Board's hero cards) ---------- */
.cx-scope .cx-dash-stat-list { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-2) 0; max-width: 480px; }
.cx-scope .cx-dash-stat-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.cx-scope .cx-dash-stat-row:last-of-type { border-bottom: none; }
.cx-scope .cx-dash-stat-label { font-size: 14px; color: var(--text-secondary); font-weight: 500; }
.cx-scope .cx-dash-stat-value { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.cx-scope .cx-dash-stat-value.danger { color: var(--danger); }
.cx-scope .cx-dash-stat-note { padding: var(--space-3) var(--space-5) var(--space-2); font-size: 12px; color: var(--text-tertiary); }

/* =============================================================================
   CLIENT INTERACTIONS — DESIGN SYSTEM (Phase 1: Foundation)
   One token system: --space-*, --text-*, --border, --radius-* (the system
   Complaints' Board redesign introduced) is canonical from here forward.
   The older --bdr/--rmd/--font/--s* tokens still exist for the rest of the
   portal (out of scope to change portal-wide) but new Client Interactions
   code should not mix them in — that mixing was the actual bug reported.

   Type scale — 5 sizes, replacing the 7 near-duplicate ad hoc sizes
   (11/12/12.5/13/13.5/14/15px) found across Compliments/Temp/Perm:
     .cx-text-caption  12px  — timestamps, meta text, hints
     .cx-text-body     14px  — everything read as normal text
     .cx-text-heading   16px  — headings within cards
     .cx-text-kpi       24px  — KPI numbers (compact tier; Board's hero
                                 tier keeps its existing 44px, unrelated)
   Page titles are intentionally left to the portal's existing .ph h1
   (22-24px depending on scope) rather than introducing a third value —
   changing that is a portal-wide decision, out of scope here.
   ========================================================================= */
.cx-scope .cx-text-caption  { font-size: 12px; color: var(--text-tertiary); }
.cx-scope .cx-text-body     { font-size: 14px; color: var(--text-primary); }
.cx-scope .cx-text-heading  { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.cx-scope .cx-text-kpi      { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }

/* Form field — replaces the repeated inline fieldGroup/fieldLabel/inputField
   pattern duplicated across all three intake forms. */
.cx-scope .cx-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.cx-scope .cx-field-row { display: flex; gap: var(--space-3); }
.cx-scope .cx-field-row .cx-field { flex: 1; }
.cx-scope .cx-field label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.cx-scope .cx-field input, .cx-scope .cx-field select, .cx-scope .cx-field textarea {
  width: 100%; box-sizing: border-box; height: 36px; border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0 12px; font-size: 14px; font-family: var(--font-sans);
  background: var(--bg-surface); color: var(--text-primary); transition: border-color .15s, box-shadow .15s;
}
.cx-scope .cx-field textarea { height: auto; min-height: 80px; padding: 9px 12px; resize: vertical; }
/* No focus state existed at all before this — fields gave zero visual
   feedback on where you were in the form beyond the browser's own
   (inconsistent, easy-to-miss) default outline. Each module's own
   accent color is picked up automatically via --tl/--rd/--am/--s700
   further down, so this stays the shared brand-neutral default. */
.cx-scope .cx-field input:focus, .cx-scope .cx-field select:focus, .cx-scope .cx-field textarea:focus,
.cx-scope .cx-input:focus, .cx-scope .cx-textarea:focus {
  outline: none; border-color: var(--g); box-shadow: 0 0 0 3px rgba(30,92,30,.12);
}
.cx-scope.cmp-scope .cx-field input:focus, .cx-scope.cmp-scope .cx-field select:focus, .cx-scope.cmp-scope .cx-field textarea:focus,
.cx-scope.cmp-scope .cx-input:focus, .cx-scope.cmp-scope .cx-textarea:focus { border-color: #0a2a16; box-shadow: 0 0 0 3px rgba(10,42,22,.12); }
.cx-scope.tc-scope .cx-field input:focus, .cx-scope.tc-scope .cx-field select:focus, .cx-scope.tc-scope .cx-field textarea:focus,
.cx-scope.tc-scope .cx-input:focus, .cx-scope.tc-scope .cx-textarea:focus { border-color: #8f6344; box-shadow: 0 0 0 3px rgba(143,99,68,.12); }
.cx-scope.pc-scope .cx-field input:focus, .cx-scope.pc-scope .cx-field select:focus, .cx-scope.pc-scope .cx-field textarea:focus,
.cx-scope.pc-scope .cx-input:focus, .cx-scope.pc-scope .cx-textarea:focus { border-color: #3a2a1c; box-shadow: 0 0 0 3px rgba(58,42,28,.12); }
.cx-scope.cmt-scope .cx-field input:focus, .cx-scope.cmt-scope .cx-field select:focus, .cx-scope.cmt-scope .cx-field textarea:focus,
.cx-scope.cmt-scope .cx-input:focus, .cx-scope.cmt-scope .cx-textarea:focus { border-color: var(--tl); box-shadow: 0 0 0 3px rgba(104,74,51,.12); }
/* Was bare red text with no container — easy to miss, and didn't read
   as an actual error state. A tinted, bordered box with an icon reads
   as "something needs attention" the way bare text below a button
   doesn't, without needing to touch every call site that sets this
   text — they still just do errEl.textContent = '...'. */
.cx-scope .cx-field-error { color: var(--danger); font-size: 12.5px; margin-bottom: 10px; }
.cx-scope .cx-field-error:not(:empty) { background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--radius-md); padding: 9px 12px; display: flex; align-items: flex-start; gap: 8px; }
.cx-scope .cx-field-error:not(:empty)::before { content: ''; flex-shrink: 0; }

/* List row — replaces the repeated inline pattern used for dashboard
   "Items Needing Attention" and "Recent Activity" rows across all four
   modules' dashboards. */
.cx-scope .cx-list { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; max-width: 640px; }
.cx-scope .cx-list-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); transition: background var(--transition); }
.cx-scope .cx-list-row:last-child { border-bottom: none; }
.cx-scope .cx-list-row.clickable { cursor: pointer; }
.cx-scope .cx-list-row.clickable:hover { background: var(--bg-hover); }
.cx-scope .cx-list-empty { padding: var(--space-4); color: var(--text-tertiary); font-size: 14px; }

/* Section header — replaces the repeated inline "Items Needing Attention" /
   "Recent Activity" heading style. */
.cx-scope .cx-section-heading { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: var(--space-6) 0 var(--space-3); letter-spacing: -0.01em; }

/* Notes panel — one definition, used by all three new workspaces instead
   of each repeating the same card/textarea/button markup inline. */
.cx-scope .cx-notes-panel { margin-top: var(--space-4); }
.cx-scope .cx-notes-panel textarea { width: 100%; box-sizing: border-box; min-height: 60px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 12px; font-size: 14px; margin-bottom: 10px; }
.cx-scope .cx-note-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.cx-scope .cx-note-item:last-child { border-bottom: none; }
.cx-scope .cx-note-meta { color: var(--text-tertiary); font-size: 12px; margin-top: 2px; }

/* No hardcoded colors — was #dc2626 (error text) x3, now the real token. */
.cx-scope .cx-field-error, .cx-scope .cx-text-danger { color: var(--danger); }

/* Workspace stage card — replaces `class="card" style="padding:24px;"`,
   repeated 18 times identically across the three new workspaces. */
.cx-scope .cx-workspace-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03); }
/* Workspace step heading — replaces the ad hoc 15px h2 (14 uses) and its
   4px-margin variant (5 uses); consolidated into the real 16px scale. */
.cx-scope .cx-step-heading { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.cx-scope .cx-step-heading.tight { margin: 0 0 4px; }
/* Workspace page wrapper — replaces `style="max-width:640px;margin:0 auto;"`,
   repeated identically across all workspace headers. */
.cx-scope .cx-workspace-wrap { max-width: 640px; margin: 0 auto; }
/* Empty/loading/error states — replaces the ~7 near-identical
   `padding:Npx;text-align:center;color:var(--text-*)` patterns. */
.cx-scope .cx-state { padding: 40px; text-align: center; }
.cx-scope .cx-state.compact { padding: 24px; }
.cx-scope .cx-state.muted { color: var(--text-tertiary); }
.cx-scope .cx-state.secondary { color: var(--text-secondary); }

.cx-scope .cx-workspace-card.centered { text-align: center; }
.cx-scope .cx-workspace-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cx-scope .cx-id-badge { font-weight: 400; color: var(--text-tertiary); font-size: 14px; }
.cx-scope .cx-form-wrap { max-width: 560px; margin: 0 auto; }
.cx-scope .cx-form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.cx-scope .cx-text-body.muted { color: var(--text-secondary); }

.cx-scope .cx-board-empty { padding: 20px 8px; text-align: center; color: var(--text-tertiary); font-size: 12px; }
/* Standalone input/textarea — for bare form controls inside workspace step
   content (not wrapped in the full .cx-field label+input structure). */
.cx-scope .cx-input, .cx-scope .cx-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 12px; font-size: 14px; font-family: var(--font-sans); margin-bottom: 20px; }
.cx-scope .cx-input { height: 36px; }
.cx-scope .cx-textarea { height: auto; min-height: 80px; padding: 9px 12px; resize: vertical; }

.cx-scope .cx-step-body { font-size: 14px; color: var(--text-secondary); white-space: pre-wrap; margin: 0 0 20px; }
.cx-scope .cx-max-640 { max-width: 640px; }

/* Temporary / Permanent Cancellation boards (27 Sep 2026 redesign) */
.cx-scope .case-tabs { display: flex; align-items: center; gap: 4px; margin: 0 0 var(--space-3); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cx-scope .case-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; font: 600 13px var(--font-sans); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; }
.cx-scope .case-tab span { background: var(--bg-overlay, #f1f5f9); color: var(--text-secondary); border-radius: 10px; padding: 0 7px; font-size: 11px; line-height: 18px; }
.cx-scope .case-tab.on { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.cx-scope .case-tab.on span { background: var(--text-primary); color: #fff; }
.cx-scope .case-tab-note { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.cx-scope .case-callout { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: var(--space-3); border-radius: var(--radius-lg); background: #fbf6f0; border: 1px solid #ead9c6; color: #5b4230; }
.cx-scope .case-callout b { display: block; font-size: 13.5px; }
.cx-scope .case-callout span { display: block; font-size: 12px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-scope .case-columns .board-column { min-width: 168px; }
.cx-scope .case-card .board-card-footer { flex-wrap: wrap; }
.cx-scope .case-card .board-card-phase { overflow: visible; }
.cx-scope .case-col-head { position: relative; }
.cx-scope .case-col-head::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; border-radius: 3px 3px 0 0; width: calc(var(--case-step, 1) * 100%); background: currentColor; opacity: .35; }
.cx-scope .case-card { gap: 6px; }
.cx-scope .case-card-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cx-scope .case-avatar { width: 28px; height: 28px; border-radius: 50%; background: #efe6dc; color: #6b4d33; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; }
.cx-scope.pc-scope .case-avatar, .cx-scope .pc-scope .case-avatar { background: #e8e3de; color: #3a2a1c; }
.cx-scope .case-avatar.lg { width: 52px; height: 52px; font-size: 18px; }
.cx-scope .board-card-ribbon.case-ribbon-ok { background: var(--success-soft); color: var(--success); }
.cx-scope .board-card-ribbon.case-ribbon-src { background: var(--info-soft); color: var(--info); }
.cx-scope .case-due { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-full); white-space: nowrap; }
.cx-scope .case-due-overdue { background: var(--danger-soft); color: var(--danger); }
.cx-scope .case-due-today { background: var(--warning-soft); color: var(--warning); }
.cx-scope .case-due-later { background: var(--success-soft); color: var(--success); }
.cx-scope .case-stage-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-full); background: var(--bg-overlay, #f1f5f9); color: var(--text-secondary); white-space: nowrap; }
.cx-scope .case-stage-pill.closed { background: transparent; border: 1px solid var(--border); }
.cx-scope .case-list { max-width: none; }
.cx-scope .case-list-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); background: var(--bg-subtle, #f8fafc); }
.cx-scope .case-tr-col { min-width: 110px; text-align: left; }
.cx-scope .case-stage-col { min-width: 190px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cx-scope .case-tr { font-size: 12.5px; color: var(--text-secondary); }
.cx-scope .case-tr.yes { color: var(--success, #166534); font-weight: 600; }
.cx-scope .case-ws.cx-workspace-wrap { max-width: 1040px; }
.cx-scope .case-hero { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; flex-wrap: wrap; }
.cx-scope .case-hero h1 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.cx-scope .case-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.cx-scope .case-hero-contact { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-scope .case-hero-contact .btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.cx-scope .case-stepper { display: flex; align-items: flex-start; gap: 0; margin: 0 0 18px; padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; }
.cx-scope .case-step { flex: 1 1 0; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; }
.cx-scope .case-step:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: calc(50% + 14px); right: calc(-50% + 14px); height: 2px; background: var(--border); }
.cx-scope .case-step.done:not(:last-child)::after { background: var(--success); }
.cx-scope .case-step-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-surface); color: var(--text-tertiary); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cx-scope .case-step.done .case-step-dot { background: var(--success); border-color: var(--success); color: #fff; }
.cx-scope .case-step.current .case-step-dot { border-color: var(--text-primary); color: var(--text-primary); box-shadow: 0 0 0 4px rgba(0,0,0,.06); }
.cx-scope .case-step.end.good .case-step-dot { background: var(--success); border-color: var(--success); color: #fff; }
.cx-scope .case-step.end.bad .case-step-dot { background: var(--text-tertiary); border-color: var(--text-tertiary); color: #fff; }
.cx-scope .case-step-lbl { font-size: 11.5px; color: var(--text-tertiary); font-weight: 600; line-height: 1.2; }
.cx-scope .case-step.current .case-step-lbl { color: var(--text-primary); }
.cx-scope .case-step.done .case-step-lbl { color: var(--text-secondary); }
.cx-scope .case-ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.cx-scope .case-ws-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cx-scope .case-ws-grid .cx-notes-panel { margin-top: 0; }
@media (max-width: 900px) { .cx-scope .case-ws-grid { grid-template-columns: 1fr; } }
.cx-scope .case-step-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: 6px; }
.cx-scope .case-check { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 10px 0 20px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.cx-scope .case-check.on { border-color: var(--success); background: var(--success-soft); }
.cx-scope .case-check input { width: 18px; height: 18px; }
.cx-scope .case-date-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.cx-scope .case-date-row .cx-input { width: 170px; margin-bottom: 0; }
.cx-scope .case-quick { border: 1px solid var(--border); background: var(--bg-surface); border-radius: var(--radius-full); padding: 5px 11px; font: 600 12px var(--font-sans); color: var(--text-secondary); cursor: pointer; }
.cx-scope .case-quick:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.cx-scope .case-done-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.cx-scope .case-done-icon.good { background: var(--success-soft); color: var(--success); }
.cx-scope .case-done-icon.bad { background: var(--bg-overlay, #f1f5f9); color: var(--text-secondary); }
.cx-scope .case-facts dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; }
.cx-scope .case-facts dt { color: var(--text-tertiary); font-weight: 600; font-size: 12.5px; }
.cx-scope .case-facts dd { margin: 0; color: var(--text-primary); white-space: pre-wrap; }
.cx-scope .case-timeline .case-tl-item { position: relative; padding-left: 16px; border-bottom: none; }
.cx-scope .case-timeline .case-tl-item::before { content: ''; position: absolute; left: 3px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong, #cbd5e1); }
.cx-scope .case-timeline .case-tl-item:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 24px; bottom: -8px; width: 1px; background: var(--border); }
.case-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 3000; padding: 16px; }
.case-modal-box { background: #fff; border-radius: 14px; width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.25); font-family: var(--font); }
.case-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--s100, #f1f5f9); }
.case-modal-head h3 { margin: 0; font-size: 17px; }
.case-modal-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--s500, #64748b); }
.case-modal-x { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--s500, #64748b); padding: 4px; }
.case-modal-body { padding: 14px 20px 18px; overflow: auto; }
.case-import-tools { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 8px; }
.case-import-list { border: 1px solid var(--s150, #e2e8f0); border-radius: 10px; max-height: 46vh; overflow: auto; }
.case-import-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--s100, #f1f5f9); cursor: pointer; font-size: 13.5px; }
.case-import-row:last-child { border-bottom: none; }
.case-import-row:hover { background: var(--s50, #f8fafc); }
.case-modal .case-avatar { width: 28px; height: 28px; border-radius: 50%; background: #efe6dc; color: #6b4d33; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.case-modal .case-stage-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.case-modal .cx-text-caption { font-size: 12px; color: #64748b; }
.case-modal .cx-form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.case-modal .cx-state { padding: 30px; text-align: center; color: #64748b; font-size: 13.5px; }

/* Compliments module identity — a muted brown (--tl, repurposed from its
   original teal), part of the portal-wide shift to a green/brown brand
   palette (#176334 / #b48865). */
/* Complaints module identity — a dark, near-black green. Applied to the
   Board page only, not the CRC workspace: the CRC's ~200 CSS rules
   reference var(--g) directly throughout (phase chips, health card,
   selected states, etc.), not just via .btn-primary, so retinting it
   fully would mean substantial edits to frozen code, not an additive
   class. --g is now the exact brand green (#176334) too, so the CRC
   workspace already reads as "green" — just a lighter shade of the same
   family as the Board's darker green, not a mismatch. */
.cx-scope.cmp-scope .btn-primary { background: #0a2a16; border-color: #0a2a16; }
.cx-scope.cmp-scope .btn-primary:hover { background: #082111; }

/* Temporary Cancellation module identity — a medium brown, replacing the
   old amber/warning-adjacent orange as part of the portal-wide green/
   brown palette shift. Uses a literal hex rather than a variable since
   --am is still the portal's generic warning token used in ~140 other,
   unrelated places (can't repoint it without breaking those). */
/* Base pill styling for .opt-grid/.opt across the whole cx-scope module
   family (Complaints, Compliments, Temporary/Permanent Cancellation) —
   this was always missing. Only the .sel color overrides below ever
   existed, and none of them were reachable anyway (see next comment),
   so every option-picker across these pages (staff tagging, recognition
   outcomes, cancellation reasons) has been rendering as bare unstyled
   text this whole time. */
.cx-scope .opt-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-scope .opt { display: inline-flex; align-items: center; border: 1.5px solid var(--s200); background: #fff; padding: 9px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--s700); cursor: pointer; transition: all .15s; }
.cx-scope .opt:hover { border-color: var(--s300); background: var(--s50); }

.cx-scope.tc-scope .btn-primary { background: #8f6344; border-color: #8f6344; }
.cx-scope.tc-scope .btn-primary:hover { background: #4c3524; }
.cx-scope.tc-scope .opt.sel { background: #f6f0e6; color: #8f6344; border-color: #8f6344; }

/* Permanent Cancellation module identity — the darkest brown in the
   palette, replacing the old dark-grey/neutral treatment. Uses a literal
   hex rather than repointing --s700, which is still the portal's
   darkest neutral text/UI tone used extensively elsewhere. */
.cx-scope.pc-scope .btn-primary { background: #3a2a1c; border-color: #3a2a1c; }
.cx-scope.pc-scope .btn-primary:hover { background: #150f0a; }
.cx-scope.pc-scope .opt.sel { background: #f0ece7; color: #3a2a1c; border-color: #3a2a1c; }

.cx-scope.cmt-scope .btn-primary { background: var(--tl); border-color: var(--tl); }
.cx-scope.cmt-scope .btn-primary:hover { background: #332519; }
.cx-scope.cmt-scope .opt.sel { background: var(--tll); color: var(--tl); border-color: var(--tl); }

.cx-scope .board-toolbar-bar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.cx-scope .board-toolbar-select { height: 40px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 12px; font-size: 14px; font-family: var(--font-sans); background: var(--bg-surface); color: var(--text-secondary); }

.cx-scope .board-quickactions { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.cx-scope .board-quickactions .board-toolbar-secondary { display: flex; align-items: center; gap: 2px; margin-left: var(--space-2); padding-left: var(--space-2); border-left: 1px solid var(--border); }
.cx-scope .board-quickactions .btn-secondary { background: transparent; border-color: transparent; color: var(--text-secondary); }
.cx-scope .board-quickactions .btn-secondary:hover { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); }