refactor: improve admin panel styling with new CSS helpers and page layout patterns

- Add .admin-card, .admin-filter-bar, .admin-stat-row, .admin-stat-chip, .admin-section-title, .admin-info-grid, .admin-empty CSS helpers
- Improve admin table styling (uppercase headers, better spacing, border-separate)
- Add dark mode support for admin tables and cards
- Update housekeeping and settings pages to use new layout components
- Clean up inline styles in housekeeping and settings pages

src/app/globals.css

@@ -79,6 +79,10 @@ html.dark textarea {
   background: #11151c;
   color: var(--color-text);
 }
+html.dark .admin-page table,
+html.dark .admin-card {
+  border-color: rgba(255,255,255,0.06);
+}
 html.dark .currency,
 html.dark .article-img {
   background: #1f242d;
@@ -436,46 +440,124 @@ tbody tr:hover {
 }
 
 /* ── Admin panel (Housekeeping) ─────────────────────────────────
-   Page content wrapper — card-style tables and consistent spacing. */
+   Modern, consistent styling for all admin content pages. */
+.admin-page { scroll-margin-top: 1rem; }
+
+/* Page heading */
 .admin-page main > h1:first-child,
 .admin-page > h1:first-child {
   margin-top: 0;
 }
-.admin-page h1 {
-  font-size: 1.5rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 2px solid var(--border);
-  margin-bottom: 0.85rem;
+
+/* Cards used inside admin pages */
+.admin-card {
+  background: var(--color-surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-card);
+  padding: 1.25rem;
+  transition: box-shadow 0.2s ease;
 }
+
+/* Card with filter/search bar — compact horizontal layout */
+.admin-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 1.25rem;
+}
+.admin-filter-bar input,
+.admin-filter-bar select {
+  flex: 1;
+  min-width: 200px;
+}
+
+/* Compact stat row for list pages (counts, summaries) */
+.admin-stat-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+.admin-stat-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.4rem 0.75rem;
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
+  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+/* Tables */
 .admin-page table {
+  width: 100%;
   background: var(--color-surface);
   border: 1px solid var(--border);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-card);
+  border-collapse: separate;
+  border-spacing: 0;
 }
 .admin-page thead th {
-  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
   color: var(--color-text-muted);
   border-bottom: 1px solid var(--border);
   white-space: nowrap;
-  font-size: 0.7rem;
-  letter-spacing: 0.04em;
-  padding: 0.7rem 0.9rem;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 0.75rem 0.9rem;
 }
 .admin-page td {
   padding: 0.7rem 0.9rem;
-  border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent);
   font-size: 0.88rem;
 }
 .admin-page tbody tr {
   transition: background 0.12s ease;
 }
 .admin-page tbody tr:hover {
-  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
+  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
 }
 .admin-page thead tr:first-child th:first-child { border-radius: 16px 0 0 0; }
 .admin-page thead tr:first-child th:last-child { border-radius: 0 16px 0 0; }
+
+/* Section heading inside admin pages */
+.admin-section-title {
+  font-size: 0.9rem;
+  font-weight: 700;
+  margin: 1.5rem 0 0.75rem;
+  color: var(--color-text);
+}
+.admin-section-title:first-child {
+  margin-top: 0;
+}
+
+/* Two-column info grid */
+.admin-info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 0.75rem;
+}
+.admin-info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+/* Empty state */
+.admin-empty {
+  text-align: center;
+  padding: 2.5rem 1rem;
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+}
 /* ── Public design system (faithful to the atom theme) ──────────
    content-card = surface card with a primary-tinted header (icon +
    title + subtitle) and a padded body — the signature atom block. */