/**
 * DoorForce Theme Engine — 8 built-in professional themes
 * Load AFTER doorforce-design-system.css
 * Applied via html[data-df-theme="…"] (instant, no reload)
 */

:root {
  --df-accent: #0f4c81;
  --df-accent-hover: #0c3d68;
  --df-nav: #0f4c81;
  --df-nav-text: #ffffff;
  --df-nav-hover: rgba(255, 255, 255, 0.16);
  --df-bg: #ffffff;
  --df-bg-soft: #f5f7fa;
  --df-card: #ffffff;
  --df-card-hover: #f3f4f6;
  --df-text: #111827;
  --df-text-secondary: #374151;
  --df-text-muted: #6b7280;
  --df-border: #d1d5db;
  --df-input-bg: #ffffff;
  --df-input-border: #9ca3af;
  --df-table-head: #f3f4f6;
  --df-table-stripe: #f9fafb;
  --df-table-hover: #eef5fb;
  --df-shadow: 0 4px 16px rgba(17, 24, 39, 0.08);
  --df-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
  --df-shadow-lg: 0 10px 28px rgba(17, 24, 39, 0.12);
  --df-modal-backdrop: rgba(17, 24, 39, 0.45);
  --df-icon: #0f4c81;
  --df-icon-muted: #6b7280;
  --df-chart-1: #0f4c81;
  --df-chart-2: #15803d;
  --df-chart-3: #ea580c;
  --df-chart-4: #dc2626;
  --df-chart-5: #7c3aed;
  --df-status-pending: #6b7280;
  --df-status-progress: #ea580c;
  --df-status-done: #15803d;
  --df-status-alert: #dc2626;
  --df-success: #15803d;
  --df-warning: #ea580c;
  --df-danger: #dc2626;
  --df-focus-ring: rgba(15, 76, 129, 0.35);
  --df-disabled-bg: #e5e7eb;
  --df-disabled-text: #374151;
  --df-radius: 14px;
  --df-control-h: 48px;
  --df-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --df-fs-body: 16px;
  --df-fs-title: 32px;
  --df-fs-section: 22px;
  --df-fs-label: 14px;
  --df-fs-button: 15px;
  --df-surface-mode: light;

  /* Explicit contrast tokens (required for all themes) */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --surface-text: #111827;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #86efac;

  --bg-main: var(--df-bg-soft);
  --bg-sidebar: var(--df-nav);
  --bg-card: var(--df-card);
  --bg-card-hover: var(--df-card-hover);
  --bg-secondary: var(--df-card-hover);
  --border-color: var(--df-border);
  --text-main: var(--text-primary);
  --accent-primary: var(--df-accent);
  --accent-primary-hover: var(--df-accent-hover);
  --accent-secondary: var(--df-danger);
  --accent-secondary-hover: #b91c1c;
  --success: var(--df-success);
  --warning: var(--df-warning);
  --danger: var(--df-danger);
  --radius: var(--df-radius);
  --shadow-sm: var(--df-shadow-sm);
  --shadow-md: var(--df-shadow);
  --shadow-lg: var(--df-shadow-lg);
}

/* 1. DoorForce Professional (default enterprise light) */
html[data-df-theme="doorforce-professional"],
html[data-df-theme="doorforce-professional"] body {
  color-scheme: light;
  --df-accent: #0f4c81;
  --df-accent-hover: #0c3d68;
  --df-nav: #0f4c81;
  --df-nav-text: #ffffff;
  --df-bg: #ffffff;
  --df-bg-soft: #f5f7fa;
  --df-card: #ffffff;
  --df-card-hover: #f3f4f6;
  --df-text: #111827;
  --df-text-secondary: #374151;
  --df-text-muted: #6b7280;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --surface-text: #111827;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #86efac;
  --df-surface-mode: light;
  --df-border: #d1d5db;
  --df-input-bg: #ffffff;
  --df-input-border: #9ca3af;
  --df-table-head: #f3f4f6;
  --df-table-stripe: #f9fafb;
  --df-table-hover: #eef5fb;
  --df-icon: #0f4c81;
  --df-focus-ring: rgba(15, 76, 129, 0.35);
  --df-chart-1: #0f4c81;
  --df-chart-2: #15803d;
  --df-chart-3: #ea580c;
  --df-chart-4: #dc2626;
  --df-chart-5: #7c3aed;
}

