/**
 * Dark mode remaps for every 2026 office surface.
 *
 * Light sheets define page tokens (--home-panel, --jobs-mist, …) but leave
 * them light-only and hardcode #eceef1 / #fff in places. This file flips those
 * tokens (and parent canvas backgrounds) when data-theme="dark" so icons,
 * cards, text, and chrome stay readable without per-icon hacks.
 *
 * Login screen is intentionally untouched (locked visuals).
 *
 * IMPORTANT: design-system.css sets light tokens on `:root` (same specificity
 * as [data-theme="dark"]). Use html[data-theme="dark"] here so shell tokens
 * actually win, otherwise pale (-dark) PNG marks paint on a still-white rail.
 */

/* ── Shell tokens (must beat design-system :root) ── */
html[data-theme="dark"] {
  color-scheme: dark;
  --fd-blue: #6b9bd8;
  --fd-blue-dark: #85aede;
  --fd-blue-soft: #1c2f4a;
  --fd-ink: #e8edf5;
  --fd-ink-soft: #c0cadb;
  --fd-muted: #93a1b7;
  --fd-muted-soft: #64748b;
  --fd-bg: #0f1523;
  --fd-bg-subtle: #161d2e;
  --fd-hover: rgba(255, 255, 255, 0.045);
  --fd-surface: #1a2333;
  --fd-surface-raised: #202b3f;
  --fd-surface-muted: #161d2e;
  --fd-border: #2b374c;
  --fd-border-strong: #3c4a63;
  --fd-row-hover: rgba(255, 255, 255, 0.045);
  --fd-row-selected: rgba(107, 155, 216, 0.18);
  --fd-nav-bg: #121926;
  --fd-nav-text: rgba(255, 255, 255, 0.78);
  --fd-nav-text-active: #ffffff;
  --fd-nav-hover: rgba(255, 255, 255, 0.07);
  --fd-nav-active: rgba(107, 155, 216, 0.22);
  --fd-nav-border: #2b374c;
  --fd-nav-divider: #2b374c;
  --fd-nav-brand: rgba(255, 255, 255, 0.9);
  --fd-nav-group: rgba(255, 255, 255, 0.42);
  --fd-chrome-bg: #121926;
  --fd-chrome-border: #2b374c;
  --fd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --fd-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.35);
  --fd-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 42px rgba(0, 0, 0, 0.55);
  --fd-focus-ring: 0 0 0 3px rgba(107, 155, 216, 0.28);
  --fd-btn-bg: #3d74bd;
  --fd-btn-bg-hover: #4d83cc;
}

/* Explicit chrome paints so pale nav PNG marks sit on dark rails. */
html[data-theme="dark"] #app-shell,
html[data-theme="dark"] #app-shell .app-main {
  background: #0f1523;
  color: #e8edf5;
}

html[data-theme="dark"] #app-shell .side-nav {
  background: #121926 !important;
  border-right-color: #2b374c !important;
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] #app-shell .global-utility-bar,
html[data-theme="dark"] #app-shell .side-brand,
html[data-theme="dark"] #app-shell .side-menu {
  background: #121926 !important;
  border-color: #2b374c !important;
  color: #e8edf5;
}

html[data-theme="dark"] #app-shell .side-nav .tab-btn,
html[data-theme="dark"] #app-shell .side-nav .side-utility-btn,
html[data-theme="dark"] #app-shell .side-nav .side-sign-out {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] #app-shell .side-nav .tab-btn:hover,
html[data-theme="dark"] #app-shell .side-nav .side-utility-btn:hover,
html[data-theme="dark"] #app-shell .side-nav .side-sign-out:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

html[data-theme="dark"] #app-shell .side-nav .tab-btn.active,
html[data-theme="dark"] #app-shell .side-nav .tab-btn.active:hover {
  background: rgba(107, 155, 216, 0.22) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #app-shell .side-nav .side-fielddocs-logo {
  background: #1a2333;
  border-color: #2b374c;
}

