/* ============================================================
   RESIDE GLOBAL PORTAL — COMPLETE ENTERPRISE REDESIGN
   Dark Sidebar · Light Content design system
   Version: 2026-06-29-prototype-design
   ============================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --navy-900: #0A1628;
  --navy-700: #142339;
  --navy-600: #1C2E4A;
  /* Light content area background */
  --paper: #F6F4EF;
  --paper-dim: #EEECE6;
  /* Card / panel surface — white */
  --surface: #ffffff;
  /* Override light-theme panel variables from styles.css */
  --panel: #ffffff;
  --panel-soft: #F6F4EF;
  --line: rgba(0,0,0,0.08);
  --muted: rgba(10,22,40,0.40);
  --text: rgba(10,22,40,0.90);
  --gold: #C9A227;
  --gold-soft: #E8D9A8;
  --gold-tint: rgba(201,162,39,0.14);
  --gold-hover: rgba(201,162,39,0.22);
  /* Primary text — dark navy */
  --ink: rgba(10,22,40,0.90);
  /* Secondary text — muted navy */
  --slate: rgba(10,22,40,0.50);
  --slate-light: rgba(10,22,40,0.32);
  /* Borders — neutral */
  --hairline: rgba(0,0,0,0.08);
  --hairline-strong: rgba(0,0,0,0.12);
  /* White for sidebar / hero use */
  --white: #ffffff;
  --green: #52A870;
  --green-tint: rgba(82,168,112,0.18);
  --terracotta: #C97A60;
  --terracotta-tint: rgba(201,122,96,0.18);
  --red: #CF5B42;
  --red-tint: rgba(207,91,66,0.18);
  --warning: #C49A2A;
  --warning-tint: rgba(196,154,42,0.18);
  --font-ui: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --radius: 11px;
  --radius-sm: 7px;
  --radius-xs: 5px;
  --shadow-card: 0 1px 0 rgba(0,0,0,0.06), 0 4px 12px -4px rgba(0,0,0,0.10);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04);
  --shadow-modal: 0 4px 6px -2px rgba(0,0,0,0.10), 0 20px 60px -15px rgba(0,0,0,0.22);
  --t-kpi: 26px;
  --t-h1: 19px;
  --t-h2: 16.5px;
  --t-h4: 14px;
  --t-body: 13px;
  --t-label: 11px;
  --t-meta: 11.5px;
  --t-tiny: 10.5px;
  --transition: 140ms ease;
}

/* ── 2. BASE & TYPOGRAPHY ─────────────────────────────────── */
body {
  font-family: var(--font-ui) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-size: var(--t-body) !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

body h1, body h2, body h3 {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  color: #0A1628 !important;
  line-height: 1.25 !important;
}

body h4, body h5, body h6 {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  color: rgba(10,22,40,0.85) !important;
}

body p, body span, body label, body td, body th, body li {
  font-family: var(--font-ui) !important;
  color: var(--ink) !important;
}

body small, body .meta, body .eyebrow {
  font-family: var(--font-ui) !important;
  color: var(--slate) !important;
  font-size: var(--t-meta) !important;
}

/* Display font for hero headings */
body .role-command-hero h1,
body .role-command-hero h2,
body .role-command-hero h3,
body .super-admin-hero h1,
body .super-admin-hero h2,
body .hero h1,
body .hero h2,
body .section-heading h1 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* ── 3. LAYOUT SHELL ──────────────────────────────────────── */
body .app-shell {
  background: var(--paper) !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body .main-content,
body .content,
body .view-panel,
body .workspace {
  background: var(--paper) !important;
  color: var(--ink) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

/* ── 4. AUTH / LOGIN ──────────────────────────────────────── */
body .auth-shell {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%) !important;
  min-height: 100vh !important;
}

body .login-panel {
  background: var(--surface) !important;
  border: 1px solid rgba(201,162,39,0.18) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-modal) !important;
  color: var(--ink) !important;
}

body .login-panel h1 {
  font-family: var(--font-display) !important;
  color: #ffffff !important;
  font-size: 22px !important;
}

body .login-panel p,
body .login-panel label,
body .login-panel small {
  color: var(--ink) !important;
}

body .portal-load-banner {
  background: var(--navy-900) !important;
  color: var(--gold-soft) !important;
}

/* ── 5. SIDEBAR ───────────────────────────────────────────── */
body .sidebar,
body[data-rg-theme] .sidebar {
  background:
    linear-gradient(rgba(10, 22, 40, 0.97), rgba(8, 16, 28, 0.99)),
    url("./assets/reside-global-sidebar-bg.jpg") center/cover !important;
  border-right: 1px solid rgba(201, 162, 39, 0.22) !important;
  color: #ffffff !important;
}

body .brand-row,
body .brand-row strong,
body[data-rg-theme] .brand-row,
body[data-rg-theme] .brand-row strong {
  color: #ffffff !important;
}

body .brand-row span,
body[data-rg-theme] .brand-row span {
  color: rgba(255, 255, 255, 0.60) !important;
}

body .sidebar .nav-section-label,
body[data-rg-theme] .sidebar .nav-section-label {
  color: rgba(255, 255, 255, 0.38) !important;
  font-size: var(--t-tiny) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body .sidebar .nav-item,
body .sidebar button.nav-item,
body .sidebar a.nav-item,
body .sidebar nav .nav-item,
body[data-rg-theme] .sidebar .nav-item,
body[data-rg-theme] .sidebar nav .nav-item {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  transition: background var(--transition), color var(--transition), border-left-color var(--transition) !important;
}

body .sidebar .nav-item:hover,
body .sidebar nav .nav-item:hover,
body[data-rg-theme] .sidebar .nav-item:hover,
body[data-rg-theme] .sidebar nav .nav-item:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  border-left-color: rgba(201, 162, 39, 0.45) !important;
}

body .sidebar .nav-item.active,
body .sidebar .nav-item[aria-current="page"],
body .sidebar nav .nav-item.active,
body[data-rg-theme] .sidebar .nav-item.active,
body[data-rg-theme] .sidebar nav .nav-item.active {
  background: rgba(201, 162, 39, 0.14) !important;
  color: #ffffff !important;
  border-left-color: var(--gold) !important;
  font-weight: 600 !important;
  box-shadow: inset 4px 0 0 var(--gold) !important;
}

body .sidebar-logout-button {
  background: var(--gold) !important;
  color: #151515 !important;
  border: none !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  transition: background var(--transition) !important;
}

body .sidebar-logout-button:hover {
  background: var(--gold-soft) !important;
  color: #151515 !important;
}

/* ── 6. TOPBAR & SECTION HEADINGS ────────────────────────── */
body .topbar {
  background: var(--surface) !important;
  border-bottom: 1px solid rgba(201,162,39,0.14) !important;
  color: var(--ink) !important;
}

body .topbar h2 {
  color: #0A1628 !important;
  font-size: var(--t-h1) !important;
  font-weight: 700 !important;
  font-family: var(--font-ui) !important;
}

body .section-heading h3,
body .section-heading h4 {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  color: rgba(10,22,40,0.85) !important;
  font-size: var(--t-h4) !important;
}

body .section-heading span,
body .eyebrow {
  color: var(--slate) !important;
  font-size: var(--t-meta) !important;
  font-family: var(--font-ui) !important;
}

/* ── 7. BUTTONS ───────────────────────────────────────────── */
body button,
body .primary-button,
body input[type="submit"] {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: var(--t-body) !important;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition), color var(--transition) !important;
}

body .primary-button,
body button.primary-button {
  background: var(--gold) !important;
  color: var(--navy-900) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.20), 0 3px 8px -2px rgba(201,162,39,.36) !important;
}

body .primary-button:hover,
body button.primary-button:hover {
  background: #D4A82A !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 6px 16px -4px rgba(201,162,39,.44) !important;
  transform: translateY(-1px) !important;
}

body .primary-button:active,
body button.primary-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.20) !important;
}

body .ghost-button,
body button.ghost-button,
body .secondary-button {
  background: rgba(10,22,40,0.05) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
}

body .ghost-button:hover,
body button.ghost-button:hover {
  background: rgba(10,22,40,0.09) !important;
  border-color: var(--gold) !important;
  color: #0A1628 !important;
}

body .icon-button {
  background: rgba(10,22,40,0.04) !important;
  color: var(--slate) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition), color var(--transition) !important;
}

body .icon-button:hover {
  background: rgba(10,22,40,0.08) !important;
  color: #0A1628 !important;
}

body button:disabled,
body .primary-button:disabled,
body .ghost-button:disabled {
  background: rgba(10,22,40,0.04) !important;
  color: rgba(10,22,40,0.25) !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Pagination */
body .pagination button,
body .lead-pagination-bar button,
body .lead-pagination-actions button,
body [id*="Previous"],
body [id*="Next"] {
  background: rgba(10,22,40,0.05) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  transition: background var(--transition), border-color var(--transition) !important;
}

body .pagination button:hover,
body .lead-pagination-bar button:hover {
  background: rgba(10,22,40,0.09) !important;
  border-color: var(--gold) !important;
}

body .pagination button:disabled,
body .lead-pagination-actions button:disabled,
body [id*="Previous"]:disabled,
body [id*="Next"]:disabled {
  background: rgba(10,22,40,0.02) !important;
  color: rgba(10,22,40,0.22) !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: none !important;
  opacity: 0.65 !important;
}

/* Top-action buttons */
body .top-actions button,
body .top-actions a,
body .super-admin-hero-actions button,
body .role-command-actions button {
  color: var(--ink) !important;
  opacity: 1 !important;
}

/* ── 8. FORMS & INPUTS ────────────────────────────────────── */
body label {
  font-family: var(--font-ui) !important;
  font-size: var(--t-label) !important;
  font-weight: 600 !important;
  color: var(--slate) !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

body input,
body select,
body textarea {
  font-family: var(--font-ui) !important;
  font-size: var(--t-body) !important;
  color: var(--ink) !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  color-scheme: light !important;
}

body input:focus,
body select:focus,
body textarea:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-tint) !important;
  background: #ffffff !important;
}

body input::placeholder,
body textarea::placeholder {
  color: rgba(10,22,40,0.30) !important;
  font-family: var(--font-ui) !important;
}

body input:disabled,
body select:disabled,
body textarea:disabled {
  background: rgba(10,22,40,0.04) !important;
  color: rgba(10,22,40,0.30) !important;
  border-color: rgba(0,0,0,0.08) !important;
  cursor: not-allowed !important;
}

body .handover-fieldset {
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
}

body .handover-fieldset legend {
  color: var(--gold-soft) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: var(--t-label) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: var(--surface) !important;
  padding: 0 8px !important;
}

/* ── 9. TABLES ────────────────────────────────────────────── */
body table {
  background: var(--surface) !important;
  border-collapse: collapse !important;
  width: 100% !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-body) !important;
}

body th {
  background: rgba(10,22,40,0.025) !important;
  color: var(--slate) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-tiny) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(0,0,0,0.09) !important;
  padding: 9px 12px !important;
}

body td {
  background: transparent !important;
  color: var(--ink) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-body) !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

body tr:hover td {
  background: rgba(201,162,39,0.04) !important;
}

body .table-wrap {
  overflow-x: auto !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--shadow-sm) !important;
}

