/* Dark Mode Styles */
html.dark-mode {
    background-color: #1a202c !important;
    color: #e2e8f0; /* Default text color */
}

/* General Text Elements */
html.dark-mode p,
html.dark-mode span,
html.dark-mode div,
html.dark-mode strong,
html.dark-mode a {
    color: inherit; /* Inherit default dark mode text color */
}

/* More specific text classes */
html.dark-mode .text-dark,
html.dark-mode .font-weight-bolder,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .h1,
html.dark-mode .h2,
html.dark-mode .h3,
html.dark-mode .h4,
html.dark-mode .h5,
html.dark-mode .h6 {
    color: #fff !important;
}

html.dark-mode .text-body,
html.dark-mode .text-sm {
    color: #e2e8f0 !important;
}

html.dark-mode .text-secondary {
    color: #a0aec0 !important;
}

html.dark-mode .text-muted {
    color: #718096 !important;
}

/* Form Labels */
html.dark-mode .form-label {
    color: #e2e8f0 !important; /* Light color for labels in dark mode */
}

/* General Labels (for modals without form-label class) */
html.dark-mode label {
    color: #e2e8f0 !important; /* Light color for labels in dark mode */
}

html.dark-mode .modal-body strong {
    color: #e2e8f0 !important; /* Light color for strong tags in dark mode */
}

/* Links */
html.dark-mode a:not(.btn) {
    color: #63b3ed !important; /* A brighter color for links */
}

html.dark-mode a:not(.btn):hover {
    color: #90cdf4 !important;
}

/* General Backgrounds */
html.dark-mode .bg-white,
html.dark-mode .bg-gray-100 {
    background-color: #1a202c !important;
}

/* --- Sidebar --- */
html.dark-mode #sidenav-main {
    background: #2d3748 !important;
}

/* General Nav Link */
html.dark-mode #sidenav-main .nav-link {
    color: #a0aec0;
}
html.dark-mode #sidenav-main .nav-link .nav-link-text {
    color: #a0aec0;
}

/* Hover on non-active links */
html.dark-mode #sidenav-main .nav-link:hover:not(.active) {
    background-color: rgba(74, 85, 104, 0.4);
}

/* Active Nav Link */
html.dark-mode #sidenav-main .nav-link.active {
    background-color: #4a5568;
}
html.dark-mode #sidenav-main .nav-link.active .nav-link-text {
    color: #fff !important;
}

/* Icon container (.icon-shape) */
html.dark-mode #sidenav-main .icon-shape {
    background-color: transparent !important; /* Override bg-white, make it transparent */
}

/* Icon color inside container */
html.dark-mode #sidenav-main .icon-shape i {
    color: #a0aec0 !important;
}
html.dark-mode #sidenav-main .icon-shape svg {
    fill: #a0aec0 !important;
}

/* Active link's icon container and icon */
html.dark-mode #sidenav-main .nav-link.active .icon-shape {
    background-image: linear-gradient(310deg, #cb0c9f 0%, #9c16c7 100%);
}
html.dark-mode #sidenav-main .nav-link.active .icon-shape i,
html.dark-mode #sidenav-main .nav-link.active .icon-shape svg {
    color: #fff !important;
    fill: #fff !important;
}

/* Sub-menu icons */
html.dark-mode #sidenav-main .sidenav-mini-icon i {
    color: #a0aec0 !important;
}
html.dark-mode #sidenav-main .nav-link.active .sidenav-mini-icon i {
    color: #fff !important;
}

/* Horizontal rule */
html.dark-mode #sidenav-main hr.horizontal.dark {
    background-image: linear-gradient(
        to right,
        rgba(226, 232, 240, 0),
        #e2e8f0,
        rgba(226, 232, 240, 0)
    ) !important;
}
/* --- End Sidebar --- */

/* Navbar */
html.dark-mode .navbar-main,
html.dark-mode .navbar.bg-white,
html.dark-mode #navbarBlur {
    background-color: #2d3748 !important;
    box-shadow: none !important;
}

/* Cards */
html.dark-mode .card {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;

    border: 1px solid #4a5568 !important; /* Added border for dark mode cards */
}
html.dark-mode .card .card-header {
    background-color: #2d3748;
    border-bottom: 1px solid #4a5568;
}

/* Tables */
html.dark-mode .table {
    color: #e2e8f0;
}
html.dark-mode .table thead th {
    border-bottom: 1px solid #4a5568;
    color: #a0aec0;
}
html.dark-mode .table > :not(caption) > * > * {
    background-color: #2d3748 !important;
    border-color: #4a5568;
    color: #e2e8f0 !important;
}

/* Forms */
html.dark-mode .form-control {
    background-color: #4a5568 !important;
    color: #fff !important;
    border-color: #4a5568 !important;
}
html.dark-mode .input-group-text {
    background-color: #4a5568;
    border-color: #4a5568;
}

