/**
 * College ERP India — Comprehensive Enterprise Dark Mode Stylesheet
 * Guarantees 100% Contrast, Flawless Readability, and Zero Invisible Text in Dark Theme Site-Wide
 */

/* =========================================================================
   1. BASE CANVAS & CORE RESETS
   ========================================================================= */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #070C1E !important;
  color: #E2E8F0 !important;
}

/* Page Sections & Full-Width Canvas */
html.dark section.bg-white,
html.dark section[class*="bg-white"],
html.dark section.bg-slate-50,
html.dark section[class*="bg-slate-50"],
html.dark section.bg-gradient-to-b,
html.dark main.bg-brand-canvas,
html.dark .bg-brand-canvas {
  background-image: none !important;
  background-color: #070C1E !important;
  border-color: #1E293B !important;
}

/* =========================================================================
   2. CARDS & ELEVATED CONTAINERS
   ========================================================================= */
html.dark .bg-white,
html.dark div.bg-white,
html.dark div[class*="bg-white/"],
html.dark div[class*="bg-white\\/"],
html.dark [class*="rounded-2xl"].bg-white,
html.dark [class*="rounded-3xl"].bg-white,
html.dark [class*="rounded-xl"].bg-white,
html.dark .card-premium,
html.dark .feature-card,
html.dark .module-card,
html.dark .workflow-step-card {
  background-image: none !important;
  background-color: #0F172A !important;
  border-color: #1E293B !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45) !important;
}

/* Secondary Panels, Sub-cards & Nested Boxes */
html.dark div.bg-slate-50,
html.dark div[class*="bg-slate-50"],
html.dark div.bg-slate-100,
html.dark div[class*="bg-slate-100"],
html.dark aside[class*="bg-slate-50"] {
  background-color: #0F172A !important;
  border-color: #1E293B !important;
}

/* =========================================================================
   3. CRITICAL SUBMENU DIRECTORY & LIST ITEMS (FIXES INVISIBLE WHITE-ON-WHITE)
   ========================================================================= */
html.dark li.bg-white,
html.dark li[class*="bg-white"],
html.dark .submenu-list-item {
  background-color: #162035 !important;
  border-color: #243048 !important;
  color: #F8FAFC !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3) !important;
}

html.dark li.bg-white:hover,
html.dark li[class*="bg-white"]:hover,
html.dark .submenu-list-item:hover {
  background-color: #1E2D4A !important;
  border-color: #334155 !important;
}

html.dark li.bg-white span,
html.dark li[class*="bg-white"] span,
html.dark .submenu-list-item span,
html.dark .submenu-item-title {
  color: #F8FAFC !important;
}

/* Count Badge on Submenu Directory */
html.dark span.bg-white,
html.dark span[class*="bg-white"],
html.dark .submenu-count-badge {
  background-color: #162035 !important;
  border-color: #243048 !important;
  color: #CBD5E1 !important;
}

/* Included / Verified Badges */
html.dark .submenu-included-badge,
html.dark span.bg-emerald-50,
html.dark span.bg-emerald-100 {
  background-color: rgba(6, 78, 59, 0.45) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34D399 !important;
}

html.dark span.bg-emerald-50 svg,
html.dark span.bg-emerald-100 svg,
html.dark .submenu-included-badge svg {
  color: #34D399 !important;
}

/* Submenu Directory Group Card */
html.dark .submenu-group-card {
  background-color: #0F172A !important;
  border-color: #1E293B !important;
}

/* =========================================================================
   4. HOVER OVERRIDES (PREVENTS BLINDING WHITE/LIGHT-GRAY FLASH ON HOVER)
   ========================================================================= */
html.dark [class*="hover:bg-white"]:hover,
html.dark [class*="hover:bg-slate-50"]:hover,
html.dark [class*="hover:bg-slate-100"]:hover,
html.dark [class*="hover:bg-gray-50"]:hover,
html.dark [class*="hover:bg-gray-100"]:hover,
html.dark .feature-card:hover,
html.dark .card-premium:hover,
html.dark .module-card:hover {
  background-color: #162035 !important;
  border-color: #334155 !important;
}

/* =========================================================================
   5. INTERACTIVE TABS, PILLS & SWITCHERS
   ========================================================================= */
/* Inactive Showcase Tabs */
html.dark .showcase-tab-btn:not(.active),
html.dark button.bg-white:not(.btn-primary) {
  background-color: #162035 !important;
  border-color: #243048 !important;
  color: #CBD5E1 !important;
}

html.dark .showcase-tab-btn:not(.active):hover,
html.dark button.bg-white:not(.btn-primary):hover {
  background-color: #1E2D4A !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
}

/* Active Tab */
html.dark .showcase-tab-btn.active {
  background-color: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.4) !important;
}

/* Feature Highlights Checkmark Icons */
html.dark .showcase-feature-icon,
html.dark div.bg-emerald-100 {
  background-color: rgba(6, 78, 59, 0.45) !important;
  color: #34D399 !important;
}

html.dark div.bg-emerald-100 svg,
html.dark .showcase-feature-icon svg {
  color: #34D399 !important;
}

