/* Theme toggle button styling */
.btn-toggle-theme {
    background-color: #f8f9fa;
    color: #333;
    border: none;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn-toggle-theme:hover {
        background-color: #e2e6ea;
    }

    .btn-toggle-theme .theme-icon {
        font-size: 1.2rem;
        display: none;
    }

/* Light mode: show sun */
html:not(.dark-mode) .btn-toggle-theme .sun {
    display: inline;
}

/* Dark mode: show moon */
html.dark-mode .btn-toggle-theme {
    background-color: #343a40;
    color: #f8f9fa;
}

    html.dark-mode .btn-toggle-theme .moon {
        display: inline;
    }
/* Add this to your main.css or site CSS */
.dark-mode .card {
    background-color: #23272b !important;
    color: #fff !important;
    border-color: #222 !important;
}

.dark-mode .card-header {
    background-color: #23272b !important;
    color: #fff !important;
}

.dark-mode .card-body {
    background-color: #23272b !important;
    color: #fff !important;
}
.dark-mode .text-muted {
    color: #b0b3b8 !important; /* or any light gray you prefer */
}
/***********begin table dark mode***********/

.dark-mode .table {
    background-color: #23272b !important;
    color: #fff !important;
}

    .dark-mode .table th,
    .dark-mode .table td {
        background-color: #23272b !important;
        color: #fff !important;
        border-color: #444 !important;
    }

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2c3035 !important;
}

.dark-mode .table-bordered {
    border-color: #444 !important;
}
/*******end table dark mode***************/
/*******start modal dark mode***************/

.dark-mode .modal-content {
    background-color: #23272b !important;
    color: #fff !important;
    border-color: #444 !important;
}

.dark-mode .modal-header,
.dark-mode .modal-footer {
    background-color: #23272b !important;
    color: #fff !important;
    border-color: #444 !important;
}

.dark-mode .modal-body {
    background-color: #23272b !important;
    color: #fff !important;
}
/*******end modal dark mode***************/
/*******start input dark mode***************/
.dark-mode .form-custom input,
.dark-mode .form-custom textarea,
.dark-mode .form-custom select {
    color: #fff !important;
    background-color: #23272b !important;
    border-color: #444 !important;
    
}
    .dark-mode .form-custom input::placeholder,
    .dark-mode .form-custom textarea::placeholder,
    .dark-mode .form-custom select::placeholder {
        color: #b0b3b8 !important; /* Light gray for dark mode */
        opacity: 1 !important; /* Ensures full opacity */
    }
/*******end end dark mode***************/