/*
   TrackMinder Dark Theme
*/

html.tm-theme-dark {
  color-scheme: dark;

  --brand-primary: #60a5fa;
  --brand-secondary: #3b82f6;
  --brand-dark: #f8fafc;
  --brand-muted: #a7b1c2;
  --brand-soft: #111827;
  --brand-border: #263244;
  --brand-success: #34d399;
  --brand-warning: #fbbf24;
  --brand-danger: #f87171;

  --tm-bg: #0b1220;
  --tm-bg-soft: #0f172a;
  --tm-bg-grid: rgba(96, 165, 250, 0.045);

  --tm-surface: #111827;
  --tm-surface-soft: #172033;
  --tm-surface-elevated: #1f2937;
  --tm-surface-hover: #243144;

  --tm-border: #293548;
  --tm-border-soft: #1f2a3d;

  --tm-text: #f8fafc;
  --tm-text-soft: #d8dee9;
  --tm-text-muted: #a7b1c2;

  --tm-primary-soft: rgba(96, 165, 250, 0.14);
  --tm-primary-border: rgba(96, 165, 250, 0.28);
  --tm-success-soft: rgba(52, 211, 153, 0.13);
  --tm-warning-soft: rgba(251, 191, 36, 0.14);
  --tm-danger-soft: rgba(248, 113, 113, 0.14);

  --tm-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.22);
  --tm-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.30);
  --tm-shadow-lg: 0 24px 65px rgba(0, 0, 0, 0.36);
}

html.tm-theme-dark,
html.tm-theme-dark body {
  background: var(--tm-bg);
  color: var(--tm-text);
}

html.tm-theme-dark hr {
  color: var(--tm-border);
}

/* =========================================
   APP SHELL / MAIN LAYOUT
   ========================================= */

html.tm-theme-dark .app-shell,
html.tm-theme-dark .auth-shell,
html.tm-theme-dark .auth-main,
html.tm-theme-dark .auth-content {
  background: var(--tm-bg);
}

html.tm-theme-dark .app-content {
  background:
    linear-gradient(var(--tm-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tm-bg-grid) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(96, 165, 250, 0.10), transparent 26%),
    radial-gradient(circle at 92% 18%, rgba(52, 211, 153, 0.08), transparent 25%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 45%, #111827 100%);
  background-size:
    44px 44px,
    44px 44px,
    auto,
    auto,
    auto;
}

html.tm-theme-dark rf-sidebar,
html.tm-theme-dark .sidebar {
  background: var(--tm-surface);
  border-color: var(--tm-border);
}

html.tm-theme-dark .topbar,
html.tm-theme-dark .app-topbar {
  background: rgba(17, 24, 39, 0.96);
  border-bottom-color: var(--tm-border);
}

html.tm-theme-dark .topbar-title,
html.tm-theme-dark .sidebar-brand-text,
html.tm-theme-dark .sidebar-user-name,
html.tm-theme-dark .topbar-user-name,
html.tm-theme-dark .page-title,
html.tm-theme-dark .support-sub-title,
html.tm-theme-dark .modal-title,
html.tm-theme-dark .panel-title,
html.tm-theme-dark .stat-value,
html.tm-theme-dark .category-name,
html.tm-theme-dark .billing-card-head h3,
html.tm-theme-dark .billing-plan-name,
html.tm-theme-dark .billing-info-row strong,
html.tm-theme-dark .billing-payment-title,
html.tm-theme-dark .rf-user-dropdown-name,
html.tm-theme-dark .rf-notification-dropdown-title {
  color: var(--tm-text-soft) !important;
}

html.tm-theme-dark .topbar-subtitle,
html.tm-theme-dark .page-subtitle,
html.tm-theme-dark .billing-form,
html.tm-theme-dark .loading-title,
html.tm-theme-dark .empty-state,
html.tm-theme-dark .loading-state,
html.tm-theme-dark .stat-label,
html.tm-theme-dark .reminder-row-meta,
html.tm-theme-dark .sidebar-user-plan,
html.tm-theme-dark .sidebar-user-email,
html.tm-theme-dark .rf-breadcrumb .breadcrumb-item a,
html.tm-theme-dark .rf-breadcrumb .breadcrumb-item span,
html.tm-theme-dark .rf-user-dropdown-email,
html.tm-theme-dark .rf-notification-dropdown-subtitle,
html.tm-theme-dark .rf-notification-message,
html.tm-theme-dark .rf-notification-time,
html.tm-theme-dark .rf-notification-empty,
html.tm-theme-dark .billing-plan-price span,
html.tm-theme-dark .billing-payment-subtitle,
html.tm-theme-dark .billing-info-row,
html.tm-theme-dark .billing-feature-list,
html.tm-theme-dark .build-steps {
  color: var(--tm-text-muted)!important;
}

html.tm-theme-dark .btn-upgrade {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  filter: brightness(1.08);
}

/* =========================================
   SIDEBAR
   ========================================= */

html.tm-theme-dark .sidebar-brand-mark {
  background: var(--tm-primary-soft);
  color: var(--brand-primary);
}

html.tm-theme-dark .sidebar-link {
  color: var(--tm-text-soft);
}

html.tm-theme-dark .sidebar-link:hover {
  background: var(--tm-surface-hover);
  color: var(--brand-primary);
}

html.tm-theme-dark .sidebar-link.active {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0.10));
  color: var(--brand-primary);
  box-shadow: inset 3px 0 0 var(--brand-primary);
}

html.tm-theme-dark .sidebar-link-muted {
  color: #6b7280;
}

html.tm-theme-dark .sidebar-footer {
  border-top-color: var(--tm-border);
}

html.tm-theme-dark .sidebar-user-card:hover {
  background: rgba(96, 165, 250, 0.08);
}

html.tm-theme-dark .sidebar-user-avatar {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #ffffff;
}

html.tm-theme-dark .sidebar-logout-btn,
html.tm-theme-dark .sidebar-logout-btn-soft {
  background: var(--tm-surface-soft);
  border-color: var(--tm-border);
  color: var(--tm-text-soft);
}

