:root {
  --eg-theme-sidebar: #050505;
  --eg-theme-sidebar-2: #0b0b0b;
  --eg-theme-surface: #111111;
  --eg-theme-surface-2: #181818;
  --eg-theme-surface-3: #000000;
  --eg-theme-text: #f8fafc;
  --eg-theme-muted: #cbd5e1;
  --eg-theme-soft: #94a3b8;
  --eg-theme-border: #2a2a2a;
  --eg-theme-border-strong: #3a3a3a;
  --eg-theme-gold: var(--gold, #dd9933);
  --eg-theme-gold-dark: var(--gold-dk, var(--gold-dark, #b87d22));
  --eg-theme-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  --eg-theme-radius: 10px;
}

html[data-eg-theme="light"] body.tech-app {
  color-scheme: light;
  --bg: #f4f6f9;
  --card: #ffffff;
  --card2: #f8fafc;
  --text: #111827;
  --fg: #111827;
  --muted: #64748b;
  --muted2: #94a3b8;
  --border: #d8dee8;
  --border2: #e5e7eb;
  --green: #15803d;
  --red: #dc2626;
}

html[data-eg-theme="dark"] body.tech-app {
  color-scheme: dark;
  --bg: var(--eg-theme-sidebar);
  --card: var(--eg-theme-surface);
  --card2: var(--eg-theme-surface-2);
  --text: var(--eg-theme-text);
  --fg: var(--eg-theme-text);
  --muted: var(--eg-theme-muted);
  --muted2: var(--eg-theme-soft);
  --border: var(--eg-theme-border);
  --border2: var(--eg-theme-border);
  --green: #86efac;
  --red: #fecaca;
}

html[data-eg-theme="light"] body.tech-app,
html[data-eg-theme="light"] body.tech-app main,
html[data-eg-theme="light"] body.tech-app .screen.active {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-eg-theme="light"] body.tech-app #app-header,
html[data-eg-theme="light"] body.tech-app #bottom-nav,
html[data-eg-theme="light"] body.tech-app #tech-brand,
html[data-eg-theme="light"] body.tech-app .tech-side-menu {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

body.tech-app .eg-theme-toggle {
  min-height: 36px;
  padding: 0 11px;
  font-size: 0.76rem;
}

html[data-eg-theme="dark"] body.tech-app .hours-box {
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.22), rgba(0, 0, 0, 0.5)) !important;
  border-color: rgba(134, 239, 172, 0.28) !important;
}

html[data-eg-theme="dark"] body.tech-app .hours-cost {
  color: #bbf7d0 !important;
}

html[data-eg-theme="dark"] body.tech-app .receipt-btn {
  background: var(--eg-theme-surface-3) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border) !important;
}

html[data-eg-theme="dark"] body.tech-app :where(
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background:#ffffff"],
  [style*="background: #ffffff"],
  [style*="background:#fafbff"],
  [style*="background: #fafbff"],
  [style*="background:#f8fafc"],
  [style*="background: #f8fafc"],
  [style*="background:#dcfce7"],
  [style*="background: #dcfce7"],
  [style*="background:#ecfdf5"],
  [style*="background: #ecfdf5"]
) {
  background: var(--eg-theme-surface) !important;
  background-color: var(--eg-theme-surface) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border) !important;
}

html[data-eg-theme="dark"] body.tech-app :where(
  [style*="color:#111827"],
  [style*="color: #111827"],
  [style*="color:#1e2330"],
  [style*="color: #1e2330"],
  [style*="color:#374151"],
  [style*="color: #374151"],
  [style*="color:#4b5563"],
  [style*="color: #4b5563"],
  [style*="color:#6b7280"],
  [style*="color: #6b7280"]
) {
  color: var(--eg-theme-text) !important;
}

.eg-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border, #e2e5ea);
  border-radius: 999px;
  background: var(--white, #fff);
  color: var(--text, #1e2330);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
  z-index: 220;
}

.eg-theme-toggle:hover {
  border-color: rgba(221, 153, 51, 0.5);
  color: var(--gold, #dd9933);
  transform: translateY(-1px);
}

.eg-theme-toggle:focus-visible {
  outline: 3px solid rgba(221, 153, 51, 0.28);
  outline-offset: 2px;
}

.eg-theme-toggle.is-floating {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
}

.eg-theme-toggle-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--eg-theme-sidebar), var(--eg-theme-gold));
  border: 1px solid rgba(0, 0, 0, 0.16);
  flex: 0 0 auto;
}