/* 2. Dark Mode */
html[data-df-theme="dark-mode"],
html[data-df-theme="dark-mode"] body {
  color-scheme: dark;
  --df-accent: #3b82f6;
  --df-accent-hover: #2563eb;
  --df-nav: #0b1426;
  --df-nav-text: #f8fafc;
  --df-nav-hover: rgba(255, 255, 255, 0.12);
  --df-bg: #0b1426;
  --df-bg-soft: #081120;
  --df-card: #162238;
  --df-card-hover: #1d2b43;
  --df-text: #ffffff;
  --df-text-secondary: #e5e7eb;
  --df-text-muted: #cbd5e1;
  --text-primary: #ffffff;
  --text-secondary: #e5e7eb;
  --text-muted: #cbd5e1;
  --surface-text: #ffffff;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #86efac;
  --df-surface-mode: dark;
  --df-border: #33445f;
  --df-input-bg: #0c2b55;
  --df-input-border: #4b6280;
  --df-table-head: #1d2b43;
  --df-table-stripe: #122033;
  --df-table-hover: #1a2f4d;
  --df-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --df-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --df-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --df-modal-backdrop: rgba(0, 0, 0, 0.65);
  --df-icon: #93c5fd;
  --df-icon-muted: #a8b3c7;
  --df-focus-ring: rgba(59, 130, 246, 0.45);
  --df-disabled-bg: #243552;
  --df-disabled-text: #c7d2e3;
  --df-status-pending: #94a3b8;
  --df-status-progress: #f59e0b;
  --df-status-done: #22c55e;
  --df-status-alert: #f87171;
  --df-success: #22c55e;
  --df-warning: #f59e0b;
  --df-danger: #f87171;
  --df-chart-1: #3b82f6;
  --df-chart-2: #22c55e;
  --df-chart-3: #f59e0b;
  --df-chart-4: #f87171;
  --df-chart-5: #a78bfa;
}

/* 3. Industrial Gray */
html[data-df-theme="industrial-gray"],
html[data-df-theme="industrial-gray"] body {
  color-scheme: light;
  --df-accent: #374151;
  --df-accent-hover: #1f2937;
  --df-nav: #1f2937;
  --df-nav-text: #f9fafb;
  --df-bg: #ffffff;
  --df-bg-soft: #f3f4f6;
  --df-card: #ffffff;
  --df-card-hover: #e5e7eb;
  --df-text: #111827;
  --df-text-secondary: #374151;
  --df-text-muted: #6b7280;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --surface-text: #111827;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #d1d5db;
  --df-surface-mode: light;
  --df-border: #9ca3af;
  --df-input-bg: #ffffff;
  --df-input-border: #6b7280;
  --df-table-head: #e5e7eb;
  --df-table-stripe: #f9fafb;
  --df-table-hover: #e5e7eb;
  --df-icon: #374151;
  --df-focus-ring: rgba(55, 65, 81, 0.35);
  --df-chart-1: #374151;
  --df-chart-2: #6b7280;
  --df-chart-3: #ea580c;
  --df-chart-4: #dc2626;
  --df-chart-5: #15803d;
}

/* 4. Construction Orange */
html[data-df-theme="construction-orange"],
html[data-df-theme="construction-orange"] body {
  color-scheme: light;
  --df-accent: #c2410c;
  --df-accent-hover: #9a3412;
  --df-nav: #9a3412;
  --df-nav-text: #fff7ed;
  --df-bg: #fffaf5;
  --df-bg-soft: #fff7ed;
  --df-card: #ffffff;
  --df-card-hover: #ffedd5;
  --df-text: #111827;
  --df-text-secondary: #374151;
  --df-text-muted: #6b7280;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --surface-text: #111827;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #fdba74;
  --df-surface-mode: light;
  --df-border: #fdba74;
  --df-input-bg: #ffffff;
  --df-input-border: #c2410c;
  --df-table-head: #ffedd5;
  --df-table-stripe: #fff7ed;
  --df-table-hover: #fed7aa;
  --df-icon: #c2410c;
  --df-focus-ring: rgba(194, 65, 12, 0.35);
  --df-status-progress: #ea580c;
  --df-chart-1: #c2410c;
  --df-chart-2: #15803d;
  --df-chart-3: #ca8a04;
  --df-chart-4: #dc2626;
  --df-chart-5: #0f4c81;
}

