/* ========================================================================== */
/* TalentBridge HR CRM - Enterprise Design Engine                           */
/* Dual-Theme System: Pristine Enterprise (Light) & Obsidian Slate (Dark)    */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. Design Tokens & CSS Custom Properties                                   */
/* -------------------------------------------------------------------------- */
:root {
  --font-sans: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Light Theme Tokens */
  --bg-canvas: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-subtle: #f1f5f9;
  --bg-hover: #f8fafc;
  --bg-active: #e2e8f0;

  --border-subtle: #e2e8f0;
  --border-default: #cbd5e1;
  --border-strong: #94a3b8;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  --brand-primary: #059669;
  --brand-primary-hover: #047857;
  --brand-subtle: rgba(16, 185, 129, 0.12);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-elevated: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
}

html.dark {
  /* Dark Theme Tokens */
  --bg-canvas: #0b0f19;
  --bg-surface: #111827;
  --bg-surface-elevated: #1a233a;
  --bg-subtle: #1e293b;
  --bg-hover: #1f293d;
  --bg-active: #27354f;

  --border-subtle: #1e293b;
  --border-default: #334155;
  --border-strong: #475569;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;

  --brand-primary: #10b981;
  --brand-primary-hover: #059669;
  --brand-subtle: rgba(16, 185, 129, 0.2);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
}

/* -------------------------------------------------------------------------- */
/* 2. Global Base & Typography                                                */
/* -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  font-weight: 700;
}

.font-mono {
  font-family: var(--font-mono) !important;
  letter-spacing: -0.01em;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #27354f;
  border-radius: 9999px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #3b4d6e;
}

/* -------------------------------------------------------------------------- */
/* 3. Header Theme Segmented Control & Navigation Bar                         */
/* -------------------------------------------------------------------------- */
#theme-segmented-control {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html:not(.dark) #theme-segmented-control {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html.dark #theme-segmented-control {
  background: #111827;
  border: 1px solid #334155;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Light option button in segmented control */
html:not(.dark) #theme-opt-light {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
html:not(.dark) #theme-opt-dark {
  background: transparent;
  color: #64748b;
}

html.dark #theme-opt-dark {
  background: #1e293b;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
html.dark #theme-opt-light {
  background: transparent;
  color: #94a3b8;
}

/* -------------------------------------------------------------------------- */
/* 4. Left Sidebar Navigation Component                                       */
/* -------------------------------------------------------------------------- */
.nav-tab {
  display: flex;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 0.55rem 0.75rem !important;
  border-radius: 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  outline: none !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  user-select: none !important;
}

.nav-tab.hidden,
.nav-category.hidden {
  display: none !important;
}

