/* Clean Light redesign – isolated override layer for crm-test. */
:root {
  --ui-bg: #f8fafc;
  --ui-card: #ffffff;
  --ui-border: #e2e8f0;
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-blue: #2563eb;
  --ui-green: #16a34a;
  --ui-amber: #d97706;
  --ui-red: #dc2626;
}

html, body, body[data-layout="professional"] {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

/* Hard overrides are required because the legacy professional layout defines a dark sidebar late in styles.css. */
.sidebar, body[data-layout="professional"] .sidebar {
  background: #ffffff !important;
  color: var(--ui-text) !important;
  border-right: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
}

.sidebar::after, body[data-layout="professional"] .sidebar::after { display: none !important; }
.brand, .brand b, .brand span, .sidebar .brand, body[data-layout="professional"] .brand { color: var(--ui-text) !important; }
.sidebar .nav button, .sidebar .nav-group summary, body[data-layout="professional"] .sidebar .nav button, body[data-layout="professional"] .sidebar .nav-group summary {
  color: #334155 !important;
}
.sidebar .nav button:hover, .sidebar .nav button.active, .sidebar .nav-group summary:hover,
body[data-layout="professional"] .sidebar .nav button:hover, body[data-layout="professional"] .sidebar .nav button.active, body[data-layout="professional"] .sidebar .nav-group summary:hover {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: inset 3px 0 0 var(--ui-blue) !important;
}
.sidebar .nav .icon, .sidebar .nav-group .icon, .sidebar .user-card, body[data-layout="professional"] .sidebar .user-card { color: var(--ui-muted) !important; }
.sidebar .user-card { border-top: 1px solid var(--ui-border) !important; background: #ffffff !important; }

.app-shell main, body[data-layout="professional"] .app-shell main, .content, #content {
  background: var(--ui-bg) !important;
}
.topbar, body[data-layout="professional"] .topbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: none !important;
}
#content { max-width: 1440px; margin: 0 auto; padding: 28px 34px 48px; }

.panel, .metric, .project-card, .summary-strip, .filters, .calendar-toolbar, .calendar-month, .calendar-agenda,
.finance-card, .health-card, .pipeline-card, .report-card {
  background: var(--ui-card) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.panel, .project-card, .finance-card, .health-card, .pipeline-card, .report-card, .metric { padding: 20px; }
.metric { border-top: 3px solid var(--ui-blue) !important; }
.metric:nth-child(2) { border-top-color: #7c3aed !important; }
.metric:nth-child(3) { border-top-color: var(--ui-amber) !important; }
.metric:nth-child(4) { border-top-color: var(--ui-green) !important; }
.metric strong, .panel h2, .page-heading h2, .finance-card strong, .pipeline-card strong { color: var(--ui-text) !important; }
small, .page-heading p, .metric small, .project-card p, .finance-card small, .pipeline-card small { color: var(--ui-muted) !important; }
.page-heading { margin-bottom: 22px; }
.page-heading h2 { font-size: 26px; letter-spacing: -.025em; }
.metrics, .project-grid { gap: 14px; }
.status, .portfolio-pill, .report-tag { border-radius: 999px !important; font-weight: 700; }

.clean-finance-strip, .portfolio-health, .pipeline-grid, .report-grid { display: grid; gap: 14px; }
.clean-finance-strip { grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; }
.portfolio-health { grid-template-columns: repeat(3, 1fr); margin: 18px 0; }
.pipeline-grid, .report-grid { grid-template-columns: repeat(3, 1fr); margin: 18px 0; }
.finance-card small, .pipeline-card small { display: block; font-size: 11px; font-weight: 700; }
.finance-card strong { display: block; margin: 8px 0; font-size: 22px; }
.health-card { display: flex; gap: 12px; align-items: center; }
.health-ring { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800; }
.health-ring.green { background: var(--ui-green); }.health-ring.amber { background: var(--ui-amber); }.health-ring.red { background: var(--ui-red); }
.pipeline-card { min-height: 116px; border-top: 4px solid var(--ui-blue) !important; }
.pipeline-card:nth-child(2n) { border-top-color: #7c3aed !important; }.pipeline-card:nth-child(3n) { border-top-color: var(--ui-amber) !important; }
.report-card h3 { margin: 8px 0; }.report-tag { display: inline-block; padding: 5px 9px; font-size: 11px; }
.report-tag.safe { color: #15803d; background: #dcfce7; }.report-tag.personal { color: #b91c1c; background: #fee2e2; }
.table-wrap { border: 1px solid var(--ui-border); border-radius: 10px; }
table th { background: #f8fafc !important; color: var(--ui-muted) !important; } table td { border-color: var(--ui-border) !important; }
.btn.primary { background: var(--ui-blue) !important; }

@media (max-width: 850px) {
  #content { padding: 20px 16px; }
  .clean-finance-strip, .portfolio-health, .pipeline-grid, .report-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .app-shell main, body[data-layout="professional"] .app-shell main { margin-left: 0 !important; }
}