From bfbc8b67963ab32606de2547e00fda1208c025c7 Mon Sep 17 00:00:00 2001
From: AIIrondev <iron.ai.dev@gmail.com>
Date: Sun, 19 Apr 2026 23:35:45 +0200
Subject: [PATCH] Refactor color styles to use CSS variables for improved
 consistency and maintainability

---
 Web/static/css/styles.css     | 30 ++++++-------
 Web/templates/main.html       | 81 ++++++++++++++++++-----------------
 Web/templates/main_admin.html | 66 ++++++++++++++--------------
 3 files changed, 91 insertions(+), 86 deletions(-)

diff --git a/Web/static/css/styles.css b/Web/static/css/styles.css
index a8d030d..5df6f9e 100755
--- a/Web/static/css/styles.css
+++ b/Web/static/css/styles.css
@@ -196,7 +196,7 @@ select:focus {
 }
 
 .ausleihen {
-    color: black !important; /* Override any existing color */
+    /* Color handled securely below */
 }
 
 /* Modal image display fix */
@@ -263,12 +263,12 @@ select:focus {
 .view-toggle-btn {
     width: 38px;
     height: 38px;
-    border: 1px solid #c7ced6;
+    border: 1px solid var(--ui-border);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ui-surface);
     font-size: 1.15rem;
     cursor: pointer;
-    color: #2f3e4e;
+    color: var(--ui-text);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -277,8 +277,8 @@ select:focus {
 
 .view-toggle-btn:hover {
     transform: translateY(-1px);
-    border-color: #8fa2b7;
-    background: #f8fbff;
+    border-color: var(--ui-border);
+    background: var(--ui-surface-soft);
     box-shadow: 0 3px 8px rgba(33, 37, 41, 0.12);
 }
 
@@ -287,9 +287,9 @@ select:focus {
 }
 
 .view-toggle-btn[aria-pressed='true'] {
-    background: #e9f2ff;
-    border-color: #7ea1c8;
-    color: #1f4f7a;
+    background: var(--module-primary-color);
+    border-color: var(--module-primary-color);
+    color: white;
 }
 
 .table-view-header {
@@ -306,7 +306,7 @@ body.table-view .table-view-header {
     border: 0;
     border-radius: 10px;
     background: transparent;
-    color: #3f4e5d;
+    color: var(--ui-text-muted);
     font-size: 0.82rem;
     font-weight: 700;
     text-transform: uppercase;
@@ -325,9 +325,9 @@ body.table-view .item-card {
     max-width: none;
     margin: 0 0 10px 0;
     padding: 12px 14px;
-    border: 1px solid #e1e6ed;
+    border: 1px solid var(--ui-border);
     border-radius: 10px;
-    background: #ffffff;
+    background: var(--ui-surface);
     box-shadow: none;
     scroll-snap-align: none;
 }
@@ -353,7 +353,7 @@ body.table-view .item-card .card-content .item-name-cell,
 body.table-view .item-card .card-content .item-col-name {
     font-size: 0.98rem;
     font-weight: 700;
-    color: #1f2d3d;
+    color: var(--ui-title);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -370,7 +370,7 @@ body.table-view .item-card .card-content .item-col-filter3,
 body.table-view .item-card .card-content .item-code-cell,
 body.table-view .item-card .card-content .item-col-code,
 body.table-view .item-card .card-content .item-col-count {
-    color: #445465;
+    color: var(--ui-text-muted);
     font-size: 0.9rem;
     white-space: nowrap;
     overflow: hidden;
@@ -387,7 +387,7 @@ body.table-view .item-card .damage-badge {
 body.table-view .item-card .actions {
     margin-top: 10px;
     padding-top: 10px;
-    border-top: 1px dashed #d9e0e8;
+    border-top: 1px dashed var(--ui-border);
 }
 
 @media (max-width: 900px) {
diff --git a/Web/templates/main.html b/Web/templates/main.html
index bd463cc..8a1eaa7 100755
--- a/Web/templates/main.html
+++ b/Web/templates/main.html
@@ -19,7 +19,7 @@
         align-items: center;
         gap: 12px;
         padding: 12px;
-        border-bottom: 1px solid #e7edf5;
+        border-bottom: 1px solid var(--ui-border);
         background: #f8fafc;
     }
 
@@ -29,7 +29,7 @@
         border: 1px solid #dbe3ee;
         border-radius: 8px;
         background: var(--ui-surface);
-        color: #334155;
+        color: var(--ui-text);
         font-weight: 700;
         line-height: 1;
         cursor: pointer;
@@ -60,7 +60,7 @@
         align-items: center;
         justify-content: center;
         border-radius: 8px;
-        color: #334155;
+        color: var(--ui-text);
         font-size: 0.95rem;
         font-weight: 600;
         line-height: 1;
@@ -173,7 +173,7 @@
 
     .cal-booking-period {
         margin-left: 8px;
-        color: #475569;
+        color: var(--ui-text);
         font-size: 0.85rem;
         font-weight: 600;
     }
@@ -225,14 +225,14 @@
 
     .filter-option-group {
         margin-bottom: 12px;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--ui-border);
         padding-bottom: 8px;
     }
 
     .filter-group-header {
         font-weight: bold;
         margin-bottom: 5px;
-        color: #495057;
+        color: var(--ui-text-muted);
         font-size: 0.9rem;
     }
 
@@ -253,7 +253,7 @@
     }
 
     .filter-tag-group {
-        color: #6c757d;
+        color: var(--ui-text-muted);
         font-size: 0.8em;
         font-style: italic;
         margin-right: 2px;
@@ -262,7 +262,7 @@
     .filter-tag-remove {
         background: none;
         border: none;
-        color: #6c757d;
+        color: var(--ui-text-muted);
         margin-left: 5px;
         cursor: pointer;
         font-size: 1rem;
@@ -2856,7 +2856,7 @@
 
     .clear-filter {
         font-size: 0.8rem;
-        color: #6c757d;
+        color: var(--ui-text-muted);
     }
 
     .filter-dropdown {
@@ -2903,14 +2903,14 @@
 
     .filter-option-group {
         margin-bottom: 12px;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--ui-border);
         padding-bottom: 8px;
     }
 
     .filter-group-header {
         font-weight: bold;
         margin-bottom: 5px;
-        color: #495057;
+        color: var(--ui-text-muted);
         font-size: 0.9rem;
     }
 
@@ -2931,7 +2931,7 @@
     }
 
     .filter-tag-group {
-        color: #6c757d;
+        color: var(--ui-text-muted);
         font-size: 0.8em;
         font-style: italic;
         margin-right: 2px;
@@ -2940,7 +2940,7 @@
     .filter-tag-remove {
         background: none;
         border: none;
-        color: #6c757d;
+        color: var(--ui-text-muted);
         margin-left: 5px;
         cursor: pointer;
         font-size: 1rem;
@@ -3029,7 +3029,7 @@
         border: 1px solid #dbe3ee;
         border-radius: 10px;
         background: #f8fafc;
-        color: #334155;
+        color: var(--ui-text);
         justify-content: center;
         align-items: center;
         flex-direction: column;
@@ -3088,17 +3088,15 @@
     .item-card {
         background-color: var(--ui-surface);
         border: 1px solid var(--ui-border);
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        border-radius: var(--ui-radius);
+        box-shadow: var(--ui-shadow-sm);
         padding: 20px;
-        max-width: 300px;
-        flex-shrink: 0;
+        width: 100%;
+        max-width: 340px;
+        flex: 1 1 300px;
         scroll-snap-align: center;
         cursor: pointer;
-        transition: transform 0.2s;
-    position: relative;
-    }
-
+        transition: transform 0.2s, box-shadow 0.2s;
     .item-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
@@ -3238,7 +3236,7 @@
     }
 
     .cancel-button {
-        background-color: #6c757d;
+        background-color: var(--ui-text-muted);
         color: white;
     }
 
@@ -3640,7 +3638,7 @@
             display: block !important;
             margin-bottom: 8px !important;
             font-weight: 600 !important;
-            color: #333 !important;
+            color: var(--ui-title) !important;
         }
         
         .form-group input, .form-group select, .form-group textarea {
@@ -3711,8 +3709,8 @@
     }
 
     /* Element text colors for better visibility */
-    .edit-button, .duplicate-button, .generate-qr-button, .ausleihen {
-        color: black !important;
+    .edit-button, .duplicate-button, .generate-qr-button {
+        color: var(--ui-title) !important;
     }
     
     /* Standardized button styles across the application */
@@ -3873,7 +3871,7 @@
     .modal-details { margin: 20px 0; }
     .detail-group { display: flex; margin-bottom: 10px; align-items: flex-start; }
     .detail-group.full-width { flex-direction: column; margin-bottom: 15px; }
-    .detail-label { font-weight: bold; color: #495057; min-width: 150px; margin-right: 10px; }
+    .detail-label { font-weight: bold; color: var(--ui-text-muted); min-width: 150px; margin-right: 10px; }
     .detail-value { color: #212529; flex: 1; word-wrap: break-word; }
     .detail-group.full-width .detail-label { margin-bottom: 5px; }
     .detail-group.full-width .detail-value {
@@ -3955,7 +3953,7 @@
         align-items: center;
         padding: 15px;
         background-color: var(--ui-surface);
-        border-bottom: 1px solid #f3f4f6;
+        border-bottom: 1px solid var(--ui-border);
     }
     
     .calendar-header button {
@@ -4121,7 +4119,7 @@
             font-size: 0.95rem !important;
             font-weight: 600 !important;
             line-height: 1.35 !important;
-            color: #212529 !important;
+            color: var(--ui-title) !important;
             word-break: break-word !important;
             overflow-wrap: anywhere !important;
         }
@@ -4199,7 +4197,7 @@
                 display: block !important;
                 margin-right: 0 !important;
                 margin-bottom: 2px !important;
-                color: #6c757d !important;
+                color: var(--ui-text-muted) !important;
                 font-size: 0.8rem !important;
             }
 
@@ -4219,8 +4217,12 @@
         }
 
         .items-container {
-            padding: 6px 0 !important;
-            gap: 10px !important;
+            display: grid !important;
+            grid-template-columns: 1fr !important;
+            gap: 15px !important;
+            padding: 10px 0 !important;
+            overflow-x: visible !important;
+            scroll-snap-type: none !important;
         }
 
         body.table-view .table-view-header {
@@ -4237,16 +4239,17 @@
         }
 
         .item-card {
-            border: none !important;
-            border-radius: 0 !important;
-            box-shadow: none !important;
-            border-bottom: 1px solid #e5e7eb !important;
-            padding: 12px 0 !important;
+            max-width: 100% !important;
+            margin: 0 !important;
+            padding: 15px !important;
+            scroll-snap-align: none !important;
+            content-visibility: auto;
+            contain-intrinsic-size: auto 300px;
         }
 
         .item-card:hover {
-            transform: none !important;
-            box-shadow: none !important;
+            transform: translateY(-2px) !important;
+            box-shadow: var(--ui-shadow-md) !important;
         }
 
         .item-card .image-container {
diff --git a/Web/templates/main_admin.html b/Web/templates/main_admin.html
index f578d77..f530f79 100755
--- a/Web/templates/main_admin.html
+++ b/Web/templates/main_admin.html
@@ -21,7 +21,7 @@
     .items-indicator {
         text-align: center;
         font-size: 0.9rem;
-        color: #495057;
+        color: var(--ui-text-muted);
         margin: 6px 0 16px;
         font-weight: 600;
     }
@@ -78,7 +78,7 @@
     }
 
     .bulk-delete-summary {
-        color: #334155;
+        color: var(--ui-text);
         font-size: 0.92rem;
         margin-top: 4px;
     }
@@ -105,7 +105,7 @@
         padding: 9px 12px;
         cursor: pointer;
         background: #f8fafc;
-        color: #1e293b;
+        color: var(--ui-title);
         font-weight: 600;
         text-align: center;
     }
@@ -161,7 +161,7 @@
 
     .clear-filter {
         font-size: 0.8rem;
-        color: #6c757d;
+        color: var(--ui-text-muted);
     }
 
     .filter-dropdown {
@@ -208,14 +208,14 @@
 
     .filter-option-group {
         margin-bottom: 12px;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--ui-border);
         padding-bottom: 8px;
     }
 
     .filter-group-header {
         font-weight: bold;
         margin-bottom: 5px;
-        color: #495057;
+        color: var(--ui-text-muted);
         font-size: 0.9rem;
     }
 
@@ -236,7 +236,7 @@
     }
 
     .filter-tag-group {
-        color: #6c757d;
+        color: var(--ui-text-muted);
         font-size: 0.8em;
         font-style: italic;
         margin-right: 2px;
@@ -245,7 +245,7 @@
     .filter-tag-remove {
         background: none;
         border: none;
-        color: #6c757d;
+        color: var(--ui-text-muted);
         margin-left: 5px;
         cursor: pointer;
         font-size: 1rem;
@@ -334,7 +334,7 @@
         border: 1px solid #dbe3ee;
         border-radius: 10px;
         background: #f8fafc;
-        color: #334155;
+        color: var(--ui-text);
         justify-content: center;
         align-items: center;
         flex-direction: column;
@@ -393,14 +393,15 @@
     .item-card {
         background-color: var(--ui-surface);
         border: 1px solid var(--ui-border);
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        border-radius: var(--ui-radius);
+        box-shadow: var(--ui-shadow-sm);
         padding: 20px;
-        max-width: 300px;
-        flex-shrink: 0;
+        width: 100%;
+        max-width: 340px;
+        flex: 1 1 300px;
         scroll-snap-align: center;
         cursor: pointer;
-        transition: transform 0.2s;
+        transition: transform 0.2s, box-shadow 0.2s;
         position: relative;
     }
 
@@ -447,7 +448,7 @@
         align-items: center;
         gap: 6px;
         font-size: 0.9rem;
-        color: #475569;
+        color: var(--ui-text);
         cursor: pointer;
         user-select: none;
     }
@@ -676,7 +677,7 @@
     }
 
     .cancel-button {
-        background-color: #6c757d;
+        background-color: var(--ui-text-muted);
         color: white;
     }
 
@@ -711,7 +712,7 @@
     .filter-inputs h3 {
         margin-top: 0;
         margin-bottom: 15px;
-        color: #495057;
+        color: var(--ui-text-muted);
     }
 
     .multi-filter {
@@ -1000,16 +1001,16 @@
 
     /* Disabled Button */
     .disabled-button {
-        background-color: #6c757d !important;
-        border-color: #6c757d !important;
+        background-color: var(--ui-text-muted) !important;
+        border-color: var(--ui-text-muted) !important;
         color: #fff !important;
         cursor: not-allowed !important;
         opacity: 0.6;
     }
 
     .disabled-button:hover {
-        background-color: #6c757d !important;
-        border-color: #6c757d !important;
+        background-color: var(--ui-text-muted) !important;
+        border-color: var(--ui-text-muted) !important;
         transform: none !important;
         box-shadow: none !important;
     }
@@ -1032,7 +1033,7 @@
 
     .detail-label {
         font-weight: bold;
-        color: #495057;
+        color: var(--ui-text-muted);
         min-width: 150px;
         margin-right: 10px;
     }
@@ -1351,7 +1352,7 @@
             display: block !important;
             margin-bottom: 8px !important;
             font-weight: 600 !important;
-            color: #333 !important;
+            color: var(--ui-title) !important;
         }
         
         .form-group input, .form-group select, .form-group textarea {
@@ -1389,7 +1390,7 @@
         /* Tab navigation improvements */
         .nav-tabs {
             flex-wrap: wrap !important;
-            border-bottom: 1px solid #dee2e6 !important;
+            border-bottom: 1px solid var(--ui-border) !important;
         }
         
         .nav-tabs .nav-link {
@@ -1605,6 +1606,7 @@
             gap: 15px !important;
             padding: 10px 0 !important;
             overflow-x: visible !important;
+            scroll-snap-type: none !important;
         }
         
         .item-card {
@@ -1688,7 +1690,7 @@
             display: block !important;
             margin-bottom: 8px !important;
             font-weight: 600 !important;
-            color: #333 !important;
+            color: var(--ui-title) !important;
         }
         
         .form-group input, .form-group select, .form-group textarea {
@@ -1962,8 +1964,8 @@
     }
 
     /* Element text colors for better visibility */
-    .edit-button, .duplicate-button, .generate-qr-button, .ausleihen {
-        color: black !important;
+    .edit-button, .duplicate-button, .generate-qr-button {
+        color: var(--ui-title) !important;
     }
     
     /* Standardized button styles across the application */
@@ -2019,7 +2021,7 @@
         align-items: center;
         gap: 12px;
         padding: 12px;
-        border-bottom: 1px solid #e7edf5;
+        border-bottom: 1px solid var(--ui-border);
         background: #f8fafc;
     }
 
@@ -2029,7 +2031,7 @@
         border: 1px solid #dbe3ee;
         border-radius: 8px;
         background: var(--ui-surface);
-        color: #334155;
+        color: var(--ui-text);
         font-weight: 700;
         line-height: 1;
         cursor: pointer;
@@ -2060,7 +2062,7 @@
         align-items: center;
         justify-content: center;
         border-radius: 8px;
-        color: #334155;
+        color: var(--ui-text);
         font-size: 0.95rem;
         font-weight: 600;
         line-height: 1;
@@ -2173,7 +2175,7 @@
 
     .cal-booking-period {
         margin-left: 8px;
-        color: #475569;
+        color: var(--ui-text);
         font-size: 0.85rem;
         font-weight: 600;
     }
@@ -5667,7 +5669,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             display: block !important;
             margin-right: 0 !important;
             margin-bottom: 2px !important;
-            color: #6c757d !important;
+            color: var(--ui-text-muted) !important;
             font-size: 0.8rem !important;
         }