/* ============================================================
   TutorDesk v3 — Dark Mode Overrides
   Emerald Green (#10B981) + Amber/Gold (#F59E0B)
   Activated via html.dark class
   ============================================================ */

/* ----------------------------------------------------------
   1. GLOBAL THEME TRANSITION
   ---------------------------------------------------------- */
html.dark,
html.dark *,
html.dark *::before,
html.dark *::after {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Exclude elements that need their own transitions */
html.dark .btn,
html.dark .nav-item,
html.dark .modal,
html.dark .dropdown-menu,
html.dark .flash,
html.dark .animate-fadeIn,
html.dark .animate-fadeInUp,
html.dark .animate-scaleIn,
html.dark .animate-slideInLeft,
html.dark .animate-slideInRight {
  transition: all 0.15s ease;
}

/* ----------------------------------------------------------
   2. ROOT VARIABLE OVERRIDES
   ---------------------------------------------------------- */
html.dark {
  --bg-body:     #0f172a;
  --bg-card:     #1e293b;
  --bg-input:    #1e293b;
  --bg-hover:    #334155;
  --bg-surface:  #1e293b;

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary:  #64748b;
  --text-inverse:   #0f172a;
  --text-link:      #34d399;

  --border-color: #334155;
  --border-light: #1e293b;
  --border-focus: #34d399;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow:     0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3);
  --shadow-md:  0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3);
  --shadow-lg:  0 20px 25px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.3);
  --shadow-xl:  0 25px 50px -12px rgba(0,0,0,0.6);

  --neutral-50:  #1e293b;
  --neutral-100: #334155;
  --neutral-200: #475569;
  --neutral-300: #64748b;
  --neutral-400: #94a3b8;

  --success-light: rgba(16, 185, 129, 0.15);
  --error-light:   rgba(239, 68, 68, 0.15);
  --warning-light: rgba(245, 158, 11, 0.15);
  --info-light:    rgba(59, 130, 246, 0.15);
}

/* ----------------------------------------------------------
   3. BODY, HEADINGS, PARAGRAPHS, LINKS
   ---------------------------------------------------------- */
html.dark body {
  background-color: var(--bg-body);
  color: var(--text-primary);
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: var(--text-primary);
}

html.dark p {
  color: var(--text-secondary);
}

html.dark a {
  color: var(--text-link);
}

html.dark a:hover {
  color: #6ee7b7;
}

/* ----------------------------------------------------------
   4. CARDS
   ---------------------------------------------------------- */
html.dark .card {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

html.dark .card-header {
  border-bottom-color: var(--border-color);
}

html.dark .card-footer {
  background-color: rgba(0, 0, 0, 0.2);
  border-top-color: var(--border-color);
}

html.dark .card-glow {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}

html.dark .card-glow:hover {
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}

/* ----------------------------------------------------------
   5. FORMS
   ---------------------------------------------------------- */
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea {
  background-color: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-primary);
}

html.dark .form-input::placeholder,
html.dark .form-textarea::placeholder {
  color: var(--text-tertiary);
}

html.dark .form-input:hover,
html.dark .form-select:hover,
html.dark .form-textarea:hover {
  border-color: var(--primary-400);
}

html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark .form-textarea:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
  background-color: #0f172a;
}

html.dark .form-input.error,
html.dark .form-select.error,
html.dark .form-textarea.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

html.dark .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

html.dark .form-label {
  color: var(--text-primary);
}

html.dark .form-hint {
  color: var(--text-tertiary);
}

html.dark .form-input:disabled,
html.dark .form-select:disabled,
html.dark .form-textarea:disabled {
  background-color: #0f172a;
  color: var(--text-tertiary);
  border-color: #1e293b;
}

html.dark .form-check-label {
  color: var(--text-secondary);
}

/* ----------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------- */
html.dark .btn-outline {
  color: var(--primary-400);
  border-color: var(--primary-700);
}

html.dark .btn-outline:hover {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: var(--primary-500);
  color: var(--primary-300);
}

html.dark .btn-ghost {
  color: var(--text-secondary);
}

html.dark .btn-ghost:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* Primary, accent, danger keep their gradients */

/* ----------------------------------------------------------
   7. TABLES
   ---------------------------------------------------------- */
