/*
 * =============================================
 * SYSTÈME DE MODE SOMBRE COMPLET - TIME-ECOS
 * =============================================
 * 
 * Ce fichier contient tous les styles nécessaires pour le mode sombre.
 * Il peut être supprimé en un seul fichier si le mode sombre ne convient pas.
 * 
 * Classes disponibles :
 * - .theme-light : Force le mode clair
 * - .theme-dark : Force le mode sombre  
 * - .theme-system : Utilise les préférences système
 */

/* ===========================================
   VARIABLES CSS POUR LE MODE SOMBRE
   =========================================== */

/* Mode sombre forcé (classe .theme-dark) */
:root.theme-dark {
  --bg:      #0b1220 !important; /* Fond principal sombre */
  --bg-alt:  #1a2332 !important; /* Fond alternatif sombre */
  --surface: #0f172a !important; /* Surfaces sombres */
  --text:    #e5e7eb !important; /* Texte principal clair */
  --muted:   #94a3b8 !important; /* Texte secondaire */
  --line:    #1f2937 !important; /* Bordures/séparateurs */

  /* Les couleurs de marque (--brand, --accent, etc.) restent celles de theme.css */

  /* Badges sombres */
  --badge-muted-bg: color-mix(in srgb, var(--muted) 18%, var(--surface) 82%) !important;
  --badge-muted-fg: color-mix(in srgb, var(--muted) 88%, white 12%) !important;

  /* Ombres adaptées au sombre */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5) !important;

  /* Titres sombres */
  --title-overlay: var(--brand) !important;
  --title-success: var(--success) !important;
  --title-main:    var(--brand) !important;
  --title-card:    var(--brand) !important;
  --title-tabs:    var(--accent) !important;
  --title-loading: var(--info) !important;

  /* Notifications & indicateurs */
  --auto-save: var(--info) !important;

  color-scheme: dark !important;
}

/* Mode sombre système (classe .theme-system + préférences navigateur) */
:root.theme-system {
  color-scheme: light dark !important;
}

@media (prefers-color-scheme: dark) {
  :root.theme-system {
    --bg:      #0b1220 !important;
    --bg-alt:  #1a2332 !important;
    --surface: #0f172a !important;
    --text:    #e5e7eb !important;
    --muted:   #94a3b8 !important;
    --line:    #1f2937 !important;

    /* Les couleurs de marque restent celles de theme.css */

    --badge-muted-bg: color-mix(in srgb, var(--muted) 18%, var(--surface) 82%) !important;
    --badge-muted-fg: color-mix(in srgb, var(--muted) 88%, white 12%) !important;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5) !important;

    --title-overlay: var(--brand) !important;
    --title-success: var(--success) !important;
    --title-main:    var(--brand) !important;
    --title-card:    var(--brand) !important;
    --title-tabs:    var(--accent) !important;
    --title-loading: var(--info) !important;

    --auto-save: var(--info) !important;
  }
}

/* Mode clair forcé (classe .theme-light) utilise directement les variables de theme.css */

/* ===========================================
   STYLES SPÉCIFIQUES POUR LE MODE SOMBRE
   =========================================== */

/* Ombre dynamique du fond synchronisé avec la navbar (sans modifier la navbar) */
.theme-dark body,
.theme-system body {
  --site-bg-shade-alpha: 0.06; /* intensité par défaut du voile */
}

