/* ================================================
   DARK MODE FIXES - Nefertiti Academy
   Comprehensive visibility/contrast fixes
   ================================================ */

/* ---- CSS VARIABLE OVERRIDES FOR DARK MODE ---- */
body.dark-mode {
    --white: #121f3e;
    --gray-100: #1a2744;
    --gray-200: #1e2d4a;
    --gray-300: #2d3f5e;
    --gray-400: #3d5070;
    --gray-500: #8a9bb5;
    --dark: #e0e6ed;
    --black: #f0f4f9;
    --body-bg: #0a1220;
    --section-bg: #0f1a2e;
}

/* Keep buttons and badges with correct colors */
body.dark-mode .btn-primary,
body.dark-mode .badge-primary {
    background-color: var(--primary) !important;
    color: #fff !important;
}
body.dark-mode .btn-primary:hover {
    background-color: var(--primary-hover) !important;
}

/* ---- DATERANGEPICKER FULL DARK MODE ---- */
body.dark-mode .daterangepicker {
    background-color: #1a2744 !important;
    border: 1px solid #2d3f5e !important;
    color: #e0e6ed !important;
}
body.dark-mode .daterangepicker:before {
    border-bottom-color: #2d3f5e !important;
}
body.dark-mode .daterangepicker:after {
    border-bottom-color: #1a2744 !important;
}
body.dark-mode .daterangepicker .calendar-table {
    background-color: #1a2744 !important;
    border: none !important;
}
body.dark-mode .daterangepicker .calendar-table thead tr:first-child th {
    color: #e0e6ed !important;
}
body.dark-mode .daterangepicker td,
body.dark-mode .daterangepicker th {
    color: #e0e6ed !important;
    background-color: transparent !important;
}
body.dark-mode .daterangepicker td.off,
body.dark-mode .daterangepicker td.off.in-range {
    color: #4a5a75 !important;
    background-color: transparent !important;
}
body.dark-mode .daterangepicker td.available:hover,
body.dark-mode .daterangepicker th.available:hover {
    background-color: #2d3f5e !important;
    color: #fff !important;
}
body.dark-mode .daterangepicker td.active,
body.dark-mode .daterangepicker td.active:hover,
body.dark-mode .daterangepicker td.in-range {
    background-color: var(--primary) !important;
    color: #fff !important;
}
body.dark-mode .daterangepicker td.today {
    background-color: #2d3f5e !important;
    color: #fff !important;
    font-weight: bold;
}
body.dark-mode .daterangepicker .drp-buttons {
    border-top: 1px solid #2d3f5e !important;
    background-color: #1a2744 !important;
}
body.dark-mode .daterangepicker .drp-buttons .btn-default {
    color: #e0e6ed !important;
    background-color: #2d3f5e !important;
    border-color: #3d5070 !important;
}

/* Month/Year SELECT dropdowns */
body.dark-mode .daterangepicker select.monthselect,
body.dark-mode .daterangepicker select.yearselect {
    background-color: #0f1a2e !important;
    color: #e0e6ed !important;
    border: 1px solid #3d5070 !important;
    padding: 3px 5px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}
body.dark-mode .daterangepicker select.monthselect option,
body.dark-mode .daterangepicker select.yearselect option {
    background-color: #1a2744 !important;
    color: #e0e6ed !important;
    padding: 4px 8px !important;
}
body.dark-mode .daterangepicker select.monthselect:focus,
body.dark-mode .daterangepicker select.yearselect:focus {
    outline: 1px solid var(--primary) !important;
}

/* Calendar navigation arrows */
body.dark-mode .daterangepicker .calendar-table .next span,
body.dark-mode .daterangepicker .calendar-table .prev span {
    border-color: #e0e6ed !important;
}
body.dark-mode .daterangepicker .calendar-table .next:hover,
body.dark-mode .daterangepicker .calendar-table .prev:hover {
    background-color: #2d3f5e !important;
}

/* ---- SELECT2 FULL DARK MODE ---- */
body.dark-mode .select2-container--default .select2-selection--single {
    background-color: #0f1a2e !important;
    border-color: #2d3f5e !important;
    color: #e0e6ed !important;
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e0e6ed !important;
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #5a6a85 !important;
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #7a8ba8 transparent transparent transparent !important;
}
body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: #0f1a2e !important;
    border-color: #2d3f5e !important;
}
body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #2d3f5e !important;
    border-color: #3d5070 !important;
    color: #e0e6ed !important;
}
body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #e0e6ed !important;
}
/* Select2 dropdown is appended to body */
body.dark-mode .select2-dropdown {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
}
body.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #0f1a2e !important;
    border-color: #2d3f5e !important;
    color: #e0e6ed !important;
}
body.dark-mode .select2-container--default .select2-results__option {
    color: #e0e6ed !important;
}
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary) !important;
    color: #fff !important;
}
body.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #2d3f5e !important;
}

