From 4a776872e086231c2fd9d965eecbb724d87fab75 Mon Sep 17 00:00:00 2001
From: AIIrondev <iron.ai.dev@gmail.com>
Date: Sat, 15 Aug 2026 00:08:13 +0200
Subject: [PATCH] Improvement of the style for the Library Module

---
 Web/templates/library_table.html | 258 ++++++++++++-------------------
 1 file changed, 99 insertions(+), 159 deletions(-)

diff --git a/Web/templates/library_table.html b/Web/templates/library_table.html
index bf83123..28a32db 100644
--- a/Web/templates/library_table.html
+++ b/Web/templates/library_table.html
@@ -4,59 +4,60 @@
 
 {% block content %}
 <style>
-    /* The Dark Background Overlay */
+    /* =========================================
+       1. Modals & Overlays
+       ========================================= */
     .modal {
+        display: none; /* Managed by JS (none/flex) */
         position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: 100vh;
-        background-color: rgba(0, 0, 0, 0.6);
-        /* Display is managed by JS (none/flex) */
-        align-items: center; 
-        justify-content: center;
+        inset: 0; /* Modern shorthand for top: 0, right: 0, bottom: 0, left: 0 */
         z-index: 1000;
+        background-color: rgba(0, 0, 0, 0.6);
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
     }
 
-    /* The White Modal Box */
     .modal-content {
-        background-color: #fff;
-        padding: 20px;
-        width: 80%;
-        max-width: 600px;
-        border-radius: 8px;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-
-        /* Flexbox allows the header to stay fixed while the body scrolls */
+        position: relative;
         display: flex;
         flex-direction: column;
-        max-height: 85vh;
+        width: 100%;
+        max-width: 900px; /* Consolidated from conflicting 600px/900px rules */
+        max-height: 90vh;
+        background-color: var(--ui-surface, #fff);
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        overflow-y: auto;
     }
 
-    /* The Close Button */
     .close {
-        align-self: flex-end;
+        position: absolute;
+        top: 15px;
+        right: 20px;
         color: #aaa;
         font-size: 28px;
         font-weight: bold;
-        cursor: pointer;
         line-height: 1;
-        margin-bottom: 10px;
+        cursor: pointer;
+        transition: color 0.2s ease;
     }
 
     .close:hover,
     .close:focus {
-        color: #000;
+        color: var(--ui-text, #000);
         text-decoration: none;
     }
 
-    /* The Scrollable Content Area */
     #detailContent {
         overflow-y: auto;
         padding-right: 10px;
     }
 
-    /* Library table-only view styles */
+    /* =========================================
+       2. Layout & Headers
+       ========================================= */
     .library-table-container {
         max-width: 1400px;
         margin: 0 auto;
@@ -79,13 +80,15 @@
         font-size: 0.95em;
     }
 
-    /* Library search bar */
+    /* =========================================
+       3. Search, Filter & Scan Panels
+       ========================================= */
     .library-search-bar {
-        margin-bottom: 20px;
         display: flex;
-        gap: 10px;
         flex-wrap: wrap;
         align-items: center;
+        gap: 10px;
+        margin-bottom: 20px;
     }
 
     .library-search-input {
@@ -95,10 +98,9 @@
         border: 1px solid #ddd;
         border-radius: 6px;
         font-size: 16px;
-        background: white;
+        background: #fff;
     }
 
-    /* Scanner panel */
     .library-scan-panel {
         background: var(--ui-surface);
         border: 1px solid #d9dde4;
@@ -129,26 +131,18 @@
         color: #4b5563;
     }
 
-    .library-scan-status.ok {
-        color: #1f7a38;
-    }
-
-    .library-scan-status.warn {
-        color: #9a6700;
-    }
-
-    .library-scan-status.error {
-        color: #b42318;
-    }
+    .library-scan-status.ok { color: #1f7a38; }
+    .library-scan-status.warn { color: #9a6700; }
+    .library-scan-status.error { color: #b42318; }
 
     .library-scan-reader-wrap {
         display: none;
         margin-top: 12px;
+        max-width: 460px;
+        background: var(--ui-surface);
         border: 1px solid #d9dde4;
         border-radius: 8px;
         overflow: hidden;
-        background: var(--ui-surface);
-        max-width: 460px;
     }
 
     .library-scan-reader {
@@ -156,14 +150,15 @@
         min-height: 280px;
     }
 
+    /* Filters */
     .library-filter-toggle-btn {
         padding: 10px 16px;
         background: #f0f2f5;
         border: 1px solid #ddd;
         border-radius: 6px;
-        cursor: pointer;
         font-weight: 500;
         color: var(--ui-text);
+        cursor: pointer;
         transition: all 0.2s ease;
     }
 
@@ -178,10 +173,9 @@
         color: #4f46e5;
     }
 
-    /* Filter panel */
     .library-filter-panel {
         display: none;
-        background: white;
+        background: #fff;
         border: 1px solid #ddd;
         border-radius: 8px;
         padding: 20px;
@@ -210,10 +204,10 @@
     }
 
     .filter-item label {
+        margin-bottom: 6px;
         font-weight: 600;
         font-size: 0.9em;
         color: var(--ui-text);
-        margin-bottom: 6px;
     }
 
     .filter-item input,
@@ -222,7 +216,8 @@
         border: 1px solid #ddd;
         border-radius: 4px;
         font-size: 14px;
-        background: white;
+        background: #fff;
+        transition: border-color 0.2s ease, box-shadow 0.2s ease;
     }
 
     .filter-item input:focus,
@@ -236,8 +231,8 @@
         display: flex;
         gap: 10px;
         margin-top: 15px;
-        border-top: 1px solid #eee;
         padding-top: 15px;
+        border-top: 1px solid #eee;
     }
 
     .filter-buttons .button {
@@ -246,11 +241,13 @@
         font-size: 14px;
     }
 
-    /* Library table */
+    /* =========================================
+       4. Tables & Data Display
+       ========================================= */
     .library-items-table {
         width: 100%;
+        background: #fff;
         border-collapse: collapse;
-        background: white;
         border: 1px solid #ddd;
         border-radius: 8px;
         overflow: hidden;
@@ -266,8 +263,8 @@
         padding: 14px 16px;
         text-align: left;
         font-weight: 600;
-        color: var(--ui-text);
         font-size: 0.9em;
+        color: var(--ui-text);
         text-transform: uppercase;
         letter-spacing: 0.5px;
     }
@@ -288,7 +285,6 @@
         border-bottom: none;
     }
 
