/* ============================================================
   THEME — Light/Dark mode. Redefines the app's core design-token
   variables (defined once in css/rebrand.css :root) under
   :root[data-theme="dark"]; since almost every rule in the app already
   reads colors through these variables (var(--clr-*, ...) etc.), this
   single override block re-themes the app broadly without editing every
   individual rule. Loaded after every other stylesheet so it wins.
   Toggle is set by js/theme.js (persisted) + the inline boot script in
   includes/head.php (avoids a flash on first paint).
   ============================================================ */

/* These exact values are lifted from the OS-shell gadget sidebar's own
   palette (css/os-shell.css .os-gadget: rgba(28,40,54)/rgba(14,22,32))
   so the whole app's dark mode reads as the same slate-navy family
   instead of an unrelated dark gray. */
:root[data-theme="dark"] {
  --app-bg: #0e1620;
  --surface: #1c2836;
  --surface-soft: #24313f;
  --surface-blue: #202c3a;
  --navy: #8fb3d1;
  --navy-dark: #6f9ab8;
  --blue-gray: #8fa2b8;
  --coral: #ff8a75;
  --coral-hover: #ff7860;
  --coral-soft: rgba(255, 138, 117, .16);
  --ink: #e8edf2;
  --ink-soft: #aab8c4;
  --ink-muted: #8291a0;
  --line: #2e3b4a;

  --clr-bg: var(--app-bg);
  --clr-surface: var(--surface);
  --clr-surface-2: var(--surface-soft);
  --clr-surface-3: var(--surface-blue);
  --clr-border: var(--line);
  --clr-border-2: #333f4a;
  --clr-primary: var(--coral);
  --clr-primary-dk: var(--coral-hover);
  --clr-primary-lt: #ffa694;
  --clr-accent: var(--navy);
  --clr-text: var(--ink);
  --clr-text-sub: var(--ink-soft);
  --clr-text-muted: var(--ink-muted);
  --clr-text-inv: #10161d;
  --shadow-card: 0 12px 30px rgba(0, 0, 0, .35);
  --shadow-raised: 0 8px 20px rgba(0, 0, 0, .4);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-raised);
  --shadow-lg: 0 22px 48px rgba(0, 0, 0, .5);

  color-scheme: dark;
}

/* Body/background: most screens rely on --clr-bg already, but a few use a
   literal white — pin the two universal surfaces explicitly. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-shell,
:root[data-theme="dark"] .screen {
  background: var(--clr-bg);
  color: var(--clr-text);
}

/* Inputs/selects/textareas rarely theme themselves via the shared tokens —
   give them an explicit dark surface so they don't stay white-on-dark. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border-color: var(--clr-border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: var(--clr-text-muted);
}

/* OS-shell (css/os-shell.css) defines its own token set for the taskbar,
   Start menu, and hover tint — but only ever assigns them light-glass
   values in its base :root block, with no dark variant. That left the
   taskbar/Start menu/toasts/attendance-gate as permanently light
   "islands" floating over an otherwise dark app. Redefining the same
   tokens here (plus the handful of surfaces that hardcode literal white
   instead of going through a token) completes the dark theme. */
:root[data-theme="dark"] {
  --os-taskbar-bg: rgba(20, 28, 38, .82);
  --os-taskbar-border: rgba(255, 255, 255, .1);
  --os-hover: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .toast {
  color: var(--os-ink, #e8edf2) !important;
  background: rgba(24, 33, 44, .96) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

:root[data-theme="dark"] .os-attendance-gate__card {
  background: rgba(24, 33, 44, .97);
  border-color: rgba(255, 255, 255, .1);
}

:root[data-theme="dark"] #screen-tools .tool-card[style*="cursor:default"],
:root[data-theme="dark"] #screen-warehouse .wh-project-stats-grid,
:root[data-theme="dark"] #screen-warehouse .wh-stock-track {
  background: var(--clr-surface, #1a2129) !important;
  border-color: var(--clr-border, #2a333d) !important;
}

:root[data-theme="dark"] #screen-daily-checklist-run .dc-inspection-sheet__head {
  background: var(--clr-surface-2, #202932) !important;
  border-bottom-color: var(--clr-border, #2a333d) !important;
}
:root[data-theme="dark"] #screen-daily-checklist-run .dc-group-header {
  background: var(--clr-surface, #1a2129) !important;
}

/* Quotations (css/operations-layout.css) was built with a lot of literal
   "background: #fff" instead of the shared --clr-* tokens most of the app
   already uses — the biggest single source of "light islands" left over
   in dark mode. Redirect the ones that are real surfaces (not the small
   pastel warning/danger tint chips, which stay as intentional accent
   colors) to the theme's own surface color. */
:root[data-theme="dark"] #screen-warehouse .wh-project-card:hover,
:root[data-theme="dark"] #screen-quotations .quotation-item:hover,
:root[data-theme="dark"] #screen-quotations .q-list-stat,
:root[data-theme="dark"] #screen-quotations #q-detail-content .quotation-paper,
:root[data-theme="dark"] #screen-quotations .quotation-paper__item-card,
:root[data-theme="dark"] #modal-q-form .q-item-row,
:root[data-theme="dark"] #modal-q-form .q-edit-product-dropdown,
:root[data-theme="dark"] #modal-q-form .q-edit-product-option,
:root[data-theme="dark"] #modal-q-view-items .q-items-table,
:root[data-theme="dark"] #modal-q-view-items .q-items-table td,
:root[data-theme="dark"] #modal-q-all-items .q-all-items-search,
:root[data-theme="dark"] #modal-q-all-items .q-all-item-card,
:root[data-theme="dark"] #modal-q-stats .q-stats-panel,
:root[data-theme="dark"] #modal-q-stats .q-stat-card,
:root[data-theme="dark"] #modal-q-stats .q-stats-donut::after {
  background: var(--clr-surface, #1c2836) !important;
}
:root[data-theme="dark"] #screen-quotations .quotation-paper {
  color: var(--clr-text, #e8edf2) !important;
}

/* Scattered literal-white surfaces found across style.css/rebrand.css/
   account-tools-layout.css — each is a real content surface (not an
   intentional colored badge), so they get the same treatment. */
:root[data-theme="dark"] .detail-hero-icon,
:root[data-theme="dark"] .task-comment-form textarea,
:root[data-theme="dark"] .mobile-nav-sheet__icon,
:root[data-theme="dark"] .bc-preview-card,
:root[data-theme="dark"] .eqs-preview-card,
:root[data-theme="dark"] #screen-tools .tool-card:hover,
:root[data-theme="dark"] #screen-notifications .notif-item:hover,
:root[data-theme="dark"] .q-detail-content .quotation-paper,
:root[data-theme="dark"] .quotation-paper__table thead tr,
:root[data-theme="dark"] .search-box input:focus {
  background: var(--clr-surface, #1c2836) !important;
}