.eg-theme-toggle-text {
  white-space: nowrap;
}

html[data-eg-theme="dark"] {
  color-scheme: dark;
  --bg: var(--eg-theme-sidebar);
  --white: var(--eg-theme-surface);
  --card: var(--eg-theme-surface);
  --card2: var(--eg-theme-surface-2);
  --text: var(--eg-theme-text);
  --fg: var(--eg-theme-text);
  --muted: var(--eg-theme-muted);
  --muted2: var(--eg-theme-soft);
  --border: var(--eg-theme-border);
  --border2: var(--eg-theme-border);
  --sidebar-bg: var(--eg-theme-sidebar);
  --sidebar2: var(--eg-theme-sidebar-2);
  --shadow: var(--eg-theme-shadow);
  --radius: var(--eg-theme-radius);
}

html[data-eg-theme="dark"],
html[data-eg-theme="dark"] body {
  background: var(--eg-theme-sidebar) !important;
  color: var(--eg-theme-text) !important;
}

html[data-eg-theme="dark"] body,
html[data-eg-theme="dark"] #app-shell,
html[data-eg-theme="dark"] .main-area,
html[data-eg-theme="dark"] .page-body,
html[data-eg-theme="dark"] main,
html[data-eg-theme="dark"] .left-panel,
html[data-eg-theme="dark"] .layout,
html[data-eg-theme="dark"] .screen.active,
html[data-eg-theme="dark"] #screen-login,
html[data-eg-theme="dark"] .wrap {
  background: var(--eg-theme-sidebar) !important;
  color: var(--eg-theme-text) !important;
}

html[data-eg-theme="dark"] .sidebar,
html[data-eg-theme="dark"] .mobile-bar,
html[data-eg-theme="dark"] #app-header,
html[data-eg-theme="dark"] #bottom-nav,
html[data-eg-theme="dark"] #tech-brand {
  background: var(--eg-theme-sidebar) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-eg-theme="dark"] .page-header {
  background: var(--eg-theme-sidebar-2) !important;
  border-bottom-color: var(--eg-theme-border) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

html[data-eg-theme="dark"] .card,
html[data-eg-theme="dark"] .dash-card,
html[data-eg-theme="dark"] .stat-card,
html[data-eg-theme="dark"] .project-card,
html[data-eg-theme="dark"] .entry-card,
html[data-eg-theme="dark"] .login-box,
html[data-eg-theme="dark"] .login-card,
html[data-eg-theme="dark"] .access-card,
html[data-eg-theme="dark"] .scope-library,
html[data-eg-theme="dark"] .tech-kpi-card,
html[data-eg-theme="dark"] .team-member-row,
html[data-eg-theme="dark"] .ps-emp-row,
html[data-eg-theme="dark"] .modal-box,
html[data-eg-theme="dark"] #events-panel,
html[data-eg-theme="dark"] [style*="background:#fff"],
html[data-eg-theme="dark"] [style*="background: #fff"],
html[data-eg-theme="dark"] [style*="background:white"],
html[data-eg-theme="dark"] [style*="background: white"],
html[data-eg-theme="dark"] [style*="background:#fafafa"],
html[data-eg-theme="dark"] [style*="background: #fafafa"],
html[data-eg-theme="dark"] [style*="background:#f3f4f6"],
html[data-eg-theme="dark"] [style*="background: #f3f4f6"] {
  background: var(--eg-theme-surface) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border) !important;
  box-shadow: var(--eg-theme-shadow) !important;
}

html[data-eg-theme="dark"] .card-head,
html[data-eg-theme="dark"] .sb-brand,
html[data-eg-theme="dark"] .sb-user,
html[data-eg-theme="dark"] .panel-tabs,
html[data-eg-theme="dark"] .summary-row,
html[data-eg-theme="dark"] .team-row,
html[data-eg-theme="dark"] .proj-row,
html[data-eg-theme="dark"] .person-card,
html[data-eg-theme="dark"] .table-wrap,
html[data-eg-theme="dark"] [style*="border-bottom:1px solid"],
html[data-eg-theme="dark"] [style*="border-top:1px solid"] {
  border-color: var(--eg-theme-border) !important;
}

