/**
 * Mode Sombre - Styles CSS Complet et Robuste
 * Cette feuille de styles applique les styles du mode sombre
 * quand la classe "dark" est présente sur l'élément html
 * 
 * Cette version couvre ALL les éléments et utilise !important pour garantir l'application
 */

/* ========== TRANSITIONS ========== */
html.no-transitions,
html.no-transitions *,
html.no-transitions *::before,
html.no-transitions *::after {
    transition: none !important;
    animation: none !important;
}

/* ========== RACINE ========== */
html.dark {
    color-scheme: dark;
    background-color: #111827 !important;
    color: #f3f4f6 !important;
}

/* ========== CORPS DE PAGE ========== */
html.dark body,
html.dark main,
html.dark section,
html.dark article,
html.dark aside,
html.dark nav,
html.dark div,
html.dark *:not(svg):not(path) {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
}

/* ========== BLOCS BLANCS ========== */
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-gray-200,
html.dark .bg-gray-300,
html.dark [style*="background: #fff"],
html.dark [style*="background:#fff"],
html.dark [style*="background-color: #fff"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background: white"],
html.dark [style*="background:white"],
html.dark [style*="background-color: white"],
html.dark [style*="background-color:white"] {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

/* ========== CARTES ET CONTENEURS ========== */
html.dark .card,
html.dark .modal,
html.dark .dialog,
html.dark .container,
html.dark .rounded-lg,
html.dark .rounded-xl,
html.dark .rounded-2xl {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

/* ========== TEXTE - NIVEAUX GRIS ========== */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: #e5e7eb !important;
}

html.dark .text-gray-400,
html.dark .text-gray-300 {
    color: #9ca3af !important;
}

html.dark .text-gray-200,
html.dark .text-gray-100 {
    color: #d1d5db !important;
}

html.dark [style*="color: #000"],
html.dark [style*="color:#000"],
html.dark [style*="color: black"],
html.dark [style*="color:black"] {
    color: #e5e7eb !important;
}

html.dark [style*="color: #333"],
html.dark [style*="color:#333"] {
    color: #d1d5db !important;
}

html.dark [style*="color: #666"],
html.dark [style*="color:#666"] {
    color: #9ca3af !important;
}

/* ========== TITRES ========== */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: #f3f4f6 !important;
}

/* ========== TEXTE SÉMANTIQUE ========== */
html.dark strong,
html.dark b {
    color: #f3f4f6 !important;
}

html.dark small,
html.dark .text-sm,
html.dark .text-xs {
    color: #d1d5db !important;
}

html.dark em,
html.dark i {
    color: #e5e7eb !important;
}

/* ========== BORDURES ========== */
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-gray-400,
html.dark [style*="border: 1px solid #ddd"],
html.dark [style*="border: 1px solid #e0e0e0"],
html.dark [style*="border-color: #ddd"],
html.dark [style*="border-color:#ddd"] {
    border-color: #374151 !important;
}

html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #374151 !important;
}

html.dark .border {
    border-color: #374151 !important;
}

/* ========== OMBRES ========== */
html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
}

/* ========== FORMULAIRES ========== */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark textarea,
html.dark select,
html.dark [type="text"],
html.dark [type="email"],
html.dark [type="password"],
html.dark [type="number"],
html.dark [type="date"],
html.dark [type="time"] {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #9ca3af !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    background-color: #4b5563 !important;
    border-color: #818cf8 !important;
    outline: none !important;
}

html.dark input[type="checkbox"],
html.dark input[type="radio"] {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    accent-color: #818cf8 !important;
}

html.dark input[type="range"] {
    accent-color: #818cf8 !important;
}

