/*
 * NisbaX dashboard theme (night mode surfaces/text follow DESIGN.md). Generated from one token table: every Tailwind color in
 * dashboard/*.html is rgb(var(--c-NAME) / <alpha-value>), so html.dark only swaps variables.
 */
:root {
  --c-on-primary: 255 255 255;
  --c-on-tertiary: 255 255 255;
  --c-secondary-fixed: 233 221 255;
  --c-secondary-fixed-dim: 208 188 255;
  --c-inverse-primary: 78 222 163;
  --c-on-background: 11 28 48;
  --c-primary-container: 16 185 129;
  --c-on-surface-variant: 60 74 66;
  --c-surface-container: 229 238 255;
  --c-surface-container-lowest: 255 255 255;
  --c-on-error-container: 147 0 10;
  --c-surface-bright: 248 249 255;
  --c-error-container: 255 218 214;
  --c-tertiary-fixed-dim: 255 182 144;
  --c-on-surface: 11 28 48;
  --c-surface-variant: 211 228 254;
  --c-surface-container-low: 239 244 255;
  --c-on-tertiary-fixed-variant: 120 50 0;
  --c-primary-fixed-dim: 78 222 163;
  --c-secondary-container: 132 85 239;
  --c-inverse-surface: 33 49 69;
  --c-secondary: 107 56 212;
  --c-primary-fixed: 111 251 190;
  --c-inverse-on-surface: 234 241 255;
  --c-on-secondary-fixed-variant: 85 22 190;
  --c-on-primary-fixed-variant: 0 82 54;
  --c-tertiary-container: 255 126 45;
  --c-on-error: 255 255 255;
  --c-surface: 248 249 255;
  --c-outline-variant: 187 202 191;
  --c-tertiary-fixed: 255 219 202;
  --c-outline: 108 122 113;
  --c-on-tertiary-fixed: 52 17 0;
  --c-on-secondary-container: 255 251 255;
  --c-on-secondary-fixed: 35 0 92;
  --c-on-tertiary-container: 98 39 0;
  --c-tertiary: 157 67 0;
  --c-on-primary-fixed: 0 33 19;
  --c-on-secondary: 255 255 255;
  --c-surface-dim: 203 219 245;
  --c-on-primary-container: 0 66 43;
  --c-primary: 0 108 73;
  --c-error: 186 26 26;
  --c-surface-container-highest: 211 228 254;
  --c-background: 248 249 255;
  --c-surface-container-high: 220 233 255;
  --c-surface-tint: 0 108 73;
}

html.dark {
  color-scheme: dark;
  --c-on-primary: 0 56 37;
  --c-on-tertiary: 85 33 0;
  --c-inverse-primary: 0 108 73;
  --c-on-background: 248 250 252;
  --c-on-surface-variant: 148 163 184;
  --c-surface-container: 31 41 61;
  --c-surface-container-lowest: 22 30 46;
  --c-on-error-container: 255 218 214;
  --c-surface-bright: 31 41 61;
  --c-error-container: 92 26 26;
  --c-on-surface: 248 250 252;
  --c-surface-variant: 44 56 84;
  --c-surface-container-low: 26 35 53;
  --c-secondary-container: 107 56 212;
  --c-inverse-surface: 248 250 252;
  --c-secondary: 208 188 255;
  --c-inverse-on-surface: 22 30 46;
  --c-on-error: 105 0 5;
  --c-surface: 11 15 23;
  --c-outline-variant: 30 41 59;
  --c-outline: 100 116 139;
  --c-tertiary: 255 182 144;
  --c-on-secondary: 60 0 145;
  --c-surface-dim: 8 11 18;
  --c-primary: 78 222 163;
  --c-error: 255 180 171;
  --c-surface-container-highest: 44 56 84;
  --c-background: 11 15 23;
  --c-surface-container-high: 38 49 74;
  --c-surface-tint: 78 222 163;
}