/* 5. Forest Green */
html[data-df-theme="forest-green"],
html[data-df-theme="forest-green"] body {
  color-scheme: light;
  --df-accent: #166534;
  --df-accent-hover: #14532d;
  --df-nav: #14532d;
  --df-nav-text: #f0fdf4;
  --df-bg: #ffffff;
  --df-bg-soft: #f0fdf4;
  --df-card: #ffffff;
  --df-card-hover: #dcfce7;
  --df-text: #111827;
  --df-text-secondary: #374151;
  --df-text-muted: #6b7280;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --surface-text: #111827;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #86efac;
  --df-surface-mode: light;
  --df-border: #86efac;
  --df-input-bg: #ffffff;
  --df-input-border: #15803d;
  --df-table-head: #dcfce7;
  --df-table-stripe: #f0fdf4;
  --df-table-hover: #bbf7d0;
  --df-icon: #166534;
  --df-focus-ring: rgba(22, 101, 52, 0.35);
  --df-status-done: #15803d;
  --df-chart-1: #166534;
  --df-chart-2: #65a30d;
  --df-chart-3: #ca8a04;
  --df-chart-4: #dc2626;
  --df-chart-5: #0f4c81;
}

/* 6. American Classic */
html[data-df-theme="american-classic"],
html[data-df-theme="american-classic"] body {
  color-scheme: light;
  --df-accent: #0a3161;
  --df-accent-hover: #072448;
  --df-nav: #0a3161;
  --df-nav-text: #ffffff;
  --df-bg: #ffffff;
  --df-bg-soft: #f8fafc;
  --df-card: #ffffff;
  --df-card-hover: #eff6ff;
  --df-text: #111827;
  --df-text-secondary: #374151;
  --df-text-muted: #6b7280;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --surface-text: #111827;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #fca5a5;
  --df-surface-mode: light;
  --df-border: #cbd5e1;
  --df-input-bg: #ffffff;
  --df-input-border: #64748b;
  --df-table-head: #e2e8f0;
  --df-table-stripe: #f8fafc;
  --df-table-hover: #dbeafe;
  --df-icon: #0a3161;
  --df-danger: #b31942;
  --df-focus-ring: rgba(10, 49, 97, 0.35);
  --df-chart-1: #0a3161;
  --df-chart-2: #b31942;
  --df-chart-3: #ca8a04;
  --df-chart-4: #15803d;
  --df-chart-5: #475569;
}

/* 7. Midnight Blue */
html[data-df-theme="midnight-blue"],
html[data-df-theme="midnight-blue"] body {
  color-scheme: dark;
  --df-accent: #38bdf8;
  --df-accent-hover: #0ea5e9;
  --df-nav: #020617;
  --df-nav-text: #e0f2fe;
  --df-nav-hover: rgba(56, 189, 248, 0.16);
  --df-bg: #0f172a;
  --df-bg-soft: #020617;
  --df-card: #1e293b;
  --df-card-hover: #334155;
  --df-text: #ffffff;
  --df-text-secondary: #e5e7eb;
  --df-text-muted: #cbd5e1;
  --text-primary: #ffffff;
  --text-secondary: #e5e7eb;
  --text-muted: #cbd5e1;
  --surface-text: #ffffff;
  --hero-text: #ffffff;
  --hero-text-muted: #d1d5db;
  --hero-eyebrow: #7dd3fc;
  --df-surface-mode: dark;
  --df-border: #334155;
  --df-input-bg: #0f172a;
  --df-input-border: #475569;
  --df-table-head: #1e293b;
  --df-table-stripe: #0f172a;
  --df-table-hover: #1e3a5f;
  --df-shadow: 0 8px 28px rgba(2, 6, 23, 0.55);
  --df-shadow-sm: 0 2px 8px rgba(2, 6, 23, 0.4);
  --df-shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.65);
  --df-modal-backdrop: rgba(2, 6, 23, 0.72);
  --df-icon: #7dd3fc;
  --df-icon-muted: #94a3b8;
  --df-focus-ring: rgba(56, 189, 248, 0.45);
  --df-disabled-bg: #334155;
  --df-disabled-text: #cbd5e1;
  --df-status-pending: #94a3b8;
  --df-status-progress: #fb923c;
  --df-status-done: #4ade80;
  --df-status-alert: #f87171;
  --df-success: #4ade80;
  --df-warning: #fb923c;
  --df-danger: #f87171;
  --df-chart-1: #38bdf8;
  --df-chart-2: #4ade80;
  --df-chart-3: #fb923c;
  --df-chart-4: #f87171;
  --df-chart-5: #c084fc;
}