body .table-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ── 10. CARDS & PANELS ───────────────────────────────────── */
body .panel,
body .task-card,
body .table-card,
body .activity,
body .stat,
body .metric-card,
body .executive-card,
body .kpi-row,
body .report-card,
body .settings-grid section,
body .ai-sales-panel {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
}

/* KPI Metric Cards */
body .metric,
body .leader-command-metrics article {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
}

body .metric strong,
body .leader-command-metrics strong {
  font-family: var(--font-display) !important;
  font-size: var(--t-kpi) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

body .metric span,
body .leader-command-metrics span {
  color: var(--slate) !important;
  font-size: var(--t-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ── 11. HERO / COMMAND CENTER PANELS ────────────────────── */
body .super-admin-hero,
body .hero,
body .role-command-hero {
  background: var(--navy-900) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  border: 1px solid rgba(201,162,39,0.18) !important;
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.55) !important;
}

body .super-admin-hero *,
body .hero *,
body .role-command-hero * {
  color: var(--white) !important;
}

body .super-admin-hero h1,
body .super-admin-hero h2,
body .hero h1,
body .hero h2,
body .role-command-hero h1,
body .role-command-hero h2,
body .role-command-hero h3 {
  font-family: var(--font-display) !important;
  color: var(--white) !important;
  font-size: var(--t-h1) !important;
  font-weight: 600 !important;
}

body .super-admin-hero p,
body .hero p,
body .role-command-hero p {
  color: var(--gold-soft) !important;
  opacity: 0.85 !important;
}

/* All command center variants */
body .leader-command-panel,
body .role-command-center,
body .team-leader-command-center,
body .advisor-command-center,
body .accounting-command-center,
body .end-day-panel,
body .end-day-summary,
body .eod-status-grid,
body .leader-sales-report-card,
body .executive-report-card,
body .role-command-card,
body .accounting-command-card,
body .hr-command-card,
body .super-admin-command-center {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
}

body .leader-command-panel *,
body .role-command-center *,
body .team-leader-command-center *,
body .advisor-command-center *,
body .accounting-command-center *,
body .end-day-panel *,
body .end-day-summary *,
body .eod-status-grid *,
body .leader-sales-report-card *,
body .executive-report-card *,
body .role-command-card *,
body .accounting-command-card *,
body .hr-command-card * {
  color: var(--ink) !important;
  opacity: 1 !important;
}

/* Hero inside command panels stays dark */
body .leader-command-panel .role-command-hero,
body .advisor-command-center .role-command-hero,
body .team-leader-command-center .role-command-hero {
  background: var(--navy-900) !important;
}

body .leader-command-panel .role-command-hero *,
body .advisor-command-center .role-command-hero *,
body .team-leader-command-center .role-command-hero * {
  color: var(--white) !important;
}

/* EOD rows, ranking rows, insight rows */
body .eod-status-row,
body .eod-row,
body .ranking-row,
body .ranking-row-rich,
body .advisor-target-strip > div,
body .report-row,
body .command-row,
body .insight-row,
body .compact-list > div,
body .report-list > div,
body .leader-sales-report > *,
body .list-row {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ink) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
}

/* HR Rules & Documents tab strip */
.hrdoc-tab {
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--c-muted); cursor: pointer; white-space: nowrap;
}
.hrdoc-tab:hover { color: var(--ink); }
.hrdoc-tab.active { color: var(--gold-soft); border-bottom-color: #C9A227; }

body .eod-status-row b,
body .eod-row span { color: var(--ink) !important; }

/* Rank medal */
body .rank-medal,
body .sales-rank-badge {
  background: rgba(201,162,39,0.18) !important;
  color: var(--gold-soft) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-xs) !important;
}

/* Advisor target ring */
body .advisor-target-ring {
  background: var(--navy-900) !important;
  border-color: var(--gold) !important;
}

body .advisor-target-ring * { color: var(--white) !important; }

/* ── 12. DIALOGS / MODALS ─────────────────────────────────── */
body dialog {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(201,162,39,0.18) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-modal) !important;
  font-family: var(--font-ui) !important;
  padding: 0 !important;
  max-width: min(760px, 96vw) !important;
}

body dialog::backdrop {
  background: rgba(5,12,22,0.72) !important;
  backdrop-filter: blur(3px) !important;
}

body .dialog-head {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 16px 20px !important;
}

body .dialog-head h3,
body .dialog-head h4,
body .dialog-head h2 {
  font-family: var(--font-ui) !important;
  color: #ffffff !important;
  font-size: var(--t-h4) !important;
  font-weight: 700 !important;
}

body .dialog-actions {
  background: rgba(255,255,255,0.03) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  padding: 14px 20px !important;
}

body .dialog-eyebrow {
  font-size: var(--t-tiny) !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Transfer & email dialogs */
body .transfer-dialog,
body .email-review-dialog {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
}

body .transfer-warning,
body .email-review-warning {
  background: var(--warning-tint) !important;
  border: 1px solid rgba(196,154,42,0.35) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--gold-soft) !important;
}

body .transfer-summary {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}

/* ── 13. BADGES & STATUS PILLS ────────────────────────────── */
body .status-pill {
  font-family: var(--font-ui) !important;
  font-size: var(--t-tiny) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-radius: 100px !important;
  padding: 2px 9px !important;
  background: rgba(255,255,255,0.08) !important;
  color: var(--slate) !important;
  display: inline-block !important;
}

/* Status-specific pill colors */
body .status-pill[data-status="Uncontacted"] {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.45) !important;
}
body .status-pill[data-status="Contacted"] {
  background: rgba(59,130,246,0.18) !important;
  color: #93C5FD !important;
}
body .status-pill[data-status="Interested"] {
  background: rgba(82,168,112,0.18) !important;
  color: #86EFAC !important;
}
body .status-pill[data-status="Hot Lead"] {
  background: rgba(207,91,66,0.22) !important;
  color: #FCA5A5 !important;
}
body .status-pill[data-status="Not Interested"] {
  background: rgba(207,91,66,0.14) !important;
  color: var(--terracotta) !important;
}
body .status-pill[data-status="Do Not Contact"] {
  background: rgba(127,29,29,0.30) !important;
  color: #FCA5A5 !important;
}
body .status-pill[data-status="Follow-Up"] {
  background: rgba(196,154,42,0.18) !important;
  color: var(--gold-soft) !important;
}
body .status-pill[data-status="Booked Interview"] {
  background: rgba(201,162,39,0.18) !important;
  color: var(--gold) !important;
}
body .status-pill[data-status="Interview Done"] {
  background: rgba(139,92,246,0.18) !important;
  color: #C4B5FD !important;
}
body .status-pill[data-status="Qualified"] {
  background: rgba(82,168,112,0.22) !important;
  color: #4ADE80 !important;
}
body .status-pill[data-status="Application Submitted"] {
  background: rgba(59,130,246,0.20) !important;
  color: #93C5FD !important;
}
body .status-pill[data-status="Paid"] {
  background: rgba(82,168,112,0.25) !important;
  color: #4ADE80 !important;
}
body .status-pill[data-status="Scheduled"],
body .status-pill[data-status="Attended Interview"] {
  background: rgba(201,162,39,0.18) !important;
  color: var(--gold) !important;
}
body .status-pill[data-status="Passed"],
body .status-pill[data-status="Completed - Passed"] {
  background: rgba(82,168,112,0.25) !important;
  color: #4ADE80 !important;
}

body .lead-protection-badge {
  font-family: var(--font-ui) !important;
  font-size: var(--t-tiny) !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
}

body .lead-protection-badge.yellow,
body .lead-protection-badge.orange {
  background: var(--warning-tint) !important;
  color: var(--warning) !important;
  border-color: rgba(196,154,42,0.35) !important;
}

body .lead-protection-badge.red {
  background: var(--red-tint) !important;
  color: var(--red) !important;
  border-color: rgba(207,91,66,0.35) !important;
}

body .lead-protection-badge.gray {
  background: rgba(255,255,255,0.06) !important;
  color: var(--slate) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

body .danger-text { color: var(--red) !important; }
body .success-text { color: var(--green) !important; }
body .warning { color: var(--warning) !important; }

/* ── 14. INTERVIEW WORKSPACE ──────────────────────────────── */
body .workflow-slot,
body .workflow-day-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  transition: box-shadow var(--transition), border-color var(--transition) !important;
}

body .workflow-slot:hover,
body .workflow-day-card:hover {
  box-shadow: var(--shadow-sm) !important;
  border-color: var(--gold) !important;
}

body .workflow-slot strong,
body .workflow-day-card strong { color: #ffffff !important; }

body .workflow-slot span,
body .workflow-slot .slot-time,
body .workflow-day-card span,
body .workflow-day-card .slot-time { color: var(--slate) !important; }

/* Slot status colours */
body .workflow-slot.booked,
body .workflow-day-card.booked {
  background: rgba(201,162,39,0.10) !important;
  border-color: rgba(201,162,39,0.30) !important;
}

body .workflow-slot.done,
body .workflow-day-card.done {
  background: var(--green-tint) !important;
  border-color: var(--green) !important;
}

body .workflow-slot.done strong,
body .workflow-day-card.done strong { color: var(--green) !important; }

body .workflow-slot.no-show,
body .workflow-day-card.no-show {
  background: var(--red-tint) !important;
  border-color: var(--red) !important;
}

body .workflow-slot.cancelled,
body .workflow-day-card.cancelled {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.08) !important;
  opacity: 0.65 !important;
}

body .workflow-slot.blocked,
body .workflow-day-card.blocked {
  background: var(--terracotta-tint) !important;
  border-color: var(--terracotta) !important;
}

body .workflow-slot.break,
body .workflow-day-card.break {
  background: var(--warning-tint) !important;
  border-color: var(--warning) !important;
}

/* Workflow tabs */
body .workflow-tabs button {
  font-family: var(--font-ui) !important;
  font-size: var(--t-body) !important;
  font-weight: 500 !important;
  color: var(--slate) !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--transition), border-color var(--transition) !important;
}

body .workflow-tabs button.active {
  color: #ffffff !important;
  border-bottom-color: var(--gold) !important;
  font-weight: 600 !important;
}

body .workflow-side-panel,
body .workflow-lead-panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
}

/* ── 15. MEMO BOARD ───────────────────────────────────────── */
body .memo-ack-backdrop {
  background: rgba(5,12,22,0.72) !important;
  backdrop-filter: blur(3px) !important;
}

body .memo-ack-dialog {
  background: var(--surface) !important;
  border: 1px solid rgba(201,162,39,0.18) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-modal) !important;
  color: var(--ink) !important;
}

body .memo-ack-dialog h2 {
  font-family: var(--font-display) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

body .memo-ack-body {
  color: var(--ink) !important;
  background: var(--surface) !important;
}

body .memo-ack-check {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}

body .memo-compose-panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

body .memo-issued {
  background: var(--green-tint) !important;
  border: 1px solid var(--green) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--green) !important;
}

body .audience-preview {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}

