/* Global dark mode overrides.
   Light mode is untouched — every rule here is scoped under html.dark or html[data-theme="dark"]
*/

html.dark,
html[data-theme="dark"] {
  /* Union of CSS custom properties used across the app's pages */
  --bg: #1E1B4B;
  --text: #FFFFFF;
  --text-soft: #B8B5D6;
  --border: rgba(255, 255, 255, 0.14);
  --primary-light: rgba(139, 92, 246, 0.18);
  --accent: #FF6B81;

  /* table-global.css tokens */
  --color-bg: #1E1B4B;
  --color-text: #FFFFFF;
  --color-text-secondary: #B8B5D6;
  --color-border: rgba(255, 255, 255, 0.14);
  --tbl-bg-muted: rgba(255, 255, 255, 0.06);
  --tbl-text: #FFFFFF;
  --tbl-muted-text: #B8B5D6;
  --input-border: rgba(255, 255, 255, 0.18);

  /* Local helper tokens for this file only */
  --surface: #262353;
  --surface-hover: rgba(255, 255, 255, 0.06);
}

/* ===== Base canvas ===== */
html.dark body,
html[data-theme="dark"] body {
  background: #1E1B4B !important;
  color: #FFFFFF !important;
}

html.dark .iframe-container,
html.dark iframe,
html[data-theme="dark"] .iframe-container,
html[data-theme="dark"] iframe {
  background: #1E1B4B !important;
}