html[data-eg-theme="dark"] h1,
html[data-eg-theme="dark"] h2,
html[data-eg-theme="dark"] h3,
html[data-eg-theme="dark"] h4,
html[data-eg-theme="dark"] .page-title,
html[data-eg-theme="dark"] .card-title,
html[data-eg-theme="dark"] .dash-card-head,
html[data-eg-theme="dark"] .stat-val,
html[data-eg-theme="dark"] .project-name,
html[data-eg-theme="dark"] .proj-name,
html[data-eg-theme="dark"] .person-info .name,
html[data-eg-theme="dark"] .login-title,
html[data-eg-theme="dark"] .brand-name,
html[data-eg-theme="dark"] [style*="color:#111827"],
html[data-eg-theme="dark"] [style*="color: #111827"],
html[data-eg-theme="dark"] [style*="color:#0f172a"],
html[data-eg-theme="dark"] [style*="color: #0f172a"],
html[data-eg-theme="dark"] [style*="color:#222"],
html[data-eg-theme="dark"] [style*="color: #222"] {
  color: var(--eg-theme-text) !important;
}

html[data-eg-theme="dark"] p,
html[data-eg-theme="dark"] label,
html[data-eg-theme="dark"] .sub,
html[data-eg-theme="dark"] .text-muted,
html[data-eg-theme="dark"] .text-green,
html[data-eg-theme="dark"] .stat-label,
html[data-eg-theme="dark"] .stat-sub,
html[data-eg-theme="dark"] .project-client,
html[data-eg-theme="dark"] .project-progress-text,
html[data-eg-theme="dark"] .entry-project,
html[data-eg-theme="dark"] .entry-meta,
html[data-eg-theme="dark"] .summary-lbl,
html[data-eg-theme="dark"] .form-label,
html[data-eg-theme="dark"] .form-group label,
html[data-eg-theme="dark"] .field label,
html[data-eg-theme="dark"] [style*="color:#6b7280"],
html[data-eg-theme="dark"] [style*="color: #6b7280"],
html[data-eg-theme="dark"] [style*="color:#64748b"],
html[data-eg-theme="dark"] [style*="color: #64748b"],
html[data-eg-theme="dark"] [style*="color:#9ca3af"],
html[data-eg-theme="dark"] [style*="color: #9ca3af"],
html[data-eg-theme="dark"] [style*="color:#16a34a"],
html[data-eg-theme="dark"] [style*="color: #16a34a"],
html[data-eg-theme="dark"] [style*="color:#22C55E"],
html[data-eg-theme="dark"] [style*="color: #22C55E"],
html[data-eg-theme="dark"] [style*="color:#10b981"],
html[data-eg-theme="dark"] [style*="color: #10b981"] {
  color: var(--eg-theme-muted) !important;
}

html[data-eg-theme="dark"] input,
html[data-eg-theme="dark"] select,
html[data-eg-theme="dark"] textarea,
html[data-eg-theme="dark"] .control,
html[data-eg-theme="dark"] .form-input,
html[data-eg-theme="dark"] .form-control,
html[data-eg-theme="dark"] .filter-input,
html[data-eg-theme="dark"] .filter-select,
html[data-eg-theme="dark"] .period-select,
html[data-eg-theme="dark"] .ps-bonus-input,
html[data-eg-theme="dark"] .login-input {
  background: var(--eg-theme-surface-3) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border-strong) !important;
  box-shadow: none !important;
}

html[data-eg-theme="dark"] input::placeholder,
html[data-eg-theme="dark"] textarea::placeholder {
  color: var(--eg-theme-soft) !important;
}

html[data-eg-theme="dark"] input:focus,
html[data-eg-theme="dark"] select:focus,
html[data-eg-theme="dark"] textarea:focus,
html[data-eg-theme="dark"] .control:focus,
html[data-eg-theme="dark"] .form-input:focus,
html[data-eg-theme="dark"] .form-control:focus {
  border-color: rgba(221, 153, 51, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(221, 153, 51, 0.16) !important;
}

html[data-eg-theme="dark"] option {
  background: var(--eg-theme-surface-3) !important;
  color: var(--eg-theme-text) !important;
}

html[data-eg-theme="dark"] table,
html[data-eg-theme="dark"] thead,
html[data-eg-theme="dark"] tbody,
html[data-eg-theme="dark"] tr,
html[data-eg-theme="dark"] th,
html[data-eg-theme="dark"] td,
html[data-eg-theme="dark"] .payroll-table th,
html[data-eg-theme="dark"] .payroll-table td,
html[data-eg-theme="dark"] .entries-table th,
html[data-eg-theme="dark"] .entries-table td,
html[data-eg-theme="dark"] .cost-table td,
html[data-eg-theme="dark"] .empsum-table tbody td {
  background-color: transparent !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border) !important;
}

