changes with the Color of the Code suchen Box to red

Web/templates/main_admin.html

@@ -266,6 +266,11 @@
         border-radius: 4px;
     }
 
+    .code-search-label {
+        color: #b93845;
+        font-weight: 700;
+    }
+
     .search-button {
         padding: 8px 12px;
         background-color: #007bff;
@@ -284,10 +289,10 @@
     }
 
     #code-search.searching {
-        background-color: #fff3cd;
+        background-color: #fff5f5;
         transition: background-color 0.3s;
-        border: 2px solid #ffc107;
-        box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
+        border: 2px solid #d65a62;
+        box-shadow: 0 0 8px rgba(190, 55, 66, 0.28);
     }
 
     /* QR Scanner styles */
@@ -564,11 +569,11 @@
    
     .items-navigation {
         display: grid;
-        grid-template-columns: 46px minmax(0, 1fr) 46px;
+        grid-template-columns: 42px minmax(0, 1fr) 42px;
         align-items: center;
-        column-gap: 20px;
-        width: calc(100% + 132px);
-        margin-left: -66px;
+        column-gap: 16px;
+        width: calc(100% + 116px);
+        margin-left: -58px;
         margin-top: 20px;
     }
 
@@ -581,25 +586,26 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 46px;
-        height: 46px;
+        width: 42px;
+        height: 42px;
         padding: 0;
-        background: linear-gradient(145deg, #1687f5, #0067d9);
-        color: #fff;
-        border: 2px solid rgba(255, 255, 255, 0.9);
-        box-shadow: 0 8px 18px rgba(0, 82, 170, 0.28), 0 2px 5px rgba(15, 23, 42, 0.18);
+        background: var(--ui-surface-soft);
+        color: var(--ui-title);
+        border: 1px solid var(--ui-border);
+        box-shadow: var(--ui-shadow-sm);
         cursor: pointer;
-        border-radius: 50%;
-        font-size: 1.35rem;
+        border-radius: 10px;
+        font-size: 1.15rem;
         font-weight: 700;
         line-height: 1;
-        transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
+        transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
         z-index: 1;
     }
 
     .navigation-button:hover {
-        background: linear-gradient(145deg, #319bff, #0058bd);
-        box-shadow: 0 11px 22px rgba(0, 82, 170, 0.36), 0 3px 7px rgba(15, 23, 42, 0.2);
+        background: var(--ui-surface);
+        border-color: var(--module-accent-color);
+        box-shadow: var(--ui-shadow-md);
         transform: translateY(-2px) scale(1.04);
     }
 
@@ -772,15 +778,15 @@
     }
 
     .code-match {
-        border: 2px solid #17a2b8 !important;
-        box-shadow: 0 0 15px rgba(23, 162, 184, 0.5) !important;
+        border: 2px solid #d65a62 !important;
+        box-shadow: 0 0 15px rgba(190, 55, 66, 0.28) !important;
         position: relative;
         z-index: 5;
     }
 
     .exact-code-match {
-        border: 3px solid #28a745 !important;
-        box-shadow: 0 0 20px rgba(40, 167, 69, 0.7) !important;
+        border: 3px solid #b93845 !important;
+        box-shadow: 0 0 20px rgba(185, 56, 69, 0.42) !important;
         position: relative;
         z-index: 11;
     }
@@ -2535,7 +2541,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
 
             <div class="filter-group search-field">
                 <div class="filter-header">
-                    <label for="code-search">Code suchen:</label>
+                    <label class="code-search-label" for="code-search">Code suchen:</label>
                     <button type="button" class="clear-filter" onclick="clearCodeSearch()">Clear</button>
                 </div>
                 <div class="search-container">