/* Fixed Plugin (Settings Cog) */
html.dark-mode .fixed-plugin .card {
    background: #2d3748 !important;
}

/* Icons */
html.dark-mode .theme-icon-dark {
    display: none;
}
html.dark-mode .theme-icon-light {
    display: inline;
}
.theme-icon-light {
    display: none;
}

/* Other */
html.dark-mode .bg-transparent {
    background-color: transparent !important;
}

/* --- Style des modales (Popups) en Dark Mode --- */

/* Contenu principal de la modale */
html.dark-mode .modal-content {
    background-color: #2d3748; /* Le gris foncé principal de votre thème */
    color: #e2e8f0; /* Texte clair pour le contraste */
    border: 1px solid #4a5568; /* Une bordure subtile */
}

/* En-tête de la modale (où il y a le titre) */
html.dark-mode .modal-header {
    border-bottom-color: #4a5568; /* Ligne de séparation assortie */
}

/* Pied de page de la modale (où il y a les boutons) */
html.dark-mode .modal-footer {
    border-top-color: #4a5568;
}

/* Adapte le bouton "Fermer" (la croix) pour qu'il soit visible sur fond sombre */
html.dark-mode .modal-header .btn-close {
    filter: invert(1) grayscale(100);
}

/* --- Corrections spécifiques pour les cartes "Journal" et "Factures" --- */

/* Assure que les éléments de liste à l'intérieur des cartes ont un fond sombre */
html.dark-mode .list-group-item {
    background-color: #2d3748 !important; /* Utilise le même gris foncé que le fond de la carte */
    color: #e2e8f0; /* Texte clair pour la lisibilité */
    border-color: #4a5568 !important; /* Ajuste la couleur des bordures */
}

/* Surcharge la classe 'text-dark' pour qu'elle devienne claire en mode sombre */
html.dark-mode .text-dark {
    color: #e2e8f0 !important; /* Rend le texte blanc/clair */
}

/* Surcharge spécifique pour les titres h6 qui utilisent 'text-dark' */
html.dark-mode h6.text-dark {
    color: #e2e8f0 !important;
}

/* Correction spécifique pour le texte "Admin" (titre de poste) dans la carte de profil */
html.dark-mode p.font-weight-bold {
    color: #e2e8f0 !important; /* Force la couleur du texte en clair pour le mode sombre */
}

/* Style de la section "Besoin d'aide?" dans la barre latérale en mode sombre */

/* Texte "Consultez les docs" */
html.dark-mode .sidenav-footer .docs-info p.text-xs {
    color: #e2e8f0 !important; /* Rend le texte clair */
}

/* Bouton "Documentation" */
html.dark-mode .sidenav-footer .btn-white {
    background-color: #4a5568 !important; /* Fond gris foncé pour le bouton */
    color: #fff !important; /* Texte blanc */
    border-color: #4a5568 !important; /* Bordure assortie */
}

/* --- Transition Douce --- */

/* --- HR Dashboard --- */
html.dark-mode .card-title i {
    color: #fff !important;
}

/* --- HR Leave Requests --- */
html.dark-mode .leave-card {
    border: 1px solid #4a5568;
}

html.dark-mode .avatar.bg-light {
    background-color: #4a5568 !important;
}

html.dark-mode .avatar.bg-light i {
    color: #e2e8f0 !important;
}

/* --- Employee Mini Card (HR) --- */
html.dark-mode .employee-mini-card {
    background: #2d3748 !important; /* Dark background */
    border: 1px solid #4a5568 !important; /* Dark border */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24) !important; /* Darker shadow */
}

html.dark-mode .employee-mini-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.48) !important; /* Darker shadow on hover */
    border-color: #63b3ed !important; /* Highlight border on hover */
}

html.dark-mode .employee-title {
    color: #e2e8f0 !important; /* Light text for title */
}

html.dark-mode .employee-sub {
    color: #a0aec0 !important; /* Lighter text for subtitle */
}

html.dark-mode .card-kebab {
    color: #a0aec0 !important; /* Light color for kebab icon */
}

html.dark-mode .card-kebab:hover {
    background: #4a5568 !important; /* Darker background on hover */
    color: #fff !important; /* White color on hover */
}

html.dark-mode .meta-row {
    border: 1px dashed #4a5568 !important; /* Darker dashed border */
    background: #2d3748 !important; /* Dark background */
    color: #e2e8f0 !important; /* Light text */
}

html.dark-mode .meta-row:hover {
    background: #4a5568 !important; /* Darker background on hover */
}

html.dark-mode .btn-icon {
    background: #4a5568 !important; /* Dark background for icons */
    border-color: #4a5568 !important; /* Dark border for icons */
    color: #e2e8f0 !important; /* Light color for icons */
}

html.dark-mode .btn-icon:hover {
    background: #63b3ed !important; /* Lighter background on hover */
    border-color: #63b3ed !important; /* Lighter border on hover */
    color: #fff !important; /* White color on hover */
}