.theme-dark body.site-bg-accent,
.theme-system body.site-bg-accent {
  background: linear-gradient(0deg, rgba(0,0,0,var(--site-bg-shade-alpha)) 0%, rgba(0,0,0,var(--site-bg-shade-alpha)) 100%), color-mix(in srgb, var(--accent) 14%, var(--surface) 86%) !important;
}
.theme-dark body.site-bg-success,
.theme-system body.site-bg-success {
  background: linear-gradient(0deg, rgba(0,0,0,var(--site-bg-shade-alpha)) 0%, rgba(0,0,0,var(--site-bg-shade-alpha)) 100%), color-mix(in srgb, var(--success) 14%, var(--surface) 86%) !important;
}
.theme-dark body.site-bg-warning,
.theme-system body.site-bg-warning {
  background: linear-gradient(0deg, rgba(0,0,0,var(--site-bg-shade-alpha)) 0%, rgba(0,0,0,var(--site-bg-shade-alpha)) 100%), color-mix(in srgb, var(--warning) 14%, var(--surface) 86%) !important;
}
.theme-dark body.site-bg-info,
.theme-system body.site-bg-info {
  background: linear-gradient(0deg, rgba(0,0,0,var(--site-bg-shade-alpha)) 0%, rgba(0,0,0,var(--site-bg-shade-alpha)) 100%), color-mix(in srgb, var(--info) 14%, var(--surface) 86%) !important;
}
.theme-dark body.site-bg-error,
.theme-system body.site-bg-error {
  background: linear-gradient(0deg, rgba(0,0,0,var(--site-bg-shade-alpha)) 0%, rgba(0,0,0,var(--site-bg-shade-alpha)) 100%), color-mix(in srgb, var(--danger) 14%, var(--surface) 86%) !important;
}

/* Variante forte en sombre (utilisée par la page chrono) */
.theme-dark body.site-bg-strong.site-bg-accent,
.theme-system body.site-bg-strong.site-bg-accent {
  background: linear-gradient(0deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.10) 100%), color-mix(in srgb, var(--accent) 24%, var(--surface) 76%) !important;
}
.theme-dark body.site-bg-strong.site-bg-success,
.theme-system body.site-bg-strong.site-bg-success {
  background: linear-gradient(0deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.10) 100%), color-mix(in srgb, var(--success) 24%, var(--surface) 76%) !important;
}
.theme-dark body.site-bg-strong.site-bg-warning,
.theme-system body.site-bg-strong.site-bg-warning {
  background: linear-gradient(0deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.10) 100%), color-mix(in srgb, var(--warning) 24%, var(--surface) 76%) !important;
}
.theme-dark body.site-bg-strong.site-bg-info,
.theme-system body.site-bg-strong.site-bg-info {
  background: linear-gradient(0deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.10) 100%), color-mix(in srgb, var(--info) 24%, var(--surface) 76%) !important;
}

/* Cartes: bloc "Actions du compte" plus adapté au sombre */
.theme-dark .actions-block,
.theme-system .actions-block {
  background: color-mix(in srgb, var(--surface) 92%, white 8%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}

/* Barre d'onglets (conteneur) en sombre */
.theme-dark .tab-buttons,
.theme-system .tab-buttons {
  background: color-mix(in srgb, var(--surface) 90%, white 10%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
}

/* Boutons d'onglet: fond et bord adaptés au sombre */
.theme-dark .tab-btn,
.theme-system .tab-btn {
  background: color-mix(in srgb, var(--surface) 92%, white 8%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--muted) !important;
}

/* Actif: conserve le remplissage accent et le texte blanc */
.theme-dark .tab-btn.active,
.theme-system .tab-btn.active {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

/* Titre principal plus lisible en sombre */
.theme-dark .main-title,
.theme-system .main-title {
  color: color-mix(in srgb, var(--title-main) 85%, white 15%) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45), 0 10px 30px rgba(0,0,0,0.35), 0 0 18px color-mix(in srgb, var(--brand) 24%, transparent);
}
.theme-dark .main-title::after,
.theme-system .main-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: .35rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .9;
}

/* Préférences de notification: libellé plus lisible */
.theme-dark #notifications-preferences-card .form-label,
.theme-system #notifications-preferences-card .form-label {
  color: color-mix(in srgb, var(--text) 92%, white 8%) !important;
  font-weight: 700 !important;
}
.theme-dark #notifications-preferences-card .form-row label,
.theme-system #notifications-preferences-card .form-row label {
  color: color-mix(in srgb, var(--text) 88%, white 12%) !important;
}

/* Accueil: lisibilité des listes de notifications admin (fond trop clair) */
.theme-dark #admin-notifs-list .notification-item,
.theme-system #admin-notifs-list .notification-item,
.theme-dark #owner-notifs-list .notification-item,
.theme-system #owner-notifs-list .notification-item {
  background: color-mix(in srgb, var(--surface) 94%, white 6%) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}