html[data-eg-theme="dark"] th,
html[data-eg-theme="dark"] .payroll-table th,
html[data-eg-theme="dark"] .entries-table th,
html[data-eg-theme="dark"] .cost-table th {
  background: var(--eg-theme-surface-3) !important;
  color: var(--eg-theme-muted) !important;
}

html[data-eg-theme="dark"] tr:hover td,
html[data-eg-theme="dark"] .payroll-table tr:hover td,
html[data-eg-theme="dark"] .entries-table tr:hover td,
html[data-eg-theme="dark"] .cost-table tr:hover td {
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-eg-theme="dark"] .total-row td,
html[data-eg-theme="dark"] .payroll-table .total-row td,
html[data-eg-theme="dark"] .cost-table .total-row td {
  background: rgba(221, 153, 51, 0.12) !important;
  color: var(--eg-theme-text) !important;
  border-color: rgba(221, 153, 51, 0.32) !important;
}

html[data-eg-theme="dark"] button:not(.btn-login):not(.btn-primary):not(.login-btn-main):not(.doc-btn):not(.doc-btn-gold):not(.doc-btn-primary):not(.doc-btn-success):not(.doc-btn-danger),
html[data-eg-theme="dark"] .btn-outline,
html[data-eg-theme="dark"] .btn-edit,
html[data-eg-theme="dark"] .view-btn,
html[data-eg-theme="dark"] .pchip,
html[data-eg-theme="dark"] .proj-chip,
html[data-eg-theme="dark"] .btn-clear,
html[data-eg-theme="dark"] .btn-cancel,
html[data-eg-theme="dark"] .topbar-bell,
html[data-eg-theme="dark"] .user-pill,
html[data-eg-theme="dark"] .lang-toggle {
  background: var(--eg-theme-surface-3) !important;
  color: var(--eg-theme-muted) !important;
  border-color: var(--eg-theme-border) !important;
}

html[data-eg-theme="dark"] .btn-login,
html[data-eg-theme="dark"] .btn-primary,
html[data-eg-theme="dark"] .btn-add,
html[data-eg-theme="dark"] .btn-filter,
html[data-eg-theme="dark"] .btn-save,
html[data-eg-theme="dark"] .btn-submit,
html[data-eg-theme="dark"] .btn-generate,
html[data-eg-theme="dark"] .login-btn-main,
html[data-eg-theme="dark"] #signin-cta-btn,
html[data-eg-theme="dark"] .mode-btn.active,
html[data-eg-theme="dark"] .view-btn.active,
html[data-eg-theme="dark"] .pchip.active,
html[data-eg-theme="dark"] .proj-chip-active {
  background: linear-gradient(180deg, var(--eg-theme-gold), var(--eg-theme-gold-dark)) !important;
  color: #111827 !important;
  border-color: rgba(221, 153, 51, 0.72) !important;
  box-shadow: 0 8px 24px rgba(221, 153, 51, 0.18) !important;
}

html[data-eg-theme="dark"] button:not(.doc-btn):not(.doc-btn-gold):not(.doc-btn-primary):not(.doc-btn-success):not(.doc-btn-danger):hover,
html[data-eg-theme="dark"] .btn-outline:hover,
html[data-eg-theme="dark"] .btn-edit:hover,
html[data-eg-theme="dark"] .pchip:hover,
html[data-eg-theme="dark"] .proj-chip:hover {
  border-color: rgba(221, 153, 51, 0.72) !important;
  color: var(--eg-theme-gold) !important;
}

html[data-eg-theme="dark"] .topbar-bell.has-unread,
html[data-eg-theme="dark"] .chip,
html[data-eg-theme="dark"] .entry-badge,
html[data-eg-theme="dark"] .project-status-badge.active,
html[data-eg-theme="dark"] .proj-code,
html[data-eg-theme="dark"] .role-badge,
html[data-eg-theme="dark"] .period-today-btn {
  background: rgba(221, 153, 51, 0.14) !important;
  color: var(--eg-theme-gold) !important;
  border-color: rgba(221, 153, 51, 0.28) !important;
}

html[data-eg-theme="dark"] .project-progress-bar,
html[data-eg-theme="dark"] .budget-row-progress .bp-bar,
html[data-eg-theme="dark"] .mode-toggle,
html[data-eg-theme="dark"] .login-tabs,
html[data-eg-theme="dark"] .scope-lib-grid {
  background: rgba(0, 0, 0, 0.75) !important;
  border-color: var(--eg-theme-border) !important;
}