.nav-category {
  display: flex;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.15rem 0.75rem 0.4rem 0.75rem !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.nav-category:first-of-type {
  padding-top: 0.35rem !important;
}

.nav-icon-box {
  width: 2.15rem !important;
  height: 2.15rem !important;
  border-radius: 0.625rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-badge {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 0.375rem !important;
  font-family: var(--font-mono) !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  flex-shrink: 0 !important;
}

/* Active Navigation Tab */
.nav-tab.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 6px 18px -2px rgba(16, 185, 129, 0.38) !important;
  font-weight: 600 !important;
  transform: translateX(3px) !important;
}

.nav-tab.active .nav-icon-box {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

.nav-tab.active .nav-icon-box i {
  color: #ffffff !important;
}

.nav-tab.active .nav-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Sub-Navigation Buttons */
.wa-subnav-btn,
.fu-filter-btn {
  padding: 0.4rem 0.9rem !important;
  border-radius: 0.625rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
}

/* -------------------------------------------------------------------------- */
/* 5. LIGHT THEME RULES (html:not(.dark))                                     */
/* -------------------------------------------------------------------------- */
html:not(.dark) {
  color-scheme: light;
}

html:not(.dark) body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html:not(.dark) .flex-1.bg-slate-900,
html:not(.dark) main {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Sidebar Shell */
html:not(.dark) #app-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) #sidebar-brand-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html:not(.dark) #sidebar-brand-title {
  color: #0f172a !important;
}

html:not(.dark) #sidebar-brand-sub {
  color: #64748b !important;
}

html:not(.dark) .nav-category {
  color: #64748b !important;
}
html:not(.dark) .nav-category i {
  color: #94a3b8 !important;
}

/* Inactive Tab in Light Mode */
html:not(.dark) .nav-tab:not(.active) {
  color: #334155 !important;
  background: transparent !important;
  border-color: transparent !important;
}

html:not(.dark) .nav-tab:not(.active) .nav-icon-box {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) .nav-tab:not(.active) .nav-icon-box i.text-emerald-400 { color: #059669 !important; }
html:not(.dark) .nav-tab:not(.active) .nav-icon-box i.text-blue-400 { color: #2563eb !important; }
html:not(.dark) .nav-tab:not(.active) .nav-icon-box i.text-amber-400 { color: #d97706 !important; }
html:not(.dark) .nav-tab:not(.active) .nav-icon-box i.text-teal-400 { color: #0d9488 !important; }
html:not(.dark) .nav-tab:not(.active) .nav-icon-box i.text-purple-400 { color: #7c3aed !important; }
html:not(.dark) .nav-tab:not(.active) .nav-icon-box i.text-cyan-400 { color: #0891b2 !important; }
html:not(.dark) .nav-tab:not(.active) .nav-icon-box i.text-indigo-400 { color: #4f46e5 !important; }
html:not(.dark) .nav-tab:not(.active) .nav-icon-box i.text-rose-400 { color: #e11d48 !important; }

html:not(.dark) .nav-tab:not(.active) .nav-badge {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

html:not(.dark) .nav-tab:not(.active):hover {
  color: #0f172a !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  transform: translateX(3px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) .nav-tab:not(.active):hover .nav-icon-box {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transform: scale(1.04) !important;
}

/* Sidebar Footer & User Profile */
html:not(.dark) #sidebar-footer-container {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

html:not(.dark) #sync-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) #sync-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

html:not(.dark) #sidebar-user-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) #sidebar-user-name {
  color: #0f172a !important;
}

html:not(.dark) #sidebar-user-avatar {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #059669 !important;
}

html:not(.dark) #sidebar-change-pwd-btn,
html:not(.dark) #sidebar-theme-btn,
html:not(.dark) #sidebar-logout-btn {
  color: #64748b !important;
}

html:not(.dark) #sidebar-theme-btn:hover {
  background: #f1f5f9 !important;
  color: #d97706 !important;
}

html:not(.dark) #sidebar-logout-btn:hover {
  background: rgba(244, 63, 94, 0.1) !important;
  color: #e11d48 !important;
}

/* Top Header Bar */
html:not(.dark) header#top-header {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: blur(12px) !important;
}

html:not(.dark) #mobile-sidebar-toggle {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

html:not(.dark) #mobile-sidebar-toggle:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html:not(.dark) #page-current-title,
html:not(.dark) #header-user-name {
  color: #0f172a !important;
}

html:not(.dark) #page-current-subtitle {
  color: #64748b !important;
}

html:not(.dark) #header-website-btn {
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  color: #2563eb !important;
}

html:not(.dark) #header-website-btn:hover {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  color: #1d4ed8 !important;
}