/* Admin > Chrono: conteneur de boutons (fond trop clair) */
.theme-dark #content-chrono .action-buttons,
.theme-system #content-chrono .action-buttons {
  background: color-mix(in srgb, var(--surface) 94%, white 6%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}

/* Boutons désactivés en sombre: éviter le gris trop clair */
.theme-dark .btn:disabled,
.theme-system .btn:disabled,
.theme-dark .btn.btn-disabled,
.theme-system .btn.btn-disabled,
.theme-dark .btn.btn-disabled:hover,
.theme-system .btn.btn-disabled:hover,
.theme-dark .btn.btn--danger:disabled,
.theme-system .btn.btn--danger:disabled {
  background: color-mix(in srgb, var(--surface) 85%, white 15%) !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,0.12) !important;
  opacity: 0.9 !important;
}

/* === Admin → Sessions (onglet) : fonds trop clairs → surfaces sombres === */
/* Sous-onglets pills */
.theme-dark #content-sessions .subtab-buttons,
.theme-system #content-sessions .subtab-buttons {
  background: color-mix(in srgb, var(--surface) 92%, white 8%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

.theme-dark #content-sessions .subtab-btn:hover,
.theme-system #content-sessions .subtab-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface) 92%) !important;
  color: var(--accent) !important;
}

.theme-dark #content-sessions .subtab-btn.active,
.theme-system #content-sessions .subtab-btn.active {
  background: color-mix(in srgb, var(--accent) 78%, var(--surface) 22%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* Dashboard – sous-onglets (content-results) en thème sombre */
.theme-dark #content-results .subtab-buttons,
.theme-system #content-results .subtab-buttons {
  background: color-mix(in srgb, var(--surface) 92%, white 8%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.theme-dark #content-results .subtab-btn:hover,
.theme-system #content-results .subtab-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface) 92%) !important;
  color: var(--accent) !important;
}
.theme-dark #content-results .subtab-btn.active,
.theme-system #content-results .subtab-btn.active {
  background: color-mix(in srgb, var(--accent) 78%, var(--surface) 22%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* Cartes d'action (Créer / Configurer…) */
.theme-dark #content-sessions .action-card,
.theme-system #content-sessions .action-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
}
.theme-dark #content-sessions .action-card:hover,
.theme-system #content-sessions .action-card:hover {
  background: var(--bg) !important;
}

/* Messages de chargement listés en sessions */
.theme-dark #content-sessions .loading-message,
.theme-system #content-sessions .loading-message {
  color: var(--muted) !important;
}

/* === Dashboard → Planning personnel === */
.theme-dark .participant-table-card,
.theme-system .participant-table-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}
.theme-dark .participant-table-card .pro-table thead th,
.theme-system .participant-table-card .pro-table thead th {
  background: color-mix(in srgb, var(--surface) 94%, white 6%) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
}
.theme-dark .pro-table tbody td,
.theme-system .pro-table tbody td {
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
}
.theme-dark .pro-table tbody tr:hover,
.theme-system .pro-table tbody tr:hover {
  background: var(--bg) !important;
}
.theme-dark .pro-table tbody tr.row-current-slot,
.theme-system .pro-table tbody tr.row-current-slot {
  background: color-mix(in srgb, var(--info) 14%, var(--surface) 86%) !important;
}
.theme-dark .pro-table tbody tr.row-next-slot,
.theme-system .pro-table tbody tr.row-next-slot {
  background: var(--surface) !important;
  outline-color: var(--line) !important;
}

/* Tableau “Salles disponibles” (et colonnes Salle) en sombre */
.theme-dark .participant-table .slot-room-header,
.theme-dark .participant-table .slot-room-cell,
.theme-system .participant-table .slot-room-header,
.theme-system .participant-table .slot-room-cell {
  color: var(--text) !important;
}
.theme-dark .room-info-trigger,
.theme-system .room-info-trigger {
  color: var(--text) !important;
}
.theme-dark .room-info-trigger:hover,
.theme-system .room-info-trigger:hover {
  text-decoration: underline;
}