/* 8. High Contrast Accessibility */
html[data-df-theme="high-contrast"],
html[data-df-theme="high-contrast"] body {
  color-scheme: light;
  --df-accent: #000000;
  --df-accent-hover: #111111;
  --df-nav: #000000;
  --df-nav-text: #ffff00;
  --df-nav-hover: rgba(255, 255, 0, 0.2);
  --df-bg: #ffffff;
  --df-bg-soft: #ffffff;
  --df-card: #ffffff;
  --df-card-hover: #ffffcc;
  --df-text: #000000;
  --df-text-secondary: #000000;
  --df-text-muted: #111111;
  --text-primary: #000000;
  --text-secondary: #000000;
  --text-muted: #111111;
  --surface-text: #000000;
  --hero-text: #ffffff;
  --hero-text-muted: #ffff00;
  --hero-eyebrow: #ffff00;
  --df-surface-mode: light;
  --df-border: #000000;
  --df-input-bg: #ffffff;
  --df-input-border: #000000;
  --df-table-head: #ffff00;
  --df-table-stripe: #ffffff;
  --df-table-hover: #ffff99;
  --df-shadow: 0 0 0 2px #000000;
  --df-shadow-sm: 0 0 0 2px #000000;
  --df-shadow-lg: 0 0 0 3px #000000;
  --df-modal-backdrop: rgba(0, 0, 0, 0.8);
  --df-icon: #000000;
  --df-icon-muted: #000000;
  --df-focus-ring: #0000ff;
  --df-disabled-bg: #d4d4d4;
  --df-disabled-text: #000000;
  --df-status-pending: #000000;
  --df-status-progress: #b45309;
  --df-status-done: #006400;
  --df-status-alert: #9b0000;
  --df-success: #006400;
  --df-warning: #b45309;
  --df-danger: #9b0000;
  --df-radius: 8px;
  --df-fs-body: 16px;
  --df-fs-title: 32px;
  --df-fs-section: 22px;
  --df-fs-label: 14px;
  --df-fs-button: 15px;
  --df-chart-1: #000000;
  --df-chart-2: #006400;
  --df-chart-3: #b45309;
  --df-chart-4: #9b0000;
  --df-chart-5: #0000ff;
}

/* ---------- Global themed surfaces ---------- */
html[data-df-theme] body,
html[data-df-theme] body.light-theme,
html[data-df-theme] body.dark-theme,
html[data-df-theme] .app-container,
html[data-df-theme] .content-area,
html[data-df-theme] .content-body,
html[data-df-theme] .main-content,
html[data-df-theme] .tab-panel,
html[data-df-theme] .df-jobs-shell,
html[data-df-theme] .df-more-shell,
html[data-df-theme] .df-tech-home,
html[data-df-theme] .df-job-detail,
html[data-df-theme] #panel-mobile,
html[data-df-theme] #panel-tech-home {
  background: var(--df-bg-soft) !important;
  color: var(--df-text) !important;
  font-family: var(--df-font) !important;
}