html.tm-theme-dark .sidebar-logout-btn:hover,
html.tm-theme-dark .sidebar-logout-btn-soft:hover,
html.tm-theme-dark .sidebar-logout-btn-soft:focus {
  background: var(--tm-primary-soft);
  border-color: var(--tm-primary-border);
  color: var(--brand-primary);
}

/* =========================================
   CARDS / PANELS / COMMON SURFACES
   ========================================= */

html.tm-theme-dark .card-soft,
html.tm-theme-dark .metric-card,
html.tm-theme-dark .feature-card,
html.tm-theme-dark .category-card,
html.tm-theme-dark .pricing-card,
html.tm-theme-dark .dashboard-card,
html.tm-theme-dark .panel-card,
html.tm-theme-dark .stat-card,
html.tm-theme-dark .calendar-card,
html.tm-theme-dark .profile-card,
html.tm-theme-dark .reminder-card,
html.tm-theme-dark .empty-state-card,
html.tm-theme-dark .billing-shell-card,
html.tm-theme-dark .billing-summary-card,
html.tm-theme-dark .billing-history-section,
html.tm-theme-dark .form-panel,
html.tm-theme-dark .page-header,
html.tm-theme-dark .page-footer,
html.tm-theme-dark .tm-reminder-preview,
html.tm-theme-dark .tm-subscription-preview,
html.tm-theme-dark .tm-recurring-preview,
html.tm-theme-dark .tm-email-preview,
html.tm-theme-dark .tm-category-preview,
html.tm-theme-dark .tm-dashboard-browser,
html.tm-theme-dark .tm-solution-hero-card,
html.tm-theme-dark .tm-personal-preview,
html.tm-theme-dark .tm-freelance-preview,
html.tm-theme-dark .tm-smallbiz-preview,
html.tm-theme-dark .tm-admin-preview,
html.tm-theme-dark .tm-compare-hero-card,
html.tm-theme-dark .tm-spreadsheet-preview,
html.tm-theme-dark .tm-calendar-preview,
html.tm-theme-dark .tm-manual-preview,
html.tm-theme-dark .tm-pricing-card,
html.tm-theme-dark .tm-faq-sidebar,
html.tm-theme-dark .tm-faq-card,
html.tm-theme-dark .tm-faq-help-card,
html.tm-theme-dark .tm-faq-link-card,
html.tm-theme-dark .tm-related-card-inner,
html.tm-theme-dark .tm-detail-benefit-card,
html.tm-theme-dark .tm-subscription-benefit-card,
html.tm-theme-dark .tm-recurring-benefit-card,
html.tm-theme-dark .tm-email-benefit-card,
html.tm-theme-dark .tm-category-benefit-card,
html.tm-theme-dark .tm-dashboard-benefit-card,
html.tm-theme-dark .tm-dashboard-flow-card,
html.tm-theme-dark .tm-personal-benefit-card,
html.tm-theme-dark .tm-freelance-benefit-card,
html.tm-theme-dark .tm-smallbiz-benefit-card,
html.tm-theme-dark .tm-admin-benefit-card,
html.tm-theme-dark .tm-spreadsheet-risk-card,
html.tm-theme-dark .tm-calendar-risk-card,
html.tm-theme-dark .tm-manual-risk-card,
html.tm-theme-dark .tm-subscription-review-panel,
html.tm-theme-dark .tm-cycle-panel,
html.tm-theme-dark .tm-email-flow-panel,
html.tm-theme-dark .tm-dashboard-stat-panel,
html.tm-theme-dark .tm-personal-flow-panel,
html.tm-theme-dark .tm-freelance-flow-panel,
html.tm-theme-dark .tm-smallbiz-flow-panel,
html.tm-theme-dark .tm-admin-flow-panel,
html.tm-theme-dark .tm-recurring-calendar-note,
html.tm-theme-dark .tm-category-type-card,
html.tm-theme-dark .tm-dashboard-stat,
html.tm-theme-dark .tm-solution-use,
html.tm-theme-dark .tm-personal-type-card,
html.tm-theme-dark .tm-freelance-type-card,
html.tm-theme-dark .tm-smallbiz-type-card,
html.tm-theme-dark .tm-admin-type-card,
html.tm-theme-dark .tm-solution-rich-card-inner,
html.tm-theme-dark .tm-compare-rich-card-inner,
html.tm-theme-dark .tm-solution-check,
html.tm-theme-dark .tm-compare-check,
html.tm-theme-dark .tm-spreadsheet-check,
html.tm-theme-dark .tm-calendar-check,
html.tm-theme-dark .tm-manual-check,
html.tm-theme-dark .tm-compare-table-wrap,
html.tm-theme-dark .tm-spreadsheet-table-wrap,
html.tm-theme-dark .tm-calendar-table-wrap,
html.tm-theme-dark .tm-manual-table-wrap,
html.tm-theme-dark .tm-pricing-compare-wrap,
html.tm-theme-dark .tm-pricing-support-card,
html.tm-theme-dark .tm-pricing-faq-card {
  background: rgba(17, 24, 39, 0.94);
  border-color: var(--tm-border);
  box-shadow: var(--tm-shadow-sm);
}