/* Tableau Utilisateurs: atténuer le surlignage des lignes sélectionnées/hover */
.theme-dark #content-users .table-container tr:hover,
.theme-system #content-users .table-container tr:hover {
  background: color-mix(in srgb, var(--surface) 96%, white 4%) !important;
}
.theme-dark #content-users .table-container tr.selected,
.theme-system #content-users .table-container tr.selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%) !important;
}
/* Dashboard: groupe de boutons Accueil (fond trop clair) */
.theme-dark .action-buttons,
.theme-system .action-buttons {
  background: color-mix(in srgb, var(--surface) 94%, white 6%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}

/* Titres/étiquettes des groupes d'actions (admin) */
.theme-dark .actions-group-title,
.theme-system .actions-group-title,
.theme-dark #content-sessions .actions-grid .actions-group-title,
.theme-system #content-sessions .actions-grid .actions-group-title {
  color: color-mix(in srgb, var(--text) 92%, white 8%) !important;
}
/* Cartes Créneau actuel/suivant en sombre */
.theme-dark .slot-card,
.theme-system .slot-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
}
.theme-dark .slot-card.role-med,
.theme-dark .slot-card.role-eval,
.theme-dark .slot-card.role-ps,
.theme-system .slot-card.role-med,
.theme-system .slot-card.role-eval,
.theme-system .slot-card.role-ps {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.theme-dark .slot-card.role-free,
.theme-system .slot-card.role-free {
  background: color-mix(in srgb, var(--surface) 92%, white 8%) !important;
  border-color: var(--line) !important;
}
.theme-dark .slot-card.is-empty,
.theme-system .slot-card.is-empty {
  background: var(--surface) !important;
  color: var(--muted) !important;
}
/* === Navbar sombre, en conservant la dynamique === */
.theme-dark #main-navbar,
.theme-system #main-navbar {
  box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,0,0.25) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
.theme-dark #navbar-line2,
.theme-system #navbar-line2,
.theme-dark #navbar-line2-fixed,
.theme-system #navbar-line2-fixed {
  box-shadow: none !important;
}
/* Lumière interne subtile pour les pills de stats dans la navbar */
.theme-dark .navbar-pill,
.theme-system .navbar-pill {
  background: rgba(255,255,255,0.88) !important;
  color: #0b1720 !important;
  border-color: rgba(255,255,255,0.7) !important;
}
/* Page chrono - styles injectés en dur */
.theme-dark .chrono-shell,
.theme-system .chrono-shell {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Sous-onglets Configuration globale: assombrir les cartes d'action */
.theme-dark #rooms-tools-actions .action-card,
.theme-system #rooms-tools-actions .action-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
}

.theme-dark #station-bar,
.theme-system #station-bar {
  background: rgba(15, 23, 42, 0.92) !important; /* surface with opacity */
  backdrop-filter: blur(6px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.theme-dark #station-bar label,
.theme-system #station-bar label {
  color: var(--muted) !important;
}

/* Page amphi - alertes */
.theme-dark .amphi-alert,
.theme-system .amphi-alert {
  border-color: var(--warning) !important;
}

/* Corrections pour les éléments avec couleurs forcées */
.theme-dark [style*="background:rgba(255,255,255"],
.theme-system [style*="background:rgba(255,255,255"] {
  background: rgba(15, 23, 42, 0.92) !important;
}

.theme-dark [style*="color:#6b7280"],
.theme-system [style*="color:#6b7280"] {
  color: var(--muted) !important;
}

.theme-dark [style*="background-color: #f5f5f5"],
.theme-system [style*="background-color: #f5f5f5"] {
  background-color: var(--surface) !important;
}

/* Skeleton loaders en mode sombre */
.theme-dark .skeleton,
.theme-system .skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--line) 50%, var(--surface) 75%) !important;
  background-size: 200% 100% !important;
}