html[data-df-theme] h1,
html[data-df-theme] h2,
html[data-df-theme] h3,
html[data-df-theme] h4,
html[data-df-theme] .page-header h1,
html[data-df-theme] .card-title,
html[data-df-theme] .metric-info h3,
html[data-df-theme] .df-wo-id,
html[data-df-theme] .df-wo-customer,
html[data-df-theme] .df-job-card-id,
html[data-df-theme] .df-job-card-customer,
html[data-df-theme] #mobile-job-title,
html[data-df-theme] #page-title {
  color: var(--text-primary) !important;
}

html[data-df-theme] p,
html[data-df-theme] li,
html[data-df-theme] td,
html[data-df-theme] label {
  color: var(--text-secondary) !important;
}

html[data-df-theme] .text-muted,
html[data-df-theme] .brand-subtitle,
html[data-df-theme] small {
  color: var(--text-muted) !important;
}

html[data-df-theme] .df-eyebrow {
  color: var(--df-accent) !important;
}

/* Nav */
html[data-df-theme] .sidebar,
html[data-df-theme] .df-tech-bottom-nav {
  background: var(--df-nav) !important;
  color: var(--df-nav-text) !important;
  border-color: transparent !important;
}

html[data-df-theme] .sidebar .brand-name,
html[data-df-theme] .sidebar .nav-link,
html[data-df-theme] .sidebar .nav-link span,
html[data-df-theme] .sidebar .nav-section-title,
html[data-df-theme] .df-tech-bottom-nav button {
  color: var(--df-nav-text) !important;
}

html[data-df-theme] .sidebar .brand-subtitle {
  color: var(--df-nav-text) !important;
  opacity: 0.85 !important;
}

html[data-df-theme] .sidebar .nav-link:hover,
html[data-df-theme] .sidebar .nav-link.active,
html[data-df-theme] .df-tech-bottom-nav button.active {
  background: var(--df-nav-hover) !important;
  color: var(--df-nav-text) !important;
}

/* Cards / dialogs */
html[data-df-theme] .card,
html[data-df-theme] .metric-card,
html[data-df-theme] .df-wo-card,
html[data-df-theme] .df-wo-stat,
html[data-df-theme] .df-job-card,
html[data-df-theme] .df-tech-work-card,
html[data-df-theme] .df-photo-card,
html[data-df-theme] .df-signature-card,
html[data-df-theme] .df-job-summary-card,
html[data-df-theme] .df-guided-workflow-card,
html[data-df-theme] .df-checklist-card,
html[data-df-theme] .df-door-summary-card,
html[data-df-theme] .df-job-history-card,
html[data-df-theme] .df-finish-card,
html[data-df-theme] .df-more-link,
html[data-df-theme] .df-destination-card,
html[data-df-theme] .df-pause-modal-card,
html[data-df-theme] .modal-content,
html[data-df-theme] .df-modal-card,
html[data-df-theme] .df-tech-home-icon,
html[data-df-theme] .df-tech-home-brand,
html[data-df-theme] .df-sticky-primary,
html[data-df-theme] .df-primary-action-card,
html[data-df-theme] .top-navbar,
html[data-df-theme] .table-wrapper {
  background: var(--df-card) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: var(--df-radius) !important;
  box-shadow: var(--df-shadow) !important;
  color: var(--df-text) !important;
}

html[data-df-theme] .top-navbar {
  border-radius: 0 !important;
  box-shadow: var(--df-shadow-sm) !important;
}

/* Buttons */
html[data-df-theme] .btn-primary,
html[data-df-theme] .df-guided-action-btn,
html[data-df-theme] .df-job-open-btn,
html[data-df-theme] .df-complete-btn,
html[data-df-theme] .df-login-btn-primary,
html[data-df-theme] .df-tech-login-primary {
  background: var(--df-accent) !important;
  border: 1px solid var(--df-accent) !important;
  color: #ffffff !important;
  min-height: var(--df-control-h) !important;
}

html[data-df-theme="high-contrast"] .btn-primary,
html[data-df-theme="high-contrast"] .df-guided-action-btn,
html[data-df-theme="high-contrast"] .df-job-open-btn,
html[data-df-theme="high-contrast"] .df-complete-btn,
html[data-df-theme="high-contrast"] .df-login-btn-primary,
html[data-df-theme="high-contrast"] .df-tech-login-primary {
  color: #ffff00 !important;
  border-width: 2px !important;
}

