Major Refactor: Refactor the codebase to improve readability and maintainability

static/css/components.css

@@ -0,0 +1,52 @@
+/* ============================================================
+   HOVER EFFECTS — theme-aware
+   ============================================================ */
+
+/* .hover-shadow: lift on hover with info-colored border
+   Uses --bs-info so the border matches the theme palette. */
+.hover-shadow {
+    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
+}
+.hover-shadow:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .15) !important;
+    border-color: var(--bs-info) !important;
+}
+
+/* .hover-card: tertiary background that blends with the page */
+.hover-card {
+    transition: transform .2s ease, box-shadow .2s ease;
+    background-color: var(--bs-tertiary-bg);
+}
+.hover-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .12) !important;
+}
+
+.transition-all {
+    transition: all .3s ease-in-out;
+}
+
+/* Dark mode gets a deeper shadow */
+[data-bs-theme="dark"] .hover-shadow:hover {
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3) !important;
+}
+[data-bs-theme="dark"] .hover-card:hover {
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .25) !important;
+}
+
+/* ============================================================
+   BAGUETTE EASTER EGG
+   ============================================================ */
+
+@keyframes baguetteRoll {
+    0%   { transform: rotate(0deg)   scale(1.2); }
+    50%  { transform: rotate(180deg) scale(1.5); }
+    100% { transform: rotate(360deg) scale(1);   }
+}
+
+.baguette-spin {
+    display: inline-block;
+    animation: baguetteRoll 1s ease-in-out;
+    font-style: normal;
+}

static/css/report-tables.css

@@ -0,0 +1,36 @@
+.table-container {
+    max-height: 75vh;
+    overflow-y: auto;
+    overflow-x: auto;
+}
+
+.sticky-col {
+    position: sticky;
+    left: 0;
+    z-index: 2;
+    background-color: var(--bs-body-bg);
+    border-right: 2px solid var(--bs-border-color) !important;
+}
+
+thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--bs-body-bg);
+    box-shadow: inset 0 -1px 0 var(--bs-border-color);
+}
+
+thead th.sticky-col {
+    z-index: 3;
+}
+
+.numeric-cell {
+    font-family: 'Courier New', Courier, monospace;
+}
+
+/* .total-column: uses theme-aware secondary background
+   so the highlight is visible in both light and dark mode. */
+.total-column {
+    font-weight: bold;
+    background-color: var(--bs-secondary-bg) !important;
+}