/* Tables en mode sombre */
.theme-dark .table th,
.theme-system .table th {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.theme-dark .table td,
.theme-system .table td {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Conteneurs de tableaux en admin (sombre) */
.theme-dark #main-admin-content .table-container,
.theme-system #main-admin-content .table-container {
  background: color-mix(in srgb, var(--surface) 96%, black 4%) !important;
  border-color: var(--line) !important;
}

.theme-dark .table tbody tr:hover,
.theme-system .table tbody tr:hover {
  background: var(--surface) !important;
}

/* Modales en mode sombre */
.theme-dark .modal-overlay,
.theme-system .modal-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
}

.theme-dark .modal,
.theme-dark .modal-content,
.theme-system .modal,
.theme-system .modal-content {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Modales génériques Time‑ECOS (te-modal-*) en sombre */
.theme-dark .te-modal-overlay,
.theme-system .te-modal-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
}
.theme-dark .te-modal-dialog,
.theme-system .te-modal-dialog {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* === Wizard d'inscription (regwiz) : badges et étapes en sombre === */
.theme-dark .regwiz-steps,
.theme-system .regwiz-steps {
  color: var(--muted) !important;
}
.theme-dark .regwiz-step,
.theme-system .regwiz-step {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%) !important;
  color: var(--text) !important;
}
.theme-dark .regwiz-step.is-active,
.theme-system .regwiz-step.is-active {
  background: color-mix(in srgb, var(--accent) 24%, var(--surface) 76%) !important;
  color: var(--text) !important;
}
.theme-dark .regwiz-step .badge,
.theme-system .regwiz-step .badge {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 20px;
  height: 20px;
  line-height: 1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 70%, var(--surface) 30%) !important;
  color: #fff !important;
}

/* Modales d'aide et tooltips “?” en sombre */
.theme-dark .help-modal,
.theme-system .help-modal {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.theme-dark .help-modal .help-modal-header,
.theme-system .help-modal .help-modal-header,
.theme-dark .help-modal .help-modal-footer,
.theme-system .help-modal .help-modal-footer {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.theme-dark .help-modal .help-modal-close,
.theme-system .help-modal .help-modal-close {
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
.theme-dark .help-icon .lucide-icon,
.theme-system .help-icon .lucide-icon {
  color: var(--muted) !important;
}
.theme-dark .help-tip,
.theme-system .help-tip {
  background: color-mix(in srgb, var(--accent) 24%, var(--surface) 76%) !important;
  color: var(--text) !important;
}
.theme-dark .help-tip:hover::after,
.theme-system .help-tip:hover::after,
.theme-dark .help-floating-tip,
.theme-system .help-floating-tip {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

/* Dropdowns des filtres (multi-select) en sombre */
.theme-dark .ms-drop,
.theme-system .ms-drop,
.theme-dark .multi-select .dropdown,
.theme-system .multi-select .dropdown,
.theme-dark .ms-panel,
.theme-system .ms-panel {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

/* --- Planning en modale: lisibilité en sombre --- */
.theme-dark #planning .planning-table--session thead th,
.theme-system #planning .planning-table--session thead th {
  background: color-mix(in srgb, var(--surface) 94%, black 6%) !important;
}
.theme-dark #planning .planning-table--session th:first-child,
.theme-dark #planning .planning-table--session td:first-child,
.theme-dark #planning .planning-table--session th:nth-child(2),
.theme-dark #planning .planning-table--session td:nth-child(2),
.theme-system #planning .planning-table--session th:first-child,
.theme-system #planning .planning-table--session td:first-child,
.theme-system #planning .planning-table--session th:nth-child(2),
.theme-system #planning .planning-table--session td:nth-child(2) {
  background: color-mix(in srgb, var(--surface) 92%, black 8%) !important;
}
.theme-dark #planning .planning-table--session:not(.planning-eval-mode) td.cell-filled:not(.cell-selected),
.theme-system #planning .planning-table--session:not(.planning-eval-mode) td.cell-filled:not(.cell-selected) {
  background: color-mix(in srgb, var(--filled-bg, var(--accent)) 24%, var(--surface) 76%) !important;
}
.theme-dark #planning .planning-table--session td.cell-selected,
.theme-system #planning .planning-table--session td.cell-selected {
  background: color-mix(in srgb, var(--filled-bg, var(--accent)) 38%, var(--surface) 62%) !important;
}
.theme-dark #planning .planning-table--session th,
.theme-dark #planning .planning-table--session td,
.theme-system #planning .planning-table--session th,
.theme-system #planning .planning-table--session td {
  border-color: color-mix(in srgb, var(--line) 85%, black 15%) !important;
  color: var(--text) !important;
}
.theme-dark .ms-drop li,
.theme-system .ms-drop li,
.theme-dark .multi-select .dropdown li,
.theme-system .multi-select .dropdown li {
  color: var(--text) !important;
}

