/* ============================================
   DARK MODE / MODE NUIT - Styles complets
   ============================================ */

/* === DARK MODE GLOBAL === */
body.dark-mode {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Note: Specific element rules below override this for proper color hierarchy */

/* === Headings - White text in dark mode, preserving exact styles === */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #ffffff !important; /* Headings white in dark mode */
}

/* === Headings LIGHT MODE - restent en couleur === */
body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) h5,
body:not(.dark-mode) h6 {
    color: inherit !important; /* Gardent leurs couleurs originales en light mode */
}

/* === Texte principal === */
body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode a:not([class*="btn"]) {
    color: #ffffff !important; /* Paragraphes en BLANC en dark mode */
}

/* === Lignes LIGHT MODE (par défaut) === */
/* Les paragraphes doivent être en NOIR en mode light */
body:not(.dark-mode) p,
body:not(.dark-mode) span,
body:not(.dark-mode) div {
    color: #000000 !important; /* Paragraphes en NOIR en light/white mode */
}

/* === Liens - restent en couleur dans les deux modes === */
body:not(.dark-mode) a:not([class*="btn"]),
body:not(.dark-mode) a:not([class*="btn"]):visited {
    color: #0d6efd !important; /* Bleu pour les liens en mode light */
}

body:not(.dark-mode) a:not([class*="btn"]):hover {
    color: #0b5cdb !important;
}

/* === Liens === */
body.dark-mode a:not([class*="btn"]),
body.dark-mode a:not([class*="btn"]):visited {
    color: #6cb5ff !important; /* Bleu clair pour les liens */
}

body.dark-mode a:not([class*="btn"]):hover {
    color: #90d4ff !important;
}

/* === Forms - Always white background with black text === */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #999999 !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* === Cards === */
body.dark-mode .card {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #3a3a3a !important;
}

/* === Tables === */
body.dark-mode table {
    color: #ffffff !important;
}

body.dark-mode table th {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #3a3a3a !important;
}

body.dark-mode table td {
    background-color: #222222 !important;
    color: #ffffff !important;
    border-color: #3a3a3a !important;
}

/* === Modals === */
body.dark-mode .modal-content {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

body.dark-mode .modal-header {
    border-color: #3a3a3a !important;
}

body.dark-mode .modal-footer {
    border-color: #3a3a3a !important;
}

/* === Alerts === */
body.dark-mode .alert {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #3a3a3a !important;
}

/* === Dropdowns === */
body.dark-mode .dropdown-menu {
    background-color: #2a2a2a !important;
}

body.dark-mode .dropdown-item {
    color: #ffffff !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* === Navbar === */
body.dark-mode .navbar {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #3a3a3a !important;
}

body.dark-mode .navbar-light .navbar-brand,
body.dark-mode .navbar-light .navbar-nav .nav-link {
    color: #ffffff !important;
}

/* === Toggle Button === */
#dark-mode-toggle {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
    border-color: #4a4a4a !important;
    transition: all 0.3s ease;
}

#dark-mode-toggle:hover {
    background-color: #4a4a4a !important;
    color: #ffd700 !important;
}

/* === Code blocks === */
body.dark-mode pre,
body.dark-mode code,
body.dark-mode .code-block {
    background-color: #2a2a2a !important;
    color: #e8e8e8 !important;
    border-color: #3a3a3a !important;
}

/* === Checkboxes, Radio buttons, File inputs === */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"],
body.dark-mode input[type="file"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
    accent-color: #0d6efd;
}

/* === Validation states === */
body.dark-mode .form-control.is-valid,
body.dark-mode .form-select.is-valid {
    border-color: #198754 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

body.dark-mode .form-control.is-invalid,
body.dark-mode .form-select.is-invalid {
    border-color: #dc3545 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* === Labels === */
body.dark-mode label {
    color: #ffffff !important;
}

body.dark-mode .form-text,
body.dark-mode .form-help,
body.dark-mode small {
    color: #cccccc !important;
}

/* === Pagination === */
body.dark-mode .pagination .page-link {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #3a3a3a !important;
}

body.dark-mode .pagination .page-link:hover {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* === Badges === */
body.dark-mode .badge {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

/* === HR / Dividers === */
body.dark-mode hr {
    border-color: #3a3a3a !important;
}

/* === Scrollbar === */
body.dark-mode::-webkit-scrollbar {
    width: 10px;
}

body.dark-mode::-webkit-scrollbar-track {
    background: #1a1a1a;
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 5px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
}

/* === Validation messages === */
body.dark-mode .valid-feedback,
body.dark-mode .invalid-feedback {
    color: #000000 !important;
    display: block;
    margin-top: 0.25rem;
}

body.dark-mode .valid-feedback {
    color: #198754 !important;
}

body.dark-mode .invalid-feedback {
    color: #dc3545 !important;
}

/* === Input groups === */
body.dark-mode .input-group-text {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
}

/* === Blockquotes === */
body.dark-mode blockquote {
    border-left-color: #6cb5ff !important; /* Light blue to match links */
    color: #000000 !important;
}

/* === Specific element visibility === */
body.dark-mode .bg-light {
    background-color: #2a2a2a !important;
}

body.dark-mode .text-dark {
    color: #ffffff !important;
}

body.dark-mode .border {
    border-color: #3a3a3a !important;
}