body .audience-preview strong { color: #ffffff !important; }
body .audience-preview p { color: var(--slate) !important; }

/* ── 16. HR MODULE ────────────────────────────────────────── */
body .hr-module-shell {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

body .hr-module-head {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

body .hr-module-head h3 {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: var(--t-h1) !important;
  color: #ffffff !important;
}

body .hr-module-head p { color: var(--slate) !important; }

body .hr-tabs button {
  font-family: var(--font-ui) !important;
  color: var(--slate) !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  font-weight: 500 !important;
  transition: color var(--transition), border-color var(--transition) !important;
}

body .hr-tabs button.active {
  color: #ffffff !important;
  border-bottom-color: var(--gold) !important;
  font-weight: 600 !important;
}

body .hr-policy-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
}

body .hr-policy-card span { color: var(--slate) !important; }
body .hr-policy-card strong { color: #ffffff !important; }
body .hr-policy-card p { color: var(--ink) !important; }

body .hr-import-panel {
  background: rgba(255,255,255,0.03) !important;
  border: 2px dashed rgba(255,255,255,0.14) !important;
  border-radius: var(--radius) !important;
  color: var(--slate) !important;
}

body .hr-workflow { color: var(--ink) !important; }
body .hr-workflow div {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
}
body .hr-workflow strong { color: #ffffff !important; }

/* ── 17. EMAIL COMPOSE / TEMPLATES ───────────────────────── */
body .email-signature-box {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}

body .email-signature-box strong { color: #ffffff !important; }
body .email-signature-box small { color: var(--slate) !important; }

body .email-signature-preview {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
}

body .email-lead-summary {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}

body .template-panel,
body .history-panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

body .template-grid article {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color var(--transition) !important;
}

body .template-grid article:hover { border-color: var(--gold) !important; }
body .template-grid h5 { color: #ffffff !important; font-weight: 600 !important; }

body .muted-panel {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--slate) !important;
}

/* ── 18. AI SALES / SMART CHECKLIST ──────────────────────── */
body .ai-sales-panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

body .ai-sales-panel .section-heading h4 { color: #ffffff !important; }

body .ai-sales-insight {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
}

body .ai-sales-insight strong { color: #ffffff !important; }
body .ai-sales-insight p, body .ai-sales-insight span { color: var(--ink) !important; }

body .smart-checklist-workbench {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
}

/* ── 19. INTERNAL TICKETS / QUEUE ────────────────────────── */
body .internal-ticket-card,
body .queue-item {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
  transition: box-shadow var(--transition), border-color var(--transition) !important;
}

body .internal-ticket-card:hover,
body .queue-item:hover {
  box-shadow: var(--shadow-card) !important;
  border-color: var(--gold) !important;
}

body .internal-ticket-card h4,
body .queue-item h4 {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-family: var(--font-ui) !important;
}

body .internal-ticket-card p,
body .queue-item p { color: var(--slate) !important; }

/* ── 20. ACTIVITY / PRESENCE ──────────────────────────────── */
body .activity-status-row {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--ink) !important;
}

body .activity-status-row b.presence-active {
  background: var(--green-tint) !important;
  color: var(--green) !important;
}

body .activity-status-row b.presence-idle {
  background: var(--warning-tint) !important;
  color: var(--warning) !important;
}

body .activity-status-row b.presence-offline {
  background: rgba(255,255,255,0.05) !important;
  color: var(--slate) !important;
}

/* ── 21. SALES REPORT / RANKINGS ──────────────────────────── */
body .sales-report-group > summary {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: #ffffff !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--transition) !important;
}

body .sales-report-group[open] > summary {
  background: var(--gold-tint) !important;
  border-color: rgba(201,162,39,0.35) !important;
}

body .sales-report-client-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--ink) !important;
}

body .sales-report-client-row:hover { background: rgba(255,255,255,0.04) !important; }
body .sales-report-group-empty { color: var(--slate-light) !important; }

body .ranking-row-rich.top-rank {
  background: linear-gradient(90deg, rgba(201,162,39,0.12), rgba(20,35,57,0.50)) !important;
  border-left: 3px solid var(--gold) !important;
}

/* ── 22. SEGMENTED CONTROLS / TABS ───────────────────────── */
body .segmented-control {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--radius-sm) !important;
  padding: 3px !important;
}

body .segmented-control button {
  background: transparent !important;
  color: var(--slate) !important;
  border: none !important;
  border-radius: calc(var(--radius-sm) - 2px) !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  transition: background var(--transition), color var(--transition) !important;
}

body .segmented-control button.active {
  background: var(--surface) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── 23. EMPLOYEE PICKERS / CHECKBOXES ───────────────────── */
body .ticket-employee-picker,
body .branch-checkbox-panel,
body .employee-checkbox-list {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
}

body .picker-head span,
body .branch-checkbox-panel > span {
  color: var(--slate) !important;
  font-size: var(--t-label) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

body .employee-check-row {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--ink) !important;
}

body .employee-check-row strong { color: #ffffff !important; }
body .employee-check-row small { color: var(--slate) !important; }

/* ── 24. LOADING STATES & SKELETON LOADERS ───────────────── */
@keyframes rg-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes rg-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes rg-spin {
  to { transform: rotate(360deg); }
}

.rg-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%) !important;
  background-size: 400px 100% !important;
  animation: rg-shimmer 1.4s ease-in-out infinite !important;
  border-radius: var(--radius-sm) !important;
  color: transparent !important;
  border: none !important;
}

.rg-skeleton-text {
  height: 13px;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 400px 100%;
  animation: rg-shimmer 1.4s ease-in-out infinite;
  margin-bottom: 8px;
}

.rg-skeleton-text.wide { width: 100%; }
.rg-skeleton-text.medium { width: 65%; }
.rg-skeleton-text.narrow { width: 40%; }

.rg-skeleton-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.rg-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255,255,255,0.10);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: rg-spin 0.7s linear infinite;
  display: inline-block;
}

.rg-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,22,40,0.80);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  z-index: 10;
  backdrop-filter: blur(2px);
}

/* ── 25. EMPTY STATES ─────────────────────────────────────── */
.rg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--slate);
  font-family: var(--font-ui);
}

.rg-empty-state .rg-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.35;
  filter: grayscale(1);
}

.rg-empty-state h4 {
  color: rgba(255,255,255,0.80) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-h4) !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
}

.rg-empty-state p {
  color: var(--slate) !important;
  font-size: var(--t-body) !important;
  margin: 0 0 20px !important;
  max-width: 340px;
}

/* ── 26. TOAST / NOTIFICATION ─────────────────────────────── */
@keyframes rg-slide-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.rg-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.rg-toast {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 500;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px -4px rgba(0,0,0,0.55);
  animation: rg-slide-in 0.22s ease-out;
  pointer-events: all;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rg-toast.success {
  background: var(--navy-900);
  color: var(--gold-soft);
  border-left: 4px solid var(--gold);
}

.rg-toast.error {
  background: var(--surface);
  color: var(--red);
  border: 1px solid rgba(207,91,66,0.35);
  border-left: 4px solid var(--red);
}

.rg-toast.warning {
  background: var(--surface);
  color: var(--warning);
  border: 1px solid rgba(196,154,42,0.35);
  border-left: 4px solid var(--warning);
}

.rg-toast.info {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--navy-600);
}

/* ── 27. TOOLBAR / SEARCH / FILTERS ──────────────────────── */
body .toolbar {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 8px 12px !important;
  gap: 8px !important;
}

body .toolbar input,
body .toolbar select {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.12) !important;
  font-size: var(--t-body) !important;
}

/* ── 28. LAYOUT OVERFLOW FIXES ────────────────────────────── */
body,
body[data-rg-theme],
body .app-shell,
body .main-content,
body .content,
body .view-panel,
body .panel,
body .leader-command-panel,
body .role-command-center,
body .role-command-card,
body .super-admin-command-center {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body .table-wrap,
body .role-command-grid,
body .advisor-target-strip,
body .leader-command-metrics,
body .end-day-summary,
body .eod-status-grid,
body .split-layout {
  max-width: 100% !important;
  min-width: 0 !important;
}

body .table-wrap { overflow-x: auto !important; }

body .role-command-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
}

/* ── 29. INTERACTIVE TRANSITIONS ──────────────────────────── */
body .nav-item,
body .workflow-slot,
body .workflow-day-card,
body .internal-ticket-card,
body .queue-item,
body .template-grid article,
body .ranking-row-rich,
body .metric,
body .hr-policy-card {
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition) !important;
}

body button { cursor: pointer !important; }

/* ── 30. RESPONSIVE BREAKPOINTS ───────────────────────────── */
@media (max-width: 900px) {
  body .leader-command-metrics,
  body .end-day-summary,
  body .eod-status-grid,
  body .advisor-target-strip {
    grid-template-columns: 1fr !important;
  }

  body .role-command-grid {
    grid-template-columns: 1fr !important;
  }

  body .split-layout {
    flex-direction: column !important;
  }
}

@media (max-width: 760px) {
  body dialog {
    max-width: 100vw !important;
    max-height: 96vh !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  body .rg-toast-container {
    bottom: 16px;
    right: 12px;
    left: 12px;
  }

  body .rg-toast { max-width: 100%; }

  body .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body .toolbar input,
  body .toolbar select { width: 100% !important; }
}

@media (max-width: 420px) {
  :root { --t-kpi: 22px; --t-h1: 17px; }

  body .metric,
  body .leader-command-metrics article {
    padding: 14px !important;
  }
}

/* ============================================================
   PHASE 3 — MODULE-SPECIFIC STYLES
   ============================================================ */

/* ── 31. LOAD STATE / SKELETON CARDS ─────────────────────── */
body .load-state-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-sm) !important;
}

body .load-state-card.skeleton-card {
  pointer-events: none !important;
}

body .lead-skeleton-row {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%) !important;
  background-size: 400px 100% !important;
  animation: rg-shimmer 1.4s ease-in-out infinite !important;
  border-radius: var(--radius-sm) !important;
  height: 54px !important;
  margin-bottom: 6px !important;
  border: none !important;
}

body .portal-load-banner {
  background: var(--navy-900) !important;
  color: var(--gold-soft) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-body) !important;
  font-weight: 500 !important;
  text-align: center !important;
  padding: 10px 16px !important;
}

/* ── 32. CRM LEAD DETAIL ──────────────────────────────────── */
body .lead-meta-summary {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
}

body .lead-meta-summary strong { color: var(--ink) !important; }
body .lead-meta-summary span  { color: var(--slate) !important; }
body .lead-meta-summary small {
  font-size: var(--t-meta) !important;
  color: var(--slate-light) !important;
}

body .lead-ownership-timeline {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}

body .lead-ownership-timeline h4 {
  color: var(--ink) !important;
  font-size: var(--t-h4) !important;
  font-weight: 600 !important;
  font-family: var(--font-ui) !important;
}

body .crm-interview-feedback-block {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 12px 14px !important;
  margin-top: 10px !important;
  display: block !important;
}