html:not(.dark) #header-db-pill {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) #header-user-pill {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Light Theme Card & Surface System */
html:not(.dark) div[class*="bg-slate-950"],
html:not(.dark) div[class*="bg-slate-900"],
html:not(.dark) section[class*="bg-slate-950"],
html:not(.dark) section[class*="bg-slate-900"],
html:not(.dark) aside[class*="bg-slate-900"] {
  background-color: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

html:not(.dark) [class*="bg-slate-950/60"],
html:not(.dark) [class*="bg-slate-950/40"],
html:not(.dark) [class*="bg-slate-900/60"],
html:not(.dark) [class*="bg-slate-900/40"],
html:not(.dark) [class*="bg-slate-950/70"],
html:not(.dark) [class*="bg-slate-900/70"],
html:not(.dark) [class*="bg-slate-900/80"],
html:not(.dark) [class*="bg-slate-950/80"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: var(--shadow-sm);
}

/* Inner Subtle Panels / Toolbars / Filters */
html:not(.dark) .inner-panel,
html:not(.dark) .filter-bar,
html:not(.dark) [class*="p-4 rounded-xl bg-slate-950"],
html:not(.dark) [class*="p-4 rounded-xl bg-slate-900"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Hover States on Cards */
html:not(.dark) div[class*="hover:border-slate-700"]:hover,
html:not(.dark) div[class*="hover:border-slate-600"]:hover {
  border-color: #cbd5e1 !important;
  box-shadow: var(--shadow-md) !important;
}

/* Text Contrast Protection in Light Mode */
html:not(.dark) .text-white:not(button):not(button *):not(a.bg-emerald-600 *):not(a.bg-blue-600 *):not(a.bg-cyan-600 *):not(.nav-tab.active *):not([class*="bg-emerald-600"] *):not([class*="bg-blue-600"] *):not([class*="bg-rose-600"] *):not([class*="bg-purple-600"] *):not([class*="bg-teal-600"] *):not([class*="bg-cyan-600"] *):not([class*="bg-amber-600"] *):not(.badge-status-interested):not(.badge-active):not(.nav-tab.active):not(.chat-bubble-outgoing):not(.chat-bubble-outgoing *) {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-300 {
  color: #1e293b !important;
}

html:not(.dark) .text-slate-400 {
  color: #475569 !important;
}

html:not(.dark) .text-slate-500 {
  color: #64748b !important;
}

/* High-Contrast Colored Text in Light Mode (No washed-out 400 tints) */
html:not(.dark) .text-emerald-400 { color: #047857 !important; }
html:not(.dark) .text-blue-400    { color: #1d4ed8 !important; }
html:not(.dark) .text-amber-400   { color: #b45309 !important; }
html:not(.dark) .text-purple-400  { color: #6d28d9 !important; }
html:not(.dark) .text-cyan-400    { color: #0e7490 !important; }
html:not(.dark) .text-teal-400    { color: #0f766e !important; }
html:not(.dark) .text-rose-400    { color: #be123c !important; }
html:not(.dark) .text-indigo-400  { color: #4338ca !important; }

/* Form Controls in Light Mode */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}

html:not(.dark) select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Table Architecture in Light Mode */
html:not(.dark) table {
  background-color: #ffffff !important;
}

html:not(.dark) thead tr {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html:not(.dark) thead th {
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.05em !important;
}

html:not(.dark) tbody tr {
  background-color: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #1e293b !important;
  transition: background-color 0.15s ease !important;
}

html:not(.dark) tbody tr:hover {
  background-color: #f8fafc !important;
}

html:not(.dark) tbody td {
  color: #334155 !important;
}

html:not(.dark) tbody td strong {
  color: #0f172a !important;
}

/* Universal Slate Normalization in Light Mode (No dark blocks on spans, buttons, pills, etc.) */
html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/90,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/70,
html:not(.dark) .bg-slate-800\/60,
html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-700,
html:not(.dark) .bg-slate-700\/80,
html:not(.dark) .btn-secondary {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) .bg-slate-800:hover,
html:not(.dark) .bg-slate-700:hover,
html:not(.dark) .btn-secondary:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

html:not(.dark) .bg-slate-800 i,
html:not(.dark) .bg-slate-800 svg,
html:not(.dark) .bg-slate-700 i,
html:not(.dark) .bg-slate-700 svg {
  color: #334155 !important;
}

/* Modals in Light Mode */
html:not(.dark) .modal-backdrop,
html:not(.dark) [id$="-modal"] > .bg-black\/75,
html:not(.dark) [id$="-modal"] > .bg-black\/80,
html:not(.dark) [id$="-modal"] > .bg-black\/60 {
  background-color: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(8px) !important;
}

html:not(.dark) [id$="-modal"] .bg-slate-900,
html:not(.dark) [id$="-modal"] .bg-slate-900\/95 {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: var(--shadow-elevated) !important;
}

html:not(.dark) [id$="-modal"] .bg-slate-950,
html:not(.dark) [id$="-modal"] [class*="bg-slate-950/"],
html:not(.dark) [id$="-modal"] [class*="bg-slate-900/"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* -------------------------------------------------------------------------- */
/* 6. DARK THEME BASE RULES (html.dark)                                       */
/* -------------------------------------------------------------------------- */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #0b0f19 !important;
  color: #f8fafc !important;
}

html.dark .flex-1.bg-slate-900,
html.dark main {
  background-color: #0b0f19 !important;
  color: #f8fafc !important;
}

/* Sidebar Shell in Dark Mode */
html.dark #app-sidebar {
  background: #0d1322 !important;
  border-right: 1px solid rgba(30, 41, 59, 0.8) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45) !important;
}

html.dark #sidebar-brand-header {
  background: rgba(15, 23, 42, 0.45) !important;
  border-bottom: 1px solid rgba(30, 41, 59, 0.8) !important;
}

html.dark #sidebar-brand-title {
  color: #ffffff !important;
}

html.dark #sidebar-brand-sub {
  color: #94a3b8 !important;
}

html.dark .nav-category {
  color: #64748b !important;
}
html.dark .nav-category i {
  color: #475569 !important;
}

/* Inactive Tab in Dark Mode */
html.dark .nav-tab:not(.active) {
  color: #94a3b8 !important;
  background: transparent !important;
  border-color: transparent !important;
}

html.dark .nav-tab:not(.active) .nav-icon-box {
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(51, 65, 85, 0.4) !important;
}

html.dark .nav-tab:not(.active) .nav-badge {
  background: rgba(30, 41, 59, 0.85) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
}

/* Hover Tab in Dark Mode */
html.dark .nav-tab:not(.active):hover {
  color: #f8fafc !important;
  background: rgba(30, 41, 59, 0.45) !important;
  border-color: rgba(51, 65, 85, 0.45) !important;
  transform: translateX(3px) !important;
}

html.dark .nav-tab:not(.active):hover .nav-icon-box {
  background: rgba(51, 65, 85, 0.75) !important;
  border-color: rgba(71, 85, 105, 0.6) !important;
  transform: scale(1.04) !important;
}

/* Sidebar Footer & User Profile in Dark Mode */
html.dark #sidebar-footer-container {
  background: rgba(15, 23, 42, 0.5) !important;
  border-top: 1px solid rgba(30, 41, 59, 0.8) !important;
}

html.dark #sync-btn {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
  color: #cbd5e1 !important;
}

html.dark #sync-btn:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #ffffff !important;
  border-color: rgba(71, 85, 105, 0.7) !important;
}

html.dark #sidebar-user-card {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(30, 41, 59, 0.8) !important;
}

html.dark #sidebar-user-name {
  color: #ffffff !important;
}

html.dark #sidebar-user-avatar {
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

html.dark #sidebar-change-pwd-btn,
html.dark #sidebar-theme-btn,
html.dark #sidebar-logout-btn {
  color: #94a3b8 !important;
}

