/* ─── Slate/Indigo theme layer ────────────────────────────────────────────
   Project-wide restyle matching the employee profile design (approved
   employee_profile_ui.jsx mockup): Inter font, slate neutrals, indigo
   primary, emerald/amber/rose accents. Loaded AFTER app.css in
   portal/base.html and portal/login.html so it wins the cascade — the
   --cdhs-* remap below repaints every class that reads those variables,
   and the component overrides cover the hardcoded navy/orange leftovers.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Palette tokens (same values as invoice/css/employee_profile.css). */
  --ui-slate-50: #f8fafc;  --ui-slate-100: #f1f5f9; --ui-slate-200: #e2e8f0;
  --ui-slate-300: #cbd5e1; --ui-slate-400: #94a3b8; --ui-slate-500: #64748b;
  --ui-slate-600: #475569; --ui-slate-700: #334155; --ui-slate-800: #1e293b;
  --ui-slate-900: #0f172a;
  --ui-indigo-50: #eef2ff; --ui-indigo-100: #e0e7ff; --ui-indigo-400: #818cf8;
  --ui-indigo-600: #4f46e5; --ui-indigo-700: #4338ca;
  --ui-emerald-50: #ecfdf5; --ui-emerald-500: #10b981; --ui-emerald-600: #059669; --ui-emerald-700: #047857;
  --ui-amber-50: #fffbeb; --ui-amber-100: #fef3c7; --ui-amber-500: #f59e0b; --ui-amber-700: #b45309;
  --ui-rose-50: #fff1f2;  --ui-rose-100: #ffe4e6;  --ui-rose-500: #f43f5e;  --ui-rose-600: #e11d48;

  /* Remap the legacy CDHS variables — repaints app.css in one stroke. */
  --cdhs-navy: var(--ui-slate-900);
  --cdhs-navy-dark: #0b1120;
  --cdhs-navy-light: var(--ui-slate-800);
  --cdhs-orange: var(--ui-indigo-600);
  --cdhs-orange-dark: var(--ui-indigo-700);
  --cdhs-bg: var(--ui-slate-50);
  --cdhs-border: var(--ui-slate-200);
  --cdhs-text: var(--ui-slate-900);
  --cdhs-muted: var(--ui-slate-500);
}

/* ─── Typography ── */

body.cdhs-app, body.cdhs-login-bg {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cdhs-content h1, .cdhs-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ui-slate-900);
}

.cdhs-content h2 { font-weight: 600; color: var(--ui-slate-900); }
.cdhs-content .text-muted { color: var(--ui-slate-400) !important; }

/* ─── Sidebar ── */