html[data-df-theme] .btn-primary:hover,
html[data-df-theme] .df-guided-action-btn:hover,
html[data-df-theme] .df-complete-btn:hover:not(:disabled) {
  background: var(--df-accent-hover) !important;
  border-color: var(--df-accent-hover) !important;
}

html[data-df-theme] .btn-outline,
html[data-df-theme] .btn-secondary,
html[data-df-theme] .df-guided-secondary-btn,
html[data-df-theme] .df-header-action-btn,
html[data-df-theme] .df-navigate-btn,
html[data-df-theme] .df-job-nav-btn,
html[data-df-theme] .df-upload-btn,
html[data-df-theme] .df-retake-btn,
html[data-df-theme] .df-clear-signature,
html[data-df-theme] .df-back-btn,
html[data-df-theme] .df-jobs-filter,
html[data-df-theme] .df-job-tab,
html[data-df-theme] .df-more-link,
html[data-df-theme] .df-login-btn-google,
html[data-df-theme] .df-tech-login-secondary,
html[data-df-theme] .portal-btn {
  background: var(--df-card) !important;
  border: 1px solid var(--df-input-border) !important;
  color: var(--df-text) !important;
  min-height: var(--df-control-h) !important;
}

html[data-df-theme] .df-jobs-filter.is-active,
html[data-df-theme] .df-job-tab.is-active,
html[data-df-theme] .portal-btn.active {
  background: var(--df-accent) !important;
  border-color: var(--df-accent) !important;
  color: #ffffff !important;
}

html[data-df-theme] .btn-danger {
  background: var(--df-danger) !important;
  border-color: var(--df-danger) !important;
  color: #ffffff !important;
}

html[data-df-theme] .btn:disabled,
html[data-df-theme] button:disabled,
html[data-df-theme] .df-complete-btn:disabled,
html[data-df-theme] .df-guided-action-btn:disabled {
  background: var(--df-disabled-bg) !important;
  border-color: var(--df-border) !important;
  color: var(--df-disabled-text) !important;
}

/* Forms */
html[data-df-theme] .input-field,
html[data-df-theme] input.input-field,
html[data-df-theme] select.input-field,
html[data-df-theme] textarea.input-field,
html[data-df-theme] input[type="text"],
html[data-df-theme] input[type="email"],
html[data-df-theme] input[type="password"],
html[data-df-theme] input[type="number"],
html[data-df-theme] input[type="date"],
html[data-df-theme] input[type="tel"],
html[data-df-theme] input[type="search"],
html[data-df-theme] select,
html[data-df-theme] textarea,
html[data-df-theme] .df-login-input,
html[data-df-theme] .df-tech-login-field input {
  background: var(--df-input-bg) !important;
  border: 1.5px solid var(--df-input-border) !important;
  color: var(--df-text) !important;
  min-height: var(--df-control-h) !important;
  border-radius: 12px !important;
}

html[data-df-theme] .input-field:focus,
html[data-df-theme] input:focus,
html[data-df-theme] select:focus,
html[data-df-theme] textarea:focus,
html[data-df-theme] .df-login-input:focus {
  border-color: var(--df-accent) !important;
  box-shadow: 0 0 0 3px var(--df-focus-ring) !important;
}

html[data-df-theme] .input-field::placeholder,
html[data-df-theme] input::placeholder,
html[data-df-theme] textarea::placeholder {
  color: var(--df-text-muted) !important;
  opacity: 1 !important;
}

/* Tables */
html[data-df-theme] thead th {
  background: var(--df-table-head) !important;
  color: var(--df-text) !important;
  border-bottom: 1px solid var(--df-border) !important;
}

html[data-df-theme] tbody tr:nth-child(even) {
  background: var(--df-table-stripe) !important;
}

html[data-df-theme] tbody tr:hover {
  background: var(--df-table-hover) !important;
}

html[data-df-theme] td {
  color: var(--df-text-secondary) !important;
  border-bottom: 1px solid var(--df-border) !important;
}

html[data-df-theme] td strong,
html[data-df-theme] td b {
  color: var(--df-text) !important;
}

