/* ============================================================
   SERVALINE DARK MODE — activated by data-theme="dark"
   All pages import this. It overrides CSS vars only.
   ============================================================ */

/* Smooth transitions on theme switch */
*, *::before, *::after {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
/* Exclude: chat widget pulse, spinner/animation elements */
@keyframes, .chat-bubble, .chat-typing span, .status-dot, .spinner {
  transition: none !important;
}

html[data-theme="dark"] {
  --ink: #f5f5f1;
  --paper: #0f0f14;
  --accent: #f07040;
  --accent-soft: #1e140e;
  --accent-hover: #e05c2c;
  --slate: #a0a0aa;
  --border: #252530;
  --surface: #18181f;
}

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

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
  color: var(--ink);
}

html[data-theme="dark"] a {
  color: var(--ink);
}

html[data-theme="dark"] nav {
  background: rgba(15, 15, 20, 0.88);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .logo {
  color: var(--ink);
}

html[data-theme="dark"] .topnav {
  background: rgba(15, 15, 20, 0.92);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .topnav-left .logo {
  color: var(--ink);
}

html[data-theme="dark"] .topbar {
  background: var(--paper);
}

/* Cards and panels */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .cal-day,
html[data-theme="dark"] .welcome-banner,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .service-item input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] .stat-card:hover {
  border-color: var(--accent);
}

html[data-theme="dark"] .stat-card .value {
  color: var(--ink);
}

/* Tables */
html[data-theme="dark"] .data-table th {
  background: var(--surface);
  border-bottom-color: var(--border);
  color: var(--slate);
}

html[data-theme="dark"] .data-table td {
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .data-table tr:hover {
  background: rgba(240, 112, 64, 0.06);
}

html[data-theme="dark"] .data-table tr.clickable:hover {
  background: rgba(240, 112, 64, 0.08);
}

/* Nav + topbar elements */
html[data-theme="dark"] .nav-tag {
  background: rgba(240, 112, 64, 0.15);
  color: var(--accent);
}

html[data-theme="dark"] .tab-btn {
  color: var(--slate);
}

html[data-theme="dark"] .tab-btn:hover {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .tab-btn.active {
  background: rgba(240, 112, 64, 0.15);
  color: var(--accent);
}

html[data-theme="dark"] .seed-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--slate);
}

html[data-theme="dark"] .seed-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

html[data-theme="dark"] .topnav-right .status-label {
  color: var(--green);
}

/* Buttons */
html[data-theme="dark"] .btn-primary {
  background: var(--accent);
  color: white;
}

html[data-theme="dark"] .btn-primary:hover {
  background: var(--accent-hover);
}

html[data-theme="dark"] .btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}

html[data-theme="dark"] .btn-secondary:hover {
  background: var(--border);
}

html[data-theme="dark"] .btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--slate);
}

html[data-theme="dark"] .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Stat bar */
html[data-theme="dark"] .stat-bar {
  background: var(--border);
}

html[data-theme="dark"] .stat-item {
  background: var(--surface);
}

/* Feature list */
html[data-theme="dark"] .feature-list {
  background: var(--border);
}

html[data-theme="dark"] .feature-row {
  background: var(--paper);
}

html[data-theme="dark"] .feature-icon {
  background: rgba(240, 112, 64, 0.1);
}

html[data-theme="dark"] .problem {
  background: var(--surface);
}

