From f39c76e2918fc9d0ab81d6dabac5ddb6ecd8be7a Mon Sep 17 00:00:00 2001
From: Wally Hackenslacker <mastor89@protonmail.com>
Date: Fri, 1 May 2026 15:20:05 -0400
Subject: [PATCH] feat: integrate dark mode support in vehicle detail view

---
 views/vehicle.php | 139 +++++++++++++++++++++++-----------------------
 1 file changed, 71 insertions(+), 68 deletions(-)
diff --git a/views/vehicle.php b/views/vehicle.php
index ce0f683..0896159 100644
--- a/views/vehicle.php
+++ b/views/vehicle.php
@@ -6,14 +6,15 @@
     <title><?php echo APP_NAME; ?> - <?php echo htmlspecialchars($vehicle['name']); ?></title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    <?php $themeSection = 'head'; include __DIR__ . '/partials/theme.php'; ?>
 </head>
-<body class="bg-gray-100 min-h-screen">
+<body class="theme-page min-h-screen">
     <!-- Header -->
-    <header class="bg-white shadow-sm">
+    <header class="theme-surface shadow-sm">
         <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
-            <a href="<?php echo url('/home'); ?>" class="text-2xl font-bold text-gray-800 hover:text-gray-600 transition"><?php echo APP_NAME; ?></a>
+            <a href="<?php echo url('/home'); ?>" class="text-2xl font-bold theme-text hover:opacity-90 transition"><?php echo APP_NAME; ?></a>
             <div class="flex items-center space-x-4">
-                <a href="<?php echo url('/settings'); ?>" class="text-gray-600 hover:text-gray-800">
+                <a href="<?php echo url('/settings'); ?>" class="theme-text-muted hover:opacity-90">
                     <i class="bi bi-gear-fill text-2xl"></i>
                 </a>
             </div>
@@ -39,15 +40,15 @@
         <?php endif; ?>
         
         <!-- Vehicle Info Card -->
-        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
+        <div class="theme-surface rounded-lg shadow-sm p-6 mb-6">
             <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                 <div class="flex flex-col sm:flex-row items-start gap-4">
                     <div class="bg-blue-100 p-4 rounded-lg">
                         <i class="bi bi-car-front-fill text-blue-600 text-3xl"></i>
                     </div>
                     <div>
-                        <h2 class="text-2xl font-bold text-gray-800 mb-2"><?php echo htmlspecialchars($vehicle['name']); ?></h2>
-                        <div class="space-y-1 text-gray-600">
+                        <h2 class="text-2xl font-bold theme-text mb-2"><?php echo htmlspecialchars($vehicle['name']); ?></h2>
+                        <div class="space-y-1 theme-text-muted">
                             <?php if ($vehicle['year'] || $vehicle['make'] || $vehicle['model']): ?>
                                 <p class="flex items-center">
                                     <i class="bi bi-info-circle mr-2"></i>
@@ -71,7 +72,7 @@
                 </div>
                 <div class="flex flex-wrap gap-2">
                     <button onclick="showEditVehicleModal()" 
-                            class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition">
+                            class="px-4 py-2 theme-surface theme-text border theme-border hover:opacity-95 rounded-lg transition">
                         <i class="bi bi-pencil"></i> <span class="hidden sm:inline">Edit</span>
                     </button>
                     <div class="relative">
@@ -79,13 +80,13 @@
                                 class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                             <i class="bi bi-download"></i> <span class="hidden sm:inline">Export</span>
                         </button>
-                        <div id="exportMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-10">
+                        <div id="exportMenu" class="hidden absolute right-0 mt-2 w-48 theme-surface rounded-lg shadow-lg z-10">
                             <a href="<?php echo url('/vehicles/' . $vehicle['id'] . '/export/json'); ?>" 
-                               class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-t-lg">
+                               class="block px-4 py-2 theme-text hover:opacity-95 rounded-t-lg">
                                 <i class="bi bi-filetype-json"></i> Export as JSON
                             </a>
                             <a href="<?php echo url('/vehicles/' . $vehicle['id'] . '/export/html'); ?>" 
-                               class="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-b-lg">
+                               class="block px-4 py-2 theme-text hover:opacity-95 rounded-b-lg">
                                 <i class="bi bi-filetype-html"></i> Export as HTML
                             </a>
                         </div>
@@ -99,47 +100,47 @@
         </div>
         
         <!-- Add Maintenance Item Card -->