/* ---- FORM CONTROLS DARK MODE ---- */
body.dark-mode .form-control,
body.dark-mode input[type=text],
body.dark-mode input[type=email],
body.dark-mode input[type=password],
body.dark-mode input[type=number],
body.dark-mode input[type=tel],
body.dark-mode input[type=url],
body.dark-mode input[type=date],
body.dark-mode input[type=search],
body.dark-mode textarea,
body.dark-mode select.form-control {
    background-color: #0f1a2e !important;
    border-color: #2d3f5e !important;
    color: #e0e6ed !important;
}
body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: #0f1a2e !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.15rem rgba(1, 112, 255, 0.25) !important;
}
body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder {
    color: #5a6a85 !important;
}
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
    background-color: #0a1220 !important;
    color: #5a6a85 !important;
    opacity: 0.7;
}

/* Labels */
body.dark-mode label,
body.dark-mode .form-group-label,
body.dark-mode .input-label {
    color: #b8c5d6 !important;
}

/* ---- TEXT CONTRAST OVERRIDES ---- */
body.dark-mode .text-dark {
    color: #e0e6ed !important;
}
body.dark-mode .text-secondary {
    color: #b8c5d6 !important;
}
body.dark-mode .text-black {
    color: #f0f4f9 !important;
}
body.dark-mode .text-muted {
    color: #7a8ba8 !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #f0f4f9;
}
body.dark-mode p {
    color: #b8c5d6;
}

/* ---- PANEL SPECIFIC FIXES ---- */
body.dark-mode .panel-setting-tabs .nav-link {
    color: #7a8ba8 !important;
}
body.dark-mode .panel-setting-tabs .nav-link.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}
body.dark-mode .panel-sidebar a,
body.dark-mode .panel-sidebar .menu-item {
    color: #b8c5d6 !important;
}
body.dark-mode .panel-sidebar a:hover,
body.dark-mode .panel-sidebar a.active,
body.dark-mode .panel-sidebar .menu-item.active a {
    color: #fff !important;
}

/* ---- CARD / BACKGROUND FIXES ---- */
body.dark-mode .bg-white {
    background-color: #121f3e !important;
}
body.dark-mode .card {
    background-color: #121f3e !important;
    border-color: #2d3f5e !important;
}
body.dark-mode .card-header {
    background-color: #1a2744 !important;
    border-bottom-color: #2d3f5e !important;
}
body.dark-mode .card-footer {
    background-color: #1a2744 !important;
    border-top-color: #2d3f5e !important;
}

/* ---- TABLE DARK MODE ---- */
body.dark-mode .table {
    color: #e0e6ed !important;
}
body.dark-mode .table thead th {
    color: #b8c5d6 !important;
    border-bottom-color: #2d3f5e !important;
}
body.dark-mode .table td,
body.dark-mode .table th {
    border-top-color: #2d3f5e !important;
}
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ---- BORDERS ---- */
body.dark-mode .border-gray-200,
body.dark-mode .border-bottom-gray-200,
body.dark-mode .border-top-gray-200,
body.dark-mode .border-right-gray-200,
body.dark-mode .border-left-gray-200 {
    border-color: #2d3f5e !important;
}
body.dark-mode .border-gray-300 {
    border-color: #2d3f5e !important;
}

/* ---- DROPDOWN MENUS ---- */
body.dark-mode .dropdown-menu {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
}
body.dark-mode .dropdown-item {
    color: #e0e6ed !important;
}
body.dark-mode .dropdown-item:hover {
    background-color: #2d3f5e !important;
    color: #fff !important;
}

/* ---- MODALS ---- */
body.dark-mode .modal-content {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
    color: #e0e6ed !important;
}
body.dark-mode .modal-header {
    border-bottom-color: #2d3f5e !important;
}
body.dark-mode .modal-header .close {
    color: #e0e6ed !important;
    text-shadow: none !important;
}
body.dark-mode .modal-footer {
    border-top-color: #2d3f5e !important;
}

/* ---- TOOLTIPS ---- */
body.dark-mode .tooltip-inner {
    background-color: #2d3f5e !important;
    color: #fff !important;
}

/* ---- SWEET ALERT ---- */
body.dark-mode .swal2-popup {
    background-color: #1a2744 !important;
    color: #e0e6ed !important;
}
body.dark-mode .swal2-title {
    color: #f0f4f9 !important;
}
body.dark-mode .swal2-html-container {
    color: #b8c5d6 !important;
}

/* ---- ALERTS ---- */
body.dark-mode .alert-info {
    background-color: #162040 !important;
    border-color: #2d4a6e !important;
    color: #7eb2ff !important;
}
body.dark-mode .alert-warning {
    background-color: #2a2010 !important;
    border-color: #4a3a1a !important;
    color: #ffa200 !important;
}
body.dark-mode .alert-danger {
    background-color: #2a1010 !important;
    border-color: #4a1a1a !important;
    color: #ff6b6b !important;
}
body.dark-mode .alert-success {
    background-color: #102a1a !important;
    border-color: #1a4a2a !important;
    color: #43d477 !important;
}