.cdhs-sidebar { background: var(--ui-slate-900); color: var(--ui-slate-300); }
.cdhs-sidebar-brand { border-bottom-color: rgba(255,255,255,0.08); }
.cdhs-sidebar-section { color: var(--ui-slate-500); }
.cdhs-sidebar-link { color: var(--ui-slate-300); }
.cdhs-sidebar-link:hover { background: var(--ui-slate-800); color: #fff; }
.cdhs-sidebar-link.active {
  background: rgba(79, 70, 229, 0.18);      /* indigo-600 wash */
  border-left-color: var(--ui-indigo-400);
  color: #fff;
}
.cdhs-sidebar-signout { color: var(--ui-slate-400); }
.cdhs-sidebar-signout:hover { color: var(--ui-indigo-400); }
.cdhs-sidebar-user-name { color: #fff; }
.cdhs-sidebar-powered { color: var(--ui-amber-500) !important; }

/* ─── Topbar / breadcrumb ── */

.cdhs-breadcrumb, .cdhs-breadcrumb a { color: var(--ui-slate-400); }
.cdhs-breadcrumb a:hover { color: var(--ui-slate-700); }
.cdhs-breadcrumb strong { color: var(--ui-slate-700); }

/* ─── Buttons ── */

.btn { border-radius: 0.5rem; }
.btn:not(.btn-sm):not(.btn-link) { padding: 0.5rem 0.875rem; font-weight: 500; font-size: 0.875rem; }
.btn-sm { border-radius: 0.375rem; font-weight: 500; }

.btn-primary, .cdhs-btn-signin {
  background: var(--ui-indigo-600);
  border-color: var(--ui-indigo-600);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .cdhs-btn-signin:hover {
  background: var(--ui-indigo-700) !important;
  border-color: var(--ui-indigo-700) !important;
}
.btn-outline-primary { color: var(--ui-indigo-600); border-color: var(--ui-indigo-100); }
.btn-outline-primary:hover {
  background: var(--ui-indigo-50); border-color: var(--ui-indigo-100);
  color: var(--ui-indigo-700);
}

.btn-success {
  background: var(--ui-emerald-600); border-color: var(--ui-emerald-600); color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background: var(--ui-emerald-700) !important; border-color: var(--ui-emerald-700) !important;
}

.btn-danger { background: var(--ui-rose-500); border-color: var(--ui-rose-500); }
.btn-danger:hover, .btn-danger:active { background: var(--ui-rose-600) !important; border-color: var(--ui-rose-600) !important; }
.btn-outline-danger { color: var(--ui-rose-500); border-color: var(--ui-rose-100); }
.btn-outline-danger:hover {
  background: var(--ui-rose-50); border-color: var(--ui-rose-100); color: var(--ui-rose-600);
}

.btn-outline-secondary { color: var(--ui-slate-600); border-color: var(--ui-slate-200); background: #fff; }
.btn-outline-secondary:hover, .btn-outline-secondary:active {
  background: var(--ui-slate-50) !important; border-color: var(--ui-slate-300) !important;
  color: var(--ui-slate-700) !important;
}

.btn-warning { background: var(--ui-amber-500); border-color: var(--ui-amber-500); color: #fff; }
.btn-warning:hover { background: var(--ui-amber-700); border-color: var(--ui-amber-700); color: #fff; }

/* ─── Cards ── */

.card {
  border: 1px solid var(--ui-slate-200);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.card .card-header {
  background: #fff;
  border-bottom: 1px solid var(--ui-slate-100);
  border-radius: 1rem 1rem 0 0 !important;
  font-weight: 600;
  color: var(--ui-slate-700);
}
.card .card-footer { background: #fff; border-top: 1px solid var(--ui-slate-100); border-radius: 0 0 1rem 1rem !important; }

.cdhs-kpi-card { border-radius: 1rem; border-left-width: 4px; }
.cdhs-kpi-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
.cdhs-kpi-accent-primary { border-left-color: var(--ui-indigo-600); }
.cdhs-kpi-accent-info { border-left-color: var(--ui-indigo-400); }
.cdhs-kpi-accent-success { border-left-color: var(--ui-emerald-500); }
.cdhs-kpi-accent-warning { border-left-color: var(--ui-amber-500); }
.cdhs-kpi-accent-danger { border-left-color: var(--ui-rose-500); }
.cdhs-kpi-accent-secondary { border-left-color: var(--ui-slate-400); }
.cdhs-kpi-label { color: var(--ui-slate-400); font-weight: 500; }
.cdhs-kpi-value { color: var(--ui-slate-900); }
.cdhs-kpi-link { color: var(--ui-indigo-600); }
.cdhs-kpi-link:hover { color: var(--ui-indigo-700); }

.cdhs-section-heading { color: var(--ui-slate-700); border-bottom-color: var(--ui-indigo-600); }

/* ─── Tables ── */

.table {
  --bs-table-hover-bg: var(--ui-slate-50);
  border-color: var(--ui-slate-100);
}
.table thead th, .cdhs-table thead th {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ui-slate-400);
  background: var(--ui-slate-50);
  border-bottom: 1px solid var(--ui-slate-200);
}
.table tbody td { border-color: var(--ui-slate-100); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--ui-slate-50); }
.table a { color: var(--ui-indigo-600); text-decoration: none; font-weight: 500; }
.table a:hover { color: var(--ui-indigo-700); text-decoration: underline; }
.cdhs-link-orange { color: var(--ui-indigo-600); }
.cdhs-link-orange:hover { color: var(--ui-indigo-700); }

/* ─── Forms ── */

.form-control, .form-select {
  border-radius: 0.5rem;
  border-color: var(--ui-slate-200);
  color: var(--ui-slate-700);
}
.form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color: var(--ui-slate-300); }
.form-control:focus, .form-select:focus {
  border-color: var(--ui-indigo-400);
  box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.12);
}
.form-control::placeholder { color: var(--ui-slate-300); }
.form-label { color: var(--ui-slate-600); font-weight: 500; }
.form-check-input:checked { background-color: var(--ui-indigo-600); border-color: var(--ui-indigo-600); }
.form-check-input:focus { border-color: var(--ui-indigo-400); box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.12); }
.input-group-text { border-radius: 0.5rem 0 0 0.5rem; border-color: var(--ui-slate-200); background: var(--ui-slate-50); color: var(--ui-slate-400); }

/* ─── Badges / status ── */

.badge.bg-success-subtle { background: var(--ui-emerald-50) !important; color: var(--ui-emerald-700) !important; }
.badge.bg-warning-subtle { background: var(--ui-amber-50) !important; color: var(--ui-amber-700) !important; }
.badge.bg-warning.text-dark { background: var(--ui-amber-100) !important; color: var(--ui-amber-700) !important; }
.badge.bg-secondary-subtle { background: var(--ui-slate-100) !important; color: var(--ui-slate-600) !important; }
.badge.bg-light { background: var(--ui-slate-100) !important; color: var(--ui-slate-500) !important; border-color: var(--ui-slate-200) !important; }
.badge { font-weight: 600; border-radius: 999px; }

.cdhs-role-badge { background: var(--ui-indigo-50); color: var(--ui-indigo-700); border-radius: 999px; }
.cdhs-role-badge.is-super { background: var(--ui-slate-100); color: var(--ui-slate-600); }
.cdhs-status-badge { border-radius: 999px; }
.cdhs-status-active { background: var(--ui-emerald-50); color: var(--ui-emerald-700); }
.cdhs-status-inactive { background: var(--ui-slate-100); color: var(--ui-slate-500); }

.cdhs-id-badge {
  background: var(--ui-indigo-50);
  color: var(--ui-indigo-700);
  border-color: var(--ui-indigo-100);
  border-radius: 999px;
}

.cdhs-info-note { background: var(--ui-amber-50); border-color: var(--ui-amber-100); color: var(--ui-amber-700); border-radius: 0.75rem; }
.cdhs-info-note i { color: var(--ui-amber-500); }
.cdhs-info-note strong { color: var(--ui-slate-700); }

/* ─── Detail grids ── */

.cdhs-detail-label { color: var(--ui-slate-400); font-weight: 500; }
.cdhs-detail-row { border-bottom-color: var(--ui-slate-100); }

/* ─── Modals / alerts / pagination / misc ── */

.modal-content { border: 0; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25); }
.modal-header { border-bottom-color: var(--ui-slate-100); }
.modal-footer { border-top-color: var(--ui-slate-100); }

.alert { border-radius: 0.75rem; }
.alert-success { background: var(--ui-emerald-50); border-color: #a7f3d0; color: var(--ui-emerald-700); }
.alert-danger { background: var(--ui-rose-50); border-color: var(--ui-rose-100); color: var(--ui-rose-600); }
.alert-warning { background: var(--ui-amber-50); border-color: var(--ui-amber-100); color: var(--ui-amber-700); }
.alert-info { background: var(--ui-indigo-50); border-color: var(--ui-indigo-100); color: var(--ui-indigo-700); }

.page-link { color: var(--ui-indigo-600); border-color: var(--ui-slate-200); }
.page-item.active .page-link { background: var(--ui-indigo-600); border-color: var(--ui-indigo-600); }

.dropdown-menu { border-radius: 0.75rem; border-color: var(--ui-slate-200); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); }
.dropdown-item:hover { background: var(--ui-slate-50); }
.dropdown-item:active { background: var(--ui-indigo-600); }

.spinner-border { color: var(--ui-indigo-600); }

/* ─── Login page ── */

body.cdhs-login-bg { background: linear-gradient(135deg, var(--ui-slate-900) 0%, #1e1b4b 100%); }
.cdhs-login-card { border-radius: 1rem; }
.cdhs-login-logo { background: var(--ui-indigo-600); }
.cdhs-login-name { color: var(--ui-slate-900); }