html.dark .showcase-feature-text {
  color: #E2E8F0 !important;
}

/* Modules.php Filter Pills */
html.dark .cluster-btn:not(.active) {
  background-color: #162035 !important;
  border: 1px solid #243048 !important;
  color: #CBD5E1 !important;
}

html.dark .cluster-btn:not(.active):hover {
  background-color: #1E2D4A !important;
  color: #FFFFFF !important;
  border-color: #334155 !important;
}

html.dark .cluster-btn.active {
  background-color: #EF4444 !important;
  color: #FFFFFF !important;
}

/* Modules.php Layout Switcher */
html.dark #btn-view-cards,
html.dark #btn-view-table {
  background-color: #162035 !important;
  color: #CBD5E1 !important;
  border-color: #243048 !important;
}

html.dark #btn-view-cards.bg-white,
html.dark #btn-view-table.bg-white {
  background-color: #0F172A !important;
  color: #F8FAFC !important;
}

/* Submenu items inside modules.php cards */
html.dark .module-card div.bg-slate-50\/80,
html.dark .module-card div[class*="bg-slate-50"] {
  background-color: #162035 !important;
  border-color: #243048 !important;
  color: #F8FAFC !important;
}

html.dark .module-card div[class*="bg-slate-50"]:hover {
  background-color: #1E2D4A !important;
  border-color: #334155 !important;
}

html.dark .module-card .submenu-item {
  color: #F8FAFC !important;
}

/* Master Register Table in modules.php */
html.dark tr.table-row-item {
  border-color: #1E293B !important;
}

html.dark tr.table-row-item:hover {
  background-color: #162035 !important;
}

html.dark tr.table-row-item span.bg-white {
  background-color: #162035 !important;
  border-color: #243048 !important;
  color: #CBD5E1 !important;
}

html.dark tr.table-row-item .bg-slate-100 {
  background-color: #162035 !important;
  border-color: #243048 !important;
  color: #CBD5E1 !important;
}

/* =========================================================================
   6. MODULE HERO COMPONENT OVERRIDES
   ========================================================================= */
html.dark .right-dashboard-card {
  background-color: #0F172A !important;
  border-color: #1E293B !important;
}

html.dark .module-metric-card {
  border-color: #243048 !important;
}

html.dark .module-activity-row {
  background-color: #162035 !important;
  border-color: #243048 !important;
  color: #CBD5E1 !important;
}

/* Watermark SVG Icons (Opacity Fix) */
html.dark svg.text-slate-100,
html.dark .text-slate-100 svg,
html.dark .watermark-svg {
  color: rgba(255, 255, 255, 0.05) !important;
  fill: currentColor !important;
}

/* Hero Secondary Action Button */
html.dark a.bg-white,
html.dark a[class*="bg-white"],
html.dark .btn-secondary,
html.dark a.btn-secondary {
  background-color: #162035 !important;
  border-color: #243048 !important;
  color: #F1F5F9 !important;
}

html.dark a.bg-white:hover,
html.dark a[class*="bg-white"]:hover,
html.dark .btn-secondary:hover,
html.dark a.btn-secondary:hover {
  background-color: #1E2D4A !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
}

/* =========================================================================
   7. COLOR PALETTE TINTS (EMERALD, BLUE, PURPLE, AMBER, RED)
   ========================================================================= */
/* Blue Tinted Badges & Metric Boxes */
html.dark span.bg-blue-50,
html.dark span.bg-blue-100,
html.dark div.bg-blue-50,
html.dark div[class*="bg-blue-50"],
html.dark div.bg-blue-100 {
  background-color: rgba(30, 58, 138, 0.3) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: #93C5FD !important;
}

/* Purple Tinted Badges & Metric Boxes */
html.dark span.bg-purple-50,
html.dark span.bg-purple-100,
html.dark div.bg-purple-50,
html.dark div[class*="bg-purple-50"],
html.dark div.bg-purple-100 {
  background-color: rgba(88, 28, 135, 0.3) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  color: #C084FC !important;
}

/* Amber / Orange Tinted Badges & Metric Boxes */
html.dark span.bg-amber-50,
html.dark span.bg-amber-100,
html.dark div.bg-amber-50,
html.dark div[class*="bg-amber-50"],
html.dark div.bg-amber-100 {
  background-color: rgba(120, 53, 15, 0.3) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #FBBF24 !important;
}

/* Red / Rose Tinted Badges & Metric Boxes */
html.dark span.bg-red-50,
html.dark span[class*="bg-red-50"],
html.dark span.bg-red-100,
html.dark div.bg-red-50,
html.dark div[class*="bg-red-50"],
html.dark div.bg-red-100,
html.dark div.bg-rose-50,
html.dark div[class*="bg-rose-50"],
html.dark span.bg-rose-50 {
  background-color: rgba(127, 29, 29, 0.3) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #F87171 !important;
}

/* Emerald Tinted Metric Boxes */
html.dark div.bg-emerald-50,
html.dark div[class*="bg-emerald-50"] {
  background-color: rgba(6, 78, 59, 0.3) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34D399 !important;
}