html[data-theme="dark"] #app-shell .mobile-nav-drawer-panel {
  background: #1a2333;
  color: #e8edf5;
}

/* ── Shared dark page tokens ── */
[data-theme="dark"] #app-shell #tab-home.home-2026,
[data-theme="dark"] #app-shell #tab-schedule.schedule-2026,
[data-theme="dark"] #app-shell #tab-jobs.jobs-2026,
[data-theme="dark"] #app-shell #tab-customers.customers-2026,
[data-theme="dark"] #app-shell #tab-messages.messages-2026,
[data-theme="dark"] #app-shell #tab-requests.requests-2026,
[data-theme="dark"] #app-shell #tab-estimates.estimates-2026,
[data-theme="dark"] #app-shell #tab-invoices.invoices-2026,
[data-theme="dark"] #app-shell #tab-pricing.pricing-2026,
[data-theme="dark"] #app-shell #tab-inventory.inventory-2026,
[data-theme="dark"] #app-shell #tab-insights.insights-2026,
[data-theme="dark"] #app-shell #tab-reports.reports-2026,
[data-theme="dark"] #app-shell #tab-marketing.marketing-2026,
[data-theme="dark"] #app-shell #tab-settings.settings-2026 {
  --fd-blue: #6b9bd8;
  --fd-blue-dark: #85aede;
  --fd-blue-soft: rgba(107, 155, 216, 0.18);
  --fd-bg: #1a2333;
  --fd-bg-subtle: #161d2e;
  --fd-row-hover: rgba(255, 255, 255, 0.045);
  --fd-row-selected: rgba(107, 155, 216, 0.18);
  --fd-surface: #1a2333;
  --fd-border: #2b374c;
  --fd-ink: #e8edf5;
  --fd-ink-soft: #c0cadb;
  --fd-muted: #93a1b7;
}