/* Amounts that read left-to-right: keep "⃁ +4,200.00" in one isolated run */
.dir-ltr { direction: ltr; unicode-bidi: isolate; }

html, body { transition: background-color 0.25s ease; }

/* ---- Dark mode: soften Tailwind's light pastel palette (chips, banners, quick actions) ---- */
html.dark .bg-emerald-50,
html.dark .hover\:bg-emerald-50:hover,
html.dark .bg-emerald-50\/60,
html.dark .bg-emerald-50\/70,
html.dark .bg-emerald-50\/80 { background-color: rgb(16 185 129 / 0.1); }
html.dark .bg-emerald-100,
html.dark .hover\:bg-emerald-100:hover,
html.dark .bg-emerald-100\/60,
html.dark .bg-emerald-100\/70,
html.dark .bg-emerald-100\/80 { background-color: rgb(16 185 129 / 0.16); }
html.dark .bg-emerald-200,
html.dark .hover\:bg-emerald-200:hover,
html.dark .bg-emerald-200\/60,
html.dark .bg-emerald-200\/70,
html.dark .bg-emerald-200\/80 { background-color: rgb(16 185 129 / 0.24); }
html.dark .bg-emerald-300,
html.dark .hover\:bg-emerald-300:hover,
html.dark .bg-emerald-300\/60,
html.dark .bg-emerald-300\/70,
html.dark .bg-emerald-300\/80 { background-color: rgb(16 185 129 / 0.32); }
html.dark .bg-amber-50,
html.dark .hover\:bg-amber-50:hover,
html.dark .bg-amber-50\/60,
html.dark .bg-amber-50\/70,
html.dark .bg-amber-50\/80 { background-color: rgb(245 158 11 / 0.1); }
html.dark .bg-amber-100,
html.dark .hover\:bg-amber-100:hover,
html.dark .bg-amber-100\/60,
html.dark .bg-amber-100\/70,
html.dark .bg-amber-100\/80 { background-color: rgb(245 158 11 / 0.16); }
html.dark .bg-amber-200,
html.dark .hover\:bg-amber-200:hover,
html.dark .bg-amber-200\/60,
html.dark .bg-amber-200\/70,
html.dark .bg-amber-200\/80 { background-color: rgb(245 158 11 / 0.24); }
html.dark .bg-amber-300,
html.dark .hover\:bg-amber-300:hover,
html.dark .bg-amber-300\/60,
html.dark .bg-amber-300\/70,
html.dark .bg-amber-300\/80 { background-color: rgb(245 158 11 / 0.32); }
html.dark .bg-teal-50,
html.dark .hover\:bg-teal-50:hover,
html.dark .bg-teal-50\/60,
html.dark .bg-teal-50\/70,
html.dark .bg-teal-50\/80 { background-color: rgb(20 184 166 / 0.1); }
html.dark .bg-teal-100,
html.dark .hover\:bg-teal-100:hover,
html.dark .bg-teal-100\/60,
html.dark .bg-teal-100\/70,
html.dark .bg-teal-100\/80 { background-color: rgb(20 184 166 / 0.16); }
html.dark .bg-teal-200,
html.dark .hover\:bg-teal-200:hover,
html.dark .bg-teal-200\/60,
html.dark .bg-teal-200\/70,
html.dark .bg-teal-200\/80 { background-color: rgb(20 184 166 / 0.24); }
html.dark .bg-teal-300,
html.dark .hover\:bg-teal-300:hover,
html.dark .bg-teal-300\/60,
html.dark .bg-teal-300\/70,
html.dark .bg-teal-300\/80 { background-color: rgb(20 184 166 / 0.32); }
html.dark .bg-purple-50,
html.dark .hover\:bg-purple-50:hover,
html.dark .bg-purple-50\/60,
html.dark .bg-purple-50\/70,
html.dark .bg-purple-50\/80 { background-color: rgb(168 85 247 / 0.1); }
html.dark .bg-purple-100,
html.dark .hover\:bg-purple-100:hover,
html.dark .bg-purple-100\/60,
html.dark .bg-purple-100\/70,
html.dark .bg-purple-100\/80 { background-color: rgb(168 85 247 / 0.16); }
html.dark .bg-purple-200,
html.dark .hover\:bg-purple-200:hover,
html.dark .bg-purple-200\/60,
html.dark .bg-purple-200\/70,
html.dark .bg-purple-200\/80 { background-color: rgb(168 85 247 / 0.24); }
html.dark .bg-purple-300,
html.dark .hover\:bg-purple-300:hover,
html.dark .bg-purple-300\/60,
html.dark .bg-purple-300\/70,
html.dark .bg-purple-300\/80 { background-color: rgb(168 85 247 / 0.32); }
html.dark .bg-orange-50,
html.dark .hover\:bg-orange-50:hover,
html.dark .bg-orange-50\/60,
html.dark .bg-orange-50\/70,
html.dark .bg-orange-50\/80 { background-color: rgb(249 115 22 / 0.1); }
html.dark .bg-orange-100,
html.dark .hover\:bg-orange-100:hover,
html.dark .bg-orange-100\/60,
html.dark .bg-orange-100\/70,
html.dark .bg-orange-100\/80 { background-color: rgb(249 115 22 / 0.16); }
html.dark .bg-orange-200,
html.dark .hover\:bg-orange-200:hover,
html.dark .bg-orange-200\/60,
html.dark .bg-orange-200\/70,
html.dark .bg-orange-200\/80 { background-color: rgb(249 115 22 / 0.24); }
html.dark .bg-orange-300,
html.dark .hover\:bg-orange-300:hover,
html.dark .bg-orange-300\/60,
html.dark .bg-orange-300\/70,
html.dark .bg-orange-300\/80 { background-color: rgb(249 115 22 / 0.32); }
html.dark .bg-slate-50,
html.dark .hover\:bg-slate-50:hover,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/80 { background-color: rgb(148 163 184 / 0.1); }
html.dark .bg-slate-100,
html.dark .hover\:bg-slate-100:hover,
html.dark .bg-slate-100\/60,
html.dark .bg-slate-100\/70,
html.dark .bg-slate-100\/80 { background-color: rgb(148 163 184 / 0.16); }
html.dark .bg-slate-200,
html.dark .hover\:bg-slate-200:hover,
html.dark .bg-slate-200\/60,
html.dark .bg-slate-200\/70,
html.dark .bg-slate-200\/80 { background-color: rgb(148 163 184 / 0.24); }
html.dark .bg-slate-300,
html.dark .hover\:bg-slate-300:hover,
html.dark .bg-slate-300\/60,
html.dark .bg-slate-300\/70,
html.dark .bg-slate-300\/80 { background-color: rgb(148 163 184 / 0.32); }
html.dark .bg-rose-50,
html.dark .hover\:bg-rose-50:hover,
html.dark .bg-rose-50\/60,
html.dark .bg-rose-50\/70,
html.dark .bg-rose-50\/80 { background-color: rgb(244 63 94 / 0.1); }
html.dark .bg-rose-100,
html.dark .hover\:bg-rose-100:hover,
html.dark .bg-rose-100\/60,
html.dark .bg-rose-100\/70,
html.dark .bg-rose-100\/80 { background-color: rgb(244 63 94 / 0.16); }
html.dark .bg-rose-200,
html.dark .hover\:bg-rose-200:hover,
html.dark .bg-rose-200\/60,
html.dark .bg-rose-200\/70,
html.dark .bg-rose-200\/80 { background-color: rgb(244 63 94 / 0.24); }
html.dark .bg-rose-300,
html.dark .hover\:bg-rose-300:hover,
html.dark .bg-rose-300\/60,
html.dark .bg-rose-300\/70,
html.dark .bg-rose-300\/80 { background-color: rgb(244 63 94 / 0.32); }
html.dark .bg-blue-50,
html.dark .hover\:bg-blue-50:hover,
html.dark .bg-blue-50\/60,
html.dark .bg-blue-50\/70,
html.dark .bg-blue-50\/80 { background-color: rgb(59 130 246 / 0.1); }
html.dark .bg-blue-100,
html.dark .hover\:bg-blue-100:hover,
html.dark .bg-blue-100\/60,
html.dark .bg-blue-100\/70,
html.dark .bg-blue-100\/80 { background-color: rgb(59 130 246 / 0.16); }
html.dark .bg-blue-200,
html.dark .hover\:bg-blue-200:hover,
html.dark .bg-blue-200\/60,
html.dark .bg-blue-200\/70,
html.dark .bg-blue-200\/80 { background-color: rgb(59 130 246 / 0.24); }
html.dark .bg-blue-300,
html.dark .hover\:bg-blue-300:hover,
html.dark .bg-blue-300\/60,
html.dark .bg-blue-300\/70,
html.dark .bg-blue-300\/80 { background-color: rgb(59 130 246 / 0.32); }

