/*Button action*/
.dt-button {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.buttons-html5,
.buttons-print {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
    box-shadow: none;
}

/*Image upload*/
.image-preview-area {
    display: inline-block;
    position: relative;
}

.image-preview-area .image-preview {
    margin-top: 10px;
    display: inline-block;
    width: 142px;
    height: 142px;
    background-position: center center;
    background-size: cover;
    /*background-color: #A8A8A8;*/
    /*border: 1px solid #eee;*/
}

.image-preview-area .image-preview img {
    /*border: 1px solid #eee;*/
    width: 140px;
    height: 100%;
    min-width: 100%;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    object-fit: cover;
}

.user-image {
    object-fit: cover;
}

.user-header img {
    object-fit: cover;
}

.user-panel .info img {
    width: 34px;
    height: 34px;
    object-fit: cover;
}

.image-preview-verify,
.image-preview-verify img {
    margin-top: 10px;
    position: relative;
}

.image-preview-verify img {
    z-index: 101;
}

.image-preview-verify img:first-child {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

.image-preview-area .delete-image-preview {
    background-color: #fff;
    line-height: 1em;
    font-size: 1.2em;
    position: absolute;
    top: 20px;
    right: 10px;
    display: none;
    cursor: pointer;
}

.image-preview-area .delete-image-preview.show {
    display: inline-block;
}

.image-preview-area .delete-image-preview i {
    border: solid 1px #fff;
    box-shadow: 0 0 8px #fff
}

.image-upload-label {
    color: #d9534f;
    display: block;
}

/* .login-page,
.register-page {
    background-color: #0093E9 !important;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%) !important;
} */

.login-card-body,
.register-card-body {
    border-radius: 10px;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.stepwizard-step p {
    margin-top: 10px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    /* z-order: 0; */
}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.btn-primary-modif {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
    box-shadow: none !important;
}

.border-only-bottom {
    border: 0 !important;
    border-bottom: 1px solid #ced4da !important;
}

.reload {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 9999999999999;
    background: #f1f2fc url(https://mir-s3-cdn-cf.behance.net/project_modules/disp/09b24e31234507.564a1d23c07b4.gif) no-repeat fixed center;
    opacity: 0.9;
}

input[type="checkbox"] {
    outline: 1px solid #000 !important;
}

/* Navbar locale: desktop = select (lg+); mobile/tablet = flag dropdown */
.locale-navbar-flag {
    font-size: 1.25rem;
    line-height: 1;
    display: inline-block;
}

.navbar-locale-nav-item {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

/* Mobile / small tablet: center language dropdown under flag (not full-navbar left) */
@media (max-width: 991.98px) {
    .main-header .navbar-nav.ml-auto .navbar-locale-nav-item.dropdown {
        position: relative;
    }

    .main-header .navbar-locale-nav-item .navbar-locale-dropdown-mobile.dropdown-menu {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        min-width: 11.5rem;
    }
}

.navbar-locale-select-wrap {
    margin-bottom: 0;
}

.navbar-locale-select-wrap .navbar-locale-select,
.navbar-locale-select-wrap .login-locale-select {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

@media (min-width: 576px) {
    .navbar-locale-select-wrap .navbar-locale-select,
    .navbar-locale-select-wrap .login-locale-select {
        max-width: 12rem;
    }
}

/* Notification search: icon-only entry on small screens (modal in page.blade) */
.navbar-notif-search-mobile-trigger .navbar-toolbar-icon {
    font-size: 1rem;
}

.select2-container {
    width: 100% !important;
}

input[type='radio'][readonly] {
    pointer-events: none;
}

input[type='radio']:read-only {
    pointer-events: none;
}

.one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-width-height {
    height: 30px;
    widows: 30px;
}

.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top {
    z-index: 9999999999999999 !important;
}

.dt-button.buttons-collection.buttons-page-length,
.dt-button.buttons-reload {
    background: #6c757d;
    color: #fff;
}

.dt-button.button-page-length {
    background: #6a48f2;
    color: #fff;
    margin-top: 2px;
    border-radius: 5px !important;
}

.pad-bottom-10 {
    margin-bottom: 10px;
}

.gallery {
    display: inline-block;
    margin-top: 20px;
}

.close-icon {
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: -10px;
    padding: 5px 8px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
/* input[type=number] {
    /* -moz-appearance: textfield; */
/* }  */

.control-sidebar .nav-sidebar .nav-link {
    color: white;
}

.alert-orange {
    background: #fd7e14;
    color: #FFF;
}

.cus-disabled {
    pointer-events: none;
}

#description-checkbox {
    padding: 7px;
}

.blink {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.buttons-white {
    background-color: #fff !important;
}

.nav-item.Covid-19_Daily_Self_Monitoring a p {
    font-size: 14px !important;
}

.clinical-row .btn-outline-primary:hover {
    color: #3b92f0;
    background-color: #007bff;
    border-color: #007bff;
}

.clinical-row .btn-outline-success:hover {
    color: #31c252;
    background-color: #28a745;
    border-color: #28a745;
}

.clinical-row .btn-outline-danger:hover {
    color: #e65a67;
    background-color: #dc3545;
    border-color: #dc3545;
}

.clinical-row .btn-outline-info:hover {
    color: #44b7c9;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.clinical-row .btn-outline-warning:hover {
    color: #edc95c;
    background-color: #ffc107;
    border-color: #ffc107;
}

#monitoring,
#needDoctor {
    cursor: pointer;
}

@media only screen and (max-width:500px) {

    /* For mobile phones: */
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: unset !important;
    }
}

.error-message {
    color: red;
    font-size: 0.7rem;
    display: revert;
    margin-top: 5px;
}

.image.area_location {
    padding-top: 8px;
}

/* Removed custom nav-treeview background to use default AdminLTE styling */
/* .nav.nav-treeview {
    background-color: #474f57 !important;
    border-radius: 4px;
} */

.user-panel,
.user-panel .info {
    white-space: normal !important;
}

/* Complaints message styles */
.message-item {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-body::-webkit-scrollbar {
    width: 6px;
}

.card-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.card-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.card-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Minimal toast — floating Bootstrap toast (AdminLTE Toasts plugin) */
.toast-minimal {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 4px solid #dc3545 !important;
    border-radius: 0.5rem;
    box-shadow:
        0 0.25rem 0.5rem rgba(0, 0, 0, 0.08),
        0 0.75rem 1.5rem rgba(220, 53, 69, 0.08);
    max-width: min(360px, calc(100vw - 2rem));
    margin: 0.5rem 0.75rem 0.75rem 0.5rem;
    opacity: 1;
}

.toast-minimal.toast.fade {
    transition: opacity 0.25s linear;
}

.toast-minimal .toast-header {
    background: rgba(220, 53, 69, 0.07);
    color: #212529;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
}

.toast-minimal .toast-header strong {
    font-weight: 600;
    font-size: 0.875rem;
}

.toast-minimal .toast-header .close {
    color: #6c757d;
    opacity: 0.85;
    text-shadow: none;
}

.toast-minimal .toast-header .close:hover {
    color: #212529;
    opacity: 1;
}

.toast-minimal .toast-body {
    color: #495057;
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: 0.65rem 0.75rem 0.75rem;
    border-radius: 0 0 0.5rem 0.5rem;
}

.toast-minimal .toast-minimal-text {
    display: block;
    margin-bottom: 0.35rem;
    color: #6c757d;
}

.toast-minimal .btn-outline-danger {
    font-size: 0.8rem;
    padding: 0.25rem 0.55rem;
}

/* Clinical “need doctor” toast — same base, optional hook for future tweaks */
.toast-minimal--clinical {
    z-index: 1;
}

/* Attendance date-range clamp — yellow / warning (longer read than danger clinical) */
.toast-minimal--warning {
    border-left-color: #ffc107 !important;
    box-shadow:
        0 0.25rem 0.5rem rgba(0, 0, 0, 0.08),
        0 0.75rem 1.5rem rgba(255, 193, 7, 0.18);
}

.toast-minimal--warning .toast-header {
    background: rgba(255, 193, 7, 0.22);
    color: #212529;
}

.toast-minimal--warning .toast-header strong {
    color: #856404;
}

.toast-minimal--attendance-range.toast-minimal--warning {
    z-index: 1;
}

body.dark-mode .toast-minimal--warning {
    background: #2c3238 !important;
    border-color: #495057 !important;
    border-left-color: #ffc107 !important;
    box-shadow:
        0 0.35rem 0.75rem rgba(0, 0, 0, 0.35),
        0 0.5rem 1.25rem rgba(255, 193, 7, 0.15);
}

body.dark-mode .toast-minimal--warning .toast-header {
    background: rgba(255, 193, 7, 0.14);
    color: #f8f9fa;
}

body.dark-mode .toast-minimal--warning .toast-header strong {
    color: #ffecb5;
}

body.dark-mode .toast-minimal--warning .toast-body,
body.dark-mode .toast-minimal--warning .toast-minimal-text {
    color: #e9ecef !important;
}

/* Dark mode: match dashboard surfaces */
body.dark-mode .toast-minimal {
    background: #2c3238 !important;
    border-color: #495057 !important;
    border-left-color: #dc3545 !important;
    box-shadow:
        0 0.35rem 0.75rem rgba(0, 0, 0, 0.35),
        0 0.5rem 1.25rem rgba(220, 53, 69, 0.12);
}

body.dark-mode .toast-minimal .toast-header {
    background: rgba(220, 53, 69, 0.12);
    color: #f8f9fa;
    border-bottom-color: #495057;
}

body.dark-mode .toast-minimal .toast-header strong {
    color: #fff;
}

body.dark-mode .toast-minimal .toast-header .close {
    color: #e9ecef;
}

body.dark-mode .toast-minimal .toast-header .close:hover {
    color: #fff;
}

body.dark-mode .toast-minimal .toast-body,
body.dark-mode .toast-minimal .toast-minimal-text {
    color: #ced4da !important;
}

body.dark-mode .toast-minimal .btn-outline-danger {
    color: #f5c6cb !important;
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.12) !important;
}

body.dark-mode .toast-minimal .btn-outline-danger:hover {
    color: #fff !important;
    background-color: #dc3545 !important;
}

/* ============================================
   DataTables – soft dashboard theme (all pages)
   ============================================ */
/* Wrapper & container */
.card .card-body .table-responsive .dataTables_wrapper,
.table-responsive .dataTables_wrapper {
    padding: 0;
}
.card .card-body .table-responsive {
    border-radius: 0.5rem;
    background: #fafbfc;
}

/* Table base */
table.dataTable {
    border: 1px solid rgba(0, 123, 255, 0.12);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
}
table.dataTable thead th,
table.dataTable thead td {
    background: rgba(0, 123, 255, 0.08) !important;
    color: #2c5282;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 123, 255, 0.15);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    color: rgba(0, 123, 255, 0.5);
}
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    color: #007bff;
}
table.dataTable tbody tr {
    background: #fff;
    transition: background 0.15s ease;
}
table.dataTable tbody tr:nth-child(even) {
    background: rgba(248, 249, 250, 0.9);
}
table.dataTable tbody tr:hover {
    background: rgba(0, 123, 255, 0.06) !important;
}
table.dataTable tbody td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: #495057;
    font-size: 0.875rem;
}
table.dataTable tbody tr:last-child td {
    border-bottom: none;
}
table.dataTable td.dataTables_empty {
    color: #6c757d;
    padding: 1.5rem;
}

/* Length & filter row */
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter {
    padding: 0.75rem 0;
    color: #495057;
}
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    color: #6c757d;
    font-weight: 700 !important;
}
div.dataTables_wrapper div.dataTables_length select {
    border: 1px solid rgba(0, 123, 255, 0.25);
    border-radius: 0.375rem;
    background: #fff;
    color: #495057;
    padding: 0.25rem 1.75rem;
}
div.dataTables_wrapper div.dataTables_filter input {
    border: 1px solid rgba(0, 123, 255, 0.25);
    border-radius: 0.375rem;
    padding: 0.35rem 0.75rem;
    background: #fff;
    color: #495057;
}
div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: rgba(0, 123, 255, 0.5);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Info text */
div.dataTables_wrapper div.dataTables_info {
    padding: 0.75rem 0;
    color: #6c757d;
    font-size: 0.875rem;
}

/* Pagination – soft style */
div.dataTables_wrapper div.dataTables_paginate {
    padding: 0.75rem 0;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 0;
    gap: 0.25rem;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link {
    border: 1px solid rgba(0, 123, 255, 0.2);
    background: #fff;
    color: #007bff;
    border-radius: 0.375rem !important;
    padding: 0.35rem 0.75rem;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link:hover {
    background: rgba(0, 123, 255, 0.08);
    border-color: rgba(0, 123, 255, 0.35);
    color: #0056b3;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
    background: rgba(0, 123, 255, 0.15);
    border-color: #007bff;
    color: #007bff;
    font-weight: 600;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.disabled .page-link {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #adb5bd;
}

/* Processing overlay */
div.dataTables_wrapper div.dataTables_processing {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 123, 255, 0.2);
    border-radius: 0.5rem;
    color: #007bff;
    font-weight: 500;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
}

/* Buttons – soft primary (override existing dt-button) */
.dt-button,
.buttons-html5,
.buttons-print {
    color: #007bff !important;
    background: rgba(0, 123, 255, 0.1) !important;
    border: 1px solid rgba(0, 123, 255, 0.3) !important;
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
}
.dt-button:hover,
.buttons-html5:hover,
.buttons-print:hover {
    background: rgba(0, 123, 255, 0.18) !important;
    border-color: #007bff !important;
    color: #0056b3 !important;
}
.dt-button.buttons-collection.buttons-page-length,
.dt-button.buttons-reload {
    background: rgba(0, 123, 255, 0.1) !important;
    color: #007bff !important;
    border: 1px solid rgba(0, 123, 255, 0.3) !important;
}
.dt-button.button-page-length {
    background: rgba(0, 123, 255, 0.12) !important;
    color: #007bff !important;
    border: 1px solid rgba(0, 123, 255, 0.3) !important;
}

/* Buttons container spacing */
.dt-buttons {
    margin-bottom: 0.5rem;
}
.dt-buttons .btn-group {
    margin-right: 0.5rem;
}

/* DataTables export/action buttons – different colors per format */
.dt-buttons .buttons-reload {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;
}
.dt-buttons .buttons-reload:hover {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
    color: #fff !important;
}
.dt-buttons .buttons-pdf {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}
.dt-buttons .buttons-pdf:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
    color: #fff !important;
}
.dt-buttons .buttons-print {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}
.dt-buttons .buttons-print:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #fff !important;
}
.dt-buttons .buttons-excel {
    background-color: #217346 !important;
    border-color: #217346 !important;
    color: #fff !important;
}
.dt-buttons .buttons-excel:hover {
    background-color: #1b5c39 !important;
    border-color: #18532f !important;
    color: #fff !important;
}
.dt-buttons .buttons-csv {
    background-color: #20c997 !important;
    border-color: #20c997 !important;
    color: #fff !important;
}
.dt-buttons .buttons-csv:hover {
    background-color: #1aa179 !important;
    border-color: #179d74 !important;
    color: #fff !important;
}

@media only screen and (max-width: 500px) {
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: unset !important;
    }
}

