/* ================================================================================
   DARK MODE STYLES - VERSION REFACTORISÉE
   ================================================================================

   Ce fichier contient TOUTES les surcharges spécifiques au mode sombre.
   Utilise le système de variables CSS défini dans style.css

   SÉLECTEUR : [data-theme="dark"]

   SECTIONS :
   1. Sidebar & Navigation
   2. Zone de Chat
   3. Messages
   4. Inputs & Formulaires
   5. Code & Syntaxe
   6. Liens
   7. Pages Spécifiques (Agent Gallery, Workspace)
   8. Icônes & Actions
   9. Boutons
   10. Menus & Dropdowns
   11. Tables
   12. Utilitaires

   ================================================================================ */

/* ========================================
   1. SIDEBAR & NAVIGATION - Voir sidebar.css
   ========================================

   Tous les styles dark mode du sidebar ont été déplacés
   dans le fichier dédié sidebar.css pour une meilleure maintenabilité.

   Fichier : client/css/sidebar.css
   ======================================== */

/* Workspace left column - matching conversations sidebar styling */
[data-theme="dark"] .workspace-left-column {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-color: var(--border-color) !important;
}

/* ========================================
   2. ZONE DE CHAT
   ======================================== */

[data-theme="dark"] .conversation {
  background-color: var(--bg-chat);
  /* Dots are now handled by Canvas animation (dotted-background.js) - no CSS background needed */
}

/* Scrollbar dark mode pour la zone de messages */
[data-theme="dark"] .conversation #messages::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

[data-theme="dark"] .conversation #messages::-webkit-scrollbar-thumb {
  background: rgba(249, 228, 121, 0.3);
  border-radius: 10px;
}

[data-theme="dark"] .conversation #messages::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 228, 121, 0.5);
}

/* ========================================
   3. MESSAGES
   ======================================== */

[data-theme="dark"] .message-user .content {
  background-color: var(--bg-card);
}

[data-theme="dark"] .message-assistant .content {
  background-color: transparent;
}

/* ========================================
   4. INPUTS & FORMULAIRES
   ======================================== */

/* Chat input - fix white background */
[data-theme="dark"] #box-input,
[data-theme="dark"] #message-input,
[data-theme="dark"] .chat-textarea {
  background-color: transparent !important;
  color: var(--text-primary);
}

/* Tous les inputs et textareas */
[data-theme="dark"] .conversation .user-input input,
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"] {
  color: var(--text-primary);
  background: transparent !important;
}

/* Placeholders */
[data-theme="dark"] .conversation .user-input input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] #message-input::placeholder,
[data-theme="dark"] .chat-textarea::placeholder {
  color: var(--text-muted);
}

/* Input box wrapper */
[data-theme="dark"] .input-box {
  border-color: var(--border-color);
}

[data-theme="dark"] .input-box:focus-within {
  border-color: var(--accent-primary);
}

/* Bouton copier organisation ID */
[data-theme="dark"] .copy-org-btn {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .copy-org-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-color-strong);
  color: var(--text-primary);
}

[data-theme="dark"] .copy-org-btn.copied {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: rgba(249, 228, 121, 0.15);
}

/* Chat textarea scrollbar */
[data-theme="dark"] #message-input::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-textarea::-webkit-scrollbar-thumb {
  background: rgba(249, 228, 121, 0.3);
}

[data-theme="dark"] #message-input::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .chat-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 228, 121, 0.5);
}

/* Chat input wrapper (modern chat bar) */
[data-theme="dark"] .chat-input-wrapper {
  background: var(--glass-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--glass-shadow) !important;
}

[data-theme="dark"] .chat-input-wrapper::before {
  background: transparent !important;
}

/* ========================================
   5. CODE & SYNTAXE
   ======================================== */

[data-theme="dark"] pre {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
}

[data-theme="dark"] code {
  color: var(--text-primary);
}

/* Note : Les couleurs de syntaxe highlight.js (Dracula theme)
   sont intentionnellement hardcodées pour le dark mode */

/* ========================================
   6. LIENS
   ======================================== */