html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6ee7b7; }
html.dark .text-emerald-900 { color: #a7f3d0; }
html.dark .text-emerald-950 { color: #d1fae5; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d; }
html.dark .text-amber-900 { color: #fde68a; }
html.dark .text-amber-950 { color: #fef3c7; }
html.dark .text-teal-700, html.dark .text-teal-800 { color: #5eead4; }
html.dark .text-teal-900 { color: #99f6e4; }
html.dark .text-teal-950 { color: #ccfbf1; }
html.dark .text-purple-700, html.dark .text-purple-800 { color: #d8b4fe; }
html.dark .text-purple-900 { color: #e9d5ff; }
html.dark .text-purple-950 { color: #f3e8ff; }
html.dark .text-orange-700, html.dark .text-orange-800 { color: #fdba74; }
html.dark .text-orange-900 { color: #fed7aa; }
html.dark .text-orange-950 { color: #ffedd5; }
html.dark .text-slate-700, html.dark .text-slate-800 { color: #cbd5e1; }
html.dark .text-slate-900 { color: #e2e8f0; }
html.dark .text-slate-950 { color: #f1f5f9; }
html.dark .text-rose-700, html.dark .text-rose-800 { color: #fda4af; }
html.dark .text-rose-900 { color: #fecdd3; }
html.dark .text-rose-950 { color: #ffe4e6; }
html.dark .text-blue-700, html.dark .text-blue-800 { color: #93c5fd; }
html.dark .text-blue-900 { color: #bfdbfe; }
html.dark .text-blue-950 { color: #dbeafe; }
html.dark .bg-white { background-color: rgb(var(--c-surface-container-lowest)); }
html.dark .text-white { color: #fff; }

/* Buttons and selected pills: navy like the landing page (bg-ink), near-white at night.
   They're the elements that pair the green fill with its text colour; chart bars, dots and
   the income/expense switch only use the fill (or are excluded) and stay green. */
:root { --c-btn: 11 28 48; --c-btn-hover: 30 41 59; --c-on-btn: 255 255 255; --c-btn-shadow: 11 28 48; }
html.dark { --c-btn: 241 245 249; --c-btn-hover: 203 213 225; --c-on-btn: 11 15 23; --c-btn-shadow: 0 0 0; }
html .bg-primary-container.text-on-primary-container:not(.tx-kind),
html .group:hover .group-hover\:bg-primary-container.group-hover\:text-on-primary-container {
  background-color: rgb(var(--c-btn));
  color: rgb(var(--c-on-btn));
}
html button.bg-primary-container.text-on-primary-container:not(.tx-kind):hover { background-color: rgb(var(--c-btn-hover)); }
html .bg-primary-container.text-on-primary-container:not(.tx-kind)[class*="shadow"] { box-shadow: 0 8px 20px -6px rgb(var(--c-btn-shadow) / .35); }