html[data-eg-theme="dark"] .project-progress-bar-fill,
html[data-eg-theme="dark"] .budget-row-progress .bp-fill,
html[data-eg-theme="dark"] .splash-dot,
html[data-eg-theme="dark"] .slide-dot.active {
  background: var(--eg-theme-gold) !important;
}

html[data-eg-theme="dark"] .empty-state,
html[data-eg-theme="dark"] .coming-soon,
html[data-eg-theme="dark"] .loading-text,
html[data-eg-theme="dark"] .no-slides-placeholder {
  background: rgba(17, 17, 17, 0.58) !important;
  color: var(--eg-theme-muted) !important;
  border: 1px dashed var(--eg-theme-border) !important;
  border-radius: var(--eg-theme-radius) !important;
}

html[data-eg-theme="dark"] #app-shell .ps-preview-note {
  background: rgba(17, 17, 17, 0.88) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border-strong) !important;
  box-shadow: inset 3px 0 0 rgba(221, 153, 51, 0.75) !important;
}

html[data-eg-theme="dark"] #app-shell .ps-preview-note * {
  color: var(--eg-theme-text) !important;
}

html[data-eg-theme="dark"] .modal-overlay,
html[data-eg-theme="dark"] .sidebar-backdrop,
html[data-eg-theme="dark"] #proj-scope-picker-ov,
html[data-eg-theme="dark"] #assign-tech-ov {
  background: rgba(2, 6, 23, 0.76) !important;
}

html[data-eg-theme="dark"] .alert-success,
html[data-eg-theme="dark"] .msg.ok {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: #e2e8f0 !important;
}

html[data-eg-theme="dark"] [style*="rgba(22,163,74"],
html[data-eg-theme="dark"] [style*="rgba(34,197,94"],
html[data-eg-theme="dark"] [style*="#dcfce7"],
html[data-eg-theme="dark"] [style*="#ecfdf5"] {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: var(--eg-theme-muted) !important;
}

html[data-eg-theme="dark"] .alert-error,
html[data-eg-theme="dark"] .msg.error,
html[data-eg-theme="dark"] .login-err,
html[data-eg-theme="dark"] .err {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(248, 113, 113, 0.32) !important;
  color: #fecaca !important;
}

html[data-eg-theme="dark"] .right-panel,
html[data-eg-theme="dark"] .slide-loading,
html[data-eg-theme="dark"] .splash {
  background: var(--eg-theme-sidebar) !important;
}

html[data-eg-theme="dark"] .eg-theme-toggle {
  background: rgba(17, 17, 17, 0.96) !important;
  color: var(--eg-theme-text) !important;
  border-color: rgba(221, 153, 51, 0.38) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26) !important;
}

html[data-eg-theme="dark"] .eg-theme-toggle-dot {
  background: linear-gradient(135deg, #f8fafc, var(--eg-theme-gold));
}

@media (max-width: 640px) {
  .eg-theme-toggle {
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.72rem;
  }
  .eg-theme-toggle.is-floating {
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
  }
}

@media print {
  .eg-theme-toggle {
    display: none !important;
  }
}

/* Dark-mode hard pass for the admin workspace. This keeps light mode untouched
   and closes page-specific white surfaces that are created by legacy CSS. */
html[data-eg-theme="dark"] #app-shell,
html[data-eg-theme="dark"] #app-shell .main-area,
html[data-eg-theme="dark"] #app-shell .page-body,
html[data-eg-theme="dark"] #app-shell [id^="panel-"],
html[data-eg-theme="dark"] #app-shell [id^="subpanel-"],
html[data-eg-theme="dark"] #app-shell .panel,
html[data-eg-theme="dark"] #app-shell .sub-panel {
  background: var(--eg-theme-sidebar) !important;
  background-color: var(--eg-theme-sidebar) !important;
  color: var(--eg-theme-text) !important;
}