/* Contraste zone Programmation du chronomètre (admin) */
.theme-dark #content-chrono .programming-section,
.theme-system #content-chrono .programming-section {
  color: var(--text) !important;
}
.theme-dark #content-chrono .programming-section .form-label,
.theme-system #content-chrono .programming-section .form-label {
  color: var(--text) !important;
}
.theme-dark #content-chrono .programming-section .form-help,
.theme-system #content-chrono .programming-section .form-help,
.theme-dark #content-chrono .programming-section .slot-hint,
.theme-system #content-chrono .programming-section .slot-hint {
  color: var(--muted) !important;
}
/* Navbar en mode sombre */
.theme-dark .navbar,
.theme-system .navbar {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.theme-dark .navbar-brand,
.theme-dark .nav-link,
.theme-system .navbar-brand,
.theme-system .nav-link {
  color: var(--text) !important;
}

.theme-dark .nav-link:hover,
.theme-system .nav-link:hover {
  color: var(--brand) !important;
  background: var(--bg) !important;
}

/* Onglets en mode sombre */
.theme-dark .tab-btn,
.theme-system .tab-btn {
  color: var(--muted) !important;
  border-color: transparent !important;
}

.theme-dark .tab-btn.active,
.theme-dark .tab-btn:hover,
.theme-system .tab-btn.active,
.theme-system .tab-btn:hover {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Cards et surfaces */
.theme-dark .card,
.theme-system .card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.theme-dark .card-gray,
.theme-system .card-gray {
  background: var(--bg) !important;
}

.theme-dark .card-body,
.theme-dark .card-header,
.theme-dark .card-title,
.theme-dark .card-subtitle,
.theme-system .card-body,
.theme-system .card-header,  
.theme-system .card-title,
.theme-system .card-subtitle {
  color: var(--text) !important;
}

.theme-dark .card-subtitle,
.theme-system .card-subtitle {
  color: var(--muted) !important;
}

/* Formulaires */
.theme-dark .form-input,
.theme-dark .form-select,
.theme-dark .form-textarea,
.theme-system .form-input,
.theme-system .form-select,
.theme-system .form-textarea {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.theme-dark .form-input:focus,
.theme-dark .form-select:focus,
.theme-dark .form-textarea:focus,
.theme-system .form-input:focus,
.theme-system .form-select:focus,
.theme-system .form-textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 1px var(--brand) !important;
}

.theme-dark .form-input::placeholder,
.theme-dark .form-textarea::placeholder,
.theme-system .form-input::placeholder,
.theme-system .form-textarea::placeholder {
  color: var(--muted) !important;
}

/* Boutons en mode sombre */
.theme-dark .btn,
.theme-system .btn {
  border-color: var(--line) !important;
}

.theme-dark .btn:hover,
.theme-system .btn:hover {
  box-shadow: var(--shadow-sm) !important;
}

/* Loading overlay */
.theme-dark .loading-overlay,
.theme-system .loading-overlay {
  background: rgb(11, 18, 32) !important;
}

.theme-dark .loading-content,
.theme-system .loading-content {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4) !important;
}

.theme-dark .loading-subtitle,
.theme-system .loading-subtitle {
  color: var(--muted) !important;
}

/* Notifications */
.theme-dark .notification,
.theme-system .notification {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Planning et calendrier */
.theme-dark .planning-cell,
.theme-dark .calendar-day,
.theme-system .planning-cell,
.theme-system .calendar-day {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.theme-dark .planning-cell:hover,
.theme-dark .calendar-day:hover,
.theme-system .planning-cell:hover,
.theme-system .calendar-day:hover {
  background: var(--bg) !important;
}

/* Scrollbar en mode sombre */
.theme-dark ::-webkit-scrollbar,
.theme-system ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.theme-dark ::-webkit-scrollbar-track,
.theme-system ::-webkit-scrollbar-track {
  background: var(--surface) !important;
}

.theme-dark ::-webkit-scrollbar-thumb,
.theme-system ::-webkit-scrollbar-thumb {
  background: var(--line) !important;
  border-radius: 4px;
}

.theme-dark ::-webkit-scrollbar-thumb:hover,
.theme-system ::-webkit-scrollbar-thumb:hover {
  background: var(--muted) !important;
}

/* ===========================================
   INTERFACE DU COMMUTATEUR DE THÈME
   =========================================== */

.theme-switcher {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

.theme-switcher-label {
  font-weight: 600;
  color: var(--text);
  margin-right: 0.5rem;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  min-width: 100px;
  justify-content: center;
}

.theme-option:hover {
  background: var(--surface);
  border-color: var(--brand);
}

.theme-option.active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

.theme-option input[type="radio"] {
  margin: 0;
  width: 16px;
  height: 16px;
}

.theme-option-icon {
  width: 18px;
  height: 18px;
}

.theme-option-text {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 640px) {
  .theme-switcher {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .theme-switcher-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .theme-option {
    min-width: unset;
    padding: 0.75rem 0.5rem;
    flex-direction: column;
    text-align: center;
  }
}

/* ===========================================
   CORRECTIONS POUR STYLES JS INJECTÉS
   =========================================== */

/* Corrections pour session-utils.js */
.theme-dark [style*="opacity: 0.6"],
.theme-system [style*="opacity: 0.6"] {
  opacity: 0.4 !important; /* Plus visible en mode sombre */
}

/* Corrections pour les styles en dur */
.theme-dark [style*="color: #666"],
.theme-dark [style*="color:#666"],
.theme-system [style*="color: #666"],
.theme-system [style*="color:#666"] {
  color: var(--muted) !important;
}

.theme-dark [style*="background: white"],
.theme-dark [style*="background:white"],
.theme-system [style*="background: white"],
.theme-system [style*="background:white"] {
  background: var(--surface) !important;
}

/* Corrections pour les couleurs de phase (planning.js) */
.theme-dark .phase-info,
.theme-dark .phase-success,  
.theme-dark .phase-alert,
.theme-dark .phase-accent,
.theme-system .phase-info,
.theme-system .phase-success,
.theme-system .phase-alert,
.theme-system .phase-accent {
  color: var(--text) !important;
  border-color: currentColor !important;
}

/* Auto-hide des contrôles - rendre plus visibles */
.theme-dark #amphi-floating-controls,
.theme-system #amphi-floating-controls {
  background: rgba(15, 23, 42, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem !important;
}

/* QR codes - améliorer la visibilité */
.theme-dark .card img[alt*="QR"],
.theme-system .card img[alt*="QR"] {
  background: white !important;
  padding: 0.25rem !important;
  border-radius: var(--radius) !important;
}

/* ===========================================
   TRANSITIONS ET ANIMATIONS
   =========================================== */

/* Transition douce lors du changement de thème */
:root {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
}

body,
.card,
.btn,
.form-input,
.form-select,
.modal,
.navbar {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
}

/* ===========================================
   PRINT ET MEDIA QUERIES SPÉCIALES
   =========================================== */

/* Forcer le mode clair en impression */
@media print {
  :root,
  :root.theme-dark,
  :root.theme-system {
    --bg: white !important;
    --surface: white !important;
    --text: black !important;
    --muted: #666 !important;
    --line: #ddd !important;
    color-scheme: light !important;
  }

  .theme-switcher {
    display: none !important;
  }
}

/* Haute résolution - améliorer les contrastes */
@media (min-resolution: 2dppx) {
  .theme-dark,
  .theme-system {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6) !important;
  }
}