-    /* Table cells */
     .table-title {
         font-weight: 600;
         color: var(--ui-text);
@@ -302,26 +298,14 @@
         font-weight: 500;
     }
 
-    .status-available {
-        background: #e8f5e9;
-        color: #2e7d32;
-    }
+    .status-available { background: #e8f5e9; color: #2e7d32; }
+    .status-borrowed { background: #fff3e0; color: #e65100; }
+    .status-damaged { background: #fee2e2; color: #991b1b; }
 
-    .status-borrowed {
-        background: #fff3e0;
-        color: #e65100;
-    }
-
-    .status-damaged {
-        background: #fee2e2;
-        color: #991b1b;
-    }
-
-    /* Actions */
     .table-actions {
         display: flex;
-        gap: 8px;
         flex-wrap: wrap;
+        gap: 8px;
     }
 
     .table-actions .button {
@@ -330,26 +314,25 @@
         white-space: nowrap;
     }
 
-    /* Empty state */
     .library-empty-state {
-        text-align: center;
         padding: 60px 20px;
+        text-align: center;
         color: #999;
     }
 
     .library-empty-state h3 {
-        font-size: 1.3em;
         margin-bottom: 10px;
+        font-size: 1.3em;
         color: #666;
     }
 
     .library-load-row {
-        margin-top: 12px;
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
-        flex-wrap: wrap;
+        margin-top: 12px;
     }
 
     .library-load-hint {
@@ -357,54 +340,9 @@
         color: #6b7280;
     }
 
-    /* Small confirmation popup (toast) */
-    .small-popup {
-        position: fixed;
-        bottom: 24px;
-        left: 50%;
-        transform: translateX(-50%);
-        background: rgba(17, 24, 39, 0.96);
-        color: #fff;
-        padding: 12px 16px;
-        border-radius: 8px;
-        box-shadow: 0 6px 24px rgba(2,6,23,0.6);
-        z-index: 2000;
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        max-width: 90%;
-        font-size: 0.95em;
-    }
-    .small-popup.ok { background: rgba(16,185,129,0.95); color: #032; }
-    .small-popup.error { background: rgba(239,68,68,0.95); color: #210; }
-    .small-popup .close-x { margin-left: 8px; cursor: pointer; font-weight: 700; }
-
-    /* Modal styles */
-    .modal {
-        display: none;
-        position: fixed;
-        z-index: 1000;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
-        align-items: center;
-        justify-content: center;
-        padding: 20px;
-    }
-
-    .modal-content {
-        background-color: var(--ui-surface);
-        border-radius: 8px;
-        padding: 20px;
-        max-width: 900px;
-        max-height: 90vh;
-        overflow-y: auto;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-        position: relative;
-    }
-
+    /* =========================================
+       5. Edit Grid Forms
+       ========================================= */
     .edit-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -416,10 +354,10 @@
     }
 
     .edit-grid label {
+        display: block;
+        margin-bottom: 4px;
         font-weight: 600;
         font-size: 0.9em;
-        margin-bottom: 4px;
-        display: block;
     }
 
     .edit-grid input,
@@ -437,37 +375,44 @@
         margin-top: 14px;
     }
 
-    .close {
-        position: absolute;
-        right: 20px;
-        top: 10px;
-        font-size: 28px;
-        font-weight: bold;
-        color: #999;
+    /* =========================================
+       6. Notifications / Toasts
+       ========================================= */
+    .small-popup {
+        position: fixed;
+        bottom: 24px;
+        left: 50%;
+        z-index: 2000;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        max-width: 90%;
+        padding: 12px 16px;
+        background: rgba(17, 24, 39, 0.96);
+        color: #fff;
+        border-radius: 8px;
+        font-size: 0.95em;
+        transform: translateX(-50%);
+        box-shadow: 0 6px 24px rgba(2,6,23,0.6);
+    }
+
+    .small-popup.ok { background: rgba(16,185,129,0.95); color: #032; }
+    .small-popup.error { background: rgba(239,68,68,0.95); color: #210; }
+
+    .small-popup .close-x {
+        margin-left: 8px;
+        font-weight: 700;
         cursor: pointer;
     }
 
-    .close:hover {
-        color: var(--ui-text);
-    }
-
-    /* Mobile responsive */
+    /* =========================================
+       7. Mobile Responsiveness
+       ========================================= */
     @media (max-width: 768px) {
-        .library-table-container {
-            padding: 10px;
-        }
-
-        .library-search-bar {
-            flex-direction: column;
-        }
-
-        .library-search-input {
-            width: 100%;
-        }
-
-        .library-items-table {
-            font-size: 0.85em;
-        }
+        .library-table-container { padding: 10px; }
+        .library-search-bar { flex-direction: column; }
+        .library-search-input { width: 100%; }
+        .library-items-table { font-size: 0.85em; }
 
         .library-items-table th,
         .library-items-table td {
@@ -479,17 +424,12 @@
             font-size: 0.75em;
         }
 
-        .filter-row {
-            grid-template-columns: 1fr;
-        }
-
+        .filter-row,
         .library-scan-controls {
             grid-template-columns: 1fr;
         }
 
-        .library-scan-reader-wrap {
-            max-width: 100%;
-        }
+        .library-scan-reader-wrap { max-width: 100%; }
     }
 </style>