/* ---- CHECKBOX / RADIO / SWITCH ---- */
body.dark-mode .custom-checkbox .custom-control-label::before,
body.dark-mode .custom-radio .custom-control-label::before {
    background-color: #0f1a2e !important;
    border-color: #3d5070 !important;
}
body.dark-mode .custom-control-label {
    color: #e0e6ed !important;
}
body.dark-mode .custom-switch .custom-control-label::before {
    background-color: #2d3f5e !important;
    border-color: #3d5070 !important;
}

/* ---- BREADCRUMB ---- */
body.dark-mode .breadcrumb {
    background-color: transparent !important;
}
body.dark-mode .breadcrumb-item a {
    color: #8a9bb5 !important;
}
body.dark-mode .breadcrumb-item.active {
    color: #e0e6ed !important;
}

/* ---- PAGINATION ---- */
body.dark-mode .page-link {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
    color: #e0e6ed !important;
}
body.dark-mode .page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* ---- SCROLLBAR ---- */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.dark-mode ::-webkit-scrollbar-track {
    background: #0f1a2e;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #2d3f5e;
    border-radius: 4px;
}

/* ---- BADGE FIXES ---- */
body.dark-mode .badge-secondary {
    background-color: #2d3f5e !important;
    color: #e0e6ed !important;
}
body.dark-mode .badge-light {
    background-color: #1e2d4a !important;
    color: #e0e6ed !important;
}

/* ---- TAB NAVIGATION ---- */
body.dark-mode .nav-tabs {
    border-bottom-color: #2d3f5e !important;
}
body.dark-mode .nav-tabs .nav-link {
    color: #7a8ba8 !important;
}
body.dark-mode .nav-tabs .nav-link.active {
    color: #fff !important;
    background-color: transparent !important;
    border-color: #2d3f5e #2d3f5e transparent !important;
}
body.dark-mode .nav-tabs .nav-link:hover {
    color: #e0e6ed !important;
    border-color: transparent !important;
}

/* ---- MAP CONTROLS ---- */
body.dark-mode .leaflet-control-zoom a {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
    color: #e0e6ed !important;
}

/* ---- PROGRESS BAR ---- */
body.dark-mode .progress {
    background-color: #1a2744 !important;
}

/* ---- NATIVE SELECT STYLING (for year picker) ---- */
body.dark-mode select {
    color-scheme: dark;
}

/* ---- LIST GROUP ---- */
body.dark-mode .list-group-item {
    background-color: #121f3e !important;
    border-color: #2d3f5e !important;
    color: #e0e6ed !important;
}

/* ==================================================
   ADMIN PANEL FIXES
   ================================================== */
/* Admin daterangepicker */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    font-size: 13px;
    padding: 3px 5px;
    border-radius: 4px;
}

/* Admin table readability */
.main-content .table td {
    vertical-align: middle;
}

/* Admin section header */
.section .section-header h1 {
    font-size: 20px;
}

/* ---- LANGUAGE DROPDOWN DARK MODE ---- */
body.dark-mode .language-dropdown {
    background-color: #1a2744 !important;
    border: 1px solid #2d3f5e !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .language-dropdown .language-dropdown__item {
    color: #e0e6ed !important;
}
body.dark-mode .language-dropdown .language-dropdown__item:hover,
body.dark-mode .language-dropdown .language-dropdown__item.active {
    background-color: #2d3f5e !important;
}
body.dark-mode .language-dropdown .language-dropdown__item .text-dark {
    color: #e0e6ed !important;
}
body.dark-mode .language-dropdown .language-dropdown__item span {
    color: #e0e6ed !important;
}
body.dark-mode .language-dropdown .text-gray-500 {
    color: #8a9bb5 !important;
}

/* ---- NOTIFICATION DROPDOWN ---- */
body.dark-mode .notification-dropdown,
body.dark-mode .notifications-dropdown,
body.dark-mode .header-notification-dropdown {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
}

/* ---- CART DROPDOWN ---- */
body.dark-mode .cart-drawer,
body.dark-mode .cart-dropdown {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
}
body.dark-mode .cart-drawer .text-dark {
    color: #e0e6ed !important;
}

/* ---- HEADER DROPDOWNS GENERAL ---- */
body.dark-mode [class*=__drawer],
body.dark-mode [class*=-drawer] {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
}
body.dark-mode [class*=__drawer] .text-dark,
body.dark-mode [class*=-drawer] .text-dark {
    color: #e0e6ed !important;
}

/* ---- POPOVER ---- */
body.dark-mode .popover {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
}
body.dark-mode .popover-body {
    color: #e0e6ed !important;
}
body.dark-mode .popover .arrow::after {
    border-bottom-color: #1a2744 !important;
}

/* ---- PANEL HEADER USER MENU ---- */
body.dark-mode .panel-header-user-dropdown {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
}

/* ---- ADDITIONAL BG-WHITE OVERRIDES ---- */
body.dark-mode .bg-white,
body.dark-mode .bg-hover-white:hover {
    background-color: #121f3e !important;
}
body.dark-mode .bg-transparent {
    background-color: transparent !important;
}

/* ---- INPUT GROUP ADDON ---- */
body.dark-mode .input-group-text {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
    color: #e0e6ed !important;
}

