From ce207ebad1937c41e4bb023f33f974e164bdd12d Mon Sep 17 00:00:00 2001
From: Edouard Vanbelle <opensource@edouard.vanbelle.fr>
Date: Mon, 13 Apr 2026 10:34:16 +0200
Subject: [PATCH] refactor(css): merge profile + admin dark style

---
 static/css/themes/dark.css   | 472 -----------------------------------
 static/css/views/profile.css |  14 +-
 2 files changed, 11 insertions(+), 475 deletions(-)

diff --git a/static/css/themes/dark.css b/static/css/themes/dark.css
index 77e398a4..519a71bf 100644
--- a/static/css/themes/dark.css
+++ b/static/css/themes/dark.css
@@ -889,253 +889,6 @@
     background: var(--color-danger-hover-bg);
 }
 
-/* ── admin.css ── */
-[data-theme="dark"] body {
-    background: var(--color-bg-page);
-    color: var(--color-border);
-}
-[data-theme="dark"] ::-webkit-scrollbar-thumb {
-    background: var(--color-scrollbar-dark);
-}
-[data-theme="dark"] * {
-    scrollbar-color: var(--color-scrollbar-dark) transparent;
-}
-[data-theme="dark"] .admin-tabs {
-    background: var(--color-text-heading);
-    box-shadow: 0 1px 4px var(--color-shadow-xl);
-}
-[data-theme="dark"] .admin-tab {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .admin-tab:hover {
-    color: var(--color-border-light);
-    background: var(--color-dark-footer);
-}
-[data-theme="dark"] .admin-card {
-    background: var(--color-text-heading);
-    box-shadow:
-        0 1px 4px var(--color-shadow-xl),
-        0 0 0 1px var(--color-border-dark-faint);
-}
-[data-theme="dark"] .admin-card h2 {
-    color: var(--color-border-light);
-}
-[data-theme="dark"] .stat-card {
-    background: var(--color-dark-footer);
-    border-color: var(--color-border);
-}
-[data-theme="dark"] .stat-card:hover {
-    box-shadow: 0 4px 12px var(--color-shadow-md);
-}
-[data-theme="dark"] .stat-value {
-    color: var(--color-border-light);
-}
-[data-theme="dark"] .stat-label {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .stat-card.warn {
-    border-color: var(--color-badge-warning-text);
-    background: var(--color-badge-warning-dark-bg);
-}
-[data-theme="dark"] .stat-card.danger {
-    border-color: var(--color-error-text-dark);
-    background: var(--color-badge-error-dark-bg);
-}
-[data-theme="dark"] .progress-bar {
-    background: var(--color-border);
-}
-[data-theme="dark"] .table-wrap {
-    border-color: var(--color-border);
-}
-[data-theme="dark"] th {
-    background: var(--color-dark-footer);
-    color: var(--color-text-subtle);
-    border-bottom-color: var(--color-border);
-}
-[data-theme="dark"] td {
-    border-bottom-color: var(--color-border);
-    color: var(--color-text);
-}
-[data-theme="dark"] tr:hover {
-    background: var(--color-dark-footer);
-}
-[data-theme="dark"] .user-name {
-    color: var(--color-border-light);
-}
-[data-theme="dark"] .user-email {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .badge-admin {
-    background: var(--color-role-admin-dark-bg);
-    color: var(--color-admin-blue);
-}
-[data-theme="dark"] .badge-user {
-    background: var(--color-border);
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .badge-active {
-    background: var(--color-badge-success-dark-bg);
-    color: var(--color-success-text-vivid);
-}
-[data-theme="dark"] .badge-inactive {
-    background: var(--color-badge-error-dark-bg);
-    color: var(--color-multiselect-danger-text);
-}
-[data-theme="dark"] .badge-oidc {
-    background: var(--color-badge-indigo-dark-bg);
-    color: var(--color-badge-indigo-dark-text);
-}
-[data-theme="dark"] .badge-local {
-    background: var(--color-border);
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .btn-secondary {
-    background: var(--color-text-heading);
-    color: var(--color-text);
-    border-color: var(--color-border);
-}
-[data-theme="dark"] .btn-secondary:hover {
-    background: var(--color-border);
-    border-color: var(--color-dark-mid);
-}
-[data-theme="dark"] .btn-danger {
-    background: var(--color-badge-error-dark-bg);
-    color: var(--color-multiselect-danger-text);
-    border-color: var(--color-error-text-dark);
-}
-[data-theme="dark"] .btn-danger:hover {
-    background: var(--color-badge-error-dark-bg-hover);
-}
-[data-theme="dark"] .btn-success {
-    background: var(--color-badge-success-dark-bg);
-    color: var(--color-success-text-vivid);
-    border-color: var(--color-badge-success-text);
-}
-[data-theme="dark"] .btn-success:hover {
-    background: var(--color-badge-success-fill-dark);
-}
-[data-theme="dark"] .form-group label {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .form-group input[type="text"],
-[data-theme="dark"] .form-group input[type="password"],
-[data-theme="dark"] .form-group input[type="url"],
-[data-theme="dark"] .form-group input[type="number"],
-[data-theme="dark"] .form-group select {
-    background: var(--color-bg-page);
-    border-color: var(--color-border);
-    color: var(--color-text);
-}
-[data-theme="dark"] .form-group input:focus,
-[data-theme="dark"] .form-group select:focus {
-    border-color: var(--color-accent);
-    background: var(--color-bg-page);
-    box-shadow: 0 0 0 3px var(--color-accent-ring-dark);
-}
-[data-theme="dark"] .form-group small {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .toggle-row label {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .slider {
-    background: var(--color-dark-mid);
-}
-[data-theme="dark"] .readonly-field {
-    background: var(--color-bg-page);
-    border-color: var(--color-border);
-    color: var(--color-text);
-}
-[data-theme="dark"] .readonly-field button {
-    background: var(--color-text-heading);
-    border-color: var(--color-border);
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .readonly-field button:hover {
-    background: var(--color-border);
-    color: var(--color-border-light);
-}
-[data-theme="dark"] .warning {
-    background: var(--color-badge-warning-dark-bg);
-    border-color: var(--color-badge-warning-text);
-    color: var(--color-star-text);
-}
-[data-theme="dark"] .alert-success {
-    background: var(--color-badge-success-dark-bg);
-    color: var(--color-success-text-vivid);
-    border-color: var(--color-badge-success-text);
-}
-[data-theme="dark"] .alert-error {
-    background: var(--color-badge-error-dark-bg);
-    color: var(--color-multiselect-danger-text);
-    border-color: var(--color-error-text-dark);
-}
-[data-theme="dark"] .alert-info {
-    background: var(--color-badge-blue-dark-bg);
-    color: var(--color-badge-blue-dark-text);
-    border-color: var(--color-role-admin-text);
-}
-[data-theme="dark"] .discovery-result.ok {
-    background: var(--color-badge-success-dark-bg);
-    border-color: var(--color-badge-success-text);
-    color: var(--color-success-text-vivid);
-}
-[data-theme="dark"] .discovery-result.fail {
-    background: var(--color-badge-error-dark-bg);
-    border-color: var(--color-error-text-dark);
-    color: var(--color-multiselect-danger-text);
-}
-[data-theme="dark"] details {
-    border-top-color: var(--color-border);
-}
-[data-theme="dark"] details summary {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] details summary:hover {
-    color: var(--color-accent);
-}
-[data-theme="dark"] details[open] summary {
-    color: var(--color-accent);
-}
-[data-theme="dark"] .modal {
-    background: var(--color-text-heading);
-    box-shadow: 0 20px 60px var(--color-shadow-4xl);
-}
-[data-theme="dark"] .modal h3 {
-    color: var(--color-border-light);
-}
-[data-theme="dark"] .modal-overlay {
-    background: var(--color-overlay-mid);
-    backdrop-filter: blur(4px);
-}
-[data-theme="dark"] .quota-text {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .pagination {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] #access-denied h2 {
-    color: var(--color-multiselect-danger-text);
-}
-[data-theme="dark"] #access-denied p {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .modal-confirm p {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .btn-danger {
-    background: linear-gradient(135deg, var(--color-danger-alt), var(--color-error-text));
-}
-[data-theme="dark"] #access-denied .access-icon {
-    background: var(--color-badge-error-dark-bg);
-}
-[data-theme="dark"] #loading {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .toggle-row {
-    border-top-color: var(--color-border);
-}
-
 /* ── inlineViewer.css ── */
 [data-theme="dark"] .inline-viewer-progress {
     background: var(--color-progress-overlay-dark);
@@ -1170,231 +923,6 @@
     color: var(--color-text-subtle);
 }
 
-/* ── profile.css ── */
-[data-theme="dark"] body {
-    background: var(--color-bg-page);
-    color: var(--color-border);
-}
-[data-theme="dark"] ::-webkit-scrollbar-thumb {
-    background: var(--color-scrollbar-dark);
-}
-[data-theme="dark"] * {
-    scrollbar-color: var(--color-scrollbar-dark) transparent;
-}
-[data-theme="dark"] .profile-card {
-    background: var(--color-text-heading);
-    box-shadow:
-        0 1px 4px var(--color-shadow-xl),
-        0 0 0 1px var(--color-border-dark-faint);
-}
-[data-theme="dark"] .profile-card h2 {
-    color: var(--color-border-light);
-}
-[data-theme="dark"] .avatar-info h1 {
-    color: var(--color-border-light);
-}
-[data-theme="dark"] .avatar-info .email {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .role-badge-admin {
-    background: var(--color-role-admin-dark-bg);
-    color: var(--color-admin-blue);
-}
-[data-theme="dark"] .role-badge-user {
-    background: var(--color-border);
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .info-item {
-    background: var(--color-dark-footer);
-    border-color: var(--color-border);
-}
-[data-theme="dark"] .info-item .info-label {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .info-item .info-label i {
-    color: var(--color-dark-mid);
-}
-[data-theme="dark"] .info-item .info-value {
-    color: var(--color-border-light);
-}
-[data-theme="dark"] .storage-stat {
-    background: var(--color-dark-footer);
-    border-color: var(--color-border);
-}
-[data-theme="dark"] .storage-stat .stat-value {
-    color: var(--color-border-light);
-}
-[data-theme="dark"] .storage-stat .stat-label {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .storage-bar {
-    background: var(--color-border);
-}
-[data-theme="dark"] .storage-text {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .form-group label {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .form-group input {
-    background: var(--color-bg-page);
-    border-color: var(--color-border);
-    color: var(--color-text);
-}
-[data-theme="dark"] .form-group input:focus {
-    border-color: var(--color-accent);
-    background: var(--color-bg-page);
-    box-shadow: 0 0 0 3px var(--color-accent-ring-dark);
-}
-[data-theme="dark"] .form-group small {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .alert-success {
-    background: var(--color-badge-success-dark-bg);
-    color: var(--color-success-text-vivid);
-    border-color: var(--color-badge-success-text);
-}
-[data-theme="dark"] .alert-error {
-    background: var(--color-badge-error-dark-bg);
-    color: var(--color-multiselect-danger-text);
-    border-color: var(--color-error-text-dark);
-}
-[data-theme="dark"] #auth-error {
-    background: transparent;
-}
-[data-theme="dark"] #auth-error .err-icon {
-    background: var(--color-badge-error-dark-bg);
-}
-[data-theme="dark"] #auth-error h2 {
-    color: var(--color-multiselect-danger-text);
-}
-[data-theme="dark"] #auth-error p {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .section-desc {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .checkbox-label {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .form-select {
-    background: var(--color-bg-page);
-    border-color: var(--color-border);
-    color: var(--color-text);
-}
-[data-theme="dark"] .form-select:focus {
-    border-color: var(--color-accent);
-    background: var(--color-bg-page);
-    box-shadow: 0 0 0 3px var(--color-accent-ring-dark);
-}
-[data-theme="dark"] .btn-secondary {
-    background: var(--color-border);
-    color: var(--color-text);
-    border-color: var(--color-dark-mid);
-}
-[data-theme="dark"] .btn-secondary:hover {
-    background: var(--color-dark-mid);
-}
-[data-theme="dark"] .app-pw-table th {
-    color: var(--color-text-subtle);
-    border-bottom-color: var(--color-border);
-}
-[data-theme="dark"] .app-pw-table td {
-    border-bottom-color: var(--color-text-heading);
-}
-[data-theme="dark"] .app-pw-label-cell {
-    color: var(--color-border-light);
-}
-[data-theme="dark"] .app-pw-prefix code {
-    background: var(--color-border);
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .badge-active {
-    background: var(--color-badge-success-dark-bg);
-    color: var(--color-success-text-vivid);
-}
-[data-theme="dark"] .badge-expired {
-    background: var(--color-badge-error-dark-bg);
-    color: var(--color-multiselect-danger-text);
-}
-[data-theme="dark"] .app-pw-empty {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .app-pw-token-input {
-    background: var(--color-badge-success-dark-bg);
-    border-color: var(--color-badge-success-text);
-    color: var(--color-success-text-vivid);
-}
-[data-theme="dark"] .app-pw-instr-list code {
-    background: var(--color-badge-success-dark-bg);
-    color: var(--color-success-text-vivid);
-}
-[data-theme="dark"] #loading {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .app-pw-desc {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .app-pw-create input {
-    background: var(--color-bg-page);
-    border-color: var(--color-border);
-    color: var(--color-text);
-}
-[data-theme="dark"] .app-pw-create input:focus {
-    border-color: var(--color-accent);
-    background: var(--color-bg-page);
-    box-shadow: 0 0 0 3px var(--color-accent-ring-dark);
-}
-[data-theme="dark"] .app-pw-created {
-    background: var(--color-badge-success-dark-bg);
-    border-color: var(--color-badge-success-text);
-}
-[data-theme="dark"] .app-pw-created-label {
-    color: var(--color-success-text-vivid);
-}
-[data-theme="dark"] .app-pw-created-value code {
-    background: var(--color-badge-success-fill-dark);
-    color: var(--color-success-text-vivid);
-}
-[data-theme="dark"] .app-pw-created small {
-    color: var(--color-badge-success-border);
-}
-[data-theme="dark"] .app-pw-table thead th {
-    color: var(--color-text-subtle);
-    border-bottom-color: var(--color-border);
-}
-[data-theme="dark"] .app-pw-table tbody td {
-    color: var(--color-text);
-    border-bottom-color: var(--color-text-heading);
-}
-[data-theme="dark"] .btn-danger-sm {
-    background: var(--color-badge-error-dark-bg);
-    color: var(--color-multiselect-danger-text);
-}
-[data-theme="dark"] .btn-danger-sm:hover {
-    background: var(--color-badge-error-dark-bg-hover);
-    color: var(--color-badge-error-border);
-}
-[data-theme="dark"] .app-pw-empty {
-    color: var(--color-text-subtle);
-}
-[data-theme="dark"] .app-pw-auto-section {
-    border-top-color: var(--color-border);
-}
-[data-theme="dark"] .app-pw-auto-toggle {
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .app-pw-auto-toggle:hover {
-    color: var(--color-text);
-}
-[data-theme="dark"] .app-pw-auto-count {
-    background: var(--color-border);
-    color: var(--color-text-faint);
-}
-[data-theme="dark"] .app-pw-auto-desc {
-    color: var(--color-text-subtle);
-}
-
 /* ── shared.css ── */
 [data-theme="dark"] .shared-filters {
     background-color: var(--color-bg-subtle);
diff --git a/static/css/views/profile.css b/static/css/views/profile.css
index c7843d65..2862ba45 100644
--- a/static/css/views/profile.css
+++ b/static/css/views/profile.css
@@ -198,7 +198,7 @@ body {
 }
 .info-item {
     padding: 16px;
-    background: var(--color-bg-hover);
+    background: var(--color-bg-alt);
     border-radius: 12px;
     border: 1px solid var(--color-border);
 }
@@ -305,11 +305,14 @@ body {
     border: 2px solid var(--color-border);
     border-radius: 10px;
     font-size: 14px;
-    background: var(--color-bg-hover);
+    background: var(--color-bg-input);
     transition: all 0.2s;
     font-family: inherit;
     color: var(--color-text-heading);
 }
+.form-group input:hover {
+    background: var(--color-bg-surface);
+}
 .form-group input:focus {
     outline: none;
     border-color: var(--color-accent);
@@ -639,11 +642,16 @@ body {
     border: 2px solid var(--color-border);
     border-radius: 10px;
     font-size: 14px;
-    background: var(--color-bg-hover);
+    background: var(--color-bg-input);
     transition: all 0.2s;
     font-family: inherit;
     color: var(--color-text-heading);
 }
+
+.app-pw-create input:hover {
+    background: var(--color-bg-surface);
+}
+
 .app-pw-create input:focus {
     outline: none;
     border-color: var(--color-accent);