html.dark #sidebar-theme-btn:hover {
  background: rgba(51, 65, 85, 0.6) !important;
  color: #fbbf24 !important;
}

html.dark #sidebar-logout-btn:hover {
  background: rgba(244, 63, 94, 0.15) !important;
  color: #fb7185 !important;
}

/* Top Header in Dark Mode */
html.dark header#top-header {
  background: rgba(13, 19, 34, 0.95) !important;
  border-bottom: 1px solid rgba(30, 41, 59, 0.8) !important;
  backdrop-filter: blur(12px) !important;
}

html.dark #mobile-sidebar-toggle {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
  color: #cbd5e1 !important;
}

html.dark #mobile-sidebar-toggle:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #ffffff !important;
}

html.dark #page-current-title,
html.dark #header-user-name {
  color: #ffffff !important;
}

html.dark #page-current-subtitle {
  color: #94a3b8 !important;
}

html.dark #header-db-pill {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
  color: #94a3b8 !important;
}

html.dark #header-user-pill {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
  color: #ffffff !important;
}

/* Dark Mode Cards & Elevated Surfaces */
html.dark div[class*="bg-slate-950"],
html.dark section[class*="bg-slate-950"] {
  background-color: #111827 !important;
  border-color: rgba(51, 65, 85, 0.6) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.45) !important;
}

html.dark [class*="bg-slate-950/60"],
html.dark [class*="bg-slate-950/40"],
html.dark [class*="bg-slate-900/60"],
html.dark [class*="bg-slate-900/40"] {
  background-color: #111827 !important;
  border-color: rgba(51, 65, 85, 0.6) !important;
}

html.dark [class*="hover:border-slate-700"]:hover {
  border-color: rgba(71, 85, 105, 0.8) !important;
}

/* Modals in Dark Mode */
html.dark [id$="-modal"] > .bg-black\/75,
html.dark [id$="-modal"] > .bg-black\/80,
html.dark [id$="-modal"] > .bg-black\/60 {
  background-color: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(10px) !important;
}

html.dark [id$="-modal"] .bg-slate-900,
html.dark [id$="-modal"] .bg-slate-900\/95 {
  background-color: #111827 !important;
  border: 1px solid rgba(51, 65, 85, 0.7) !important;
  box-shadow: var(--shadow-elevated) !important;
}

html.dark [id$="-modal"] .bg-slate-950,
html.dark [id$="-modal"] [class*="bg-slate-950/"] {
  background-color: #0f172a !important;
  border-color: rgba(51, 65, 85, 0.5) !important;
}

/* -------------------------------------------------------------------------- */
/* 7. SACRED COLOR BUTTON OVERRIDE (Buttons ALWAYS have crisp white text)       */
/* -------------------------------------------------------------------------- */
button.bg-emerald-600,
button.bg-emerald-500,
button.bg-blue-600,
button.bg-blue-500,
button.bg-indigo-600,
button.bg-purple-600,
button.bg-rose-600,
button.bg-rose-500,
button.bg-teal-600,
button.bg-cyan-600,
button.bg-amber-600,
a.bg-emerald-600,
a.bg-blue-600,
a.bg-cyan-600,
.btn-primary,
.nav-tab.active {
  color: #ffffff !important;
}

button.bg-emerald-600 *,
button.bg-emerald-500 *,
button.bg-blue-600 *,
button.bg-blue-500 *,
button.bg-indigo-600 *,
button.bg-purple-600 *,
button.bg-rose-600 *,
button.bg-rose-500 *,
button.bg-teal-600 *,
button.bg-cyan-600 *,
a.bg-emerald-600 *,
a.bg-blue-600 * {
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* 8. BADGE DESIGN TOKEN SYSTEM (MCA, GST, Candidate, Stages, Priorities)     */
/* -------------------------------------------------------------------------- */
.lead-status-badge,
.lead-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 0.5rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: all 0.15s ease;
}

