/* ============================================================ MDM LED — DARK THEME v1 /assets/css/dark-theme.css ------------------------------------------------------------ Active via : Toggle gere par assets/lib/theme.js Persistance : localStorage ('mdm-theme': 'dark' | 'light' | 'auto') ============================================================ */ /* === 0) Variables CSS - valeurs par defaut (mode clair) ===== */ :root { --color-danger-bg: #FEF2F2; --color-warning-bg: #FEF3C7; --color-success-bg: #D1FAE5; --color-info-bg: #EFF6FF; --color-bg-elevated: #FFFFFF; --color-border-accent: #C8102E; } /* === 1) Variables CSS surchargees en mode sombre ============ */ [data-theme="dark"] { /* Couleurs primaires MDM Led — on garde le rouge mais on adoucit legerement pour qu'il ne pique pas trop sur fond sombre */ --color-primary: #E0334E; --color-primary-dark: #C8102E; --color-primary-light: #4A1620; --color-primary-50: #2A0F14; /* === Palette de gris hierarchisee (5 niveaux + bordures) === Teinte legerement bleutee pour eviter l'effet 'terne' des gris purs. Inspire de GitHub Dark / Linear / Notion. */ --color-bg: #0F0F11; /* Niveau 0 : fond global (body) - le plus sombre */ --color-bg-soft: #1A1B1E; /* Niveau 1 : cartes, sidebar */ --color-bg-mute: #26282D; /* Niveau 2 : inputs, zones en retrait, hovers */ --color-bg-elevated: #2F3137; /* Niveau 3 : modales, dropdowns flottants (au-dessus) */ --color-border: #383A40; --color-border-strong: #494C54; --color-text: #E8EAED; --color-text-soft: #9DA3AE; --color-text-mute: #6B707B; /* Etats : fonds tres sombres + texte clair */ --color-success: #34D399; --color-success-bg: #0F2A20; --color-warning: #FBBF24; --color-warning-bg: #2A1E0A; --color-danger: #F87171; --color-danger-bg: #2A1414; --color-info: #60A5FA; --color-info-bg: #0F1F2E; /* Ombres plus marquees pour mieux ressortir des fonds sombres */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --shadow-lg: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.4); --shadow-xl: 0 20px 25px rgba(0,0,0,0.6), 0 10px 10px rgba(0,0,0,0.4); } /* === 2) Reset des couleurs hardcodees inline en mode sombre === Le JS existant a beaucoup de style={{background: '#fff'}} inline. On les surcharge en CSS avec selector specificity pour ne pas toucher au JS. Limitation : on ne peut PAS surcharger un style inline en CSS classique. Solution : utiliser un wrapper [data-theme="dark"] + !important sur les selecteurs de classes communes, et un filtrage des couleurs claires via 'background-color' du body qui se propage par transparence. */ [data-theme="dark"] body { background-color: var(--color-bg) !important; color: var(--color-text); } /* === 3) Surcharges ciblees des classes existantes ============== */ [data-theme="dark"] .card, [data-theme="dark"] .page-header, [data-theme="dark"] .stat-card, [data-theme="dark"] .modal { background-color: var(--color-bg-soft) !important; color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .table, [data-theme="dark"] .table th, [data-theme="dark"] .table td { background-color: transparent; color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .table thead { background-color: var(--color-bg-mute); } [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] textarea.form-input, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="search"], [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--color-bg-mute); color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .form-input::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--color-text-mute); } [data-theme="dark"] .btn-ghost { color: var(--color-text); } [data-theme="dark"] .btn-ghost:hover { background-color: var(--color-bg-mute); } [data-theme="dark"] .sidebar, [data-theme="dark"] aside.sidebar { background-color: var(--color-bg-soft); border-right: 1px solid var(--color-border); } [data-theme="dark"] .modal-backdrop { background-color: rgba(0,0,0,0.7); } /* === 4) Bouton toggle theme =================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); border-radius: var(--radius); cursor: pointer; font-size: 1.1rem; line-height: 1; transition: background 0.15s ease, transform 0.15s ease; } .theme-toggle:hover { background: var(--color-bg-mute); transform: scale(1.05); } .theme-toggle:active { transform: scale(0.95); } /* Transition douce a chaque switch de theme (sauf au premier rendu - le script ajoute la classe 'theme-ready' apres detection) */ html.theme-ready, html.theme-ready body, html.theme-ready .card, html.theme-ready .stat-card, html.theme-ready .modal, html.theme-ready .sidebar, html.theme-ready .form-input, html.theme-ready .form-select, html.theme-ready .table { transition: background-color 0.2s ease, color 0.15s ease, border-color 0.2s ease; } /* ============================================================ v1.1 - Patch : zones avec couleurs hardcodees identifiees en test utilisateur (capture 1778875731454) ============================================================ */ /* === Boutons : .btn a 'background: white' en dur dans styles.css === */ [data-theme="dark"] .btn { background: var(--color-bg-mute) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .btn:hover { background: var(--color-border) !important; border-color: var(--color-border-strong) !important; } /* Les boutons couleur (primary, success, danger, ai) gardent leur couleur */ [data-theme="dark"] .btn-primary { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; } [data-theme="dark"] .btn-primary:hover { background: var(--color-primary-dark) !important; } [data-theme="dark"] .btn-success { background: var(--color-success) !important; color: #fff !important; border-color: var(--color-success) !important; } [data-theme="dark"] .btn-danger { background: var(--color-danger) !important; color: #fff !important; border-color: var(--color-danger) !important; } [data-theme="dark"] .btn-ghost { background: transparent !important; color: var(--color-text-soft) !important; border-color: transparent !important; } [data-theme="dark"] .btn-ghost:hover { background: var(--color-bg-mute) !important; color: var(--color-text) !important; } /* === Stat cards : 'background: white' en dur === */ [data-theme="dark"] .stat-card { background: var(--color-bg-soft) !important; color: var(--color-text); border-color: var(--color-border); } /* === Sidebar user (footer profil) : variable inexistante --color-background-secondary === */ [data-theme="dark"] .sidebar-user { background: var(--color-bg-mute) !important; border-top-color: var(--color-border) !important; } [data-theme="dark"] .sidebar-user-name { color: var(--color-text) !important; } [data-theme="dark"] .sidebar-user-role { color: var(--color-text-soft) !important; } [data-theme="dark"] .sidebar-user-logout { color: var(--color-text-soft) !important; } [data-theme="dark"] .sidebar-user-logout:hover { background: rgba(255, 100, 100, 0.15) !important; color: var(--color-danger) !important; } /* === Sidebar elle-meme (sections + items) === */ [data-theme="dark"] .sidebar, [data-theme="dark"] aside { background: var(--color-bg-soft); border-right-color: var(--color-border); } [data-theme="dark"] .sidebar .nav-section-title, [data-theme="dark"] .nav-section-title { color: var(--color-text-mute); } [data-theme="dark"] .sidebar .nav-item, [data-theme="dark"] .nav-item { color: var(--color-text-soft); } [data-theme="dark"] .sidebar .nav-item:hover, [data-theme="dark"] .nav-item:hover { background: var(--color-bg-mute); color: var(--color-text); } [data-theme="dark"] .sidebar .nav-item.active, [data-theme="dark"] .nav-item.active { background: var(--color-primary-light); color: var(--color-primary); } /* === Topbar / page-header === */ [data-theme="dark"] .topbar, [data-theme="dark"] .page-header { background: var(--color-bg-soft); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .page-title { color: var(--color-text); } [data-theme="dark"] .page-subtitle { color: var(--color-text-soft); } /* === Badges, tooltips, autres elements blancs en dur === */ [data-theme="dark"] .badge { background: var(--color-bg-mute); color: var(--color-text); border-color: var(--color-border); } [data-theme="dark"] .badge.badge-default { background: var(--color-bg-mute); color: var(--color-text); } /* ============================================================ v1.2 - Patch exhaustif : surcharge de TOUTES les classes avec background hardcode clair dans styles.css / autres CSS. Genere a partir d'un audit automatise. ============================================================ */ /* === styles.css : fonds clairs en dur === */ [data-theme="dark"] .topbar, [data-theme="dark"] .sidebar, [data-theme="dark"] .card, [data-theme="dark"] .stat-card, [data-theme="dark"] .form-textarea, [data-theme="dark"] .table-wrap, [data-theme="dark"] .modal, [data-theme="dark"] .toast, [data-theme="dark"] .login-card, [data-theme="dark"] .filters-bar, [data-theme="dark"] .form-grid, [data-theme="dark"] .form-select-inline, [data-theme="dark"] .data-table, [data-theme="dark"] .draft-body, [data-theme="dark"] .chat-msg-content { background: var(--color-bg-soft) !important; color: var(--color-text) !important; } [data-theme="dark"] .data-table thead, [data-theme="dark"] .data-table tbody tr:hover, [data-theme="dark"] .row-total, [data-theme="dark"] .filter-bar, [data-theme="dark"] .notes-block, [data-theme="dark"] .agent-response, [data-theme="dark"] .chat-history, [data-theme="dark"] .draft-card { background: var(--color-bg-mute) !important; color: var(--color-text) !important; } [data-theme="dark"] .badge-gray { background: var(--color-bg-mute) !important; color: var(--color-text-soft) !important; } /* === Alertes : on adoucit les fonds clairs des warnings/info === */ [data-theme="dark"] .alert-warning { background: var(--color-warning-bg) !important; color: var(--color-warning) !important; border-color: var(--color-warning) !important; } [data-theme="dark"] .alert-info { background: var(--color-info-bg) !important; color: var(--color-info) !important; border-color: var(--color-info) !important; } [data-theme="dark"] .alert-success { background: var(--color-success-bg) !important; color: var(--color-success) !important; border-color: var(--color-success) !important; } [data-theme="dark"] .alert-danger, [data-theme="dark"] .alert-error { background: var(--color-danger-bg) !important; color: var(--color-danger) !important; border-color: var(--color-danger) !important; } /* === navigation_editor.css === */ [data-theme="dark"] .nav-tree, [data-theme="dark"] .nav-preview, [data-theme="dark"] .icon-picker, [data-theme="dark"] .nav-editor-modal-box, [data-theme="dark"] .nav-perm-row, [data-theme="dark"] .nav-node-label-input, [data-theme="dark"] .nav-field-input, [data-theme="dark"] .nav-field-select { background: var(--color-bg-soft) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .nav-node-target, [data-theme="dark"] .icon-picker-item, [data-theme="dark"] .nav-editor-tab:hover:not(.active), [data-theme="dark"] .nav-node.disabled, [data-theme="dark"] .nav-perm-row.disabled { background: var(--color-bg-mute) !important; color: var(--color-text-soft) !important; } [data-theme="dark"] .nav-action-btn:hover { background: var(--color-bg-mute) !important; color: var(--color-text) !important; border-color: var(--color-border-strong) !important; } /* === settings-redesign.css === */ [data-theme="dark"] .settings-tabs-modern, [data-theme="dark"] .settings-section-card .field-help, [data-theme="dark"] .settings-live-preview { background: var(--color-bg-mute) !important; color: var(--color-text) !important; } [data-theme="dark"] .settings-tab-btn-active, [data-theme="dark"] .settings-section-card, [data-theme="dark"] .settings-section-card .field textarea { background: var(--color-bg-soft) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* === v2-modals.css === */ [data-theme="dark"] .v2-modal, [data-theme="dark"] .v2-btn-secondary, [data-theme="dark"] .v2-textarea { background: var(--color-bg-soft) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .v2-btn-secondary:hover { background: var(--color-bg-mute) !important; } /* ============================================================ v1.3 - Hierarchie visuelle : utilisation du niveau "elevated" Les modales, dropdowns, tooltips doivent etre plus clairs que les cartes pour donner une sensation de profondeur. ============================================================ */ /* Modales : niveau 3 (elevated) avec ombre marquee */ [data-theme="dark"] .modal, [data-theme="dark"] .v2-modal, [data-theme="dark"] .nav-editor-modal-box { background: var(--color-bg-elevated) !important; box-shadow: var(--shadow-xl); border: 1px solid var(--color-border-strong); } /* Headers de modale : un cran au-dessus encore pour separer du body */ [data-theme="dark"] .modal-header { border-bottom: 1px solid var(--color-border); } [data-theme="dark"] .modal-footer { border-top: 1px solid var(--color-border); background: var(--color-bg-soft); } /* Backdrop : un peu plus opaque pour mieux isoler la modale */ [data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.75) !important; } /* Dropdowns / select ouverts (option, datalist) : niveau elevated */ [data-theme="dark"] select option, [data-theme="dark"] datalist option { background: var(--color-bg-elevated); color: var(--color-text); } /* Topbar / page-header : un cran plus clair que le body global pour creer une separation visuelle avec le contenu */ [data-theme="dark"] .topbar, [data-theme="dark"] .page-header { background: var(--color-bg-soft) !important; border-bottom: 1px solid var(--color-border); } /* Cartes "stat-card" : leger contraste avec le body */ [data-theme="dark"] .stat-card { background: var(--color-bg-soft) !important; border: 1px solid var(--color-border); } [data-theme="dark"] .stat-card:hover { background: var(--color-bg-mute) !important; border-color: var(--color-border-strong); } /* Tables : header un cran plus sombre que les lignes */ [data-theme="dark"] .table thead, [data-theme="dark"] .data-table thead { background: var(--color-bg) !important; /* fond global = plus sombre */ border-bottom: 1px solid var(--color-border-strong); } [data-theme="dark"] .table, [data-theme="dark"] .data-table { background: var(--color-bg-soft) !important; } [data-theme="dark"] .table tbody tr:hover, [data-theme="dark"] .data-table tbody tr:hover { background: var(--color-bg-mute) !important; } /* Inputs : fond plus sombre que les cartes (effet "creuse") */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] textarea.form-input, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="search"], [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--color-bg) !important; /* plus sombre = creuse */ border: 1px solid var(--color-border) !important; color: var(--color-text) !important; } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { background: var(--color-bg-mute) !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(224, 51, 78, 0.15); outline: none; } /* Boutons : leur fond = niveau bg-mute (visible sur fond bg-soft) */ [data-theme="dark"] .btn { background: var(--color-bg-mute) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } [data-theme="dark"] .btn:hover { background: var(--color-bg-elevated) !important; border-color: var(--color-border-strong) !important; } /* Sidebar user footer : niveau soft (separation visuelle) */ [data-theme="dark"] .sidebar-user { background: var(--color-bg) !important; /* fond global = se demarque de la sidebar */ border-top: 1px solid var(--color-border-strong) !important; } /* Sidebar items actifs : leger fond accent */ [data-theme="dark"] .nav-item.active, [data-theme="dark"] .sidebar .nav-item.active { background: var(--color-primary-light) !important; color: var(--color-primary) !important; border-left: 3px solid var(--color-primary); } /* Onglets de page (filtres "Photos / Notes / Voice / Documents") : non actif = bg-mute, actif = primary */ [data-theme="dark"] .tab-button, [data-theme="dark"] [role="tab"] { background: var(--color-bg-mute); color: var(--color-text-soft); border: 1px solid var(--color-border); } [data-theme="dark"] .tab-button.active, [data-theme="dark"] [role="tab"][aria-selected="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* Cartes principales : bordure fine pour les detacher du fond */ [data-theme="dark"] .card { background: var(--color-bg-soft) !important; border: 1px solid var(--color-border); } [data-theme="dark"] .card:hover { border-color: var(--color-border-strong); } /* Badges : varier les niveaux selon leur type */ [data-theme="dark"] .badge { background: var(--color-bg-mute); color: var(--color-text); border: 1px solid var(--color-border); } [data-theme="dark"] .badge.badge-default, [data-theme="dark"] .badge.badge-gray { background: var(--color-bg-mute); color: var(--color-text-soft); } [data-theme="dark"] .badge.badge-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); } [data-theme="dark"] .badge.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); } [data-theme="dark"] .badge.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); } [data-theme="dark"] .badge.badge-info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info); } /* === DARK_MODE_v1_5 : Burger flottant tres discret ================= Le burger ☰ flotte en haut a gauche. En clair il est blanc avec ombre subtile. En sombre, on le rend semi-transparent pour qu'il s'efface sur le fond. Il devient lisible au survol. ================================================================== */ [data-theme="dark"] .mdm-floating-burger { background: rgba(38, 40, 45, 0.4) !important; color: var(--color-text-soft) !important; border: 1px solid rgba(56, 58, 64, 0.3) !important; box-shadow: none !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } [data-theme="dark"] .mdm-floating-burger:hover { background: var(--color-bg-elevated) !important; color: var(--color-text) !important; border-color: var(--color-border-strong) !important; box-shadow: var(--shadow) !important; } /* === DARK_MODE_v1_5 : Scrollbars personnalisees ===================== En sombre : barre fine gris sombre sur fond transparent. Compatible WebKit (Chrome/Edge/Safari) + Firefox via scrollbar-*. Hover : barre plus visible. ================================================================== */ [data-theme="dark"] { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; } [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; } [data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; transition: background 0.15s; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); background-clip: padding-box; border: 2px solid transparent; } [data-theme="dark"] ::-webkit-scrollbar-corner { background: transparent; } /* === DARK_MODE_v1_7 : Navigation editor (~/admin/navigation) ========= Le fichier navigation_editor.css contient 74 couleurs hardcodees en clair. Plutot que de le refacto, on surcharge les classes les plus visibles en sombre via specificite [data-theme="dark"]. ===================================================================== */ /* Carte principale + colonnes */ [data-theme="dark"] .nav-editor-v2, [data-theme="dark"] .nav-tree, [data-theme="dark"] .nav-preview { background: var(--color-bg-soft) !important; color: var(--color-text); border-color: var(--color-border) !important; } /* Barre de recherche */ [data-theme="dark"] .nav-tree-search { background: var(--color-bg-mute) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .nav-tree-search input { background: var(--color-bg-mute) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .nav-tree-search input::placeholder { color: var(--color-text-mute) !important; } [data-theme="dark"] .nav-tree-search input:focus { border-color: var(--color-info) !important; background: var(--color-bg) !important; } [data-theme="dark"] .nav-tree-search-count { color: var(--color-text-soft) !important; } [data-theme="dark"] .nav-tree-empty { color: var(--color-text-soft) !important; background: var(--color-bg-mute) !important; } /* Lignes de section (PILOTAGE, ACHATS, etc.) - fond rose pale */ [data-theme="dark"] .nav-tree-section-header, [data-theme="dark"] .nav-node-row.depth-0 { background: var(--color-bg-mute) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .nav-node-row.depth-0:hover { background: var(--color-bg-elevated) !important; } /* Lignes d'items normales */ [data-theme="dark"] .nav-node { background: transparent !important; color: var(--color-text); border-color: var(--color-border) !important; } [data-theme="dark"] .nav-node:hover { background: var(--color-bg-mute) !important; } [data-theme="dark"] .nav-node.disabled { color: var(--color-text-mute) !important; } [data-theme="dark"] .nav-node.drop-target, [data-theme="dark"] .nav-node.drop-inside { background: var(--color-info-bg) !important; border-color: var(--color-info) !important; } [data-theme="dark"] .nav-node-label, [data-theme="dark"] .nav-node-handle, [data-theme="dark"] .nav-node-toggle { color: var(--color-text-soft) !important; } [data-theme="dark"] .nav-node-target { color: var(--color-text-mute) !important; } [data-theme="dark"] .nav-node-label-input { background: var(--color-bg-mute) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* Badges (page / section / SYSTEME / role-restricted / disabled) */ [data-theme="dark"] .nav-node-badge.system { background: var(--color-warning-bg) !important; color: var(--color-warning) !important; border-color: var(--color-warning) !important; } [data-theme="dark"] .nav-node-badge.role-restricted { background: var(--color-info-bg) !important; color: var(--color-info) !important; border-color: var(--color-info) !important; } [data-theme="dark"] .nav-node-badge.disabled-badge { background: var(--color-bg-mute) !important; color: var(--color-text-mute) !important; border-color: var(--color-border) !important; } /* Preview sidebar (carte droite) */ [data-theme="dark"] .nav-preview-header { background: var(--color-bg-mute) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .nav-preview-body { background: var(--color-bg-soft) !important; color: var(--color-text); } [data-theme="dark"] .nav-preview-section-title { color: var(--color-text-soft) !important; } [data-theme="dark"] .nav-preview-item { color: var(--color-text) !important; } [data-theme="dark"] .nav-preview-item:hover { background: var(--color-bg-mute) !important; } [data-theme="dark"] .nav-preview-empty { color: var(--color-text-soft) !important; } [data-theme="dark"] .nav-preview-role-select { background: var(--color-bg-mute) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .nav-preview-role-select option { background: var(--color-bg-elevated) !important; color: var(--color-text) !important; } /* Boutons d'action */ [data-theme="dark"] .nav-action-btn { background: var(--color-bg-mute) !important; color: var(--color-text-soft) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .nav-action-btn:hover { background: var(--color-bg-elevated) !important; color: var(--color-text) !important; } [data-theme="dark"] .nav-action-btn.danger:hover { background: var(--color-danger-bg) !important; color: var(--color-danger) !important; border-color: var(--color-danger) !important; } /* Banniere "non sauvegarde" */ [data-theme="dark"] .nav-unsaved-banner { background: var(--color-warning-bg) !important; color: var(--color-warning) !important; border-color: var(--color-warning) !important; } /* Modal d'edition d'item */ [data-theme="dark"] .nav-editor-modal-box { background: var(--color-bg-elevated) !important; color: var(--color-text) !important; border-color: var(--color-border-strong) !important; } [data-theme="dark"] .nav-editor-modal-header, [data-theme="dark"] .nav-editor-modal-footer { background: var(--color-bg-soft) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .nav-editor-modal-title { color: var(--color-text) !important; } [data-theme="dark"] .nav-editor-tabs { border-color: var(--color-border) !important; } [data-theme="dark"] .nav-editor-tab { color: var(--color-text-soft) !important; } [data-theme="dark"] .nav-editor-tab.active { color: var(--color-primary) !important; border-color: var(--color-primary) !important; } [data-theme="dark"] .nav-field-label { color: var(--color-text) !important; } [data-theme="dark"] .nav-field-help { color: var(--color-text-mute) !important; } [data-theme="dark"] .nav-field-select { background: var(--color-bg-mute) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .nav-field-select:focus { border-color: var(--color-info) !important; } /* Lignes de permissions */ [data-theme="dark"] .nav-perm-row { background: var(--color-bg-mute) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .nav-perm-row.disabled { opacity: 0.5; } [data-theme="dark"] .nav-perm-label { color: var(--color-text) !important; } /* Toggle slider */ [data-theme="dark"] .nav-toggle-slider { background: var(--color-border-strong) !important; } /* Icon picker (modal selection d'icones) */ [data-theme="dark"] .icon-picker { background: var(--color-bg-elevated) !important; color: var(--color-text) !important; border-color: var(--color-border-strong) !important; } [data-theme="dark"] .icon-picker-search { background: var(--color-bg-mute) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .icon-picker-category { color: var(--color-text-soft) !important; background: var(--color-bg-soft) !important; } [data-theme="dark"] .icon-picker-item { background: var(--color-bg-mute) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .icon-picker-item:hover { background: var(--color-bg-elevated) !important; border-color: var(--color-border-strong) !important; } [data-theme="dark"] .icon-picker-item.selected { background: var(--color-info-bg) !important; border-color: var(--color-info) !important; }