[data-theme="dark"] a {
  color: var(--accent-primary);
}

[data-theme="dark"] a:hover {
  color: var(--accent-secondary);
}

/* ========================================
   7. PAGES SPÉCIFIQUES
   ======================================== */

/* === AGENT GALLERY PAGE === */
/* ⚠️ DÉPLACÉ : Les styles dark mode de l'Agent Gallery sont maintenant
   dans agent-gallery.css avec le système de variables CSS locales.

   Architecture : Un fichier par composant avec variables qui s'adaptent au thème.
   Fichier : client/css/agent-gallery.css
   ======================================== */

/* === WORKSPACE PAGE === */

/* Dots are now handled by Canvas animation (dotted-background.js) - no CSS background needed */
[data-theme="dark"] .workspace-right-panel {
  background-color: var(--bg-chat);
}

/* Canvas is transparent - dots are handled by Canvas element (dotted-background.js) */
[data-theme="dark"] .workspace-canvas {
  background: transparent !important;
}

/* Workspace header */
[data-theme="dark"] .workspace-header {
  background: var(--bg-glass) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .workspace-header h1 {
  color: var(--text-primary);
}

/* Workspace buttons */
[data-theme="dark"] .workspace-btn {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .workspace-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--accent-primary);
}

/* Workspace scrollbar */
[data-theme="dark"] .workspace-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .workspace-container::-webkit-scrollbar-thumb {
  background: rgba(249, 228, 121, 0.3);
}

[data-theme="dark"] .workspace-container::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 228, 121, 0.5);
}

[data-theme="dark"] .workspace-container::-webkit-scrollbar-corner {
  background: rgba(255, 255, 255, 0.05);
}