/* Status: Interested / Placed / Active */
.badge-status-interested,
.badge-active {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
html.dark .badge-status-interested,
html.dark .badge-active {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

/* Status: Contacted / MCA / In Progress */
.badge-status-contacted {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
}
html.dark .badge-status-contacted {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

/* Status: Follow Up / Warning / GST */
.badge-status-followup {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
}
html.dark .badge-status-followup {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

/* Status: Converted / Completed */
.badge-status-converted {
  background: rgba(124, 58, 237, 0.1) !important;
  color: #6d28d9 !important;
  border: 1px solid rgba(124, 58, 237, 0.25) !important;
}
html.dark .badge-status-converted {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
}

/* Status: Disqualified / Rejected / Left */
.badge-status-disqualified,
.badge-danger {
  background: rgba(225, 29, 72, 0.1) !important;
  color: #be123c !important;
  border: 1px solid rgba(225, 29, 72, 0.25) !important;
}
html.dark .badge-status-disqualified,
html.dark .badge-danger {
  background: rgba(244, 63, 94, 0.2) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(244, 63, 94, 0.4) !important;
}

/* Priority Badges */
.badge-priority-high {
  background: rgba(225, 29, 72, 0.1) !important;
  color: #be123c !important;
  border: 1px solid rgba(225, 29, 72, 0.25) !important;
  font-weight: 700 !important;
}
html.dark .badge-priority-high {
  background: rgba(244, 63, 94, 0.2) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(244, 63, 94, 0.4) !important;
}

.badge-priority-medium {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.25) !important;
  font-weight: 600 !important;
}
html.dark .badge-priority-medium {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.badge-priority-low {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}
html.dark .badge-priority-low {
  background: rgba(51, 65, 85, 0.4) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(71, 85, 105, 0.4) !important;
}

/* Candidate & Recruitment Stages */
.stage-badge-shortlisted {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
html.dark .stage-badge-shortlisted {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.stage-badge-interview {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
html.dark .stage-badge-interview {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.stage-badge-offer {
  background: rgba(168, 85, 247, 0.12);
  color: #6d28d9;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
html.dark .stage-badge-offer {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.stage-badge-joined {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.35);
  font-weight: 700;
}
html.dark .stage-badge-joined {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.5);
  font-weight: 700;
}

/* Status: New / Uncontacted Lead */
.badge-status-new {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}
html.dark .badge-status-new {
  background: rgba(51, 65, 85, 0.4) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(71, 85, 105, 0.4) !important;
}

/* Capital Badges */
.capital-badge-high {
  background: rgba(124, 58, 237, 0.12) !important;
  color: #6d28d9 !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  font-weight: 700 !important;
}
html.dark .capital-badge-high {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  font-weight: 700 !important;
}

.capital-badge-mid {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  font-weight: 600 !important;
}
html.dark .capital-badge-mid {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  font-weight: 600 !important;
}

.capital-badge-base {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}
html.dark .capital-badge-base {
  background: rgba(51, 65, 85, 0.3) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(71, 85, 105, 0.3) !important;
}

/* Lead Allocation / Assigned To Badges */
.crm-badge-unassigned {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}
html.dark .crm-badge-unassigned {
  background: rgba(51, 65, 85, 0.4) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(71, 85, 105, 0.5) !important;
}

.crm-badge-assigned {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}
html.dark .crm-badge-assigned {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

/* System Role Badge */
.crm-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  border: 1px solid #d8b4fe !important;
}
html.dark .crm-role-badge {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}

/* -------------------------------------------------------------------------- */
/* 9. COMMUNICATIONS SUITE (Email Items, WhatsApp Chat Bubbles)               */
/* -------------------------------------------------------------------------- */
.email-item-card {
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}
.email-item-card:hover {
  background-color: rgba(59, 130, 246, 0.08) !important;
}
.email-item-card.active {
  background-color: rgba(59, 130, 246, 0.12) !important;
  border-left-color: #3b82f6 !important;
}
html:not(.dark) .email-item-card.active {
  background-color: #eff6ff !important;
  border-left-color: #2563eb !important;
}

.wa-chat-contact-card {
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}
.wa-chat-contact-card:hover {
  background-color: rgba(16, 185, 129, 0.08) !important;
}
.wa-chat-contact-card.active {
  background-color: rgba(16, 185, 129, 0.14) !important;
  border-left-color: #10b981 !important;
}
html:not(.dark) .wa-chat-contact-card.active {
  background-color: #ecfdf5 !important;
  border-left-color: #059669 !important;
}

/* Chat Message Bubbles */
.chat-bubble-incoming {
  align-self: flex-start;
  max-width: 80%;
  padding: 0.75rem 1rem;
  border-radius: 1.15rem 1.15rem 1.15rem 0.25rem;
  background-color: #1e293b;
  border: 1px solid rgba(51, 65, 85, 0.5);
  color: #f8fafc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  word-break: break-word;
}
html:not(.dark) .chat-bubble-incoming {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.chat-bubble-outgoing {
  align-self: flex-end;
  max-width: 80%;
  padding: 0.75rem 1rem;
  border-radius: 1.15rem 1.15rem 0.25rem 1.15rem;
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3) !important;
  word-break: break-word;
}

/* -------------------------------------------------------------------------- */
/* 10. ANIMATIONS & INTERACTIVE STATES                                        */
/* -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.crm-card-interactive {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.crm-card-interactive:hover {
  transform: translateY(-2px);
}

html:not(.dark) .crm-card-interactive:hover {
  box-shadow: var(--shadow-lg);
}

html.dark .crm-card-interactive:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------------------- */
/* 11. NUCLEAR LIGHT-MODE FIX — Catch-All for dark-only utility classes       */
/*     Targets every element that still uses bg-slate-800/900/950, text-white, */
/*     border-slate-700/800, etc. WITHOUT dark: prefixes                      */
/* -------------------------------------------------------------------------- */

/* ── Border Colors ── */
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/80,
html:not(.dark) .border-slate-800\/90,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/50,
html:not(.dark) .border-slate-700\/80 {
  border-color: #e2e8f0 !important;
}

html:not(.dark) .border-slate-600 {
  border-color: #cbd5e1 !important;
}

/* ── Background: buttons, pills, small UI elements ── */
html:not(.dark) button[class*="bg-slate-900"],
html:not(.dark) button[class*="bg-slate-800"],
html:not(.dark) button[class*="bg-slate-700"] {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) button[class*="bg-slate-900"]:hover,
html:not(.dark) button[class*="bg-slate-800"]:hover,
html:not(.dark) button[class*="bg-slate-700"]:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html:not(.dark) button[class*="bg-slate-900"] i,
html:not(.dark) button[class*="bg-slate-900"] svg,
html:not(.dark) button[class*="bg-slate-800"] i,
html:not(.dark) button[class*="bg-slate-800"] svg {
  color: #475569 !important;
}

/* ── Span / pill / badge with bg-slate-800/900 ── */
html:not(.dark) span[class*="bg-slate-800"],
html:not(.dark) span[class*="bg-slate-900"],
html:not(.dark) div[class*="bg-slate-800\\/90"],
html:not(.dark) span[class*="bg-slate-800\\/90"] {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

/* ── Gradient containers ── */
html:not(.dark) [class*="bg-gradient-to-tr"][class*="from-cyan-600"],
html:not(.dark) [class*="bg-gradient-to-tr"][class*="from-emerald-500"] {
  /* Keep gradients visible — just ensure text is correct */
}

/* ── Links / anchors with slate bg ── */
html:not(.dark) a[class*="bg-slate-800"],
html:not(.dark) a[class*="bg-slate-900"] {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

/* ── Select dropdowns: catch any remaining bg-slate selects ── */
html:not(.dark) select[class*="bg-slate-900"],
html:not(.dark) select[class*="bg-slate-800"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* ── Stat Cards / Metric Cards ── */
html:not(.dark) [class*="stat-"] .text-white,
html:not(.dark) [id*="stat-"] {
  color: #0f172a !important;
}

/* ── Dashboard stat card value text ── */
html:not(.dark) .text-2xl.font-extrabold.text-white,
html:not(.dark) .text-3xl.font-extrabold.text-white {
  color: #0f172a !important;
}

/* ── Icon color correction inside cards ── */
html:not(.dark) .bg-emerald-500\/10 i,
html:not(.dark) .bg-emerald-500\/10 svg { color: #059669 !important; }
html:not(.dark) .bg-blue-500\/10 i,
html:not(.dark) .bg-blue-500\/10 svg { color: #2563eb !important; }
html:not(.dark) .bg-amber-500\/10 i,
html:not(.dark) .bg-amber-500\/10 svg { color: #d97706 !important; }
html:not(.dark) .bg-purple-500\/10 i,
html:not(.dark) .bg-purple-500\/10 svg { color: #7c3aed !important; }
html:not(.dark) .bg-cyan-500\/10 i,
html:not(.dark) .bg-cyan-500\/10 svg { color: #0891b2 !important; }
html:not(.dark) .bg-rose-500\/10 i,
html:not(.dark) .bg-rose-500\/10 svg { color: #e11d48 !important; }
html:not(.dark) .bg-teal-500\/10 i,
html:not(.dark) .bg-teal-500\/10 svg { color: #0d9488 !important; }
html:not(.dark) .bg-indigo-500\/10 i,
html:not(.dark) .bg-indigo-500\/10 svg { color: #4f46e5 !important; }

/* ── Colored text: 300-series → deeper shades in light ── */
html:not(.dark) .text-emerald-300 { color: #047857 !important; }
html:not(.dark) .text-blue-300    { color: #1d4ed8 !important; }
html:not(.dark) .text-amber-300   { color: #b45309 !important; }
html:not(.dark) .text-purple-300  { color: #6d28d9 !important; }
html:not(.dark) .text-cyan-300    { color: #0e7490 !important; }
html:not(.dark) .text-teal-300    { color: #0f766e !important; }
html:not(.dark) .text-rose-300    { color: #be123c !important; }
html:not(.dark) .text-indigo-300  { color: #4338ca !important; }
html:not(.dark) .text-fuchsia-300 { color: #a21caf !important; }

/* ── Hover states on hover:bg-slate containers ── */
html:not(.dark) [class*="hover\\:bg-slate-700"]:hover,
html:not(.dark) [class*="hover\\:bg-slate-800"]:hover {
  background-color: #e2e8f0 !important;
}

html:not(.dark) [class*="hover\\:bg-slate-900"]:hover {
  background-color: #f1f5f9 !important;
}

/* ── Main workspace container ── */
html:not(.dark) .flex-1.flex.flex-col.min-w-0.h-full.overflow-hidden.bg-slate-900 {
  background-color: #f8fafc !important;
}

/* ── HR Sub-tab bar / filter bars ── */
html:not(.dark) [class*="bg-slate-950\\/40"],
html:not(.dark) [class*="bg-slate-950\\/50"],
html:not(.dark) [class*="bg-slate-950\\/70"],
html:not(.dark) [class*="bg-slate-900\\/90"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* ── Sub-nav / filter buttons ── */
html:not(.dark) .wa-subnav-btn,
html:not(.dark) .fu-filter-btn {
  color: #334155 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

html:not(.dark) .wa-subnav-btn:hover,
html:not(.dark) .fu-filter-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) .wa-subnav-btn.active,
html:not(.dark) .fu-filter-btn.active {
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
  color: #ffffff !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.35) !important;
}

/* ── Backdrop / overlay ── */
html:not(.dark) #sidebar-backdrop {
  background-color: rgba(15, 23, 42, 0.4) !important;
}

/* ── HR pipeline filter dropdowns ── */
html:not(.dark) [id*="filter"] select,
html:not(.dark) [id*="search"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* ── Animate pulse dot ── */
html:not(.dark) .bg-emerald-400.animate-pulse {
  background-color: #10b981 !important;
}

/* ── Tags / chips with dark backgrounds ── */
html:not(.dark) [class*="bg-slate-900"][class*="border"][class*="text-slate"] {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}

/* ── Fix any remaining hover:text-white inside table cells ── */
html:not(.dark) td [class*="hover\\:text-white"]:hover {
  color: #0f172a !important;
}

/* ── Dashboard metric card icon containers ── */
html:not(.dark) .p-1\\.5[class*="bg-emerald-500\\/10"] { background-color: rgba(16, 185, 129, 0.08) !important; }
html:not(.dark) .p-1\\.5[class*="bg-blue-500\\/10"] { background-color: rgba(37, 99, 235, 0.08) !important; }
html:not(.dark) .p-1\\.5[class*="bg-amber-500\\/10"] { background-color: rgba(217, 119, 6, 0.08) !important; }
html:not(.dark) .p-1\\.5[class*="bg-purple-500\\/10"] { background-color: rgba(124, 58, 237, 0.08) !important; }
html:not(.dark) .p-1\\.5[class*="bg-cyan-500\\/10"] { background-color: rgba(14, 165, 233, 0.08) !important; }
html:not(.dark) .p-1\\.5[class*="bg-rose-500\\/10"] { background-color: rgba(225, 29, 72, 0.08) !important; }

/* ── Tab content backgrounds ── */
html:not(.dark) section[id^="tab-"] {
  color: #0f172a !important;
}

/* ── Follow-up items, email items ── */
html:not(.dark) .email-item-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html:not(.dark) .wa-chat-contact-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ── Status colored text inside selects ── */
html:not(.dark) select .text-emerald-300,
html:not(.dark) select.text-emerald-300 { color: #047857 !important; }
html:not(.dark) select .text-blue-300,
html:not(.dark) select.text-blue-300 { color: #1d4ed8 !important; }
html:not(.dark) select .text-amber-300,
html:not(.dark) select.text-amber-300 { color: #b45309 !important; }

/* ── Table header dividers ── */
html:not(.dark) thead th[class*="border-slate"] {
  border-color: #e2e8f0 !important;
}

/* ── HR pipeline table / placement table ── */
html:not(.dark) [id*="pipeline"] tbody tr,
html:not(.dark) [id*="placement"] tbody tr {
  background-color: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* ── Modal close buttons ── */
html:not(.dark) [id$="-modal"] button[class*="bg-slate-800"],
html:not(.dark) [id$="-modal"] button[class*="bg-slate-900"] {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) [id$="-modal"] button[class*="bg-slate-800"]:hover,
html:not(.dark) [id$="-modal"] button[class*="bg-slate-900"]:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ── Modal header text ── */
html:not(.dark) [id$="-modal"] h2,
html:not(.dark) [id$="-modal"] h3,
html:not(.dark) [id$="-modal"] h4 {
  color: #0f172a !important;
}

html:not(.dark) [id$="-modal"] label {
  color: #334155 !important;
}

html:not(.dark) [id$="-modal"] p,
html:not(.dark) [id$="-modal"] span:not([class*="bg-"]) {
  color: #334155 !important;
}

/* ── Invoice / document view buttons ── */
html:not(.dark) button[class*="bg-slate-800"][class*="text-cyan"] {
  background-color: #f0fdfa !important;
  color: #0e7490 !important;
  border-color: #a7f3d0 !important;
}

/* ── Colored action buttons light-mode boost ── */
html:not(.dark) button[class*="bg-blue-600\\/30"],
html:not(.dark) button[class*="bg-blue-500\\/10"] {
  background-color: rgba(37, 99, 235, 0.08) !important;
  color: #1d4ed8 !important;
}
html:not(.dark) button[class*="bg-teal-600\\/30"],
html:not(.dark) button[class*="bg-teal-500\\/10"] {
  background-color: rgba(13, 148, 136, 0.08) !important;
  color: #0f766e !important;
}
html:not(.dark) button[class*="bg-purple-600\\/30"],
html:not(.dark) button[class*="bg-purple-500\\/10"] {
  background-color: rgba(124, 58, 237, 0.08) !important;
  color: #6d28d9 !important;
}
html:not(.dark) button[class*="bg-rose-600\\/20"],
html:not(.dark) button[class*="bg-rose-500\\/10"] {
  background-color: rgba(225, 29, 72, 0.08) !important;
  color: #be123c !important;
}

/* ── Colored HR Subtab / Pipeline stage color pills ── */
html:not(.dark) [class*="bg-blue-950"],
html:not(.dark) [class*="bg-cyan-950"],
html:not(.dark) [class*="bg-indigo-950"],
html:not(.dark) [class*="bg-teal-950"],
html:not(.dark) [class*="bg-purple-950"],
html:not(.dark) [class*="bg-fuchsia-950"],
html:not(.dark) [class*="bg-rose-950"],
html:not(.dark) [class*="bg-emerald-950"],
html:not(.dark) [class*="bg-amber-950"] {
  background-color: #ffffff !important;
}

/* ── Ensure text-white children of these containers are dark ── */
html:not(.dark) [class*="bg-blue-950"] .text-white,
html:not(.dark) [class*="bg-cyan-950"] .text-white,
html:not(.dark) [class*="bg-indigo-950"] .text-white,
html:not(.dark) [class*="bg-teal-950"] .text-white {
  color: #0f172a !important;
}

/* ── Sidebar badge count pills ── */
html:not(.dark) .nav-badge[class*="bg-cyan-500"] {
  background-color: rgba(14, 165, 233, 0.1) !important;
  color: #0891b2 !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
}

html:not(.dark) .nav-badge[class*="bg-rose-500"] {
  background-color: rgba(225, 29, 72, 0.08) !important;
  color: #e11d48 !important;
  border-color: rgba(225, 29, 72, 0.2) !important;
}

html:not(.dark) .nav-badge[class*="bg-purple-500"] {
  background-color: rgba(124, 58, 237, 0.08) !important;
  color: #7c3aed !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
}

/* ── WhatsApp Module Light Theme Polish ── */
html:not(.dark) #wa-chat-message-stream {
  background-color: #f8fafc !important;
}

html:not(.dark) #tab-wa-chat textarea,
html:not(.dark) #tab-wa-chat input {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) #new-wa-chat-modal .bg-white {
  background-color: #ffffff !important;
}

/* ========================================================================== */
/* MOBILE-FIRST & RESPONSIVE POLISH SUITE                                     */
/* ========================================================================== */

/* Safe area insets & Mobile Viewport dynamics */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

.safe-top-inset {
  padding-top: max(0.5rem, var(--safe-top));
}

.safe-bottom-inset {
  padding-bottom: max(1rem, var(--safe-bottom));
}

/* Touch Targets standard (min 44px) */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Prevent iOS Safari 16px font auto-zoom on input focus */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Mobile Tables: Horizontal Scroll Polish */
.mobile-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

/* Responsive Modals on Mobile Viewports */
@media (max-width: 640px) {
  [id$="-modal"] {
    padding: 0.5rem !important;
    align-items: flex-end !important;
  }

  [id$="-modal"] > div {
    max-height: 92dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 1.25rem 1.25rem 0.875rem 0.875rem !important;
    padding: 1.15rem !important;
  }

  /* Form actions in modals stack on mobile */
  [id$="-modal"] .modal-actions {
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
  }

  [id$="-modal"] .modal-actions button {
    width: 100% !important;
    justify-content: center !important;
  }
}