Add Cyberpunk, Neo-Brutalist, and Nordic themes; fix dark-theme readability issues

New themes follow the existing per-theme CSS variable pattern in
variables.css, with a few Neo-Brutalist-only border/shadow additions
for its signature hard-edged look.

Also fixes several dark-background readability bugs surfaced while
testing the new themes (affecting the existing Dark theme too):
- Analytics charts had a hardcoded white card background and hardcoded
  grid/border/accent colors, so they never actually followed the theme
- Sidebar tooltips and the transactions bulk-action bar paired
  hardcoded white text with --gray-800/900, which invert to near-white
  in dark themes
- The transactions search input had no explicit background/text color
  and fell back to the browser's default white input styling
- Date inputs' native calendar icon is browser-rendered and ignores
  page CSS; set the color-scheme property so it renders light/dark
  chrome to match the active theme

Author: naveenv92

static/css/components.css

@@ -473,3 +473,42 @@
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--focus-ring-color);
 }
+
+/* Neo-Brutalist: thick ink-black borders + hard offset shadows, black text on bright fills */
+[data-theme="brutalist"] .card,
+[data-theme="brutalist"] .action-card {
+  border: 3px solid var(--gray-900);
+}
+
+[data-theme="brutalist"] .btn {
+  border: 2px solid var(--gray-900);
+  box-shadow: var(--shadow-base);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
+}
+
+[data-theme="brutalist"] .btn:hover:not(:disabled) {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-md);
+}
+
+[data-theme="brutalist"] .btn-primary,
+[data-theme="brutalist"] .btn-secondary,
+[data-theme="brutalist"] .btn-danger {
+  color: var(--gray-900);
+}
+
+[data-theme="brutalist"] .btn-danger {
+  background-color: var(--color-danger);
+}
+
+[data-theme="brutalist"] .form-input,
+[data-theme="brutalist"] .form-select,
+[data-theme="brutalist"] .form-textarea {
+  border: 2px solid var(--gray-900);
+}
+
+[data-theme="brutalist"] .form-input:focus,
+[data-theme="brutalist"] .form-select:focus,
+[data-theme="brutalist"] .form-textarea:focus {
+  box-shadow: var(--shadow-base);
+}

static/css/global.css

@@ -126,7 +126,7 @@ p {
 }
 
 .nav-icon-item.active {
-  background-color: var(--color-primary);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, var(--color-primary)));
   color: white;
 }
 
@@ -137,7 +137,9 @@ p {
   left: calc(100% + 10px);
   top: 50%;
   transform: translateY(-50%);
-  background-color: var(--gray-800);
+  /* Fixed dark bubble regardless of theme — --gray-800 inverts to near-white
+     in dark/cyberpunk, which would leave white text unreadable */
+  background-color: rgba(17, 24, 39, 0.92);
   color: white;
   padding: 5px 10px;
   border-radius: var(--radius-base);
@@ -251,3 +253,8 @@ p {
 .mb-md { margin-bottom: var(--spacing-md); }
 .mb-lg { margin-bottom: var(--spacing-lg); }
 .mb-xl { margin-bottom: var(--spacing-xl); }
+
+/* Neo-Brutalist: primary/secondary accents are bright, so use black text for contrast */
+[data-theme="brutalist"] .nav-icon-item.active {
+  color: var(--gray-900);
+}

static/css/modals.css

@@ -135,3 +135,8 @@
     padding: 0;
   }
 }
+
+/* Neo-Brutalist: thick ink-black border around the modal */
+[data-theme="brutalist"] .modal {
+  border: 3px solid var(--gray-900);
+}

static/css/pages/analytics.css

@@ -55,7 +55,7 @@
 }
 
 .analytics-card {
-  background: #fff;
+  background: var(--white);
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-lg);
   padding: var(--spacing-lg);

static/css/pages/settle.css

@@ -58,3 +58,8 @@
 .balance-amount {
   font-weight: var(--font-weight-semibold);
 }
+
+/* Neo-Brutalist: thick ink-black border around each section */
+[data-theme="brutalist"] .settle-section {
+  border: 3px solid var(--gray-900);
+}

static/css/pages/transactions.css

@@ -27,6 +27,8 @@
   outline: none;
   font-size: var(--font-size-sm);
   padding: 0;
