/* =====================================================================
   HOMEROOM — Dark Mode
   Activated via html[data-theme="dark"], toggled + persisted by script.js
   ===================================================================== */

html[data-theme="dark"]{
  --ink:            #EDEFF5;
  --ink-700:        #FFFFFF;
  --ink-100:        #202A42;
  --marigold:       #F0AE52;
  --marigold-600:   #F5C27A;
  --marigold-100:   #3A2F1C;
  --sage:           #7FAE87;
  --sage-600:       #9CC5A3;
  --sage-100:       #1D2D22;
  --paper:          #11151F;
  --paper-deep:     #171C29;
  --surface:        #1A2030;
  --text:           #E7E9F1;
  --text-muted:     #A4AAB9;
  --text-soft:      #767C8C;
  --line:           #2B3245;
  --danger:         #E38070;
  --success:        #7FC58F;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.28);
  --shadow-md: 0 10px 30px rgba(0,0,0,.38);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.5);

  color-scheme: dark;
}

html[data-theme="dark"] body{ background:var(--paper); color:var(--text); }

/* prevent white flash before JS runs */
html.theme-loading body{ visibility:hidden; }

html[data-theme="dark"] .site-header{ background:rgba(17,21,31,.7); }
html[data-theme="dark"] .site-header.is-scrolled{ background:rgba(17,21,31,.92); }
html[data-theme="dark"] .logo{ color:var(--text); }
html[data-theme="dark"] .logo .logo-mark{ color:#151922; }
html[data-theme="dark"] .nav-link{ color:var(--text); }
html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.is-active{ background:var(--ink-100); }
html[data-theme="dark"] .dropdown-panel{ background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .dropdown-panel a{ color:var(--text); }
html[data-theme="dark"] .dropdown-panel a:hover{ background:var(--paper-deep); }
html[data-theme="dark"] .icon-toggle, html[data-theme="dark"] .hamburger{ background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .hamburger span{ background:var(--text); }
html[data-theme="dark"] .mobile-nav{ background:var(--paper); }
html[data-theme="dark"] .mobile-nav a{ color:var(--text); border-color:var(--line); }

html[data-theme="dark"] .btn-primary{ background:var(--ink-100); color:var(--text); }
html[data-theme="dark"] .btn-primary:hover{ background:#2A3550; }
html[data-theme="dark"] .btn-accent{ color:#1a1408; }
html[data-theme="dark"] .btn-outline{ border-color:var(--line); color:var(--text); }
html[data-theme="dark"] .btn-outline:hover{ background:var(--ink-100); color:var(--text); }
html[data-theme="dark"] .btn-ghost{ background:var(--ink-100); color:var(--text); }

html[data-theme="dark"] .card,
html[data-theme="dark"] .tutor-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .booking-panel,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .table-scroll,
html[data-theme="dark"] .countdown-box,
html[data-theme="dark"] .select-card,
html[data-theme="dark"] .material-card{
  background:var(--surface); border-color:var(--line);
}
html[data-theme="dark"] .select-card.is-selected,
html[data-theme="dark"] .step-item.is-active,
html[data-theme="dark"] .dash-nav a.is-active,
html[data-theme="dark"] .pay-method.is-selected{ background:var(--ink-100); }
html[data-theme="dark"] .dash-nav a.is-active{ color:#151922; background:var(--marigold); }

html[data-theme="dark"] .section-alt{ background:var(--paper-deep); }
html[data-theme="dark"] .rate-pill{ background:rgba(26,32,48,.9); color:var(--text); }
/* Fixed darker green (not the adaptive --sage token) so white icon/text
   stays readable against it in dark mode too */
html[data-theme="dark"] .verified-pill{ background:#3F6146; }
html[data-theme="dark"] .step-item.is-done .dot{ background:#3F6146; border-color:#3F6146; }
html[data-theme="dark"] .tag{ background:var(--paper-deep); color:var(--text); }
html[data-theme="dark"] .chip-btn{ border-color:var(--line); color:var(--text-muted); background:var(--surface); }
html[data-theme="dark"] .chip-btn.is-active, html[data-theme="dark"] .chip-btn:hover{ background:var(--ink-100); color:var(--text); border-color:var(--text-soft); }

html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{ background:var(--surface); border-color:var(--line); color:var(--text); }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus{ box-shadow:0 0 0 4px var(--ink-100); border-color:var(--marigold); }
html[data-theme="dark"] .search-bar-wrap{ background:var(--surface); }
html[data-theme="dark"] .search-bar-wrap input{ background:transparent; }
html[data-theme="dark"] .social-auth button{ background:var(--surface); border-color:var(--line); color:var(--text); }
html[data-theme="dark"] .social-auth button:hover{ background:var(--ink-100); }

html[data-theme="dark"] .calendar-grid button{ background:var(--surface); border-color:var(--line); color:var(--text); }
html[data-theme="dark"] .calendar-grid button.is-selected{ background:var(--marigold); color:#1a1408; border-color:var(--marigold); }
html[data-theme="dark"] .time-slot{ border-color:var(--line); color:var(--text); }
html[data-theme="dark"] .time-slot.is-selected{ background:var(--marigold); color:#1a1408; border-color:var(--marigold); }
html[data-theme="dark"] .step-item .dot{ border-color:var(--line); }
html[data-theme="dark"] .step-item.is-active .dot{ background:var(--marigold); border-color:var(--marigold); color:#1a1408; }

html[data-theme="dark"] .data-table th{ color:var(--text-soft); border-color:var(--line); }
html[data-theme="dark"] .data-table td{ border-color:var(--line); }
html[data-theme="dark"] .notif-item.unread{ background:var(--ink-100); }
html[data-theme="dark"] .notif-dot{ background:var(--paper-deep); }
html[data-theme="dark"] .dash-sidebar{ background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .dash-header{ background:rgba(17,21,31,.85); border-color:var(--line); }
html[data-theme="dark"] .dash-menu-toggle{ background:var(--surface); border-color:var(--line); color:var(--text); }
html[data-theme="dark"] .dash-sidebar-backdrop{ background:rgba(0,0,0,.6); }
html[data-theme="dark"] .dash-profile-mini{ color:var(--text); }

html[data-theme="dark"] .modal-box{ background:var(--surface); }
html[data-theme="dark"] .modal-close{ background:var(--paper-deep); color:var(--text); }
html[data-theme="dark"] .toast{ background:var(--surface); border:1px solid var(--line); }

html[data-theme="dark"] .faq-q{ color:var(--text); }
html[data-theme="dark"] .faq-q .plus{ border-color:var(--line); }
html[data-theme="dark"] .faq-q .plus::before, html[data-theme="dark"] .faq-q .plus::after{ background:var(--text); }
html[data-theme="dark"] .faq-item.is-open .plus{ background:var(--marigold); }
html[data-theme="dark"] .faq-item.is-open .plus::after{ background:transparent; }

html[data-theme="dark"] .hero-badge{ background:var(--surface); box-shadow:var(--shadow-md); }
html[data-theme="dark"] .avatar-stack img{ border-color:var(--paper); }
html[data-theme="dark"] .avail-slot{ background:var(--sage-100); }
html[data-theme="dark"] .avail-slot.busy{ background:var(--paper-deep); }

html[data-theme="dark"] .site-footer{ background:#0B0E16; }
html[data-theme="dark"] .footer-bottom{ border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .newsletter-form input{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }

html[data-theme="dark"] .status-upcoming{ background:var(--ink-100); color:var(--text); }
html[data-theme="dark"] .status-completed, html[data-theme="dark"] .status-paid{ background:var(--sage-100); color:var(--sage-600); }
html[data-theme="dark"] .status-pending{ background:var(--marigold-100); color:var(--marigold-600); }
html[data-theme="dark"] .status-cancelled{ background:#3A2420; color:var(--danger); }