/* Status badges */
html[data-df-theme] .status-assigned,
html[data-df-theme] .status-accepted,
html[data-df-theme] .status-unscheduled,
html[data-df-theme] .status-scheduled,
html[data-df-theme] .badge-gray,
html[data-df-theme] .badge-blue,
html[data-df-theme] .df-wo-badge.status-assigned,
html[data-df-theme] .df-wo-badge.status-accepted,
html[data-df-theme] .df-job-status-badge.status-assigned,
html[data-df-theme] .df-job-status-badge.status-accepted,
html[data-df-theme] .df-job-card-status.status-assigned,
html[data-df-theme] .df-job-card-status.status-accepted {
  background: var(--df-status-pending) !important;
  color: #ffffff !important;
}

html[data-df-theme] .status-driving,
html[data-df-theme] .status-arrived,
html[data-df-theme] .status-working,
html[data-df-theme] .status-paused,
html[data-df-theme] .badge-gold,
html[data-df-theme] .df-wo-badge.status-driving,
html[data-df-theme] .df-wo-badge.status-arrived,
html[data-df-theme] .df-wo-badge.status-working,
html[data-df-theme] .df-wo-badge.status-paused,
html[data-df-theme] .df-job-status-badge.status-driving,
html[data-df-theme] .df-job-status-badge.status-arrived,
html[data-df-theme] .df-job-status-badge.status-working,
html[data-df-theme] .df-job-status-badge.status-paused,
html[data-df-theme] .df-job-card-status.status-driving,
html[data-df-theme] .df-job-card-status.status-arrived,
html[data-df-theme] .df-job-card-status.status-working,
html[data-df-theme] .df-job-card-status.status-paused {
  background: var(--df-status-progress) !important;
  color: #ffffff !important;
}

html[data-df-theme] .status-completed,
html[data-df-theme] .badge-green,
html[data-df-theme] .df-wo-badge.status-completed,
html[data-df-theme] .df-job-status-badge.status-completed,
html[data-df-theme] .df-job-card-status.status-completed {
  background: var(--df-status-done) !important;
  color: #ffffff !important;
}

html[data-df-theme] .status-cancelled,
html[data-df-theme] .status-canceled,
html[data-df-theme] .status-rejected,
html[data-df-theme] .status-overdue,
html[data-df-theme] .status-emergency,
html[data-df-theme] .badge-red,
html[data-df-theme] .df-wo-badge.status-cancelled,
html[data-df-theme] .df-wo-badge.status-rejected,
html[data-df-theme] .df-job-status-badge.status-cancelled,
html[data-df-theme] .df-job-status-badge.status-rejected {
  background: var(--df-status-alert) !important;
  color: #ffffff !important;
}

html[data-df-theme="high-contrast"] .status-assigned,
html[data-df-theme="high-contrast"] .status-accepted,
html[data-df-theme="high-contrast"] .badge-gray,
html[data-df-theme="high-contrast"] .df-wo-badge.status-assigned,
html[data-df-theme="high-contrast"] .df-job-status-badge.status-assigned,
html[data-df-theme="high-contrast"] .df-job-card-status.status-assigned {
  background: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #000000 !important;
}

/* Icons */
html[data-df-theme] .df-tech-home-icon svg,
html[data-df-theme] .btn-icon-only svg,
html[data-df-theme] .nav-link svg {
  stroke: currentColor;
  color: inherit;
}

html[data-df-theme] .df-tech-home-icon svg {
  stroke: var(--df-icon) !important;
}

html[data-df-theme] .btn-icon-only {
  color: var(--df-icon) !important;
  border: 1px solid var(--df-border);
  background: var(--df-card);
  min-width: 48px;
  min-height: 48px;
  border-radius: 12px;
}

