feat(ui): polish visual design and add light/dark theme

Visual polish:
- Consistent card styling (subtle borders, soft shadows, dividers)
- Empty-state placeholder before a trip is planned
- FMCSA-style identification fields on log sheet header
  (Driver / Co-Driver / Vehicle No / Trailer No)
- Duty-status legend on timeline view
- Better form label hierarchy, focus rings, and a more prominent
  "Plan Trip" button with arrow icon and loading spinner
- "Plan New Trip" promoted to top of results with icon
- More breathing room between sections; mobile-friendly padding
- Right midnight cell on log grid widened with a matching data
  spacer so the 24 hour columns stay aligned with their labels

Dark mode:
- Class-based Tailwind dark mode with localStorage persistence
- Theme applied pre-mount to avoid flash; syncs with OS preference
- Sun/moon toggle in page header with aria-label
- FMCSA grid stays paper-white inside a dark card frame
- Map tiles intentionally kept light; surrounding chrome themed

Author: FelixBC

frontend/src/components/LogSheet.tsx

@@ -85,40 +85,84 @@ export function LogSheet({ logSheet }: LogSheetProps) {
   const totalHours = statusRows.reduce((sum, row) => sum + totals[row.key], 0);
 
   return (
-    <section className="rounded-xl border border-gray-300 bg-white p-3 shadow-lg">
-      <h3 className="mb-2 text-lg font-semibold text-gray-900">Driver&apos;s Daily Log</h3>
-
-      <div className="mb-2 flex flex-wrap gap-x-4 gap-y-1 rounded border border-gray-300 px-2 py-1.5 text-xs text-gray-800">
-        <span>
-          <span className="font-semibold">Date:</span> {logSheet.date}
-        </span>
-        <span>
-          <span className="font-semibold">Carrier:</span> Spotter ELD
-        </span>
-        <span>
-          <span className="font-semibold">Total Miles:</span> {logSheet.total_miles.toFixed(1)}
-        </span>
+    <section className="rounded-xl border border-gray-300 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+      <div className="mb-3 flex flex-wrap items-end justify-between gap-2 border-b border-gray-200 pb-2 dark:border-gray-700">
+        <div>
+          <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+            Driver&apos;s Daily Log
+          </h3>
+          <p className="text-[11px] uppercase tracking-wide text-gray-500 dark:text-gray-400">
+            (One per 24-hour period)
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-gray-800 dark:text-gray-200">
+          <span>
+            <span className="font-semibold">Date:</span> {logSheet.date}
+          </span>
+          <span>
+            <span className="font-semibold">Carrier:</span> Spotter ELD
+          </span>
+          <span>
+            <span className="font-semibold">Total Miles:</span>{" "}
+            {logSheet.total_miles.toFixed(1)}
+          </span>
+        </div>
       </div>
 
-      {/* Fluid layout: 24 hour bands × 4 fifteen-minute ticks — fits container width, no horizontal scroll */}
-      <div className="w-full max-w-full overflow-hidden rounded border border-gray-300">
-        <div className="flex min-h-[22px] border-b border-gray-300 bg-black text-[9px] font-semibold leading-none text-white">
+      {/* FMCSA-style identification fields. Blank lines preserve the look of the
+          paper form; values are intentionally empty in this app. */}
+      <div className="mb-3 grid gap-2 text-[11px] text-gray-800 sm:grid-cols-2 dark:text-gray-200">
+        <div className="flex items-end gap-2 border-b border-gray-300 pb-0.5 dark:border-gray-600">
+          <span className="font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400">
+            Driver:
+          </span>
+          <span className="flex-1">&nbsp;</span>
+        </div>
+        <div className="flex items-end gap-2 border-b border-gray-300 pb-0.5 dark:border-gray-600">
+          <span className="font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400">
+            Co-Driver:
+          </span>
+          <span className="flex-1 text-gray-500 dark:text-gray-500">N/A</span>
+        </div>
+        <div className="flex items-end gap-2 border-b border-gray-300 pb-0.5 dark:border-gray-600">
+          <span className="font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400">
+            Vehicle No:
+          </span>
+          <span className="flex-1">&nbsp;</span>
+        </div>
+        <div className="flex items-end gap-2 border-b border-gray-300 pb-0.5 dark:border-gray-600">
+          <span className="font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-400">
+            Trailer No:
+          </span>
+          <span className="flex-1">&nbsp;</span>
+        </div>
+      </div>
+
+      {/* Fluid layout: 24 hour bands × 4 fifteen-minute ticks — fits container
+          width, no horizontal scroll. The grid is intentionally anchored to a
+          white "paper" surface even in dark mode, matching the FMCSA paper
+          form — it sits inside the dark card like a printed sheet. */}
+      <div className="w-full max-w-full overflow-hidden rounded border border-gray-300 bg-white text-gray-900 dark:border-gray-600">
+        <div className="flex min-h-[24px] border-b border-gray-300 bg-black text-[10px] font-semibold leading-none text-white">
           <div className="flex w-[5.25rem] shrink-0 items-center justify-center border-r border-gray-600 px-0.5 py-1">
             Status
           </div>
+          {/* 24 hour-label cells matching the 24 hour columns in the data
+              rows below, plus a fixed-width "Mid-nght" boundary marker on the
+              right. The data rows have a matching empty spacer of the same
+              width so the 24 hour columns stay aligned with their labels. */}
           <div className="flex min-w-0 flex-1">
             {HOURS.map((hour) => (
               <div
                 key={hour}
                 className={`flex min-w-0 flex-1 items-center justify-center whitespace-pre-line border-r border-gray-600 py-0.5 text-center leading-tight ${
-                  hour === 0 || hour === 12 ? "text-[8px] font-bold text-yellow-300" : ""
+                  hour === 0 || hour === 12 ? "text-[9px] font-bold text-yellow-300" : ""
                 }`}
               >
                 {HOUR_LABELS[hour]}
               </div>
             ))}
-            {/* Right midnight boundary marker */}
-            <div className="flex w-[2.2ch] shrink-0 items-center justify-center whitespace-pre-line border-l border-gray-600 py-0.5 text-center text-[8px] font-bold leading-tight text-yellow-300">
+            <div className="flex w-10 shrink-0 items-center justify-center whitespace-pre-line py-0.5 text-center text-[9px] font-bold leading-tight text-yellow-300">
               {"Mid-\nnght"}
             </div>
           </div>
@@ -134,7 +178,7 @@ export function LogSheet({ logSheet }: LogSheetProps) {
             </div>
             <div className="flex min-w-0 flex-1">
               {HOURS.map((hour) => (
-                <div key={hour} className="flex min-w-0 flex-1 border-r border-gray-200 last:border-r-0">
+                <div key={hour} className="flex min-w-0 flex-1 border-r border-gray-300">
                   {[0, 1, 2, 3].map((quarter) => {
                     const slot = hour * 4 + quarter;
                     const active = slots[slot] === row.key;
@@ -149,6 +193,9 @@ export function LogSheet({ logSheet }: LogSheetProps) {
                   })}
                 </div>
               ))}
+              {/* Empty spacer matching the right "Mid-nght" header cell so the
+                  24 hour columns stay perfectly aligned with the labels above. */}
+              <div className="w-10 shrink-0 bg-white" aria-hidden="true" />
             </div>
             <div className="flex w-14 shrink-0 items-center justify-center border-l border-gray-300 px-0.5 py-0.5 text-[11px] font-semibold tabular-nums">
               {totals[row.key].toFixed(2)}
@@ -158,17 +205,27 @@ export function LogSheet({ logSheet }: LogSheetProps) {
       </div>
 
       <div className="mt-2 grid gap-2 md:grid-cols-[1fr_auto] md:items-start">
-        <div className="rounded border border-gray-300 px-2 py-1.5">
-          <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-gray-700">Remarks</p>
-          <ul className="space-y-0.5 text-[11px] leading-snug text-gray-700">
+        <div className="rounded border border-gray-300 px-2 py-1.5 dark:border-gray-600 dark:bg-gray-900/40">
+          <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300">
+            Remarks
+          </p>
+          <ul className="space-y-0.5 text-[11px] leading-snug text-gray-700 dark:text-gray-200">
             {remarks.map((remark, index) => (
               <li key={`${remark}-${index}`}>{remark}</li>
             ))}
           </ul>
         </div>
-        <div className="rounded border border-gray-300 px-2 py-1.5 text-[11px] md:min-w-[11rem]">
-          <p className="mb-1 font-semibold uppercase tracking-wide text-gray-700">Daily Check</p>
-          <p className={Math.abs(totalHours - 24) <= 0.25 ? "font-semibold text-green-700" : "font-semibold text-red-700"}>
+        <div className="rounded border border-gray-300 px-2 py-1.5 text-[11px] md:min-w-[11rem] dark:border-gray-600 dark:bg-gray-900/40">
+          <p className="mb-1 font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300">
+            Daily Check
+          </p>
+          <p
+            className={
+              Math.abs(totalHours - 24) <= 0.25
+                ? "font-semibold text-green-700 dark:text-green-400"
+                : "font-semibold text-red-700 dark:text-red-400"
+            }
+          >
             Sum: {totalHours.toFixed(2)} / 24.00 h
           </p>
         </div>

frontend/src/components/RouteMap.tsx

@@ -186,43 +186,61 @@ export function RouteMap({
   // Auto-fit only after a trip is planned. Pin drops must never move the map.
   const fitEnabled = events.length > 0;
 
+  const noPinsSet = pickedEntries.length === 0;
+  const noRoute = events.length === 0;
+
   return (
-    <div className="rounded-xl bg-white p-4 shadow-lg">
-      <h2 className="mb-3 text-xl font-semibold text-gray-900">Route Map</h2>
+    <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+      <div className="mb-3 flex items-center justify-between border-b border-gray-100 pb-3 dark:border-gray-700">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Route Map</h2>
+        {events.length > 0 ? (
+          <span className="rounded-full bg-blue-50 px-2.5 py-0.5 text-[11px] font-medium text-blue-700 dark:bg-blue-500/15 dark:text-blue-300">
+            Route planned
+          </span>
+        ) : null}
+      </div>
 
       {pickerEnabled ? (
-        <div className="mb-2 flex flex-wrap items-center gap-2">
-          {(["current", "pickup", "dropoff"] as LocationType[]).map((type) => {
-            const active = pickingMode === type;
-            return (
-              <button
-                key={type}
-                type="button"
-                onClick={() => onModeChange?.(active ? null : type)}
-                className={`rounded border px-3 py-1 text-xs font-medium transition-colors ${
-                  active
-                    ? "border-blue-600 bg-blue-600 text-white"
-                    : "border-gray-300 bg-white text-gray-700 hover:border-blue-400"
-                }`}
-              >
-                {type === "current"
-                  ? "📍 Set Start"
-                  : type === "pickup"
-                    ? "🟢 Set Pickup"
-                    : "🔴 Set Dropoff"}
-              </button>
-            );
-          })}
-          {pickingMode ? (
-            <span className="self-center text-xs text-blue-600">
-              Click the map to set {pickingMode} location
-            </span>
+        <div className="mb-3 space-y-2">
+          <div className="flex flex-wrap items-center gap-2">
+            {(["current", "pickup", "dropoff"] as LocationType[]).map((type) => {
+              const active = pickingMode === type;
+              return (
+                <button
+                  key={type}
+                  type="button"
+                  onClick={() => onModeChange?.(active ? null : type)}
+                  className={`rounded-md border px-3 py-1.5 text-xs font-medium transition-colors ${
+                    active
+                      ? "border-blue-600 bg-blue-600 text-white shadow-sm dark:border-blue-400 dark:bg-blue-500"
+                      : "border-gray-300 bg-white text-gray-700 hover:border-blue-400 hover:bg-blue-50/40 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:border-blue-400 dark:hover:bg-blue-500/10"
+                  }`}
+                >
+                  {type === "current"
+                    ? "📍 Set Start"
+                    : type === "pickup"
+                      ? "🟢 Set Pickup"
+                      : "🔴 Set Dropoff"}
+                </button>
+              );
+            })}
+            {pickingMode ? (
+              <span className="self-center text-xs font-medium text-blue-600 dark:text-blue-300">
+                Click the map to set {pickingMode} location
+              </span>
+            ) : null}
+          </div>
+          {!pickingMode && noPinsSet && noRoute ? (
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              Click the buttons above to set locations on the map, or type city
+              names in the form.
+            </p>
           ) : null}
         </div>
       ) : null}
 
       <div
-        className="h-96 overflow-hidden rounded-lg border border-gray-200"
+        className="h-96 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700"
         style={{ cursor: pickingMode ? "crosshair" : "default" }}
       >
         <MapContainer center={[39.5, -98.35]} zoom={4} className="h-full w-full">

frontend/src/components/ThemeToggle.tsx

@@ -0,0 +1,56 @@
+import { useTheme } from "../lib/theme";
+
+/**
+ * Header icon button that flips between light and dark themes.
+ * Shows a moon when light mode is active (click to go dark) and a sun when
+ * dark mode is active (click to go light).
+ */
+export function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+  const isDark = theme === "dark";
+  const label = isDark ? "Switch to light mode" : "Switch to dark mode";
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={label}
+      title={label}
+      className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm transition-colors hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:border-blue-400 dark:hover:bg-blue-500/10 dark:hover:text-blue-300 dark:focus:ring-offset-gray-800"
+    >
+      {isDark ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.8}
+          stroke="currentColor"
+          className="h-5 w-5"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+          />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.8}
+          stroke="currentColor"
+          className="h-5 w-5"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.72 9.72 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}

frontend/src/components/TimelineView.tsx

@@ -21,17 +21,42 @@ function dayRangePercent(start: string, end: string): { left: number; width: num
   return { left, width };
 }
 
+const legendItems: Array<{ status: DutyStatus; label: string }> = [
+  { status: "driving", label: "Driving" },
+  { status: "on_duty", label: "On-Duty" },
+  { status: "off_duty", label: "Off-Duty" },
+  { status: "sleeper_berth", label: "Sleeper" },
+];
+
 export function TimelineView({ logSheets }: TimelineViewProps) {
   return (
-    <section className="rounded-xl bg-white p-6 shadow-lg">
-      <h2 className="mb-4 text-2xl font-semibold text-gray-900">Timeline View</h2>
+    <section className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+      <div className="mb-5 flex flex-wrap items-center justify-between gap-3 border-b border-gray-100 pb-4 dark:border-gray-700">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Timeline View</h2>
+        <ul className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-gray-600 dark:text-gray-300">
+          {legendItems.map((item) => (
+            <li key={item.status} className="flex items-center gap-1.5">
+              <span
+                className={`inline-block h-3 w-3 rounded-sm border border-gray-300 dark:border-gray-600 ${statusColors[item.status]}`}
+                aria-hidden="true"
+              />
+              <span className="font-medium">{item.label}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
 
       <div className="space-y-6">
         {logSheets.map((sheet) => (
-          <article key={sheet.date} className="rounded-lg border border-gray-200 p-4">
-            <h3 className="mb-3 text-lg font-medium text-gray-800">{sheet.date}</h3>
+          <article
+            key={sheet.date}
+            className="rounded-lg border border-gray-200 bg-gray-50/40 p-4 dark:border-gray-700 dark:bg-gray-900/40"
+          >
+            <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300">
+              {sheet.date}
+            </h3>
 
-            <div className="relative h-14 rounded-md border border-gray-300 bg-gray-50">
+            <div className="relative h-14 rounded-md border border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-900">
               {sheet.events.map((event, index) => {
                 const { left, width } = dayRangePercent(event.start_time, event.end_time);
                 return (
@@ -45,11 +70,23 @@ export function TimelineView({ logSheets }: TimelineViewProps) {
               })}
             </div>
 
-            <div className="mt-3 grid grid-cols-2 gap-2 text-sm text-gray-700 md:grid-cols-4">
-              <p>Driving: {(sheet.totals.driving ?? 0).toFixed(2)}h</p>
-              <p>On-duty: {(sheet.totals.on_duty ?? 0).toFixed(2)}h</p>
-              <p>Off-duty: {(sheet.totals.off_duty ?? 0).toFixed(2)}h</p>
-              <p>Sleeper: {(sheet.totals.sleeper_berth ?? 0).toFixed(2)}h</p>
+            <div className="mt-3 grid grid-cols-2 gap-2 text-xs text-gray-700 md:grid-cols-4 dark:text-gray-300">
+              <p>
+                <span className="font-semibold text-gray-900 dark:text-gray-100">Driving:</span>{" "}
+                {(sheet.totals.driving ?? 0).toFixed(2)}h
+              </p>
+              <p>
+                <span className="font-semibold text-gray-900 dark:text-gray-100">On-duty:</span>{" "}
+                {(sheet.totals.on_duty ?? 0).toFixed(2)}h
+              </p>
+              <p>
+                <span className="font-semibold text-gray-900 dark:text-gray-100">Off-duty:</span>{" "}
+                {(sheet.totals.off_duty ?? 0).toFixed(2)}h
+              </p>
+              <p>
+                <span className="font-semibold text-gray-900 dark:text-gray-100">Sleeper:</span>{" "}
+                {(sheet.totals.sleeper_berth ?? 0).toFixed(2)}h
+              </p>
             </div>
           </article>
         ))}