/* Workspace card and document content */
[data-theme="dark"] .workspace-card {
  background: var(--glass-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .document-content {
  background: rgba(30, 30, 30, 0.8) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .document-title {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .document-body {
  color: var(--text-primary) !important;
}

/* Zoom controls */
[data-theme="dark"] .zoom-controls {
  background: rgba(38, 38, 36, 0.9) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .zoom-controls button {
  background: transparent !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .zoom-controls button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .zoom-controls span {
  color: var(--text-primary) !important;
}

/* ========================================
   WORKSPACE CARD COMPONENTS - DARK MODE
   ======================================== */

/**
 * Dark mode overrides for workspace card components
 * Fixes visibility issues with meta labels, dropdowns, and directory lists
 */

/* Meta labels (Catégorie, Dossier) - should be light in dark mode */
[data-theme="dark"] .workspace-card.card-text .meta-label,
[data-theme*="-dark"] .workspace-card.card-text .meta-label {
  color: rgba(245, 245, 240, 0.6) !important;
}

/* Custom dropdown - current selection */
[data-theme="dark"] .workspace-card.card-text .filing-select-current,
[data-theme*="-dark"] .workspace-card.card-text .filing-select-current {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .workspace-card.card-text .filing-select-current::after,
[data-theme*="-dark"] .workspace-card.card-text .filing-select-current::after {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .workspace-card.card-text .filing-select-current:hover,
[data-theme*="-dark"] .workspace-card.card-text .filing-select-current:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(249, 228, 121, 0.4) !important;
}

[data-theme="dark"] .workspace-card.card-text .filing-select-current:focus,
[data-theme*="-dark"] .workspace-card.card-text .filing-select-current:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(249, 228, 121, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(249, 228, 121, 0.15) !important;
}

/* Custom dropdown menu */
[data-theme="dark"] .workspace-card.card-text .filing-select-dropdown,
[data-theme*="-dark"] .workspace-card.card-text .filing-select-dropdown {
  background: rgba(38, 38, 36, 0.98) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Custom dropdown options */
[data-theme="dark"] .workspace-card.card-text .filing-dropdown-option,
[data-theme*="-dark"] .workspace-card.card-text .filing-dropdown-option {
  color: var(--text-primary) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .workspace-card.card-text .filing-dropdown-option:hover,
[data-theme*="-dark"] .workspace-card.card-text .filing-dropdown-option:hover {
  background: rgba(249, 228, 121, 0.15) !important;
}

[data-theme="dark"] .workspace-card.card-text .filing-dropdown-option.selected,
[data-theme*="-dark"] .workspace-card.card-text .filing-dropdown-option.selected {
  background: rgba(249, 228, 121, 0.25) !important;
}

/* Custom dropdown scrollbar */
[data-theme="dark"] .workspace-card.card-text .filing-select-dropdown::-webkit-scrollbar-track,
[data-theme*="-dark"] .workspace-card.card-text .filing-select-dropdown::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .workspace-card.card-text .filing-select-dropdown::-webkit-scrollbar-thumb,
[data-theme*="-dark"] .workspace-card.card-text .filing-select-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .workspace-card.card-text .filing-select-dropdown::-webkit-scrollbar-thumb:hover,
[data-theme*="-dark"] .workspace-card.card-text .filing-select-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Legacy filing select dropdown background and options */
[data-theme="dark"] .workspace-card.card-text .filing-select,
[data-theme*="-dark"] .workspace-card.card-text .filing-select {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .workspace-card.card-text .filing-select:hover,
[data-theme*="-dark"] .workspace-card.card-text .filing-select:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(249, 228, 121, 0.4) !important;
}

[data-theme="dark"] .workspace-card.card-text .filing-select:focus,
[data-theme*="-dark"] .workspace-card.card-text .filing-select:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(249, 228, 121, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(249, 228, 121, 0.15) !important;
}

/* Legacy filing select options - dark background in dark mode */
[data-theme="dark"] .workspace-card.card-text .filing-select option,
[data-theme*="-dark"] .workspace-card.card-text .filing-select option {
  background: #262624 !important;
  color: #f5f5f0 !important;
}

/* Category tag in dark mode */
[data-theme="dark"] .workspace-card.card-text .category-tag,
[data-theme*="-dark"] .workspace-card.card-text .category-tag {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .workspace-card.card-text .category-tag:hover,
[data-theme*="-dark"] .workspace-card.card-text .category-tag:hover {
  background: rgba(249, 228, 121, 0.15) !important;
}

[data-theme="dark"] .workspace-card.card-text .category-tag:focus,
[data-theme*="-dark"] .workspace-card.card-text .category-tag:focus {
  background: rgba(249, 228, 121, 0.2) !important;
  box-shadow: 0 0 0 2px rgba(249, 228, 121, 0.3) !important;
}

/* Repertoire items (directory list) - yellow tinted in dark mode */
[data-theme="dark"] .repertoire-item,
[data-theme*="-dark"] .repertoire-item {
  background: rgba(241, 196, 15, 0.15) !important;
  border-color: rgba(241, 196, 15, 0.4) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .repertoire-item:hover,
[data-theme*="-dark"] .repertoire-item:hover {
  background: rgba(241, 196, 15, 0.25) !important;
  border-color: rgba(241, 196, 15, 0.6) !important;
}

/* Collaboration indicator in dark mode */
[data-theme="dark"] .workspace-card.card-text .collaboration-indicator,
[data-theme*="-dark"] .workspace-card.card-text .collaboration-indicator {
  background: rgba(38, 38, 36, 0.95) !important;
  border-color: var(--border-color) !important;
}

/* ❌ SUPPRIMÉ : Styles dark mode des anciennes bulles vidéo YouTube
   Remplacés par le nouveau système de panneau sources unifié (sources.css) */

/* ========================================
   8. ICÔNES & ACTIONS
   ======================================== */

[data-theme="dark"] .copy-icon svg,
[data-theme="dark"] .like-icon svg,
[data-theme="dark"] .dislike-icon svg {
  stroke: var(--text-primary);
}

[data-theme="dark"] .copy-icon:hover svg,
[data-theme="dark"] .like-icon:hover svg,
[data-theme="dark"] .dislike-icon:hover svg {
  stroke: var(--accent-primary);
}

/* ========================================
   9. BOUTONS
   ======================================== */

/* Theme toggle button - Dark mode overrides */
[data-theme="dark"] .theme-toggle-btn,
[data-theme$="-dark"] .theme-toggle-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .theme-toggle-btn:hover,
[data-theme$="-dark"] .theme-toggle-btn:hover {
  background: rgba(38, 38, 36, 0.98);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Theme selector - Dark mode overrides */
[data-theme="dark"] .theme-selector-trigger,
[data-theme$="-dark"] .theme-selector-trigger {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .theme-selector-trigger:hover,
[data-theme$="-dark"] .theme-selector-trigger:hover {
  background: rgba(38, 38, 36, 0.98);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .theme-selector-panel,
[data-theme$="-dark"] .theme-selector-panel {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .theme-option:hover,
[data-theme$="-dark"] .theme-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .theme-option.active,
[data-theme$="-dark"] .theme-option.active {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05));
  border-left: 3px solid rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .theme-name,
[data-theme$="-dark"] .theme-name {
  color: var(--text-primary);
}

[data-theme="dark"] .theme-description,
[data-theme$="-dark"] .theme-description {
  color: var(--text-secondary);
}

/* Scrollbar dark mode */
[data-theme="dark"] .theme-selector-panel::-webkit-scrollbar-track,
[data-theme$="-dark"] .theme-selector-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .theme-selector-panel::-webkit-scrollbar-thumb,
[data-theme$="-dark"] .theme-selector-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .theme-selector-panel::-webkit-scrollbar-thumb:hover,
[data-theme$="-dark"] .theme-selector-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   CLASSE UTILITAIRE - BTN HONEY OUTLINED DARK MODE
   ======================================== */

[data-theme="dark"] .btn-honey-outlined {
  background-color: rgba(249, 228, 121, 0.1) !important;
  border: 1px solid rgba(199, 138, 30, 0.3) !important;
  color: #C78A1E !important;
}

[data-theme="dark"] .btn-honey-outlined:hover {
  background-color: rgba(249, 228, 121, 0.2) !important;
  border-color: rgba(199, 138, 30, 0.5) !important;
}

[data-theme="dark"] .btn-honey-outlined i,
[data-theme="dark"] .btn-honey-outlined svg,
[data-theme="dark"] .btn-honey-outlined .icon {
  color: #C78A1E !important;
}

/* ========================================
   SEND BUTTON - DARK MODE
   ======================================== */

/* ⚠️ DÉPRÉCIÉ : Les styles dark mode du bouton d'envoi sont maintenant dans send-button.css
   Ces styles sont conservés en commentaire pour référence historique.

[data-theme="dark"] #send-button,
[data-theme="dark"] .send-button {
  background-color: rgba(249, 228, 121, 0.1) !important;
  border: 1px solid rgba(199, 138, 30, 0.3) !important;
  color: #C78A1E !important;
}

[data-theme="dark"] #send-button:hover,
[data-theme="dark"] .send-button:hover {
  background-color: rgba(249, 228, 121, 0.2) !important;
  border-color: rgba(199, 138, 30, 0.5) !important;
}

[data-theme="dark"] #send-button i,
[data-theme="dark"] .send-button i {
  color: #C78A1E !important;
}
*/

/* Jina Search button in dark mode */
[data-theme="dark"] #jina-search-btn img {
  filter: invert(1) brightness(0.9);
}

/* ========================================
   10. MENUS & DROPDOWNS
   ======================================== */

/* Dropdown menu principal */
[data-theme="dark"] .dropdown-menu {
  background: var(--glass-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--glass-shadow) !important;
}

[data-theme="dark"] .dropdown-menu::before {
  background: linear-gradient(135deg,
      rgba(249, 228, 121, 0.05) 0%,
      rgba(249, 228, 121, 0.01) 50%,
      rgba(249, 228, 121, 0.03) 100%) !important;
}

/* Dropdown items */
[data-theme="dark"] .dropdown-item {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .dropdown-item i {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item-title {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item-subtitle {
  color: var(--text-secondary);
}

/* User menu */
[data-theme="dark"] .user-menu {
  background: var(--glass-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--glass-shadow) !important;
}

[data-theme="dark"] .user-email {
  color: var(--text-secondary);
}

[data-theme="dark"] .user-role {
  color: var(--text-tertiary);
}

[data-theme="dark"] .user-avatar-large {
  /* Dark mode: light gray background */
  background: #444442;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

[data-theme="dark"] .menu-separator {
  background: var(--border-color);
}

/* Menu items */
[data-theme="dark"] .menu-item {
  color: var(--text-primary);
}

[data-theme="dark"] .menu-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .menu-item i,
[data-theme="dark"] .menu-item span {
  color: var(--text-primary);
}

/* Dark mode géré automatiquement par les variables CSS --red-btn-* */

/* Settings navigation items */
[data-theme="dark"] .settings-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .settings-nav-item.active {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .submenu-trigger .fa-chevron-right {
  color: var(--text-muted);
}

/* User profile section - Voir sidebar.css pour les styles dark mode du sidebar */

/* ========================================
   11. TABLES
   ======================================== */

/* Table headers et cells */
[data-theme="dark"] th,
[data-theme="dark"] td {
  color: var(--text-primary) !important;
}

/* Table hover - subtle effect */
[data-theme="dark"] tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  transform: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] tbody tr:hover td {
  font-weight: 400 !important;
  color: var(--text-primary) !important;
}

/* Remove blur effect on other rows */
[data-theme="dark"] tbody:hover tr:not(:hover) {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Table background */
[data-theme="dark"] table {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] thead {
  background: rgba(255, 255, 255, 0.05);
}

/* Alternating rows */
[data-theme="dark"] tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* Borders */
[data-theme="dark"] th {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] td {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* ========================================
   12. UTILITAIRES
   ======================================== */

[data-theme="dark"] .bg-white {
  background: var(--bg-sidebar) !important;
}

[data-theme="dark"] .text-black {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .border-gray {
  border-color: var(--border-color) !important;
}

/* Modals & Overlays */
[data-theme="dark"] .modal,
[data-theme="dark"] .dialog {
  background: var(--bg-sidebar);
  border-color: var(--border-color);
}

[data-theme="dark"] .overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* Dark mode géré automatiquement par les variables CSS --red-btn-* */

/* ========================================
   13. WORKSPACE SELECTORS & DROPDOWNS
   ======================================== */

/**
 * Dark mode styles for workspace select dropdowns
 * Fixes visibility issues with white text on white background
 * Supports both standard dark mode and theme variants
 */

/* Workspace left column selectors */
[data-theme="dark"] .workspace-select,
[data-theme*="-dark"] .workspace-select {
  background: var(--glass-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .workspace-select:hover,
[data-theme*="-dark"] .workspace-select:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--accent-primary) !important;
}

[data-theme="dark"] .workspace-select:focus,
[data-theme*="-dark"] .workspace-select:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 2px rgba(249, 228, 121, 0.2) !important;
}

/* Select option elements - browser native styling */
[data-theme="dark"] .workspace-select option,
[data-theme*="-dark"] .workspace-select option {
  background: #262624 !important;
  color: #f5f5f0 !important;
  padding: 8px 12px !important;
}

/* Mascot selectors (center workspace welcome section) */
[data-theme="dark"] .mascot-select,
[data-theme*="-dark"] .mascot-select {
  background: var(--glass-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .mascot-select:hover,
[data-theme*="-dark"] .mascot-select:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--accent-primary) !important;
}

[data-theme="dark"] .mascot-select:focus,
[data-theme*="-dark"] .mascot-select:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 2px rgba(249, 228, 121, 0.2) !important;
}

[data-theme="dark"] .mascot-select option,
[data-theme*="-dark"] .mascot-select option {
  background: #262624 !important;
  color: #f5f5f0 !important;
  padding: 8px 12px !important;
}

/* Example task items in mascot welcome section */
[data-theme="dark"] .example-task-item,
[data-theme*="-dark"] .example-task-item {
  background: var(--glass-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .example-task-item:hover,
[data-theme*="-dark"] .example-task-item:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--accent-primary) !important;
}

[data-theme="dark"] .example-task-title,
[data-theme*="-dark"] .example-task-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .example-task-subtitle,
[data-theme*="-dark"] .example-task-subtitle {
  color: var(--text-secondary) !important;
}

/* Mascot stats card */
[data-theme="dark"] .mascot-stats-card,
[data-theme*="-dark"] .mascot-stats-card {
  background: var(--glass-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .stat-label,
[data-theme*="-dark"] .stat-label {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .stat-value,
[data-theme*="-dark"] .stat-value {
  color: var(--text-primary) !important;
}

/* ========================================
   14. FLOATING CARD MENU
   ======================================== */

/**
 * Dark mode styles for floating card menu
 * Fixes white background and white icons issue
 */
[data-theme="dark"] .floating-card-menu,
[data-theme*="-dark"] .floating-card-menu {
  background: var(--glass-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--glass-shadow) !important;
}

[data-theme="dark"] .floating-card-menu .menu-action,
[data-theme*="-dark"] .floating-card-menu .menu-action {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .floating-card-menu .menu-action i,
[data-theme*="-dark"] .floating-card-menu .menu-action i {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .floating-card-menu .menu-action:hover,
[data-theme*="-dark"] .floating-card-menu .menu-action:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .floating-card-menu .menu-action.active,
[data-theme*="-dark"] .floating-card-menu .menu-action.active {
  background: rgba(249, 228, 121, 0.2) !important;
  color: var(--accent-primary) !important;
}

[data-theme="dark"] .floating-card-menu .menu-action.active i,
[data-theme*="-dark"] .floating-card-menu .menu-action.active i {
  color: var(--accent-primary) !important;
}

[data-theme="dark"] .floating-card-menu .menu-action[data-action="delete"]:hover,
[data-theme*="-dark"] .floating-card-menu .menu-action[data-action="delete"]:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
}

[data-theme="dark"] .floating-card-menu .menu-action[data-action="delete"]:hover i,
[data-theme*="-dark"] .floating-card-menu .menu-action[data-action="delete"]:hover i {
  color: #ef4444 !important;
}

/* ========================================
   15. PLUS MENU DROPDOWN (WORKSPACE)
   ======================================== */

/**
 * Dark mode styles for the plus button dropdown menu
 */
[data-theme="dark"] #plusMenu,
[data-theme*="-dark"] #plusMenu {
  background: var(--glass-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--glass-shadow) !important;
}

[data-theme="dark"] #plusMenu .dropdown-item,
[data-theme*="-dark"] #plusMenu .dropdown-item {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #plusMenu .dropdown-item i,
[data-theme*="-dark"] #plusMenu .dropdown-item i {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #plusMenu .dropdown-item:hover,
[data-theme*="-dark"] #plusMenu .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] #plusMenu .dropdown-item-title,
[data-theme*="-dark"] #plusMenu .dropdown-item-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #plusMenu .dropdown-item-subtitle,
[data-theme*="-dark"] #plusMenu .dropdown-item-subtitle {
  color: var(--text-secondary) !important;
}

/* ========================================
   16. CARD TYPE SELECTOR MODAL
   ======================================== */

/**
 * Dark mode for add card dropdown menu
 */
[data-theme="dark"] .add-card-menu,
[data-theme*="-dark"] .add-card-menu {
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .add-card-item,
[data-theme*="-dark"] .add-card-item {
  color: var(--text-primary);
}

[data-theme="dark"] .add-card-item i,
[data-theme*="-dark"] .add-card-item i {
  color: var(--text-secondary);
}

[data-theme="dark"] .add-card-item:hover:not(.disabled),
[data-theme*="-dark"] .add-card-item:hover:not(.disabled) {
  background: rgba(249, 228, 121, 0.15);
}

/* ========================================
   FIN DU FICHIER DARK MODE

   Pour ajouter de nouveaux styles dark mode :

   [data-theme="dark"] .votre-classe {
     propriété: var(--variable-css);
   }
   ======================================== */