Add dark mode, simplify nav, and UI polish

- Dark mode via prefers-color-scheme: pure CSS, no JS, follows OS setting
- CSS custom properties for all colors; dark palette redefines variables
- Nav: brand is now a home link, Dashboard link removed, nowrap keeps
  it single-line on mobile; compact padding at 640px breakpoint
- Battery health % uses CSS classes (health-good/warn/bad) instead of
  inline Jinja colors — readable in both light and dark modes
- Stat card counts use CSS color variables for dark mode support
- Fix duplicate display:none on bulk toolbar
- input[type=date] added to themed input selector

templates/assign.html

@@ -13,7 +13,7 @@
         {% for device in devices %}
           {% set full = device.installed_count() >= device.battery_slots %}
           {% set mix  = device.installed_brands() and battery.brand not in device.installed_brands() %}
-          <div style="margin-bottom:0.75rem;padding:0.75rem;border:1px solid #e2e8f0;border-radius:4px;
+          <div class="device-option" style="margin-bottom:0.75rem;padding:0.75rem;border:1px solid #e2e8f0;border-radius:4px;
                       {% if full %}opacity:0.5;{% endif %}background:#fff;">
             <label style="display:flex;align-items:center;gap:0.6rem;font-weight:normal;min-height:44px;cursor:{% if full %}not-allowed{% else %}pointer{% endif %};">
               <input type="radio" name="device_id" value="{{ device.id }}"

templates/base.html

@@ -5,9 +5,101 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}Battery Tracker{% endblock %}</title>
   <style>
+    /* ─── Color variables (light mode) ──────────────────────────────── */
+    :root {
+      --bg-body:    #f5f5f5;
+      --bg-card:    #ffffff;
+      --bg-th:      #f1f5f9;
+      --bg-hover:   #f8fafc;
+      --bg-input:   #ffffff;
+      --bg-toolbar: #f1f5f9;
+      --bg-picker:  #ffffff;
+
+      --text-body:    #222222;
+      --text-muted:   #6b7280;
+      --text-label:   #374151;
+      --text-th:      #64748b;
+      --text-h1:      #1e293b;
+      --text-h2:      #334155;
+      --text-warning: #b45309;
+      --text-danger:  #dc2626;
+
+      --border:       #e2e8f0;
+      --border-input: #d1d5db;
+      --link:         #2563eb;
+      --shadow-card:  0 1px 3px rgba(0,0,0,.1);
+
+      --btn-secondary-bg:    #e2e8f0;
+      --btn-secondary-text:  #334155;
+      --btn-secondary-hover: #cbd5e1;
+
+      --badge-available-bg:   #dcfce7; --badge-available-text: #166534;
+      --badge-installed-bg:   #dbeafe; --badge-installed-text: #1e40af;
+      --badge-retired-bg:     #f1f5f9; --badge-retired-text:   #64748b;
+      --badge-warning-bg:     #fef9c3; --badge-warning-text:   #854d0e;
+
+      --flash-success-bg: #dcfce7; --flash-success-text: #166534; --flash-success-border: #86efac;
+      --flash-error-bg:   #fee2e2; --flash-error-text:   #991b1b; --flash-error-border:   #fca5a5;
+      --flash-warning-bg: #fef9c3; --flash-warning-text: #854d0e; --flash-warning-border: #fde047;
+
+      --health-good:     #166534;
+      --health-warn:     #92400e;
+      --health-bad:      #991b1b;
+      --count-available: #166534;
+      --count-installed: #1e40af;
+      --count-retired:   #64748b;
+    }
+
+    /* ─── Dark mode variables ────────────────────────────────────────── */
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg-body:    #0f172a;
+        --bg-card:    #1e293b;
+        --bg-th:      #162032;
+        --bg-hover:   #243044;
+        --bg-input:   #1e293b;
+        --bg-toolbar: #162032;
+        --bg-picker:  #1e293b;
+
+        --text-body:    #e2e8f0;
+        --text-muted:   #94a3b8;
+        --text-label:   #cbd5e1;
+        --text-th:      #94a3b8;
+        --text-h1:      #f1f5f9;
+        --text-h2:      #cbd5e1;
+        --text-warning: #fbbf24;
+        --text-danger:  #f87171;
+
+        --border:       #334155;
+        --border-input: #475569;
+        --link:         #60a5fa;
+        --shadow-card:  0 1px 3px rgba(0,0,0,.5);
+
+        --btn-secondary-bg:    #334155;
+        --btn-secondary-text:  #cbd5e1;
+        --btn-secondary-hover: #475569;
+
+        --badge-available-bg:   #14532d; --badge-available-text: #86efac;
+        --badge-installed-bg:   #1e3a8a; --badge-installed-text: #93c5fd;
+        --badge-retired-bg:     #273449; --badge-retired-text:   #94a3b8;
+        --badge-warning-bg:     #451a03; --badge-warning-text:   #fde68a;
+
+        --flash-success-bg: #14532d; --flash-success-text: #86efac; --flash-success-border: #166534;
+        --flash-error-bg:   #450a0a; --flash-error-text:   #fca5a5; --flash-error-border:   #991b1b;
+        --flash-warning-bg: #451a03; --flash-warning-text: #fde68a; --flash-warning-border: #92400e;
+
+        --health-good:     #86efac;
+        --health-warn:     #fde68a;
+        --health-bad:      #fca5a5;
+        --count-available: #86efac;
+        --count-installed: #93c5fd;
+        --count-retired:   #94a3b8;
+      }
+    }
+
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: system-ui, sans-serif; font-size: 15px; background: #f5f5f5; color: #222; }
+    body { font-family: system-ui, sans-serif; font-size: 15px; background: var(--bg-body); color: var(--text-body); }
-    a { color: #2563eb; text-decoration: none; }
+    a { color: var(--link); text-decoration: none; }
     a:hover { text-decoration: underline; }
 
     /* Nav */
@@ -15,13 +107,14 @@
       background: #1e40af;
       color: #fff;
       display: flex;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       gap: 0.5rem;
       align-items: center;
       padding: 0.75rem 1rem;
     }