+  background-color: transparent;
+  color: var(--gray-900);
 }
 
 .search-icon {
@@ -169,7 +171,9 @@
   align-items: center;
   gap: var(--spacing-md);
   padding: var(--spacing-sm) var(--spacing-lg);
-  background: var(--gray-900);
+  /* Fixed dark surface regardless of theme — --gray-900 inverts to near-white
+     in dark/cyberpunk, which would leave the white text unreadable */
+  background: rgba(17, 24, 39, 0.95);
   color: white;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
@@ -184,7 +188,7 @@
 .bulk-action-count {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--gray-300);
+  color: rgba(255, 255, 255, 0.65);
 }
 
 .bulk-action-buttons {
@@ -194,12 +198,12 @@
 
 .btn-ghost {
   background: transparent;
-  color: var(--gray-400);
-  border: 1px solid var(--gray-600);
+  color: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .btn-ghost:hover {
-  background: var(--gray-800);
+  background: rgba(255, 255, 255, 0.15);
   color: white;
 }
 

static/css/table.css

@@ -213,3 +213,8 @@
   font-size: var(--font-size-lg);
   color: var(--gray-500);
 }
+
+/* Neo-Brutalist: thick ink-black border around the table */
+[data-theme="brutalist"] .table-container {
+  border: 3px solid var(--gray-900);
+}

static/css/variables.css

@@ -1,4 +1,9 @@
 :root {
+  /* Tells the browser to render native widgets (date picker icon, scrollbars, etc.)
+     with light chrome, regardless of the OS-level light/dark preference. Themes with
+     a dark surface override this to "dark" below so those icons stay visible. */
+  color-scheme: light;
+
   /* Surface (overridden per theme) */
   --white: #ffffff;
 
@@ -159,6 +164,8 @@
 
 /* ── Dark theme ────────────────────────────────────────────── */
 [data-theme="dark"] {
+  color-scheme: dark;
+
   --white: #1E293B;
 
   --color-primary: #60A5FA;
@@ -200,3 +207,144 @@
   --focus-ring-color: rgba(96, 165, 250, 0.25);
   --primary-bg-hover: rgba(96, 165, 250, 0.1);
 }
+
+/* ── Cyberpunk theme (High-Contrast Tech) ─────────────────────── */
+[data-theme="cyberpunk"] {
+  color-scheme: dark;
+
+  --white: #1F2937;
+
+  --color-primary: #06B6D4;
+  --color-primary-dark: #0891B2;
+  --color-primary-light: #67E8F9;
+
+  /* Secondary/highlight accent (electric violet); components fall back to primary if unset */
+  --color-secondary: #8B5CF6;
+
+  --color-success: #34D399;
+  --color-success-light: rgba(52, 211, 153, 0.15);
+
+  --color-error: #F43F5E;
+  --color-error-light: rgba(244, 63, 94, 0.15);
+
+  --color-warning: #FBBF24;
+  --color-warning-light: rgba(251, 191, 36, 0.15);
+
+  --color-danger: #F43F5E;
+  --color-income: #34D399;
+  --color-expense: #F43F5E;
+
+  /* Inverted slate scale anchored to Deep Midnight Blue / Crisp Off-White */
+  --gray-50:  #0B0F19;
+  --gray-100: #1F2937;
+  --gray-200: #2D3748;
+  --gray-300: #3F4B5E;
+  --gray-400: #64748B;
+  --gray-500: #94A3B8;
+  --gray-600: #C4CDD5;
+  --gray-700: #D8DEE4;
+  --gray-800: #ECEFF2;
+  --gray-900: #F9FAFB;
+
+  /* Neon-tinted shadows for a subtle glow on modals and hovered cards */
+  --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
+  --shadow-lg:   0 10px 15px -3px rgba(6, 182, 212, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
+  --shadow-2xl:  0 25px 50px -12px rgba(6, 182, 212, 0.25), 0 0 40px -5px rgba(139, 92, 246, 0.15);
+
+  --focus-ring-color: rgba(6, 182, 212, 0.35);
+  --primary-bg-hover: rgba(6, 182, 212, 0.1);
+}
+
+/* ── Neo-Brutalist theme (Playful & Confident) ────────────────── */
+[data-theme="brutalist"] {
+  --white: #FFFFFF;
+
+  --color-primary: #ADFF00;
+  --color-primary-dark: #8FD400;
+  --color-primary-light: #D4FF66;
+
+  /* Contrast accent (hot magenta); components fall back to primary if unset */
+  --color-secondary: #FF007A;
+
+  --color-success: #16A34A;
+  --color-success-light: #BBF7D0;
+
+  --color-error: #FF007A;
+  --color-error-light: #FFD6EA;
+
+  --color-warning: #FFDE4D;
+  --color-warning-light: #FFF6D1;
+
+  --color-danger: #FF007A;
+  --color-income: #16A34A;
+  --color-expense: #FF007A;
+
+  /* Warm ochre-to-black scale anchored to the Pale Ochre canvas and Ink Black text */
+  --gray-50:  #FDF8E2;
+  --gray-100: #F3EEDA;
+  --gray-200: #E8DFC0;
+  --gray-300: #D4C89A;
+  --gray-400: #A89B6E;
+  --gray-500: #6B6347;
+  --gray-600: #4A4430;
+  --gray-700: #2E2A1D;
+  --gray-800: #16140D;
+  --gray-900: #000000;
+
+  /* Hard-edged, no-blur offset shadows and square corners for the brutalist look */
+  --radius-sm: 0;
+  --radius-base: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+
+  --shadow-sm:   2px 2px 0 0 #000000;
+  --shadow-base: 3px 3px 0 0 #000000;
+  --shadow-md:   4px 4px 0 0 #000000;
+  --shadow-lg:   6px 6px 0 0 #000000;
+  --shadow-2xl:  8px 8px 0 0 #000000;
+
+  --focus-ring-color: rgba(0, 0, 0, 0.5);
+  --primary-bg-hover: rgba(173, 255, 0, 0.15);
+}
+
+/* ── Nordic Minimalist theme (Clean & Professional) ───────────── */
+[data-theme="nordic"] {
+  --white: #FFFFFF;
+
+  --color-primary: #4F46E5;
+  --color-primary-dark: #4338CA;
+  --color-primary-light: #818CF8;
+
+  /* Secondary brand nuance (deep forest green); components fall back to primary if unset */
+  --color-secondary: #14532D;
+
+  --color-success: #14532D;
+  --color-success-light: #DCFCE7;
+
+  --color-error: #DC2626;
+  --color-error-light: #FEE2E2;
+
+  --color-warning: #FB923C;
+  --color-warning-light: #FFEDD5;
+
+  --color-danger: #DC2626;
+  --color-income: #14532D;
+  --color-expense: #DC2626;
+
+  --gray-50:  #F8F9FA;
+  --gray-100: #F1F3F5;
+  --gray-200: #E9ECEF;
+  --gray-300: #DEE2E6;
+  --gray-400: #ADB5BD;
+  --gray-500: #868E96;
+  --gray-600: #495057;
+  --gray-700: #343A40;
+  --gray-800: #212529;
+  --gray-900: #1F2937;
+
+  --focus-ring-color: rgba(79, 70, 229, 0.2);
+  --primary-bg-hover: rgba(79, 70, 229, 0.05);
+}

static/js/pages/analytics.js

@@ -26,9 +26,29 @@ const CATEGORICAL_COLORS = [
   '#eb6834'  // orange
 ];
 const OTHER_COLOR = '#9CA3AF'; // fixed neutral gray — never a hue slot
-const ACCENT_COLOR = '#4A90E2'; // app primary, used for "selected" emphasis
-const DEEMPHASIS_COLOR = '#D1D5DB';
-const DEEMPHASIS_BORDER = '#9CA3AF';
+
+// Chart chrome (grid lines, axis text, "selected month" emphasis, pie borders) follows
+// the active theme's CSS variables instead of being hardcoded for a light background.
+// Read once at load — theme.js sets data-theme before this module runs, and the theme
+// picker only lives on the Settings page, so it can't change without a full reload here.
+let ACCENT_COLOR = '#4A90E2';
+let DEEMPHASIS_COLOR = '#D1D5DB';
+let DEEMPHASIS_BORDER = '#9CA3AF';
+let CHART_GRID_COLOR = '#E5E7EB';
+let CHART_CARD_BG = '#ffffff';
+
+function applyChartTheme() {
+  const style = getComputedStyle(document.documentElement);
+  const read = (name, fallback) => style.getPropertyValue(name).trim() || fallback;
+
+  ACCENT_COLOR = read('--color-primary', ACCENT_COLOR);
+  DEEMPHASIS_COLOR = read('--gray-300', DEEMPHASIS_COLOR);
+  DEEMPHASIS_BORDER = read('--gray-400', DEEMPHASIS_BORDER);
+  CHART_GRID_COLOR = read('--gray-200', CHART_GRID_COLOR);
+  CHART_CARD_BG = read('--white', CHART_CARD_BG);
+
+  Chart.defaults.color = read('--gray-600', '#6B7280');
+}
 
 const CATEGORY_CAP = 5; // top N real slices; rest fold into "Other" (max 6 wedges total)
 const SOURCE_CAP = 5;
@@ -46,6 +66,8 @@ let sourceColorMap = {};
 let historicalMonths = [];
 
 async function init() {
+  applyChartTheme();
+
   const dbId = AppState.getActiveDatabaseId();
 
   try {
@@ -421,7 +443,7 @@ function renderSpendingOverTime(transactions) {
           type: 'linear',
           beginAtZero: true,
           ticks: { callback: v => formatCurrency(v) },
-          grid: { color: '#E5E7EB' }
+          grid: { color: CHART_GRID_COLOR }
         },
         x: { grid: { display: false } }
       }
@@ -483,7 +505,7 @@ function renderCategoryPie(transactions, categories) {
       datasets: [{
         data: visible.map(e => e.amount),
         backgroundColor: visible.map(e => e.color + 'cc'),
-        borderColor: '#fff',
+        borderColor: CHART_CARD_BG,
         borderWidth: 2
       }]
     },
@@ -607,7 +629,7 @@ function renderBySource(transactions) {
         y: {
           beginAtZero: true,
           ticks: { callback: v => formatCurrency(v) },
-          grid: { color: '#E5E7EB' }
+          grid: { color: CHART_GRID_COLOR }
         }
       }
     }