html.dark .table-wrapper {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

html.dark .table thead {
  background-color: rgba(0, 0, 0, 0.2);
}

html.dark .table thead th {
  color: var(--text-tertiary);
  border-bottom-color: var(--border-color);
}

html.dark .table tbody td {
  color: var(--text-primary);
  border-bottom-color: var(--border-light);
}

html.dark .table tbody tr:hover {
  background-color: rgba(16, 185, 129, 0.08);
}

html.dark .table tbody tr.selected {
  background-color: rgba(16, 185, 129, 0.15);
}

/* ----------------------------------------------------------
   8. BADGES
   ---------------------------------------------------------- */
html.dark .badge-primary {
  background-color: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .badge-accent {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html.dark .badge-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .badge-error {
  background-color: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

html.dark .badge-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html.dark .badge-info {
  background-color: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

/* ----------------------------------------------------------
   9. FLASH MESSAGES
   ---------------------------------------------------------- */
html.dark .flash-success {
  background-color: rgba(16, 185, 129, 0.12);
  border-left-color: var(--success);
  color: #6ee7b7;
}

html.dark .flash-error {
  background-color: rgba(239, 68, 68, 0.12);
  border-left-color: var(--error);
  color: #fca5a5;
}

html.dark .flash-warning {
  background-color: rgba(245, 158, 11, 0.12);
  border-left-color: var(--warning);
  color: #fcd34d;
}

html.dark .flash-info {
  background-color: rgba(59, 130, 246, 0.12);
  border-left-color: var(--info);
  color: #93c5fd;
}

/* ----------------------------------------------------------
   10. MODAL
   ---------------------------------------------------------- */
html.dark .modal-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

html.dark .modal {
  background-color: var(--bg-card);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

html.dark .modal-header {
  border-bottom-color: var(--border-color);
}

html.dark .modal-header h3 {
  color: var(--text-primary);
}

html.dark .modal-close {
  color: var(--text-tertiary);
}

html.dark .modal-close:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

html.dark .modal-footer {
  border-top-color: var(--border-color);
}

/* ----------------------------------------------------------
   11. DROPDOWN
   ---------------------------------------------------------- */
html.dark .dropdown-menu {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg);
}

html.dark .dropdown-item {
  color: var(--text-secondary);
}

html.dark .dropdown-item:hover {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--primary-400);
}

html.dark .dropdown-divider {
  background-color: var(--border-color);
}

/* ----------------------------------------------------------
   12. PAGINATION
   ---------------------------------------------------------- */
html.dark .pagination-link {
  color: var(--text-secondary);
}

html.dark .pagination-link:hover {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--primary-400);
}

html.dark .pagination-item.active .pagination-link {
  background: var(--gradient-primary);
  color: #ffffff;
}

/* ----------------------------------------------------------
   13. PROGRESS
   ---------------------------------------------------------- */
html.dark .progress {
  background-color: #334155;
}

/* ----------------------------------------------------------
   14. TOOLTIP
   ---------------------------------------------------------- */
html.dark .tooltip::after {
  background-color: #475569;
}

html.dark .tooltip::before {
  border-top-color: #475569;
}

/* ----------------------------------------------------------
   15. DIVIDER
   ---------------------------------------------------------- */
html.dark .divider {
  border-top-color: var(--border-color);
}

html.dark .divider-text {
  color: var(--text-tertiary);
}

html.dark .divider-text::before,
html.dark .divider-text::after {
  background-color: var(--border-color);
}

/* ----------------------------------------------------------
   16. SKELETON
   ---------------------------------------------------------- */
html.dark .skeleton {
  background: linear-gradient(90deg,
    #334155 25%,
    #475569 50%,
    #334155 75%
  );
  background-size: 200% 100%;
}

/* ----------------------------------------------------------
   17. SCROLLBAR
   ---------------------------------------------------------- */
html.dark ::-webkit-scrollbar-thumb {
  background-color: #475569;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background-color: #64748b;
}

html.dark * {
  scrollbar-color: #475569 transparent;
}

/* ----------------------------------------------------------
   18. SELECTION
   ---------------------------------------------------------- */
html.dark ::selection {
  background-color: rgba(16, 185, 129, 0.3);
  color: #f1f5f9;
}

html.dark ::-moz-selection {
  background-color: rgba(16, 185, 129, 0.3);
  color: #f1f5f9;
}

/* ==========================================================
   LANDING PAGE — DARK MODE
   ========================================================== */

/* ----------------------------------------------------------
   19. LANDING PAGE BASE
   ---------------------------------------------------------- */
html.dark .landing-page {
  background-color: #0f172a;
}

/* ----------------------------------------------------------
   20. LANDING NAVIGATION — CRITICAL
   Keep GREEN glassmorphism when not scrolled!
   ---------------------------------------------------------- */
html.dark .landing-nav:not(.scrolled) {
  background: rgba(5, 150, 105, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
  transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

html.dark .landing-nav:not(.scrolled) .nav-logo-text {
  color: #ffffff;
}

html.dark .landing-nav:not(.scrolled) .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .landing-nav:not(.scrolled) .nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

html.dark .landing-nav:not(.scrolled) .hamburger span {
  background: #ffffff;
}

html.dark .landing-nav:not(.scrolled) .dark-mode-toggle .icon-sun,
html.dark .landing-nav:not(.scrolled) .dark-mode-toggle .icon-moon {
  color: #ffffff;
}

html.dark .landing-nav:not(.scrolled) .dark-mode-toggle {
  background: rgba(255, 255, 255, 0.15);
}

html.dark .landing-nav:not(.scrolled) .nav-cta .btn-login {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
}

html.dark .landing-nav:not(.scrolled) .nav-cta .btn-login:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Scrolled state: dark glassmorphism */
html.dark .landing-nav.scrolled {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

html.dark .landing-nav.scrolled .nav-logo-text {
  color: #f1f5f9;
}

html.dark .landing-nav.scrolled .nav-link {
  color: #94a3b8;
}

html.dark .landing-nav.scrolled .nav-link:hover {
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
}

html.dark .landing-nav.scrolled .hamburger span {
  background: #f1f5f9;
}

html.dark .landing-nav.scrolled .dark-mode-toggle {
  background: #334155;
}

html.dark .landing-nav.scrolled .dark-mode-toggle .icon-sun,
html.dark .landing-nav.scrolled .dark-mode-toggle .icon-moon {
  color: #94a3b8;
}

html.dark .landing-nav.scrolled .nav-cta .btn-login {
  color: #34d399;
  border-color: var(--primary-700);
}

html.dark .landing-nav.scrolled .nav-cta .btn-login:hover {
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
}

/* Mobile menu in dark mode */
html.dark .mobile-menu {
  background: rgba(5, 150, 105, 0.85);
  backdrop-filter: blur(20px);
}

html.dark .mobile-menu .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .mobile-menu .nav-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

html.dark .mobile-menu-divider {
  background: rgba(255, 255, 255, 0.2);
}

/* ----------------------------------------------------------
   21. HERO — DARKER GREEN GRADIENT
   ---------------------------------------------------------- */
html.dark .hero {
  background: var(--landing-hero-gradient-dark);
}

html.dark .hero-badge {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

html.dark .hero-title {
  color: #ffffff;
}

html.dark .hero-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

html.dark .hero-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

html.dark .hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
}

html.dark .hero-illustration .float-item {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark .hero-illustration .float-graduation {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.2);
}

html.dark .hero-illustration .float-bulb {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.2);
}

/* ----------------------------------------------------------
   22. SECTION BASE DARK
   ---------------------------------------------------------- */
html.dark .section-label {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
}

html.dark .section-title {
  color: #f1f5f9;
}

html.dark .section-title .highlight {
  background: linear-gradient(135deg, #34d399, #6ee7b7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.dark .section-desc {
  color: #94a3b8;
}

/* ----------------------------------------------------------
   23. WHO IS IT FOR — DARK
   ---------------------------------------------------------- */
html.dark .who-for-section {
  background: #0f172a;
}

html.dark .who-card {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(12px);
  border-color: rgba(51, 65, 85, 0.6);
}

html.dark .who-card:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(52, 211, 153, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

html.dark .who-card-title {
  color: #f1f5f9;
}

html.dark .who-card-desc {
  color: #94a3b8;
}

html.dark .who-card:nth-child(1) .who-card-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .who-card:nth-child(2) .who-card-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html.dark .who-card:nth-child(3) .who-card-icon {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
}

html.dark .who-card:nth-child(4) .who-card-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* ----------------------------------------------------------
   24. FEATURES SECTION — DARK
   ---------------------------------------------------------- */
html.dark .features-section {
  background: #0f172a;
}

html.dark .feature-card {
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(12px);
  border-color: #334155;
}

html.dark .feature-card:hover {
  border-color: rgba(52, 211, 153, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

html.dark .feature-title {
  color: #f1f5f9;
}

html.dark .feature-desc {
  color: #94a3b8;
}

html.dark .feature-icon.green {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .feature-icon.amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

/* ----------------------------------------------------------
   25. STATS SECTION — DARKER GRADIENT
   ---------------------------------------------------------- */
html.dark .stats-section {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%);
}

/* ----------------------------------------------------------
   26. PRICING SECTION — DARK
   ---------------------------------------------------------- */
html.dark .pricing-section {
  background: #0f172a;
}

html.dark .pricing-card {
  background: var(--bg-card);
  border-color: #334155;
}

html.dark .pricing-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

html.dark .pricing-card.featured {
  border-color: var(--primary-600);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.2);
}

html.dark .pricing-name {
  color: #f1f5f9;
}

html.dark .pricing-desc {
  color: #64748b;
}

html.dark .pricing-value {
  color: #f1f5f9;
}

html.dark .pricing-currency {
  color: #94a3b8;
}

html.dark .pricing-period {
  color: #64748b;
}

html.dark .pricing-features li {
  color: #94a3b8;
}

html.dark .pricing-features li .check-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .pricing-features li.disabled .check-icon {
  background: #334155;
  color: #475569;
}

html.dark .pricing-btn-outline {
  color: #6ee7b7;
  border-color: var(--primary-700);
}

html.dark .pricing-btn-outline:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--primary-500);
  color: #34d399;
}

/* ----------------------------------------------------------
   27. FAQ SECTION — DARK
   ---------------------------------------------------------- */
html.dark .faq-section {
  background: #0f172a;
}

html.dark .faq-item {
  background: var(--bg-card);
  border-color: #334155;
}

html.dark .faq-item:hover {
  border-color: var(--primary-700);
}

html.dark .faq-item.active {
  border-color: var(--primary-600);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

html.dark .faq-question {
  color: #f1f5f9;
}

html.dark .faq-question:hover {
  color: #6ee7b7;
}

html.dark .faq-item.active .faq-question {
  color: #6ee7b7;
}

html.dark .faq-chevron {
  color: #64748b;
}

html.dark .faq-item.active .faq-chevron {
  color: #6ee7b7;
}

html.dark .faq-answer-inner {
  color: #94a3b8;
}

/* ----------------------------------------------------------
   28. CONTACT SECTION — DARK
   ---------------------------------------------------------- */
html.dark .contact-section {
  background: #0f172a;
}

html.dark .contact-form .form-input,
html.dark .contact-form .form-textarea {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

html.dark .contact-form .form-input::placeholder,
html.dark .contact-form .form-textarea::placeholder {
  color: #64748b;
}

html.dark .contact-form .form-input:focus,
html.dark .contact-form .form-textarea:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
  background-color: #1e293b;
}

html.dark .contact-info-title {
  color: #f1f5f9;
}

html.dark .contact-info-text {
  color: #94a3b8;
}

html.dark .contact-info-icon.green {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .contact-info-icon.amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

/* ----------------------------------------------------------
   29. CTA SECTION — DARKER GRADIENT
   ---------------------------------------------------------- */
html.dark .cta-section {
  background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%);
}

html.dark .cta-title {
  color: #ffffff;
}

html.dark .cta-desc {
  color: rgba(255, 255, 255, 0.8);
}

/* ----------------------------------------------------------
   30. FOOTER — NEAR-BLACK
   ---------------------------------------------------------- */
html.dark .landing-footer {
  background: #020617;
}

html.dark .footer-brand .nav-logo-text {
  color: #f1f5f9;
}

html.dark .footer-brand-desc {
  color: rgba(255, 255, 255, 0.5);
}

html.dark .footer-links h4 {
  color: #f1f5f9;
}

html.dark .footer-links a {
  color: rgba(255, 255, 255, 0.45);
}

html.dark .footer-links a:hover {
  color: #34d399;
}

html.dark .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.06);
}

html.dark .footer-copyright {
  color: rgba(255, 255, 255, 0.35);
}

html.dark .footer-legal a {
  color: rgba(255, 255, 255, 0.35);
}

html.dark .footer-legal a:hover {
  color: #34d399;
}

/* ==========================================================
   DASHBOARD — DARK MODE
   ========================================================== */

/* ----------------------------------------------------------
   31. SIDEBAR — DARK
   ---------------------------------------------------------- */
html.dark .sidebar {
  background-color: #1e293b;
  border-right-color: #334155;
}

html.dark .sidebar-header {
  border-bottom-color: #334155;
}

html.dark .logo-text {
  color: #f1f5f9;
}

html.dark .logo-sub {
  color: #64748b;
}

html.dark .sidebar-close {
  color: #94a3b8;
}

html.dark .sidebar-close:hover {
  background-color: #334155;
  color: #f1f5f9;
}

html.dark .nav-section-label {
  color: #64748b;
}

html.dark .nav-item {
  color: #94a3b8;
}

html.dark .nav-item:hover {
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
}

html.dark .nav-item.active {
  background: var(--gradient-primary);
  color: #ffffff;
}

html.dark .sidebar-footer {
  border-top-color: #334155;
}

html.dark .sidebar-user-name {
  color: #f1f5f9;
}

html.dark .sidebar-user-role {
  color: #64748b;
}

html.dark .sidebar-plan {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html.dark .sidebar-logout {
  color: #fca5a5;
}

html.dark .sidebar-logout:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

html.dark .sidebar-overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------------------------
   32. TOPBAR — DARK
   ---------------------------------------------------------- */
html.dark .topbar {
  background-color: #1e293b;
  border-bottom-color: #334155;
}

html.dark .topbar-hamburger {
  color: #94a3b8;
}

html.dark .topbar-hamburger:hover {
  background-color: #334155;
  color: #f1f5f9;
}

html.dark .topbar-search input {
  background-color: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

html.dark .topbar-search input::placeholder {
  color: #64748b;
}

html.dark .topbar-search input:focus {
  background-color: #0f172a;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
}

html.dark .topbar-search-icon {
  color: #64748b;
}

html.dark .topbar-icon-btn {
  color: #94a3b8;
}

html.dark .topbar-icon-btn:hover {
  background-color: #334155;
  color: #f1f5f9;
}

html.dark .topbar-icon-btn .notif-dot {
  border-color: #1e293b;
}

html.dark .topbar-avatar {
  border-color: #334155;
}

/* Notification dropdown dark */
html.dark .notif-dropdown {
  background-color: #1e293b;
  border-color: #334155;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

html.dark .notif-header {
  border-bottom-color: #334155;
}

html.dark .notif-header h4 {
  color: #f1f5f9;
}

html.dark .notif-header .mark-read {
  color: #6ee7b7;
}

html.dark .notif-item {
  border-bottom-color: #334155;
}

html.dark .notif-item:hover {
  background-color: #334155;
}

html.dark .notif-item.unread {
  background-color: rgba(16, 185, 129, 0.08);
}

html.dark .notif-text p {
  color: #f1f5f9;
}

html.dark .notif-time {
  color: #64748b;
}

html.dark .notif-icon.green {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .notif-icon.amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html.dark .notif-icon.red {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

html.dark .notif-footer {
  border-top-color: #334155;
}

html.dark .notif-footer a {
  color: #6ee7b7;
}

/* ----------------------------------------------------------
   33. STAT CARDS — DARK
   ---------------------------------------------------------- */
html.dark .stat-card {
  background: #1e293b;
  border-color: #334155;
}

html.dark .stat-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

html.dark .stat-card-label {
  color: #94a3b8;
}

html.dark .stat-card-value {
  color: #f1f5f9;
}

html.dark .stat-card:nth-child(1) .stat-card-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .stat-card:nth-child(2) .stat-card-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html.dark .stat-card:nth-child(3) .stat-card-icon {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
}

html.dark .stat-card:nth-child(4) .stat-card-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* ----------------------------------------------------------
   34. DATA CARDS & TABLES — DARK
   ---------------------------------------------------------- */
html.dark .data-card {
  background: #1e293b;
  border-color: #334155;
}

html.dark .data-card-header {
  border-bottom-color: #334155;
}

html.dark .data-card-title {
  color: #f1f5f9;
}

html.dark .data-card-footer {
  background-color: rgba(0, 0, 0, 0.2);
  border-top-color: #334155;
}

html.dark .data-card-info {
  color: #64748b;
}

html.dark .data-table thead {
  background-color: rgba(0, 0, 0, 0.2);
}

html.dark .data-table thead th {
  color: #64748b;
  border-bottom-color: #334155;
}

html.dark .data-table tbody td {
  color: #f1f5f9;
  border-bottom-color: #334155;
}

html.dark .data-table tbody tr:hover {
  background-color: rgba(16, 185, 129, 0.06);
}

html.dark .data-table .cell-user-name {
  color: #f1f5f9;
}

html.dark .data-table .cell-user-email {
  color: #64748b;
}

/* ----------------------------------------------------------
   35. STATUS BADGES — DARK VARIANTS
   ---------------------------------------------------------- */
html.dark .status-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .status-badge.active::before {
  background: #6ee7b7;
}

html.dark .status-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html.dark .status-badge.pending::before {
  background: #fcd34d;
}

html.dark .status-badge.inactive {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
}

html.dark .status-badge.inactive::before {
  background: #94a3b8;
}

html.dark .status-badge.suspended {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

html.dark .status-badge.suspended::before {
  background: #fca5a5;
}

html.dark .status-badge.completed {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .status-badge.completed::before {
  background: #6ee7b7;
}

html.dark .status-badge.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

html.dark .status-badge.failed::before {
  background: #fca5a5;
}

/* ----------------------------------------------------------
   36. CHART CONTAINER — DARK
   ---------------------------------------------------------- */
html.dark .chart-container {
  background: #1e293b;
  border-color: #334155;
}

html.dark .chart-header {
  border-bottom-color: #334155;
}

html.dark .chart-title {
  color: #f1f5f9;
}

html.dark .chart-period {
  background: #0f172a;
}

html.dark .chart-period-btn {
  color: #94a3b8;
}

html.dark .chart-period-btn:hover {
  color: #f1f5f9;
}

html.dark .chart-period-btn.active {
  background: #1e293b;
  color: #6ee7b7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ----------------------------------------------------------
   37. CALENDAR & ATTENDANCE — DARK
   ---------------------------------------------------------- */
html.dark .calendar-card {
  background: #1e293b;
  border-color: #334155;
}

html.dark .calendar-header {
  border-bottom-color: #334155;
}

html.dark .calendar-title {
  color: #f1f5f9;
}

html.dark .calendar-nav-btn {
  color: #94a3b8;
}

html.dark .calendar-nav-btn:hover {
  background: #334155;
  color: #f1f5f9;
}

html.dark .calendar-day-header {
  color: #64748b;
}

html.dark .calendar-day {
  border-color: #334155;
}

html.dark .calendar-day:hover {
  background-color: #334155;
}

html.dark .calendar-day.today {
  background-color: rgba(16, 185, 129, 0.1);
}

html.dark .calendar-day-number {
  color: #94a3b8;
}

html.dark .calendar-day.today .calendar-day-number {
  color: #6ee7b7;
}

html.dark .calendar-event.green {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .calendar-event.amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html.dark .calendar-event.red {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

html.dark .schedule-title {
  color: #f1f5f9;
}

html.dark .schedule-meta {
  color: #64748b;
}

html.dark .schedule-time {
  color: #64748b;
}

/* Attendance grid dark */
html.dark .attendance-cell.present {
  background: rgba(16, 185, 129, 0.4);
}

html.dark .attendance-cell.absent {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}

html.dark .attendance-cell.late {
  background: rgba(245, 158, 11, 0.3);
}

html.dark .attendance-cell.excused {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

html.dark .attendance-cell.no-class {
  background: #1e293b;
}

html.dark .attendance-cell.holiday {
  background: rgba(245, 158, 11, 0.12);
}

html.dark .attendance-legend-item {
  color: #64748b;
}

/* ----------------------------------------------------------
   38. FORMS IN DASHBOARD — DARK
   ---------------------------------------------------------- */
html.dark .quick-action-btn {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

html.dark .quick-action-btn:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--primary-700);
  color: #6ee7b7;
}

/* ----------------------------------------------------------
   39. PROFILE CARD — DARK
   ---------------------------------------------------------- */
html.dark .profile-card {
  background: #1e293b;
  border-color: #334155;
}

html.dark .profile-card-name {
  color: #f1f5f9;
}

html.dark .profile-card-id {
  color: #64748b;
}

html.dark .profile-card-stats {
  border-top-color: #334155;
}

html.dark .profile-stat-value {
  color: #f1f5f9;
}

html.dark .profile-stat-label {
  color: #64748b;
}

/* ----------------------------------------------------------
   40. FEE RECEIPT — DARK
   ---------------------------------------------------------- */
html.dark .fee-receipt {
  background: #1e293b;
  border-color: #334155;
}

html.dark .fee-receipt-header {
  border-bottom-color: #475569;
}

html.dark .fee-receipt-brand-name {
  color: #f1f5f9;
}

html.dark .fee-receipt-brand-sub {
  color: #64748b;
}

html.dark .fee-receipt-number-label {
  color: #64748b;
}

html.dark .fee-receipt-number-value {
  color: #f1f5f9;
}

html.dark .fee-receipt-row .label {
  color: #94a3b8;
}

html.dark .fee-receipt-row .value {
  color: #f1f5f9;
}

html.dark .fee-receipt-total {
  border-top-color: #64748b;
}

html.dark .fee-receipt-total .label {
  color: #f1f5f9;
}

html.dark .fee-receipt-total .value {
  color: #6ee7b7;
}

html.dark .fee-receipt-footer {
  border-top-color: #475569;
}

html.dark .fee-receipt-stamp {
  border-color: #6ee7b7;
  color: #6ee7b7;
}

/* ----------------------------------------------------------
   41. EMPTY STATE — DARK
   ---------------------------------------------------------- */
html.dark .empty-state-title {
  color: #f1f5f9;
}

html.dark .empty-state-desc {
  color: #64748b;
}

html.dark .empty-state-illustration .empty-box {
  border-color: #475569;
  background: #1e293b;
}

html.dark .empty-state-illustration .empty-box::before {
  background: #475569;
}

html.dark .empty-state-illustration .empty-box::after {
  border-color: #475569;
}

/* ----------------------------------------------------------
   42. BREADCRUMBS & TABS — DARK
   ---------------------------------------------------------- */
html.dark .breadcrumb-item {
  color: #64748b;
}

html.dark .breadcrumb-item a {
  color: #94a3b8;
}

html.dark .breadcrumb-item a:hover {
  color: #6ee7b7;
}

html.dark .breadcrumb-separator {
  color: #475569;
}

html.dark .breadcrumb-item.current {
  color: #f1f5f9;
}

html.dark .tabs {
  border-bottom-color: #334155;
}

html.dark .tab-item {
  color: #94a3b8;
}

html.dark .tab-item:hover {
  color: #6ee7b7;
}

html.dark .tab-item.active {
  color: #6ee7b7;
}

/* ----------------------------------------------------------
   43. INFO LIST — DARK
   ---------------------------------------------------------- */
html.dark .info-list-item {
  border-bottom-color: #334155;
}

html.dark .info-list-label {
  color: #64748b;
}

html.dark .info-list-value {
  color: #f1f5f9;
}

/* ----------------------------------------------------------
   44. PAGE HEADER — DARK
   ---------------------------------------------------------- */
html.dark .page-title {
  color: #f1f5f9;
}

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

/* ----------------------------------------------------------
   45. PROGRESS GROUP — DARK
   ---------------------------------------------------------- */
html.dark .progress-label-text {
  color: #94a3b8;
}

html.dark .progress-label-value {
  color: #f1f5f9;
}

html.dark .progress {
  background-color: #334155;
}

/* ----------------------------------------------------------
   46. MISC DARK OVERRIDES
   ---------------------------------------------------------- */
html.dark .how-section {
  background: #0f172a;
}

html.dark .how-step-title {
  color: #f1f5f9;
}

html.dark .how-step-desc {
  color: #94a3b8;
}

html.dark .how-step:nth-child(1) .how-step-number {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .how-step:nth-child(2) .how-step-number {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html.dark .how-step:nth-child(3) .how-step-number {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

html.dark .how-grid::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.3) 0px,
    rgba(16, 185, 129, 0.3) 8px,
    transparent 8px,
    transparent 16px
  );
}

/* Dark mode focus visible */
html.dark :focus-visible {
  outline-color: #6ee7b7;
}

/* Dark mode blob adjustments */
html.dark .blob-1 {
  background: rgba(16, 185, 129, 0.15);
}

html.dark .blob-2 {
  background: rgba(245, 158, 11, 0.1);
}

html.dark .blob-3 {
  background: rgba(52, 211, 153, 0.08);
}

/* Particles dark mode — brighter */
html.dark .particles-bg .dot {
  background: rgba(255, 255, 255, 0.15);
}

/* Print styles dark override */
@media print {
  html.dark .sidebar,
  html.dark .topbar {
    background: #ffffff !important;
  }
}