/* ===== Sidebar & nav ===== */
html.dark .sidebar,
html[data-theme="dark"] .sidebar {
  background: #1E1B4B !important;
  border-right-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .menu li,
html[data-theme="dark"] .menu li {
  color: #FFFFFF;
}

html.dark .menu li:hover,
html[data-theme="dark"] .menu li:hover {
  background: var(--surface-hover) !important;
  color: #FFFFFF !important;
}

html.dark .menu li.active,
html[data-theme="dark"] .menu li.active {
  background: rgba(139, 92, 246, 0.22) !important;
  color: #FFFFFF !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
}

html.dark .menu li.active i,
html[data-theme="dark"] .menu li.active i {
  color: #FFFFFF !important;
}

html.dark .menu-title,
html[data-theme="dark"] .menu-title {
  color: #9C99C7 !important;
}

/* ===== Generic cards / panels / KPI tiles ===== */
html.dark .card,
html.dark .glass-card,
html.dark .kpi-card,
html.dark .table-card,
html.dark [class*="-card"],
html[data-theme="dark"] .card,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] [class*="-card"] {
  background: var(--surface) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== KPI Gradient Boxes — restore vibrant gradients in dark mode ===== */
html.dark .kpi-box,
html[data-theme="dark"] .kpi-box {
  background: var(--surface) !important; /* base fallback */
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark .kpi-box.purple,
html[data-theme="dark"] .kpi-box.purple {
  background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

html.dark .kpi-box.green,
html[data-theme="dark"] .kpi-box.green {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
}

html.dark .kpi-box.amber,
html[data-theme="dark"] .kpi-box.amber {
  background: linear-gradient(135deg, #B45309 0%, #D97706 100%) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark .kpi-box.red,
html[data-theme="dark"] .kpi-box.red {
  background: linear-gradient(135deg, #B91C1C 0%, #DC2626 100%) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark .kpi-box.teal,
html[data-theme="dark"] .kpi-box.teal {
  background: linear-gradient(135deg, #0F766E 0%, #0D9488 100%) !important;
  border-color: rgba(45, 212, 191, 0.3) !important;
}

html.dark .kpi-box.blue,
html[data-theme="dark"] .kpi-box.blue {
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

html.dark .kpi-box.rose,
html[data-theme="dark"] .kpi-box.rose {
  background: linear-gradient(135deg, #9F1239 0%, #E11D48 100%) !important;
  border-color: rgba(251, 113, 133, 0.3) !important;
}

html.dark .kpi-box.cyan,
html[data-theme="dark"] .kpi-box.cyan {
  background: linear-gradient(135deg, #0369A1 0%, #0284C7 100%) !important;
  border-color: rgba(34, 211, 238, 0.3) !important;
}

html.dark .kpi-box .kpi-label,
html.dark .kpi-box .kpi-value,
html.dark .kpi-box .kpi-sub,
html[data-theme="dark"] .kpi-box .kpi-label,
html[data-theme="dark"] .kpi-box .kpi-value,
html[data-theme="dark"] .kpi-box .kpi-sub {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ===== Personal Dashboard — Action Items (Recent Activity) ===== */
html.dark .action-item,
html[data-theme="dark"] .action-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

html.dark .action-item:hover,
html[data-theme="dark"] .action-item:hover {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
}

html.dark .action-item span.text-xs,
html.dark .action-item .text-gray-700,
html.dark #activityList span,
html.dark #activityList div,
html[data-theme="dark"] .action-item span.text-xs,
html[data-theme="dark"] .action-item .text-gray-700,
html[data-theme="dark"] #activityList span,
html[data-theme="dark"] #activityList div {
  color: #D4D0F5 !important;
}

/* Activity expanded panel items (bg-white hardcoded in JS) */
html.dark #activityPanelList > div,
html[data-theme="dark"] #activityPanelList > div {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

html.dark #activityPanelList > div:hover,
html[data-theme="dark"] #activityPanelList > div:hover {
  border-color: rgba(139, 92, 246, 0.4) !important;
}

html.dark #activityPanelList span,
html.dark #activityPanelList div:not(.w-2\\.5),
html[data-theme="dark"] #activityPanelList span,
html[data-theme="dark"] #activityPanelList div:not(.w-2\\.5) {
  color: #D4D0F5 !important;
}

/* ===== Personal Dashboard — Milestone Items ===== */
html.dark .milestone-item,
html[data-theme="dark"] .milestone-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .milestone-item:hover,
html[data-theme="dark"] .milestone-item:hover {
  border-color: rgba(139, 92, 246, 0.4) !important;
}

html.dark .milestone-item .text-gray-800,
html.dark .milestone-item .text-gray-400,
html[data-theme="dark"] .milestone-item .text-gray-800,
html[data-theme="dark"] .milestone-item .text-gray-400 {
  color: #D4D0F5 !important;
}

/* Milestones expanded panel items */
html.dark #milestonePanelList > div,
html[data-theme="dark"] #milestonePanelList > div {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #milestonePanelList > div:hover,
html[data-theme="dark"] #milestonePanelList > div:hover {
  border-color: rgba(139, 92, 246, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

html.dark #milestonePanelList .text-slate-800,
html.dark #milestonePanelList .text-slate-500,
html.dark #milestonePanelList .text-slate-400,
html[data-theme="dark"] #milestonePanelList .text-slate-800,
html[data-theme="dark"] #milestonePanelList .text-slate-500,
html[data-theme="dark"] #milestonePanelList .text-slate-400 {
  color: #D4D0F5 !important;
}

/* ===== Personal Dashboard — WSR Rows ===== */
html.dark .wsr-row,
html[data-theme="dark"] .wsr-row {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .wsr-row:hover,
html[data-theme="dark"] .wsr-row:hover {
  background: rgba(139, 92, 246, 0.12) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
}

/* ===== Personal Dashboard — Project Cards (proj-card) ===== */
html.dark .proj-card,
html[data-theme="dark"] .proj-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .proj-card:hover,
html[data-theme="dark"] .proj-card:hover {
  border-color: rgba(139, 92, 246, 0.5) !important;
  background: rgba(139, 92, 246, 0.08) !important;
  box-shadow: 0 4px 16px rgba(114, 48, 143, 0.2) !important;
}

html.dark .proj-card .proj-name,
html.dark .proj-card .proj-meta,
html[data-theme="dark"] .proj-card .proj-name,
html[data-theme="dark"] .proj-card .proj-meta {
  color: #D4D0F5 !important;
}

html.dark .proj-card .proj-name,
html[data-theme="dark"] .proj-card .proj-name {
  color: #FFFFFF !important;
}

/* ===== Personal Dashboard — Health Legend Pills ===== */
html.dark #healthLegend > div,
html[data-theme="dark"] #healthLegend > div {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

/* ===== Personal Dashboard — Risk Register Table (dark inner bg) ===== */
html.dark #riskTable .overflow-x-auto,
html[data-theme="dark"] #riskTable .overflow-x-auto {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #riskTable thead,
html[data-theme="dark"] #riskTable thead {
  background: rgba(255, 255, 255, 0.07) !important;
}

html.dark #riskTable thead th,
html[data-theme="dark"] #riskTable thead th {
  color: #B8B5D6 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #riskTable tbody td,
html[data-theme="dark"] #riskTable tbody td {
  background: transparent !important;
  color: #D4D0F5 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark #riskTable tbody tr:hover td,
html[data-theme="dark"] #riskTable tbody tr:hover td {
  background: rgba(139, 92, 246, 0.1) !important;
}

html.dark #riskTable .bg-gray-50,
html.dark #riskTable .bg-white,
html[data-theme="dark"] #riskTable .bg-gray-50,
html[data-theme="dark"] #riskTable .bg-white {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== Personal Dashboard — Empty States ===== */
html.dark .empty-state p,
html.dark .empty-state span,
html[data-theme="dark"] .empty-state p,
html[data-theme="dark"] .empty-state span {
  color: #9C99C7 !important;
}

/* ===== Personal Dashboard — Section heading number (healthTotal) ===== */
html.dark #healthTotal,
html[data-theme="dark"] #healthTotal {
  color: #FFFFFF !important;
}

/* ===== Personal Dashboard — Tab border & body ===== */
html.dark #tabOverview,
html.dark #tabAudit,
html[data-theme="dark"] #tabOverview,
html[data-theme="dark"] #tabAudit {
  color: #D4D0F5 !important;
}

html.dark #tabOverview.border-\[\\#72308F\],
html[data-theme="dark"] #tabOverview.border-\[\\#72308F\] {
  color: #FFFFFF !important;
  border-bottom-color: #A78BFA !important;
}

/* ===== Tables ===== */
html.dark body table,
html.dark table,
html[data-theme="dark"] body table,
html[data-theme="dark"] table {
  background: var(--surface) !important;
  color: #FFFFFF !important;
}

html.dark body table tbody td,
html.dark table tbody td,
html[data-theme="dark"] body table tbody td,
html[data-theme="dark"] table tbody td {
  background: var(--surface) !important;
  color: #FFFFFF !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark body table tbody tr:hover td,
html.dark table tbody tr:hover td,
html.dark table tbody tr:hover,
html.dark .modern-table tr:hover td,
html[data-theme="dark"] body table tbody tr:hover td,
html[data-theme="dark"] table tbody tr:hover td,
html[data-theme="dark"] table tbody tr:hover,
html[data-theme="dark"] .modern-table tr:hover td {
  background: #2D237A !important;
  background-color: #2D237A !important;
}

html.dark body table thead th,
html.dark table thead th,
html[data-theme="dark"] body table thead th,
html[data-theme="dark"] table thead th {
  color: #FFFFFF !important;
}

/* ===== Forms, Inputs & Textareas ===== */
html.dark input,
html.dark select,
html.dark textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #1E1B4B !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #9C99C7 !important;
}

html.dark table input[readonly],
html.dark table input[disabled],
html.dark table textarea[readonly],
html.dark table select[disabled],
html[data-theme="dark"] table input[readonly],
html[data-theme="dark"] table input[disabled],
html[data-theme="dark"] table textarea[readonly],
html[data-theme="dark"] table select[disabled] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

/* ===== Modals / drawers / dropdowns ===== */
html.dark .transfer-modal,
html.dark [class*="modal"]:not(.transfer-modal-backdrop):not([class*="modal-backdrop"]):not(.modal),
html.dark .notif-drawer,
html.dark [id*="Drawer"]:not([id*="Backdrop"]):not([id*="backdrop"]),
html.dark [id*="Suggestions"],
html[data-theme="dark"] .transfer-modal,
html[data-theme="dark"] [class*="modal"]:not(.transfer-modal-backdrop):not([class*="modal-backdrop"]):not(.modal),
html[data-theme="dark"] .notif-drawer,
html[data-theme="dark"] [id*="Drawer"]:not([id*="Backdrop"]):not([id*="backdrop"]),
html[data-theme="dark"] [id*="Suggestions"] {
  background: var(--surface) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark [class*="modal-backdrop"],
html[data-theme="dark"] [class*="modal-backdrop"] {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* ===== Toggle button icon state ===== */
html.dark .theme-toggle-btn .fa-sun,
html[data-theme="dark"] .theme-toggle-btn .fa-sun {
  display: none;
}

html.dark .theme-toggle-btn .fa-moon,
html[data-theme="dark"] .theme-toggle-btn .fa-moon {
  display: inline-block;
}

html:not(.dark):not([data-theme="dark"]) .theme-toggle-btn .fa-moon {
  display: none;
}

/* ===== BADGES & STATUS PILLS HIGH-CONTRAST READABILITY FIX ===== */
html.dark .bg-pink-100, html[data-theme="dark"] .bg-pink-100 { background-color: #fce7f3 !important; color: #831843 !important; }
html.dark .bg-purple-100, html[data-theme="dark"] .bg-purple-100 { background-color: #f3e8ff !important; color: #581c87 !important; }
html.dark .bg-blue-100, html[data-theme="dark"] .bg-blue-100 { background-color: #dbeafe !important; color: #1e3a8a !important; }
html.dark .bg-indigo-100, html[data-theme="dark"] .bg-indigo-100 { background-color: #e0e7ff !important; color: #312e81 !important; }
html.dark .bg-cyan-100, html[data-theme="dark"] .bg-cyan-100 { background-color: #cffaff !important; color: #164e63 !important; }
html.dark .bg-green-100, html[data-theme="dark"] .bg-green-100 { background-color: #dcfce7 !important; color: #14532d !important; }
html.dark .bg-emerald-100, html[data-theme="dark"] .bg-emerald-100 { background-color: #d1fae5 !important; color: #064e3b !important; }
html.dark .bg-orange-100, html[data-theme="dark"] .bg-orange-100 { background-color: #ffedd5 !important; color: #7c2d12 !important; }
html.dark .bg-amber-100, html[data-theme="dark"] .bg-amber-100 { background-color: #fef3c7 !important; color: #78350f !important; }
html.dark .bg-red-100, html[data-theme="dark"] .bg-red-100 { background-color: #fee2e2 !important; color: #7f1d1d !important; }
html.dark .bg-slate-100, html[data-theme="dark"] .bg-slate-100 { background-color: #f1f5f9 !important; color: #0f172a !important; }
html.dark .bg-gray-100, html[data-theme="dark"] .bg-gray-100 { background-color: #e5e7eb !important; color: #111827 !important; }

/* ===== CARD TITLES, SUBTITLES & METADATA PURE WHITE (#FFFFFF) TEXT OVERRIDE ===== */
/* Keeps all badges (.badge-b, .badge-track, .status-chip, .badge) untouched */
html.dark .card-title,
html.dark .card-title i,
html.dark .card-sub,
html.dark .card-sub span,
html.dark .card-sub i,
html.dark .chevron-icon,
html.dark .approval-card,
html.dark .approval-card *:not(.badge-b):not(.badge-b *):not(.badge-track):not(.badge-track *):not(.status-chip):not(.status-chip *):not(.badge):not(.badge *),
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-title i,
html[data-theme="dark"] .card-sub,
html[data-theme="dark"] .card-sub span,
html[data-theme="dark"] .card-sub i,
html[data-theme="dark"] .chevron-icon,
html[data-theme="dark"] .approval-card,
html[data-theme="dark"] .approval-card *:not(.badge-b):not(.badge-b *):not(.badge-track):not(.badge-track *):not(.status-chip):not(.status-chip *):not(.badge):not(.badge *) {
  color: #FFFFFF !important;
}

html.dark .card-header,
html[data-theme="dark"] .card-header {
  background: #262353 !important;
}

html.dark .card-header:hover,
html.dark .card-header.open,
html[data-theme="dark"] .card-header:hover,
html[data-theme="dark"] .card-header.open {
  background: rgba(255, 255, 255, 0.08) !important;
}

html.dark .text-purple-800:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge):not(.bg-purple-100):not(.bg-indigo-100),
html.dark .text-purple-700:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge):not(.bg-purple-100):not(.bg-indigo-100),
html.dark .text-purple-400:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge):not(.bg-purple-100):not(.bg-indigo-100),
html.dark .text-gray-300:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge),
html.dark .text-gray-400:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge),
html.dark .text-gray-500:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge),
html[data-theme="dark"] .text-purple-800:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge):not(.bg-purple-100):not(.bg-indigo-100),
html[data-theme="dark"] .text-purple-700:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge):not(.bg-purple-100):not(.bg-indigo-100),
html[data-theme="dark"] .text-purple-400:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge):not(.bg-purple-100):not(.bg-indigo-100),
html[data-theme="dark"] .text-gray-300:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge),
html[data-theme="dark"] .text-gray-400:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge),
html[data-theme="dark"] .text-gray-500:not(.badge-b):not(.badge-track):not(.status-chip):not(.badge) {
  color: #FFFFFF !important;
}

/* PM Name text color override in Project Managers page */
html.dark .pm-row td:first-child div,
html[data-theme="dark"] .pm-row td:first-child div {
  color: #FFFFFF !important;
}

/* ===== REPORTS PAGE & PMO DASHBOARD PURE WHITE (#FFFFFF) TEXT OVERRIDES ===== */
/* Keeps all status badges (.badge, .status-chip, status pills) untouched */
html.dark #reportSidebar,
html.dark #reportSidebar .text-gray-400,
html.dark .category-card,
html.dark .category-title,
html.dark .category-desc,
html.dark .modern-table th,
html.dark .modern-table td:not(:has(.badge)):not(:has(.status-chip)),
html.dark .modern-table td a,
html.dark .modern-table td div:not(.badge):not(.status-chip),
html.dark .modern-table td span:not(.badge):not(.status-chip):not([class*="bg-"]),
html.dark #projectListCard .section-title,
html.dark #projectListCard h2,
html.dark #mainDashboardLayout main,
html[data-theme="dark"] #reportSidebar,
html[data-theme="dark"] #reportSidebar .text-gray-400,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .category-title,
html[data-theme="dark"] .category-desc,
html[data-theme="dark"] .modern-table th,
html[data-theme="dark"] .modern-table td:not(:has(.badge)):not(:has(.status-chip)),
html[data-theme="dark"] .modern-table td a,
html[data-theme="dark"] .modern-table td div:not(.badge):not(.status-chip),
html[data-theme="dark"] .modern-table td span:not(.badge):not(.status-chip):not([class*="bg-"]),
html[data-theme="dark"] #projectListCard .section-title,
html[data-theme="dark"] #projectListCard h2,
html[data-theme="dark"] #mainDashboardLayout main {
  color: #FFFFFF !important;
}

html.dark #reportSidebar,
html[data-theme="dark"] #reportSidebar {
  background: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #mainDashboardLayout main,
html[data-theme="dark"] #mainDashboardLayout main {
  background: #1E1B4B !important;
}

html.dark .category-card,
html[data-theme="dark"] .category-card {
  background: #262353 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .category-card.active,
html[data-theme="dark"] .category-card.active {
  background: rgba(139, 92, 246, 0.25) !important;
  border-color: #A78BFA !important;
}

html.dark .category-card.active .category-title,
html[data-theme="dark"] .category-card.active .category-title {
  color: #FFFFFF !important;
}

html.dark .modern-table td a,
html[data-theme="dark"] .modern-table td a {
  color: #FFFFFF !important;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}

html.dark .modern-table tr:hover td,
html[data-theme="dark"] .modern-table tr:hover td {
  background: #2D237A !important;
  background-color: #2D237A !important;
}

/* Revenue Charts & Financial KPI Cards pure white (#FFFFFF) text overrides */
html.dark #chart1Title,
html.dark #chart2Title,
html.dark .glass-card h3,
html.dark .glass-card h3 span,
html.dark .glass-card h3 i,
html.dark .kpi-card .kpi-label,
html.dark .kpi-card .kpi-value,
html.dark .kpi-card .kpi-subtitle,
html.dark .text-gray-800,
html[data-theme="dark"] #chart1Title,
html[data-theme="dark"] #chart2Title,
html[data-theme="dark"] .glass-card h3,
html[data-theme="dark"] .glass-card h3 span,
html[data-theme="dark"] .glass-card h3 i,
html[data-theme="dark"] .kpi-card .kpi-label,
html[data-theme="dark"] .kpi-card .kpi-value,
html[data-theme="dark"] .kpi-card .kpi-subtitle,
html[data-theme="dark"] .text-gray-800 {
  color: #FFFFFF !important;
}

/* Dashboard Sticky Top Bar & Filters in Dark Mode */
html.dark div.sticky.top-0,
html.dark #globalFilters,
html.dark #homeGlobalFilters,
html[data-theme="dark"] div.sticky.top-0,
html[data-theme="dark"] #globalFilters,
html[data-theme="dark"] #homeGlobalFilters {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark h1,
html.dark h1 i,
html.dark h1[class*="text-"],
html[data-theme="dark"] h1,
html[data-theme="dark"] h1 i,
html[data-theme="dark"] h1[class*="text-"] {
  color: #FFFFFF !important;
}

html.dark #dateRangeDisplay,
html[data-theme="dark"] #dateRangeDisplay {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===== RECENT PROJECTS PURE WHITE (#FFFFFF) TEXT & PROJECTS NEEDING WSR TEXT COLOR FIX ===== */
/* 1. Recent Projects cards: force pure white #FFFFFF for all black/purple text, keeping status chips & keys untouched */
html.dark .project-card,
html.dark .project-card .text-gray-900,
html.dark .project-card .text-gray-800,
html.dark .project-card .text-gray-700,
html.dark .project-card .text-gray-500,
html.dark .project-card .text-gray-400,
html.dark .project-card .text-\[\#72308F\],
html.dark .project-card div:not(.status-chip),
html.dark .project-card span:not(.status-chip):not(.font-mono),
html.dark .project-card a,
html.dark .project-card i:not(.text-gray-300),
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .project-card .text-gray-900,
html[data-theme="dark"] .project-card .text-gray-800,
html[data-theme="dark"] .project-card .text-gray-700,
html[data-theme="dark"] .project-card .text-gray-500,
html[data-theme="dark"] .project-card .text-gray-400,
html[data-theme="dark"] .project-card .text-\[\#72308F\],
html[data-theme="dark"] .project-card div:not(.status-chip),
html[data-theme="dark"] .project-card span:not(.status-chip):not(.font-mono),
html[data-theme="dark"] .project-card a,
html[data-theme="dark"] .project-card i:not(.text-gray-300) {
  color: #FFFFFF !important;
}

/* 2. Projects Needing WSR: High contrast text colors inside light badge cards */
html.dark #topDelayedList .bg-green-50,
html[data-theme="dark"] #topDelayedList .bg-green-50 {
  background-color: #dcfce7 !important;
  border-color: #86efac !important;
}
html.dark #topDelayedList .bg-green-50 *,
html[data-theme="dark"] #topDelayedList .bg-green-50 * {
  color: #14532d !important;
  font-weight: 700 !important;
}

html.dark #topDelayedList .bg-amber-50,
html[data-theme="dark"] #topDelayedList .bg-amber-50 {
  background-color: #fef3c7 !important;
  border-color: #fcd34d !important;
}
html.dark #topDelayedList .bg-amber-50 *,
html[data-theme="dark"] #topDelayedList .bg-amber-50 * {
  color: #78350f !important;
  font-weight: 700 !important;
}

html.dark #topDelayedList .bg-red-50,
html[data-theme="dark"] #topDelayedList .bg-red-50 {
  background-color: #fee2e2 !important;
  border-color: #fca5a5 !important;
}
html.dark #topDelayedList .bg-red-50 *,
html[data-theme="dark"] #topDelayedList .bg-red-50 * {
  color: #7f1d1d !important;
  font-weight: 700 !important;
}

/* ===== PS MARGIN ACROSS PROJECTS (EXPANDED MODAL & CHART) PURE WHITE (#FFFFFF) TEXT OVERRIDES ===== */
html.dark #psMarginRoot .ps-dash,
html[data-theme="dark"] #psMarginRoot .ps-dash {
  background: #1E1B4B !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark #psMarginRoot .hd-title,
html.dark #psMarginRoot .hd-sub,
html.dark #psMarginRoot .hd-right,
html.dark #psMarginRoot .strip-label,
html.dark #psMarginRoot .strip-value,
html.dark #psMarginRoot .filter-btn,
html.dark #psMarginRoot .expand-btn,
html.dark #psMarginClientSelect,
html[data-theme="dark"] #psMarginRoot .hd-title,
html[data-theme="dark"] #psMarginRoot .hd-sub,
html[data-theme="dark"] #psMarginRoot .hd-right,
html[data-theme="dark"] #psMarginRoot .strip-label,
html[data-theme="dark"] #psMarginRoot .strip-value,
html[data-theme="dark"] #psMarginRoot .filter-btn,
html[data-theme="dark"] #psMarginRoot .expand-btn,
html[data-theme="dark"] #psMarginClientSelect {
  color: #FFFFFF !important;
}

html.dark #psMarginRoot .strip .card,
html[data-theme="dark"] #psMarginRoot .strip .card {
  background: #262353 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark #psMarginRoot .filter-row,
html[data-theme="dark"] #psMarginRoot .filter-row {
  background: #262353 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark #psMarginClientSelect,
html[data-theme="dark"] #psMarginClientSelect {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark #chartCard,
html[data-theme="dark"] #chartCard {
  background: #262353 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* All Buttons in Dark Mode (Close 'X' button, Expand button, Filter buttons, Refresh button, Date buttons, Back buttons) */
html.dark button:not(.status-chip):not(.badge),
html.dark button *:not(.status-chip):not(.badge),
html.dark .expand-close-btn,
html.dark .expand-close-btn i,
html.dark .expand-btn,
html.dark .expand-btn *,
html.dark .filter-btn,
html.dark .filter-btn *,
html[data-theme="dark"] button:not(.status-chip):not(.badge),
html[data-theme="dark"] button *:not(.status-chip):not(.badge),
html[data-theme="dark"] .expand-close-btn,
html[data-theme="dark"] .expand-close-btn i,
html[data-theme="dark"] .expand-btn,
html[data-theme="dark"] .expand-btn *,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .filter-btn * {
  color: #FFFFFF !important;
}

html.dark .expand-close-btn,
html[data-theme="dark"] .expand-close-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

html.dark .expand-close-btn:hover,
html[data-theme="dark"] .expand-close-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

html.dark .expand-btn,
html[data-theme="dark"] .expand-btn {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Glass Card Section Titles in Dark Mode */
html.dark .section-title,
html.dark .section-title *,
html.dark h2.section-title,
html.dark h2.section-title i,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .section-title *,
html[data-theme="dark"] h2.section-title,
html[data-theme="dark"] h2.section-title i {
  color: #FFFFFF !important;
}

/* Center number inside WSR Health Donut Chart & Search Input pure white (#FFFFFF) text overrides */
html.dark #wsrHealthTotal,
html[data-theme="dark"] #wsrHealthTotal {
  color: #FFFFFF !important;
}

html.dark #projectSearchInput,
html.dark input[type="text"],
html.dark input[type="search"],
html[data-theme="dark"] #projectSearchInput,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"] {
  color: #FFFFFF !important;
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark #projectSearchInput::placeholder,
html.dark input::placeholder,
html[data-theme="dark"] #projectSearchInput::placeholder,
html[data-theme="dark"] input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Total PS Value KPI card number pure white (#FFFFFF) text override */
html.dark #kpi-povalue,
html[data-theme="dark"] #kpi-povalue {
  color: #FFFFFF !important;
}

/* KPI Card count numbers before "Projects" pure white (#FFFFFF) text override */
html.dark #kpi-ontrack-count,
html.dark #kpi-atrisk-count,
html.dark #kpi-delayed-count,
html.dark .kpi-card .font-semibold.text-gray-700,
html[data-theme="dark"] #kpi-ontrack-count,
html[data-theme="dark"] #kpi-atrisk-count,
html[data-theme="dark"] #kpi-delayed-count,
html[data-theme="dark"] .kpi-card .font-semibold.text-gray-700 {
  color: #FFFFFF !important;
}

/* ===== GLOBAL FOOTER & MODAL FOOTER DARK MODE OVERRIDES ===== */
html.dark footer,
html.dark .footer,
html.dark .modal-footer,
html.dark .foot,
html.dark [class*="bg-gray-50"].border-t,
html.dark [class*="bg-gray-100"].border-t,
html.dark [class*="bg-slate-50"].border-t,
html.dark [class*="bg-white"].border-t,
html.dark div.border-t.bg-white,
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .foot,
html[data-theme="dark"] [class*="bg-gray-50"].border-t,
html[data-theme="dark"] [class*="bg-gray-100"].border-t,
html[data-theme="dark"] [class*="bg-slate-50"].border-t,
html[data-theme="dark"] [class*="bg-white"].border-t,
html[data-theme="dark"] div.border-t.bg-white {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark footer *,
html.dark .footer *,
html.dark .modal-footer *:not(.badge):not(.status-chip),
html.dark .foot *,
html.dark [class*="bg-white"].border-t *,
html[data-theme="dark"] footer *,
html[data-theme="dark"] .footer *,
html[data-theme="dark"] .modal-footer *:not(.badge):not(.status-chip),
html[data-theme="dark"] .foot *,
html[data-theme="dark"] [class*="bg-white"].border-t * {
  color: #FFFFFF !important;
}

/* ===== DATE PICKER DROPDOWN & CALENDAR POPUP DARK MODE OVERRIDES ===== */
html.dark #datePickerDropdown,
html[data-theme="dark"] #datePickerDropdown {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark #datePickerDropdown *,
html.dark #datePickerDropdown button,
html.dark #datePickerDropdown input,
html[data-theme="dark"] #datePickerDropdown *,
html[data-theme="dark"] #datePickerDropdown button,
html[data-theme="dark"] #datePickerDropdown input {
  color: #FFFFFF !important;
}

html.dark #datePickerDropdown .datepicker-tab:not(.active),
html[data-theme="dark"] #datePickerDropdown .datepicker-tab:not(.active) {
  color: rgba(255, 255, 255, 0.7) !important;
}

html.dark #datePickerDropdown .month-selector,
html.dark #datePickerDropdown .quarter-selector,
html.dark #datePickerDropdown .year-selector,
html[data-theme="dark"] #datePickerDropdown .month-selector,
html[data-theme="dark"] #datePickerDropdown .quarter-selector,
html[data-theme="dark"] #datePickerDropdown .year-selector {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark #datePickerDropdown .month-selector:hover,
html.dark #datePickerDropdown .quarter-selector:hover,
html.dark #datePickerDropdown .year-selector:hover,
html[data-theme="dark"] #datePickerDropdown .month-selector:hover,
html[data-theme="dark"] #datePickerDropdown .quarter-selector:hover,
html[data-theme="dark"] #datePickerDropdown .year-selector:hover {
  background-color: rgba(139, 92, 246, 0.3) !important;
  border-color: #A78BFA !important;
  color: #FFFFFF !important;
}

html.dark #customStartDate,
html.dark #customEndDate,
html.dark input[type="date"],
html[data-theme="dark"] #customStartDate,
html[data-theme="dark"] #customEndDate,
html[data-theme="dark"] input[type="date"] {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  color-scheme: dark !important;
}

html.dark #datePickerDropdown button[onclick="closeDatePicker()"],
html[data-theme="dark"] #datePickerDropdown button[onclick="closeDatePicker()"] {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark #datePickerDropdown button[onclick="closeDatePicker()"]:hover,
html[data-theme="dark"] #datePickerDropdown button[onclick="closeDatePicker()"]:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

/* Flatpickr Calendar Dark Mode */
html.dark .flatpickr-calendar,
html[data-theme="dark"] .flatpickr-calendar {
  background: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  color-scheme: dark !important;
}

html.dark .flatpickr-calendar *,
html[data-theme="dark"] .flatpickr-calendar * {
  color: #FFFFFF !important;
}

html.dark .flatpickr-day:hover,
html.dark .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day:hover,
html[data-theme="dark"] .flatpickr-day.selected {
  background: #72308F !important;
  border-color: #72308F !important;
  color: #FFFFFF !important;
}

/* Drilldown Count Badge & Back to Dashboard Button Dark Mode Styling */
html.dark #drilldownCountBadge,
html[data-theme="dark"] #drilldownCountBadge {
  background-color: #1E1B4B !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark #wsrDrilldownSection button[onclick*="hideDrilldown"],
html[data-theme="dark"] #wsrDrilldownSection button[onclick*="hideDrilldown"] {
  background-color: #1E1B4B !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===== TIMESHEET DEDICATED DARK MODE OVERRIDES & CHECKBOX LABELS ===== */
html.dark .dashboard-container,
html.dark .dashboard-header,
html.dark .filters-bar,
html[data-theme="dark"] .dashboard-container,
html[data-theme="dark"] .dashboard-header,
html[data-theme="dark"] .filters-bar {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark .dashboard-header h1,
html.dark .dashboard-header p,
html.dark .dashboard-header span,
html.dark .filters-bar label,
html[data-theme="dark"] .dashboard-header h1,
html[data-theme="dark"] .dashboard-header p,
html[data-theme="dark"] .dashboard-header span,
html[data-theme="dark"] .filters-bar label {
  color: #FFFFFF !important;
}

html.dark input[type="checkbox"] + span,
html.dark label:has(input[type="checkbox"]),
html.dark label:has(input[type="checkbox"]) *,
html[data-theme="dark"] input[type="checkbox"] + span,
html[data-theme="dark"] label:has(input[type="checkbox"]),
html[data-theme="dark"] label:has(input[type="checkbox"]) * {
  color: #FFFFFF !important;
}

html.dark input[type="checkbox"],
html[data-theme="dark"] input[type="checkbox"] {
  accent-color: #72308F !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Page Header Count Badges (#employee-count-badge, #project-count-badge) Dark Mode Styling */
html.dark #employee-count-badge,
html.dark #project-count-badge,
html.dark h1 span[class*="bg-purple-50"],
html[data-theme="dark"] #employee-count-badge,
html[data-theme="dark"] #project-count-badge,
html[data-theme="dark"] h1 span[class*="bg-purple-50"] {
  background-color: #72308F !important;
  color: #FFFFFF !important;
  border-color: #A78BFA !important;
}

/* Resources Page Filter Area Background & Labels in Dark Mode */
html.dark #filterArea,
html[data-theme="dark"] #filterArea {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark #filterArea label,
html.dark #filterArea select,
html.dark #filterArea input,
html[data-theme="dark"] #filterArea label,
html[data-theme="dark"] #filterArea select,
html[data-theme="dark"] #filterArea input {
  color: #FFFFFF !important;
}

/* Reports Page Project Count Badge (#projectCountBadge) & Status Filter Button Dark Mode Styling */
html.dark #projectCountBadge,
html[data-theme="dark"] #projectCountBadge {
  background-color: #72308F !important;
  color: #FFFFFF !important;
  border-color: #A78BFA !important;
}

html.dark #statusFilterBtn,
html.dark #statusFilterLabel,
html.dark #statusFilterDropdown,
html[data-theme="dark"] #statusFilterBtn,
html[data-theme="dark"] #statusFilterLabel,
html[data-theme="dark"] #statusFilterDropdown {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark #statusFilterDropdown *,
html[data-theme="dark"] #statusFilterDropdown * {
  color: #FFFFFF !important;
}