-    nav .brand { font-weight: 700; font-size: 1.1rem; margin-right: auto; color: #fff; }
+    nav .brand { font-weight: 700; font-size: 1.1rem; margin-right: auto; color: #fff; text-decoration: none; }
-    nav a { color: #bfdbfe; font-size: 0.9rem; padding: 0.25rem 0.5rem; border-radius: 4px; }
+    nav .brand:hover { text-decoration: none; opacity: 0.9; }
+    nav a { color: #bfdbfe; font-size: 0.9rem; padding: 0.25rem 0.5rem; border-radius: 4px; white-space: nowrap; }
     nav a:hover { background: #1d4ed8; color: #fff; text-decoration: none; }
 
     /* Layout */
@@ -29,27 +122,27 @@
 
     /* Flash messages */
     .flash { padding: 0.6rem 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.9rem; }
-    .flash.success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
+    .flash.success { background: var(--flash-success-bg); color: var(--flash-success-text); border: 1px solid var(--flash-success-border); }
-    .flash.error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
+    .flash.error   { background: var(--flash-error-bg);   color: var(--flash-error-text);   border: 1px solid var(--flash-error-border); }
-    .flash.warning { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
+    .flash.warning { background: var(--flash-warning-bg); color: var(--flash-warning-text); border: 1px solid var(--flash-warning-border); }
 
     /* Cards / boxes */
-    .card { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.1); padding: 1.25rem; margin-bottom: 1rem; }
+    .card { background: var(--bg-card); border-radius: 6px; box-shadow: var(--shadow-card); padding: 1.25rem; margin-bottom: 1rem; }
 
     /* Tables */
     .table-wrap { overflow-x: auto; }
     table { width: 100%; border-collapse: collapse; }
-    th { text-align: left; padding: 0.5rem 0.75rem; background: #f1f5f9; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; border-bottom: 2px solid #e2e8f0; }
+    th { text-align: left; padding: 0.5rem 0.75rem; background: var(--bg-th); font-size: 0.8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-th); border-bottom: 2px solid var(--border); }
-    td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
+    td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
     tr:last-child td { border-bottom: none; }
-    tr:hover td { background: #f8fafc; }
+    tr:hover td { background: var(--bg-hover); }
 
     /* Status badges */
     .badge { display: inline-block; padding: 0.2em 0.55em; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
-    .badge-available { background: #dcfce7; color: #166534; }
+    .badge-available { background: var(--badge-available-bg); color: var(--badge-available-text); }
-    .badge-installed { background: #dbeafe; color: #1e40af; }
+    .badge-installed { background: var(--badge-installed-bg); color: var(--badge-installed-text); }
-    .badge-retired   { background: #f1f5f9; color: #64748b; }
+    .badge-retired   { background: var(--badge-retired-bg);   color: var(--badge-retired-text); }
-    .badge-warning   { background: #fef9c3; color: #854d0e; }
+    .badge-warning   { background: var(--badge-warning-bg);   color: var(--badge-warning-text); }
 
     /* Buttons */
     .btn { display: inline-block; padding: 0.4rem 0.9rem; border-radius: 4px; border: none; cursor: pointer; font-size: 0.875rem; font-family: inherit; text-decoration: none; }
@@ -60,36 +153,81 @@
     .btn-danger:hover   { background: #b91c1c; }
     .btn-warning  { background: #d97706; color: #fff; }
     .btn-warning:hover  { background: #b45309; }
-    .btn-secondary { background: #e2e8f0; color: #334155; }
+    .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
-    .btn-secondary:hover { background: #cbd5e1; }
+    .btn-secondary:hover { background: var(--btn-secondary-hover); }
     .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
 
     /* Forms */
     .form-group { margin-bottom: 1rem; }
-    label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.3rem; color: #374151; }
+    label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--text-label); }
-    input[type=text], input[type=number], select, textarea {
+    input[type=text], input[type=number], input[type=date], select, textarea {
-      width: 100%; padding: 0.45rem 0.65rem; border: 1px solid #d1d5db;
+      width: 100%; padding: 0.45rem 0.65rem; border: 1px solid var(--border-input);
       border-radius: 4px; font-size: 0.9rem; font-family: inherit;
+      background: var(--bg-input); color: var(--text-body);
     }
     input:focus, select:focus, textarea:focus { outline: 2px solid #3b82f6; border-color: #3b82f6; }
     textarea { min-height: 80px; resize: vertical; }
     .form-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1.25rem; }
 
     /* Headings */
-    h1 { font-size: 1.5rem; margin-bottom: 1rem; color: #1e293b; }
+    h1 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-h1); }
-    h2 { font-size: 1.15rem; margin-bottom: 0.75rem; color: #334155; }
+    h2 { font-size: 1.15rem; margin-bottom: 0.75rem; color: var(--text-h2); }
 
     /* Inline form (for POST buttons in tables) */
     form.inline { display: inline; }
 
-    /* Warning text */
+    /* Text utilities */
-    .text-warning { color: #b45309; font-size: 0.8rem; }
+    .text-warning { color: var(--text-warning); font-size: 0.8rem; }
-    .text-danger  { color: #dc2626; }
+    .text-danger  { color: var(--text-danger); }
-    .text-muted   { color: #6b7280; font-size: 0.85rem; }
+    .text-muted   { color: var(--text-muted); font-size: 0.85rem; }
 
-    /* ─── Mobile responsive ─────────────────────────────────── */
+    /* Battery health classes */
+    .health-good { color: var(--health-good); }
+    .health-warn { color: var(--health-warn); }
+    .health-bad  { color: var(--health-bad); }
+
+    /* ─── Dark mode overrides for inline-styled elements ─────────────── */
+    @media (prefers-color-scheme: dark) {
+      nav { background: #0c1a3b; }
+      nav a { color: #93c5fd; }
+      nav a:hover { background: #1e3a8a; color: #fff; }
+      nav .brand { color: #e2e8f0; }
+
+      #bulk-toolbar    { background: var(--bg-toolbar) !important; }
+      #col-picker-panel { background: var(--bg-picker) !important; border-color: var(--border) !important; }
+      #col-picker-panel > div:first-child { color: var(--text-th) !important; }
+
+      #filter-bar select, #filter-bar input,
+      #bulk-toolbar select, #bulk-toolbar input[type=text],
+      #device-filter-bar select, #device-filter-bar input {
+        background: var(--bg-input) !important;
+        color: var(--text-body) !important;
+        border-color: var(--border-input) !important;
+      }
+      .responsive-table td select {
+        background: var(--bg-input);
+        color: var(--text-body);
+        border-color: var(--border-input);
+      }
+      .device-option {
+        background: var(--bg-card) !important;
+        border-color: var(--border) !important;
+      }
+      #install-grid select, #install-grid input {
+        background: var(--bg-input);
+        color: var(--text-body);
+        border-color: var(--border-input);
+      }
+    }
+
+    /* ─── Mobile responsive ─────────────────────────────────────────── */
     @media (max-width: 640px) {
 
+      /* Nav: compact on small screens */
+      nav { padding: 0.5rem 0.75rem; gap: 0.35rem; }
+      nav a { font-size: 0.8rem; padding: 0.2rem 0.35rem; }
+      nav .brand { font-size: 1rem; }
+
       /* Tap targets */
       .btn    { padding: 0.5rem 0.9rem; }
       .btn-sm { padding: 0.35rem 0.65rem; font-size: 0.825rem; }
@@ -101,11 +239,11 @@
       .responsive-table thead { display: none; }
       .responsive-table tr {
         display: block;
-        border: 1px solid #e2e8f0;
+        border: 1px solid var(--border);
         border-radius: 6px;
         margin-bottom: 0.75rem;
         padding: 0.25rem 0;
-        background: #fff;
+        background: var(--bg-card);
       }
       .responsive-table tr:hover td { background: transparent; }
       .responsive-table td {
@@ -113,7 +251,7 @@
         justify-content: space-between;
         align-items: center;
         padding: 0.4rem 0.75rem;
-        border-bottom: 1px solid #f1f5f9;
+        border-bottom: 1px solid var(--bg-th);
         border-top: none;
         font-size: 0.875rem;
       }
@@ -122,7 +260,7 @@
       .responsive-table td::before {
         content: attr(data-label);
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-th);
         font-size: 0.8rem;
         flex-shrink: 0;
         margin-right: 0.75rem;
@@ -167,8 +305,7 @@
 </head>
 <body>
   <nav>
-    <span class="brand">Battery Tracker</span>
+    <a class="brand" href="{{ url_for('dashboard') }}">Battery Tracker</a>
-    <a href="{{ url_for('dashboard') }}">Dashboard</a>
     <a href="{{ url_for('device_list') }}">Devices</a>
     <a href="{{ url_for('battery_add') }}">+ Battery</a>
     <a href="{{ url_for('device_add') }}">+ Device</a>

templates/battery_detail.html

@@ -46,11 +46,11 @@
         {{ battery.capacity_mah }} mAh
         {% if battery.tested_capacity_mah %}
           {% set pct = (battery.tested_capacity_mah / battery.capacity_mah * 100)|round|int %}
-          {% if pct >= 80 %}{% set health_color = "#166534" %}
+          {% if pct >= 80 %}{% set health_class = "health-good" %}
-          {% elif pct >= 60 %}{% set health_color = "#92400e" %}
+          {% elif pct >= 60 %}{% set health_class = "health-warn" %}
-          {% else %}{% set health_color = "#991b1b" %}
+          {% else %}{% set health_class = "health-bad" %}
           {% endif %}
-          &rarr; tested <strong style="color:{{ health_color }};">{{ battery.tested_capacity_mah }} mAh ({{ pct }}%)</strong>
+          &rarr; tested <strong class="{{ health_class }}">{{ battery.tested_capacity_mah }} mAh ({{ pct }}%)</strong>
           {% if battery.tested_date %}<span class="text-muted">on {{ battery.tested_date }}</span>{% endif %}
         {% endif %}
       </td>

templates/dashboard.html

@@ -15,15 +15,15 @@
     <div class="text-muted">Total</div>
   </div>
   <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:#166534;">{{ available }}</div>
+    <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ available }}</div>
     <div class="text-muted">Available</div>
   </div>
   <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:#1e40af;">{{ installed }}</div>
+    <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ installed }}</div>
     <div class="text-muted">Installed</div>
   </div>
   <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:#64748b;">{{ retired }}</div>
+    <div style="font-size:1.8rem;font-weight:700;color:var(--count-retired);">{{ retired }}</div>
     <div class="text-muted">Retired</div>
   </div>
 </div>
@@ -76,7 +76,7 @@
 
   <form method="post" action="{{ url_for('battery_bulk_action') }}" id="bulk-form">
 
-    <div id="bulk-toolbar" style="display:none;margin-bottom:0.75rem;padding:0.6rem 0.75rem;background:#f1f5f9;border-radius:6px;display:none;align-items:center;gap:0.5rem;flex-wrap:wrap;">
+    <div id="bulk-toolbar" style="display:none;margin-bottom:0.75rem;padding:0.6rem 0.75rem;background:#f1f5f9;border-radius:6px;align-items:center;gap:0.5rem;flex-wrap:wrap;">
       <span id="selected-count" style="font-size:0.85rem;color:#64748b;margin-right:0.25rem;"></span>
       <button class="btn btn-sm btn-warning" name="action" value="unassign" type="submit">Unassign</button>
       <button class="btn btn-sm btn-secondary" name="action" value="retire" type="submit">Retire</button>