/* Charts (CSS variable hooks for Chart.js / SVG fills) */
html[data-df-theme] .df-chart-bar,
html[data-df-theme] [data-df-chart="1"] { background: var(--df-chart-1) !important; fill: var(--df-chart-1) !important; color: var(--df-chart-1) !important; }
html[data-df-theme] .df-chart-bar-2,
html[data-df-theme] [data-df-chart="2"] { background: var(--df-chart-2) !important; fill: var(--df-chart-2) !important; color: var(--df-chart-2) !important; }
html[data-df-theme] .df-chart-bar-3,
html[data-df-theme] [data-df-chart="3"] { background: var(--df-chart-3) !important; fill: var(--df-chart-3) !important; color: var(--df-chart-3) !important; }
html[data-df-theme] .df-chart-bar-4,
html[data-df-theme] [data-df-chart="4"] { background: var(--df-chart-4) !important; fill: var(--df-chart-4) !important; color: var(--df-chart-4) !important; }
html[data-df-theme] .df-chart-bar-5,
html[data-df-theme] [data-df-chart="5"] { background: var(--df-chart-5) !important; fill: var(--df-chart-5) !important; color: var(--df-chart-5) !important; }

/* Dialogs / modals */
html[data-df-theme] .modal,
html[data-df-theme] .df-modal-backdrop,
html[data-df-theme] .df-pause-modal {
  background: var(--df-modal-backdrop) !important;
}

html[data-df-theme] .modal-header h2,
html[data-df-theme] .df-modal-header h2,
html[data-df-theme] .df-pause-modal-card h3 {
  color: var(--df-text) !important;
}

/* Login */
html[data-df-theme] .df-login-overlay,
html[data-df-theme] .df-tech-login-overlay,
html[data-df-theme] #login-overlay {
  background: var(--df-bg-soft) !important;
}

html[data-df-theme] .df-login-card,
html[data-df-theme] .df-tech-login-card {
  background: var(--df-card) !important;
  border: 1px solid var(--df-border) !important;
  color: var(--df-text) !important;
  box-shadow: var(--df-shadow-lg) !important;
}

html[data-df-theme] .df-login-title,
html[data-df-theme] .df-tech-login-title { color: var(--df-text) !important; }
html[data-df-theme] .df-login-subtitle,
html[data-df-theme] .df-tech-login-subtitle { color: var(--df-text-muted) !important; }
html[data-df-theme] .df-login-title-door { color: var(--df-accent) !important; }
html[data-df-theme] .df-login-title-force { color: var(--df-danger) !important; }

html[data-df-theme] .df-job-sticky-header {
  background: linear-gradient(180deg, var(--df-bg-soft) 85%, transparent) !important;
}

/* Theme picker UI */
.df-theme-picker {
  position: relative;
}

.df-theme-picker-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(340px, 92vw);
  max-height: min(70vh, 520px);
  overflow: auto;
  background: var(--df-card);
  color: var(--df-text);
  border: 1px solid var(--df-border);
  border-radius: 14px;
  box-shadow: var(--df-shadow-lg);
  padding: 12px;
  z-index: 12000;
}

.df-theme-picker-panel.is-open {
  display: block;
}

.df-theme-picker-title {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--df-text-muted);
  margin: 0 0 10px;
}

.df-theme-option {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  min-height: 56px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 12px;
  border: 1px solid var(--df-border);
  background: var(--df-bg-soft);
  color: var(--df-text);
  cursor: pointer;
  font-family: var(--df-font);
}

.df-theme-option:hover {
  border-color: var(--df-accent);
}

.df-theme-option.is-active {
  outline: 2px solid var(--df-accent);
  border-color: var(--df-accent);
}

.df-theme-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  height: 36px;
}

.df-theme-swatches span {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.df-theme-option strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--df-text);
}

.df-theme-option small {
  display: block;
  font-size: 0.75rem;
  color: var(--df-text-muted);
  margin-top: 2px;
}

.df-theme-check {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--df-accent);
  opacity: 0;
}

.df-theme-option.is-active .df-theme-check {
  opacity: 1;
}

html[data-df-theme="high-contrast"] .df-theme-option {
  border-width: 2px;
}

html[data-df-theme="high-contrast"] .card,
html[data-df-theme="high-contrast"] .metric-card,
html[data-df-theme="high-contrast"] .df-wo-card,
html[data-df-theme="high-contrast"] .input-field,
html[data-df-theme="high-contrast"] input,
html[data-df-theme="high-contrast"] select,
html[data-df-theme="high-contrast"] textarea,
html[data-df-theme="high-contrast"] .btn {
  border-width: 2px !important;
}