/* ===== TOPBAR (VitaminQ) & TABLE HEADINGS DARK MODE BACKGROUND OVERRIDES ===== */
html.dark .topbar,
html[data-theme="dark"] .topbar,
.dark .topbar {
  background-color: #1E1B4B !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark table th,
html.dark thead th,
html.dark .modern-table th,
html.dark #drilldownTableHead th,
html[data-theme="dark"] table th,
html[data-theme="dark"] thead th,
html[data-theme="dark"] .modern-table th,
html[data-theme="dark"] #drilldownTableHead th,
.dark table th,
.dark thead th,
.dark .modern-table th {
  background-color: #1E1B4B !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ===== SIDEBAR PROMINENT SECTION TITLES (PMO & PM) DARK MODE OVERRIDES ===== */
html.dark .menu-title.prominent,
html[data-theme="dark"] .menu-title.prominent,
.dark .menu-title.prominent {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-left-color: #A78BFA !important;
}

/* ===== SIDEBAR LOGO AREA DARK MODE OVERRIDES ===== */
html.dark .logo,
html[data-theme="dark"] .logo,
.dark .logo {
  background-color: #1E1B4B !important;
}

html.dark .logo img,
html[data-theme="dark"] .logo img,
.dark .logo img {
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ===== PROJECT MASTER BUTTONS & TABLE INPUTS DARK MODE OVERRIDES ===== */
html.dark button[onclick*="excludeAllVisible"],
html[data-theme="dark"] button[onclick*="excludeAllVisible"] {
  background-color: #991B1B !important;
  color: #FFFFFF !important;
  border-color: #EF4444 !important;
}

html.dark button[onclick*="undoExcludeAllVisible"],
html[data-theme="dark"] button[onclick*="undoExcludeAllVisible"] {
  background-color: #166534 !important;
  color: #FFFFFF !important;
  border-color: #22C55E !important;
}

html.dark button[onclick*="resetFilters"],
html[data-theme="dark"] button[onclick*="resetFilters"] {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark #syncBtn,
html[data-theme="dark"] #syncBtn {
  background-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  border-color: #3B82F6 !important;
}

html.dark .modern-table input,
html.dark table input,
html[data-theme="dark"] .modern-table input,
html[data-theme="dark"] table input {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color-scheme: dark !important;
}

/* ===== TAB NAVIGATION, TABLE CONTAINER & FOOTER STRIP DARK MODE OVERRIDES ===== */
html.dark .tabs-bar,
html.dark #project-table-container,
html.dark .dashboard-footer-main,
html.dark .dashboard-footer-main *,
html[data-theme="dark"] .tabs-bar,
html[data-theme="dark"] #project-table-container,
html[data-theme="dark"] .dashboard-footer-main,
html[data-theme="dark"] .dashboard-footer-main * {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark #totalCount,
html.dark .tabs-bar .project-tab,
html[data-theme="dark"] #totalCount,
html[data-theme="dark"] .tabs-bar .project-tab {
  color: #FFFFFF !important;
}

/* ===== SYNC BUTTONS DARK MODE STYLING ===== */
html.dark button[onclick*="syncResources"],
html.dark button[onclick*="triggerManualSync"],
html.dark #syncBtn,
html[data-theme="dark"] button[onclick*="syncResources"],
html[data-theme="dark"] button[onclick*="triggerManualSync"],
html[data-theme="dark"] #syncBtn {
  background-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  border-color: #3B82F6 !important;
}

html.dark button[onclick*="syncResources"] *,
html.dark button[onclick*="triggerManualSync"] *,
html.dark #syncBtn *,
html[data-theme="dark"] button[onclick*="syncResources"] *,
html[data-theme="dark"] button[onclick*="triggerManualSync"] *,
html[data-theme="dark"] #syncBtn * {
  color: #FFFFFF !important;
}

/* ===== LOCATION BADGE TEXT COLOR OVERRIDE ===== */
html.dark table td span[style*="F3E8FF"],
html.dark table td span[style*="f3e8ff"],
html[data-theme="dark"] table td span[style*="F3E8FF"],
html[data-theme="dark"] table td span[style*="f3e8ff"] {
  color: #72308F !important;
}

/* ===== ACCESS CONTROL TAB BAR DARK MODE OVERRIDES ===== */
html.dark .tab-bar,
html[data-theme="dark"] .tab-bar,
.dark .tab-bar {
  background-color: #1E1B4B !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .tab-bar .tab,
html[data-theme="dark"] .tab-bar .tab,
.dark .tab-bar .tab {
  color: rgba(255, 255, 255, 0.7) !important;
}

html.dark .tab-bar .tab:hover,
html.dark .tab-bar .tab.active,
html[data-theme="dark"] .tab-bar .tab:hover,
html[data-theme="dark"] .tab-bar .tab.active,
.dark .tab-bar .tab:hover,
.dark .tab-bar .tab.active {
  color: #FFFFFF !important;
  border-bottom-color: #A78BFA !important;
}

/* ===== APPROVAL CENTRE PAGE HEADER & COUNT BADGE DARK MODE OVERRIDES ===== */
html.dark .page-header,
html[data-theme="dark"] .page-header {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark .page-header h1,
html.dark .page-header p,
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .page-header p {
  color: #FFFFFF !important;
}

html.dark #approvalCountBadge,
html[data-theme="dark"] #approvalCountBadge {
  background-color: #1E1B4B !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark button[onclick*="resetApprovalFilters"],
html[data-theme="dark"] button[onclick*="resetApprovalFilters"] {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark button[onclick*="resetApprovalFilters"] *,
html[data-theme="dark"] button[onclick*="resetApprovalFilters"] * {
  color: #FFFFFF !important;
}


/* ===== ACCESS CONTROL USER ROLES ASSIGN DROPDOWN & TEXT OVERRIDES ===== */
html.dark .tag-selector-input,
html.dark .dropdown-panel,
html[data-theme="dark"] .tag-selector-input,
html[data-theme="dark"] .dropdown-panel {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark .search-inner,
html[data-theme="dark"] .search-inner {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark .role-option,
html[data-theme="dark"] .role-option {
  background-color: transparent !important;
}

html.dark .role-option:hover,
html[data-theme="dark"] .role-option:hover {
  background-color: rgba(114, 48, 143, 0.3) !important;
}

html.dark .role-option span,
html.dark .role-option input + span,
html[data-theme="dark"] .role-option span,
html[data-theme="dark"] .role-option input + span {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

html.dark .role-badge,
html[data-theme="dark"] .role-badge {
  background-color: #72308F !important;
  color: #FFFFFF !important;
  border: 1px solid #A78BFA !important;
}

/* ===== ACCESS CONTROL DISTRIBUTION TAB CARDS DARK MODE OVERRIDES ===== */
html.dark div[style*="background: #F0F9FF"],
html.dark div[style*="background:#F0F9FF"],
html.dark div[style*="background: #FEF3C7"],
html.dark div[style*="background:#FEF3C7"],
html[data-theme="dark"] div[style*="background: #F0F9FF"],
html[data-theme="dark"] div[style*="background:#F0F9FF"],
html[data-theme="dark"] div[style*="background: #FEF3C7"],
html[data-theme="dark"] div[style*="background:#FEF3C7"] {
  background: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark div[style*="background: #F0F9FF"] *,
html.dark div[style*="background:#F0F9FF"] *,
html.dark div[style*="background: #FEF3C7"] *,
html.dark div[style*="background:#FEF3C7"] *,
html[data-theme="dark"] div[style*="background: #F0F9FF"] *,
html[data-theme="dark"] div[style*="background:#F0F9FF"] *,
html[data-theme="dark"] div[style*="background: #FEF3C7"] *,
html[data-theme="dark"] div[style*="background:#FEF3C7"] * {
  color: #FFFFFF !important;
}

/* ===== PURPLE BUTTONS DARK MODE STYLING (MATCHING IMAGE 5 / RESET FILTERS STYLE) ===== */
html.dark .btn-purple,
html.dark button.btn-purple,
html[data-theme="dark"] .btn-purple,
html[data-theme="dark"] button.btn-purple {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html.dark .btn-purple *,
html[data-theme="dark"] .btn-purple * {
  color: #FFFFFF !important;
}

/* ===== APPROVAL CENTRE CARD INNER DETAILS DARK MODE OVERRIDES ===== */
html.dark .reason-box,
html[data-theme="dark"] .reason-box {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark .reason-box *,
html[data-theme="dark"] .reason-box * {
  color: #FFFFFF !important;
}

html.dark .remarks-textarea,
html.dark textarea.remarks-textarea,
html[data-theme="dark"] .remarks-textarea,
html[data-theme="dark"] textarea.remarks-textarea {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark .bg-green-50,
html[data-theme="dark"] .bg-green-50 {
  background-color: #14532D !important;
  border-color: #22C55E !important;
  color: #FFFFFF !important;
}

html.dark .bg-green-50 *,
html[data-theme="dark"] .bg-green-50 * {
  color: #FFFFFF !important;
}

html.dark .bg-red-50,
html[data-theme="dark"] .bg-red-50 {
  background-color: #7F1D1D !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
}

html.dark .bg-red-50 *,
html[data-theme="dark"] .bg-red-50 * {
  color: #FFFFFF !important;
}

/* ===== PO MANAGEMENT DARK MODE OVERRIDES ===== */
html.dark button[onclick*="resetPOFilters"],
html[data-theme="dark"] button[onclick*="resetPOFilters"] {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark button[onclick*="resetPOFilters"] *,
html[data-theme="dark"] button[onclick*="resetPOFilters"] * {
  color: #FFFFFF !important;
}

html.dark #poTableView,
html.dark #po-table-container,
html.dark .dashboard-container,
html[data-theme="dark"] #poTableView,
html[data-theme="dark"] #po-table-container,
html[data-theme="dark"] .dashboard-container {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

/* ===== EDIT PO & REVENUE DASHBOARD DARK MODE OVERRIDES ===== */
html.dark .bg-purple-50,
html[data-theme="dark"] .bg-purple-50 {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark .bg-purple-50 span,
html.dark .bg-purple-50 label,
html[data-theme="dark"] .bg-purple-50 span,
html[data-theme="dark"] .bg-purple-50 label {
  color: #FFFFFF !important;
}

html.dark .po-values-grid,
html[data-theme="dark"] .po-values-grid {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark #epf_po_value,
html[data-theme="dark"] #epf_po_value {
  background-color: #1E1B4B !important;
  border-color: #A78BFA !important;
  color: #FFFFFF !important;
}

html.dark button[onclick*="triggerPOFileUpload"],
html[data-theme="dark"] button[onclick*="triggerPOFileUpload"] {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark .file-card,
html.dark #epf_po_attachments_container > div,
html[data-theme="dark"] .file-card,
html[data-theme="dark"] #epf_po_attachments_container > div {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark .milestone-header,
html.dark .milestone-summary,
html[data-theme="dark"] .milestone-header,
html[data-theme="dark"] .milestone-summary {
  background-color: #1E1B4B !important;
  color: #FFFFFF !important;
}

html.dark .tabs-wrapper,
html.dark .tab-btn,
html[data-theme="dark"] .tabs-wrapper,
html[data-theme="dark"] .tab-btn {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

html.dark .tab-btn.active,
html[data-theme="dark"] .tab-btn.active {
  background-color: #72308F !important;
  color: #FFFFFF !important;
}

html.dark div[onclick*="openDrilldown('Committed')"],
html.dark div[onclick*="openDrilldown('Upside')"],
html[data-theme="dark"] div[onclick*="openDrilldown('Committed')"],
html[data-theme="dark"] div[onclick*="openDrilldown('Upside')"] {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark div[onclick*="openDrilldown('Committed')"] *,
html.dark div[onclick*="openDrilldown('Upside')"] *,
html[data-theme="dark"] div[onclick*="openDrilldown('Committed')"] *,
html[data-theme="dark"] div[onclick*="openDrilldown('Upside')"] * {
  color: #FFFFFF !important;
}

/* ===== REVENUE DASHBOARD KPI CARDS UNIFORM DARK MODE OVERRIDES ===== */
html.dark .glass-card,
html.dark .kpi-card,
html.dark div[onclick*="openDrilldown"],
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] div[onclick*="openDrilldown"] {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

html.dark div[onclick*="openDrilldown('Achieved')"],
html.dark div[onclick*="openDrilldown('Delayed')"],
html.dark .kpi-card.red,
html[data-theme="dark"] div[onclick*="openDrilldown('Achieved')"],
html[data-theme="dark"] div[onclick*="openDrilldown('Delayed')"],
html[data-theme="dark"] .kpi-card.red {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark div[onclick*="openDrilldown('Achieved')"] #rev-stat-achieved,
html.dark div[onclick*="openDrilldown('Delayed')"] #rev-stat-delayed,
html.dark .kpi-card.red #sumDelayed,
html.dark #tab-dashboard *:not(.text-3xl):not(.badge),
html.dark .glass-card *:not(.text-3xl):not(.badge),
html.dark .kpi-card *:not(.text-3xl):not(.badge),
html.dark div[onclick*="openDrilldown"] *:not(.text-3xl):not(.badge),
html[data-theme="dark"] div[onclick*="openDrilldown('Achieved')"] #rev-stat-achieved,
html[data-theme="dark"] div[onclick*="openDrilldown('Delayed')"] #rev-stat-delayed,
html[data-theme="dark"] .kpi-card.red #sumDelayed,
html[data-theme="dark"] #tab-dashboard *:not(.text-3xl):not(.badge),
html[data-theme="dark"] .glass-card *:not(.text-3xl):not(.badge),
html[data-theme="dark"] .kpi-card *:not(.text-3xl):not(.badge),
html[data-theme="dark"] div[onclick*="openDrilldown"] *:not(.text-3xl):not(.badge) {
  color: #FFFFFF !important;
}



/* ===== PO MILESTONE SECTION HEADER DARK MODE OVERRIDES ===== */
html.dark .ms-section-header,
html.dark div[class*="ms-section-header"],
html[data-theme="dark"] .ms-section-header,
html[data-theme="dark"] div[class*="ms-section-header"] {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark .ms-section-header *,
html.dark div[class*="ms-section-header"] *,
html[data-theme="dark"] .ms-section-header *,
html[data-theme="dark"] div[class*="ms-section-header"] * {
  color: #FFFFFF !important;
}

/* ===== R1 / PARAMETER INSIGHTS REPORTS DARK MODE OVERRIDES ===== */
html.dark #tab-parameter-insights,
html.dark #tab-parameter-insights *,
html.dark .dashboard-container,
html.dark .dashboard-header,
html.dark #filterArea,
html.dark #report-container,
html.dark #report-container *,
html.dark aside,
html.dark #tableWrapper,
html.dark #reportTable,
html.dark .bg-white,
html.dark .bg-gray-50,
html[data-theme="dark"] #tab-parameter-insights,
html[data-theme="dark"] #tab-parameter-insights *,
html[data-theme="dark"] .dashboard-container,
html[data-theme="dark"] .dashboard-header,
html[data-theme="dark"] #filterArea,
html[data-theme="dark"] #report-container,
html[data-theme="dark"] #report-container *,
html[data-theme="dark"] aside,
html[data-theme="dark"] #tableWrapper,
html[data-theme="dark"] #reportTable,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-gray-50 {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark aside div,
html.dark aside button,
html.dark aside span,
html.dark aside label,
html.dark aside input,
html.dark select,
html.dark input,
html.dark button,
html[data-theme="dark"] aside div,
html[data-theme="dark"] aside button,
html[data-theme="dark"] aside span,
html[data-theme="dark"] aside label,
html[data-theme="dark"] aside input,
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] button {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

/* ===== PARAMETER INSIGHTS BUTTONS DARK MODE STYLING ===== */
html.dark button[onclick*="exportCSV"],
html.dark button[onclick*="exportPDF"],
html.dark button[onclick*="resetReport"],
html.dark button[onclick*="handlePresetBtnClick"],
html.dark button[onclick*="toggleDatePicker"],
html.dark button[onclick*="Filter"],
html.dark #savePresetBtn,
html[data-theme="dark"] button[onclick*="exportCSV"],
html[data-theme="dark"] button[onclick*="exportPDF"],
html[data-theme="dark"] button[onclick*="resetReport"],
html[data-theme="dark"] button[onclick*="handlePresetBtnClick"],
html[data-theme="dark"] button[onclick*="toggleDatePicker"],
html[data-theme="dark"] button[onclick*="Filter"],
html[data-theme="dark"] #savePresetBtn {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}

html.dark button[onclick*="exportCSV"] *,
html.dark button[onclick*="exportPDF"] *,
html.dark button[onclick*="resetReport"] *,
html.dark button[onclick*="handlePresetBtnClick"] *,
html.dark button[onclick*="toggleDatePicker"] *,
html.dark button[onclick*="Filter"] *,
html.dark #savePresetBtn *,
html[data-theme="dark"] button[onclick*="exportCSV"] *,
html[data-theme="dark"] button[onclick*="exportPDF"] *,
html[data-theme="dark"] button[onclick*="resetReport"] *,
html[data-theme="dark"] button[onclick*="handlePresetBtnClick"] *,
html[data-theme="dark"] button[onclick*="toggleDatePicker"] *,
html[data-theme="dark"] button[onclick*="Filter"] *,
html[data-theme="dark"] #savePresetBtn * {
  color: #FFFFFF !important;
}

html.dark #savePresetBtn,
html[data-theme="dark"] #savePresetBtn {
  background-color: #72308F !important;
  border-color: #A78BFA !important;
  color: #FFFFFF !important;
}


/* ===== BADGE TEXT COLOR OVERRIDES IN DARK MODE ===== */
html.dark .badge-pending,
html[data-theme="dark"] .badge-pending {
  color: #854D0E !important;
  font-weight: 700 !important;
}

/* ===== MILESTONE TABLE CONTAINER & SCROLLBAR TRACK DARK MODE OVERRIDES ===== */
html.dark .minimal-scroll,
html.dark div.minimal-scroll,
html.dark div[style*="overflow-x:auto"],
html[data-theme="dark"] .minimal-scroll,
html[data-theme="dark"] div.minimal-scroll,
html[data-theme="dark"] div[style*="overflow-x:auto"] {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark .minimal-scroll::-webkit-scrollbar,
html.dark div.minimal-scroll::-webkit-scrollbar,
html[data-theme="dark"] .minimal-scroll::-webkit-scrollbar,
html[data-theme="dark"] div.minimal-scroll::-webkit-scrollbar {
  height: 8px;
  background-color: #1E1B4B !important;
}

html.dark .minimal-scroll::-webkit-scrollbar-track,
html.dark div.minimal-scroll::-webkit-scrollbar-track,
html[data-theme="dark"] .minimal-scroll::-webkit-scrollbar-track,
html[data-theme="dark"] div.minimal-scroll::-webkit-scrollbar-track {
  background-color: #1E1B4B !important;
}

html.dark .minimal-scroll::-webkit-scrollbar-thumb,
html.dark div.minimal-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .minimal-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] div.minimal-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px;
}


html.dark .badge-delayed,
html[data-theme="dark"] .badge-delayed {
  color: #991B1B !important;
  font-weight: 700 !important;
}

html.dark .badge-invoiced,
html[data-theme="dark"] .badge-invoiced {
  color: #166534 !important;
  font-weight: 700 !important;
}

/* ===== CREATEWSR.HTML PAGE DARK MODE OVERRIDES ===== */
html.dark .dashboard-container,
html.dark .dashboard-container > div:first-child,
html.dark .dashboard-container > div:last-child,
html.dark .dashboard-footer-main,
html.dark footer,
html[data-theme="dark"] .dashboard-container,
html[data-theme="dark"] .dashboard-container > div:first-child,
html[data-theme="dark"] .dashboard-container > div:last-child,
html[data-theme="dark"] .dashboard-footer-main,
html[data-theme="dark"] footer {
  background: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark #wsrHeaderTitle,
html.dark .dashboard-container > div:first-child p,
html.dark .dashboard-container > div:last-child p,
html[data-theme="dark"] #wsrHeaderTitle,
html[data-theme="dark"] .dashboard-container > div:first-child p,
html[data-theme="dark"] .dashboard-container > div:last-child p {
  color: #FFFFFF !important;
}

/* WSR Summary Tab grid label & data cells */
html.dark #summaryTab .bg-gray-100,
html.dark #summaryTab .bg-gray-200,
html.dark #summaryTab .bg-gray-50,
html.dark #summaryTab [class*="bg-gray-"],
html.dark #summaryTab .flex.text-center.border-b.border-gray-600.bg-gray-100,
html.dark #summaryTab .bg-white,
html.dark #summaryTab div.bg-white,
html.dark #summaryTab .grid > div,
html[data-theme="dark"] #summaryTab .bg-gray-100,
html[data-theme="dark"] #summaryTab .bg-gray-200,
html[data-theme="dark"] #summaryTab .bg-gray-50,
html[data-theme="dark"] #summaryTab [class*="bg-gray-"],
html[data-theme="dark"] #summaryTab .flex.text-center.border-b.border-gray-600.bg-gray-100,
html[data-theme="dark"] #summaryTab .bg-white,
html[data-theme="dark"] #summaryTab div.bg-white,
html[data-theme="dark"] #summaryTab .grid > div {
  background: #1E1B4B !important;
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark #summaryTab .bg-gray-100 *,
html.dark #summaryTab .bg-gray-200 *,
html.dark #summaryTab .bg-gray-50 *,
html.dark #summaryTab [class*="bg-gray-"] *,
html.dark #summaryTab .bg-white *,
html[data-theme="dark"] #summaryTab .bg-gray-100 *,
html[data-theme="dark"] #summaryTab .bg-gray-200 *,
html[data-theme="dark"] #summaryTab .bg-gray-50 *,
html[data-theme="dark"] #summaryTab [class*="bg-gray-"] *,
html[data-theme="dark"] #summaryTab .bg-white * {
  color: #FFFFFF !important;
}


/* WSR Status Tab Progress Updates textarea */
html.dark #currentWeekUpdate,
html.dark #nextWeekUpdate,
html.dark textarea,
html[data-theme="dark"] #currentWeekUpdate,
html[data-theme="dark"] #nextWeekUpdate,
html[data-theme="dark"] textarea {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark .financial-input:focus,
html[data-theme="dark"] .financial-input:focus {
  background-color: #1E1B4B !important;
}

/* WSR Revenue & Cost Tab containers */
html.dark #poTab .bg-white,
html.dark #costTab .bg-white,
html.dark #financialTab .bg-white,
html.dark div:has(> #currentWeekUpdate),
html[data-theme="dark"] #poTab .bg-white,
html[data-theme="dark"] #costTab .bg-white,
html[data-theme="dark"] #financialTab .bg-white,
html[data-theme="dark"] div:has(> #currentWeekUpdate) {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

html.dark #poTab .bg-white *,
html.dark #costTab .bg-white *,
html.dark #financialTab .bg-white *,
html[data-theme="dark"] #poTab .bg-white *,
html[data-theme="dark"] #costTab .bg-white *,
html[data-theme="dark"] #financialTab .bg-white * {
  color: #FFFFFF !important;
}

/* ===== WSR DASHBOARD & DRILLDOWN STATUS BADGES TEXT COLOR OVERRIDES ===== */
html.dark .badge.blue,
html[data-theme="dark"] .badge.blue {
  color: #1E40AF !important;
  background-color: #DBEAFE !important;
  font-weight: 700 !important;
}

html.dark .badge.green,
html[data-theme="dark"] .badge.green {
  color: #166534 !important;
  background-color: #DCFCE7 !important;
  font-weight: 700 !important;
}

html.dark .badge.gray,
html[data-theme="dark"] .badge.gray {
  color: #374151 !important;
  background-color: #F3F4F6 !important;
  font-weight: 700 !important;
}

html.dark .badge.purple,
html[data-theme="dark"] .badge.purple {
  color: #6B21A8 !important;
  background-color: #F3E8FF !important;
  font-weight: 700 !important;
}

html.dark .badge.yellow,
html[data-theme="dark"] .badge.yellow {
  color: #854D0E !important;
  background-color: #FEF9C3 !important;
  font-weight: 700 !important;
}

html.dark .badge.red,
html[data-theme="dark"] .badge.red {
  color: #991B1B !important;
  background-color: #FEE2E2 !important;
  font-weight: 700 !important;
}


/* ===== PROJECT OVERVIEW & PM DASHBOARD INLINE STYLES OVERRIDES ===== */
html.dark div[style*="background:white"],
html.dark div[style*="background: white"],
html.dark div[style*="background:#ffffff"],
html.dark div[style*="background: #ffffff"],
html[data-theme="dark"] div[style*="background:white"],
html[data-theme="dark"] div[style*="background: white"],
html[data-theme="dark"] div[style*="background:#ffffff"],
html[data-theme="dark"] div[style*="background: #ffffff"] {
  background: var(--surface) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark div[style*="background:#F8FAFC"],
html.dark div[style*="background: #F8FAFC"],
html.dark div[style*="background:#F1F5F9"],
html.dark div[style*="background: #F1F5F9"],
html.dark tr[style*="background:#F1F5F9"],
html.dark tr[style*="background: #F1F5F9"],
html.dark th[style*="background:#F1F5F9"],
html.dark th[style*="background: #F1F5F9"],
html[data-theme="dark"] div[style*="background:#F8FAFC"],
html[data-theme="dark"] div[style*="background: #F8FAFC"],
html[data-theme="dark"] div[style*="background:#F1F5F9"],
html[data-theme="dark"] div[style*="background: #F1F5F9"],
html[data-theme="dark"] tr[style*="background:#F1F5F9"],
html[data-theme="dark"] tr[style*="background: #F1F5F9"],
html[data-theme="dark"] th[style*="background:#F1F5F9"],
html[data-theme="dark"] th[style*="background: #F1F5F9"] {
  background: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .kpi-box,
html[data-theme="dark"] .kpi-box,
html.dark .fin-box,
html[data-theme="dark"] .fin-box {
  background: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .kpi-value,
html[data-theme="dark"] .kpi-value,
html.dark .section-title,
html[data-theme="dark"] .section-title,
html.dark .fin-value,
html[data-theme="dark"] .fin-value {
  color: #FFFFFF !important;
}

html.dark div[style*="color:#0F172A"],
html.dark div[style*="color: #0F172A"],
html.dark h3[style*="color:#0F172A"],
html.dark h3[style*="color: #0F172A"],
html[data-theme="dark"] div[style*="color:#0F172A"],
html[data-theme="dark"] div[style*="color: #0F172A"],
html[data-theme="dark"] h3[style*="color:#0F172A"],
html[data-theme="dark"] h3[style*="color: #0F172A"] {
  color: #FFFFFF !important;
}

html.dark div[style*="color:#94A3B8"],
html.dark div[style*="color: #94A3B8"],
html[data-theme="dark"] div[style*="color:#94A3B8"],
html[data-theme="dark"] div[style*="color: #94A3B8"] {
  color: #B8B5D6 !important;
}

/* Wrapping iframe detail panel container background override in reports.html */
html.dark #tabContent > div,
html[data-theme="dark"] #tabContent > div {
  background-color: #262353 !important;
}

/* Specific count badges in project overview page header cards */
html.dark #rb-count-badge,
html[data-theme="dark"] #rb-count-badge {
  color: #581c87 !important;
}

html.dark #res-count-badge,
html[data-theme="dark"] #res-count-badge {
  color: #1e3a8a !important;
}

html.dark #risk-count-badge,
html[data-theme="dark"] #risk-count-badge {
  color: #7f1d1d !important;
}

/* Purchase Orders value text color override in dark mode */
html.dark #poList .text-\[\#72308F\],
html[data-theme="dark"] #poList .text-\[\#72308F\] {
  color: #A78BFA !important;
}

/* WSR list circular badge text color override in dark mode */
html.dark .wsr-num,
html[data-theme="dark"] .wsr-num {
  color: #FFFFFF !important;
}

/* Table headers background override to match page background (#1E1B4B) in dark mode */
html.dark #po-table-container thead th,
html[data-theme="dark"] #po-table-container thead th,
html.dark .modern-table th,
html[data-theme="dark"] .modern-table th,
html.dark #project-table-container thead th,
html[data-theme="dark"] #project-table-container thead th,
html.dark #projects-table-container thead th,
html[data-theme="dark"] #projects-table-container thead th,
html.dark table thead th,
html[data-theme="dark"] table thead th,
html.dark table thead tr,
html[data-theme="dark"] table thead tr {
  background-color: #1E1B4B !important;
  background: #1E1B4B !important;
}

/* Footer background override in dark mode */
html.dark .py-5.bg-gray-50.border-t.border-gray-100,
html[data-theme="dark"] .py-5.bg-gray-50.border-t.border-gray-100,
html.dark .bg-white.text-center.py-4.border-t.border-gray-200,
html[data-theme="dark"] .bg-white.text-center.py-4.border-t.border-gray-200 {
  background-color: #1E1B4B !important;
  background: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* High contrast text and background color overrides for badges inside project cards in dark mode */
html.dark .project-card .status-chip,
html[data-theme="dark"] .project-card .status-chip {
  color: #1e293b !important;
}
html.dark .project-card .status-chip.bg-green-100,
html[data-theme="dark"] .project-card .status-chip.bg-green-100 {
  background-color: #dcfce7 !important;
  color: #14532d !important;
}
html.dark .project-card .status-chip.bg-indigo-100,
html[data-theme="dark"] .project-card .status-chip.bg-indigo-100 {
  background-color: #e0e7ff !important;
  color: #312e81 !important;
}
html.dark .project-card .status-chip.bg-slate-100,
html[data-theme="dark"] .project-card .status-chip.bg-slate-100 {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}
html.dark .project-card .status-chip.bg-amber-100,
html[data-theme="dark"] .project-card .status-chip.bg-amber-100 {
  background-color: #fef3c7 !important;
  color: #78350f !important;
}
html.dark .project-card .status-chip.bg-red-100,
html[data-theme="dark"] .project-card .status-chip.bg-red-100 {
  background-color: #fee2e2 !important;
  color: #7f1d1d !important;
}
html.dark .project-card .status-chip.bg-purple-100,
html[data-theme="dark"] .project-card .status-chip.bg-purple-100 {
  background-color: #f3e8ff !important;
  color: #581c87 !important;
}
html.dark .project-card .status-chip.bg-blue-100,
html[data-theme="dark"] .project-card .status-chip.bg-blue-100 {
  background-color: #dbeafe !important;
  color: #1e3a8a !important;
}
html.dark .project-card .status-chip.bg-cyan-100,
html[data-theme="dark"] .project-card .status-chip.bg-cyan-100 {
  background-color: #cffafe !important;
  color: #164e63 !important;
}
html.dark .project-card .status-chip.bg-orange-100,
html[data-theme="dark"] .project-card .status-chip.bg-orange-100 {
  background-color: #ffedd5 !important;
  color: #7c2d12 !important;
}
html.dark .project-card .status-chip.bg-gray-100,
html[data-theme="dark"] .project-card .status-chip.bg-gray-100 {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* Create WSR status tab MKC header text color override in dark mode */
html.dark #statusTab h2,
html[data-theme="dark"] #statusTab h2 {
  color: #FFFFFF !important;
}

/* Create WSR status tab table header background override in dark mode */
html.dark #statusTab table thead tr,
html[data-theme="dark"] #statusTab table thead tr,
html.dark #statusTab table thead th,
html[data-theme="dark"] #statusTab table thead th {
  background-color: #1E1B4B !important;
  background: #1E1B4B !important;
}

/* Milestone table row contents text color override in dark mode */
html.dark .milestone-table-container input,
html.dark .milestone-table-container textarea,
html.dark .milestone-table-container span,
html[data-theme="dark"] .milestone-table-container input,
html[data-theme="dark"] .milestone-table-container textarea,
html[data-theme="dark"] .milestone-table-container span {
  color: #FFFFFF !important;
}

/* WSR edit page tabs headings and description text overrides in dark mode */
html.dark #baselineTab h2,
html.dark #baselineTab h2 *,
html.dark #baselineTab p,
html.dark #financialTab h2,
html.dark #financialTab h2 *,
html.dark #financialTab p,
html[data-theme="dark"] #baselineTab h2,
html[data-theme="dark"] #baselineTab h2 *,
html[data-theme="dark"] #baselineTab p,
html[data-theme="dark"] #financialTab h2,
html[data-theme="dark"] #financialTab h2 *,
html[data-theme="dark"] #financialTab p {
  color: #FFFFFF !important;
}

/* Location and workflow badge dark mode readability overrides */
html.dark #financialTab .bg-orange-100,
html[data-theme="dark"] #financialTab .bg-orange-100 {
  color: #7c2d12 !important;
}
html.dark #financialTab .bg-blue-100,
html[data-theme="dark"] #financialTab .bg-blue-100,
html.dark #baselineTab .bg-blue-100,
html[data-theme="dark"] #baselineTab .bg-blue-100 {
  color: #1e3a8a !important;
}
html.dark #financialTab .bg-teal-100,
html[data-theme="dark"] #financialTab .bg-teal-100 {
  color: #115e59 !important;
}
html.dark #financialTab .bg-green-100,
html[data-theme="dark"] #financialTab .bg-green-100,
html.dark #baselineTab .bg-green-100,
html[data-theme="dark"] #baselineTab .bg-green-100 {
  color: #14532d !important;
}
html.dark #financialTab .bg-yellow-100,
html[data-theme="dark"] #financialTab .bg-yellow-100,
html.dark #baselineTab .bg-yellow-100,
html[data-theme="dark"] #baselineTab .bg-yellow-100 {
  color: #713f12 !important;
}
html.dark #financialTab .bg-rose-100,
html[data-theme="dark"] #financialTab .bg-rose-100 {
  color: #9f1239 !important;
}
html.dark #financialTab .bg-purple-100,
html[data-theme="dark"] #financialTab .bg-purple-100,
html.dark #baselineTab .bg-purple-100,
html[data-theme="dark"] #baselineTab .bg-purple-100 {
  color: #581c87 !important;
}
html.dark #financialTab .bg-indigo-100,
html[data-theme="dark"] #financialTab .bg-indigo-100 {
  color: #312e81 !important;
}
html.dark #baselineTab .bg-gray-100,
html[data-theme="dark"] #baselineTab .bg-gray-100 {
  color: #111827 !important;
}
html.dark #baselineTab .bg-gray-200,
html[data-theme="dark"] #baselineTab .bg-gray-200 {
  color: #374151 !important;
}
html.dark #baselineTab .bg-red-100,
html[data-theme="dark"] #baselineTab .bg-red-100 {
  color: #7f1d1d !important;
}

/* WSR cost section cards dark mode styling */
html.dark #resourceCostSection,
html.dark #dynamicCostCategoryContainer > div,
html[data-theme="dark"] #resourceCostSection,
html[data-theme="dark"] #dynamicCostCategoryContainer > div {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

html.dark #resourceCostSection > h3,
html.dark #dynamicCostCategoryContainer h3,
html[data-theme="dark"] #resourceCostSection > h3,
html[data-theme="dark"] #dynamicCostCategoryContainer h3 {
  background: #1E1B4B !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}

html.dark #resourceCostSection > h3 *,
html.dark #dynamicCostCategoryContainer h3 *,
html[data-theme="dark"] #resourceCostSection > h3 *,
html[data-theme="dark"] #dynamicCostCategoryContainer h3 * {
  color: #FFFFFF !important;
}

/* WSR cost tables footer dark mode styling */
html.dark .financial-grid .financial-footer tr td,
html.dark .financial-footer,
html.dark .financial-footer td,
html[data-theme="dark"] .financial-grid .financial-footer tr td,
html[data-theme="dark"] .financial-footer,
html[data-theme="dark"] .financial-footer td {
  background: #1E1B4B !important;
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}

/* WSR milestone track accordion header dark mode styling */
html.dark .track-header,
html[data-theme="dark"] .track-header {
  background-color: #1E1B4B !important;
  background: #1E1B4B !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

html.dark .track-header *,
html[data-theme="dark"] .track-header * {
  color: #FFFFFF !important;
}

/* WSR Revenue Tab Unassigned PO Pull Bar Dark Mode Styling */
html.dark #poi-unassigned-bar,
html[data-theme="dark"] #poi-unassigned-bar {
  background: #1E1B4B !important;
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

html.dark #poi-unassigned-bar label,
html.dark #poi-unassigned-bar span,
html.dark #poi-unassigned-bar select,
html.dark #poi-unassigned-bar i,
html[data-theme="dark"] #poi-unassigned-bar label,
html[data-theme="dark"] #poi-unassigned-bar span,
html[data-theme="dark"] #poi-unassigned-bar select,
html[data-theme="dark"] #poi-unassigned-bar i {
  color: #FFFFFF !important;
}

html.dark #poi-unassigned-select,
html[data-theme="dark"] #poi-unassigned-select {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Assign PM Modal dark mode readability fixes */
html.dark #assignPMModal #modalProjectInfo,
html[data-theme="dark"] #assignPMModal #modalProjectInfo {
  color: #FFFFFF !important;
}

html.dark #assignPMModal #modalProjectInfo strong,
html[data-theme="dark"] #assignPMModal #modalProjectInfo strong {
  color: #FFFFFF !important;
}

html.dark #assignPMModal .pm-selected-list,
html[data-theme="dark"] #assignPMModal .pm-selected-list {
  background-color: #1E1B4B !important;
  background: #1E1B4B !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* PO Table row hover & selected state fixes in dark mode */
html.dark #poi-table-body tr.poi-row:hover td,
html[data-theme="dark"] #poi-table-body tr.poi-row:hover td {
  background: #2D237A !important;
  background-color: #2D237A !important;
}

html.dark #poi-table-body tr.poi-row.poi-selected td,
html[data-theme="dark"] #poi-table-body tr.poi-row.poi-selected td {
  background: #3B2E99 !important;
  background-color: #3B2E99 !important;
  border-left: 2px solid #A78BFA !important;
}