html[data-eg-theme="dark"] #app-shell .card,
html[data-eg-theme="dark"] #app-shell .dash-card,
html[data-eg-theme="dark"] #app-shell .stat-card,
html[data-eg-theme="dark"] #app-shell .pm-proj-card,
html[data-eg-theme="dark"] #app-shell .empsum-year-bar,
html[data-eg-theme="dark"] #app-shell .payroll-table,
html[data-eg-theme="dark"] #app-shell .entries-table,
html[data-eg-theme="dark"] #app-shell .cost-table,
html[data-eg-theme="dark"] #app-shell .task-hero,
html[data-eg-theme="dark"] #app-shell .task-card,
html[data-eg-theme="dark"] #app-shell .task-panel-card,
html[data-eg-theme="dark"] #app-shell .task-voice-card,
html[data-eg-theme="dark"] #app-shell .task-settings-card,
html[data-eg-theme="dark"] #app-shell details.task-settings-card,
html[data-eg-theme="dark"] #app-shell .task-focus-card,
html[data-eg-theme="dark"] #app-shell .task-metric,
html[data-eg-theme="dark"] #app-shell .task-alert-pill,
html[data-eg-theme="dark"] #app-shell .task-draft,
html[data-eg-theme="dark"] #app-shell .task-empty,
html[data-eg-theme="dark"] #app-shell .task-reminder-warning,
html[data-eg-theme="dark"] #app-shell .task-reminder-body,
html[data-eg-theme="dark"] #app-shell .task-settings-body,
html[data-eg-theme="dark"] #app-shell .task-timeline-body,
html[data-eg-theme="dark"] #app-shell .task-filter-bar,
html[data-eg-theme="dark"] #app-shell .task-list-shell,
html[data-eg-theme="dark"] #app-shell .task-detail-shell,
html[data-eg-theme="dark"] #app-shell .task-simple-card,
html[data-eg-theme="dark"] #app-shell .slide-panel,
html[data-eg-theme="dark"] #app-shell .slide-header,
html[data-eg-theme="dark"] #app-shell .pm-modal-card,
html[data-eg-theme="dark"] #app-shell .proj-cost-section,
html[data-eg-theme="dark"] #app-shell .proj-cost-card,
html[data-eg-theme="dark"] #app-shell .pm-service-chip,
html[data-eg-theme="dark"] #app-shell .pm-photo,
html[data-eg-theme="dark"] #app-shell .est-ac,
html[data-eg-theme="dark"] #app-shell .table-wrap,
html[data-eg-theme="dark"] #app-shell #events-panel,
html[data-eg-theme="dark"] #app-shell #proj-scope-picker-ov .inner,
html[data-eg-theme="dark"] #app-shell #assign-tech-ov .inner,
html[data-eg-theme="dark"] #app-shell [style*="background:#fff"]:not(.doc-btn):not(.doc-btn-gold):not(.doc-btn-primary):not(.doc-btn-success):not(.doc-btn-danger),
html[data-eg-theme="dark"] #app-shell [style*="background: #fff"]:not(.doc-btn):not(.doc-btn-gold):not(.doc-btn-primary):not(.doc-btn-success):not(.doc-btn-danger),
html[data-eg-theme="dark"] #app-shell [style*="background:#ffffff"]:not(.doc-btn):not(.doc-btn-gold):not(.doc-btn-primary):not(.doc-btn-success):not(.doc-btn-danger),
html[data-eg-theme="dark"] #app-shell [style*="background: #ffffff"]:not(.doc-btn):not(.doc-btn-gold):not(.doc-btn-primary):not(.doc-btn-success):not(.doc-btn-danger),
html[data-eg-theme="dark"] #app-shell [style*="background:white"]:not(.doc-btn):not(.doc-btn-gold):not(.doc-btn-primary):not(.doc-btn-success):not(.doc-btn-danger),
html[data-eg-theme="dark"] #app-shell [style*="background: white"]:not(.doc-btn):not(.doc-btn-gold):not(.doc-btn-primary):not(.doc-btn-success):not(.doc-btn-danger),
html[data-eg-theme="dark"] #app-shell [style*="background:#fafafa"],
html[data-eg-theme="dark"] #app-shell [style*="background: #fafafa"],
html[data-eg-theme="dark"] #app-shell [style*="background:#f3f4f6"],
html[data-eg-theme="dark"] #app-shell [style*="background: #f3f4f6"],
html[data-eg-theme="dark"] #app-shell [style*="background:#f8fafc"],
html[data-eg-theme="dark"] #app-shell [style*="background: #f8fafc"],
html[data-eg-theme="dark"] #app-shell [style*="background:#fffbeb"],
html[data-eg-theme="dark"] #app-shell [style*="background: #fffbeb"],
html[data-eg-theme="dark"] #app-shell [style*="background:#fff7ed"],
html[data-eg-theme="dark"] #app-shell [style*="background: #fff7ed"],
html[data-eg-theme="dark"] #app-shell [style*="background:#f0f5ff"],
html[data-eg-theme="dark"] #app-shell [style*="background: #f0f5ff"],
html[data-eg-theme="dark"] #app-shell [style*="background:#f0fdf4"],
html[data-eg-theme="dark"] #app-shell [style*="background: #f0fdf4"] {
  background: var(--eg-theme-sidebar) !important;
  background-color: var(--eg-theme-sidebar) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border) !important;
  box-shadow: none !important;
}

