feat: update styles for dark mode and enhance filter handling in admin template

Web/static/css/planned_appointments.css

@@ -10,13 +10,13 @@
 .planned-appointments-panel {
     margin: 15px 0;
     padding: 15px;
-    background-color: #e1f5fe;
+    background-color: var(--ui-surface-soft, #e1f5fe);
     border-left: 4px solid #03a9f4;
     border-radius: 4px;
 }
 
 .planned-appointments-panel h4 {
-    color: #0277bd;
+    color: var(--ui-title, #0277bd);
     margin-top: 0;
     margin-bottom: 10px;
     font-size: 1.1em;
@@ -30,9 +30,9 @@
 
 .appointment-item {
     padding: 10px;
-    background-color: #f9fdff;
+    background-color: var(--ui-surface, #f9fdff);
     border-radius: 4px;
-    border: 1px solid #b3e5fc;
+    border: 1px solid var(--ui-border, #b3e5fc);
 }
 
 .appointment-header {
@@ -44,7 +44,7 @@
 
 .appointment-date {
     font-weight: bold;
-    color: #0288d1;
+    color: var(--ui-title, #0288d1);
 }
 
 .appointment-period {
@@ -86,14 +86,14 @@
 .appointment-user {
     margin-left: auto;
     font-style: italic;
-    color: #546e7a;
+    color: var(--ui-text-muted, #546e7a);
 }
 
 .appointment-notes {
     font-size: 0.9em;
-    color: #455a64;
+    color: var(--ui-text, #455a64);
     margin-top: 5px;
     padding-top: 5px;
-    border-top: 1px solid #e1f5fe;
+    border-top: 1px solid var(--ui-border, #e1f5fe);
     font-style: italic;
 }

Web/static/css/styles.css

@@ -22,16 +22,16 @@
 }
 
 :root[data-theme="dark"] {
-    --ui-bg: #0f172a;
+    --ui-bg: #09090b;
-    --ui-bg-accent: #1e293b;
+    --ui-bg-accent: #121214;
-    --ui-surface: #1e293b;
+    --ui-surface: #121214;
-    --ui-surface-soft: #25314a;
+    --ui-surface-soft: #1e1e22;
-    --ui-border: #334155;
+    --ui-border: #27272a;
-    --ui-text: #f1f5f9;
+    --ui-text: #fafafa;
-    --ui-text-muted: #94a3b8;
+    --ui-text-muted: #a1a1aa;
     --ui-title: #ffffff;
-    --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
+    --ui-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
-    --ui-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.5);
+    --ui-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
 }
 
 /* Safe Area Support for iPad notches, Dynamic Island, and rounded corners */
@@ -57,9 +57,16 @@ body {
 :root[data-theme="dark"] input, 
 :root[data-theme="dark"] select, 
 :root[data-theme="dark"] textarea {
-    background-color: var(--ui-surface-soft) !important;
+    background-color: var(--ui-bg) !important;
     color: var(--ui-text) !important;
-    border-color: var(--ui-border) !important;
+    border: 1px solid var(--ui-border) !important;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3) !important;
+}
+:root[data-theme="dark"] input:focus, 
+:root[data-theme="dark"] select:focus, 
+:root[data-theme="dark"] textarea:focus {
+    border-color: #52a8ff !important;
+    box-shadow: 0 0 0 2px rgba(82, 168, 255, 0.2), inset 0 1px 2px rgba(0,0,0,0.3) !important;
 }
 
 body {
@@ -295,7 +302,7 @@ select:focus {
 
 /* Modal dialog styling */
 .modal-dialog-white {
-    background: white;
+    background: var(--ui-surface);
     padding: 20px;
     border-radius: 5px;
     text-align: center;
@@ -896,3 +903,75 @@ html, body {
         padding-bottom: env(safe-area-inset-bottom);
     }
 }
+
+/* ========================================================= */
+/* UNIVERSAL DARK MODE OVERRIDES FOR HARDCODED HTML STYLES   */
+/* ========================================================= */
+:root[data-theme="dark"] .bg-white,
+:root[data-theme="dark"] .bg-light,
+:root[data-theme="dark"] [style*="background-color: #fff"],
+:root[data-theme="dark"] [style*="background-color: #ffffff"],
+:root[data-theme="dark"] [style*="background-color: #f8f9fa"],
+:root[data-theme="dark"] [style*="background-color: #f5f5f5"],
+:root[data-theme="dark"] [style*="background: #fff"],
+:root[data-theme="dark"] [style*="background: #ffffff"],
+:root[data-theme="dark"] [style*="background: #f8f9fa"],
+:root[data-theme="dark"] [style*="background: #f5f5f5"],
+:root[data-theme="dark"] [style*="background: white"],
+:root[data-theme="dark"] [style*="background-color: white"],
+:root[data-theme="dark"] .modal-content,
+:root[data-theme="dark"] .card,
+:root[data-theme="dark"] .dropdown-menu {
+    background-color: var(--ui-surface) !important;
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+}
+
+:root[data-theme="dark"] .text-dark,
+:root[data-theme="dark"] .text-black,
+:root[data-theme="dark"] [style*="color: #000"],
+:root[data-theme="dark"] [style*="color: rgb(0, 0, 0)"],
+:root[data-theme="dark"] [style*="color: black"],
+:root[data-theme="dark"] [style*="color: #333"] {
+    color: var(--ui-text) !important;
+}
+
+:root[data-theme="dark"] .text-muted {
+    color: var(--ui-text-muted) !important;
+}
+
+/* Fix table backgrounds that might have hardcoded light colors */
+:root[data-theme="dark"] .table-light,
+:root[data-theme="dark"] table.table,
+:root[data-theme="dark"] table [style*="background: #fff"] {
+    background-color: var(--ui-bg) !important;
+    color: var(--ui-text) !important;
+}
+
+/* Fix list items */
+:root[data-theme="dark"] .list-group-item {
+    background-color: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+}
+
+/* Additional inline style coverage */
+:root[data-theme="dark"] [style*="background: #eef4ff"],
+:root[data-theme="dark"] [style*="background-color: #eef4ff"],
+:root[data-theme="dark"] [style*="background: #e9ecef"],
+:root[data-theme="dark"] [style*="background-color: #e9ecef"],
+:root[data-theme="dark"] [style*="background: #e2e8f0"],
+:root[data-theme="dark"] [style*="background-color: #e2e8f0"],
+:root[data-theme="dark"] [style*="background-color: #fefefe"],
+:root[data-theme="dark"] [style*="background: #fffdfd"] {
+    background-color: var(--ui-surface) !important;
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+}
+
+:root[data-theme="dark"] .badge-light,
+:root[data-theme="dark"] .bg-light {
+    background-color: var(--ui-surface-soft) !important;
+    color: var(--ui-text) !important;
+    border: 1px solid var(--ui-border);
+}

Web/templates/impressum.html

@@ -12,7 +12,7 @@
 
 {% block content %}
 <div class="container my-4">
-    <div class="impressum-content bg-white p-4 shadow rounded">
+    <div class="impressum-content p-4 shadow rounded" style="background: var(--ui-surface); color: var(--ui-text);">
         <h1 class="mb-4 text-center">Impressum</h1>
         <p class="text-center mb-5">(Angaben gemäß § 5 DDG)</p>
 

Web/templates/main_admin.html

@@ -2740,6 +2740,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
     let descSearchIds = null; // Set of matching IDs or null when disabled
     let currentUsername = '';
     let allItems = []; // Cache for all items
+    let allFilter1Values = new Set();
+    let allFilter2Values = new Set();
+    let allFilter3Values = new Set();
     let bulkDeleteSelection = new Set();
     let bulkDeleteDrawerOpen = false;
     const studentCardsModuleEnabled = {{ 'true' if student_cards_module_enabled else 'false' }};
@@ -3259,6 +3262,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         // Load predefined filter values for dropdowns
         loadPredefinedFilterValues(1);
         loadPredefinedFilterValues(2);
+        loadPredefinedFilterValues(3);
         
         // Set up edit form submission
         setupEditFormSubmission();
@@ -3283,11 +3287,24 @@ document.addEventListener('DOMContentLoaded', ()=>{
             });
         });
         
-        // Fetch user status to get current username
+        // Fetch user status and global filters
-        fetch('/user_status')
+        Promise.all([
-            .then(response => response.json())
+            fetch('/user_status').then(response => response.json()),
-            .then(data => {
+            fetch('/get_filter').then(response => response.json())
-                currentUsername = data.username;
+        ])
+            .then(([userData, filterData]) => {
+                currentUsername = userData.username;
+                
+                if (filterData.filter1) {
+                    allFilter1Values = new Set(filterData.filter1.filter(value => value && typeof value === 'string' && value.trim() !== ''));
+                }
+                if (filterData.filter2) {
+                    allFilter2Values = new Set(filterData.filter2.filter(value => value && typeof value === 'string' && value.trim() !== ''));
+                }
+                if (filterData.filter3) {
+                    allFilter3Values = new Set(filterData.filter3.filter(value => value && typeof value === 'string' && value.trim() !== ''));
+                }
+                
                 // Now load items with username information
                 loadItems();
                 // Setup card images display after a short delay to ensure items are loaded
@@ -3296,7 +3313,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 }, 300);
             })
             .catch(error => {
-                console.error('Error fetching user status:', error);
+                console.error('Error fetching user status or filters:', error);
                 loadItems(); // Load items anyway in case of error
             });
         
@@ -3697,10 +3714,10 @@ document.addEventListener('DOMContentLoaded', ()=>{
                     }
                 });
                 
-                // Populate filter options
+                // Populate filter options using server-provided full filter lists when available.
-                populateFilterOptions('filter1-options', [...filter1Values].sort(), 1);
+                populateFilterOptions('filter1-options', allFilter1Values.size ? [...allFilter1Values].sort() : [...filter1Values].sort(), 1);
-                populateFilterOptions('filter2-options', [...filter2Values].sort(), 2);
+                populateFilterOptions('filter2-options', allFilter2Values.size ? [...allFilter2Values].sort() : [...filter2Values].sort(), 2);
-                populateFilterOptions('filter3-options', [...filter3Values].sort(), 3);
+                populateFilterOptions('filter3-options', allFilter3Values.size ? [...allFilter3Values].sort() : [...filter3Values].sort(), 3);
                 
                 if (!append) {
                     itemsContainer.scrollLeft = 0;