[data-theme="dark"] #app-shell #tab-home.home-2026 {
  --home-ink: #e8edf5;
  --home-panel: #1a2333;
  --home-mist: #0f1523;
  --home-paper: #161d2e;
  --home-accent: #6b9bd8;
  --home-accent-ink: #0f1523;
  --home-accent-hover: #85aede;
  --home-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-schedule.schedule-2026 {
  --sched-ink: #e8edf5;
  --sched-panel: #1a2333;
  --sched-mist: #0f1523;
  --sched-paper: #161d2e;
  --sched-accent: #6b9bd8;
  --sched-accent-hover: #85aede;
  --sched-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-jobs.jobs-2026 {
  --jobs-ink: #e8edf5;
  --jobs-panel: #1a2333;
  --jobs-mist: #0f1523;
  --jobs-paper: #161d2e;
  --jobs-accent: #6b9bd8;
  --jobs-accent-hover: #85aede;
  --jobs-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-customers.customers-2026 {
  --clients-ink: #e8edf5;
  --clients-panel: #1a2333;
  --clients-mist: #0f1523;
  --clients-paper: #161d2e;
  --clients-accent: #6b9bd8;
  --clients-accent-hover: #85aede;
  --clients-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-messages.messages-2026 {
  --msg-ink: #e8edf5;
  --msg-panel: #1a2333;
  --msg-mist: #0f1523;
  --msg-paper: #161d2e;
  --msg-accent: #6b9bd8;
  --msg-accent-hover: #85aede;
  --msg-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-requests.requests-2026 {
  --req-ink: #e8edf5;
  --req-panel: #1a2333;
  --req-mist: #0f1523;
  --req-paper: #161d2e;
  --req-accent: #6b9bd8;
  --req-accent-hover: #85aede;
  --req-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-estimates.estimates-2026 {
  --est-ink: #e8edf5;
  --est-panel: #1a2333;
  --est-mist: #0f1523;
  --est-paper: #161d2e;
  --est-accent: #6b9bd8;
  --est-accent-hover: #85aede;
  --est-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-invoices.invoices-2026,
[data-theme="dark"] #app-shell #tab-inventory.inventory-2026 {
  --inv-ink: #e8edf5;
  --inv-panel: #1a2333;
  --inv-mist: #0f1523;
  --inv-paper: #161d2e;
  --inv-accent: #6b9bd8;
  --inv-accent-hover: #85aede;
  --inv-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-pricing.pricing-2026 {
  --price-ink: #e8edf5;
  --price-panel: #1a2333;
  --price-mist: #0f1523;
  --price-paper: #161d2e;
  --price-accent: #6b9bd8;
  --price-accent-hover: #85aede;
  --price-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-insights.insights-2026 {
  --ins-ink: #e8edf5;
  --ins-panel: #1a2333;
  --ins-mist: #0f1523;
  --ins-paper: #161d2e;
  --ins-accent: #6b9bd8;
  --ins-accent-hover: #85aede;
  --ins-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-reports.reports-2026 {
  --rpt-ink: #e8edf5;
  --rpt-panel: #1a2333;
  --rpt-mist: #0f1523;
  --rpt-paper: #161d2e;
  --rpt-accent: #6b9bd8;
  --rpt-accent-hover: #85aede;
  --rpt-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-marketing.marketing-2026 {
  --mkt-ink: #e8edf5;
  --mkt-panel: #1a2333;
  --mkt-mist: #0f1523;
  --mkt-paper: #161d2e;
  --mkt-accent: #6b9bd8;
  --mkt-accent-hover: #85aede;
  --mkt-line: rgba(232, 237, 245, 0.12);
}

[data-theme="dark"] #app-shell #tab-settings.settings-2026 {
  --set-ink: #e8edf5;
  --set-panel: #1a2333;
  --set-mist: #0f1523;
  --set-paper: #161d2e;
  --set-accent: #6b9bd8;
  --set-accent-hover: #85aede;
  --set-line: rgba(232, 237, 245, 0.12);
}

/* Parent canvas (variables do not inherit upward from the tab). */
[data-theme="dark"] #app-shell .app-main:has(#tab-home.home-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-schedule.schedule-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-jobs.jobs-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-customers.customers-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-messages.messages-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-requests.requests-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-estimates.estimates-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-invoices.invoices-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-pricing.pricing-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-inventory.inventory-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-insights.insights-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-reports.reports-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-marketing.marketing-2026:not(.is-hidden)),
[data-theme="dark"] #app-shell .app-main:has(#tab-settings.settings-2026:not(.is-hidden)) {
  background: #0f1523;
}

/* Hardcoded white cards in 2026 sheets → dark surfaces */
[data-theme="dark"] #app-shell [class*="-2026"] [style*="background: #fff"],
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-money-chip,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-queue-tile,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-panel,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-getting-started-compact,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-btn-secondary,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-btn-outline {
  background-color: var(--home-panel, #1a2333);
}

/* Home muted text used invalid rgba(...) syntax; force readable dark colors. */
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-kicker,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-section-kicker,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-panel-title,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-queue-tile-label,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-quiet,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-today-meta,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-today-address,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-priority-row-num,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-activity-meta,
[data-theme="dark"] #app-shell #tab-home.home-2026 .home-activity-date {
  color: rgba(232, 237, 245, 0.55);
}

/* Desktop sidebar: office-2026 forces a white rail; restore dark chrome. */
@media (min-width: 768px) {
  [data-theme="dark"] #app-shell .side-nav {
    background: var(--fd-nav-bg) !important;
    border-right-color: var(--fd-nav-border) !important;
  }

  [data-theme="dark"] #app-shell .side-nav .tab-btn,
  [data-theme="dark"] #app-shell .side-nav .side-utility-btn,
  [data-theme="dark"] #app-shell .side-nav .side-sign-out {
    color: var(--fd-nav-text);
  }

  [data-theme="dark"] #app-shell .side-nav .tab-btn:hover,
  [data-theme="dark"] #app-shell .side-nav .side-utility-btn:hover,
  [data-theme="dark"] #app-shell .side-nav .side-sign-out:hover {
    background: var(--fd-nav-hover);
    color: var(--fd-nav-text-active);
  }

  [data-theme="dark"] #app-shell .side-nav .tab-btn.active,
  [data-theme="dark"] #app-shell .side-nav .tab-btn.active:hover {
    background: var(--fd-nav-active) !important;
    color: var(--fd-nav-text-active) !important;
  }

  [data-theme="dark"] #app-shell .side-nav .side-footer {
    border-top-color: var(--fd-nav-divider);
  }

  [data-theme="dark"] #app-shell .side-nav .side-fielddocs-logo {
    background: var(--fd-surface);
    border-color: var(--fd-border);
  }

  [data-theme="dark"] #app-shell .side-nav .side-powered-text {
    color: var(--fd-nav-group);
  }
}

