/*
 * dark.css — `tally:dark-mode` (2026-09-29).
 *
 * Dark values for the design tokens (tokens.css), plus the handful of places
 * that draw a light colour directly instead of through a token (glass
 * borders, the desktop sidebar's whites). Applied by `data-mode="dark"` on
 * <html>, which a small script in index.html's <head> sets before anything
 * paints — from the choice in Settings (אוטומטי / בהיר / כהה, saved on this
 * device), where "automatic" follows the phone's own setting.
 *
 * The chart cards keep their own chart theme (project-detail.css, `--pc-*`);
 * the dark ones already suit this, and "daylight" stays a light card by choice.
 */

:root[data-mode="dark"] {
  color-scheme: dark;
  --bg:         #0f121a;
  --bg-raise:   #181c27;
  --surface:        rgba(30, 35, 49, 0.88);
  --surface-strong: rgba(26, 30, 43, 0.94);
  --surface-solid:  #1a1e2a;
  --border:     rgba(255, 255, 255, 0.09);
  --text:       #e8ebf3;
  --text-muted: #939bb0;
  --accent:     #6f95ff;
  --accent-2:   #9a82ff;
  --accent-soft: rgba(111, 149, 255, 0.16);
  --value:      #e8ebf3;
  --pos:        #52c785;
  --neg:        #ff6f79;
  --amber:      #e0a548;
  --shadow-lg: 0 16px 34px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.35);
}

[data-mode="dark"] body { background: linear-gradient(180deg, #0e1119 0%, #131320 100%) fixed; }

/* Glass borders: a white hairline reads as a glow on a dark card. */
[data-mode="dark"] .halves__bar,
[data-mode="dark"] .account__btn,
[data-mode="dark"] .account__menu,
[data-mode="dark"] .quote-list,
[data-mode="dark"] .hero,
[data-mode="dark"] .state,
[data-mode="dark"] .home-insight,
[data-mode="dark"] .project-card,
[data-mode="dark"] .dashboard__state,
[data-mode="dark"] .status-filter__chip,
[data-mode="dark"] .reports-bars,
[data-mode="dark"] .report-figures,
[data-mode="dark"] .reports-filters,
[data-mode="dark"] .reports-insights__tile,
[data-mode="dark"] .reports-results,
[data-mode="dark"] .reports-period__chip,
[data-mode="dark"] .txn-list,
[data-mode="dark"] .detail__state { border-color: var(--border); }

[data-mode="dark"] .halves__fab { border-color: var(--bg); }

/* Faint dark tints that vanish on a dark ground. */
[data-mode="dark"] .status-filter__count,
[data-mode="dark"] .txn__chip,
[data-mode="dark"] .report-figures__nested { background: rgba(255, 255, 255, 0.06); }
[data-mode="dark"] .reports-table td { border-block-end-color: var(--border); }
[data-mode="dark"] .reports-table tfoot td { border-block-start-color: rgba(255, 255, 255, 0.16); }

/* The desktop sidebar is drawn in literal whites. */
[data-mode="dark"] .sidebar__rail { background: #141824; }
[data-mode="dark"] .sidebar__panel { background: #11141d; }
[data-mode="dark"] .sidebar__nav { color: var(--text-muted); }
[data-mode="dark"] .sidebar__nav:hover { background: rgba(255, 255, 255, 0.06); }
[data-mode="dark"] .sidebar__item:hover { background: rgba(255, 255, 255, 0.04); }
[data-mode="dark"] .sidebar__item.is-selected { background: var(--surface-solid); }
[data-mode="dark"] .sidebar__track { background: rgba(255, 255, 255, 0.1); }
[data-mode="dark"] .sidebar__tray {
  --tray-rim-hi: rgba(255, 255, 255, .42);
  --tray-rim-lo: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7), 0 0 0 .5px rgba(0, 0, 0, .4), inset 0 1px 1px rgba(255, 255, 255, .1);
}
@media (max-height: 740px) {
  [data-mode="dark"] .sidebar__tray { background: rgba(32, 36, 48, .9); }
}
[data-mode="dark"] .sidebar__dot { border-color: #141824; }
[data-mode="dark"] .sidebar__me .sidebar__avatar { box-shadow: 0 0 0 3px #141824, 0 0 0 4.5px rgba(111, 149, 255, 0.4); }
[data-mode="dark"] .sidebar__me[aria-expanded="true"] .sidebar__avatar { box-shadow: 0 0 0 3px #141824, 0 0 0 5px var(--accent); }

/* Pills that sit on the (now dark) text colour need their own light face. */
[data-mode="dark"] .sync-pill,
[data-mode="dark"] .undo-toast { background: #e8ebf3; color: #121520; }
[data-mode="dark"] .sync-pill.is-failed { background: var(--neg); color: #fff; }
[data-mode="dark"] .undo-toast__btn { background: rgba(0, 0, 0, 0.1); color: #121520; }

/* Native date/number fields pick up the dark scheme from `color-scheme`. */

/* The rail's hover labels sit on `--text`, which is light in dark mode —
   white on near-white (Almon's screenshot). Dark label, light text. */
[data-mode="dark"] .sidebar__tip {
  background: #2a3042;
  color: #f1f3f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* `tally:offline-everything` — the quiet offline pill and soft notices. */
[data-mode="dark"] .sync-pill.is-offline { background: #1b2030; color: #aab1c3; border-color: rgba(255, 255, 255, 0.10); }
[data-mode="dark"] .soft-toast { background: #1b2030; color: #e8ebf3; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
[data-mode="dark"] .soft-toast--ok { color: var(--pos, #5fd39b); }
[data-mode="dark"] .soft-toast--warn { color: var(--neg); }
[data-mode="dark"] .log-row__follow.is-due { background: rgba(232, 167, 58, 0.22); }
[data-mode="dark"] .new-sheet__item, [data-mode="dark"] .log-row__done { background: var(--surface-strong); }