/* Indigo Tinted Boxes (e.g. Enterprise Slab) */
html.dark div.bg-indigo-50,
html.dark div[class*="bg-indigo-50"] {
  background-color: rgba(49, 46, 129, 0.35) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  color: #C7D2FE !important;
}

html.dark div[class*="bg-indigo-50"] p,
html.dark div[class*="bg-indigo-50"] span {
  color: #C7D2FE !important;
}

/* =========================================================================
   8. PRICING PAGE COMPONENT OVERRIDES
   ========================================================================= */
/* Pricing Comparison Table High Contrast */
html.dark .pricing-table-row:nth-child(even) {
  background-color: #0B1533 !important;
}
html.dark .pricing-table-row:nth-child(odd) {
  background-color: #070C1E !important;
}
html.dark .pricing-table-row:hover {
  background-color: #16254C !important;
}
html.dark .enterprise-col {
  background-color: rgba(99, 102, 241, 0.12) !important;
}
html.dark .pricing-table-row:nth-child(even) .enterprise-col {
  background-color: rgba(99, 102, 241, 0.16) !important;
}
html.dark .pricing-table-row:hover .enterprise-col {
  background-color: rgba(99, 102, 241, 0.22) !important;
}
html.dark .pricing-table-row td {
  border-color: #1E293B !important;
  color: #CBD5E1 !important;
}

/* Header Plan Cards in Pricing */
html.dark th div.bg-white {
  background-color: #0F172A !important;
  border-color: #243048 !important;
}

html.dark tfoot tr.bg-slate-50 {
  background-color: #0F172A !important;
  border-color: #1E293B !important;
}

/* Cost Calculator */
html.dark #calc-students-slider {
  background-color: #1E293B !important;
}

/* FAQ Accordion in Dark Mode */
html.dark details {
  background-color: transparent !important;
  border-color: #1E293B !important;
}

html.dark details:hover {
  background-color: rgba(22, 32, 53, 0.4) !important;
}

html.dark details summary span {
  color: #F8FAFC !important;
}

html.dark details div {
  color: #CBD5E1 !important;
}

/* =========================================================================
   9. FORM INPUTS, TEXTAREAS & SELECTS
   ========================================================================= */
html.dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
  background-color: #162035 !important;
  border-color: #243048 !important;
  color: #F8FAFC !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus,
html.dark [class*="focus:bg-white"]:focus {
  background-color: #1E2D4A !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
}

html.dark label {
  color: #CBD5E1 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748B !important;
}

/* =========================================================================
   10. MODALS & NAVIGATION DRAWER
   ========================================================================= */
html.dark #brochure-modal-card,
html.dark #demo-modal-card {
  background-color: #0F172A !important;
  border-color: #1E293B !important;
}

html.dark .img-lightbox-modal {
  background: rgba(3, 7, 18, 0.96) !important;
}

/* Mobile Drawer */
html.dark #mobile-drawer-panel {
  background-color: #0F172A !important;
  border-left: 1px solid #1E293B !important;
  color: #F8FAFC !important;
}

html.dark #mobile-drawer-panel .bg-white {
  background-color: #0F172A !important;
  border-color: #1E293B !important;
}

html.dark #mobile-drawer-panel a:not(.btn-primary) {
  color: #CBD5E1 !important;
}

html.dark #mobile-drawer-panel a:not(.btn-primary):hover {
  background-color: #162035 !important;
  color: #FFFFFF !important;
}

/* Mega-Menu Panel */
html.dark .dropdown-panel > div {
  background-color: #0F172A !important;
  border-color: #1E293B !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7) !important;
}

html.dark .dropdown-panel a:hover {
  background-color: #162035 !important;
}

html.dark .dropdown-panel .bg-slate-50\/80 {
  background-color: #162035 !important;
  border-color: #1E293B !important;
}

/* =========================================================================
   11. TYPOGRAPHY & CONTRAST REINFORCEMENTS
   ========================================================================= */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .text-brand-navy,
html.dark .text-slate-800,
html.dark .text-slate-900 {
  color: #F8FAFC !important;
}

html.dark p,
html.dark [class*="text-slate-600"],
html.dark [class*="text-slate-700"] {
  color: #CBD5E1 !important;
}

html.dark [class*="text-slate-500"] {
  color: #94A3B8 !important;
}

html.dark [class*="text-slate-400"] {
  color: #64748B !important;
}

html.dark .text-brand-red {
  color: #FF4D5E !important;
}

/* Border Overrides */
html.dark .border-slate-200,
html.dark .border-slate-200\/90,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/60,
html.dark .border-slate-200\/50,
html.dark .border-slate-100,
html.dark .border-brand-border,
html.dark .divide-slate-200,
html.dark .divide-slate-100 {
  border-color: #1E293B !important;
}

/* Tables */
html.dark table {
  border-color: #1E293B !important;
}

html.dark th {
  background-color: #162035 !important;
  color: #F8FAFC !important;
  border-color: #1E293B !important;
}

html.dark td {
  border-color: #1E293B !important;
  color: #CBD5E1 !important;
}

html.dark tr.bg-slate-50,
html.dark tr:nth-child(even) {
  background-color: rgba(22, 32, 53, 0.5) !important;
}