/* Global chrome on mobile */
[data-theme="dark"] .global-utility-bar,
[data-theme="dark"] .side-brand,
[data-theme="dark"] .side-menu {
  background: var(--fd-chrome-bg);
  border-color: var(--fd-chrome-border);
}

/* Inputs / tables / modals that still hardcode light surfaces inside 2026 tabs */
[data-theme="dark"] #app-shell [class*="-2026"] input,
[data-theme="dark"] #app-shell [class*="-2026"] select,
[data-theme="dark"] #app-shell [class*="-2026"] textarea {
  background-color: var(--fd-surface);
  color: var(--fd-ink);
  border-color: var(--fd-border);
}

[data-theme="dark"] #app-shell [class*="-2026"] .portal-table,
[data-theme="dark"] #app-shell [class*="-2026"] .docs-table,
[data-theme="dark"] #app-shell [class*="-2026"] .data-table,
[data-theme="dark"] #app-shell [class*="-2026"] table {
  background: var(--fd-surface);
  color: var(--fd-ink);
}

[data-theme="dark"] #app-shell [class*="-2026"] .portal-table th,
[data-theme="dark"] #app-shell [class*="-2026"] .docs-table th,
[data-theme="dark"] #app-shell [class*="-2026"] .data-table th {
  background: var(--fd-bg-subtle);
  color: var(--fd-muted);
  border-color: var(--fd-border);
}

[data-theme="dark"] #app-shell [class*="-2026"] .portal-table td,
[data-theme="dark"] #app-shell [class*="-2026"] .docs-table td,
[data-theme="dark"] #app-shell [class*="-2026"] .data-table td {
  border-color: var(--fd-border);
  color: var(--fd-ink);
}

/* Mobile: avoid desktop grids/tables overflowing the viewport. */
@media (max-width: 767px) {
  #app-shell [class*="-2026"] .home-money-strip,
  #app-shell [class*="-2026"] .home-queue,
  #app-shell [class*="-2026"] .home-grid {
    grid-template-columns: 1fr !important;
  }

  #app-shell [class*="-2026"] .portal-table-wrap,
  #app-shell [class*="-2026"] .docs-table-wrap,
  #app-shell [class*="-2026"] .data-table-wrap,
  #app-shell [class*="-2026"] .fc,
  #app-shell [class*="-2026"] .schedule-board,
  #app-shell [class*="-2026"] .dispatch-board {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #app-shell [class*="-2026"] .portal-header-actions .btn-primary,
  #app-shell [class*="-2026"] .portal-header-actions .btn-secondary,
  #app-shell [class*="-2026"] [class*="-hero-nav"] .btn-primary,
  #app-shell [class*="-2026"] [class*="-hero-nav"] .btn-secondary,
  #app-shell [class*="-2026"] [class*="-add-btn"] {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  #app-shell [class*="-2026"] input,
  #app-shell [class*="-2026"] select,
  #app-shell [class*="-2026"] textarea {
    font-size: 16px; /* prevent iOS zoom on focus */
  }
}