html[data-theme="dark"] .problem-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .problem-card p {
  color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .closing {
  background: var(--surface);
}

html[data-theme="dark"] .modal-overlay {
  background: rgba(10, 10, 15, 0.7);
}

html[data-theme="dark"] .modal-header {
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .modal-close {
  background: var(--surface);
  color: var(--slate);
}

html[data-theme="dark"] .modal-close:hover {
  background: var(--border);
}

html[data-theme="dark"] .modal-footer {
  border-top-color: var(--border);
}

/* Form elements */
html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group textarea:focus,
html[data-theme="dark"] .form-group select:focus {
  border-color: var(--accent);
}

html[data-theme="dark"] .hours-row {
  background: var(--surface);
}

html[data-theme="dark"] .service-item {
  background: var(--surface);
}

/* Calendar */
html[data-theme="dark"] .cal-header {
  background: var(--surface);
  color: var(--slate);
}

html[data-theme="dark"] .cal-day {
  background: var(--paper);
}

html[data-theme="dark"] .cal-day.other-month {
  background: var(--surface);
}

html[data-theme="dark"] .cal-day.today {
  background: rgba(240, 112, 64, 0.08);
}

html[data-theme="dark"] .cal-day.today .cal-day-number {
  color: var(--accent);
}

html[data-theme="dark"] .cal-day-number {
  color: var(--slate);
}

html[data-theme="dark"] .cal-event {
  background: rgba(240, 112, 64, 0.12);
  border-left-color: var(--accent);
}

html[data-theme="dark"] .cal-event:hover {
  background: rgba(240, 112, 64, 0.2);
}

html[data-theme="dark"] .cal-event.completed {
  background: rgba(22, 163, 74, 0.12);
  border-left-color: var(--green);
}

html[data-theme="dark"] .cal-event.cancelled {
  background: var(--surface);
  border-left-color: var(--slate);
}

html[data-theme="dark"] .cal-nav button {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] .cal-nav button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--surface);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--slate);
}

html[data-theme="dark"] #chat-messages::-webkit-scrollbar-thumb {
  background: var(--border);
}

/* Chat widget adaptations in dark mode */
html[data-theme="dark"] #chat-panel {
  background: var(--surface);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] #chat-form {
  background: var(--paper);
  border-top-color: var(--border);
}

html[data-theme="dark"] #chat-input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] #chat-input:focus {
  border-color: var(--accent);
}

html[data-theme="dark"] .chat-suggestion {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] .chat-suggestion:hover {
  border-color: var(--accent);
  background: rgba(240, 112, 64, 0.08);
  color: var(--accent);
}

html[data-theme="dark"] .chat-msg.assistant .chat-msg-bubble {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .chat-typing {
  background: var(--surface);
}

html[data-theme="dark"] #chat-limit-banner {
  background: rgba(240, 112, 64, 0.08);
  border-top-color: rgba(240, 112, 64, 0.12);
}

/* Auth pages */
html[data-theme="dark"] .auth-box {
  background: var(--surface);
  border-color: var(--border);
}

html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field input:focus {
  background: var(--paper);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] .auth-divider {
  border-color: var(--border);
  color: var(--slate);
}

/* Empty states */
html[data-theme="dark"] .empty-state {
  color: var(--slate);
}

/* Footer */
html[data-theme="dark"] footer {
  border-top-color: var(--border);
}

html[data-theme="dark"] footer p {
  color: var(--slate);
}

/* Comparison page cards */
html[data-theme="dark"] .compare-table th,
html[data-theme="dark"] .compare-table td {
  background: var(--paper);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] .compare-table tr:hover td {
  background: rgba(240, 112, 64, 0.04);
}

html[data-theme="dark"] .compare-table .our-row td {
  background: rgba(240, 112, 64, 0.06);
}

/* Pricing page */
html[data-theme="dark"] .plan-card {
  background: var(--surface);
  border-color: var(--border);
}

html[data-theme="dark"] .plan-card:hover {
  border-color: var(--accent);
}

html[data-theme="dark"] .plan-card.featured {
  background: #1a1a24;
  border-color: #1a1a24;
}

html[data-theme="dark"] .plan-card:not(.featured) .plan-cta {
  background: var(--ink);
  color: white;
}