/* ---- ACCORDION ---- */
body.dark-mode .accordion .card-header {
    background-color: #1a2744 !important;
}
body.dark-mode .accordion .card-body {
    background-color: #121f3e !important;
}

/* ---- SIMPLEBAR SCROLLBAR ---- */
body.dark-mode .simplebar-scrollbar::before {
    background-color: #3d5070 !important;
}

/* ---- PANEL SIDEBAR SPECIFIC ---- */
body.dark-mode .panel-sidebar__menu-section-title {
    color: #5a6a85 !important;
}

/* ---- FIX WHITE TEXT ON WHITE BG (buttons inside dark cards) ---- */
body.dark-mode .btn-white,
body.dark-mode .btn-outline-white {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
    color: #e0e6ed !important;
}

/* ---- COURSE CARD FIXES ---- */
body.dark-mode .course-card,
body.dark-mode .webinar-card {
    background-color: #121f3e !important;
    border-color: #2d3f5e !important;
}
body.dark-mode .course-card .text-dark,
body.dark-mode .webinar-card .text-dark {
    color: #e0e6ed !important;
}

/* ---- CALENDAR WIDGET ---- */
body.dark-mode .events-calendar {
    background-color: #121f3e !important;
}
body.dark-mode .events-calendar td,
body.dark-mode .events-calendar th {
    color: #e0e6ed !important;
}

/* ---- EMPTY STATE ILLUSTRATIONS ---- */
body.dark-mode .empty-state h3,
body.dark-mode .empty-state p {
    color: #b8c5d6 !important;
}

/* ---- COURSE CARD TITLE FIX ---- */
.course-grid-card-1__body .course-title {
    max-height: none !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}
.rtl .course-grid-card-1__body .course-title {
    text-align: right !important;
}
.course-grid-card-1__body {
    height: auto !important;
    min-height: 192px !important;
    overflow: visible !important;
}
.course-grid-card-1__body .d-flex.flex-column.px-12 {
    overflow: visible !important;
}
.course-grid-card-1 {
    overflow: hidden !important;
    border-radius: 16px !important;
}

/* ---- ADMIN PANEL MODAL/POPUP FIXES ---- */
.modal-content {
    color: #333 !important;
}
.modal-content .modal-body,
.modal-content .modal-header,
.modal-content .modal-footer {
    color: #333 !important;
}
.modal-content p,
.modal-content span,
.modal-content div {
    color: #333 !important;
}
.modal-content h1, .modal-content h2, .modal-content h3,
.modal-content h4, .modal-content h5, .modal-content h6 {
    color: #222 !important;
}

/* Admin notification detail popup */
.swal2-popup,
.swal2-popup .swal2-html-container,
.swal2-popup .swal2-title,
.swal2-popup .swal2-content {
    color: #333 !important;
}

/* Admin custom modal/popup used for notification detail */
.admin-notification-modal,
.notification-detail-modal,
[class*=notification] .modal-content {
    background-color: #fff !important;
    color: #333 !important;
}

/* Fix the specific admin notification show popup */
.main-content .modal-content {
    background-color: #fff !important;
    color: #333 !important;
}
.main-content .modal-content * {
    color: #333 !important;
}
.main-content .modal-content .btn {
    color: #fff !important;
}
.main-content .modal-content .close {
    color: #999 !important;
}

/* ================================================
   PERSIAN DATEPICKER / TIME PICKER - DARK MODE
   Fixes low-contrast time selector in meeting schedule
   ================================================ */

/* --- Time picker inside modals (white bg context) --- */
.datepicker-plot-area {
    background-color: #fff !important;
    border: 1px solid #d0d0d0 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
}

.datepicker-plot-area .datepicker-time-view {
    background: #f8f9fa !important;
    border-top: 1px solid #e0e0e0 !important;
}