/* Upcoming milestones hover state fixes in dark mode */
html.dark #upcomingMilestonesContainer > div:hover,
html[data-theme="dark"] #upcomingMilestonesContainer > div:hover,
html.dark #milestoneList > div:hover,
html[data-theme="dark"] #milestoneList > div:hover {
  background: #2D237A !important;
  background-color: #2D237A !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Published WSR rows hover style overrides in dark mode */
html.dark .wsr-row,
html[data-theme="dark"] .wsr-row {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

html.dark .wsr-row:hover,
html[data-theme="dark"] .wsr-row:hover {
  background: #2D237A !important;
  background-color: #2D237A !important;
  border-color: #A78BFA !important;
}

/* Custom theme toggle button styling to match visual designs */
.theme-toggle-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  font-size: 15px !important;
}

/* Light mode state: Bright Sun */
html:not(.dark):not([data-theme="dark"]) .theme-toggle-btn {
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
  color: #FFFFFF !important;
}

html:not(.dark):not([data-theme="dark"]) .theme-toggle-btn:hover {
  background: linear-gradient(135deg, #FDE68A 0%, #D97706 100%) !important;
  transform: scale(1.05) !important;
}

/* Dark mode state: Black Moon */
html.dark .theme-toggle-btn,
html[data-theme="dark"] .theme-toggle-btn {
  background: #000000 !important;
  background-color: #000000 !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

html.dark .theme-toggle-btn:hover,
html[data-theme="dark"] .theme-toggle-btn:hover {
  background: #1A1A1A !important;
  background-color: #1A1A1A !important;
  transform: scale(1.05) !important;
}

/* Toggle button icon state overrides */
html.dark .theme-toggle-btn .fa-sun,
html[data-theme="dark"] .theme-toggle-btn .fa-sun {
  display: none !important;
}

html.dark .theme-toggle-btn .fa-moon,
html[data-theme="dark"] .theme-toggle-btn .fa-moon {
  display: inline-block !important;
}

html:not(.dark):not([data-theme="dark"]) .theme-toggle-btn .fa-moon {
  display: none !important;
}

html:not(.dark):not([data-theme="dark"]) .theme-toggle-btn .fa-sun {
  display: inline-block !important;
}

/* Notification Drawer Dark Mode Styles */
html.dark .notif-drawer,
html[data-theme="dark"] .notif-drawer {
  background: #262353 !important;
  color: #FFFFFF !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark .notif-drawer-header,
html[data-theme="dark"] .notif-drawer-header {
  background: #262353 !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .notif-drawer-title,
html[data-theme="dark"] .notif-drawer-title {
  color: #FFFFFF !important;
}

html.dark .notif-drawer-action-btn,
html.dark .notif-drawer-close-btn,
html[data-theme="dark"] .notif-drawer-action-btn,
html[data-theme="dark"] .notif-drawer-close-btn {
  color: rgba(255, 255, 255, 0.7) !important;
}

html.dark .notif-drawer-action-btn:hover,
html.dark .notif-drawer-close-btn:hover,
html[data-theme="dark"] .notif-drawer-action-btn:hover,
html[data-theme="dark"] .notif-drawer-close-btn:hover {
  color: #A78BFA !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html.dark .notif-drawer-filters,
html[data-theme="dark"] .notif-drawer-filters {
  background: #262353 !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .notif-filter-btn:not(.active),
html[data-theme="dark"] .notif-filter-btn:not(.active) {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark .notif-filter-btn:not(.active):hover,
html[data-theme="dark"] .notif-filter-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

html.dark .notif-drawer-body,
html[data-theme="dark"] .notif-drawer-body {
  background: #1E1B4B !important;
}

html.dark .notif-group-divider,
html[data-theme="dark"] .notif-group-divider {
  background: #1E1B4B !important;
  color: #A78BFA !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .notif-item,
html[data-theme="dark"] .notif-item {
  background: #262353 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .notif-item:hover,
html[data-theme="dark"] .notif-item:hover {
  background: #2D237A !important;
}

html.dark .notif-item.unread,
html[data-theme="dark"] .notif-item.unread {
  background: rgba(114, 48, 143, 0.15) !important;
}

html.dark .notif-item.unread::before,
html[data-theme="dark"] .notif-item.unread::before {
  background: #A78BFA !important;
}

html.dark .notif-item-proj,
html[data-theme="dark"] .notif-item-proj {
  color: #FFFFFF !important;
}

html.dark .notif-item-desc,
html[data-theme="dark"] .notif-item-desc {
  color: #B8B5D6 !important;
}

html.dark .notif-item-time,
html[data-theme="dark"] .notif-item-time {
  color: #94A3B8 !important;
}

html.dark .notif-empty,
html[data-theme="dark"] .notif-empty {
  color: #94A3B8 !important;
}

/* Alert category header text color override in Notification Details modal */
html.dark .transfer-modal-body div div[style*="color: var(--primary)"],
html[data-theme="dark"] .transfer-modal-body div div[style*="color: var(--primary)"],
html.dark .transfer-modal-body div div[style*="color:var(--primary)"],
html[data-theme="dark"] .transfer-modal-body div div[style*="color:var(--primary)"] {
  color: #FFFFFF !important;
}

/* Modal section headers color override in dark mode */
html.dark .transfer-modal-body div[style*="color:#374151"],
html[data-theme="dark"] .transfer-modal-body div[style*="color:#374151"],
html.dark .transfer-modal-body div[style*="color: #374151"],
html[data-theme="dark"] .transfer-modal-body div[style*="color: #374151"] {
  color: #FFFFFF !important;
}

/* Audit history list item text color in dark mode */
html.dark .notif-audit-history,
html.dark .notif-audit-history *,
html[data-theme="dark"] .notif-audit-history,
html[data-theme="dark"] .notif-audit-history * {
  color: #FFFFFF !important;
}

/* Comment boxes styling in dark mode */
html.dark .notif-comment-box,
html[data-theme="dark"] .notif-comment-box {
  background: #1E1B4B !important;
  color: #FFFFFF !important;
}

html.dark .notif-comment-box *,
html[data-theme="dark"] .notif-comment-box * {
  color: #FFFFFF !important;
}

/* Dark Mode Hover Overrides for PO List and Upcoming Milestones in Project Overview */
html.dark #poList > div:hover,
html[data-theme="dark"] #poList > div:hover,
html.dark #upcomingMilestonesContainer > div:hover,
html[data-theme="dark"] #upcomingMilestonesContainer > div:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Project cards text colors in dark mode */
html.dark .proj-card .proj-name,
html[data-theme="dark"] .proj-card .proj-name,
html.dark .proj-card .proj-meta,
html[data-theme="dark"] .proj-card .proj-meta,
html.dark .proj-card .text-gray-400,
html[data-theme="dark"] .proj-card .text-gray-400 {
  color: #FFFFFF !important;
}

/* WSR Health Donut Chart text overrides in dark mode */
html.dark #healthTotal,
html[data-theme="dark"] #healthTotal,
html.dark #healthTotal + span,
html[data-theme="dark"] #healthTotal + span,
html.dark #healthLegend > div > span,
html[data-theme="dark"] #healthLegend > div > span {
  color: #FFFFFF !important;
}

/* WSR Notification details issue description/remarks text color in dark mode */
html.dark .notif-issue-text,
html[data-theme="dark"] .notif-issue-text {
  color: #FFFFFF !important;
}

/* Manage WSRs button states in dark mode */
html.dark #toggleWsrEditBtn.bg-gray-100,
html[data-theme="dark"] #toggleWsrEditBtn.bg-gray-100 {
  background-color: #374151 !important;
  color: #D1D5DB !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark #toggleWsrEditBtn.bg-gray-100:hover,
html[data-theme="dark"] #toggleWsrEditBtn.bg-gray-100:hover {
  background-color: #4B5563 !important;
  color: #FFFFFF !important;
}

html.dark #toggleWsrEditBtn.bg-purple-100,
html[data-theme="dark"] #toggleWsrEditBtn.bg-purple-100 {
  background-color: #72308F !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html.dark #toggleWsrEditBtn.bg-purple-100:hover,
html[data-theme="dark"] #toggleWsrEditBtn.bg-purple-100:hover {
  background-color: #8B5CF6 !important;
}

/* Bulk Delete button override in dark mode */
html.dark #bulkDeleteBtn,
html[data-theme="dark"] #bulkDeleteBtn {
  background-color: #991B1B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html.dark #bulkDeleteBtn:hover,
html[data-theme="dark"] #bulkDeleteBtn:hover {
  background-color: #B91C1C !important;
}

/* Status Watch badge text color overrides in dark mode */
html.dark #sw-card-badge,
html[data-theme="dark"] #sw-card-badge,
html.dark #sw-panel-badge,
html[data-theme="dark"] #sw-panel-badge {
  color: #115E59 !important;
}

/* Resource Utilization & general back buttons redirecting to dashboard in dark mode */
html.dark button[onclick*="wsr-dashboard.html"],
html[data-theme="dark"] button[onclick*="wsr-dashboard.html"] {
  background-color: #374151 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark button[onclick*="wsr-dashboard.html"]:hover,
html[data-theme="dark"] button[onclick*="wsr-dashboard.html"]:hover {
  background-color: #4B5563 !important;
}

/* Light indigo backgrounds (circular back button, header icons, resource avatars) in dark mode */
html.dark .bg-indigo-50:not(.status-chip),
html[data-theme="dark"] .bg-indigo-50:not(.status-chip),
html.dark .bg-indigo-100:not(.status-chip),
html[data-theme="dark"] .bg-indigo-100:not(.status-chip) {
  background-color: #312E81 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark .bg-indigo-50:not(.status-chip):hover,
html[data-theme="dark"] .bg-indigo-50:not(.status-chip):hover,
html.dark .bg-indigo-100:not(.status-chip):hover,
html[data-theme="dark"] .bg-indigo-100:not(.status-chip):hover {
  background-color: #3730A3 !important;
}

/* Frozen field values in Project Master edit form in dark mode */
html.dark .frozen-field-value,
html[data-theme="dark"] .frozen-field-value {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Reminders modal text and label overrides in dark mode */
html.dark #reminderManagerModal .text-slate-800,
html[data-theme="dark"] #reminderManagerModal .text-slate-800,
html.dark #reminderManagerModal .text-slate-700,
html[data-theme="dark"] #reminderManagerModal .text-slate-700,
html.dark #reminderManagerModal h4,
html[data-theme="dark"] #reminderManagerModal h4 {
  color: #FFFFFF !important;
}

html.dark #reminderManagerModal .text-slate-500,
html[data-theme="dark"] #reminderManagerModal .text-slate-500,
html.dark #reminderManagerModal .text-slate-400,
html[data-theme="dark"] #reminderManagerModal .text-slate-400 {
  color: #B8B5D6 !important;
}

/* Placeholder modal text and label overrides in dark mode */
html.dark #placeholderModal h3,
html[data-theme="dark"] #placeholderModal h3,
html.dark #placeholderModal label,
html[data-theme="dark"] #placeholderModal label,
html.dark #placeholderModal summary,
html[data-theme="dark"] #placeholderModal summary {
  color: #FFFFFF !important;
}

/* Additional PM chip input container and dropdown overrides in dark mode */
html.dark .pm-autocomplete-container.pm-chip-input,
html[data-theme="dark"] .pm-autocomplete-container.pm-chip-input,
html.dark .pm-autocomplete-dropdown,
html[data-theme="dark"] .pm-autocomplete-dropdown {
  background: #262353 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark .pm-autocomplete-item,
html[data-theme="dark"] .pm-autocomplete-item {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .pm-autocomplete-item:hover,
html.dark .pm-autocomplete-item.highlighted,
html[data-theme="dark"] .pm-autocomplete-item:hover,
html[data-theme="dark"] .pm-autocomplete-item.highlighted {
  background: rgba(255, 255, 255, 0.08) !important;
}

html.dark .pm-autocomplete-item-name,
html[data-theme="dark"] .pm-autocomplete-item-name {
  color: #FFFFFF !important;
}

html.dark .pm-autocomplete-item-email,
html[data-theme="dark"] .pm-autocomplete-item-email {
  color: #B8B5D6 !important;
}

/* Cancel button in Project Master forms in dark mode */
html.dark button[onclick*="switchToActive()"],
html[data-theme="dark"] button[onclick*="switchToActive()"] {
  background-color: #374151 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark button[onclick*="switchToActive()"]:hover,
html[data-theme="dark"] button[onclick*="switchToActive()"]:hover {
  background-color: #4B5563 !important;
}

/* Full-screen pop-up panels (Compliance, Status Watch, Milestones, Activities) background overrides in dark mode */
html.dark #compliancePanel,
html[data-theme="dark"] #compliancePanel,
html.dark #statusWatchPanel,
html[data-theme="dark"] #statusWatchPanel,
html.dark #milestonesPanel,
html[data-theme="dark"] #milestonesPanel,
html.dark #activitiesPanel,
html[data-theme="dark"] #activitiesPanel,
html.dark div[style*="background:#F0F2F5"],
html[data-theme="dark"] div[style*="background:#F0F2F5"],
html.dark div[style*="background: #F0F2F5"],
html[data-theme="dark"] div[style*="background: #F0F2F5"] {
  background: #1E1B4B !important;
  background-color: #1E1B4B !important;
}

/* Review page (.container) background override in dark mode */
html.dark .container,
html[data-theme="dark"] .container {
  background-color: #262353 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

/* Quill Rich Text Editor overrides in dark mode */
html.dark .ql-toolbar,
html[data-theme="dark"] .ql-toolbar,
html.dark .ql-container,
html[data-theme="dark"] .ql-container {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html.dark .ql-editor,
html[data-theme="dark"] .ql-editor {
  background-color: #1E1B4B !important;
  color: #FFFFFF !important;
}

html.dark .ql-snow .ql-stroke,
html[data-theme="dark"] .ql-snow .ql-stroke {
  stroke: #E2E8F0 !important;
}

html.dark .ql-snow .ql-fill,
html[data-theme="dark"] .ql-snow .ql-fill {
  fill: #E2E8F0 !important;
}

html.dark .ql-snow .ql-picker,
html[data-theme="dark"] .ql-snow .ql-picker {
  color: #E2E8F0 !important;
}

html.dark .ql-snow .ql-picker-options,
html[data-theme="dark"] .ql-snow .ql-picker-options {
  background-color: #1E1B4B !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark .ql-snow .ql-picker-item,
html[data-theme="dark"] .ql-snow .ql-picker-item {
  color: #E2E8F0 !important;
}

/* Compliance detail panel text overrides in dark mode */
html.dark #compliancePanel h2,
html[data-theme="dark"] #compliancePanel h2,
html.dark #compliancePanel h3,
html[data-theme="dark"] #compliancePanel h3,
html.dark #compliancePanel h4,
html[data-theme="dark"] #compliancePanel h4 {
  color: #FFFFFF !important;
}

html.dark #compliancePanel th,
html[data-theme="dark"] #compliancePanel th {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark #compliancePanel td,
html[data-theme="dark"] #compliancePanel td {
  color: #FFFFFF !important;
}

/* Override inline colors for dark slate/black texts */
html.dark #compliancePanel [style*="color:#0F172A"],
html[data-theme="dark"] #compliancePanel [style*="color:#0F172A"],
html.dark #compliancePanel [style*="color: #0F172A"],
html[data-theme="dark"] #compliancePanel [style*="color: #0F172A"],
html.dark #compliancePanel [style*="color:#334155"],
html[data-theme="dark"] #compliancePanel [style*="color:#334155"],
html.dark #compliancePanel [style*="color: #334155"],
html[data-theme="dark"] #compliancePanel [style*="color: #334155"] {
  color: #FFFFFF !important;
}

/* Override inline colors for gray labels & sub-texts */
html.dark #compliancePanel [style*="color:#64748B"],
html[data-theme="dark"] #compliancePanel [style*="color:#64748B"],
html.dark #compliancePanel [style*="color: #64748B"],
html[data-theme="dark"] #compliancePanel [style*="color: #64748B"],
html.dark #compliancePanel [style*="color:#94A3B8"],
html[data-theme="dark"] #compliancePanel [style*="color:#94A3B8"],
html.dark #compliancePanel [style*="color: #94A3B8"],
html[data-theme="dark"] #compliancePanel [style*="color: #94A3B8"] {
  color: #B8B5D6 !important;
}

/* Full-screen panels slate text overrides in dark mode */
html.dark #statusWatchPanel .text-slate-800,
html[data-theme="dark"] #statusWatchPanel .text-slate-800,
html.dark #milestonesPanel .text-slate-800,
html[data-theme="dark"] #milestonesPanel .text-slate-800,
html.dark #activitiesPanel .text-slate-800,
html[data-theme="dark"] #activitiesPanel .text-slate-800,
html.dark #statusWatchPanel .text-slate-700,
html[data-theme="dark"] #statusWatchPanel .text-slate-700,
html.dark #milestonesPanel .text-slate-700,
html[data-theme="dark"] #milestonesPanel .text-slate-700,
html.dark #activitiesPanel .text-slate-700,
html[data-theme="dark"] #activitiesPanel .text-slate-700 {
  color: #FFFFFF !important;
}

/* Review page text element overrides in dark mode */
html.dark .container h2,
html[data-theme="dark"] .container h2,
html.dark .container h3,
html[data-theme="dark"] .container h3,
html.dark .container label,
html[data-theme="dark"] .container label {
  color: #FFFFFF !important;
}

html.dark .container .info,
html[data-theme="dark"] .container .info {
  color: #B8B5D6 !important;
}

/* Quill editor Sent By text color override in dark mode */
html.dark .ql-editor [style*="color:#666"],
html[data-theme="dark"] .ql-editor [style*="color:#666"],
html.dark .ql-editor [style*="color: #666"],
html[data-theme="dark"] .ql-editor [style*="color: #666"] {
  color: #B8B5D6 !important;
}

/* Calendar side drawer overrides in dark mode */
html.dark #calendarDrawer,
html[data-theme="dark"] #calendarDrawer {
  background-color: #262353 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Calendar drawer headers, selects and dropdown options */
html.dark #calendarDrawer .text-slate-800,
html[data-theme="dark"] #calendarDrawer .text-slate-800,
html.dark #calendarDrawer .text-slate-700,
html[data-theme="dark"] #calendarDrawer .text-slate-700,
html.dark #calendarDrawer select,
html[data-theme="dark"] #calendarDrawer select {
  color: #FFFFFF !important;
  background-color: transparent !important;
}

html.dark #calendarDrawer select option,
html[data-theme="dark"] #calendarDrawer select option {
  background-color: #262353 !important;
  color: #FFFFFF !important;
}

html.dark #calendarDrawer .text-slate-400,
html[data-theme="dark"] #calendarDrawer .text-slate-400,
html.dark #calendarDrawer .text-slate-500,
html[data-theme="dark"] #calendarDrawer .text-slate-500 {
  color: #B8B5D6 !important;
}

/* Calendar grid days overrides */
html.dark #calendarDrawer .calendar-day-header,
html[data-theme="dark"] #calendarDrawer .calendar-day-header {
  color: #94A3B8 !important;
}

html.dark #calendarDrawer .calendar-day,
html[data-theme="dark"] #calendarDrawer .calendar-day {
  color: #E2E8F0 !important;
}

