/* ============================================================
   USMLE Wise — CRM theme override (design_guide)
   Loaded after style.css — maps legacy tokens to brand palette
   ============================================================ */

:root {
  /* Brand blue */
  --primary-50: #eef0fa;
  --primary-100: #d8ddf2;
  --primary-200: #b0b9e4;
  --primary-300: #818dd0;
  --primary-400: #5260b5;
  --primary-500: #2c3386;
  --primary-600: #2c3386;
  --primary-700: #1f2461;
  --primary-800: #181c4d;
  --primary-900: #0f1233;

  /* Accent red */
  --danger-500: #e32124;
  --danger-600: #c61b1e;
  --danger-main: #e32124;
  --red: #e32124;

  --success-500: #2f8a5a;
  --success-main: #2f8a5a;
  --warning-500: #c98a14;
  --warning-main: #c98a14;
  --info-500: #3a5fc0;
  --info-main: #3a5fc0;

  --brand: var(--primary-600);
  --bg-color: #fafaf9;
  --base: #ffffff;
  --border-color: #e6e6e2;
  --text-primary-light: #20222b;
  --text-secondary-light: #4a4d5c;
  --input-stroke: #d4d4cf;
  --input-bg: #ffffff;

  --uw-blue-500: #2c3386;
  --uw-red-500: #e32124;
  --uw-bg: #fafaf9;
  --uw-surface: #ffffff;
  --uw-border: #e6e6e2;
  --uw-ink-900: #14151c;
  --uw-ink-800: #20222b;
  --uw-ink-600: #4a4d5c;
  --uw-ink-500: #6d7080;
  --uw-ink-75: #f5f5f7;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Source Serif 4", Georgia, serif;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(20, 21, 28, 0.05), 0 1px 3px rgba(20, 21, 28, 0.06);
  --shadow-md: 0 2px 4px rgba(20, 21, 28, 0.04), 0 6px 14px rgba(20, 21, 28, 0.06);
}

[data-theme="dark"] {
  --bg-color: #12131a;
  --base: #1b1c27;
  --border-color: rgba(255, 255, 255, 0.08);
  --text-primary-light: #ecedf5;
  --text-secondary-light: #acafc0;
  --primary-600: #5260b5;
  --brand: var(--primary-600);
}

body {
  font-family: var(--font-sans) !important;
  background: var(--uw-bg) !important;
  color: var(--uw-ink-800);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section__title,
.dash__greeting h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--uw-surface) !important;
  border-right: 1px solid var(--uw-border) !important;
}

.sidebar-menu li a {
  color: var(--uw-ink-600) !important;
  border-radius: var(--r-md);
  font-size: 13.5px;
}

.sidebar-menu li a:hover {
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
}

.sidebar-menu li.active > a,
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a,
.sidebar-menu li > a.active-page {
  background: var(--primary-600) !important;
  color: #fff !important;
}

.sidebar-menu li.active > a:hover,
.sidebar-menu li.dropdown.open > a:hover,
.sidebar-menu li.dropdown.dropdown-open > a:hover,
.sidebar-menu li > a.active-page:hover {
  color: #fff !important;
}

.sidebar-menu li.active > a .menu-icon,
.sidebar-menu li.active > a iconify-icon,
.sidebar-menu li.dropdown.open > a .menu-icon,
.sidebar-menu li.dropdown.open > a iconify-icon,
.sidebar-menu li.dropdown.dropdown-open > a .menu-icon,
.sidebar-menu li.dropdown.dropdown-open > a iconify-icon,
.sidebar-menu li > a.active-page .menu-icon,
.sidebar-menu li > a.active-page iconify-icon {
  color: #fff !important;
}

.sidebar-menu li.dropdown.open > a::after,
.sidebar-menu li.dropdown.dropdown-open > a::after {
  color: #fff !important;
}

.sidebar-menu-group-title {
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uw-ink-500) !important;
}

.sidebar-logo .logo-text span:first-child {
  color: var(--uw-blue-500) !important;
}

.sidebar-logo .logo-text span:last-child {
  color: var(--uw-red-500) !important;
  font-style: italic;
  font-family: var(--font-display);
}

/* ---------- Navbar ---------- */
.navbar-header {
  background: var(--uw-surface) !important;
  border-bottom: 1px solid var(--uw-border);
  box-shadow: var(--shadow-sm);
}

/* ---------- Cards / KPI ---------- */
.card,
.kpi-card,
.uw-card {
  background: var(--uw-surface);
  border: 1px solid var(--uw-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.card-header {
  background: var(--uw-ink-75);
  border-bottom: 1px solid var(--uw-border);
  font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn-primary,
.bg-primary-600,
button.bg-primary-600 {
  background-color: var(--uw-red-500) !important;
  border-color: var(--uw-red-500) !important;
}

.btn-primary:hover {
  background-color: #c61b1e !important;
  border-color: #c61b1e !important;
}

.btn-outline-primary {
  color: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
}

.btn-outline-primary:hover {
  background: var(--primary-50) !important;
}

.text-primary-600,
.text-primary {
  color: var(--primary-600) !important;
}

.bg-primary-50 {
  background: var(--primary-50) !important;
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
.input {
  border-radius: var(--r-md);
  border-color: var(--input-stroke);
  font-family: var(--font-sans);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-100);
}

/* ---------- Tables ---------- */
.table th {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uw-ink-600);
  background: #f4f4f3;
}

/* ---------- Badges / tags ---------- */
.badge,
.uw-badge {
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
}

.badge.bg-primary-600,
.badge-primary {
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
}

/* ---------- Alerts ---------- */
.alert-info {
  background: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-800);
}

.alert-success {
  background: #e6f5ee;
  border-color: #8ecfb0;
  color: #1d5e3c;
}

.alert-danger {
  background: #fdecec;
  border-color: #f4a5a6;
  color: #a01517;
}

/* ---------- Dashboard body ---------- */
.dashboard-main-body {
  background: var(--uw-bg);
}

.breadcrumb {
  font-size: 13px;
}

/* ---------- WhatsApp page ---------- */
.wa-sidebar,
.whatsapp-card {
  border-radius: var(--r-lg);
  border-color: var(--uw-border);
}

/* ---------- Management / settings cards ---------- */
.management-card,
.uw-mgmt-card {
  border: 1px solid var(--uw-border);
  border-radius: var(--r-lg);
  background: var(--uw-surface);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.management-card h5,
.uw-mgmt-card h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--uw-ink-900);
  margin-bottom: 1rem;
}

/* ---------- Drawflow workflow editor ---------- */
.drawflow .drawflow-node {
  border-radius: var(--r-md);
}

.drawflow .drawflow-node.selected {
  border-color: var(--primary-600);
}

/* ---------- Auth pages ---------- */
.auth-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--uw-border);
  box-shadow: var(--shadow-md);
}

/* ---------- Footer ---------- */
.d-footer,
footer {
  color: var(--uw-ink-500);
  font-size: 13px;
}

/* ---------- Page titles (breadcrumb area) ---------- */
.page-title h4,
.breadcrumb-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--uw-ink-900);
}

/* ---------- CRM page cards (management, settings, dashboards) ---------- */
.glass-card,
.card.radius-12 {
  border: 1px solid var(--uw-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm);
  background: var(--uw-surface) !important;
}

.kpi-card .card-body h4,
.kpi-card h3 {
  font-family: var(--font-display);
  color: var(--uw-ink-900);
}