html.tm-theme-dark .page-hero {
  background: 
    radial-gradient(circle at bottom left, rgba(52, 211, 153, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
  border-color: var(--tm-border);
  box-shadow: var(--tm-shadow-sm);
}

html.tm-theme-dark .panel-card:hover,
html.tm-theme-dark .stat-card:hover,
html.tm-theme-dark .category-card:hover,
html.tm-theme-dark .tm-detail-benefit-card:hover,
html.tm-theme-dark .tm-related-card:hover .tm-related-card-inner,
html.tm-theme-dark .tm-subscription-benefit-card:hover,
html.tm-theme-dark .tm-recurring-benefit-card:hover,
html.tm-theme-dark .tm-email-benefit-card:hover,
html.tm-theme-dark .tm-category-benefit-card:hover,
html.tm-theme-dark .tm-dashboard-benefit-card:hover,
html.tm-theme-dark .tm-personal-benefit-card:hover,
html.tm-theme-dark .tm-freelance-benefit-card:hover,
html.tm-theme-dark .tm-smallbiz-benefit-card:hover,
html.tm-theme-dark .tm-admin-benefit-card:hover,
html.tm-theme-dark .tm-spreadsheet-risk-card:hover,
html.tm-theme-dark .tm-calendar-risk-card:hover,
html.tm-theme-dark .tm-manual-risk-card:hover {
  box-shadow: var(--tm-shadow-md);
}

html.tm-theme-dark .mini-stat,
html.tm-theme-dark .tm-subscription-summary-card,
html.tm-theme-dark .tm-smallbiz-summary-card,
html.tm-theme-dark .tm-admin-summary-card,
html.tm-theme-dark .auth-preview-stat,
html.tm-theme-dark .tm-email-subject,
html.tm-theme-dark .tm-spreadsheet-row.header,
html.tm-theme-dark .tm-compare-table th,
html.tm-theme-dark .tm-spreadsheet-table th,
html.tm-theme-dark .tm-calendar-table th,
html.tm-theme-dark .tm-manual-table th,
html.tm-theme-dark .tm-pricing-compare-table th {
  background: var(--tm-surface-soft);
  color: var(--tm-text);
}

/* =========================================
   TEXT INSIDE DARK SURFACES
   ========================================= */

html.tm-theme-dark .reminder-row-title a,
html.tm-theme-dark .reminder-preview-title,
html.tm-theme-dark .tm-reminder-preview-title,
html.tm-theme-dark .tm-subscription-preview-title,
html.tm-theme-dark .tm-recurring-preview-title,
html.tm-theme-dark .tm-email-preview-title,
html.tm-theme-dark .tm-category-preview-title,
html.tm-theme-dark .tm-personal-preview-title,
html.tm-theme-dark .tm-freelance-preview-title,
html.tm-theme-dark .tm-smallbiz-preview-title,
html.tm-theme-dark .tm-admin-preview-title,
html.tm-theme-dark .tm-spreadsheet-preview-title,
html.tm-theme-dark .tm-calendar-preview-title,
html.tm-theme-dark .tm-manual-preview-title,
html.tm-theme-dark .tm-reminder-preview-item strong,
html.tm-theme-dark .tm-subscription-item strong,
html.tm-theme-dark .tm-recurring-cycle-item strong,
html.tm-theme-dark .tm-email-reminder-row strong,
html.tm-theme-dark .tm-category-preview-card strong,
html.tm-theme-dark .tm-solution-mini strong,
html.tm-theme-dark .tm-compare-mini strong,
html.tm-theme-dark .tm-manual-source strong,
html.tm-theme-dark .tm-reminder-timeline-card strong,
html.tm-theme-dark .tm-cycle-row strong,
html.tm-theme-dark .tm-email-flow-row strong,
html.tm-theme-dark .tm-personal-flow-row strong,
html.tm-theme-dark .tm-freelance-flow-row strong,
html.tm-theme-dark .tm-smallbiz-flow-row strong,
html.tm-theme-dark .tm-admin-flow-row strong,
html.tm-theme-dark .tm-category-type-card strong,
html.tm-theme-dark .tm-dashboard-stat strong,
html.tm-theme-dark .tm-solution-use strong,
html.tm-theme-dark .tm-personal-type-card strong,
html.tm-theme-dark .tm-freelance-type-card strong,
html.tm-theme-dark .tm-smallbiz-type-card strong,
html.tm-theme-dark .tm-admin-type-card strong,
html.tm-theme-dark .tm-pricing-plan,
html.tm-theme-dark .tm-pricing-price,
html.tm-theme-dark .tm-pricing-support-card strong,
html.tm-theme-dark .tm-pricing-faq-card h5,
html.tm-theme-dark .tm-faq-sidebar h5,
html.tm-theme-dark .tm-faq-section-header h2,
html.tm-theme-dark .tm-faq-card h3,
html.tm-theme-dark .tm-faq-help-card h5,
html.tm-theme-dark .tm-faq-link-card strong {
  color: var(--tm-text-soft) !important;
}

html.tm-theme-dark .metric-label,
html.tm-theme-dark .reminder-item p,
html.tm-theme-dark .section-title p,
html.tm-theme-dark .feature-card p,
html.tm-theme-dark .category-card p,
html.tm-theme-dark .pricing-card p,
html.tm-theme-dark .pricing-card li,
html.tm-theme-dark .tm-reminder-preview-item span,
html.tm-theme-dark .tm-subscription-item span,
html.tm-theme-dark .tm-recurring-cycle-item span,
html.tm-theme-dark .tm-email-preview-subtitle,
html.tm-theme-dark .tm-email-reminder-row span,
html.tm-theme-dark .tm-category-preview-subtitle,
html.tm-theme-dark .tm-category-preview-card span,
html.tm-theme-dark .tm-dashboard-browser-title,
html.tm-theme-dark .tm-related-card-inner p,
html.tm-theme-dark .tm-subscription-review-row span,
html.tm-theme-dark .tm-cycle-row span,
html.tm-theme-dark .tm-email-flow-row span,
html.tm-theme-dark .tm-personal-flow-row span,
html.tm-theme-dark .tm-freelance-flow-row span,
html.tm-theme-dark .tm-smallbiz-flow-row span,
html.tm-theme-dark .tm-admin-flow-row span,
html.tm-theme-dark .tm-category-type-card span,
html.tm-theme-dark .tm-dashboard-stat span,
html.tm-theme-dark .tm-solution-use span,
html.tm-theme-dark .tm-personal-type-card span,
html.tm-theme-dark .tm-freelance-type-card span,
html.tm-theme-dark .tm-smallbiz-type-card span,
html.tm-theme-dark .tm-admin-type-card span,
html.tm-theme-dark .tm-compare-table td,
html.tm-theme-dark .tm-spreadsheet-table td,
html.tm-theme-dark .tm-calendar-table td,
html.tm-theme-dark .tm-manual-table td,
html.tm-theme-dark .tm-pricing-compare-table td,
html.tm-theme-dark .tm-pricing-description,
html.tm-theme-dark .tm-pricing-list li,
html.tm-theme-dark .tm-pricing-support-card span,
html.tm-theme-dark .tm-pricing-faq-card p,
html.tm-theme-dark .tm-faq-section-header p,
html.tm-theme-dark .tm-faq-card p,
html.tm-theme-dark .tm-faq-help-card p,
html.tm-theme-dark .tm-faq-sidebar a,
html.tm-theme-dark .tm-faq-link-card span {
  color: var(--tm-text-muted);
}

html.tm-theme-dark .reminder-row,
html.tm-theme-dark .reminder-table-row,
html.tm-theme-dark .tm-subscription-review-row,
html.tm-theme-dark .tm-cycle-row,
html.tm-theme-dark .tm-email-flow-row,
html.tm-theme-dark .tm-personal-flow-row,
html.tm-theme-dark .tm-freelance-flow-row,
html.tm-theme-dark .tm-smallbiz-flow-row,
html.tm-theme-dark .tm-admin-flow-row,
html.tm-theme-dark .tm-email-reminder-row,
html.tm-theme-dark .billing-info-row,
html.tm-theme-dark .billing-table tbody td,
html.tm-theme-dark .tm-compare-table td,
html.tm-theme-dark .tm-spreadsheet-table td,
html.tm-theme-dark .tm-calendar-table td,
html.tm-theme-dark .tm-manual-table td,
html.tm-theme-dark .tm-pricing-compare-table td,
html.tm-theme-dark .tm-faq-sidebar a {
  border-color: var(--tm-border);
}

/* =========================================
   MARKETING / SEO PAGES
   ========================================= */

html.tm-theme-dark .hero,
html.tm-theme-dark .tm-detail-hero,
html.tm-theme-dark .tm-subscription-hero,
html.tm-theme-dark .tm-recurring-hero,
html.tm-theme-dark .tm-email-hero,
html.tm-theme-dark .tm-categories-hero,
html.tm-theme-dark .tm-dashboard-hero,
html.tm-theme-dark .tm-solutions-hero,
html.tm-theme-dark .tm-individuals-hero,
html.tm-theme-dark .tm-freelancers-hero,
html.tm-theme-dark .tm-smallbiz-hero,
html.tm-theme-dark .tm-admin-hero,
html.tm-theme-dark .tm-compare-hero,
html.tm-theme-dark .tm-spreadsheet-hero,
html.tm-theme-dark .tm-calendar-compare-hero,
html.tm-theme-dark .tm-manual-hero,
html.tm-theme-dark .tm-pricing-hero,
html.tm-theme-dark .tm-faq-hero {
  background:
    radial-gradient(circle at 12% 10%, rgba(96, 165, 250, 0.16), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(52, 211, 153, 0.10), transparent 26%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 78%);
}

html.tm-theme-dark .product-preview,
html.tm-theme-dark .tm-solution-split,
html.tm-theme-dark .tm-compare-split {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 26%),
    linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

html.tm-theme-dark .preview-shell,
html.tm-theme-dark .preview-header,
html.tm-theme-dark .preview-content,
html.tm-theme-dark .preview-sidebar,
html.tm-theme-dark .tm-dashboard-browser-header,
html.tm-theme-dark .tm-dashboard-browser-body {
  background: var(--tm-surface);
  border-color: var(--tm-border);
}

html.tm-theme-dark .preview-sidebar .nav-link {
  color: var(--tm-text-soft);
}

html.tm-theme-dark .preview-sidebar .nav-link.active,
html.tm-theme-dark .preview-sidebar .nav-link:hover {
  background: var(--tm-primary-soft);
  color: var(--brand-primary);
}

html.tm-theme-dark .eyebrow,
html.tm-theme-dark .dashboard-pill,
html.tm-theme-dark .tm-cost-pill,
html.tm-theme-dark .tm-category-pill,
html.tm-theme-dark .tm-personal-pill,
html.tm-theme-dark .tm-freelance-pill,
html.tm-theme-dark .tm-smallbiz-pill,
html.tm-theme-dark .tm-admin-pill,
html.tm-theme-dark .tm-spreadsheet-pill,
html.tm-theme-dark .tm-calendar-pill,
html.tm-theme-dark .tm-manual-pill,
html.tm-theme-dark .tm-cycle-badge,
html.tm-theme-dark .tm-solution-tag,
html.tm-theme-dark .tm-compare-tag,
html.tm-theme-dark .auth-preview-pill {
  background: var(--tm-primary-soft);
  border-color: var(--tm-primary-border);
  color: var(--brand-primary);
}

html.tm-theme-dark .tm-recurring-pill,
html.tm-theme-dark .tm-email-pill,
html.tm-theme-dark .tm-cycle-frequency,
html.tm-theme-dark .tm-email-flow-badge,
html.tm-theme-dark .tm-personal-flow-badge,
html.tm-theme-dark .tm-freelance-flow-badge,
html.tm-theme-dark .tm-smallbiz-flow-badge,
html.tm-theme-dark .tm-admin-flow-badge,
html.tm-theme-dark .tm-pricing-badge {
  background: var(--tm-success-soft);
  color: var(--brand-success);
}

/* =========================================
   FORMS / INPUTS
   ========================================= */

html.tm-theme-dark .form-label,
html.tm-theme-dark .auth-card .form-label,
html.tm-theme-dark .auth-login-card .form-label,
html.tm-theme-dark .auth-register-card .form-label,
html.tm-theme-dark .auth-complete-registration-card .form-label,
html.tm-theme-dark .auth-reset-password-card .form-label,
html.tm-theme-dark .auth-forgot-password-card .form-label {
  color: var(--tm-text-soft) !important;
}

html.tm-theme-dark .form-control,
html.tm-theme-dark .form-select,
html.tm-theme-dark .auth-input,
html.tm-theme-dark .auth-card .form-control,
html.tm-theme-dark .auth-register-card .auth-input-group .form-control,
html.tm-theme-dark .auth-register-card .auth-input-group .input-group-text,
html.tm-theme-dark .auth-register-card .auth-phone-group .auth-dial-code,
html.tm-theme-dark .auth-complete-registration-card .auth-phone-group .auth-dial-code {
  background-color: var(--tm-surface-soft);
  border-color: var(--tm-border);
  color: var(--tm-text);
}

html.tm-theme-dark .input-group-text {
  background-color: var(--tm-surface-soft);
  border-color: var(--tm-border);
  color: var(--tm-text);
}

html.tm-theme-dark .form-control:focus,
html.tm-theme-dark .form-select:focus,
html.tm-theme-dark .auth-input:focus,
html.tm-theme-dark select.form-select:focus,
html.tm-theme-dark input.form-textarea:focus {
  background-color: var(--tm-surface-soft);
  border-color: var(--brand-primary);
  color: var(--tm-text);
  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.18);
}

html.tm-theme-dark .form-control::placeholder,
html.tm-theme-dark .auth-input::placeholder {
  color: #6f7c90;
}

html.tm-theme-dark .form-control:disabled,
html.tm-theme-dark .form-select:disabled,
html.tm-theme-dark .auth-register-card .auth-phone-group .form-control:disabled,
html.tm-theme-dark .auth-complete-registration-card .auth-phone-group .form-control:disabled {
  background-color: #0f172a;
  color: #7b8798;
  opacity: 1;
}

html.tm-theme-dark select.form-select option {
  color: var(--tm-text);
  background-color: var(--tm-surface);
}

html.tm-theme-dark .form-check-input {
  background-color: var(--tm-surface-soft);
  border-color: var(--tm-border);
}

html.tm-theme-dark .form-check-label,
html.tm-theme-dark .auth-card .form-check-label,
html.tm-theme-dark .auth-register-option .form-check-label {
  color: var(--tm-text-soft);
}

html.tm-theme-dark .form-divider {
  border-top-color: var(--tm-border);
}

/* =========================================
   BUTTONS / LINKS / PAGINATION
   ========================================= */

html.tm-theme-dark a,
html.tm-theme-dark .auth-link,
html.tm-theme-dark .tm-related-card-inner span,
html.tm-theme-dark .tm-solution-link,
html.tm-theme-dark .tm-compare-link,
html.tm-theme-dark .tm-faq-card a {
  color: var(--brand-primary);
}

html.tm-theme-dark .reminder-row-title a:hover {
  color: var(--brand-primary)!important;
}

html.tm-theme-dark .btn-outline-dark {
  color: var(--tm-text);
  border-color: var(--tm-border);
  background: transparent;
}

html.tm-theme-dark .btn-outline-dark:hover {
  color: #ffffff;
  border-color: var(--brand-primary);
  background: var(--brand-secondary);
}

html.tm-theme-dark .btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--tm-primary-border);
}