-        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
-            <h3 class="text-lg font-semibold text-gray-800 mb-4">Add Maintenance Record</h3>
+        <div class="theme-surface rounded-lg shadow-sm p-6 mb-6">
+            <h3 class="text-lg font-semibold theme-text mb-4">Add Maintenance Record</h3>
             <form method="POST" action="<?php echo url('/maintenance/add'); ?>">
                 <input type="hidden" name="vehicle_id" value="<?php echo $vehicle['id']; ?>">
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Maintenance Name *</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Maintenance Name *</label>
                         <input type="text" name="name" id="maintenanceName" required autocomplete="off"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <div id="suggestions" class="hidden absolute z-10 bg-white border border-gray-300 rounded-md shadow-lg mt-1 max-h-48 overflow-y-auto"></div>
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <div id="suggestions" class="hidden absolute z-10 theme-surface border theme-border rounded-md shadow-lg mt-1 max-h-48 overflow-y-auto"></div>
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Date *</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Date *</label>
                         <input type="date" name="date" required value="<?php echo date('Y-m-d'); ?>"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Mileage *</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Mileage *</label>
                         <input type="number" name="mileage" required
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Cost</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Cost</label>
                         <input type="number" step="0.01" name="cost"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Performed By</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Performed By</label>
                         <input type="text" name="performed_by"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Parts List</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Parts List</label>
                         <input type="text" name="parts_list"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                 </div>
                 <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                    <label class="block text-sm font-medium theme-text mb-1">Description</label>
                     <textarea name="description" rows="3"
-                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+                              class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                 </div>
                 <button type="submit" 
                         class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition">
@@ -149,29 +150,29 @@
         </div>
         
         <!-- Maintenance History -->
-        <div class="bg-white rounded-lg shadow-sm p-6">
-            <h3 class="text-lg font-semibold text-gray-800 mb-4">Maintenance History (<?php echo count($maintenanceItems); ?>)</h3>
+        <div class="theme-surface rounded-lg shadow-sm p-6">
+            <h3 class="text-lg font-semibold theme-text mb-4">Maintenance History (<?php echo count($maintenanceItems); ?>)</h3>
             
             <?php if (empty($maintenanceItems)): ?>
-                <div class="text-center py-8 text-gray-500">
+                <div class="text-center py-8 theme-text-muted">
                     <i class="bi bi-tools text-4xl mb-2"></i>
                     <p>No maintenance records yet</p>
                 </div>
             <?php else: ?>
                 <div class="space-y-4">
                     <?php foreach ($maintenanceItems as $item): ?>
-                        <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition">
+                        <div class="border theme-border rounded-lg p-4 hover:border-blue-500 transition">
                             <div class="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-3">
                                 <div class="flex-1">
                                     <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2">
-                                        <h4 class="text-lg font-semibold text-gray-800"><?php echo htmlspecialchars($item['name']); ?></h4>
+                                        <h4 class="text-lg font-semibold theme-text"><?php echo htmlspecialchars($item['name']); ?></h4>
                                         <?php if ($item['cost']): ?>
                                             <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm w-fit">
                                                 $<?php echo number_format($item['cost'], 2); ?>
                                             </span>
                                         <?php endif; ?>
                                     </div>
-                                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 text-sm text-gray-600 mb-2">
+                                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 text-sm theme-text-muted mb-2">
                                         <div>
                                             <i class="bi bi-calendar3"></i>
                                             <?php echo date('M d, Y', strtotime($item['date'])); ?>
@@ -194,7 +195,7 @@
                                         <?php endif; ?>
                                     </div>
                                     <?php if ($item['description']): ?>
-                                        <p class="text-sm text-gray-600 mt-2"><?php echo nl2br(htmlspecialchars($item['description'])); ?></p>
+                                        <p class="text-sm theme-text-muted mt-2"><?php echo nl2br(htmlspecialchars($item['description'])); ?></p>
                                     <?php endif; ?>
                                 </div>
                                 <div class="flex sm:flex-row gap-2 lg:ml-4">
@@ -219,51 +220,51 @@
     
     <!-- Edit Vehicle Modal -->
     <div id="editVehicleModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div class="bg-white rounded-lg p-6 w-full max-w-md">
+        <div class="theme-surface rounded-lg p-6 w-full max-w-md">
             <div class="flex justify-between items-center mb-4">
                 <h3 class="text-xl font-semibold">Edit Vehicle</h3>
-                <button onclick="hideEditVehicleModal()" class="text-gray-500 hover:text-gray-700">
+                <button onclick="hideEditVehicleModal()" class="theme-text-muted hover:opacity-80">
                     <i class="bi bi-x-lg"></i>
                 </button>
             </div>
             <form method="POST" action="<?php echo url('/vehicles/' . $vehicle['id'] . '/edit'); ?>">
                 <div class="space-y-4">
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Name *</label>
                         <input type="text" name="name" required value="<?php echo htmlspecialchars($vehicle['name']); ?>"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div class="grid grid-cols-2 gap-4">
                         <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Year</label>