body .crm-interview-feedback-block > span {
  display: block !important;
  color: var(--slate) !important;
  font-size: var(--t-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
}

body .crm-interview-feedback-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

body .ld-interview-badge {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: var(--t-meta) !important;
  font-weight: 700 !important;
  color: #fff !important;
}

body .ld-interview-badge--pass { background: #1f9d55 !important; }
body .ld-interview-badge--fail { background: #d64545 !important; }
body .ld-interview-badge--neutral { background: var(--slate) !important; }

body .crm-interview-feedback-meta {
  color: var(--slate-light) !important;
  font-size: var(--t-meta) !important;
}

body .crm-interview-feedback-text {
  color: var(--ink) !important;
  font-size: var(--t-body) !important;
  line-height: 1.5 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

body .lead-protection-settings {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  color: var(--ink) !important;
  padding: 14px !important;
}

body .quick-disposition-panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  padding: 10px !important;
}

body .quick-disposition-panel span {
  color: var(--slate) !important;
  font-size: var(--t-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body .quick-disposition-button {
  background: rgba(255,255,255,0.06) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: var(--t-body) !important;
  box-shadow: none !important;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition) !important;
  cursor: pointer !important;
  padding: 7px 14px !important;
}

body .quick-disposition-button:hover {
  background: var(--gold-tint) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 2px 8px -2px rgba(201,162,39,.22) !important;
}

/* ── 33. MY LEADS — AVATAR CARD GRID ─────────────────────── */
body .crm-lead-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px 0 !important;
}

body .crm-lead-card {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  padding: 14px !important;
  cursor: pointer !important;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body .crm-lead-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 2px 12px -4px rgba(201,162,39,0.22), var(--shadow-card) !important;
  background: rgba(201,162,39,0.04) !important;
}

body .crm-lead-card-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

body .crm-lead-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--font-ui) !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.02em !important;
}

body .crm-avatar--green {
  background: rgba(82,168,112,0.18) !important;
  border: 1.5px solid rgba(82,168,112,0.35) !important;
  color: #4ADE80 !important;
}

body .crm-avatar--red {
  background: rgba(207,91,66,0.18) !important;
  border: 1.5px solid rgba(207,91,66,0.35) !important;
  color: #FCA5A5 !important;
}

body .crm-avatar--gold {
  background: rgba(201,162,39,0.14) !important;
  border: 1.5px solid rgba(201,162,39,0.30) !important;
  color: var(--gold) !important;
}

body .crm-avatar--blue {
  background: rgba(59,130,246,0.14) !important;
  border: 1.5px solid rgba(59,130,246,0.30) !important;
  color: #93C5FD !important;
}

body .crm-avatar--muted {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  color: var(--slate) !important;
}

body .crm-lead-card-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body .crm-lead-card-meta strong {
  font-size: var(--t-body) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

body .crm-lead-sub {
  font-size: var(--t-tiny) !important;
  color: var(--slate) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

body .crm-lead-card-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  border-top: 1px solid var(--hairline) !important;
  padding-top: 10px !important;
}

body .crm-lead-contact,
body .crm-lead-advisor,
body .crm-lead-source,
body .crm-lead-activity {
  font-size: var(--t-label) !important;
  color: var(--slate) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: var(--font-ui) !important;
  display: block !important;
}

body .crm-lead-contact { color: var(--ink) !important; }

body .crm-lead-activity {
  color: var(--slate-light) !important;
  margin-top: 2px !important;
}

body .crm-lead-empty {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 48px 24px !important;
  color: var(--slate) !important;
  font-size: var(--t-body) !important;
}

/* Skeleton shimmer */
body .crm-lead-card--skeleton { pointer-events: none !important; }

@keyframes crm-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

body .crm-skel-line,
body .crm-skel-circle,
body .crm-skel-pill {
  display: block !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.05) 75%) !important;
  background-size: 800px 100% !important;
  animation: crm-shimmer 1.4s infinite linear !important;
  border-radius: 4px !important;
}

body .crm-skel-circle {
  border-radius: 50% !important;
}

body .crm-skel-line {
  height: 12px !important;
  width: 80% !important;
  margin: 3px 0 !important;
}

body .crm-skel-line--lg { width: 65% !important; height: 14px !important; }
body .crm-skel-line--sm { width: 45% !important; height: 10px !important; }
body .crm-skel-pill { width: 60px !important; height: 20px !important; border-radius: 100px !important; }

/* ── 34. CONTROL CENTER / DASHBOARD ──────────────────────── */
body .control-center-panel {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--ink) !important;
}

body .control-center-panel h3 {
  font-family: var(--font-ui) !important;
  font-size: var(--t-h2) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

body .metric-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)) !important;
  gap: 12px !important;
}

body .detail-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: 10px !important;
}

body .detail-grid dt,
body .detail-grid label {
  font-size: var(--t-label) !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body .detail-grid dd,
body .detail-grid span {
  font-size: var(--t-body) !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
}

/* ── 34. TIMELINE ─────────────────────────────────────────── */
body .timeline-row {
  border-left: 2px solid rgba(255,255,255,0.12) !important;
  padding-left: 16px !important;
  margin-left: 8px !important;
  position: relative !important;
  color: var(--ink) !important;
}

body .timeline-row::before {
  content: '' !important;
  position: absolute !important;
  left: -5px !important;
  top: 6px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  border: 2px solid var(--paper) !important;
}

body .timeline-row strong {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  font-size: var(--t-body) !important;
}

body .timeline-row small {
  font-size: var(--t-meta) !important;
  color: var(--slate) !important;
}

body .timeline-row p {
  color: var(--ink) !important;
  font-size: var(--t-body) !important;
  margin: 4px 0 0 !important;
}

/* ── 35. SALES REPORT RANK ROWS ───────────────────────────── */
body .sales-report-rank-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--ink) !important;
  transition: background var(--transition) !important;
}

body .sales-report-rank-row:hover { background: rgba(255,255,255,0.04) !important; }

body .sales-rank-badge {
  background: rgba(201,162,39,0.18) !important;
  color: var(--gold-soft) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: var(--t-tiny) !important;
  border-radius: var(--radius-xs) !important;
  padding: 2px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body .sales-rank-meta {
  font-family: var(--font-ui) !important;
  font-size: var(--t-meta) !important;
  color: var(--slate) !important;
}

body .sales-rank-metric {
  font-family: var(--font-display) !important;
  font-size: var(--t-kpi) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

body .rank-numbers {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
}

body .rank-numbers .primary-rank-metric {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* ── 36. HR GRIDS ─────────────────────────────────────────── */
body .hr-access-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important;
  gap: 10px !important;
}

body .hr-policy-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: 14px !important;
}

/* ── 37. UTILITY CLASSES ──────────────────────────────────── */
body .link-button {
  background: transparent !important;
  color: var(--gold-soft) !important;
  border: none !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: var(--t-body) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color var(--transition) !important;
}

body .link-button:hover { color: var(--gold) !important; }

body .muted,
body .muted-text {
  color: var(--slate) !important;
  font-size: var(--t-meta) !important;
  font-family: var(--font-ui) !important;
}

body .row-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body .assistance-option {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: border-color var(--transition), background var(--transition) !important;
}

body .assistance-option:hover {
  border-color: var(--gold) !important;
  background: var(--gold-tint) !important;
}

body .branch-check-row {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--ink) !important;
  background: transparent !important;
}

/* ── 38. PRINT / EXPORT ───────────────────────────────────── */
@media print {
  body .sidebar,
  body .topbar,
  body .nav-item,
  body .primary-button,
  body .ghost-button,
  body .row-actions {
    display: none !important;
  }

  body {
    background: white !important;
    color: #000 !important;
    font-size: 11pt !important;
  }

  body table, body td, body th {
    border: 1px solid #ccc !important;
    color: #000 !important;
  }

  body th { background: #f5f5f5 !important; }
}

/* ── 37. MY LEADS REDESIGN (v=20260628-leads-redesign) ─────── */

/* List view container */
body .crm-leads-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 4px 0 !important;
}