html.dark #calendarDrawer .calendar-day:hover,
html[data-theme="dark"] #calendarDrawer .calendar-day:hover {
  background-color: #374151 !important;
}

html.dark #calendarDrawer .calendar-day.other-month,
html[data-theme="dark"] #calendarDrawer .calendar-day.other-month {
  color: #64748B !important;
}

html.dark #calendarDrawer .calendar-day.today,
html[data-theme="dark"] #calendarDrawer .calendar-day.today {
  background-color: #4C1D95 !important;
  color: #FFFFFF !important;
}

html.dark #calendarDrawer .calendar-day.has-milestone,
html[data-theme="dark"] #calendarDrawer .calendar-day.has-milestone {
  background-color: #1E3A8A !important;
  color: #60A5FA !important;
}

html.dark #calendarDrawer .calendar-day.has-milestone.high-urgency,
html[data-theme="dark"] #calendarDrawer .calendar-day.has-milestone.high-urgency {
  background-color: #7F1D1D !important;
  color: #F87171 !important;
}

html.dark #calendarDrawer .calendar-day.selected,
html[data-theme="dark"] #calendarDrawer .calendar-day.selected {
  background-color: #72308F !important;
  color: #FFFFFF !important;
}

/* Modal backdrop overrides with blur in dark mode */
html.dark .modal,
html[data-theme="dark"] .modal {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* ===== TRANSFER MODAL SUGGESTIONS (DARK MODE) ===== */
html.dark .transfer-suggestion-item,
html[data-theme="dark"] .transfer-suggestion-item {
  background: var(--surface) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .transfer-suggestion-item:hover,
html[data-theme="dark"] .transfer-suggestion-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

html.dark .transfer-suggestion-name,
html[data-theme="dark"] .transfer-suggestion-name {
  color: #FFFFFF !important;
}

html.dark .transfer-suggestion-email,
html[data-theme="dark"] .transfer-suggestion-email {
  color: #B8B5D6 !important;
}

/* ===== PROFILE DROPDOWN MENU ITEMS (DARK MODE) ===== */
html.dark .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .dropdown-item-danger:hover,
html[data-theme="dark"] .dropdown-item-danger:hover {
  background-color: rgba(239, 68, 68, 0.15) !important;
}