+                            <label class="block text-sm font-medium theme-text mb-1">Year</label>
                             <input type="text" name="year" value="<?php echo htmlspecialchars($vehicle['year'] ?? ''); ?>"
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                   class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                         </div>
                         <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Color</label>
+                            <label class="block text-sm font-medium theme-text mb-1">Color</label>
                             <input type="text" name="color" value="<?php echo htmlspecialchars($vehicle['color'] ?? ''); ?>"
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                   class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                         </div>
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Make</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Make</label>
                         <input type="text" name="make" value="<?php echo htmlspecialchars($vehicle['make'] ?? ''); ?>"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Model</label>
                         <input type="text" name="model" value="<?php echo htmlspecialchars($vehicle['model'] ?? ''); ?>"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">License Plate</label>
+                        <label class="block text-sm font-medium theme-text mb-1">License Plate</label>
                         <input type="text" name="license_plate" value="<?php echo htmlspecialchars($vehicle['license_plate'] ?? ''); ?>"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                 </div>
                 <div class="flex space-x-3 mt-6">
                     <button type="button" onclick="hideEditVehicleModal()" 
-                            class="flex-1 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition">
+                            class="flex-1 px-4 py-2 border theme-border rounded-md theme-text-muted hover:opacity-95 transition">
                         Cancel
                     </button>
                     <button type="submit" 
@@ -277,54 +278,54 @@
     
     <!-- Edit Maintenance Modal -->
     <div id="editMaintenanceModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div class="bg-white rounded-lg p-6 w-full max-w-2xl max-h-screen overflow-y-auto">
+        <div class="theme-surface rounded-lg p-6 w-full max-w-2xl max-h-screen overflow-y-auto">
             <div class="flex justify-between items-center mb-4">
                 <h3 class="text-xl font-semibold">Edit Maintenance Record</h3>
-                <button onclick="hideEditMaintenanceModal()" class="text-gray-500 hover:text-gray-700">
+                <button onclick="hideEditMaintenanceModal()" class="theme-text-muted hover:opacity-80">
                     <i class="bi bi-x-lg"></i>
                 </button>
             </div>
             <form id="editMaintenanceForm" method="POST">
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Maintenance Name *</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Maintenance Name *</label>
                         <input type="text" name="name" id="editName" required
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Date *</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Date *</label>
                         <input type="date" name="date" id="editDate" required
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Mileage *</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Mileage *</label>
                         <input type="number" name="mileage" id="editMileage" required
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Cost</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Cost</label>
                         <input type="number" step="0.01" name="cost" id="editCost"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Performed By</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Performed By</label>
                         <input type="text" name="performed_by" id="editPerformedBy"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                     <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-1">Parts List</label>
+                        <label class="block text-sm font-medium theme-text mb-1">Parts List</label>
                         <input type="text" name="parts_list" id="editPartsList"
-                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                               class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                     </div>
                 </div>
                 <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                    <label class="block text-sm font-medium theme-text mb-1">Description</label>
                     <textarea name="description" id="editDescription" rows="3"
-                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+                              class="w-full px-3 py-2 border theme-input theme-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                 </div>
                 <div class="flex space-x-3">
                     <button type="button" onclick="hideEditMaintenanceModal()" 
-                            class="flex-1 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition">
+                            class="flex-1 px-4 py-2 border theme-border rounded-md theme-text-muted hover:opacity-95 transition">
                         Cancel
                     </button>
                     <button type="submit" 
@@ -338,6 +339,8 @@
     
     <!-- Delete Vehicle Form -->
     <form id="deleteVehicleForm" method="POST" action="<?php echo url('/vehicles/' . $vehicle['id'] . '/delete'); ?>" class="hidden"></form>
+
+    <?php $themeSection = 'body'; include __DIR__ . '/partials/theme.php'; ?>
     
     <script>
         let debounceTimer;
@@ -359,7 +362,7 @@
                     .then(items => {
                         if (items.length > 0) {
                             suggestionsDiv.innerHTML = items.map(item => 
-                                `<div class="px-3 py-2 hover:bg-gray-100 cursor-pointer" onclick="selectSuggestion('${item.replace(/'/g, "\\'")}')">${item}</div>`
+                                `<div class="px-3 py-2 hover:opacity-95 cursor-pointer" onclick="selectSuggestion('${item.replace(/'/g, "\\'")}')">${item}</div>`
                             ).join('');
                             suggestionsDiv.classList.remove('hidden');
                         } else {