/* ========== TABLEAUX ========== */
html.dark table,
html.dark .table {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

html.dark table thead,
html.dark table th,
html.dark .table thead,
html.dark .table-header {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

html.dark table tbody tr,
html.dark table td,
html.dark .table tbody tr,
html.dark .table td {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

html.dark table tbody tr:hover,
html.dark .table tbody tr:hover {
    background-color: #2d3748 !important;
}

html.dark table tr:nth-child(even),
html.dark .table-striped tbody tr:nth-of-type(even) {
    background-color: #111827 !important;
}

/* ========== LIENS ========== */
html.dark a,
html.dark .link {
    color: #818cf8 !important;
    text-decoration: none !important;
}

html.dark a:hover,
html.dark .link:hover {
    color: #a78bfa !important;
}

html.dark a:visited {
    color: #a78bfa !important;
}

/* ========== COULEURS SÉMANTIQUES ========== */
html.dark .text-red-600,
html.dark .text-red-700 {
    color: #f87171 !important;
}

html.dark .text-green-600,
html.dark .text-green-700 {
    color: #4ade80 !important;
}

html.dark .text-blue-600,
html.dark .text-blue-700 {
    color: #60a5fa !important;
}

html.dark .text-yellow-600,
html.dark .text-yellow-700 {
    color: #facc15 !important;
}

html.dark .text-amber-600,
html.dark .text-amber-700 {
    color: #fbbf24 !important;
}

html.dark .text-purple-600,
html.dark .text-purple-700 {
    color: #c084fc !important;
}

html.dark .text-indigo-600,
html.dark .text-indigo-700 {
    color: #818cf8 !important;
}

html.dark .text-pink-600,
html.dark .text-pink-700 {
    color: #ec4899 !important;
}

html.dark .text-orange-600,
html.dark .text-orange-700 {
    color: #fb923c !important;
}

/* ========== FONDS COLORÉS ========== */
html.dark .bg-red-50 {
    background-color: #7f1d1d !important;
    color: #fecaca !important;
}

html.dark .bg-green-50 {
    background-color: #051f27 !important;
    color: #dcfce7 !important;
}

html.dark .bg-blue-50,
html.dark .bg-indigo-50 {
    background-color: #0f172a !important;
    color: #c7d2fe !important;
}

html.dark .bg-yellow-50,
html.dark .bg-amber-50 {
    background-color: #78280f !important;
    color: #fef08a !important;
}

html.dark .bg-purple-50 {
    background-color: #2d1b4e !important;
    color: #e9d5ff !important;
}

html.dark .bg-pink-50 {
    background-color: #500724 !important;
    color: #fbcfe8 !important;
}

html.dark .bg-orange-50 {
    background-color: #7c2d12 !important;
    color: #fed7aa !important;
}

/* ========== ALERTES ET MESSAGES ========== */
html.dark .alert,
html.dark .notification,
html.dark .toast,
html.dark .message,
html.dark [role="alert"] {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

html.dark .alert-success,
html.dark .bg-green-100 {
    background-color: #051f27 !important;
    border-color: #166534 !important;
    color: #dcfce7 !important;
}

html.dark .alert-danger,
html.dark .alert-error,
html.dark .bg-red-100 {
    background-color: #7f1d1d !important;
    border-color: #991b1b !important;
    color: #fecaca !important;
}

html.dark .alert-warning,
html.dark .bg-yellow-100 {
    background-color: #78280f !important;
    border-color: #b45309 !important;
    color: #fef08a !important;
}

html.dark .alert-info,
html.dark .bg-blue-100 {
    background-color: #0f172a !important;
    border-color: #1e3a8a !important;
    color: #bfdbfe !important;
}

/* ========== BOUTONS ========== */
html.dark button,
html.dark .btn,
html.dark input[type="button"],
html.dark input[type="submit"],
html.dark input[type="reset"] {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

html.dark button:hover,
html.dark .btn:hover {
    background-color: #4b5563 !important;
}

html.dark button:focus,
html.dark .btn:focus {
    outline: 2px solid #818cf8 !important;
    outline-offset: 2px !important;
}

html.dark button[disabled],
html.dark .btn:disabled {
    background-color: #1f2937 !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
}

/* ========== DROPDOWNS/MENUS ========== */
html.dark .dropdown-menu,
html.dark [role="menu"],
html.dark .menu,
html.dark .context-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

html.dark .dropdown-menu a,
html.dark [role="menuitem"] {
    color: #e5e7eb !important;
    background-color: #1f2937 !important;
}

html.dark .dropdown-menu a:hover,
html.dark [role="menuitem"]:hover {
    background-color: #374151 !important;
    color: #a78bfa !important;
}

/* ========== BADGES ET TAGS ========== */
html.dark .badge,
html.dark .tag,
html.dark .label {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
}

/* ========== CODE ========== */
html.dark code,
html.dark pre,
html.dark .code,
html.dark [class*="language-"] {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

html.dark code {
    background-color: #374151 !important;
    color: #f87171 !important;
}

/* ========== LISTES ========== */
html.dark ul,
html.dark ol,
html.dark li {
    color: #f3f4f6 !important;
}

html.dark li::marker {
    color: #9ca3af !important;
}

/* ========== HR/SÉPARATEURS ========== */
html.dark hr {
    border-color: #374151 !important;
}

/* ========== BLOCKQUOTE ========== */
html.dark blockquote {
    color: #d1d5db !important;
    border-left-color: #4b5563 !important;
}

/* ========== DATATABLES ========== */
html.dark .dt-container,
html.dark .dataTables_wrapper {
    color: #f3f4f6 !important;
}

html.dark .dataTables_length select,
html.dark .dataTables_filter input {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

html.dark .dataTables_paginate .paginate_button {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

html.dark .dataTables_paginate .paginate_button.current,
html.dark .dataTables_paginate .paginate_button:hover {
    background-color: #4b5563 !important;
    color: #f3f4f6 !important;
    border-color: #6b7280 !important;
}

html.dark table.dataTable {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

html.dark table.dataTable thead th {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

html.dark table.dataTable tbody tr {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

html.dark table.dataTable tbody tr:hover {
    background-color: #2d3748 !important;
}

html.dark table.dataTable.stripe tbody tr.odd {
    background-color: #111827 !important;
}

/* ========== PASSWORD TOGGLE ========== */
html.dark .password-toggle {
    color: #9ca3af !important;
}

html.dark .password-toggle:hover {
    color: #d1d5db !important;
}

html.dark .password-toggle.text-indigo-600 {
    color: #818cf8 !important;
}

/* ========== HEADER ========== */
html.dark header {
    background-color: #1f2937 !important;
    border-bottom-color: #374151 !important;
}

html.dark .dropdown-toggle {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
}

html.dark .dropdown-toggle:hover {
    background-color: #4b5563 !important;
}

/* ========== FOOTER ========== */
html.dark footer {
    background-color: #1f2937 !important;
    border-top-color: #374151 !important;
    color: #f3f4f6 !important;
}

/* ========== PROGRESSBAR ========== */
html.dark .progress {
    background-color: #374151 !important;
}

html.dark .progress-bar {
    background-color: #818cf8 !important;
}

/* ========== MODALES/DIALOGUES ========== */
html.dark .modal,
html.dark .dialog,
html.dark [role="dialog"] {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

html.dark .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ========== TOOLTIP ========== */
html.dark .tooltip {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

/* ========== CAROUSEL/SLIDER ========== */
html.dark .carousel,
html.dark .slider {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark .carousel-control,
html.dark .slider-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #f3f4f6 !important;
}

/* ========== COLLAPSE/ACCORDION ========== */
html.dark .collapse,
html.dark .accordion {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark .collapse-header,
html.dark .accordion-header {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
}

html.dark .collapse-content,
html.dark .accordion-content {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

/* ========== NAVIGATEUR ========== */
html.dark nav,
html.dark .navbar {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark nav a,
html.dark .navbar a {
    color: #d1d5db !important;
}

html.dark nav a:hover,
html.dark .navbar a:hover {
    color: #818cf8 !important;
}

/* ========== BADGES DE RÔLE ========== */
html.dark .badge-user { 
    background-color: #6b7280 !important;
    color: #fff !important;
}

html.dark .badge-moderator { 
    background-color: #0891b2 !important;
    color: #fff !important;
}

html.dark .badge-admin { 
    background-color: #dc2626 !important;
    color: #fff !important;
}

html.dark .badge-super-admin { 
    background: linear-gradient(135deg, #b8860b 0%, #daa520 100%) !important;
    color: #000 !important;
    font-weight: 700 !important;
    border: 1px solid #f59e0b !important;
}

/* ========== BADGE DE NOTIFICATIONS ========== */
html.dark #notification-badge {
    background-color: #dc2626 !important;
    color: #fff !important;
}

/* ========== AUTRES BADGES ========== */
html.dark .badge-status-en-cours { 
    background-color: #818cf8 !important;
    color: #fff !important;
}

html.dark .badge-status-en-pause { 
    background-color: #fbbf24 !important;
    color: #000 !important;
}

html.dark .badge-status-terminée { 
    background-color: #4ade80 !important;
    color: #000 !important;
}

html.dark .badge-forfeit { 
    background-color: #fb923c !important;
    color: #fff !important;
}

html.dark .badge-draw { 
    background-color: #d8b4fe !important;
    color: #000 !important;
}

html.dark .badge-scored { 
    background-color: #4ade80 !important;
    color: #000 !important;
}

html.dark .badge-success { 
    background-color: #4ade80 !important;
    color: #000 !important;
}

html.dark .badge-warning { 
    background-color: #fbbf24 !important;
    color: #000 !important;
}

html.dark .badge-defeat { 
    background-color: #94a3b8 !important;
    color: #fff !important;
}

html.dark .badge-info {
    background-color: #3b82f6 !important;
    color: #fff !important;
}

html.dark .badge-error,
html.dark .badge-danger {
    background-color: #dc2626 !important;
    color: #fff !important;
}

/* ========== CONTENEUR GÉNÉRIQUE ========== */
html.dark [class*="box"],
html.dark [class*="card"],
html.dark [class*="panel"],
html.dark [class*="section"] {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

/* ========== RÈGLE FINALE - RATTRAPAGE UNIVERSEL ========== */
html.dark * {
    background-color: inherit !important;
    color: inherit !important;
}

/* Exceptions pour les SVG et images */
html.dark svg,
html.dark svg * {
    background-color: unset !important;
}

html.dark img {
    background-color: transparent !important;
}