changes toi the darkmode style to have iot be a better edesign

Web/templates/library_item_invoices.html

@@ -112,7 +112,73 @@
     padding: 36px 20px;
   }
 
+  :root[data-theme="dark"] .invoice-history-head {
+    background: linear-gradient(135deg, #172554 0%, #1e293b 100%);
+    border-color: var(--ui-border);
+    box-shadow: var(--ui-shadow-md);
+  }
+
+  :root[data-theme="dark"] .head-meta,
+  :root[data-theme="dark"] .muted,
+  :root[data-theme="dark"] .empty-state {
+    color: var(--ui-text-muted) !important;
+  }
+
+  :root[data-theme="dark"] .section-header {
+    color: var(--ui-title) !important;
+  }
+
+  :root[data-theme="dark"] .invoice-card {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+    box-shadow: var(--ui-shadow-sm);
+  }
+
+  :root[data-theme="dark"] .invoice-table,
+  :root[data-theme="dark"] .invoice-table td {
+    background: var(--ui-surface) !important;
+    color: var(--ui-text) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .invoice-table th {
+    background: var(--ui-surface-soft) !important;
+    color: var(--ui-text-muted) !important;
+    border-color: var(--ui-border) !important;
+  }
+
+  :root[data-theme="dark"] .invoice-table tr:hover td {
+    background: var(--ui-bg-accent) !important;
+  }
+
+  :root[data-theme="dark"] .badge-open {
+    background: #451a1a;
+    color: #fecaca;
+  }
+
+  :root[data-theme="dark"] .badge-paid,
+  :root[data-theme="dark"] .badge-completed {
+    background: #123524;
+    color: #b7f7ce;
+  }
+
+  :root[data-theme="dark"] .badge-active {
+    background: #172554;
+    color: #bfdbfe;
+  }
+
+  :root[data-theme="dark"] .badge-planned {
+    background: #422006;
+    color: #fde68a;
+  }
+
   @media (max-width: 900px) {
+    .invoice-history-shell {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+
     .invoice-table {
       display: block;
       overflow-x: auto;