html[data-eg-theme="dark"] #app-shell :where(h1,h2,h3,h4,p,label,span,div,td,th,strong,small,a,li,dt,dd) {
  color: var(--eg-theme-text) !important;
}

html[data-eg-theme="dark"] #app-shell :where(.sub,.stat-label,.stat-sub,.pm-proj-meta,.pm-proj-stats,.pm-proj-bar-pct,.task-meta,.task-simple-meta,.entry-meta,.summary-lbl,.field label,.form-group label,.panel-tab:not(.active)) {
  color: var(--eg-theme-muted) !important;
}

html[data-eg-theme="dark"] #app-shell :where(input,select,textarea,.filter-select,.filter-input,.period-select) {
  background: var(--eg-theme-surface-3) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border-strong) !important;
}

html[data-eg-theme="dark"] #app-shell :where(table,thead,tbody,tr,th,td),
html[data-eg-theme="dark"] #app-shell .empsum-table tbody tr,
html[data-eg-theme="dark"] #app-shell .empsum-table tbody td,
html[data-eg-theme="dark"] #app-shell .payroll-table td,
html[data-eg-theme="dark"] #app-shell .entries-table td,
html[data-eg-theme="dark"] #app-shell .cost-table td {
  background: var(--eg-theme-sidebar) !important;
  background-color: var(--eg-theme-sidebar) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border) !important;
}

html[data-eg-theme="dark"] #app-shell :where(th,.empsum-table thead tr,.empsum-table thead th,.payroll-table th,.entries-table th,.cost-table th),
html[data-eg-theme="dark"] #app-shell .empsum-title {
  background: var(--eg-theme-surface-3) !important;
  background-color: var(--eg-theme-surface-3) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border) !important;
}

html[data-eg-theme="dark"] #app-shell :where(tr:hover td,.payroll-table tr:hover td,.entries-table tr:hover td,.cost-table tr:hover td,.empsum-table tbody tr:hover td,.pm-proj-card:hover,.task-simple-card:hover) {
  background: var(--eg-theme-surface-2) !important;
  background-color: var(--eg-theme-surface-2) !important;
}

html[data-eg-theme="dark"] #app-shell :where(.status-badge,.proj-code,.chip,.entry-badge,.role-badge,.period-today-btn,.pf-chip-active) {
  background: rgba(221, 153, 51, 0.16) !important;
  color: var(--eg-theme-gold) !important;
  border-color: rgba(221, 153, 51, 0.34) !important;
}

html[data-eg-theme="dark"] #app-shell :where(.pm-proj-bar,.project-progress-bar,.budget-row-progress .bp-bar) {
  background: rgba(148, 163, 184, 0.22) !important;
}

html[data-eg-theme="dark"] #app-shell :where(.pm-proj-bar > div,.project-progress-bar-fill,.budget-row-progress .bp-fill,.empsum-table .td-pay) {
  background: var(--eg-theme-gold) !important;
  color: #111827 !important;
}

html[data-eg-theme="dark"] #app-shell :where(
  .task-title,
  .task-section-title,
  .task-card-title,
  .task-focus-value,
  .task-metric strong,
  .task-alert-pill strong,
  .task-card-meta strong,
  .task-draft strong,
  .task-editor-title
) {
  color: var(--eg-theme-text) !important;
}

html[data-eg-theme="dark"] #app-shell :where(
  .task-sub,
  .task-section-sub,
  .task-eyebrow,
  .task-quick-summary span:last-child,
  .task-list-count,
  .task-focus-label,
  .task-focus-sub,
  .task-ticket,
  .task-card-meta,
  .task-voice-status,
  .task-editor-sub,
  .task-editor-kicker,
  .task-modal-voice-status,
  .task-reminder-details summary span:last-child,
  .task-timeline-details summary span:last-child
) {
  color: var(--eg-theme-muted) !important;
}

html[data-eg-theme="dark"] #app-shell :where(
  .task-quick-input,
  .task-search-row input,
  .task-search-row select,
  .task-editor-field input,
  .task-editor-field select,
  .task-editor-field textarea
) {
  background: var(--eg-theme-surface-3) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border-strong) !important;
}