/* ============================================
   Soft buttons – all pages (submit, action column, by color)
   ============================================ */
/* Base: all .btn get soft transition */
.btn {
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}

/* ---- Solid buttons (soft background + border) ---- */
.btn-primary {
    background: rgba(0, 123, 255, 0.85) !important;
    border-color: rgba(0, 123, 255, 0.5) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background: rgba(0, 123, 255, 0.95) !important;
    border-color: #007bff !important;
    color: #fff !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 123, 255, 0.25) !important;
}
.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
}

.btn-success {
    background: rgba(40, 167, 69, 0.88) !important;
    border-color: rgba(40, 167, 69, 0.5) !important;
    color: #fff !important;
}
.btn-success:hover {
    background: rgba(40, 167, 69, 0.95) !important;
    border-color: #28a745 !important;
    color: #fff !important;
    box-shadow: 0 0.125rem 0.25rem rgba(40, 167, 69, 0.25) !important;
}
.btn-success:focus {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25) !important;
}

.btn-danger {
    background: rgba(220, 53, 69, 0.88) !important;
    border-color: rgba(220, 53, 69, 0.5) !important;
    color: #fff !important;
}
.btn-danger:hover {
    background: rgba(220, 53, 69, 0.95) !important;
    border-color: #dc3545 !important;
    color: #fff !important;
    box-shadow: 0 0.125rem 0.25rem rgba(220, 53, 69, 0.25) !important;
}
.btn-danger:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
}

.btn-warning {
    background: rgba(255, 193, 7, 0.9) !important;
    border-color: rgba(255, 193, 7, 0.6) !important;
    color: #212529 !important;
}
.btn-warning:hover {
    background: rgba(255, 193, 7, 0.98) !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
    box-shadow: 0 0.125rem 0.25rem rgba(255, 193, 7, 0.3) !important;
}
.btn-warning:focus {
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3) !important;
}

.btn-info {
    background: rgba(23, 162, 184, 0.85) !important;
    border-color: rgba(23, 162, 184, 0.5) !important;
    color: #fff !important;
}
.btn-info:hover {
    background: rgba(23, 162, 184, 0.95) !important;
    border-color: #17a2b8 !important;
    color: #fff !important;
    box-shadow: 0 0.125rem 0.25rem rgba(23, 162, 184, 0.25) !important;
}
.btn-info:focus {
    box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.25) !important;
}

.btn-secondary {
    background: rgba(108, 117, 125, 0.85) !important;
    border-color: rgba(108, 117, 125, 0.5) !important;
    color: #fff !important;
}
.btn-secondary:hover {
    background: rgba(108, 117, 125, 0.95) !important;
    border-color: #6c757d !important;
    color: #fff !important;
    box-shadow: 0 0.125rem 0.25rem rgba(108, 117, 125, 0.2) !important;
}
.btn-secondary:focus {
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25) !important;
}

.btn-dark {
    background: rgba(52, 58, 64, 0.9) !important;
    border-color: rgba(52, 58, 64, 0.6) !important;
    color: #fff !important;
}
.btn-dark:hover {
    background: rgba(52, 58, 64, 0.98) !important;
    border-color: #343a40 !important;
    color: #fff !important;
    box-shadow: 0 0.125rem 0.25rem rgba(52, 58, 64, 0.25) !important;
}