.datepicker-plot-area .datepicker-time-view .up-btn,
.datepicker-plot-area .datepicker-time-view .down-btn {
    color: #333 !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.datepicker-plot-area .datepicker-time-view .up-btn:hover,
.datepicker-plot-area .datepicker-time-view .down-btn:hover {
    background-color: #e9ecef !important;
    color: #000 !important;
}

.datepicker-plot-area .datepicker-time-view input {
    color: #222 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    background: transparent !important;
    border: none !important;
}

.datepicker-plot-area .datepicker-time-view .divider,
.datepicker-plot-area .datepicker-time-view .divider span {
    color: #333 !important;
    font-weight: bold !important;
}

.datepicker-plot-area .toolbox .pwt-btn-submit,
.datepicker-plot-area .toolbox .pwt-btn-calendar,
.datepicker-plot-area .toolbox .pwt-btn-today {
    color: #333 !important;
    font-weight: bold !important;
    background-color: #e9ecef !important;
    border-radius: 4px !important;
}

.datepicker-plot-area .toolbox .pwt-btn-submit:hover,
.datepicker-plot-area .toolbox .pwt-btn-calendar:hover,
.datepicker-plot-area .toolbox .pwt-btn-today:hover {
    background-color: #dee2e6 !important;
    color: #000 !important;
}

/* Navigator buttons */
.datepicker-plot-area .datepicker-navigator .pwt-btn-next,
.datepicker-plot-area .datepicker-navigator .pwt-btn-switch,
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev {
    color: #333 !important;
    font-weight: bold !important;
}

.datepicker-plot-area .datepicker-navigator .pwt-btn-next:hover,
.datepicker-plot-area .datepicker-navigator .pwt-btn-switch:hover,
.datepicker-plot-area .datepicker-navigator .pwt-btn-prev:hover {
    background-color: #e9ecef !important;
}

/* Calendar day cells */
.datepicker-plot-area .datepicker-day-view .table-days td span {
    color: #333 !important;
    background-color: #fff !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span:hover {
    background-color: #e9ecef !important;
    color: #000 !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td.selected span {
    background-color: #00b074 !important;
    color: #fff !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td.today span {
    background-color: #333 !important;
    color: #fff !important;
}

/* --- DARK MODE: Persian Datepicker overrides --- */
body.dark-mode .datepicker-plot-area {
    background-color: #1a2744 !important;
    border: 1px solid #3d5070 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .datepicker-plot-area .datepicker-time-view {
    background: #0f1a2e !important;
    border-top: 1px solid #2d3f5e !important;
}

body.dark-mode .datepicker-plot-area .datepicker-time-view .up-btn,
body.dark-mode .datepicker-plot-area .datepicker-time-view .down-btn {
    color: #e0e6ed !important;
}

body.dark-mode .datepicker-plot-area .datepicker-time-view .up-btn:hover,
body.dark-mode .datepicker-plot-area .datepicker-time-view .down-btn:hover {
    background-color: #2d3f5e !important;
    color: #fff !important;
}

body.dark-mode .datepicker-plot-area .datepicker-time-view input {
    color: #fff !important;
}

body.dark-mode .datepicker-plot-area .datepicker-time-view .divider,
body.dark-mode .datepicker-plot-area .datepicker-time-view .divider span {
    color: #e0e6ed !important;
}

body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-submit,
body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-calendar,
body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-today {
    color: #e0e6ed !important;
    background-color: #2d3f5e !important;
}

body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-submit:hover,
body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-calendar:hover,
body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-today:hover {
    background-color: #3d5070 !important;
    color: #fff !important;
}

body.dark-mode .datepicker-plot-area .datepicker-navigator .pwt-btn-next,
body.dark-mode .datepicker-plot-area .datepicker-navigator .pwt-btn-switch,
body.dark-mode .datepicker-plot-area .datepicker-navigator .pwt-btn-prev {
    color: #e0e6ed !important;
    background-color: rgba(45, 63, 94, 0.5) !important;
}

body.dark-mode .datepicker-plot-area .datepicker-navigator .pwt-btn-next:hover,
body.dark-mode .datepicker-plot-area .datepicker-navigator .pwt-btn-switch:hover,
body.dark-mode .datepicker-plot-area .datepicker-navigator .pwt-btn-prev:hover {
    background-color: #3d5070 !important;
    color: #fff !important;
}

body.dark-mode .datepicker-plot-area .datepicker-day-view .table-days td span {
    color: #e0e6ed !important;
    background-color: #1a2744 !important;
}

body.dark-mode .datepicker-plot-area .datepicker-day-view .table-days td span:hover {
    background-color: #2d3f5e !important;
    color: #fff !important;
}

body.dark-mode .datepicker-plot-area .datepicker-day-view .table-days td.selected span {
    background-color: var(--primary) !important;
    color: #fff !important;
}

body.dark-mode .datepicker-plot-area .datepicker-day-view .table-days td.today span {
    background-color: #2d3f5e !important;
    color: #fff !important;
}

body.dark-mode .datepicker-plot-area .datepicker-day-view .table-days td span.other-month {
    color: #4a5a75 !important;
}

body.dark-mode .datepicker-plot-area .datepicker-day-view .table-days td.disabled span {
    background-color: #0f1a2e !important;
    color: #3d5070 !important;
}

body.dark-mode .datepicker-plot-area .datepicker-year-view .year-item,
body.dark-mode .datepicker-plot-area .datepicker-month-view .month-item {
    color: #e0e6ed !important;
    background-color: #1a2744 !important;
}

body.dark-mode .datepicker-plot-area .datepicker-year-view .year-item:hover,
body.dark-mode .datepicker-plot-area .datepicker-month-view .month-item:hover {
    background-color: #2d3f5e !important;
    color: #fff !important;
}

body.dark-mode .datepicker-plot-area .datepicker-year-view .year-item.selected,
body.dark-mode .datepicker-plot-area .datepicker-month-view .month-item.selected {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* --- BOOTSTRAP CLOCKPICKER DARK MODE (if used elsewhere) --- */
body.dark-mode .clockpicker-popover {
    background-color: #1a2744 !important;
    border-color: #3d5070 !important;
}

body.dark-mode .clockpicker-popover .popover-title {
    background-color: #0f1a2e !important;
    color: #e0e6ed !important;
}

body.dark-mode .clockpicker-popover .popover-content {
    background-color: #1a2744 !important;
}

body.dark-mode .clockpicker-plate {
    background-color: #0f1a2e !important;
    border-color: #3d5070 !important;
}

body.dark-mode .clockpicker-tick {
    color: #e0e6ed !important;
}

body.dark-mode .clockpicker-tick.active,
body.dark-mode .clockpicker-tick:hover {
    background-color: rgba(1, 112, 255, 0.25) !important;
    color: #fff !important;
}

body.dark-mode .clockpicker-button {
    background-color: #1a2744 !important;
    border-top-color: #2d3f5e !important;
    color: #e0e6ed !important;
}

body.dark-mode .clockpicker-button:hover {
    background-color: #2d3f5e !important;
}

body.dark-mode .clockpicker-canvas-bg {
    fill: rgba(1, 112, 255, 0.25) !important;
}

body.dark-mode .clockpicker-canvas-bearing,
body.dark-mode .clockpicker-canvas-fg {
    fill: var(--primary) !important;
}

body.dark-mode .clockpicker-canvas line {
    stroke: var(--primary) !important;
}

/* --- Meeting modal time picker (inside white modal on dark mode) --- */
body.dark-mode .modal-content .datepicker-plot-area {
    background-color: #1a2744 !important;
    border: 1px solid #3d5070 !important;
}

body.dark-mode .modal-content .datepicker-plot-area .datepicker-time-view {
    background: #0f1a2e !important;
    border-top: 1px solid #2d3f5e !important;
}

body.dark-mode .modal-content .datepicker-plot-area .datepicker-time-view input {
    color: #fff !important;
}

body.dark-mode .modal-content .datepicker-plot-area .datepicker-time-view .up-btn,
body.dark-mode .modal-content .datepicker-plot-area .datepicker-time-view .down-btn {
    color: #e0e6ed !important;
}

body.dark-mode .modal-content .datepicker-plot-area .datepicker-time-view .divider,
body.dark-mode .modal-content .datepicker-plot-area .datepicker-time-view .divider span {
    color: #e0e6ed !important;
}

body.dark-mode .modal-content .datepicker-plot-area .toolbox .pwt-btn-submit {
    color: #e0e6ed !important;
    background-color: #2d3f5e !important;
}

/* --- Meeting page section headers and labels visibility --- */
body.dark-mode .meeting-settings-section-title,
body.dark-mode .panel-section-card-title {
    color: #e0e6ed !important;
}

/* Fix the selected-time tags in timesheet */
body.dark-mode .selected-time {
    background-color: #1a2744 !important;
    border: 1px solid #2d3f5e !important;
}

body.dark-mode .selected-time .inner-time {
    color: #e0e6ed !important;
}

/* --- Datepicker container (wrapper outside the plot area) --- */
body.dark-mode .datepicker-container {
    background-color: transparent !important;
}

/* ================================================
   SWAL CUSTOM MODAL FORM FIXES
   The panel uses light-mode class but has dark theme colors,
   so SweetAlert modals need explicit form styling
   ================================================ */

/* Form controls inside SweetAlert custom modals */
.swal2-popup .js-custom-modal .form-control,
.swal2-popup .js-custom-modal input[type="text"],
.swal2-popup .js-custom-modal textarea,
.swal2-popup .js-custom-modal select {
    color: #333 !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
}

.swal2-popup .js-custom-modal .form-control::placeholder {
    color: #999 !important;
}

.swal2-popup .js-custom-modal .form-group-label,
.swal2-popup .js-custom-modal label {
    color: #555 !important;
}

/* Select2 inside SweetAlert modal */
.swal2-popup .select2-container--default .select2-selection--single {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
}

.swal2-popup .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333 !important;
}

/* Persian datepicker inputs */
.datepicker-plot-area .datepicker-time-view input {
    color: #222 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* Up/down arrows stronger contrast */
.datepicker-plot-area .datepicker-time-view .up-btn,
.datepicker-plot-area .datepicker-time-view .down-btn {
    color: #222 !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Divider colon */
.datepicker-plot-area .datepicker-time-view .divider,
.datepicker-plot-area .datepicker-time-view .divider span {
    color: #222 !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* Submit button */
.datepicker-plot-area .toolbox .pwt-btn-submit {
    color: #fff !important;
    background-color: #1B3564 !important;
    border-radius: 4px !important;
    padding: 2px 12px !important;
    font-size: 12px !important;
}

.datepicker-plot-area .toolbox .pwt-btn-submit:hover {
    background-color: #152A50 !important;
}

/* Background of time view */
.datepicker-plot-area .datepicker-time-view {
    background: #f0f2f5 !important;
    border-top: 1px solid #ddd !important;
}

/* Plot area itself */
.datepicker-plot-area {
    border: 1px solid #bbb !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
}

/* Time segment hover effect */
.datepicker-plot-area .datepicker-time-view > .time-segment:hover {
    background-color: #e9ecef !important;
}

.datepicker-plot-area .datepicker-time-view .up-btn:hover,
.datepicker-plot-area .datepicker-time-view .down-btn:hover {
    background-color: #dee2e6 !important;
    color: #000 !important;
}

/* ================================================
   PERSIAN DATEPICKER TIME INPUTS - HIGH SPECIFICITY FIX
   The hour-input and minute-input get overridden by panel
   theme variables, so we need very specific selectors
   ================================================ */

.datepicker-plot-area .datepicker-time-view input.hour-input,
.datepicker-plot-area .datepicker-time-view input.minute-input,
.datepicker-plot-area .datepicker-time-view input.second-input,
.datepicker-plot-area .datepicker-time-view .time-segment input,
.datepicker-plot-area .datepicker-time-view .hour input,
.datepicker-plot-area .datepicker-time-view .minute input,
.datepicker-plot-area .datepicker-time-view input[type="text"],
.datepicker-time-view input.hour-input,
.datepicker-time-view input.minute-input,
.datepicker-time-view .time-segment input {
    color: #222 !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    border: none !important;
    text-align: center !important;
    -webkit-text-fill-color: #222 !important;
}

/* Also fix the form-control input in the modal that shows the time value */
.swal2-popup .date-clock-picker,
.swal2-popup input.date-clock-picker,
.js-custom-modal .date-clock-picker,
.js-custom-modal input.date-clock-picker {
    color: #333 !important;
    -webkit-text-fill-color: #333 !important;
}

/* Form inputs inside the custom modal that may be disabled/readonly */
.swal2-popup .form-control[disabled],
.swal2-popup .form-control[readonly],
.swal2-popup input[disabled],
.swal2-popup input[readonly] {
    color: #555 !important;
    -webkit-text-fill-color: #555 !important;
    opacity: 1 !important;
}

/* ================================================
   SWEETALERT MODAL - DARK THEME FIX
   Makes all SweetAlert popups match the dark panel theme.
   Fixes invisible text in meeting time slot popup and
   all form controls inside modals.
   ================================================ */

/* --- SweetAlert popup container: dark background --- */
body.dark-mode .swal2-popup {
    background-color: #1a2744 !important;
    border: 1px solid #2d3f5e !important;
    color: #e0e6ed !important;
}

body.dark-mode .swal2-popup .swal2-html-container {
    color: #e0e6ed !important;
}

/* --- Custom modal wrapper inside SweetAlert --- */
body.dark-mode .swal2-popup .js-custom-modal {
    color: #e0e6ed !important;
}

/* Title and subtitle */
body.dark-mode .swal2-popup .js-custom-modal h3,
body.dark-mode .swal2-popup .js-custom-modal h4,
body.dark-mode .swal2-popup .js-custom-modal .text-black,
body.dark-mode .swal2-popup .swal2-title {
    color: #e0e6ed !important;
    -webkit-text-fill-color: #e0e6ed !important;
}

body.dark-mode .swal2-popup .js-custom-modal p,
body.dark-mode .swal2-popup .js-custom-modal span,
body.dark-mode .swal2-popup .js-custom-modal div {
    color: #c5cdd8 !important;
}

/* Close button */
body.dark-mode .swal2-popup .modal-close-btn,
body.dark-mode .swal2-popup .close-swl {
    color: #8a9bb5 !important;
    -webkit-text-fill-color: #8a9bb5 !important;
}

body.dark-mode .swal2-popup .modal-close-btn:hover,
body.dark-mode .swal2-popup .close-swl:hover {
    color: #e0e6ed !important;
    -webkit-text-fill-color: #e0e6ed !important;
}

/* --- Form labels --- */
body.dark-mode .swal2-popup .form-group-label,
body.dark-mode .swal2-popup label {
    color: #8a9bb5 !important;
    -webkit-text-fill-color: #8a9bb5 !important;
}

/* --- Form controls (inputs, textarea, select) --- */
body.dark-mode .swal2-popup .form-control,
body.dark-mode .swal2-popup input[type="text"],
body.dark-mode .swal2-popup input[type="number"],
body.dark-mode .swal2-popup textarea,
body.dark-mode .swal2-popup select {
    background-color: #0f1a2e !important;
    color: #e0e6ed !important;
    -webkit-text-fill-color: #e0e6ed !important;
    border: 1px solid #2d3f5e !important;
}

body.dark-mode .swal2-popup .form-control:focus,
body.dark-mode .swal2-popup input:focus,
body.dark-mode .swal2-popup textarea:focus {
    border-color: #3d7fff !important;
    box-shadow: 0 0 0 2px rgba(61, 127, 255, 0.15) !important;
}

body.dark-mode .swal2-popup .form-control::placeholder {
    color: #4a5a75 !important;
    -webkit-text-fill-color: #4a5a75 !important;
}

/* --- Time picker input (date-clock-picker) inside modal --- */
body.dark-mode .swal2-popup .date-clock-picker,
body.dark-mode .swal2-popup input.date-clock-picker {
    background-color: #0f1a2e !important;
    color: #e0e6ed !important;
    -webkit-text-fill-color: #e0e6ed !important;
    border: 1px solid #2d3f5e !important;
}

/* Icon inside the input group */
body.dark-mode .swal2-popup .has-translation {
    background-color: #1a2744 !important;
    color: #8a9bb5 !important;
}

body.dark-mode .swal2-popup .has-translation svg,
body.dark-mode .swal2-popup .has-translation .icons {
    color: #8a9bb5 !important;
}

/* --- Select2 inside modal --- */
body.dark-mode .swal2-popup .select2-container--default .select2-selection--single {
    background-color: #0f1a2e !important;
    border: 1px solid #2d3f5e !important;
}

body.dark-mode .swal2-popup .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e0e6ed !important;
    -webkit-text-fill-color: #e0e6ed !important;
}

body.dark-mode .swal2-popup .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #8a9bb5 transparent transparent transparent !important;
}

/* Select2 dropdown (rendered outside the modal at body level) */
body.dark-mode .select2-dropdown {
    background-color: #1a2744 !important;
    border-color: #2d3f5e !important;
}

body.dark-mode .select2-results__option {
    color: #e0e6ed !important;
}

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

/* --- Modal footer --- */
body.dark-mode .swal2-popup .custom-modal-footer {
    background-color: #0f1a2e !important;
    border-top: 1px solid #2d3f5e !important;
}

/* Save button in modal footer */
body.dark-mode .swal2-popup .custom-modal-footer .btn-primary,
body.dark-mode .swal2-popup .js-save-time {
    background-color: var(--primary) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
}

/* --- Persian Datepicker time picker in dark mode (inside modal) --- */
body.dark-mode .datepicker-plot-area {
    background-color: #1a2744 !important;
    border: 1px solid #2d3f5e !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
}

body.dark-mode .datepicker-plot-area .datepicker-time-view {
    background: #0f1a2e !important;
    border-top: 1px solid #2d3f5e !important;
}

/* Time value inputs (hour, minute) - MUST be visible */
body.dark-mode .datepicker-plot-area .datepicker-time-view input,
body.dark-mode .datepicker-plot-area .datepicker-time-view input.hour-input,
body.dark-mode .datepicker-plot-area .datepicker-time-view input.minute-input,
body.dark-mode .datepicker-plot-area .datepicker-time-view input.second-input,
body.dark-mode .datepicker-plot-area .datepicker-time-view .time-segment input,
body.dark-mode .datepicker-time-view input.hour-input,
body.dark-mode .datepicker-time-view input.minute-input,
body.dark-mode .datepicker-time-view .time-segment input {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    border: none !important;
    text-align: center !important;
}

/* Up/down arrows */
body.dark-mode .datepicker-plot-area .datepicker-time-view .up-btn,
body.dark-mode .datepicker-plot-area .datepicker-time-view .down-btn {
    color: #e0e6ed !important;
    font-weight: bold !important;
}

body.dark-mode .datepicker-plot-area .datepicker-time-view .up-btn:hover,
body.dark-mode .datepicker-plot-area .datepicker-time-view .down-btn:hover {
    background-color: #2d3f5e !important;
    color: #fff !important;
}

/* Divider colon */
body.dark-mode .datepicker-plot-area .datepicker-time-view .divider,
body.dark-mode .datepicker-plot-area .datepicker-time-view .divider span {
    color: #e0e6ed !important;
    -webkit-text-fill-color: #e0e6ed !important;
    font-weight: bold !important;
}

/* Submit button in time picker */
body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-submit,
body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-calendar,
body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-today {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background-color: #2d3f5e !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
}

body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-submit:hover,
body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-calendar:hover,
body.dark-mode .datepicker-plot-area .toolbox .pwt-btn-today:hover {
    background-color: #3d5070 !important;
}

/* Time segment hover */
body.dark-mode .datepicker-plot-area .datepicker-time-view > .time-segment:hover {
    background-color: #1a2744 !important;
}

/* --- Invalid feedback text in modals --- */
body.dark-mode .swal2-popup .invalid-feedback {
    color: #ff6b6b !important;
    -webkit-text-fill-color: #ff6b6b !important;
}

/* --- Icon container in modal header --- */
body.dark-mode .swal2-popup .bg-info-gradient {
    background: linear-gradient(135deg, #1e88e5, #1565c0) !important;
}

/* --- Success/alert SweetAlert popups --- */
body.dark-mode .swal2-popup .swal2-icon {
    border-color: rgba(224, 230, 237, 0.3) !important;
}

body.dark-mode .swal2-popup .text-center p,
body.dark-mode .swal2-popup .text-center .text-black {
    color: #e0e6ed !important;
    -webkit-text-fill-color: #e0e6ed !important;
}

/* --- Timesheet page: selected time tags (existing times) --- */
body.dark-mode .selected-time {
    background-color: #1a2744 !important;
    border: 1px solid #2d3f5e !important;
}

body.dark-mode .selected-time .inner-time {
    color: #e0e6ed !important;
    -webkit-text-fill-color: #e0e6ed !important;
}