html.tm-theme-dark .btn-outline-primary:hover {
  color: #ffffff;
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

html.tm-theme-dark .pagination .page-link {
  background: var(--tm-surface);
  border-color: var(--tm-border);
  color: var(--brand-primary);
}

html.tm-theme-dark .pagination .page-link:hover {
  background: var(--tm-surface-hover);
}

html.tm-theme-dark .pagination .page-item.active .page-link {
  color: #ffffff;
  background: var(--brand-secondary);
  border-color: var(--brand-primary);
}

/* =========================================
   DROPDOWNS / TOPBAR MENUS
   ========================================= */

html.tm-theme-dark .dropdown-menu,
html.tm-theme-dark .rf-user-dropdown,
html.tm-theme-dark .rf-notification-dropdown {
  background: var(--tm-surface);
  border-color: var(--tm-border)!important;
  box-shadow: var(--tm-shadow-md);
}

html.tm-theme-dark .rf-dropdown-item,
html.tm-theme-dark .dropdown-item {
  color: var(--tm-text-soft);
}

html.tm-theme-dark .rf-dropdown-item i {
  color: var(--tm-text-muted);
}

html.tm-theme-dark .rf-dropdown-item:hover,
html.tm-theme-dark .dropdown-item:hover,
html.tm-theme-dark .rf-dropdown-logout:hover,
html.tm-theme-dark .rf-notification-item:hover,
html.tm-theme-dark .rf-notification-view-all:hover {
  background: var(--tm-surface-hover);
  color: var(--tm-text);
}

html.tm-theme-dark .rf-notification-avatar,
html.tm-theme-dark .topbar-mobile-menu-btn,
html.tm-theme-dark .rf-theme-toggle {
  background: var(--tm-surface-soft);
  color: var(--tm-text-soft);
  border-color: var(--tm-border);
}

html.tm-theme-dark .rf-notification-avatar:hover,
html.tm-theme-dark .topbar-mobile-menu-btn:hover,
html.tm-theme-dark .rf-theme-toggle:hover {
  background: var(--tm-primary-soft);
  color: var(--brand-primary);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
}

html.tm-theme-dark .rf-notification-badge {
  border-color: var(--tm-surface);
}

html.tm-theme-dark .rf-notification-item-unread {
  background: rgba(96, 165, 250, 0.10);
}

html.tm-theme-dark .rf-notification-title {
  color: var(--tm-text);
}

html.tm-theme-dark .rf-notification-dot {
  background: var(--brand-primary);
}

/* Theme toggle button */
.rf-theme-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.rf-theme-toggle:hover {
  background: #f8fafc;
  color: var(--brand-primary);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.rf-theme-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(86, 159, 247, 0.22);
}

.rf-theme-toggle:active {
  transform: scale(0.96);
}

.rf-theme-toggle-icon {
  font-size: 1.05rem;
  font-weight: 800;
}

html.tm-theme-dark .dropdown-divider {
  border-top: 1px solid var(--tm-border);
}

/* =========================================
   TABLES / BILLING
   ========================================= */

html.tm-theme-dark .table,
html.tm-theme-dark .billing-table {
  color: var(--tm-text);
}

html.tm-theme-dark .billing-table thead th,
html.tm-theme-dark .billing-table tbody td {
  background: transparent;
}

html.tm-theme-dark .billing-table thead th {
  background: var(--tm-surface-soft);
  border-bottom-color: var(--tm-border);
  color: var(--tm-text-muted);
}

html.tm-theme-dark .billing-table tbody td {
  color: var(--tm-text);
}

html.tm-theme-dark .billing-table tbody tr:hover td {
  background: rgba(96, 165, 250, 0.06);
}

html.tm-theme-dark .billing-status-badge.active {
  background: var(--tm-success-soft);
  color: var(--brand-success);
}

html.tm-theme-dark .billing-status-badge.paid {
  background: var(--tm-primary-soft);
  color: var(--brand-primary);
}

/* =========================================
   FULLCALENDAR
   ========================================= */

html.tm-theme-dark .fc {
  color: var(--tm-text);
}

html.tm-theme-dark .fc .fc-toolbar-title,
html.tm-theme-dark .fc .fc-daygrid-day-number,
html.tm-theme-dark .fc .fc-col-header-cell-cushion {
  color: var(--tm-text);
}

html.tm-theme-dark .fc .fc-button {
  background: var(--tm-surface-soft);
  border-color: var(--tm-border);
  color: var(--brand-primary);
}

html.tm-theme-dark .fc .fc-button:hover {
  background: var(--tm-surface-hover);
  border-color: var(--tm-primary-border);
  color: var(--brand-primary);
}

html.tm-theme-dark .fc .fc-button-primary:not(:disabled).fc-button-active,
html.tm-theme-dark .fc .fc-button-primary:not(:disabled):active {
  background: var(--brand-secondary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

html.tm-theme-dark .fc-theme-standard td,
html.tm-theme-dark .fc-theme-standard th,
html.tm-theme-dark .fc-theme-standard .fc-scrollgrid {
  border-color: var(--tm-border);
}

html.tm-theme-dark .fc .fc-daygrid-day:hover {
  background-color: rgba(96, 165, 250, 0.06);
}

html.tm-theme-dark .fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background-color: rgba(96, 165, 250, 0.10);
}

/* FullCalendar dark header/body background fix */
html.tm-theme-dark .fc,
html.tm-theme-dark .fc .fc-view-harness,
html.tm-theme-dark .fc .fc-view-harness-active > .fc-view,
html.tm-theme-dark .fc .fc-scrollgrid,
html.tm-theme-dark .fc .fc-scrollgrid-section > *,
html.tm-theme-dark .fc .fc-scrollgrid-sync-table {
  background: transparent;
}

html.tm-theme-dark .fc .fc-col-header,
html.tm-theme-dark .fc .fc-col-header-cell,
html.tm-theme-dark .fc .fc-scrollgrid-section-header,
html.tm-theme-dark .fc .fc-scrollgrid-section-header > *,
html.tm-theme-dark .fc-theme-standard th {
  background: var(--tm-surface-soft) !important;
  color: var(--tm-text) !important;
  border-color: var(--tm-border) !important;
}

html.tm-theme-dark .fc .fc-col-header-cell-cushion {
  color: var(--tm-text-soft) !important;
  text-decoration: none;
}

html.tm-theme-dark .fc .fc-daygrid-body,
html.tm-theme-dark .fc .fc-daygrid-day,
html.tm-theme-dark .fc .fc-daygrid-day-frame {
  background: rgba(17, 24, 39, 0.94);
}

html.tm-theme-dark .fc .fc-day-today,
html.tm-theme-dark .fc .fc-day-today .fc-daygrid-day-frame {
  background: rgba(96, 165, 250, 0.10) !important;
}

html.tm-theme-dark .fc .fc-daygrid-day-number {
  color: var(--tm-text-soft) !important;
}

/* =========================================
   AUTH PAGES
   ========================================= */

html.tm-theme-dark .auth-page,
html.tm-theme-dark .auth-page-marketing {
  background:
    radial-gradient(circle at 12% 12%, rgba(96, 165, 250, 0.15), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(52, 211, 153, 0.10), transparent 28%),
    radial-gradient(circle at 74% 88%, rgba(96, 165, 250, 0.08), transparent 30%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 78%);
}

html.tm-theme-dark .auth-card,
html.tm-theme-dark .auth-info-card,
html.tm-theme-dark .auth-preview-card,
html.tm-theme-dark .auth-login-card,
html.tm-theme-dark .auth-register-benefits-card,
html.tm-theme-dark .auth-register-mini-panel,
html.tm-theme-dark .auth-email-preview-card,
html.tm-theme-dark .auth-email-result-preview-card,
html.tm-theme-dark .auth-complete-preview-card,
html.tm-theme-dark .auth-reset-preview-card,
html.tm-theme-dark .auth-forgot-preview-card,
html.tm-theme-dark .auth-email-notice-card,
html.tm-theme-dark .auth-email-result-card,
html.tm-theme-dark .auth-complete-registration-card,
html.tm-theme-dark .auth-reset-password-card,
html.tm-theme-dark .auth-forgot-password-card,
html.tm-theme-dark .auth-email-envelope,
html.tm-theme-dark .auth-email-notice-box,
html.tm-theme-dark .auth-email-result-state,
html.tm-theme-dark .auth-email-result-next,
html.tm-theme-dark .auth-complete-info-box,
html.tm-theme-dark .auth-reset-info-box,
html.tm-theme-dark .auth-forgot-info-box,
html.tm-theme-dark .auth-register-benefit-item,
html.tm-theme-dark .auth-email-step,
html.tm-theme-dark .auth-email-result-step,
html.tm-theme-dark .auth-complete-step,
html.tm-theme-dark .auth-reset-check-item,
html.tm-theme-dark .auth-forgot-step,
html.tm-theme-dark .auth-trust-item,
html.tm-theme-dark .auth-brand-pill,
html.tm-theme-dark .auth-register-option,
html.tm-theme-dark .auth-preview-item {
  background: rgba(17, 24, 39, 0.92);
  border-color: var(--tm-border);
  box-shadow: var(--tm-shadow-sm);
}

html.tm-theme-dark .auth-login-card::before {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 30%),
    radial-gradient(circle at bottom left, rgba(52, 211, 153, 0.09), transparent 28%);
}

html.tm-theme-dark .auth-title,
html.tm-theme-dark .auth-login-card .auth-title,
html.tm-theme-dark .auth-visual-title,
html.tm-theme-dark .auth-preview-title,
html.tm-theme-dark .auth-email-address,
html.tm-theme-dark .auth-register-benefit-item strong,
html.tm-theme-dark .auth-email-step strong,
html.tm-theme-dark .auth-email-result-step strong,
html.tm-theme-dark .auth-complete-step strong,
html.tm-theme-dark .auth-reset-check-item strong,
html.tm-theme-dark .auth-forgot-step strong,
html.tm-theme-dark .auth-email-envelope strong,
html.tm-theme-dark .auth-email-notice-box strong,
html.tm-theme-dark .auth-email-result-state strong,
html.tm-theme-dark .auth-email-result-next strong,
html.tm-theme-dark .auth-complete-info-box strong,
html.tm-theme-dark .auth-reset-info-box strong,
html.tm-theme-dark .auth-forgot-info-box strong {
  color: var(--tm-text);
}

html.tm-theme-dark .auth-subtitle,
html.tm-theme-dark .auth-visual-text,
html.tm-theme-dark .auth-helper-text,
html.tm-theme-dark .auth-loading-state,
html.tm-theme-dark .auth-bottom-note,
html.tm-theme-dark .auth-footer,
html.tm-theme-dark .auth-preview-subtitle,
html.tm-theme-dark .auth-register-benefit-item small,
html.tm-theme-dark .auth-email-step small,
html.tm-theme-dark .auth-email-result-step small,
html.tm-theme-dark .auth-complete-step small,
html.tm-theme-dark .auth-reset-check-item small,
html.tm-theme-dark .auth-forgot-step small,
html.tm-theme-dark .auth-email-envelope span,
html.tm-theme-dark .auth-email-notice-box span,
html.tm-theme-dark .auth-email-result-state span,
html.tm-theme-dark .auth-email-result-next span,
html.tm-theme-dark .auth-complete-info-box span,
html.tm-theme-dark .auth-reset-info-box span,
html.tm-theme-dark .auth-forgot-info-box span,
html.tm-theme-dark .auth-trust-item {
  color: var(--tm-text-muted);
}

html.tm-theme-dark .auth-divider::before {
  background: var(--tm-border);
}

html.tm-theme-dark .auth-divider span {
  background: var(--tm-surface);
}

/* =========================================
   MODALS / BOOTSTRAP
   ========================================= */

html.tm-theme-dark .modal-content,
html.tm-theme-dark .rf-bootstrap-modal {
  background: var(--tm-surface);
  border-color: var(--tm-border);
  color: var(--tm-text);
  box-shadow: var(--tm-shadow-lg);
}

html.tm-theme-dark .modal-header,
html.tm-theme-dark .modal-footer {
  border-color: var(--tm-border);
}

html.tm-theme-dark .rf-bootstrap-modal .modal-title,
html.tm-theme-dark .modal-title {
  color: var(--tm-text);
}

html.tm-theme-dark .rf-bootstrap-modal .modal-body,
html.tm-theme-dark .modal-body {
  color: var(--tm-text-muted);
}

html.tm-theme-dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(1.8);
}