/* Dark-mode coverage for document editors and page-specific inline panels. */
html[data-eg-theme="dark"] #app-shell :where(
  .pm-modal-head,
  .pm-modal-body,
  .pm-modal-foot,
  .doc-editor,
  .doc-editor-header,
  .doc-editor-body,
  .doc-editor-footer,
  .doc-section,
  .doc-row,
  .doc-line,
  .doc-line-item,
  .doc-totals-card,
  .doc-totals-row,
  .doc-actions,
  .est-line-v2,
  .line-item,
  .bom-line-card,
  .task-editor-section,
  .empsum-year-bar,
  #subpanel-settings-appearance,
  #subpanel-settings-company,
  #subpanel-settings-invtheme,
  #subpanel-settings-catalog,
  #theme-pv-title,
  #theme-pv-subtitle,
  #theme-pv-body,
  #theme-pv-table-th,
  #theme-pv-table-th2,
  #theme-pv-table-td,
  #theme-pv-table-td2,
  #co-ai-box,
  #co-lines [data-co-line-kind="section"]
) {
  background: var(--eg-theme-sidebar) !important;
  background-color: var(--eg-theme-sidebar) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border) !important;
  box-shadow: none !important;
}

html[data-eg-theme="dark"] #app-shell :where(
  [style*="background:#c"],
  [style*="background: #c"],
  [style*="background-color:#c"],
  [style*="background-color: #c"],
  [style*="background:#d"],
  [style*="background: #d"],
  [style*="background-color:#d"],
  [style*="background-color: #d"],
  [style*="background:#e"],
  [style*="background: #e"],
  [style*="background-color:#e"],
  [style*="background-color: #e"],
  [style*="background:#f"],
  [style*="background: #f"],
  [style*="background-color:#f"],
  [style*="background-color: #f"],
  [style*="background:rgba(212,175,55"],
  [style*="background: rgba(212,175,55"],
  [style*="background-color:rgba(212,175,55"],
  [style*="background-color: rgba(212,175,55"],
  [style*="background:rgba(126,58,237"],
  [style*="background: rgba(126,58,237"],
  [style*="background-color:rgba(126,58,237"],
  [style*="background-color: rgba(126,58,237"],
  [style*="background:rgb(2"],
  [style*="background: rgb(2"],
  [style*="background-color:rgb(2"],
  [style*="background-color: rgb(2"]
) {
  background: var(--eg-theme-sidebar) !important;
  background-color: var(--eg-theme-sidebar) !important;
  color: var(--eg-theme-text) !important;
  border-color: var(--eg-theme-border) !important;
}

html[data-eg-theme="dark"] #app-shell :where(
  [style*="color:#0"],
  [style*="color: #0"],
  [style*="color:#1"],
  [style*="color: #1"],
  [style*="color:#2"],
  [style*="color: #2"],
  [style*="color:#3"],
  [style*="color: #3"],
  [style*="color:#4"],
  [style*="color: #4"],
  [style*="color:#5"],
  [style*="color: #5"],
  [style*="color:#6"],
  [style*="color: #6"],
  [style*="color:#7"],
  [style*="color: #7"],
  [style*="color:#8"],
  [style*="color: #8"],
  [style*="color:#9"],
  [style*="color: #9"],
  [style*="color:var(--text"],
  [style*="color: var(--text"],
  [style*="color:var(--muted"],
  [style*="color: var(--muted"]
) {
  color: var(--eg-theme-text) !important;
}

html[data-eg-theme="dark"] #app-shell input::placeholder,
html[data-eg-theme="dark"] #app-shell textarea::placeholder {
  color: var(--eg-theme-muted) !important;
  opacity: 1 !important;
}

/* Keep Settings > Appearance typography controls inside the card. */
#subpanel-settings-appearance,
#subpanel-settings-appearance > div,
#subpanel-settings-appearance .dash-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#subpanel-settings-appearance > div {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) !important;
}

#theme-element-grid,
#theme-element-rows > div {
  grid-template-columns: minmax(64px, 0.7fr) minmax(76px, 0.72fr) minmax(0, 1.35fr) minmax(72px, 0.72fr) !important;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#theme-element-grid > *,
#theme-element-rows > div > *,
#theme-element-rows select,
#theme-element-rows input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#theme-element-rows select,
#theme-element-rows input[type="text"] {
  width: 100%;
}

#theme-element-rows input[type="color"] {
  flex: 0 0 32px;
}

#theme-element-rows > div > div:nth-child(3) {
  min-width: 0;
}

@media (max-width: 980px) {
  #subpanel-settings-appearance > div {
    grid-template-columns: 1fr !important;
  }
}