/* ========== الوضع الداكن العام ========== */
body.dark-mode .table-wrap,
body.dark-mode {
    background-color: #121212 !important;
    color: #ffffff !important;
    transition: background-color 0.3s, color 0.3s !important;
}

/* ========== عناصر عامة ========== */
body.dark-mode a,
body.dark-mode span,
body.dark-mode p,
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6,
body.dark-mode .tab-pane,
body.dark-mode .nav-link {
    color: #ffffff !important;
    
}

/* ========== Navbar ========== */
body.dark-mode .tab-pane,
body.dark-mode .navbar {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important;
}

body.dark-mode .navbar-toggler-icon {
    filter: invert(1) !important;
}

/* ========== sidenav ========== */

body.dark-mode .sidenav {
    background: linear-gradient(60deg, #2c2c54, #1e1e2f) !important;
    color: #fff;
}

body.dark-mode .sidenav ul li a {
    color: #fff !important;
}

body.dark-mode .sidenav ul li a:hover {
    background-color: #444 !important;
}

/* ========== Footer ========== */

body.dark-mode .footer {
    background-color: #1e1e1e !important;
    color: #fff !important;
}

/* ========== Buttons ========== */
body.dark-mode .btn-outline-dark {
    border-color: #fff !important;
    color: #fff !important;
    transition: all 0.3s !important;
}

body.dark-mode .btn-outline-dark:hover {
    background-color: #fff !important;
    color: #121212 !important;
}

/* ========== Forms & Inputs ========== */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}

body.dark-mode input::placeholder {
    color: #bbb !important;
}

/* ========== Dropdown Menus ========== */
body.dark-mode .dropdown-menu {
    background-color: #222 !important;
    border: 1px solid #444 !important;
}

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

body.dark-mode .dropdown-item:hover {
    background-color: #444 !important;
}

/* ========== Tables ========== */
body.dark-mode table,
body.dark-mode th,
body.dark-mode td,
body.dark-mode tr,
body.dark-mode tfoot {
    background-color: #1e1e1e !important;
    color: #fff !important;
    border-color: #444 !important;
}

body.dark-mode table.dataTable tbody tr:hover,
body.dark-mode table.dataTable tbody tr:hover > td {
    background-color: #434343 !important;
}

body.dark-mode table.dataTable tbody tr.selected,
body.dark-mode table.dataTable tbody tr.selected > * {
    background-color: #49475e !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 9999px #49475e !important;
}

/* ========== Select2 ========== */
body.dark-mode .select2-selection--single {
    background-color: #2c2f33 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

body.dark-mode .select2-results__option {
    background-color: #2c2f33 !important;
    color: #fff !important;
}

body.dark-mode .select2-results__option--highlighted[aria-selected] {
    background-color: #5865F2 !important;
    color: #fff !important;
}

body.dark-mode .select2-search__field {
    background-color: #23272a !important;
    color: #fff !important;
}

body.dark-mode .select2-selection__arrow b {
    border-color: #fff transparent transparent transparent !important;
}

body.dark-mode .select2-selection__rendered {
    color: #fff !important;
}

/* ========== Modals ========== */
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background-color: #222 !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* ========== Login Page ========== */
.login-container {
    max-width: 400px;
    margin: 80px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

body.dark-mode .login-container {
    background-color: #1e1e1e;
    color: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
}

body.dark-mode .card {
    background-color: #1e1e1e !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255,255,255,0.1) !important;
}

body.dark-mode .card .card-body {
    background-color: #1e1e1e !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(150, 29, 29, 0.1) !important;
    border: #121212 !important;
    
}
/* تخصيص الواجهة في الوضع الداكن */
.dark-datepicker {
    background-color: #2c2c2c !important; /* خلفية غامقة */
    color: #fff !important; /* النص أبيض */
    border: 1px solid #555 !important;
}

/* ألوان أيام الشهر */
.dark-datepicker .ui-datepicker-calendar td a {
    color: #fff !important;
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #c5c5c5 !important;
    background: #2c2c2c !important; 
    font-weight: normal !important;
    color: #fff !important;
}

/* ألوان العناوين (الشهر والسنة) */
.dark-datepicker .ui-datepicker-title {
    color: #fff !important;
}

/* ألوان أزرار التالي والسابق */
.dark-datepicker .ui-datepicker-prev span,
.dark-datepicker .ui-datepicker-next span {
    filter: invert(1); /* يعكس اللون عشان يبان */
}
/* ========== Centered Form Floating Labels ========== */
.form-floating input {
    text-align: center;
}

.form-floating label {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}

/* ========== Modal Position ========== */
.modal-dialog {
    margin-top: 100px;
}