/* =========================================
   STATUS / ALERTS / LOADING
   ========================================= */

html.tm-theme-dark .status-warning {
  background: var(--tm-warning-soft);
  color: var(--brand-warning);
}

html.tm-theme-dark .status-success {
  background: var(--tm-success-soft);
  color: var(--brand-success);
}

html.tm-theme-dark .status-danger {
  background: var(--tm-danger-soft);
  color: var(--brand-danger);
}

html.tm-theme-dark .status-neutral {
  background: var(--tm-primary-soft);
  color: var(--brand-primary);
}

html.tm-theme-dark .alert {
  border-color: var(--tm-border);
}

html.tm-theme-dark .loading-overlay {
  background: rgba(15, 23, 42, 0.88);
  color: var(--tm-text);
}

html.tm-theme-dark .loading-spinner::after {
  border-color: var(--tm-text-muted);
  border-top-color: var(--brand-primary);
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {
  html.tm-theme-dark .mobile-sidebar-backdrop {
    background: rgba(0, 0, 0, 0.55);
  }

  html.tm-theme-dark .app-sidebar-host .sidebar {
    box-shadow: var(--tm-shadow-lg);
  }
}

/* =========================================
   SUPPORT PAGE - DARK THEME
   ========================================= */

html.tm-theme-dark .support-page {
  color: var(--tm-text);
}

html.tm-theme-dark .support-hero {
  background:    
    radial-gradient(circle at bottom left, rgba(52, 211, 153, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
  border-color: var(--tm-border);
  box-shadow: var(--tm-shadow-sm);
}

html.tm-theme-dark .support-hero h1 {
  color: var(--tm-text);
}

html.tm-theme-dark .support-hero p,
html.tm-theme-dark .support-card p,
html.tm-theme-dark .support-side-card p,
html.tm-theme-dark .support-list {
  color: var(--tm-text-muted) !important;
}

html.tm-theme-dark .support-eyebrow {
  color: var(--brand-primary);
}

html.tm-theme-dark .support-card,
html.tm-theme-dark .support-side-card {
  background: rgba(17, 24, 39, 0.94);
  border-color: var(--tm-border);
  box-shadow: var(--tm-shadow-sm);
}

html.tm-theme-dark .support-card h2,
html.tm-theme-dark .support-side-card h3 {
  color: var(--tm-text-soft);
}

html.tm-theme-dark .support-message-input {
  background-color: var(--tm-surface-soft);
  border-color: var(--tm-border);
  color: var(--tm-text);
}

html.tm-theme-dark .support-message-input:focus {
  background-color: var(--tm-surface-soft);
  border-color: var(--brand-primary);
  color: var(--tm-text);
  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.18);
}

html.tm-theme-dark .support-message-input::placeholder {
  color: #6f7c90;
}

html.tm-theme-dark .support-topic-list span {
  background: var(--tm-primary-soft);
  border: 1px solid var(--tm-primary-border);
  color: var(--brand-primary);
}

html.tm-theme-dark .support-submit-btn {
  box-shadow: 0 10px 24px rgba(96, 165, 250, 0.18);
}

html.tm-theme-dark .support-card .text-muted,
html.tm-theme-dark .support-side-card .text-muted {
  color: var(--tm-text-muted) !important;
}

html.tm-theme-dark .support-card .alert-success {
  background: var(--tm-success-soft);
  border-color: rgba(52, 211, 153, 0.28);
  color: var(--brand-success);
}

html.tm-theme-dark .support-card .alert-danger {
  background: var(--tm-danger-soft);
  border-color: rgba(248, 113, 113, 0.28);
  color: var(--brand-danger);
}

html.tm-theme-dark .support-list li::marker {
  color: var(--brand-primary);
}

/* =========================================
   FLATPICKR DATE PICKER - DARK THEME
   ========================================= */

html.tm-theme-dark .flatpickr-calendar {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  box-shadow: var(--tm-shadow-md);
  color: var(--tm-text);
  border-radius: 0.85rem;
  overflow: hidden;
}

html.tm-theme-dark .flatpickr-calendar.arrowTop:before,
html.tm-theme-dark .flatpickr-calendar.arrowTop:after {
  border-bottom-color: var(--tm-surface);
}

html.tm-theme-dark .flatpickr-calendar.arrowBottom:before,
html.tm-theme-dark .flatpickr-calendar.arrowBottom:after {
  border-top-color: var(--tm-surface);
}

/* Month / Year header */
html.tm-theme-dark .flatpickr-months,
html.tm-theme-dark .flatpickr-month {
  background: var(--tm-surface);
  color: var(--tm-text);
  fill: var(--tm-text);
}

html.tm-theme-dark .flatpickr-current-month {
  color: var(--tm-text);
}

html.tm-theme-dark .flatpickr-current-month .flatpickr-monthDropdown-months,
html.tm-theme-dark .flatpickr-current-month input.cur-year {
  background: var(--tm-surface);
  color: var(--tm-text);
  border: 0;
}

html.tm-theme-dark .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
html.tm-theme-dark .flatpickr-current-month .numInputWrapper:hover {
  background: var(--tm-surface-soft);
}

html.tm-theme-dark .flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: var(--tm-surface);
  color: var(--tm-text);
}

/* Previous / next arrows */
html.tm-theme-dark .flatpickr-prev-month,
html.tm-theme-dark .flatpickr-next-month {
  color: var(--tm-text-muted);
  fill: var(--tm-text-muted);
}

html.tm-theme-dark .flatpickr-prev-month:hover,
html.tm-theme-dark .flatpickr-next-month:hover {
  color: var(--brand-primary);
  fill: var(--brand-primary);
}

html.tm-theme-dark .flatpickr-prev-month:hover svg,
html.tm-theme-dark .flatpickr-next-month:hover svg {
  fill: var(--brand-primary);
}

/* Weekday row */
html.tm-theme-dark .flatpickr-weekdays,
html.tm-theme-dark .flatpickr-weekdaycontainer {
  background: var(--tm-surface);
}

html.tm-theme-dark span.flatpickr-weekday {
  color: var(--tm-text-muted);
  font-weight: 700;
}

/* Calendar body */
html.tm-theme-dark .flatpickr-days,
html.tm-theme-dark .dayContainer {
  background: var(--tm-surface);
}

html.tm-theme-dark .flatpickr-day {
  color: var(--tm-text-soft);
  border-color: transparent;
  border-radius: 999px;
}

html.tm-theme-dark .flatpickr-day:hover,
html.tm-theme-dark .flatpickr-day:focus {
  background: var(--tm-primary-soft);
  border-color: var(--tm-primary-border);
  color: var(--brand-primary);
}

html.tm-theme-dark .flatpickr-day.today {
  border-color: var(--tm-primary-border);
  color: var(--tm-text);
}

html.tm-theme-dark .flatpickr-day.today:hover,
html.tm-theme-dark .flatpickr-day.today:focus {
  background: var(--tm-primary-soft);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Selected day */
html.tm-theme-dark .flatpickr-day.selected,
html.tm-theme-dark .flatpickr-day.startRange,
html.tm-theme-dark .flatpickr-day.endRange,
html.tm-theme-dark .flatpickr-day.selected:hover,
html.tm-theme-dark .flatpickr-day.startRange:hover,
html.tm-theme-dark .flatpickr-day.endRange:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

/* Days from previous / next month */
html.tm-theme-dark .flatpickr-day.prevMonthDay,
html.tm-theme-dark .flatpickr-day.nextMonthDay {
  color: #64748b;
}

html.tm-theme-dark .flatpickr-day.prevMonthDay:hover,
html.tm-theme-dark .flatpickr-day.nextMonthDay:hover {
  color: var(--brand-primary);
}

/* Disabled days */
html.tm-theme-dark .flatpickr-day.flatpickr-disabled,
html.tm-theme-dark .flatpickr-day.flatpickr-disabled:hover,
html.tm-theme-dark .flatpickr-day.prevMonthDay.flatpickr-disabled,
html.tm-theme-dark .flatpickr-day.nextMonthDay.flatpickr-disabled {
  color: #475569;
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
}

/* Range selection */
html.tm-theme-dark .flatpickr-day.inRange,
html.tm-theme-dark .flatpickr-day.prevMonthDay.inRange,
html.tm-theme-dark .flatpickr-day.nextMonthDay.inRange {
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.14);
  color: var(--tm-text-soft);
  box-shadow:
    -5px 0 0 rgba(96, 165, 250, 0.14),
    5px 0 0 rgba(96, 165, 250, 0.14);
}

/* Time picker, if you use enableTime */
html.tm-theme-dark .flatpickr-time {
  background: var(--tm-surface);
  border-top-color: var(--tm-border);
}

html.tm-theme-dark .flatpickr-time input,
html.tm-theme-dark .flatpickr-time .flatpickr-am-pm {
  background: var(--tm-surface);
  color: var(--tm-text);
}

html.tm-theme-dark .flatpickr-time input:hover,
html.tm-theme-dark .flatpickr-time .flatpickr-am-pm:hover,
html.tm-theme-dark .flatpickr-time input:focus {
  background: var(--tm-surface-soft);
}

/* Number input arrows */
html.tm-theme-dark .numInputWrapper span {
  border-color: var(--tm-border);
}

html.tm-theme-dark .numInputWrapper span:hover {
  background: var(--tm-surface-hover);
}

html.tm-theme-dark .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--tm-text-muted);
}

html.tm-theme-dark .numInputWrapper span.arrowDown:after {
  border-top-color: var(--tm-text-muted);
}