html[data-theme="dark"] .plan-card.featured .plan-cta {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .plan-card.featured .plan-cta:hover {
  background: var(--border);
}

html[data-theme="dark"] .plan-divider {
  background: var(--border);
}

html[data-theme="dark"] .feature-check {
  background: rgba(232, 93, 38, 0.2);
}

html[data-theme="dark"] .toggle-track {
  background: var(--border);
}

html[data-theme="dark"] .compare-table th.featured-col {
  background: #1a1a24;
  color: white;
}

html[data-theme="dark"] .compare-table td.featured-col {
  background: rgba(240, 112, 64, 0.04);
}

html[data-theme="dark"] .compare-table tr:hover td.featured-col {
  background: rgba(240, 112, 64, 0.08);
}

html[data-theme="dark"] .guarantee {
  background: #1a1a24;
}

html[data-theme="dark"] .guarantee-cta {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .guarantee-cta:hover {
  background: var(--border);
}

/* ROI Calculator — dark mode overrides */
html[data-theme="dark"] .roi-calc {
  background: #0a0a0f;
}

html[data-theme="dark"] .roi-calc-header h2 {
  color: var(--ink);
}

html[data-theme="dark"] .roi-calc-header p {
  color: rgba(245, 245, 241, 0.5);
}

html[data-theme="dark"] .roi-slider-group label {
  color: rgba(245, 245, 241, 0.65);
}

html[data-theme="dark"] .roi-slider {
  background: rgba(255,255,255,0.1);
}

html[data-theme="dark"] .roi-result {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

html[data-theme="dark"] .roi-comparison {
  color: rgba(245, 245, 241, 0.55);
}

html[data-theme="dark"] .roi-comparison strong {
  color: var(--ink);
}

/* Compare pages */
html[data-theme="dark"] .compare-hero h1,
html[data-theme="dark"] .pricing-hero h1 {
  color: var(--ink);
}

html[data-theme="dark"] .cta-band {
  background: #1a1a24;
}

html[data-theme="dark"] .cta-btn {
  background: var(--surface);
  color: var(--accent);
}

html[data-theme="dark"] .cta-btn:hover {
  background: var(--border);
}

/* Nav - override hardcoded rgba backgrounds */
html[data-theme="dark"] nav,
html[data-theme="dark"] .topnav {
  background: rgba(15, 15, 20, 0.92) !important;
  border-bottom-color: var(--border);
}

/* Auth pages - .auth-card class */
html[data-theme="dark"] .auth-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] .auth-card h2 {
  color: var(--ink);
}

/* Dashboard: cal-nav buttons, service inputs, time inputs */
html[data-theme="dark"] .cal-nav button {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

html[data-theme="dark"] .service-item input,
html[data-theme="dark"] .hours-row input[type="time"] {
  background: var(--paper);
  border-color: var(--border);
  color: var(--ink);
}

/* Toggle switch knob — stays white in both modes */
html[data-theme="dark"] .toggle-slider::before,
html[data-theme="dark"] .toggle-thumb {
  background: white;
}

/* Landing page: chat widget section */
html[data-theme="dark"] #chat-panel,
html[data-theme="dark"] .chat-demo-panel {
  background: var(--surface);
  border-color: var(--border);
}

/* Generic catch-all: any remaining white/light surfaces missed above */
html[data-theme="dark"] .stat-item {
  background: var(--surface);
}

html[data-theme="dark"] .feature-row {
  background: var(--surface);
}

html[data-theme="dark"] .pricing-hero,
html[data-theme="dark"] .compare-hero {
  color: var(--ink);
}

html[data-theme="dark"] p {
  color: var(--slate);
}

html[data-theme="dark"] .plan-name,
html[data-theme="dark"] .price-amount,
html[data-theme="dark"] .feature-name {
  color: var(--ink);
}

html[data-theme="dark"] .plan-card.featured .plan-name,
html[data-theme="dark"] .plan-card.featured .price-amount {
  color: white;
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
#theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--slate);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.08);
}

#theme-toggle:active {
  transform: scale(0.95);
}

@media (max-width: 640px) {
  #theme-toggle {
    top: 0.75rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
}