/* Top bar */
body .crm-leads-topbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
body .crm-leads-topbar-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
body .crm-leads-topbar-count {
  font-size: 12px !important;
  color: var(--slate) !important;
  font-weight: 400 !important;
}
body .crm-leads-review-btn {
  margin-left: auto !important;
  background: #0A1628 !important;
  color: #C9A227 !important;
  border: none !important;
  padding: 0 16px !important;
  height: 34px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: var(--font-ui) !important;
}
body .crm-leads-review-btn:hover { background: #142236 !important; }

/* Filter pills restyle */
body #leadsPanel .toolbar input[type="search"],
body #leadsPanel .toolbar select { border-radius: 20px !important; }

/* Section labels */
body .crm-leads-section-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  margin: 14px 0 5px !important;
  display: block !important;
  padding: 0 2px !important;
}
body .crm-leads-section-label:first-child { margin-top: 2px !important; }
body .crm-leads-label--overdue { color: #E24B4A !important; }
body .crm-leads-label--new { color: #1D9E75 !important; }
body .crm-leads-label--active { color: var(--slate) !important; }

/* Lead row */
body .crm-leads-row {
  background: var(--surface) !important;
  border: 0.5px solid var(--hairline) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: all .15s !important;
  margin-bottom: 5px !important;
}
body .crm-leads-row:hover {
  background: rgba(201,162,39,0.06) !important;
  border-color: rgba(201,162,39,0.28) !important;
}
body .crm-leads-row--overdue {
  border-left: 3px solid #E24B4A !important;
  padding-left: 11px !important;
}
body .crm-leads-row--new {
  border-left: 3px solid #1D9E75 !important;
  padding-left: 11px !important;
}

/* Avatar in list row — 5-color palette */
body .crm-leads-list-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
  font-family: var(--font-ui) !important;
}
body .crm-leads-av--1 { background: #E6F1FB !important; color: #185FA5 !important; }
body .crm-leads-av--2 { background: #FCEBEB !important; color: #A32D2D !important; }
body .crm-leads-av--3 { background: #EAF3DE !important; color: #3B6D11 !important; }
body .crm-leads-av--4 { background: #EEEDFE !important; color: #3C3489 !important; }
body .crm-leads-av--5 { background: #FAEEDA !important; color: #854F0B !important; }

/* Row body */
body .crm-leads-row-body {
  flex: 1 !important;
  min-width: 0 !important;
}
body .crm-leads-row-name {
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body .crm-leads-row-sub {
  font-size: 11px !important;
  color: var(--slate) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body .crm-leads-overdue-tag {
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  background: #FCEBEB !important;
  color: #A32D2D !important;
  font-weight: 500 !important;
  margin-left: 4px !important;
}
body .crm-leads-new-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #1D9E75 !important;
  vertical-align: middle !important;
  margin-right: 5px !important;
}

/* Status badges (row + hero) */
body .crm-leads-sbadge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  padding: 3px 11px !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-family: var(--font-ui) !important;
}
body .crm-leads-sbadge[data-status="New Lead"],
body .crm-leads-sbadge[data-status="New"] { background:#EAF3DE !important; color:#3B6D11 !important; }
body .crm-leads-sbadge[data-status="Contacted"] { background:#E6F1FB !important; color:#185FA5 !important; }
body .crm-leads-sbadge[data-status="Interested"] { background:#EEEDFE !important; color:#3C3489 !important; }
body .crm-leads-sbadge[data-status="Pending Docs"],
body .crm-leads-sbadge[data-status="Documents Requested"],
body .crm-leads-sbadge[data-status="No Answer"],
body .crm-leads-sbadge[data-status="Follow Up"] { background:#FAEEDA !important; color:#854F0B !important; }
body .crm-leads-sbadge[data-status="Not Reachable"],
body .crm-leads-sbadge[data-status="Duplicate"],
body .crm-leads-sbadge[data-status="Invalid"] { background:#F1EFE8 !important; color:#5F5E5A !important; }
body .crm-leads-sbadge[data-status="Not Interested"],
body .crm-leads-sbadge[data-status="Do Not Contact"],
body .crm-leads-sbadge[data-status="Hot Lead"] { background:#FCEBEB !important; color:#A32D2D !important; }
body .crm-leads-sbadge[data-status="Paid Client"],
body .crm-leads-sbadge[data-status="Converted"],
body .crm-leads-sbadge[data-status="Contract Signed"],
body .crm-leads-sbadge[data-status="Closed Won"] { background:#0A1628 !important; color:#C9A227 !important; }

/* ── LEAD DETAIL DIALOG ────────────────────────────────────── */

body #leadDialog[open] {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 92vh !important;
  width: min(620px, calc(100vw - 20px)) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 0.5px solid var(--hairline) !important;
  background: var(--panel) !important;
}
body #leadDialog > form#leadForm {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 92vh !important;
  overflow: hidden !important;
}

/* Top bar */
body .crm-leads-dlg-topbar {
  background: #0A1628 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 14px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
body .crm-leads-dlg-counter {
  font-size: 12px !important;
  color: rgba(201,162,39,0.55) !important;
  font-family: var(--font-ui) !important;
}
body .crm-leads-dlg-counter strong {
  color: #C9A227 !important;
  font-weight: 500 !important;
}
body .crm-leads-dlg-close-btn {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(201,162,39,0.7) !important;
  background: transparent !important;
  border: none !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
}

/* Hero */
body .crm-leads-dlg-hero {
  background: var(--surface) !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  border-bottom: 0.5px solid var(--hairline) !important;
  flex-shrink: 0 !important;
}
body .crm-leads-dlg-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
  font-family: var(--font-ui) !important;
}
body .crm-leads-dlg-hero-info { flex: 1 !important; min-width: 0 !important; }
body .crm-leads-dlg-hero-name {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
body .crm-leads-dlg-hero-meta {
  font-size: 11px !important;
  color: var(--slate) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body .crm-leads-dlg-hero-badges {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  margin-top: 5px !important;
}
body .crm-leads-dlg-actions {
  display: flex !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}
body .crm-leads-dlg-action-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid var(--hairline) !important;
  border-radius: 8px !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  padding: 0 !important;
}

/* Tab bar */
body .crm-leads-dlg-tabbar {
  display: flex !important;
  background: var(--panel-soft) !important;
  border-bottom: 0.5px solid var(--hairline) !important;
  flex-shrink: 0 !important;
}
body .crm-leads-dlg-tab {
  flex: 1 !important;
  padding: 10px 3px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--slate) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: color .15s, border-color .15s !important;
  font-family: var(--font-ui) !important;
  white-space: nowrap !important;
}
body .crm-leads-dlg-tab.active {
  color: var(--ink) !important;
  border-bottom-color: #C9A227 !important;
  background: var(--panel) !important;
}

/* Tab panes */
body .crm-leads-dlg-pane {
  overflow-y: auto !important;
  padding: 13px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
}
body .crm-leads-dlg-pane[hidden] { display: none !important; }

/* Section headings inside panes */
body .crm-leads-pane-heading {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 4px 0 2px !important;
  display: block !important;
}

/* Info card grid */
body .crm-leads-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}
body .crm-leads-info-grid > .full { grid-column: 1 / -1 !important; }
body .crm-leads-info-card {
  background: var(--surface) !important;
  border-radius: 8px !important;
  padding: 9px 10px !important;
}
body .crm-leads-info-card label {
  display: block !important;
  font-size: 10px !important;
  color: var(--slate) !important;
  margin-bottom: 3px !important;
  font-family: var(--font-ui) !important;
  font-weight: 400 !important;
}
body .crm-leads-info-card input,
body .crm-leads-info-card select,
body .crm-leads-info-card textarea {
  border: none !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  width: 100% !important;
  outline: none !important;
  padding: 0 !important;
  font-family: var(--font-ui) !important;
}

/* Booking tab extras */
body .crm-leads-quick-btns {
  display: flex !important;
  gap: 6px !important;
  margin-top: 7px !important;
}
body .crm-leads-quick-btn {
  background: var(--surface) !important;
  border: 0.5px solid var(--hairline) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  font-family: var(--font-ui) !important;
}
body .crm-leads-quick-btn:hover { border-color: #C9A227 !important; }

/* Payment tab — fee hero */
body .crm-leads-fee-hero {
  background: #0A1628 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}
body .crm-leads-fee-label { font-size: 10px !important; color: rgba(201,162,39,0.6) !important; margin-bottom: 3px !important; }
body .crm-leads-fee-amount { font-size: 20px !important; font-weight: 500 !important; color: #C9A227 !important; }
body .crm-leads-fee-sub { font-size: 11px !important; color: rgba(201,162,39,0.55) !important; margin-top: 3px !important; }
body .crm-leads-contract-badge {
  font-size: 11px !important;
  border-radius: 20px !important;
  padding: 5px 11px !important;
  display: inline-block !important;
  font-family: var(--font-ui) !important;
}
body .crm-leads-contract-badge.signed { background:#EAF3DE !important; color:#27500A !important; }
body .crm-leads-contract-badge.unsigned { background:rgba(255,255,255,0.08) !important; color:var(--slate) !important; }

/* Update tab — AI box */
body .crm-leads-ai-box {
  border: 0.5px solid #AFA9EC !important;
  border-radius: 8px !important;
  padding: 11px 13px !important;
  background: rgba(83,74,183,0.06) !important;
}
body .crm-leads-ai-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #534AB7 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  display: block !important;
  margin-bottom: 5px !important;
}

/* Quick call outcome pills */
body .crm-leads-outcome-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}
body .crm-leads-outcome-pill {
  background: var(--surface) !important;
  border: 0.5px solid var(--hairline) !important;
  color: var(--slate) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  padding: 5px 11px !important;
  cursor: pointer !important;
  transition: all .12s !important;
  font-family: var(--font-ui) !important;
}
body .crm-leads-outcome-pill:hover { border-color: rgba(201,162,39,0.4) !important; }
body .crm-leads-outcome-pill.active-contacted { background:#E6F1FB !important; color:#185FA5 !important; border-color:#185FA5 !important; }
body .crm-leads-outcome-pill.active-no-answer { background:#FAEEDA !important; color:#854F0B !important; border-color:#BA7517 !important; }
body .crm-leads-outcome-pill.active-not-reachable { background:#FCEBEB !important; color:#A32D2D !important; border-color:#E24B4A !important; }
body .crm-leads-outcome-pill.active-interested { background:#EAF3DE !important; color:#3B6D11 !important; border-color:#1D9E75 !important; }
body .crm-leads-outcome-pill.active-not-interested { background:#FCEBEB !important; color:#A32D2D !important; border-color:#A32D2D !important; }
body .crm-leads-outcome-pill.active-follow-up { background:#EEEDFE !important; color:#3C3489 !important; border-color:#534AB7 !important; }
body .crm-leads-outcome-pill.active-appointment { background:#E6F1FB !important; color:#0C447C !important; border-color:#378ADD !important; }
body .crm-leads-outcome-pill.active-docs-requested { background:#FAEEDA !important; color:#633806 !important; border-color:#EF9F27 !important; }
body .crm-leads-outcome-pill.active-converted { background:#0A1628 !important; color:#C9A227 !important; border-color:#C9A227 !important; }
body .crm-leads-outcome-pill.active-duplicate { background:#F1EFE8 !important; color:#5F5E5A !important; border-color:#888780 !important; }

/* Status select in Update tab */
body .crm-leads-status-select {
  border: 0.5px solid var(--hairline) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  width: 100% !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
body .crm-leads-status-select:focus {
  border-color: #C9A227 !important;
  box-shadow: 0 0 0 2px rgba(201,162,39,.1) !important;
  outline: none !important;
}

/* Required label */
body .crm-leads-required-label {
  color: #E24B4A !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  display: block !important;
  letter-spacing: .05em !important;
}

/* Note textarea */
body .crm-leads-note-textarea {
  border: 0.5px solid var(--hairline) !important;
  border-radius: 8px !important;
  padding: 9px 10px !important;
  min-height: 80px !important;
  resize: vertical !important;
  width: 100% !important;
  font: inherit !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-sizing: border-box !important;
}
body .crm-leads-note-textarea:focus { border-color: #C9A227 !important; outline: none !important; }
body .crm-leads-note-textarea.input-error { border-color: #E24B4A !important; }

/* Save button */
body .crm-leads-save-btn {
  width: 100% !important;
  background: #0A1628 !important;
  color: #C9A227 !important;
  border: none !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: var(--font-ui) !important;
}
body .crm-leads-save-btn:hover { background: #142236 !important; }

/* Activity timeline */
body .crm-leads-timeline-wrap {
  display: flex !important;
  flex-direction: column !important;
}
body .crm-leads-tl-item {
  display: flex !important;
  gap: 10px !important;
  padding-bottom: 14px !important;
  position: relative !important;
}
body .crm-leads-tl-item::before {
  content: '' !important;
  position: absolute !important;
  left: 4px !important;
  top: 12px !important;
  bottom: 0 !important;
  width: 1px !important;
  background: var(--hairline) !important;
}
body .crm-leads-tl-item:last-child::before { display: none !important; }
body .crm-leads-tl-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
  position: relative !important;
  z-index: 1 !important;
  background: #888780 !important;
}
body .crm-leads-tl-dot.purple { background: #534AB7 !important; }
body .crm-leads-tl-dot.green  { background: #1D9E75 !important; }
body .crm-leads-tl-dot.blue   { background: #378ADD !important; }
body .crm-leads-tl-dot.amber  { background: #BA7517 !important; }
body .crm-leads-tl-dot.red    { background: #E24B4A !important; }
body .crm-leads-tl-dot.gray   { background: #888780 !important; }
body .crm-leads-tl-text { font-size: 12px !important; color: var(--ink) !important; line-height: 1.4 !important; }
body .crm-leads-tl-sub  { font-size: 11px !important; color: var(--slate) !important; margin-top: 2px !important; }

/* Dialog footer */
body .crm-leads-dlg-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 9px 14px !important;
  border-top: 0.5px solid var(--hairline) !important;
  background: var(--panel-soft) !important;
  flex-shrink: 0 !important;
}
body .crm-leads-dlg-nav-btn {
  border: 0.5px solid var(--hairline) !important;
  border-radius: 8px !important;
  padding: 6px 13px !important;
  font-size: 12px !important;
  background: transparent !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  font-family: var(--font-ui) !important;
}
body .crm-leads-dlg-nav-btn:hover { border-color: #C9A227 !important; color: #C9A227 !important; }
body .crm-leads-dlg-nav-btn:disabled { opacity: .4 !important; cursor: default !important; }
body .crm-leads-dlg-footer-count {
  font-size: 11px !important;
  color: var(--slate) !important;
  font-family: var(--font-ui) !important;
}

/* ── 38. LIGHT THEME — CONTENT AREA OVERRIDES ─────────────── */
/* Sidebar keeps its own explicit dark rules (they win).
   These rules flip the main content area to dark-nav / light-paper. */

/* 38a. Topbar — white bar above content */
body .topbar {
  background: #ffffff !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.10) !important;
}

/* 38b. Metric / KPI cards */
body .metric,
body .metric-card,
body .kpi-card,
body .role-command-card,
body .crm-card,
body .checklist-card,
body .announcement-card,
body .internal-ticket-card,
body .ranking-row-rich,
body .hr-policy-card,
body .queue-item,
body .workflow-slot,
body .workflow-day-card {
  background: #ffffff !important;
  border: 0.5px solid rgba(0,0,0,0.09) !important;
  color: rgba(10,22,40,0.90) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07) !important;
}

/* 38c. Generic panel/card wrappers */
body .panel,
body .card-panel,
body .table-wrap,
body .leader-command-panel,
body .role-command-center,
body .super-admin-command-center,
body .end-day-summary,
body .split-layout,
body .eod-status-grid {
  background: #ffffff !important;
  border: 0.5px solid rgba(0,0,0,0.09) !important;
}

/* 38d. My Leads — rows on paper background */
body .crm-leads-list {
  background: transparent !important;
}
body .crm-leads-row {
  background: #ffffff !important;
  border: 0.5px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
body .crm-leads-row:hover {
  background: #fffdf5 !important;
  border-color: var(--gold) !important;
  box-shadow: 0 2px 8px rgba(201,162,39,0.15) !important;
}
body .crm-leads-row-name { color: #0A1628 !important; }
body .crm-leads-row-sub  { color: rgba(10,22,40,0.50) !important; }
body .crm-leads-row-meta { color: rgba(10,22,40,0.45) !important; }
body .crm-leads-topbar-title { color: #0A1628 !important; }
body .crm-leads-topbar-count { color: rgba(10,22,40,0.50) !important; }

/* 38e. My Leads — dialog content areas */
body .crm-leads-dlg-hero {
  background: #F6F4EF !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.09) !important;
}
body .crm-leads-dlg-hero-name { color: #0A1628 !important; }
body .crm-leads-dlg-hero-meta { color: rgba(10,22,40,0.50) !important; }
body .crm-leads-dlg-tabbar {
  background: #ffffff !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.09) !important;
}
body .crm-leads-dlg-tab { color: rgba(10,22,40,0.55) !important; background: transparent !important; }
body .crm-leads-dlg-tab.active { color: #0A1628 !important; background: transparent !important; }
body .crm-leads-dlg-pane { background: #F6F4EF !important; }
body .crm-leads-dlg-footer { background: #ffffff !important; border-top-color: rgba(0,0,0,0.09) !important; }

/* 38f. Info grid items */
body .crm-leads-info-item {
  border-bottom-color: rgba(0,0,0,0.07) !important;
}
body .crm-leads-info-label { color: rgba(10,22,40,0.45) !important; }
body .crm-leads-info-value { color: #0A1628 !important; }
body .crm-leads-info-grid { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; border-radius: 8px !important; }

/* 38g. Handover fieldset */
body .handover-fieldset {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
}
body .handover-fieldset legend {
  background: #ffffff !important;
}

/* 38h. Ranking / leaderboard rows */
body .ranking-row,
body .advisor-target-strip,
body .branch-rank-row {
  border-bottom-color: rgba(0,0,0,0.07) !important;
}

/* 38i. Crm info items, history, workflow panes */
body .crm-info-item,
body .history-item,
body .activity-item {
  border-bottom-color: rgba(0,0,0,0.07) !important;
  color: rgba(10,22,40,0.90) !important;
}
body .crm-info-label { color: rgba(10,22,40,0.45) !important; }
body .crm-info-value { color: #0A1628 !important; }

/* 38j. Section dividers and misc hairlines */
body .section-divider,
body hr {
  border-color: rgba(0,0,0,0.08) !important;
  background: rgba(0,0,0,0.08) !important;
}

/* 38k. Lead-empty state */
body .crm-lead-empty {
  color: rgba(10,22,40,0.40) !important;
  background: transparent !important;
}

/* 38l. Assessment / interview score boxes (keep navy accent) */
body .crm-leads-fee-hero { background: #0A1628 !important; }

/* 38m. Mobile responsive — ensure light bg on small screens */
@media (max-width: 767px) {
  body, body .app-shell,
  body .main-content, body .content, body .view-panel {
    background: #F6F4EF !important;
  }
}

/* ============================================================
   MY LEADS — PROTOTYPE TABLE DESIGN (2026-06-29)
   ============================================================ */

/* Metric row */
body .crm-mrow {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 11px !important;
  margin-bottom: 16px !important;
}
body .crm-mc {
  background: #fff !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  border-radius: 10px !important;
  padding: 13px 15px !important;
}
body .crm-ml {
  font-size: 10px !important;
  color: rgba(10,22,40,0.50) !important;
  margin-bottom: 5px !important;
}
body .crm-mv {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.1 !important;
}
body .crm-mv--warn { color: #BA7517 !important; }
body .crm-mv--good { color: #0F6E56 !important; }
body .crm-mv--blue { color: #185FA5 !important; }
body .crm-mc-ch {
  font-size: 9px !important;
  margin-top: 4px !important;
  color: rgba(10,22,40,0.45) !important;
}

/* Charts row */
body .crm-charts-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 200px !important;
  gap: 11px !important;
  margin-bottom: 16px !important;
}
body .crm-card {
  background: #fff !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
}
body .crm-card--donut {
  min-width: 170px !important;
}
body .crm-ch {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}
body .crm-ct {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
body .crm-cs {
  font-size: 10px !important;
  color: rgba(10,22,40,0.45) !important;
}
body .crm-canvas-wrap {
  height: 120px !important;
  position: relative !important;
}
body .crm-donut-wrap {
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Controls row */
body .crm-leads-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
body .crm-tab-bar {
  display: flex !important;
  gap: 2px !important;
}
body .crm-tab {
  padding: 5px 13px !important;
  font-size: 10px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  color: rgba(10,22,40,0.50) !important;
  border: none !important;
  background: none !important;
  font-family: inherit !important;
  transition: background 0.12s !important;
}
body .crm-tab:hover {
  background: rgba(10,22,40,0.05) !important;
  color: var(--ink) !important;
}
body .crm-tab.active {
  background: #0A1628 !important;
  color: #C9A227 !important;
}

/* Filter bar */
body .crm-fbar {
  background: #fff !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  border-radius: 9px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
}
body .crm-sbox {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 160px !important;
}
body .crm-sbox input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  flex: 1 !important;
  font-size: 11px !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  padding: 2px 0 !important;
}
body .crm-fselect {
  border: 0.5px solid rgba(0,0,0,0.12) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 10px !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-family: inherit !important;
}

/* Table */
body .crm-tblw {
  background: #fff !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
body .crm-th {
  display: grid !important;
  padding: 9px 15px !important;
  background: rgba(10,22,40,0.025) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
  font-size: 9px !important;
  color: rgba(10,22,40,0.40) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 600 !important;
}
body .crm-tr {
  display: grid !important;
  padding: 11px 15px !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.07) !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: background 0.1s !important;
}
body .crm-tr:last-child {
  border-bottom: none !important;
}
body .crm-tr:hover {
  background: rgba(201,162,39,0.04) !important;
}
body .crm-ln {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
body .crm-ls {
  font-size: 9px !important;
  color: rgba(10,22,40,0.40) !important;
  margin-top: 1px !important;
}
body .crm-lc {
  font-size: 10px !important;
  color: #185FA5 !important;
}
body .crm-lc-sub {
  font-size: 9px !important;
  color: rgba(10,22,40,0.40) !important;
  margin-top: 1px !important;
}

/* Status badges in table */
body .crm-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
body .crm-badge--am { background: #FFF3CD !important; color: #856404 !important; }
body .crm-badge--gr { background: #D1FAE5 !important; color: #065F46 !important; }
body .crm-badge--re { background: #FEE2E2 !important; color: #991B1B !important; }
body .crm-badge--bl { background: #E0F2FE !important; color: #0369A1 !important; }
body .crm-badge--pu { background: #EEEDFE !important; color: #3C3489 !important; }
body .crm-badge--nv { background: rgba(10,22,40,0.07) !important; color: #0A1628 !important; }
body .crm-badge--gd { background: rgba(201,162,39,0.14) !important; color: #633806 !important; }

/* View action button in table */
body .crm-ab {
  font-size: 10px !important;
  padding: 4px 10px !important;
  border-radius: 5px !important;
  border: 0.5px solid rgba(0,0,0,0.12) !important;
  background: #fff !important;
  cursor: pointer !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  white-space: nowrap !important;
}
body .crm-ab:hover {
  background: #0A1628 !important;
  color: #C9A227 !important;
}

/* Donut legend */
body #crmDonutLegend {
  margin-top: 8px !important;
}
body .crm-legend-item {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 9px !important;
  color: rgba(10,22,40,0.50) !important;
  margin-bottom: 3px !important;
}
body .crm-legend-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 2px !important;
  margin-right: 4px !important;
}
body .crm-legend-val {
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* Empty state in table */
body .crm-tbl-empty {
  padding: 32px !important;
  text-align: center !important;
  color: rgba(10,22,40,0.40) !important;
  font-size: 11px !important;
}

@media (max-width: 768px) {
  body .crm-mrow { grid-template-columns: repeat(2, 1fr) !important; }
  body .crm-charts-row { grid-template-columns: 1fr !important; }
  body .crm-th, body .crm-tr { grid-template-columns: 2fr 1fr 1fr .6fr !important; }
  body .crm-th span:nth-child(2),
  body .crm-tr > div:nth-child(2),
  body .crm-th span:nth-child(5),
  body .crm-tr > div:nth-child(5),
  body .crm-th span:nth-child(6),
  body .crm-tr > div:nth-child(6) { display: none !important; }
}

/* ============================================================
   V3 MY LEADS COMPONENTS (2026-06-29)
   ============================================================ */

/* Metric card row */
.krow { display:grid; gap:12px; margin-bottom:18px; }
.k4 { grid-template-columns:repeat(4,1fr); }
.k3 { grid-template-columns:repeat(3,1fr); }
.kcard {
  background:#fff;
  border:0.5px solid rgba(0,0,0,.09);
  border-radius:12px;
  padding:14px 16px;
  position:relative;
  overflow:hidden;
  transition:transform .15s,box-shadow .15s;
}
.kcard:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(10,22,40,.08); }
.kcard-accent { border-left:3px solid #C9A227; }
.kcard-green  { border-left:3px solid #22c55e; }
.kcard-red    { border-left:3px solid #EF4444; }
.kcard-blue   { border-left:3px solid #3B82F6; }
.kl {
  font-size:10px;
  color:rgba(10,22,40,.55);
  margin-bottom:5px;
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.kv { font-size:24px; font-weight:700; color:#0A1628; line-height:1.1; }
.kch {
  font-size:10px;
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:3px;
  font-weight:500;
  color:rgba(10,22,40,.55);
}
.kch.up { color:#16a34a; }
.kch.dn { color:#dc2626; }

/* Tab bar */
.tabs { display:flex; gap:2px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.tab {
  padding:6px 14px;
  font-size:10px;
  border-radius:6px;
  cursor:pointer;
  color:rgba(10,22,40,.55);
  border:none;
  background:none;
  font-family:inherit;
  font-weight:500;
  transition:all .12s;
  white-space:nowrap;
}
.tab:hover { background:rgba(10,22,40,.06); color:#0A1628; }
.tab.active { background:#0A1628; color:#C9A227; font-weight:700; }

/* Filter bar */
.fbar {
  background:#fff;
  border:0.5px solid rgba(0,0,0,.09);
  border-radius:10px;
  padding:11px 16px;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.fp {
  padding:5px 12px;
  border-radius:20px;
  font-size:10px;
  cursor:pointer;
  border:0.5px solid rgba(0,0,0,.14);
  background:#fff;
  color:rgba(10,22,40,.55);
  font-family:inherit;
  font-weight:500;
  transition:all .12s;
  white-space:nowrap;
}
.fp:hover { border-color:#0A1628; color:#0A1628; }
.fp.active { background:#0A1628; color:#C9A227; border-color:#0A1628; font-weight:700; }
.sbox {
  flex:1;
  min-width:180px;
  display:flex;
  align-items:center;
  gap:8px;
  background:#F6F4EE;
  border-radius:7px;
  padding:7px 13px;
  font-size:11px;
  color:rgba(10,22,40,.35);
  border:0.5px solid rgba(0,0,0,.14);
  transition:border-color .15s;
}
.sbox:focus-within { border-color:#C9A227; }
.sbox input {
  border:none !important;
  background:transparent !important;
  outline:none !important;
  flex:1;
  font-size:11px !important;
  color:#0A1628 !important;
  font-family:inherit !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Table */
.tblw {
  background:#fff;
  border:0.5px solid rgba(0,0,0,.09);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:14px;
}
.th {
  display:grid;
  padding:9px 16px;
  background:rgba(10,22,40,.025);
  border-bottom:0.5px solid rgba(0,0,0,.09);
  font-size:9px;
  color:rgba(10,22,40,.35);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
}
.tr {
  display:grid;
  padding:11px 16px;
  border-bottom:0.5px solid rgba(0,0,0,.09);
  align-items:center;
  transition:background .12s;
  cursor:default;
}
.tr:hover { background:rgba(201,162,39,.05); }
.tr:last-child { border-bottom:none; }
.ln { font-size:11px; font-weight:600; color:#0A1628; }
.ls { font-size:9px; color:rgba(10,22,40,.35); margin-top:1px; }
.ab {
  font-size:10px;
  padding:4px 10px;
  border-radius:6px;
  border:0.5px solid rgba(0,0,0,.14);
  background:#fff;
  cursor:pointer;
  color:#0A1628;
  font-family:inherit;
  white-space:nowrap;
  transition:all .12s;
  font-weight:500;
}
.ab:hover { background:#0A1628; color:#C9A227; border-color:#0A1628; }

/* Badges (v3) */
.badge {
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 8px;
  border-radius:20px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.b-am  { background:#FFF3CD; color:#856404; }
.b-gr  { background:#D1FAE5; color:#065F46; }
.b-re  { background:#FEE2E2; color:#991B1B; }
.b-bl  { background:#DBEAFE; color:#1D4ED8; }
.b-pu  { background:#EDE9FE; color:#5B21B6; }
.b-cy  { background:#CFFAFE; color:#0E7490; }
.b-nv  { background:rgba(10,22,40,.08); color:#0A1628; }
.b-gd  { background:rgba(201,162,39,.15); color:#633806; }
.b-dot::before {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  display:inline-block;
}

/* Responsive */
@media (max-width:900px) {
  .k4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:500px) {
  .k4,.k3 { grid-template-columns:1fr 1fr; }
  .tblw { overflow-x:auto; }
  .th,.tr { min-width:580px; }
}

/* ============================================================
   V3 SIDEBAR (sb-* classes) (2026-06-29)
   ============================================================ */
.app-shell { display:flex !important; height:100vh; overflow:hidden; }
.app-shell[hidden] { display:none !important; }
.sb {
  width:216px; min-width:216px; flex-shrink:0;
  background:#0A1628;
  display:flex; flex-direction:column;
  overflow-y:auto; height:100vh; height:100dvh;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}
.sb-top {
  padding:16px 14px 12px;
  border-bottom:0.5px solid rgba(201,162,39,.22);
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.sb-logo {
  width:36px; height:36px; border-radius:9px;
  background:#142033; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden; border:1px solid rgba(201,162,39,.3);
}
.sb-logo img { width:100%; height:100%; object-fit:contain; }
.sb-title { font-size:12px; font-weight:600; color:#fff; line-height:1.2; }
.sb-sub { font-size:8.5px; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.07em; }
.sb-close { display:none; background:rgba(255,255,255,.08); border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; color:#fff; align-items:center; justify-content:center; flex-shrink:0; margin-left:auto; }
.sb-close i { font-size:15px; }
.sb-user {
  padding:10px 14px;
  border-bottom:0.5px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:9px; flex-shrink:0; cursor:default;
}
.sb-av {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,#C9A227,#E8C547);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#0A1628; flex-shrink:0;
}
.sb-uname { font-size:11px; color:#fff; font-weight:500; }
.sb-ubr { font-size:9px; color:rgba(255,255,255,.4); display:flex; align-items:center; gap:4px; margin-top:2px; }
.sb-ubr span { color:inherit !important; }
.sb-online { width:6px; height:6px; border-radius:50%; background:#22c55e; flex-shrink:0; }
.sb-nav { flex:1; padding:8px 0; }
.ns {
  padding:8px 14px 3px;
  font-size:8px; color:rgba(255,255,255,.25);
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.ni {
  display:flex; align-items:center; gap:9px;
  padding:7px 14px; font-size:11px;
  color:rgba(255,255,255,.78); cursor:pointer;
  position:relative; transition:all .15s;
  width:100%; text-align:left;
  background:none; border:none; font-family:inherit;
  user-select:none; text-decoration:none; white-space:nowrap;
}
.ni:hover { color:#fff; background:rgba(255,255,255,.06); }
.ni.active { color:#fff; background:rgba(201,162,39,.16); }
.ni.active::before {
  content:''; position:absolute; left:0; top:6px; bottom:6px;
  width:3px; background:#C9A227; border-radius:0 3px 3px 0;
}
.ni i { font-size:15px; width:18px; text-align:center; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.ni-lbl { flex:1; color:inherit !important; opacity:1 !important; visibility:visible !important; display:inline-block !important; }
.nb { background:#C9A227; color:#0A1628 !important; font-size:8px; font-weight:700; padding:1px 5px; border-radius:8px; min-width:18px; text-align:center; flex-shrink:0; }
.nb-re { background:#EF4444; color:#fff; }
.sb-bot { padding:10px 14px; border-top:0.5px solid rgba(255,255,255,.07); flex-shrink:0; }
.sb-bot button {
  width:100%; padding:7px;
  background:rgba(255,255,255,.05);
  border:0.5px solid rgba(255,255,255,.12);
  border-radius:6px; color:rgba(255,255,255,.45);
  font-size:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:inherit; transition:all .15s;
}
.sb-bot button:hover { background:rgba(255,255,255,.1); color:#fff; }

/* ============================================================
   MOBILE NAV DRAWER (2026-07-04)
   ============================================================ */
.mobile-menu-button { display:none; border:none; background:transparent; color:var(--ink,#0A1628); font-size:18px; padding:4px 8px 4px 0; cursor:pointer; line-height:1; }
.sb-backdrop { display:none; }
@media (max-width:900px) {
  .mobile-menu-button { display:inline-flex; align-items:center; }
  .sb-close { display:flex; }
  .sb {
    position:fixed !important; top:0; left:0; height:100vh; height:100dvh; width:250px; min-width:250px;
    z-index:1001; transform:translateX(-100%); transition:transform .22s ease;
  }
  .app-shell.nav-open .sb { transform:translateX(0); }
  .sb-backdrop {
    display:block; position:fixed; inset:0; background:rgba(10,22,40,.5); z-index:1000;
    opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  .app-shell.nav-open .sb-backdrop { opacity:1; pointer-events:auto; }
  .top-actions { flex-wrap:wrap; justify-content:flex-end; gap:6px; }
  .ni { font-size:13px; padding:9px 14px; }
  .ni i { font-size:16px; }
}

/* ============================================================
   V3 LEAD DETAIL MODAL (dm-* classes) (2026-06-29)
   ============================================================ */
#detail-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(10,22,40,.6); z-index:9000;
  backdrop-filter:blur(3px);
}
#detail-panel {
  display:none; position:fixed;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:700px; max-width:96vw; max-height:90vh;
  background:#fff; border-radius:18px; z-index:9001;
  overflow:hidden; flex-direction:column;
  box-shadow:0 32px 80px rgba(10,22,40,.26);
}
#detail-panel.open { display:flex; }
.dm-header { padding:18px 22px 0; background:#fff; flex-shrink:0; border-bottom:0.5px solid rgba(0,0,0,.08); }
.dm-header-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.dm-av {
  width:44px; height:44px; border-radius:50%;
  background:#DBEAFE; color:#1D4ED8;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; flex-shrink:0;
}
.dm-hname { font-size:16px; font-weight:700; color:#0A1628; line-height:1.2; }
.dm-badges { display:flex; gap:5px; margin-top:5px; flex-wrap:wrap; }
.dm-hbtn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:7px; font-size:10px;
  cursor:pointer; border:0.5px solid rgba(0,0,0,.14);
  background:#fff; color:#0A1628; font-family:inherit; transition:all .15s; font-weight:500;
}
.dm-hbtn:hover { background:#F6F4EE; }
.dm-hbtn-p { background:#0A1628; color:#C9A227; border-color:#0A1628; font-weight:700; }
.dm-hbtn-p:hover { background:#0d1e38; }
.dm-close-btn {
  width:32px; height:32px; border-radius:50%;
  border:0.5px solid rgba(0,0,0,.14); background:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:rgba(10,22,40,.45); margin-left:2px; font-size:16px;
}
.dm-tab-bar { display:flex; gap:0; }
.dm-tab {
  display:flex; align-items:center; gap:5px;
  padding:10px 17px; font-size:10px; font-weight:500;
  color:rgba(10,22,40,.45); border:none; background:none;
  cursor:pointer; font-family:inherit;
  border-bottom:2.5px solid transparent; transition:all .15s; white-space:nowrap;
}
.dm-tab:hover { color:#0A1628; background:rgba(10,22,40,.03); }
.dm-tab.active { color:#0A1628; font-weight:700; border-bottom-color:#C9A227; }
.dm-tab i { font-size:13px; }
.dm-body { overflow-y:auto; flex:1; padding:20px 22px; }
.dm-sc { display:none; }
.dm-sc.active { display:block; }
.dm-box { background:#F6F4EE; border-radius:10px; padding:14px; margin-bottom:14px; }
.dm-bh { font-size:9px; font-weight:700; color:rgba(10,22,40,.35); text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px; }
.dm-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.dm-row:last-child { margin-bottom:0; }
.dm-ic { font-size:14px; color:rgba(10,22,40,.3); width:16px; flex-shrink:0; }
.dm-kv { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; font-size:10px; color:rgba(10,22,40,.55); }
.dm-kv:last-child { margin-bottom:0; }
.dm-g2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.dm-stage { flex:1; text-align:center; position:relative; z-index:1; }
.dm-stage-dot { width:30px; height:30px; border-radius:50%; background:rgba(10,22,40,.06); border:2px solid rgba(10,22,40,.12); margin:0 auto 5px; display:flex; align-items:center; justify-content:center; font-size:12px; color:rgba(10,22,40,.3); transition:all .2s; }
.dm-stage-lbl { font-size:8px; color:rgba(10,22,40,.35); font-weight:500; }
.dm-stage.active .dm-stage-dot { background:#FEF3C7; border-color:#F59E0B; color:#D97706; }
.dm-stage.active .dm-stage-lbl { color:#D97706; font-weight:700; }
.dm-stage.done .dm-stage-dot { background:#D1FAE5; border-color:#16a34a; color:#16a34a; }
.dm-stage.done .dm-stage-lbl { color:#16a34a; font-weight:600; }
.dm-alert { border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.dm-alert-gr { background:#F0FDF4; border:1px solid #BBF7D0; }
.dm-alert-am { background:#FFFBEB; border:1px solid rgba(201,162,39,.3); }
.dm-alert-re { background:#FEF2F2; border:1px solid rgba(239,68,68,.2); }
.dm-badge { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:20px; font-size:9px; font-weight:700; }
.dm-b-am { background:#FFF3CD; color:#856404; }
.dm-b-gr { background:#D1FAE5; color:#065F46; }
.dm-b-re { background:#FEE2E2; color:#991B1B; }
.dm-b-bl { background:#DBEAFE; color:#1D4ED8; }
.dm-b-pu { background:#EDE9FE; color:#5B21B6; }
.dm-b-gd { background:rgba(201,162,39,.15); color:#633806; }
.dm-b-nv { background:rgba(10,22,40,.08); color:#0A1628; }
.dm-b-cy { background:#CFFAFE; color:#0E7490; }
.dm-b-dot::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; display:inline-block; margin-right:2px; }
.dm-lbl { font-size:9px; color:rgba(10,22,40,.45); font-weight:700; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:4px; }
.dm-inp { width:100%; padding:8px 11px; font-size:11px; border:0.5px solid rgba(0,0,0,.14); border-radius:7px; background:#fff; color:#0A1628; outline:none; font-family:inherit; transition:border-color .15s; }
.dm-inp:focus { border-color:#C9A227; box-shadow:0 0 0 3px rgba(201,162,39,.1); }
.dm-btn { display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:7px; font-size:11px; cursor:pointer; border:0.5px solid rgba(0,0,0,.14); background:#fff; color:#0A1628; font-family:inherit; transition:all .15s; font-weight:500; }
.dm-btn:hover { background:#F6F4EE; }
.dm-btn-p { display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:7px; font-size:11px; cursor:pointer; border:none; background:#0A1628; color:#C9A227; font-family:inherit; font-weight:700; transition:background .15s; }
.dm-btn-p:hover { background:#0d1e38; }
.dm-act-row { display:flex; gap:11px; padding:10px 0; border-bottom:0.5px solid rgba(0,0,0,.07); }
.dm-act-row:last-child { border-bottom:none; }
.dm-act-icon { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; }
.dm-act-title { font-size:11px; font-weight:600; color:#0A1628; }
.dm-act-sub { font-size:9px; color:rgba(10,22,40,.55); margin-top:2px; }
.dm-act-ts { font-size:8px; color:rgba(10,22,40,.35); margin-top:3px; display:flex; align-items:center; gap:4px; }
.dm-fpill { padding:4px 11px; border-radius:20px; font-size:9px; cursor:pointer; border:0.5px solid rgba(0,0,0,.12); background:#fff; color:rgba(10,22,40,.45); font-family:inherit; font-weight:500; transition:all .12s; }
.dm-fpill:hover { color:#0A1628; }
.dm-fpill.active { background:#0A1628; color:#C9A227; border-color:#0A1628; font-weight:700; }
.dm-flash { display:none; margin-top:10px; background:#D1FAE5; border-radius:7px; padding:8px 12px; font-size:10px; color:#065F46; align-items:center; gap:6px; }
.dm-flash::before { content:'✓'; font-weight:700; }

/* ============================================================
   VISIBILITY FIX — All white-on-white text corrections
   These override earlier rules that had #ffffff text inside
   light-background (#fff / var(--surface)) components.
   ============================================================ */

/* Command Center KPI numbers */
body .metric strong,
body .leader-command-metrics article strong,
body .metric-card strong,
body .kpi-card strong { color: #0A1628 !important; }

/* My Leads avatar card — lead name */
body .crm-lead-card-meta strong { color: #0A1628 !important; }

/* Sales rank metric numbers */
body .sales-rank-metric,
body .rank-numbers .primary-rank-metric { color: #0A1628 !important; }

/* Interview calendar / workflow slots */
body .workflow-day-card strong,
body .workflow-slot strong { color: #0A1628 !important; }

/* Active tab buttons on light backgrounds */
body .workflow-tabs button.active,
body .hr-tabs button.active { color: #0A1628 !important; }

/* HR module headings */
body .hr-module-head h3 { color: #0A1628 !important; }
body .hr-policy-card strong { color: #0A1628 !important; }
body .hr-workflow strong { color: #0A1628 !important; }
body .employee-check-row strong { color: #0A1628 !important; }
body .employee-check-row { border-bottom: 1px solid rgba(10,22,40,0.07) !important; }

/* Communication center / email compose */
body .audience-preview strong { color: #0A1628 !important; }
body .audience-preview {
  background: rgba(10,22,40,0.03) !important;
}
body .email-signature-box strong { color: #0A1628 !important; }
body .email-signature-box,
body .email-signature-preview,
body .email-lead-summary { background: rgba(10,22,40,0.03) !important; }

/* Email templates */
body .template-grid h5 { color: #0A1628 !important; }
body .template-grid article { background: #ffffff !important; }

/* AI / Smart checklist */
body .ai-sales-panel .section-heading h4 { color: #0A1628 !important; }
body .ai-sales-insight strong { color: #0A1628 !important; }
body .ai-sales-insight { background: rgba(10,22,40,0.03) !important; }

/* Memo dialogs */
body .memo-ack-dialog h2 { color: #0A1628 !important; }
body .memo-ack-check { background: rgba(10,22,40,0.03) !important; }

/* Internal tickets / queue */
body .internal-ticket-card h4,
body .queue-item h4 { color: #0A1628 !important; }

/* Sales reports */
body .sales-report-group > summary {
  color: #0A1628 !important;
  background: rgba(10,22,40,0.04) !important;
}
body .sales-report-client-row { border-bottom: 1px solid rgba(10,22,40,0.07) !important; }
body .sales-report-client-row:hover { background: rgba(10,22,40,0.03) !important; }

/* Segmented controls */
body .segmented-control {
  background: rgba(10,22,40,0.06) !important;
  border-color: rgba(10,22,40,0.10) !important;
}
body .segmented-control button.active { color: #0A1628 !important; }

/* Timeline */
body .timeline-row strong { color: #0A1628 !important; }

/* EOD / activity / ranking rows inside white panels */
body .eod-status-row,
body .eod-row,
body .ranking-row,
body .list-row { background: rgba(10,22,40,0.025) !important; }
body .activity-status-row {
  background: rgba(10,22,40,0.02) !important;
  border-bottom: 1px solid rgba(10,22,40,0.07) !important;
}

/* Cancelled workflow slot */
body .workflow-slot.cancelled,
body .workflow-day-card.cancelled {
  background: rgba(10,22,40,0.04) !important;
  border-color: rgba(10,22,40,0.10) !important;
}

/* Muted panels / preview boxes */
body .muted-panel { background: rgba(10,22,40,0.03) !important; }

/* Skeleton shimmer on light background */
body .crm-skel-line,
body .crm-skel-circle,
body .crm-skel-pill {
  background: linear-gradient(90deg, rgba(10,22,40,0.05) 25%, rgba(10,22,40,0.09) 50%, rgba(10,22,40,0.05) 75%) !important;
  background-size: 800px 100% !important;
}

/* ============================================================
   WORKSPACE SCROLLING + PAGINATION BAR LAYOUT
   The app-shell is height:100vh overflow:hidden so the workspace
   must scroll internally; without this the pagination bar is
   clipped below the fold.
   ============================================================ */
.app-shell > main,
.app-shell > .workspace,
main.workspace {
  flex: 1 !important;
  min-width: 0 !important;
  overflow-y: auto !important;
  height: 100vh !important;
}

.lead-pagination-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 16px !important;
  gap: 12px !important;
}

.lead-pagination-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#leadPageSummary {
  font-size: 11px !important;
  color: rgba(10,22,40,0.45) !important;
  font-weight: 500 !important;
}

/* ── #1 Booking calendar: compact, color-coded slot boxes (green = available, red = booked) ── */
body #workflowSlotGrid.workflow-slot-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 8px !important;
}
body #workflowSlotGrid .workflow-slot {
  min-height: 0 !important;
  padding: 8px 10px !important;
  text-align: left !important;
  background: rgba(22,163,74,0.10) !important;
  border: 1px solid rgba(22,163,74,0.35) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}
body #workflowSlotGrid .workflow-slot:hover {
  border-color: #16a34a !important;
  box-shadow: 0 2px 8px rgba(22,163,74,0.18) !important;
}
body #workflowSlotGrid .workflow-slot .slot-time { color: #166534 !important; font-weight: 700 !important; }
body #workflowSlotGrid .workflow-slot strong { color: #166534 !important; }
body #workflowSlotGrid .workflow-slot span { color: #15803d !important; }
/* Booked / done / no-show / cancelled = red (not available, not selectable) */
body #workflowSlotGrid .workflow-slot.booked,
body #workflowSlotGrid .workflow-slot.done,
body #workflowSlotGrid .workflow-slot.no-show,
body #workflowSlotGrid .workflow-slot.cancelled {
  background: rgba(239,68,68,0.10) !important;
  border-color: rgba(239,68,68,0.40) !important;
  cursor: not-allowed !important;
}
body #workflowSlotGrid .workflow-slot.booked .slot-time,
body #workflowSlotGrid .workflow-slot.booked strong,
body #workflowSlotGrid .workflow-slot.booked span,
body #workflowSlotGrid .workflow-slot.done strong,
body #workflowSlotGrid .workflow-slot.done .slot-time,
body #workflowSlotGrid .workflow-slot.done span,
body #workflowSlotGrid .workflow-slot.no-show strong,
body #workflowSlotGrid .workflow-slot.cancelled strong { color: #991B1B !important; }
body #workflowSlotGrid .workflow-slot.booked .status-pill {
  background: rgba(239,68,68,0.15) !important; color: #991B1B !important;
}
/* Blocked = gray, break = amber */
body #workflowSlotGrid .workflow-slot.blocked {
  background: rgba(107,114,128,0.10) !important; border-color: rgba(107,114,128,0.35) !important; cursor: not-allowed !important;
}
body #workflowSlotGrid .workflow-slot.blocked strong,
body #workflowSlotGrid .workflow-slot.blocked span,
body #workflowSlotGrid .workflow-slot.blocked .slot-time { color: #374151 !important; }
body #workflowSlotGrid .workflow-slot.break {
  background: rgba(245,158,11,0.12) !important; border-color: rgba(245,158,11,0.4) !important; cursor: not-allowed !important;
}
body #workflowSlotGrid .workflow-slot.break strong,
body #workflowSlotGrid .workflow-slot.break span,
body #workflowSlotGrid .workflow-slot.break .slot-time { color: #92400E !important; }

/* Reduced-motion policy (2026-07-15): every current and future animation on
   this stylesheet respects the OS-level "reduce motion" accessibility
   setting -- collapses all animations/transitions to effectively instant
   rather than disabling them outright (some users rely on the completion
   *event* firing, just without the motion). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}