.btn-light {
    background: rgba(248, 249, 250, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #495057 !important;
}
.btn-light:hover {
    background: rgba(241, 243, 245, 1) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #212529 !important;
}

/* ---- Outline buttons (soft fill on default, stronger on hover) ---- */
.btn-outline-primary {
    background: rgba(0, 123, 255, 0.08) !important;
    border-color: rgba(0, 123, 255, 0.4) !important;
    color: #0066cc !important;
}
.btn-outline-primary:hover {
    background: rgba(0, 123, 255, 0.18) !important;
    border-color: #007bff !important;
    color: #0056b3 !important;
}

.btn-outline-success {
    background: rgba(40, 167, 69, 0.08) !important;
    border-color: rgba(40, 167, 69, 0.4) !important;
    color: #1e7e34 !important;
}
.btn-outline-success:hover {
    background: rgba(40, 167, 69, 0.18) !important;
    border-color: #28a745 !important;
    color: #155724 !important;
}

.btn-outline-danger {
    background: rgba(220, 53, 69, 0.08) !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
    color: #c82333 !important;
}
.btn-outline-danger:hover {
    background: rgba(220, 53, 69, 0.18) !important;
    border-color: #dc3545 !important;
    color: #bd2130 !important;
}

.btn-outline-warning {
    background: rgba(255, 193, 7, 0.12) !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
    color: #d39e00 !important;
}
.btn-outline-warning:hover {
    background: rgba(255, 193, 7, 0.22) !important;
    border-color: #ffc107 !important;
    color: #856404 !important;
}

.btn-outline-info {
    background: rgba(23, 162, 184, 0.08) !important;
    border-color: rgba(23, 162, 184, 0.4) !important;
    color: #138496 !important;
}
.btn-outline-info:hover {
    background: rgba(23, 162, 184, 0.18) !important;
    border-color: #17a2b8 !important;
    color: #0c5460 !important;
}

.btn-outline-secondary {
    background: rgba(108, 117, 125, 0.08) !important;
    border-color: rgba(108, 117, 125, 0.4) !important;
    color: #545b62 !important;
}
.btn-outline-secondary:hover {
    background: rgba(108, 117, 125, 0.18) !important;
    border-color: #6c757d !important;
    color: #383d41 !important;
}

.btn-outline-dark {
    background: rgba(52, 58, 64, 0.06) !important;
    border-color: rgba(52, 58, 64, 0.4) !important;
    color: #343a40 !important;
}
.btn-outline-dark:hover {
    background: rgba(52, 58, 64, 0.15) !important;
    border-color: #343a40 !important;
    color: #212529 !important;
}

/* ---- Action column buttons – consistent as reference (light bg + border + colored icon) ---- */
table .btn,
.table .btn,
.dataTable .btn,
.clinical-row .btn {
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
table .btn i,
.table .btn i,
.dataTable .btn i,
.clinical-row .btn i {
    color: inherit !important;
}

/* Info (blue) – light blue bg, blue border, blue icon */
table .btn-info,
.table .btn-info,
.dataTable .btn-info,
.clinical-row .btn-outline-primary {
    background: #E0EBF9 !important;
    border: 1px solid rgba(0, 123, 255, 0.4) !important;
    color: #0066cc !important;
}
table .btn-info:hover,
.table .btn-info:hover,
.dataTable .btn-info:hover,
.clinical-row .btn-outline-primary:hover {
    background: #cce0f7 !important;
    border-color: #007bff !important;
    color: #0056b3 !important;
}

/* Edit / Success (green) – light green bg, green border, green icon */
table .btn-primary,
.table .btn-primary,
.dataTable .btn-primary,
.clinical-row .btn-outline-success {
    background: #E8F9ED !important;
    border: 1px solid rgba(40, 167, 69, 0.45) !important;
    color: #1e7e34 !important;
}
table .btn-primary:hover,
.table .btn-primary:hover,
.dataTable .btn-primary:hover,
.clinical-row .btn-outline-success:hover {
    background: #d4f0dc !important;
    border-color: #28a745 !important;
    color: #155724 !important;
}

/* Delete / Danger (red) – light red bg, red border, red icon */
table .btn-danger,
.table .btn-danger,
.dataTable .btn-danger,
.clinical-row .btn-outline-danger {
    background: #FAE8E8 !important;
    border: 1px solid rgba(220, 53, 69, 0.45) !important;
    color: #c82333 !important;
}
table .btn-danger:hover,
.table .btn-danger:hover,
.dataTable .btn-danger:hover,
.clinical-row .btn-outline-danger:hover {
    background: #f5d4d4 !important;
    border-color: #dc3545 !important;
    color: #bd2130 !important;
}

/* Print / Info cyan (teal) – light teal bg, teal border, teal icon */
table .btn-outline-info,
.table .btn-outline-info,
.dataTable .btn-outline-info,
.clinical-row .btn-outline-info {
    background: #E6F3F5 !important;
    border: 1px solid rgba(23, 162, 184, 0.45) !important;
    color: #138496 !important;
}
table .btn-outline-info:hover,
.table .btn-outline-info:hover,
.dataTable .btn-outline-info:hover,
.clinical-row .btn-outline-info:hover {
    background: #d1eaee !important;
    border-color: #17a2b8 !important;
    color: #0c5460 !important;
}

/* Warning / Cancel (yellow) – light yellow bg, golden border, golden icon */
table .btn-warning,
.table .btn-warning,
.dataTable .btn-warning,
.clinical-row .btn-outline-warning {
    background: #FBF4E0 !important;
    border: 1px solid rgba(255, 193, 7, 0.55) !important;
    color: #d39e00 !important;
}
table .btn-warning:hover,
.table .btn-warning:hover,
.dataTable .btn-warning:hover,
.clinical-row .btn-outline-warning:hover {
    background: #f7ebc5 !important;
    border-color: #ffc107 !important;
    color: #856404 !important;
}

/* Secondary (gray) – light gray bg */
table .btn-secondary,
.table .btn-secondary,
.dataTable .btn-secondary {
    background: #f0f1f3 !important;
    border: 1px solid rgba(108, 117, 125, 0.4) !important;
    color: #545b62 !important;
}
table .btn-secondary:hover,
.table .btn-secondary:hover,
.dataTable .btn-secondary:hover {
    background: #e2e4e8 !important;
    border-color: #6c757d !important;
    color: #383d41 !important;
}

table .btn-sm,
.table .btn-sm,
.dataTable .btn-sm,
.clinical-row .btn-sm {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.8125rem !important;
}

/* ============================================
   Filter – soft style on all pages
   ============================================ */
/* Card filter: header with left accent + soft background */
.card .card-header {
    background: rgba(0, 123, 255, 0.06) !important;
    border-bottom: 1px solid rgba(0, 123, 255, 0.12) !important;
    border-left: 4px solid #007bff !important;
    color: #2c5282 !important;
    font-weight: 600 !important;
}
.card .card-header .card-title {
    color: #2c5282 !important;
    font-weight: 600 !important;
}
.card .card-header .btn-tool {
    color: #6c757d !important;
}
.card .card-header .btn-tool:hover {
    color: #007bff !important;
}

/* Body card filter: very soft background */
.card .card-body {
    background: #fafbfc !important;
}

/* Input & select inside card (filter and form) – soft border & focus */
.card .card-body .form-control,
.card .card-body input[type="text"],
.card .card-body input[type="date"],
.card .card-body input[type="number"],
.card .card-body select,
.date_filter .form-control,
.date_filter input,
.date_range_filter,
.date_filter .date {
    background: #fff !important;
    border: 1px solid rgba(0, 123, 255, 0.22) !important;
    border-radius: 0.375rem !important;
    color: #495057 !important;
}
.card .card-body .form-control:focus,
.card .card-body input:focus,
.card .card-body select:focus,
.date_filter .form-control:focus,
.date_filter input:focus {
    border-color: rgba(0, 123, 255, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
    outline: none !important;
}

/* Filter icon inputs – square corners (override card body input border-radius above) */
.card .card-body.filter-card-body .filter-input-group .input-group-prepend .input-group-text,
.card .card-body.filter-card-body .filter-input-group > .form-control,
.card .card-body.filter-card-body .filter-input-group > input[type="text"],
.card .card-body.filter-card-body .filter-input-group > input[type="date"],
.card .card-body.filter-card-body .filter-input-group > input[type="number"],
.card .card-body.filter-card-body .filter-input-group > select,
.date_filter .filter-input-group .input-group-prepend .input-group-text,
.date_filter .filter-input-group > .form-control,
.date_filter .filter-input-group > input,
.date_filter .filter-input-group > .date_range_filter,
.date_filter .filter-input-group > .date {
    border-radius: 0 !important;
}

.card .card-body.filter-card-body .filter-input-group > .form-control:focus,
.card .card-body.filter-card-body .filter-input-group > input[type="text"]:focus,
.card .card-body.filter-card-body .filter-input-group > input[type="date"]:focus,
.card .card-body.filter-card-body .filter-input-group > input[type="number"]:focus,
.card .card-body.filter-card-body .filter-input-group > select:focus,
.date_filter .filter-input-group > .form-control:focus,
.date_filter .filter-input-group > input:focus {
    border-radius: 0 !important;
}

.card .card-body.filter-card-body .filter-input-group .select2-container--bootstrap .select2-selection,
.date_filter .filter-input-group .select2-container--bootstrap .select2-selection {
    border-radius: 0 !important;
}

/* Label / text in filter area – all bold */
.date_filter .date-label,
.card .card-body .date-label,
.card .card-body label {
    color: #495057 !important;
    font-weight: 700 !important;
}

/* Select2 inside card (filter) */
.card .card-body .select2-container--bootstrap .select2-selection {
    border: 1px solid rgba(0, 123, 255, 0.22) !important;
    border-radius: 0.375rem !important;
}
.card .card-body .select2-container--bootstrap.select2-container--focus .select2-selection {
    border-color: rgba(0, 123, 255, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
}

/* ============================================
   Light mode – black text (not gray)
   ============================================ */
body:not(.dark-mode) {
    color: #212529;
}
body:not(.dark-mode) .card .card-header,
body:not(.dark-mode) .card .card-header .card-title,
body:not(.dark-mode) .card .card-body,
body:not(.dark-mode) .card .card-footer {
    color: #212529 !important;
}
body:not(.dark-mode) .card .card-body label,
body:not(.dark-mode) .card .card-body .date-label,
body:not(.dark-mode) .date_filter .date-label {
    color: #212529 !important;
}
body:not(.dark-mode) .card .card-body .form-control,
body:not(.dark-mode) .card .card-body input[type="text"],
body:not(.dark-mode) .card .card-body input[type="date"],
body:not(.dark-mode) .card .card-body input[type="number"],
body:not(.dark-mode) .card .card-body select {
    color: #212529 !important;
}
body:not(.dark-mode) .card .card-header .btn-tool {
    color: #212529 !important;
}
body:not(.dark-mode) .text-muted {
    color: #212529 !important;
}
/* DataTables – light mode black text */
body:not(.dark-mode) table.dataTable tbody td,
body:not(.dark-mode) table.dataTable td.dataTables_empty,
body:not(.dark-mode) div.dataTables_wrapper div.dataTables_length,
body:not(.dark-mode) div.dataTables_wrapper div.dataTables_filter,
body:not(.dark-mode) div.dataTables_wrapper div.dataTables_length label,
body:not(.dark-mode) div.dataTables_wrapper div.dataTables_filter label,
body:not(.dark-mode) div.dataTables_wrapper div.dataTables_info {
    color: #212529 !important;
}
body:not(.dark-mode) div.dataTables_wrapper div.dataTables_length select,
body:not(.dark-mode) div.dataTables_wrapper div.dataTables_filter input {
    color: #212529 !important;
}
/* Dashboard home – font size to match sidebar menu (readable) */
.dashboard-home {
    font-size: 1rem;
}
.dashboard-home .card .card-body,
.dashboard-home .card .card-footer {
    font-size: 1rem;
}
.dashboard-home .card .card-body .small,
.dashboard-home .card .card-body .text-uppercase,
.dashboard-home .card .card-footer .small {
    font-size: 1rem;
}
.dashboard-home .card .card-header .card-title {
    font-size: 1rem;
}
.dashboard-home .fw-semibold,
.dashboard-home .fw-bold {
    font-size: 1rem;
}
.dashboard-home .fs-4 {
    font-size: 1.5rem !important;
}
/* Clinical categories section – same font size as rest of dashboard */
.dashboard-home .card .card-body .card .card-body .small,
.dashboard-home .card .card-body .card .card-body .fw-bold {
    font-size: 1rem;
}
.dashboard-home .card .card-header .card-title.small {
    font-size: 1rem;
}

/* Dashboard home cards – light mode black text */
body:not(.dark-mode) .dashboard-home .card .card-body .text-muted,
body:not(.dark-mode) .dashboard-home .card .card-footer .text-muted,
body:not(.dark-mode) .dashboard-home .card .text-muted,
body:not(.dark-mode) .dashboard-home .card .card-header .card-title {
    color: #212529 !important;
}
body:not(.dark-mode) .dashboard-home .card .card-body,
body:not(.dark-mode) .dashboard-home .card .card-footer {
    color: #212529 !important;
}
/* Toast & utility – light mode */
body:not(.dark-mode) .toast-minimal .toast-body,
body:not(.dark-mode) .toast-minimal .toast-minimal-text {
    color: #212529 !important;
}
body:not(.dark-mode) .toast-minimal .toast-header .close {
    color: #212529 !important;
}
/* Table header black text in light mode */
body:not(.dark-mode) table.dataTable thead th,
body:not(.dark-mode) table.dataTable thead td {
    color: #212529 !important;
}
/* Sidebar & content – light mode black text */
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-link,
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-link p,
body:not(.dark-mode) .main-sidebar .brand-link .brand-text,
body:not(.dark-mode) .main-sidebar .user-panel .info a,
body:not(.dark-mode) .content-wrapper,
body:not(.dark-mode) .content-header .breadcrumb,
body:not(.dark-mode) .content-header .breadcrumb-item,
body:not(.dark-mode) .content-header .breadcrumb-item a {
    color: #212529 !important;
}
/* Sidebar: active menu item (dark blue background) – white text & icon for readability */
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-link.active,
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-link.active p,
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-link.active i,
body:not(.dark-mode) .main-sidebar .nav-sidebar .show > .nav-link,
body:not(.dark-mode) .main-sidebar .nav-sidebar .show > .nav-link p,
body:not(.dark-mode) .main-sidebar .nav-sidebar .show > .nav-link i {
    color: #fff !important;
}
/*
 * Sidebar: expanded parent menu (menu-open) uses same color as active.
 * Only change config adminlte.php → classes_sidebar; no need to edit this CSS.
 * Each theme class below matches AdminLTE; the one in config applies automatically.
 */
body:not(.dark-mode) .main-sidebar.sidebar-light-primary .nav-sidebar > .nav-item.menu-open > .nav-link,
body:not(.dark-mode) .main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link { background-color: #007bff !important; }
body:not(.dark-mode) .main-sidebar.sidebar-light-primary .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-light-primary .nav-sidebar > .nav-item.menu-open > .nav-link i,
body:not(.dark-mode) .main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link i { color: #fff !important; }

body:not(.dark-mode) .main-sidebar.sidebar-light-secondary .nav-sidebar > .nav-item.menu-open > .nav-link,
body:not(.dark-mode) .main-sidebar.sidebar-dark-secondary .nav-sidebar > .nav-item.menu-open > .nav-link { background-color: #6c757d !important; }
body:not(.dark-mode) .main-sidebar.sidebar-light-secondary .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-light-secondary .nav-sidebar > .nav-item.menu-open > .nav-link i,
body:not(.dark-mode) .main-sidebar.sidebar-dark-secondary .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-dark-secondary .nav-sidebar > .nav-item.menu-open > .nav-link i { color: #fff !important; }

body:not(.dark-mode) .main-sidebar.sidebar-light-navy .nav-sidebar > .nav-item.menu-open > .nav-link,
body:not(.dark-mode) .main-sidebar.sidebar-dark-navy .nav-sidebar > .nav-item.menu-open > .nav-link { background-color: #001f3f !important; }
body:not(.dark-mode) .main-sidebar.sidebar-light-navy .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-light-navy .nav-sidebar > .nav-item.menu-open > .nav-link i,
body:not(.dark-mode) .main-sidebar.sidebar-dark-navy .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-dark-navy .nav-sidebar > .nav-item.menu-open > .nav-link i { color: #fff !important; }

body:not(.dark-mode) .main-sidebar.sidebar-light-success .nav-sidebar > .nav-item.menu-open > .nav-link,
body:not(.dark-mode) .main-sidebar.sidebar-dark-success .nav-sidebar > .nav-item.menu-open > .nav-link { background-color: #28a745 !important; }
body:not(.dark-mode) .main-sidebar.sidebar-light-success .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-light-success .nav-sidebar > .nav-item.menu-open > .nav-link i,
body:not(.dark-mode) .main-sidebar.sidebar-dark-success .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-dark-success .nav-sidebar > .nav-item.menu-open > .nav-link i { color: #fff !important; }

body:not(.dark-mode) .main-sidebar.sidebar-light-info .nav-sidebar > .nav-item.menu-open > .nav-link,
body:not(.dark-mode) .main-sidebar.sidebar-dark-info .nav-sidebar > .nav-item.menu-open > .nav-link { background-color: #17a2b8 !important; }
body:not(.dark-mode) .main-sidebar.sidebar-light-info .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-light-info .nav-sidebar > .nav-item.menu-open > .nav-link i,
body:not(.dark-mode) .main-sidebar.sidebar-dark-info .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-dark-info .nav-sidebar > .nav-item.menu-open > .nav-link i { color: #fff !important; }

body:not(.dark-mode) .main-sidebar.sidebar-light-warning .nav-sidebar > .nav-item.menu-open > .nav-link,
body:not(.dark-mode) .main-sidebar.sidebar-dark-warning .nav-sidebar > .nav-item.menu-open > .nav-link { background-color: #ffc107 !important; }
body:not(.dark-mode) .main-sidebar.sidebar-light-warning .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-light-warning .nav-sidebar > .nav-item.menu-open > .nav-link i,
body:not(.dark-mode) .main-sidebar.sidebar-dark-warning .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-dark-warning .nav-sidebar > .nav-item.menu-open > .nav-link i { color: #fff !important; }

body:not(.dark-mode) .main-sidebar.sidebar-light-danger .nav-sidebar > .nav-item.menu-open > .nav-link,
body:not(.dark-mode) .main-sidebar.sidebar-dark-danger .nav-sidebar > .nav-item.menu-open > .nav-link { background-color: #dc3545 !important; }
body:not(.dark-mode) .main-sidebar.sidebar-light-danger .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-light-danger .nav-sidebar > .nav-item.menu-open > .nav-link i,
body:not(.dark-mode) .main-sidebar.sidebar-dark-danger .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-dark-danger .nav-sidebar > .nav-item.menu-open > .nav-link i { color: #fff !important; }

body:not(.dark-mode) .main-sidebar.sidebar-light-light .nav-sidebar > .nav-item.menu-open > .nav-link,
body:not(.dark-mode) .main-sidebar.sidebar-dark-light .nav-sidebar > .nav-item.menu-open > .nav-link { background-color: #f8f9fa !important; }
body:not(.dark-mode) .main-sidebar.sidebar-light-light .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-light-light .nav-sidebar > .nav-item.menu-open > .nav-link i,
body:not(.dark-mode) .main-sidebar.sidebar-dark-light .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-dark-light .nav-sidebar > .nav-item.menu-open > .nav-link i { color: #1F2D3D !important; }

body:not(.dark-mode) .main-sidebar.sidebar-light-dark .nav-sidebar > .nav-item.menu-open > .nav-link,
body:not(.dark-mode) .main-sidebar.sidebar-dark-dark .nav-sidebar > .nav-item.menu-open > .nav-link { background-color: #343a40 !important; }
body:not(.dark-mode) .main-sidebar.sidebar-light-dark .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-light-dark .nav-sidebar > .nav-item.menu-open > .nav-link i,
body:not(.dark-mode) .main-sidebar.sidebar-dark-dark .nav-sidebar > .nav-item.menu-open > .nav-link p,
body:not(.dark-mode) .main-sidebar.sidebar-dark-dark .nav-sidebar > .nav-item.menu-open > .nav-link i { color: #fff !important; }
/* Submenu items: always dark text (and icon) for readability on light background */
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-treeview .nav-link,
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-treeview .nav-link p,
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-treeview .nav-link i {
    color: #212529 !important;
}

/* Submenu background (so parent vs child is clearly visible) */
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-treeview .nav-link {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-radius: 4px;
    margin: 2px 0;
}
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-treeview .nav-link:hover,
body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-treeview .nav-link.active {
    background-color: rgba(0, 123, 255, 0.18) !important;
}

body.dark-mode .main-sidebar .nav-sidebar .nav-treeview .nav-link {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-radius: 4px;
    margin: 2px 0;
}
body.dark-mode .main-sidebar .nav-sidebar .nav-treeview .nav-link:hover,
body.dark-mode .main-sidebar .nav-sidebar .nav-treeview .nav-link.active {
    background-color: rgba(0, 123, 255, 0.25) !important;
}

body:not(.dark-mode) .main-footer {
    color: #212529 !important;
}

/* ============================================
   Main header: mobile-friendly toolbar icons
   (pairs with navbar-expand-md + navbar-no-expand)
   ============================================ */
.main-header .navbar-toolbar-icon {
    font-size: 1.125rem;
    line-height: 1;
}
@media (min-width: 768px) {
    .main-header .navbar-toolbar-icon {
        font-size: 1.35rem;
    }
}
.main-header .navbar-toolbar-badge {
    font-size: 0.7rem;
}
.main-header .nav-link-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.5rem;
}
/* Keep header toolbars horizontal on backend layout (especially mobile). */
body:not(.layout-top-nav) .main-header .navbar-nav {
    flex-direction: row;
    align-items: center;
}
@media (max-width: 767.98px) {
    body:not(.layout-top-nav) .main-header.navbar {
        flex-wrap: nowrap;
    }
    .main-header .navbar-nav.ml-auto.navbar-no-expand .nav-link {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
    .main-header .navbar-nav.ml-auto.navbar-no-expand .nav-link-toolbar {
        min-width: 2.5rem;
    }
    /* Keep notification dropdown attached to bell on mobile. */
    .main-header .navbar-nav .nav-item.dropdown {
        position: relative;
    }
    .main-header .navbar-nav .dropdown-menu.dropdown-menu-lg {
        left: auto !important;
        right: 0.25rem !important;
        min-width: 16rem;
        max-width: calc(100vw - 1rem);
    }
}

/* ============================================
   Dark mode (body.dark-mode)
   ============================================ */
body.dark-mode {
    background-color: #1a1d21;
    color: #fff;
}
body.dark-mode .main-header.navbar {
    background-color: #21262b !important;
    border-color: #343a40;
}
body.dark-mode .main-header .navbar-nav .nav-link,
body.dark-mode .main-header .brand-text,
body.dark-mode .main-header .navbar-brand {
    color: #fff !important;
}
body.dark-mode .main-header .navbar-nav .nav-link:hover {
    color: #fff !important;
}
/* Navbar brand link: override bg-light in dark mode */
body.dark-mode .main-header .brand-link.bg-light,
body.dark-mode .brand-link.bg-light {
    background-color: #21262b !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .main-header .brand-link .brand-text {
    color: #fff !important;
}
/* Navbar search input and buttons (Search Notifications, refresh, etc.) */
body.dark-mode .main-header .form-control,
body.dark-mode .main-header input[type="text"],
body.dark-mode .main-header input[type="search"] {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .main-header .form-control-navbar::placeholder {
    color: #fff !important;
    opacity: 0.8;
}
body.dark-mode .main-header .form-control-navbar {
    color: #fff !important;
}
body.dark-mode .main-header .input-group-text {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .main-header .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .main-header .btn:hover:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
    background-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .main-header .btn-navbar {
    color: #fff !important;
}
body.dark-mode .main-sidebar {
    background-color: #21262b !important;
}
body.dark-mode .main-sidebar .brand-link,
body.dark-mode .main-sidebar .nav-sidebar .nav-link p,
body.dark-mode .main-sidebar .nav-sidebar .nav-link i,
body.dark-mode .main-sidebar .user-panel .info a {
    color: #fff !important;
}
body.dark-mode .main-sidebar .nav-sidebar .nav-link:hover {
    background-color: #343a40;
    color: #fff !important;
}
/* Sidebar brand link: override bg-light in dark mode */
body.dark-mode .main-sidebar .brand-link.bg-light {
    background-color: #21262b !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .main-sidebar .brand-link .brand-text {
    color: #fff !important;
}
body.dark-mode .content-wrapper {
    background-color: #1a1d21 !important;
}
body.dark-mode .content-header {
    background-color: transparent;
}
body.dark-mode .content-header h1,
body.dark-mode .content-header .breadcrumb,
body.dark-mode .content-header .breadcrumb-item a {
    color: #fff !important;
}
body.dark-mode .content {
    background-color: #1a1d21;
}
body.dark-mode .card {
    background-color: #21262b;
    border-color: #343a40;
}
body.dark-mode .card .card-header {
    background-color: #2c3238;
    border-color: #343a40;
    color: #fff;
}
body.dark-mode .card .card-body {
    background-color: #21262b !important;
    color: #fff;
}
body.dark-mode .card .card-body .form-control,
body.dark-mode .card .card-body input[type="text"],
body.dark-mode .card .card-body input[type="date"],
body.dark-mode .card .card-body input[type="number"],
body.dark-mode .card .card-body select {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .card .card-body label,
body.dark-mode .card .card-body .date-label {
    color: #fff !important;
}

/* Dashboard home: gray text in card box becomes white (title/label use .text-muted) */
body.dark-mode .dashboard-home .card .card-body .text-muted,
body.dark-mode .dashboard-home .card .card-footer .text-muted,
body.dark-mode .dashboard-home .card .text-muted,
body.dark-mode .dashboard-home .card .card-header .card-title {
    color: #fff !important;
}
body.dark-mode .dashboard-home .card .card-body,
body.dark-mode .dashboard-home .card .card-footer {
    color: #fff !important;
}
/* Numbers and "View details" link keep accent color; ensure small text/labels are white */
body.dark-mode .dashboard-home .card .card-body .small.text-muted,
body.dark-mode .dashboard-home .card .card-body .text-uppercase.text-muted {
    color: #fff !important;
}

/* table-responsive: entire wrapper and all inner divs/table in dark mode */
body.dark-mode .table-responsive {
    background-color: #21262b !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .table-responsive .row {
    background-color: transparent !important;
}
body.dark-mode .table-responsive div[class^="col-"] {
    background-color: transparent !important;
}
body.dark-mode .table-responsive table,
body.dark-mode .table-responsive table.table {
    background-color: #21262b !important;
    color: #fff !important;
}
body.dark-mode .table-responsive table thead th {
    background-color: #2c3238 !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .table-responsive table tbody tr {
    background-color: #21262b !important;
}
body.dark-mode .table-responsive table tbody td {
    background-color: #21262b !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .table-responsive table tbody tr:hover td {
    background-color: #343a40 !important;
}
body.dark-mode .table-responsive .dataTables_wrapper {
    background-color: #21262b !important;
    color: #fff !important;
}
body.dark-mode .table-responsive .dataTables_wrapper select,
body.dark-mode .table-responsive .dataTables_wrapper input {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .table-responsive .dataTables_wrapper .btn:not(.buttons-reload):not(.buttons-pdf):not(.buttons-print):not(.buttons-excel):not(.buttons-csv) {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .table-responsive .dataTables_wrapper .btn:hover:not(.buttons-reload):not(.buttons-pdf):not(.buttons-print):not(.buttons-excel):not(.buttons-csv) {
    background-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .main-footer {
    background-color: #21262b !important;
    border-color: #343a40;
    color: #fff;
}
body.dark-mode .main-footer a {
    color: #fff;
}
body.dark-mode .dropdown-menu {
    background-color: #21262b;
    border-color: #343a40;
    /* Bootstrap .dropdown-menu sets color:#212529 — without this, datepicker & custom menu content is unreadable on dark bg */
    color: #fff;
}
body.dark-mode .dropdown-item {
    color: #fff;
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #343a40;
    color: #fff;
}
body.dark-mode .dropdown-header {
    color: #fff;
}
body.dark-mode .table {
    color: #fff;
}
body.dark-mode .table thead th {
    background-color: #2c3238;
    border-color: #343a40;
    color: #fff;
}
body.dark-mode .table td,
body.dark-mode .table tbody th {
    border-color: #343a40;
}
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.03);
}
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="search"],
body.dark-mode textarea {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode select {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .form-control:focus {
    background-color: #343a40;
    border-color: #007bff;
    color: #fff;
}
body.dark-mode .input-group-text {
    background-color: #343a40;
    border-color: #495057;
    color: #fff;
}
body.dark-mode .control-sidebar {
    background-color: #21262b;
}
body.dark-mode .control-sidebar .nav-link {
    color: #fff;
}

/* ----- Select2 (dropdowns) ----- */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--bootstrap4 .select2-selection--single,
body.dark-mode .select2-container--bootstrap .select2-selection--single {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
body.dark-mode .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: #fff transparent transparent transparent !important;
}
body.dark-mode .select2-dropdown {
    background-color: #21262b !important;
    border-color: #343a40 !important;
}
body.dark-mode .select2-results__option {
    color: #fff !important;
    background-color: transparent !important;
}
body.dark-mode .select2-results__option--highlighted[aria-selected] {
    background-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .select2-search--dropdown .select2-search__field {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .select2-results__message {
    color: #fff !important;
}
body.dark-mode .filter-card-body .form-control,
body.dark-mode .filter-card-body .filter-item select,
body.dark-mode .filter-card-body input {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .filter-card-body label {
    color: #fff !important;
}

/* ----- Bootstrap DateRangePicker (appended to body; inherits white text from dark-mode) ----- */
body.dark-mode .daterangepicker {
    background-color: #2c3238 !important;
    border-color: #495057 !important;
    color: #e9ecef !important;
}

body.dark-mode .daterangepicker:before {
    border-bottom-color: #495057;
}

body.dark-mode .daterangepicker:after {
    border-bottom-color: #2c3238;
}

body.dark-mode .daterangepicker.drop-up:before {
    border-top-color: #495057;
}

body.dark-mode .daterangepicker.drop-up:after {
    border-top-color: #2c3238;
}

body.dark-mode .daterangepicker .calendar-table {
    background-color: #2c3238 !important;
    border-color: #495057 !important;
    color: #e9ecef !important;
}

body.dark-mode .daterangepicker .calendar-table table th,
body.dark-mode .daterangepicker .calendar-table table td {
    color: #e9ecef !important;
}

body.dark-mode .daterangepicker th.month {
    color: #e9ecef !important;
}

body.dark-mode .daterangepicker select.monthselect,
body.dark-mode .daterangepicker select.yearselect {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}

body.dark-mode .daterangepicker td.available:hover,
body.dark-mode .daterangepicker th.available:hover {
    background-color: #495057 !important;
    color: #fff !important;
}

body.dark-mode .daterangepicker td.week,
body.dark-mode .daterangepicker th.week {
    color: #adb5bd !important;
}

body.dark-mode .daterangepicker td.off,
body.dark-mode .daterangepicker td.off.in-range,
body.dark-mode .daterangepicker td.off.start-date,
body.dark-mode .daterangepicker td.off.end-date {
    background-color: #2c3238 !important;
    color: #6c757d !important;
}

body.dark-mode .daterangepicker td.in-range {
    background-color: #3d4f63 !important;
    color: #fff !important;
}

body.dark-mode .daterangepicker td.active,
body.dark-mode .daterangepicker td.active:hover {
    background-color: #007bff !important;
    color: #fff !important;
}

body.dark-mode .daterangepicker .calendar-table .next span,
body.dark-mode .daterangepicker .calendar-table .prev span {
    border-color: #e9ecef !important;
}

body.dark-mode .daterangepicker .drp-buttons {
    border-top-color: #495057 !important;
}

body.dark-mode .daterangepicker .drp-selected {
    color: #e9ecef !important;
}

body.dark-mode .daterangepicker .ranges li {
    color: #e9ecef !important;
}

body.dark-mode .daterangepicker .ranges li:hover {
    background-color: #495057 !important;
    color: #fff !important;
}

body.dark-mode .daterangepicker .ranges li.active {
    background-color: #007bff !important;
    color: #fff !important;
}

body.dark-mode .daterangepicker.show-ranges.single.ltr .drp-calendar.left,
body.dark-mode .daterangepicker.show-ranges.rtl .drp-calendar.right,
body.dark-mode .daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-color: #495057 !important;
}

body.dark-mode .daterangepicker td.disabled,
body.dark-mode .daterangepicker option.disabled {
    color: #6c757d !important;
}

body.dark-mode .daterangepicker select.hourselect,
body.dark-mode .daterangepicker select.minuteselect,
body.dark-mode .daterangepicker select.secondselect,
body.dark-mode .daterangepicker select.ampmselect {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}

/* Normal month days (vendor leaves color as inherit / some states use #000) */
body.dark-mode .daterangepicker td.available,
body.dark-mode .daterangepicker td.available.in-range:not(.off) {
    color: #e9ecef !important;
}

/* ----- Bootstrap Datepicker (uses .dropdown-menu + inherits Bootstrap #212529 text) ----- */
body.dark-mode .datepicker.datepicker-dropdown.dropdown-menu {
    background-color: #2c3238 !important;
    border-color: #495057 !important;
    color: #e9ecef !important;
}

body.dark-mode .datepicker-dropdown:after {
    border-bottom-color: #2c3238 !important;
}

body.dark-mode .datepicker-dropdown.datepicker-orient-top:after {
    border-top-color: #2c3238 !important;
}

body.dark-mode .datepicker table tr th,
body.dark-mode .datepicker table tr td {
    color: #e9ecef !important;
}

body.dark-mode .datepicker table tr td.old,
body.dark-mode .datepicker table tr td.new {
    color: #6c757d !important;
}

body.dark-mode .datepicker table tr td.day:hover,
body.dark-mode .datepicker table tr td.day.focused {
    background-color: #495057 !important;
    color: #fff !important;
}

body.dark-mode .datepicker table tr td.today,
body.dark-mode .datepicker table tr td.today:hover,
body.dark-mode .datepicker table tr td.today.disabled,
body.dark-mode .datepicker table tr td.today.disabled:hover {
    background-color: #ffc107 !important;
    background-image: none !important;
    color: #212529 !important;
}

body.dark-mode .datepicker table tr td.active,
body.dark-mode .datepicker table tr td.active:hover,
body.dark-mode .datepicker table tr td.active.disabled,
body.dark-mode .datepicker table tr td.active.disabled:hover,
body.dark-mode .datepicker table tr td span.active,
body.dark-mode .datepicker table tr td span.active:hover {
    background-color: #007bff !important;
    background-image: none !important;
    color: #fff !important;
    text-shadow: none !important;
}

body.dark-mode .datepicker table tr td.range,
body.dark-mode .datepicker table tr td.range:hover,
body.dark-mode .datepicker table tr td.range.disabled,
body.dark-mode .datepicker table tr td.range.disabled:hover {
    background: #3d4f63 !important;
    color: #fff !important;
}

body.dark-mode .datepicker table tr td.highlighted {
    background: #495057 !important;
    color: #fff !important;
}

body.dark-mode .datepicker .datepicker-switch,
body.dark-mode .datepicker .prev,
body.dark-mode .datepicker .next,
body.dark-mode .datepicker tfoot tr th {
    color: #e9ecef !important;
}

body.dark-mode .datepicker .datepicker-switch:hover,
body.dark-mode .datepicker .next:hover,
body.dark-mode .datepicker .prev:hover,
body.dark-mode .datepicker tfoot tr th:hover {
    background-color: #495057 !important;
    color: #fff !important;
}

body.dark-mode .datepicker table tr td.disabled,
body.dark-mode .datepicker table tr td.disabled:hover {
    color: #6c757d !important;
}

body.dark-mode .datepicker table tr td span.focused,
body.dark-mode .datepicker table tr td span:hover {
    background: #495057 !important;
    color: #fff !important;
}

/* Inline calendar (forms — not .dropdown-menu; sits on dark card background) */
body.dark-mode .datepicker.datepicker-inline {
    background-color: #2c3238 !important;
    border: 1px solid #495057 !important;
    border-radius: 4px !important;
    color: #e9ecef !important;
    padding: 4px !important;
}

body.dark-mode .datepicker table tr th.datepicker-switch,
body.dark-mode .datepicker table tr th.prev,
body.dark-mode .datepicker table tr th.next,
body.dark-mode .datepicker table tr th.dow {
    color: #e9ecef !important;
}

/* Month / decade picker (td > span) */
body.dark-mode .datepicker table tr td span {
    color: #e9ecef !important;
}

body.dark-mode .datepicker table tr td span.disabled,
body.dark-mode .datepicker table tr td span.disabled:hover {
    color: #6c757d !important;
}

body.dark-mode .datepicker table tr td.today.active,
body.dark-mode .datepicker table tr td.today.active:hover,
body.dark-mode .datepicker table tr td.today.active.disabled,
body.dark-mode .datepicker table tr td.today.active.disabled:hover {
    background-color: #007bff !important;
    background-image: none !important;
    color: #fff !important;
}

body.dark-mode .datepicker table tr td.range.today,
body.dark-mode .datepicker table tr td.range.today:hover,
body.dark-mode .datepicker table tr td.range.today.disabled,
body.dark-mode .datepicker table tr td.range.today.disabled:hover {
    background-color: #4a5f7a !important;
    background-image: none !important;
    color: #fff !important;
}

body.dark-mode .datepicker-dropdown.datepicker-orient-bottom:before {
    border-top-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .datepicker-dropdown.datepicker-orient-bottom:after {
    border-top-color: #2c3238 !important;
}

/* DateRangePicker: start/end of range (vendor uses dark text on pale in-range bg) */
body.dark-mode .daterangepicker td.start-date,
body.dark-mode .daterangepicker td.end-date {
    color: #fff !important;
}

body.dark-mode .daterangepicker td.start-date:not(.active),
body.dark-mode .daterangepicker td.end-date:not(.active) {
    background-color: #3d4f63 !important;
}

/* Tempus Dominus / Eonasdan bootstrap-datetimepicker (vendor present; same dropdown text issue) */
body.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu {
    background-color: #2c3238 !important;
    border-color: #495057 !important;
    color: #e9ecef !important;
}

body.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
    border-bottom-color: #2c3238 !important;
}

body.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
    border-top-color: #2c3238 !important;
}

body.dark-mode .bootstrap-datetimepicker-widget table td,
body.dark-mode .bootstrap-datetimepicker-widget table th {
    color: #e9ecef !important;
}

body.dark-mode .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: #495057 !important;
    color: #fff !important;
}

body.dark-mode .bootstrap-datetimepicker-widget table td.day:hover,
body.dark-mode .bootstrap-datetimepicker-widget table td.hour:hover,
body.dark-mode .bootstrap-datetimepicker-widget table td.minute:hover,
body.dark-mode .bootstrap-datetimepicker-widget table td.second:hover {
    background: #495057 !important;
    color: #fff !important;
}

body.dark-mode .bootstrap-datetimepicker-widget table td span {
    color: #e9ecef !important;
}

body.dark-mode .bootstrap-datetimepicker-widget table td span:hover {
    background: #495057 !important;
    color: #fff !important;
}

body.dark-mode .bootstrap-datetimepicker-widget table td.old,
body.dark-mode .bootstrap-datetimepicker-widget table td.new,
body.dark-mode .bootstrap-datetimepicker-widget table td span.old {
    color: #6c757d !important;
}

/* Bootstrap Timepicker widget (clinicals/workers — anchors use #333 on dark menu) */
body.dark-mode .bootstrap-timepicker-widget.dropdown-menu {
    background-color: #2c3238 !important;
    border-color: #495057 !important;
    color: #e9ecef !important;
}

body.dark-mode .bootstrap-timepicker-widget.dropdown-menu:after {
    border-bottom-color: #2c3238 !important;
}

body.dark-mode .bootstrap-timepicker-widget.timepicker-orient-bottom:after {
    border-top-color: #2c3238 !important;
}

body.dark-mode .bootstrap-timepicker-widget table td a {
    color: #e9ecef !important;
    border-color: transparent !important;
}

body.dark-mode .bootstrap-timepicker-widget table td a:hover {
    background-color: #495057 !important;
    color: #fff !important;
    border-color: #6c757d !important;
}

body.dark-mode .bootstrap-timepicker-widget table td input {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}

/* jQuery UI datepicker (bundled under public/vendor — rarely loaded; safe global fix) */
body.dark-mode .ui-datepicker {
    background: #2c3238 !important;
    border: 1px solid #495057 !important;
    color: #e9ecef !important;
}

body.dark-mode .ui-datepicker-header {
    background: #343a40 !important;
    border-color: #495057 !important;
    color: #e9ecef !important;
}

body.dark-mode .ui-datepicker-calendar th,
body.dark-mode .ui-datepicker-calendar td {
    color: #e9ecef !important;
}

body.dark-mode .ui-datepicker-calendar td a {
    color: #e9ecef !important;
}

body.dark-mode .ui-datepicker-calendar td .ui-state-default {
    background: transparent !important;
    border-color: transparent !important;
    color: #e9ecef !important;
}

body.dark-mode .ui-datepicker-calendar td .ui-state-hover {
    background: #495057 !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

body.dark-mode .ui-datepicker-calendar td .ui-state-active {
    background: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;
}

body.dark-mode .ui-datepicker-calendar .ui-state-highlight,
body.dark-mode .ui-datepicker-calendar td .ui-state-highlight {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
}

/* ----- DataTables (high specificity to override Bootstrap + DataTables) ----- */
body.dark-mode div.dataTables_wrapper,
body.dark-mode .table-responsive div.dataTables_wrapper {
    color: #fff !important;
}
body.dark-mode div.dataTables_wrapper div.dataTables_length label {
    color: #fff !important;
}
body.dark-mode div.dataTables_wrapper div.dataTables_length select {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode div.dataTables_wrapper div.dataTables_filter label {
    color: #fff !important;
}
body.dark-mode div.dataTables_wrapper div.dataTables_filter input {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode div.dataTables_wrapper div.dataTables_info {
    color: #fff !important;
}
body.dark-mode div.dataTables_wrapper div.dataTables_paginate .paginate_button {
    color: #fff !important;
}
body.dark-mode div.dataTables_wrapper div.dataTables_paginate .page-link {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode div.dataTables_wrapper div.dataTables_paginate .page-item.active .page-link {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;
}
body.dark-mode div.dataTables_wrapper div.dataTables_paginate .page-link:hover {
    background-color: #495057 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
/* Dark mode: only style dt-buttons that are NOT export/reload (e.g. length dropdown wrapper) */
body.dark-mode div.dataTables_wrapper div.dt-buttons .btn:not(.buttons-reload):not(.buttons-pdf):not(.buttons-print):not(.buttons-excel):not(.buttons-csv),
body.dark-mode .dt-buttons .btn:not(.buttons-reload):not(.buttons-pdf):not(.buttons-print):not(.buttons-excel):not(.buttons-csv) {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode div.dataTables_wrapper div.dt-buttons .btn:hover:not(.buttons-reload):not(.buttons-pdf):not(.buttons-print):not(.buttons-excel):not(.buttons-csv),
body.dark-mode .dt-buttons .btn:hover:not(.buttons-reload):not(.buttons-pdf):not(.buttons-print):not(.buttons-excel):not(.buttons-csv) {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #fff !important;
}
/* Dark mode: keep export/reload buttons with same distinct colors */
body.dark-mode .dt-buttons .buttons-reload {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;
}
body.dark-mode .dt-buttons .buttons-reload:hover {
    background-color: #3395ff !important;
    border-color: #3395ff !important;
    color: #fff !important;
}
body.dark-mode .dt-buttons .buttons-pdf {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}
body.dark-mode .dt-buttons .buttons-pdf:hover {
    background-color: #e4606d !important;
    border-color: #e4606d !important;
    color: #fff !important;
}
body.dark-mode .dt-buttons .buttons-print {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}
body.dark-mode .dt-buttons .buttons-print:hover {
    background-color: #868e96 !important;
    border-color: #868e96 !important;
    color: #fff !important;
}
body.dark-mode .dt-buttons .buttons-excel {
    background-color: #217346 !important;
    border-color: #217346 !important;
    color: #fff !important;
}
body.dark-mode .dt-buttons .buttons-excel:hover {
    background-color: #2d9f5b !important;
    border-color: #2d9f5b !important;
    color: #fff !important;
}
body.dark-mode .dt-buttons .buttons-csv {
    background-color: #20c997 !important;
    border-color: #20c997 !important;
    color: #fff !important;
}
body.dark-mode .dt-buttons .buttons-csv:hover {
    background-color: #3dd4ab !important;
    border-color: #3dd4ab !important;
    color: #fff !important;
}
body.dark-mode div.dt-button-collection {
    background-color: #21262b !important;
    border-color: #343a40 !important;
}
body.dark-mode div.dt-button-collection .dt-button {
    color: #fff !important;
}
body.dark-mode div.dt-button-collection .dt-button:hover {
    background-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode div.dt-button-info {
    background-color: #21262b !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode div.dt-button-info h2 {
    background-color: #2c3238 !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
/* Table: target .table (Bootstrap) + .dataTable */
body.dark-mode table.table.dataTable,
body.dark-mode table.dataTable,
body.dark-mode .table-responsive table.table {
    background-color: #21262b !important;
    color: #fff !important;
}
body.dark-mode table.table.dataTable thead th,
body.dark-mode table.table.dataTable thead tr th,
body.dark-mode table.dataTable thead th,
body.dark-mode .table-responsive table.table thead th {
    background-color: #2c3238 !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode table.table.dataTable tbody td,
body.dark-mode table.table.dataTable tbody tr td,
body.dark-mode table.dataTable tbody td,
body.dark-mode .table-responsive table.table tbody td {
    background-color: #21262b !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode table.table.dataTable tbody tr,
body.dark-mode table.dataTable tbody tr,
body.dark-mode .table-responsive table.table tbody tr {
    background-color: #21262b !important;
}
body.dark-mode table.table.dataTable.stripe tbody tr.odd,
body.dark-mode table.table.dataTable.display tbody tr.odd,
body.dark-mode table.dataTable.stripe tbody tr.odd,
body.dark-mode table.dataTable.display tbody tr.odd {
    background-color: rgba(255,255,255,0.04) !important;
}
body.dark-mode table.table.dataTable.stripe tbody tr.even,
body.dark-mode table.table.dataTable.display tbody tr.even,
body.dark-mode table.dataTable.stripe tbody tr.even,
body.dark-mode table.dataTable.display tbody tr.even {
    background-color: #21262b !important;
}
body.dark-mode table.table.dataTable.hover tbody tr:hover,
body.dark-mode table.table.dataTable tbody tr:hover,
body.dark-mode table.dataTable.hover tbody tr:hover,
body.dark-mode table.dataTable.display tbody tr:hover {
    background-color: #343a40 !important;
}
body.dark-mode table.table.dataTable.hover tbody tr:hover td,
body.dark-mode table.dataTable tbody tr:hover td {
    background-color: #343a40 !important;
}
/* DataTables inside card (max specificity) */
body.dark-mode .content .card .card-body .table-responsive table.table thead th,
body.dark-mode .content .card .table-responsive table.table thead th {
    background-color: #2c3238 !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .content .card .card-body .table-responsive table.table tbody tr,
body.dark-mode .content .card .table-responsive table.table tbody tr {
    background-color: #21262b !important;
}
body.dark-mode .content .card .card-body .table-responsive table.table tbody td,
body.dark-mode .content .card .table-responsive table.table tbody td {
    background-color: #21262b !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .content .card .card-body .table-responsive table.table,
body.dark-mode .content .card .table-responsive table.table {
    background-color: #21262b !important;
    color: #fff !important;
}

/* Theme toggle icon: show sun in dark mode, moon in light */
body.dark-mode .theme-icon-light {
    display: none !important;
}
body.dark-mode .theme-icon-dark {
    display: inline-block !important;
}
.theme-icon-dark.d-none {
    display: none !important;
}
body.dark-mode .theme-icon-dark.d-none {
    display: inline-block !important;
}

/* Map popup (OpenLayers .ol-popup) – readable text in dark mode */
body.dark-mode .ol-popup {
    background-color: #21262b !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .ol-popup:after {
    border-top-color: #21262b !important;
}
body.dark-mode .ol-popup:before {
    border-top-color: #343a40 !important;
}
body.dark-mode .ol-popup #popup-content,
body.dark-mode .ol-popup .ol-popup-content {
    color: #fff !important;
}
body.dark-mode .ol-popup #popup-content b,
body.dark-mode .ol-popup .ol-popup-content b {
    color: #fff !important;
}
body.dark-mode .ol-popup-closer {
    color: #fff !important;
}
body.dark-mode .ol-popup-closer:hover {
    color: #fff !important;
}

/* Modal – dark mode */
body.dark-mode .modal-content {
    background-color: #21262b !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .modal-header {
    background-color: #2c3238 !important;
    border-color: #343a40 !important;
    color: #fff !important;
}
body.dark-mode .modal-header .modal-title {
    color: #fff !important;
}
body.dark-mode .modal-header .close {
    color: #fff !important;
    opacity: 0.9;
    text-shadow: none;
}
body.dark-mode .modal-header .close:hover {
    color: #fff !important;
    opacity: 1;
}
body.dark-mode .modal-body {
    background-color: #21262b !important;
    color: #fff !important;
}
body.dark-mode .modal-body label,
body.dark-mode .modal-body p,
body.dark-mode .modal-body dd,
body.dark-mode .modal-body dt,
body.dark-mode .modal-body .form-group label,
body.dark-mode .modal-body .text-muted,
body.dark-mode .modal-body small {
    color: #fff !important;
}
body.dark-mode .modal-body strong,
body.dark-mode .modal-body b {
    color: #fff !important;
}
body.dark-mode .modal-body dl dd,
body.dark-mode .modal-body dl dt {
    color: #fff !important;
}
body.dark-mode .modal-footer {
    background-color: #2c3238 !important;
    border-color: #343a40 !important;
}
body.dark-mode .modal-footer .btn-secondary {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}

/* File input (Choose file / Browse) – dark mode */
body.dark-mode .custom-file-label,
body.dark-mode .custom-file-label::after {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #fff !important;
}
body.dark-mode .custom-file-label::after {
    background-color: #495057 !important;
    color: #fff !important;
    border-left-color: #495057 !important;
}
body.dark-mode .custom-file-input {
    color: #fff;
}
body.dark-mode input[type="file"] {
    color: #fff;
}
body.dark-mode .custom-file-input:focus ~ .custom-file-label {
    border-color: #007bff !important;
}
body.dark-mode .custom-file-input:lang(en):empty ~ .custom-file-label::after {
    content: "Browse";
}

/* Navbar search: spacing between input and buttons */
.navbar-search-block .input-group .form-control-navbar {
    margin-right: 0.5rem;
}
.navbar-search-block .input-group-append {
    display: inline-flex;
    gap: 0.4rem;
}
.navbar-search-block .input-group-append .btn-navbar {
    margin-left: 0;
}

/* Home dashboard: titles and theme tokens */
.content-header h1.dashboard-page-title {
    color: inherit;
}

body:not(.dark-mode) .content-header h1.dashboard-page-title {
    color: #212529;
}

body.dark-mode .content-header h1.dashboard-page-title {
    color: #f8f9fa;
}

.dashboard-data-as-of {
    font-size: 0.875rem;
    font-weight: 500;
}

body:not(.dark-mode) .dashboard-data-as-of {
    color: #6c757d;
}

body.dark-mode .dashboard-data-as-of {
    color: rgba(255, 255, 255, 0.75) !important;
}

.dashboard-section-title,
.dashboard-section-title .text-muted {
    color: inherit;
    font-weight: 600;
}

body:not(.dark-mode) .dashboard-section-title,
body:not(.dark-mode) .dashboard-section-title .text-muted {
    color: #212529;
}

body.dark-mode .dashboard-section-title,
body.dark-mode .dashboard-section-title .text-muted {
    color: #f8f9fa !important;
}

.dashboard-kpi-metric,
.dashboard-kpi-metric a {
    color: inherit;
}

/* No line under title — override default .card-header border */
.clinical-categories-header {
    border-bottom: none !important;
}

body:not(.dark-mode) .clinical-categories-header,
body:not(.dark-mode) .clinical-categories-header .card-title {
    background: #f4f6f9 !important;
    color: #212529;
}

body.dark-mode .clinical-categories-header,
body.dark-mode .clinical-categories-header .card-title {
    background-color: #2c3238 !important;
    color: #fff;
}

/* Dashboard: accent cards in dark mode (tune rgba on dark background) */
body.dark-mode .dashboard-home .card-accent-primary {
    background: rgba(0, 123, 255, 0.1);
}

body.dark-mode .dashboard-home .card-accent-success {
    background: rgba(40, 167, 69, 0.1);
}

body.dark-mode .dashboard-home .card-accent-danger {
    background: rgba(220, 53, 69, 0.1);
}

body.dark-mode .dashboard-home .card-accent-warning {
    background: rgba(255, 193, 7, 0.1);
}

body.dark-mode .dashboard-home .card-accent-cyan,
body.dark-mode .dashboard-home .card-accent-info {
    background: rgba(23, 162, 184, 0.1);
}

body.dark-mode .dashboard-home .card-accent-secondary {
    background: rgba(108, 117, 125, 0.1);
}

body.dark-mode .dashboard-home .card-accent-indigo {
    background: rgba(102, 16, 242, 0.12);
}

body.dark-mode .dashboard-home .card-accent-teal {
    background: rgba(32, 201, 151, 0.1);
}

body.dark-mode .dashboard-home .card-accent-orange {
    background: rgba(253, 126, 20, 0.1);
}

body.dark-mode .dashboard-home .card-hover:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35) !important;
}

.dashboard-home a.text-decoration-none:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

body.dark-mode .dashboard-home a.text-decoration-none:focus-visible {
    outline-color: #6ea8fe;
}

body.dark-mode .dashboard-home .text-olive {
    color: #b8bfc4 !important;
}

/* Auth pages: logo size aligned with login */
.auth-brand-logo,
.login-logo > img,
.register-logo > img,
.lockscreen-logo > img {
    width: 100px;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.login-logo,
.register-logo,
.lockscreen-logo {
    margin-bottom: 0.75rem;
}