/*
 * Taskify dark mode
 * Activated by .dark-mode on html or body.
 */

html.dark-mode,
body.dark-mode {
    --dark-bg: #111215;
    --dark-shell: #17181d;
    --dark-panel: #1b1c22;
    --dark-panel-soft: #202129;
    --dark-elevated: #242630;
    --dark-border: #2b2d36;
    --dark-border-soft: rgba(255, 255, 255, 0.06);
    --dark-text: #edf0f5;
    --dark-muted: #9ca3af;
    --dark-subtle: #747b88;
    --dark-accent: #7c5cff;
    --dark-accent-2: #f28a2e;
    --dark-success: #34d399;
    --dark-warning: #fbbf24;
    --dark-danger: #f43f5e;
    --dark-info: #38bdf8;
    color-scheme: dark;
    background: var(--dark-bg) !important;
}

.dark-mode .badge.doc-upload-badge {
    font-weight: 700;
}

.dark-mode .badge.doc-upload-badge--ipp-ready {
    background: rgba(37, 99, 235, 0.42) !important;
    border-color: rgba(147, 197, 253, 0.82) !important;
    color: #eff6ff !important;
    box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.16) inset;
}

.dark-mode .badge.doc-upload-badge--spk-ready {
    background: rgba(22, 163, 74, 0.38) !important;
    border-color: rgba(134, 239, 172, 0.78) !important;
    color: #f0fdf4 !important;
    box-shadow: 0 0 0 1px rgba(134, 239, 172, 0.14) inset;
}

.dark-mode .badge.doc-upload-badge--empty {
    background: rgba(15, 23, 42, 0.28) !important;
    border-color: rgba(226, 232, 240, 0.58) !important;
    border-style: dashed !important;
    color: #e2e8f0 !important;
}

.dark-mode .doc-upload-btn--ipp-ready.btn-primary {
    background: #2563eb !important;
    border-color: #93c5fd !important;
    color: #ffffff !important;
}

.dark-mode .doc-upload-btn--spk-ready.btn-success {
    background: #16a34a !important;
    border-color: #86efac !important;
    color: #ffffff !important;
}

.dark-mode .btn.doc-upload-btn--empty,
.dark-mode .btn.doc-upload-btn--empty:hover,
.dark-mode .btn.doc-upload-btn--empty:focus {
    background: transparent !important;
    border-color: rgba(226, 232, 240, 0.58) !important;
    border-style: dashed !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}

html.dark-mode body,
body.dark-mode {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.dark-mode .layout-wrapper,
.dark-mode .layout-container,
.dark-mode .layout-page,
.dark-mode .content-wrapper,
.dark-mode .container-fluid,
.dark-mode .container-p-y {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.dark-mode .layout-page {
    box-shadow: inset 1px 0 0 var(--dark-border-soft);
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode .card-title,
.dark-mode .fw-semibold,
.dark-mode strong {
    color: var(--dark-text) !important;
}

.dark-mode p,
.dark-mode span,
.dark-mode small,
.dark-mode label,
.dark-mode .form-label,
.dark-mode .text-muted,
.dark-mode .text-body {
    color: var(--dark-muted) !important;
}

.dark-mode a {
    color: #a99cff !important;
}

.dark-mode a:hover {
    color: #c9c1ff !important;
}

/* Sidebar */
.dark-mode #layout-menu,
.dark-mode .menu.bg-menu-theme {
    background: var(--dark-shell) !important;
    border-right: 1px solid var(--dark-border) !important;
    box-shadow: none !important;
}

.dark-mode #layout-menu .app-brand,
.dark-mode .menu-inner {
    background: transparent !important;
}

.dark-mode #layout-menu .app-brand-logo img {
    filter: brightness(0) invert(1) contrast(1.15) !important;
}

.dark-mode .menu .menu-header {
    color: var(--dark-subtle) !important;
}

.dark-mode .menu .menu-header-text {
    color: var(--dark-subtle) !important;
    letter-spacing: 0.05em;
}

.dark-mode .menu .menu-link,
.dark-mode .menu .menu-icon,
.dark-mode #layout-menu span,
.dark-mode #layout-menu a {
    color: #c7ccd6 !important;
}

.dark-mode .menu .menu-link:hover {
    background: var(--dark-panel-soft) !important;
    color: var(--dark-text) !important;
    border-radius: 8px;
}

.dark-mode .menu .menu-item.active > .menu-link,
.dark-mode .menu .menu-item.open > .menu-link {
    background: var(--dark-elevated) !important;
    color: var(--dark-text) !important;
    border-radius: 8px;
    box-shadow: inset 3px 0 0 var(--dark-accent);
}

.dark-mode .menu-sub {
    background: rgba(255, 255, 255, 0.015) !important;
    border-radius: 8px;
}

.dark-mode #layout-menu .custom-search-input {
    background: #14151a !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #layout-menu .custom-search-input::placeholder {
    color: var(--dark-subtle) !important;
}

/* Announcement popup */
.dark-mode .announcement-popup-backdrop {
    background: rgba(3, 7, 18, 0.76);
}

.dark-mode .announcement-popup-card {
    background: var(--dark-panel) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 32px 92px rgba(0, 0, 0, 0.64);
}

.dark-mode .announcement-popup-close {
    background: rgba(17, 18, 21, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--dark-text) !important;
}

.dark-mode .announcement-popup-close:hover {
    background: var(--dark-elevated) !important;
}

.dark-mode .announcement-popup-image-wrap {
    background: #0f1117 !important;
}

.dark-mode .announcement-popup-image-wrap.is-loading::before {
    background: linear-gradient(
        90deg,
        #171922 0%,
        #242630 42%,
        #1b1d27 74%,
        #171922 100%
    );
    background-size: 220% 100%;
}

.dark-mode .announcement-popup-body {
    background: var(--dark-panel) !important;
}

.dark-mode .announcement-popup-body h3 {
    color: var(--dark-text) !important;
}

.dark-mode .announcement-popup-body p {
    color: var(--dark-muted) !important;
}

.dark-mode .announcement-popup-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

.dark-mode .announcement-popup-cta,
.dark-mode .announcement-popup-cta:hover {
    color: #ffffff !important;
}

.dark-mode .announcement-popup-stepper span {
    color: var(--dark-muted) !important;
}

.dark-mode .announcement-popup-stepper button {
    background: transparent !important;
    border-color: rgba(237, 240, 245, 0.82) !important;
    color: var(--dark-text) !important;
}

.dark-mode .announcement-popup-stepper button:hover {
    background: var(--dark-text) !important;
    color: #111215 !important;
}

.dark-mode .announcement-popup-page {
    background: rgba(255, 255, 255, 0.12);
}

.dark-mode .announcement-popup-page::after {
    background: rgba(242, 138, 46, 0.72);
}

/* Navbar */
.dark-mode .layout-navbar,
.dark-mode .navbar,
.dark-mode .bg-navbar-theme {
    background: rgba(23, 24, 29, 0.96) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: none !important;
    color: var(--dark-text) !important;
    backdrop-filter: blur(14px);
}

.dark-mode .navbar .nav-link,
.dark-mode .navbar .nav-item,
.dark-mode #global-search,
.dark-mode .navbar i {
    color: #c7ccd6 !important;
}

.dark-mode .navbar .nav-link:hover,
.dark-mode #global-search:hover {
    color: var(--dark-text) !important;
}

#darkModeToggle {
    border-radius: 8px;
}

.dark-mode #darkModeToggle {
    background: var(--dark-panel-soft);
}

/* Panels and cards */
.dark-mode .card,
.dark-mode .accordion-item,
.dark-mode .list-group-item,
.dark-mode .draggable-item,
.dark-mode .kanban-column,
.dark-mode .kanban-tasks {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

.dark-mode .card-header,
.dark-mode .card-footer,
.dark-mode .accordion-button,
.dark-mode .fixed-header,
.dark-mode .fixed-footer {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .accordion-button:not(.collapsed) {
    background: var(--dark-elevated) !important;
    color: var(--dark-text) !important;
}

.dark-mode .border,
.dark-mode .border-top,
.dark-mode .border-bottom,
.dark-mode .border-start,
.dark-mode .border-end,
.dark-mode hr,
.dark-mode .dropdown-divider {
    border-color: var(--dark-border) !important;
}

/* Tables */
.dark-mode .table,
.dark-mode .bootstrap-table,
.dark-mode .fixed-table-container {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
}

.dark-mode .table > :not(caption) > * > *,
.dark-mode .bootstrap-table .table > :not(caption) > * > * {
    background: transparent !important;
    border-color: var(--dark-border) !important;
    color: #d8dce5 !important;
}

.dark-mode .table thead th,
.dark-mode .bootstrap-table .table thead th,
.dark-mode .bootstrap-table .fixed-table-container .th-inner {
    background: #181920 !important;
    color: var(--dark-muted) !important;
    border-color: var(--dark-border) !important;
    font-weight: 600;
}

.dark-mode .table tbody tr,
.dark-mode .bootstrap-table .table tbody tr {
    border-color: var(--dark-border) !important;
}

.dark-mode .table-hover tbody tr:hover,
.dark-mode .bootstrap-table .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.035) !important;
}

.dark-mode .table a {
    color: #b9afff !important;
}

.dark-mode .notification-feed-wrapper .fixed-table-container,
.dark-mode .notification-feed-table tbody td.bs-checkbox,
.dark-mode .notification-feed-item {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .notification-filter-panel {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .notification-feed-table tbody tr {
    border-color: var(--dark-border) !important;
}

.dark-mode .notification-feed-item:hover {
    background: rgba(185, 175, 255, 0.08) !important;
}

.dark-mode .notification-feed-item.is-unread {
    background: rgba(255, 107, 107, 0.09) !important;
}

.dark-mode .notification-feed-line,
.dark-mode .notification-feed-line strong {
    color: var(--dark-text) !important;
}

.dark-mode .notification-feed-meta {
    color: var(--dark-muted) !important;
}

/* Project calendar */
.dark-mode .calendar-wrapper {
    color: var(--dark-text) !important;
}

.dark-mode .calendar-sidebar,
.dark-mode .calendar-main {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
        var(--dark-panel) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: none !important;
    color: var(--dark-text) !important;
}

.dark-mode .calendar-sidebar h6,
.dark-mode .calendar-sidebar .bx,
.dark-mode .filter-section h6,
.dark-mode .mini-calendar h6 {
    color: var(--dark-text) !important;
}

.dark-mode .calendar-sidebar .form-control,
.dark-mode .mini-calendar .form-control {
    background: #15161b !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .calendar-sidebar .form-control::placeholder {
    color: var(--dark-subtle) !important;
}

.dark-mode .filter-section {
    border-bottom: 1px solid var(--dark-border-soft);
    padding-bottom: 1rem;
}

.dark-mode .filter-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dark-mode .filter-section .form-check-label,
.dark-mode .calendar-sidebar .small,
.dark-mode .calendar-sidebar .text-muted {
    color: var(--dark-muted) !important;
}

.dark-mode .filter-section .form-check-input {
    background-color: #15161b !important;
    border-color: #3a3d49 !important;
}

.dark-mode .filter-section .form-check-input:checked {
    background-color: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
}

.dark-mode .filter-counter {
    background: var(--dark-elevated) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-muted) !important;
}

.dark-mode .skeleton-loader {
    background: linear-gradient(90deg, #202129 25%, #2a2c36 50%, #202129 75%) !important;
    background-size: 200% 100% !important;
}

.dark-mode .fc,
.dark-mode .fc-view,
.dark-mode .fc-view-container,
.dark-mode .fc-view > table,
.dark-mode .fc-head,
.dark-mode .fc-head-container,
.dark-mode .fc-body,
.dark-mode .fc-row,
.dark-mode .fc-day,
.dark-mode .fc-widget-header,
.dark-mode .fc-widget-content,
.dark-mode .fc-unthemed td,
.dark-mode .fc-unthemed th,
.dark-mode .fc-unthemed thead,
.dark-mode .fc-unthemed tbody,
.dark-mode .fc-unthemed .fc-divider,
.dark-mode .fc-unthemed .fc-list-heading td,
.dark-mode .fc-scrollgrid,
.dark-mode .fc-list,
.dark-mode .fc-list-table,
.dark-mode .fc-theme-standard .fc-scrollgrid,
.dark-mode .fc-theme-standard td,
.dark-mode .fc-theme-standard th {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .fc .fc-toolbar-title,
.dark-mode .fc .fc-col-header-cell-cushion,
.dark-mode .fc .fc-daygrid-day-number,
.dark-mode .fc .fc-list-day-text,
.dark-mode .fc .fc-list-day-side-text {
    color: var(--dark-text) !important;
}

.dark-mode .fc .fc-daygrid-day.fc-day-today,
.dark-mode .fc .fc-highlight {
    background: rgba(124, 92, 255, 0.16) !important;
}

.dark-mode .fc .fc-daygrid-day.fc-day-other,
.dark-mode .fc .fc-list-empty {
    background: #15161b !important;
    color: var(--dark-subtle) !important;
}

.dark-mode .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
    color: var(--dark-subtle) !important;
}

.dark-mode .fc .fc-list-event:hover td {
    background: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .fc .fc-day-header,
.dark-mode .fc .fc-list-heading-main,
.dark-mode .fc .fc-list-heading-alt,
.dark-mode .fc .fc-axis {
    color: var(--dark-muted) !important;
}

.dark-mode .fc .fc-day-number,
.dark-mode .fc .fc-day-top .fc-day-number,
.dark-mode .fc .fc-list-item-title,
.dark-mode .fc .fc-list-item-time {
    color: var(--dark-text) !important;
}

.dark-mode .fc .fc-other-month,
.dark-mode .fc .fc-other-month .fc-day-number {
    background: #15161b !important;
    color: var(--dark-subtle) !important;
}

.dark-mode .fc .fc-today {
    background: rgba(124, 92, 255, 0.16) !important;
}

.dark-mode .fc .fc-more-popover,
.dark-mode .fc .fc-popover,
.dark-mode .fc .fc-popover-header,
.dark-mode .fc .fc-popover-body {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36) !important;
}

.dark-mode .fc .fc-more,
.dark-mode .fc .fc-more-cell a,
.dark-mode .fc .fc-popover .fc-title,
.dark-mode .fc .fc-popover .fc-time {
    color: #b9afff !important;
}

.dark-mode .fc .fc-event,
.dark-mode .fc .fc-event-dot {
    color: #fff !important;
    box-shadow: none !important;
}

.dark-mode .fc .fc-event .fc-content,
.dark-mode .fc .fc-event .fc-title,
.dark-mode .fc .fc-event .fc-time {
    color: inherit !important;
}

.dark-mode .calendar-tooltip {
    background: var(--dark-elevated) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35) !important;
}

.dark-mode .fc .fc-button {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

.dark-mode .fc .fc-button:hover,
.dark-mode .fc .fc-button-active {
    background: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
    color: #fff !important;
}

.dark-mode .daterangepicker {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .daterangepicker .calendar-table,
.dark-mode .daterangepicker td.off,
.dark-mode .daterangepicker td.off.in-range,
.dark-mode .daterangepicker td.off.start-date,
.dark-mode .daterangepicker td.off.end-date {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-subtle) !important;
}

.dark-mode .daterangepicker td.available:hover,
.dark-mode .daterangepicker th.available:hover,
.dark-mode .daterangepicker td.in-range {
    background: rgba(124, 92, 255, 0.16) !important;
    color: var(--dark-text) !important;
}

.dark-mode .daterangepicker td.active,
.dark-mode .daterangepicker td.active:hover {
    background: var(--dark-accent) !important;
    color: #fff !important;
}

/* Surat Perintah Bayar */
.dark-mode .spb-summary-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
        var(--dark-panel) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: none !important;
    color: var(--dark-text) !important;
}

.dark-mode .spb-summary-card small,
.dark-mode .spb-summary-card .text-muted {
    color: var(--dark-muted) !important;
}

.dark-mode .spb-summary-card h3,
.dark-mode .spb-summary-card h4,
.dark-mode .spb-summary-card .fw-bold {
    color: var(--dark-text) !important;
}

.dark-mode .spb-summary-icon.bg-label-primary {
    background: rgba(124, 92, 255, 0.18) !important;
    color: #c8c0ff !important;
}

.dark-mode .spb-summary-icon.bg-label-success {
    background: rgba(52, 211, 153, 0.14) !important;
    color: #86efac !important;
}

.dark-mode .spb-summary-icon.bg-label-info {
    background: rgba(56, 189, 248, 0.14) !important;
    color: #7dd3fc !important;
}

.dark-mode #spbModal .modal-content {
    background: var(--dark-panel) !important;
}

.dark-mode #spbModal .modal-header,
.dark-mode #spbModal .modal-footer {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode #spbModal .invoice-row,
.dark-mode #spbModal .bank-row {
    color: var(--dark-text) !important;
}

.dark-mode #spbModal .invoice-row.border,
.dark-mode #spbModal .accordion-item {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode #bankSummaryWrapper > .text-muted,
.dark-mode #bankSummaryWrapper .text-muted {
    color: var(--dark-muted) !important;
}

.dark-mode .spb-bank-summary-card {
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1px, transparent 0) 0 0 / 22px 22px,
        linear-gradient(135deg, #f28a2e 0%, #9d5a21 34%, #32343f 62%, #162b4e 100%) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32) !important;
}

.dark-mode .spb-bank-summary-card,
.dark-mode .spb-bank-summary-card p,
.dark-mode .spb-bank-summary-card span,
.dark-mode .spb-bank-summary-card small,
.dark-mode .spb-bank-summary-card div,
.dark-mode .spb-bank-summary-card h4,
.dark-mode .spb-bank-summary-card .fw-bold,
.dark-mode .spb-bank-summary-card .fs-4,
.dark-mode .spb-bank-summary-card .text-white {
    color: #fff !important;
}

.dark-mode .spb-bank-summary-card .text-white-50 {
    color: rgba(255, 255, 255, 0.68) !important;
}

.dark-mode .spb-bank-summary-pill {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.dark-mode .spb-bank-summary-divider {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.dark-mode .spb-bank-summary-card .btn-light {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: transparent !important;
    color: #17181d !important;
}

/* Forms */
.dark-mode .form-control,
.dark-mode .form-select,
.dark-mode textarea,
.dark-mode .input-group-text,
.dark-mode .custom-select2 .select2-search--dropdown .select2-search__field {
    background-color: #15161b !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .form-control::placeholder,
.dark-mode textarea::placeholder {
    color: var(--dark-subtle) !important;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus,
.dark-mode textarea:focus {
    background-color: #171922 !important;
    border-color: var(--dark-accent) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 0 0 0.16rem rgba(124, 92, 255, 0.18) !important;
}

.dark-mode .form-check-input {
    background-color: #15161b !important;
    border-color: #3a3d49 !important;
}

.dark-mode .form-check-input:checked {
    background-color: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
}

/* Todos */
.dark-mode .todo-progress,
.dark-mode .todo-progress-label,
.dark-mode .todo-progress-value {
    color: var(--dark-muted) !important;
}

.dark-mode .todo-card {
    background: var(--dark-panel) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: none !important;
}

.dark-mode .todo-card:hover {
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

.dark-mode .todo-card-body,
.dark-mode .todo-list-container {
    background: var(--dark-panel) !important;
}

.dark-mode .todo-item,
.dark-mode .todo-add-item {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

.dark-mode .todo-item:hover,
.dark-mode .todo-add-item:hover {
    background: var(--dark-elevated) !important;
    box-shadow: none !important;
}

.dark-mode .todo-title {
    color: var(--dark-text) !important;
}

.dark-mode .todo-item.todo-completed .todo-title {
    color: var(--dark-subtle) !important;
}

.dark-mode .todo-meta-item,
.dark-mode .todo-drag-handle,
.dark-mode .todo-empty-state-text {
    color: var(--dark-muted) !important;
}

.dark-mode .todo-check-input {
    background-color: #15161b !important;
    border-color: #444754 !important;
}

.dark-mode .todo-check-input:checked {
    background-color: var(--dark-success) !important;
    border-color: var(--dark-success) !important;
}

.dark-mode .todo-completed-tag {
    color: #86efac !important;
}

.dark-mode .todo-bg-danger-subtle {
    background: rgba(244, 63, 94, 0.16) !important;
    color: #fda4af !important;
}

.dark-mode .todo-bg-warning-subtle {
    background: rgba(251, 191, 36, 0.16) !important;
    color: #fde68a !important;
}

.dark-mode .todo-bg-success-subtle {
    background: rgba(52, 211, 153, 0.14) !important;
    color: #a7f3d0 !important;
}

.dark-mode .todo-add-item .new-todo-title {
    color: var(--dark-text) !important;
}

.dark-mode .todo-add-item .new-todo-title::placeholder {
    color: var(--dark-subtle) !important;
}

.dark-mode .todo-list-container::-webkit-scrollbar-track {
    background: var(--dark-shell) !important;
}

.dark-mode .todo-list-container::-webkit-scrollbar-thumb {
    background: #343642 !important;
}

.dark-mode .todo-list-container::-webkit-scrollbar-thumb:hover {
    background: #4a4d5c !important;
}

/* Buttons */
.dark-mode .btn {
    border-color: var(--dark-border) !important;
    box-shadow: none !important;
}

.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--dark-accent), #6245ff) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.dark-mode .btn-primary:hover {
    background: linear-gradient(135deg, #8b73ff, #6d50ff) !important;
}

.dark-mode .btn-outline-primary {
    border-color: rgba(124, 92, 255, 0.58) !important;
    color: #b9afff !important;
}

.dark-mode .btn-outline-primary:hover {
    background: rgba(124, 92, 255, 0.16) !important;
    color: #fff !important;
}

.dark-mode .btn-secondary,
.dark-mode .btn-outline-secondary,
.dark-mode .fixed-table-toolbar .btn,
.dark-mode .page-link,
.dark-mode .page-size .btn {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: #d4d8e1 !important;
}

.dark-mode .btn-outline-danger {
    color: #fb7185 !important;
    border-color: rgba(244, 63, 94, 0.5) !important;
}

.dark-mode .btn-outline-danger:hover,
.dark-mode .btn-danger {
    background: var(--dark-danger) !important;
    border-color: var(--dark-danger) !important;
    color: #fff !important;
}

.dark-mode .action-icon:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* Dropdowns */
.dark-mode .dropdown-menu,
.dark-mode .notificationwrapper {
    background: var(--dark-elevated) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35) !important;
    color: var(--dark-text) !important;
}

.dark-mode .dropdown-item,
.dark-mode .notificationwrapper .dropdown-item {
    background: transparent !important;
    color: #d8dce5 !important;
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus,
.dark-mode .notificationwrapper .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dark-text) !important;
}

.dark-mode .notificationwrapper #unreadNotificationsContainer,
.dark-mode .notificationwrapper .fixed-footer {
    background: var(--dark-elevated) !important;
}

/* Badges and labels */
.dark-mode .badge,
.dark-mode .bg-label-primary,
.dark-mode .bg-label-secondary,
.dark-mode .bg-label-success,
.dark-mode .bg-label-warning,
.dark-mode .bg-label-info,
.dark-mode .bg-label-danger,
.dark-mode .bg-label-dark {
    border: 1px solid transparent;
}

.dark-mode .bg-label-primary,
.dark-mode span.bg-label-primary,
.dark-mode .badge.bg-primary {
    background: rgba(124, 92, 255, 0.18) !important;
    border-color: rgba(124, 92, 255, 0.24) !important;
    color: #c8c0ff !important;
}

.dark-mode .bg-label-success,
.dark-mode .badge.bg-success {
    background: rgba(52, 211, 153, 0.14) !important;
    border-color: rgba(52, 211, 153, 0.22) !important;
    color: #86efac !important;
}

.dark-mode .bg-label-warning,
.dark-mode .badge.bg-warning {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.24) !important;
    color: #fde68a !important;
}

.dark-mode .bg-label-info,
.dark-mode .badge.bg-info {
    background: rgba(56, 189, 248, 0.14) !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    color: #7dd3fc !important;
}

.dark-mode .bg-label-danger,
.dark-mode .badge.bg-danger {
    background: rgba(244, 63, 94, 0.15) !important;
    border-color: rgba(244, 63, 94, 0.24) !important;
    color: #fda4af !important;
}

.dark-mode .bg-label-secondary,
.dark-mode .badge.bg-secondary,
.dark-mode .bg-label-dark,
.dark-mode .badge.bg-dark {
    background: rgba(156, 163, 175, 0.12) !important;
    border-color: rgba(156, 163, 175, 0.18) !important;
    color: #d1d5db !important;
}

.dark-mode .text-primary {
    color: #b9afff !important;
}

.dark-mode .text-success {
    color: var(--dark-success) !important;
}

.dark-mode .text-warning {
    color: var(--dark-warning) !important;
}

.dark-mode .text-danger {
    color: #fb7185 !important;
}

/* Select2 */
.dark-mode .select2.select2-container.select2-container--default:not(#global-search + .select2-container),
.dark-mode .select2-container--default .select2-selection--single,
.dark-mode .select2-container--default .select2-selection--multiple {
    background: #15161b !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .select2-container--default .select2-selection__rendered,
.dark-mode .select2-container--default .select2-selection__placeholder,
.dark-mode .select2-search--inline .select2-search__field {
    color: var(--dark-muted) !important;
}

.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .select2-dropdown,
.dark-mode .select2-results__option,
.dark-mode .select2-container--default .select2-results > .select2-results__options {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(124, 92, 255, 0.18) !important;
    color: #fff !important;
}

.dark-mode .select2-results__option[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* Modals and offcanvas */
.dark-mode .modal-backdrop,
.dark-mode .offcanvas-backdrop {
    background-color: #030306 !important;
}

.dark-mode .modal-content,
.dark-mode .offcanvas {
    background: var(--dark-panel) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.52) !important;
}

.dark-mode .modal-header,
.dark-mode .modal-footer,
.dark-mode .offcanvas-header {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .btn-close {
    filter: invert(1) grayscale(1);
}

/* Perjalanan Dinas request modal */
.dark-mode #modalCreate .pd-modal-content,
.dark-mode #modalEdit .pd-modal-content {
    background: var(--dark-panel) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.52) !important;
}

.dark-mode #modalCreate .pd-request-header,
.dark-mode #modalEdit .pd-request-header,
.dark-mode #modalCreate .pd-request-footer,
.dark-mode #modalEdit .pd-request-footer {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalCreate .pd-request-body,
.dark-mode #modalEdit .pd-request-body,
.dark-mode #modalCreate .pd-request-scroll,
.dark-mode #modalEdit .pd-request-scroll,
.dark-mode #modalCreate .pd-form-section,
.dark-mode #modalEdit .pd-form-section {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalCreate .pd-form-section + .pd-form-section,
.dark-mode #modalEdit .pd-form-section + .pd-form-section {
    border-top-color: var(--dark-border) !important;
}

.dark-mode #modalCreate .pd-request-kicker,
.dark-mode #modalEdit .pd-request-kicker,
.dark-mode #modalCreate .pd-request-subtitle,
.dark-mode #modalEdit .pd-request-subtitle,
.dark-mode #modalCreate .pd-section-subtitle,
.dark-mode #modalEdit .pd-section-subtitle,
.dark-mode #modalCreate .pd-toggle-subtitle,
.dark-mode #modalEdit .pd-toggle-subtitle,
.dark-mode #modalCreate .pd-request-footer .text-muted,
.dark-mode #modalEdit .pd-request-footer .text-muted {
    color: var(--dark-muted) !important;
}

.dark-mode #modalCreate .pd-request-title,
.dark-mode #modalEdit .pd-request-title,
.dark-mode #modalCreate .pd-section-title,
.dark-mode #modalEdit .pd-section-title,
.dark-mode #modalCreate .pd-toggle-title,
.dark-mode #modalEdit .pd-toggle-title,
.dark-mode #modalCreate .pd-request-form .form-label,
.dark-mode #modalEdit .pd-request-form .form-label {
    color: var(--dark-text) !important;
}

.dark-mode #modalCreate .pd-request-kicker i,
.dark-mode #modalEdit .pd-request-kicker i,
.dark-mode #modalCreate .pd-section-icon,
.dark-mode #modalEdit .pd-section-icon {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-muted) !important;
}

.dark-mode #modalCreate .pd-request-form .form-control,
.dark-mode #modalCreate .pd-request-form .form-select,
.dark-mode #modalCreate .pd-request-form select.form-control,
.dark-mode #modalEdit .pd-request-form .form-control,
.dark-mode #modalEdit .pd-request-form .form-select,
.dark-mode #modalEdit .pd-request-form select.form-control {
    background: #15161b !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

.dark-mode #modalCreate .pd-request-form .form-control::placeholder,
.dark-mode #modalEdit .pd-request-form .form-control::placeholder {
    color: var(--dark-subtle) !important;
}

.dark-mode #modalCreate .pd-request-form .form-control:focus,
.dark-mode #modalCreate .pd-request-form .form-select:focus,
.dark-mode #modalEdit .pd-request-form .form-control:focus,
.dark-mode #modalEdit .pd-request-form .form-select:focus {
    background: #17181d !important;
    border-color: var(--dark-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.18) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalCreate .pd-inline-summary,
.dark-mode #modalEdit .pd-inline-summary,
.dark-mode #modalCreate .pd-toggle-panel,
.dark-mode #modalEdit .pd-toggle-panel,
.dark-mode #modalCreate .pd-dropzone,
.dark-mode #modalEdit .pd-dropzone {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalCreate .pd-dropzone:hover,
.dark-mode #modalCreate .pd-dropzone.dragover,
.dark-mode #modalEdit .pd-dropzone:hover,
.dark-mode #modalEdit .pd-dropzone.dragover {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-accent) !important;
}

.dark-mode #modalCreate .pd-items-table,
.dark-mode #modalEdit .pd-items-table {
    border-color: var(--dark-border) !important;
}

.dark-mode #modalCreate .pd-items-table table,
.dark-mode #modalEdit .pd-items-table table,
.dark-mode #modalCreate .pd-items-table tbody,
.dark-mode #modalEdit .pd-items-table tbody,
.dark-mode #modalCreate .pd-items-table td,
.dark-mode #modalEdit .pd-items-table td {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalCreate .pd-items-table thead th,
.dark-mode #modalEdit .pd-items-table thead th {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-muted) !important;
}

.dark-mode #modalCreate .travel-group-select + .select2-container--default .select2-selection--single,
.dark-mode #modalEdit .travel-group-select + .select2-container--default .select2-selection--single {
    background: #15161b !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalCreate .travel-group-select + .select2-container--default .select2-selection__rendered,
.dark-mode #modalEdit .travel-group-select + .select2-container--default .select2-selection__rendered,
.dark-mode #modalCreate .travel-group-select + .select2-container--default .select2-selection__placeholder,
.dark-mode #modalEdit .travel-group-select + .select2-container--default .select2-selection__placeholder {
    color: var(--dark-muted) !important;
}

.dark-mode #modalCreate .travel-group-select + .select2-container--default.select2-container--open .select2-selection--single,
.dark-mode #modalCreate .travel-group-select + .select2-container--default.select2-container--focus .select2-selection--single,
.dark-mode #modalEdit .travel-group-select + .select2-container--default.select2-container--open .select2-selection--single,
.dark-mode #modalEdit .travel-group-select + .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--dark-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.18) !important;
}

/* Tabs and pagination */
.dark-mode .nav-tabs {
    border-color: var(--dark-border) !important;
}

.dark-mode .nav-tabs .nav-link {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--dark-muted) !important;
}

.dark-mode .nav-tabs .nav-link.active,
.dark-mode .nav-tabs .nav-link:hover {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .tab-content,
.dark-mode .tab-pane {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .pagination-info,
.dark-mode .page-list,
.dark-mode .page-link {
    color: var(--dark-muted) !important;
}

.dark-mode .page-link:hover,
.dark-mode .page-item.active .page-link {
    background: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
    color: #fff !important;
}

.dark-mode .swal2-container.swal2-backdrop-show,
.dark-mode .swal2-container.swal2-noanimation {
    background: rgba(0, 0, 0, 0.64) !important;
}

.dark-mode .swal2-popup {
    background: var(--dark-panel) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42) !important;
}

.dark-mode .swal2-title,
.dark-mode .swal2-html-container {
    color: var(--dark-text) !important;
}

.dark-mode .swal2-html-container {
    color: var(--dark-muted) !important;
}

.dark-mode .swal2-close,
.dark-mode .swal2-timer-progress-bar {
    color: var(--dark-muted) !important;
}

.dark-mode .swal2-input,
.dark-mode .swal2-file,
.dark-mode .swal2-textarea,
.dark-mode .swal2-select {
    background: #15161b !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

.dark-mode .swal2-input::placeholder,
.dark-mode .swal2-textarea::placeholder {
    color: var(--dark-subtle) !important;
}

.dark-mode .swal2-validation-message {
    background: var(--dark-elevated) !important;
    color: var(--dark-text) !important;
}

.dark-mode .swal2-styled.swal2-confirm.btn-primary,
.dark-mode .swal2-styled.swal2-confirm.btn.btn-primary {
    background: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
    color: #fff !important;
}

.dark-mode .swal2-styled.swal2-confirm.btn-danger,
.dark-mode .swal2-styled.swal2-confirm.btn.btn-danger {
    background: var(--dark-danger) !important;
    border-color: var(--dark-danger) !important;
    color: #fff !important;
}

.dark-mode .swal2-styled.swal2-cancel.btn-light,
.dark-mode .swal2-styled.swal2-cancel.btn.btn-light {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .swal2-styled:focus {
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.28) !important;
}

/* Charts, editors, misc */
.dark-mode .apexcharts-text,
.dark-mode .apexcharts-title-text,
.dark-mode .apexcharts-xaxis-label,
.dark-mode .apexcharts-yaxis-label {
    fill: var(--dark-muted) !important;
}

.dark-mode .apexcharts-legend-text {
    color: var(--dark-muted) !important;
}

.dark-mode .tox-tinymce,
.dark-mode .tox-tinymce-aux,
.dark-mode .tox .tox-editor-container,
.dark-mode .tox .tox-editor-header,
.dark-mode .tox .tox-edit-area,
.dark-mode .tox .tox-edit-area__iframe,
.dark-mode .tox .tox-toolbar,
.dark-mode .tox .tox-toolbar__overflow,
.dark-mode .tox .tox-toolbar__primary,
.dark-mode .tox .tox-menubar,
.dark-mode .tox .tox-statusbar,
.dark-mode .tox .tox-dialog,
.dark-mode .tox .tox-dialog__header,
.dark-mode .tox .tox-dialog__body,
.dark-mode .tox .tox-dialog__body-content,
.dark-mode .tox .tox-dialog__body-nav,
.dark-mode .tox .tox-dialog__footer,
.dark-mode .tox .tox-form,
.dark-mode .tox .tox-form__controls-h-stack,
.dark-mode .tox .tox-sidebar-wrap,
.dark-mode .tox .tox-collection,
.dark-mode .tox .tox-collection__group,
.dark-mode .tox .tox-menu,
.dark-mode .tox .tox-tiered-menu,
.dark-mode .tox .tox-pop,
.dark-mode .tox .tox-pop__dialog,
.dark-mode .tox .tox-pop__dialog > * {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .tox .tox-edit-area__iframe {
    background-color: #15161b !important;
}

.dark-mode .tox .tox-tbtn,
.dark-mode .tox .tox-mbtn,
.dark-mode .tox .tox-split-button,
.dark-mode .tox .tox-number-input,
.dark-mode .tox .tox-textarea,
.dark-mode .tox .tox-textfield,
.dark-mode .tox .tox-selectfield select,
.dark-mode .tox .tox-color-input,
.dark-mode .tox .tox-checkbox__icons,
.dark-mode .tox .tox-listboxfield .tox-listbox--select,
.dark-mode .tox .tox-toolbar-textfield {
    background: #15161b !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .tox .tox-tbtn:hover,
.dark-mode .tox .tox-tbtn--enabled,
.dark-mode .tox .tox-tbtn--enabled:hover,
.dark-mode .tox .tox-mbtn:hover,
.dark-mode .tox .tox-mbtn--active,
.dark-mode .tox .tox-collection--list .tox-collection__item--active,
.dark-mode .tox .tox-collection--list .tox-collection__item--enabled,
.dark-mode .tox .tox-collection__item:hover,
.dark-mode .tox .tox-insert-table-picker__selected,
.dark-mode .tox .tox-swatches__picker-btn:hover {
    background: var(--dark-elevated) !important;
    color: var(--dark-text) !important;
}

.dark-mode .tox .tox-tbtn svg,
.dark-mode .tox .tox-icon svg {
    fill: var(--dark-muted) !important;
}

.dark-mode .tox .tox-tbtn:hover svg,
.dark-mode .tox .tox-tbtn--enabled svg,
.dark-mode .tox .tox-mbtn:hover svg {
    fill: var(--dark-text) !important;
}

.dark-mode .tox .tox-mbtn,
.dark-mode .tox .tox-tbtn,
.dark-mode .tox .tox-statusbar__path-item,
.dark-mode .tox .tox-statusbar__wordcount,
.dark-mode .tox .tox-statusbar__branding,
.dark-mode .tox .tox-collection__item,
.dark-mode .tox .tox-collection__item-label,
.dark-mode .tox .tox-label,
.dark-mode .tox .tox-dialog__title,
.dark-mode .tox .tox-dialog__body-nav-item,
.dark-mode .tox .tox-form__group,
.dark-mode .tox .tox-toolbar-label,
.dark-mode .tox .tox-checkbox__label,
.dark-mode .tox .tox-promotion,
.dark-mode .tox .tox-selectfield select {
    color: var(--dark-muted) !important;
}

.dark-mode .tox .tox-dialog__body-nav-item--active,
.dark-mode .tox .tox-statusbar a,
.dark-mode .tox .tox-collection__item--active .tox-collection__item-label {
    color: #b9afff !important;
}

.dark-mode .tox .tox-dialog__body-nav-item--active {
    border-color: #b9afff !important;
}

.dark-mode .tox .tox-button {
    background: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
    color: #fff !important;
}

.dark-mode .tox .tox-button--secondary {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .tox .tox-dialog-wrap__backdrop {
    background-color: rgba(3, 3, 6, 0.72) !important;
}

.dark-mode .tox .tox-edit-area::before {
    border-color: var(--dark-accent) !important;
}

.dark-mode .tox .tox-insert-table-picker,
.dark-mode .tox .tox-insert-table-picker > div,
.dark-mode .tox .tox-swatches,
.dark-mode .tox .tox-swatch {
    background: #15161b !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg,
.dark-mode .tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
    fill: var(--dark-panel-soft) !important;
}

.dark-mode .preview-box,
.dark-mode .chat-img,
.dark-mode .embed-icon {
    background: var(--dark-panel-soft) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .chat-iframe-container,
.dark-mode .chat-iframe {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42) !important;
}

.dark-mode .chat-unread-badge {
    border-color: var(--dark-panel-soft) !important;
}

.dark-mode #formVisitModal .modal-header,
.dark-mode #formVisitModal .modal-footer,
.dark-mode #formVisitModal .bg-white,
.dark-mode #formVisitModal .bg-light,
.dark-mode #previewFormVisitModal .modal-header,
.dark-mode #previewFormVisitModal .modal-footer,
.dark-mode #previewFormVisitModal .bg-white,
.dark-mode #previewFormVisitModal .bg-light {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #formVisitModal .border,
.dark-mode #previewFormVisitModal .border,
.dark-mode #previewFormVisitModal .card,
.dark-mode #previewFormVisitModal .form-visit-detail-hero,
.dark-mode #previewFormVisitModal .form-visit-detail-section,
.dark-mode #previewFormVisitModal .form-visit-meta-item,
.dark-mode #previewFormVisitModal .form-visit-field {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

.dark-mode #previewFormVisitModal .form-visit-detail-hero,
.dark-mode #previewFormVisitModal .form-visit-action-section,
.dark-mode #previewFormVisitModal .form-visit-section-title i {
    background: var(--dark-panel-soft) !important;
}

.dark-mode #previewFormVisitModal .form-visit-meta-item strong,
.dark-mode #previewFormVisitModal .form-visit-field strong,
.dark-mode #previewFormVisitModal .form-visit-section-title {
    color: var(--dark-text) !important;
}

.dark-mode #previewFormVisitModal .form-visit-detail-label,
.dark-mode #previewFormVisitModal .form-visit-field small,
.dark-mode #previewFormVisitModal .form-visit-meta-item small {
    color: var(--dark-muted) !important;
}

.dark-mode #formVisitModal .upload-photo-card label,
.dark-mode #formVisitModal .existing-image > div,
.dark-mode #formVisitModal .temp-preview-image > div,
.dark-mode #previewFormVisitModal #preview-attachments .card,
.dark-mode #previewFormVisitModal #preview-attachments .bg-white,
.dark-mode #previewFormVisitModal .form-visit-photo-panel,
.dark-mode #previewFormVisitModal .form-visit-photo-card,
.dark-mode #previewFormVisitModal .form-visit-photo-empty {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #previewFormVisitModal .form-visit-photo-card {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28) !important;
}

.dark-mode #previewFormVisitModal .form-visit-photo-overlay {
    background: rgba(3, 3, 6, 0.48) !important;
}

.dark-mode #previewFormVisitModal .form-visit-photo-zoom {
    background: var(--dark-elevated) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #previewFormVisitModal .form-visit-photo-empty {
    border-style: dashed !important;
}

.dark-mode #previewFormVisitModal .form-visit-photo-empty .bx {
    color: var(--dark-muted) !important;
}

.dark-mode #previewFormVisitModal .preview-box {
    background: #15161b !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 8px;
    color: var(--dark-text) !important;
    padding: 0.75rem;
}

.dark-mode #previewFormVisitModal .bg-label-primary .preview-box,
.dark-mode #previewFormVisitModal .preview-box.bg-white {
    background: var(--dark-panel) !important;
}

.dark-mode #formVisitModal .btn-light,
.dark-mode #previewFormVisitModal .btn-light {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .dropzone[data-dropzone] {
    background: var(--dark-panel-soft) !important;
    border: 1px dashed #444754 !important;
    color: var(--dark-text) !important;
}

.dark-mode .dropzone[data-dropzone]:hover,
.dark-mode .dropzone[data-dropzone].dragover {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-accent) !important;
}

.dark-mode .dropzone[data-dropzone] p {
    color: var(--dark-text) !important;
}

.dark-mode .dropzone[data-dropzone] small {
    color: var(--dark-muted) !important;
}

.dark-mode .attachment-preview-table,
.dark-mode .attachment-preview-table thead,
.dark-mode .attachment-preview-table tbody,
.dark-mode .attachment-preview-table tr,
.dark-mode .attachment-preview-table td,
.dark-mode .attachment-preview-table th,
.dark-mode #edit-attachment-list,
.dark-mode #edit-attachment-list .list-group-item,
.dark-mode #edit-attachment-list .border {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode .attachment-preview-table .table-light,
.dark-mode .attachment-preview-table .table-light > * > * {
    background: var(--dark-elevated) !important;
    color: var(--dark-muted) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .attachment-preview-body,
.dark-mode .attachment-preview-body * {
    color: var(--dark-text) !important;
}

.dark-mode #modalBiaya .modal-content,
.dark-mode #modalBiaya .modal-body {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalBiaya .modal-header {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode #modalBiaya .modal-title,
.dark-mode #modalBiaya h6,
.dark-mode #modalBiaya th,
.dark-mode #modalBiaya td,
.dark-mode #modalBiaya strong,
.dark-mode #modalBiaya .fw-bold {
    color: var(--dark-text) !important;
}

.dark-mode #modalBiaya .table,
.dark-mode #modalBiaya .table-notice,
.dark-mode #modalBiaya .table-responsive {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalBiaya .table {
    border: 1px solid var(--dark-border) !important;
    border-collapse: separate !important;
    border-radius: 8px;
    border-spacing: 0;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.dark-mode #modalBiaya .table > :not(caption) > * > * {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalBiaya .table th {
    background: var(--dark-elevated) !important;
    color: var(--dark-muted) !important;
}

.dark-mode #modalBiaya .table td {
    background: var(--dark-panel-soft) !important;
}

.dark-mode #modalBiaya .table-light,
.dark-mode #modalBiaya .table-light > * > *,
.dark-mode #modalBiaya thead.table-light,
.dark-mode #modalBiaya thead.table-light > tr > th {
    background: var(--dark-elevated) !important;
    color: var(--dark-muted) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode #modalBiaya .table-warning,
.dark-mode #modalBiaya .table-warning > * > * {
    background: rgba(251, 191, 36, 0.14) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, 0.28) !important;
}

.dark-mode #modalBiaya .table-success,
.dark-mode #modalBiaya .table-success > * > * {
    background: rgba(52, 211, 153, 0.14) !important;
    color: #a7f3d0 !important;
    border-color: rgba(52, 211, 153, 0.28) !important;
}

.dark-mode #modalBiaya .bg-light,
.dark-mode #modalBiaya .alert-light {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

.dark-mode #modalBiaya .text-muted,
.dark-mode #modalBiaya small {
    color: var(--dark-muted) !important;
}

.dark-mode #modalBiaya #view-reject-notice {
    background: rgba(244, 63, 94, 0.14) !important;
    border: 1px solid rgba(244, 63, 94, 0.38) !important;
    color: #fecdd3 !important;
}

.dark-mode #modalBiaya #view-reject-notice .fw-semibold {
    color: #fecdd3 !important;
}

.dark-mode #modalBiaya #view-reason {
    color: #fda4af !important;
}

.dark-mode #modalBiaya .card,
.dark-mode #modalBiaya .card-header,
.dark-mode #modalBiaya .list-group,
.dark-mode #modalBiaya .list-group-item {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalBiaya #view-settlement-files a,
.dark-mode #modalBiaya #view-settlement-files button {
    color: #b9afff !important;
}

.dark-mode #modalBiaya #view-currency-selisih,
.dark-mode #modalBiaya #view-selisih-uang-harian {
    color: #f8fafc !important;
    text-shadow: 0 0 18px rgba(124, 92, 255, 0.25);
}

.dark-mode #modalBiaya #view-label-selisih {
    color: var(--dark-warning) !important;
}

.dark-mode #modalBiaya .accordionlog .accordion-item,
.dark-mode #modalBiaya .accordionlog .accordion-button,
.dark-mode #modalBiaya .accordionlog .accordion-body,
.dark-mode #modalBiaya .accordionlog .accordion-collapse {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalBiaya .accordionlog .accordion-button:not(.collapsed) {
    background: var(--dark-elevated) !important;
    color: var(--dark-text) !important;
}

@media (max-width: 767.98px) {
    .dark-mode #modalBiaya .modal-content {
        background: var(--dark-bg) !important;
        border: 1px solid var(--dark-border) !important;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55) !important;
    }

    .dark-mode #modalBiaya .modal-header {
        background: var(--dark-panel) !important;
        border-bottom-color: var(--dark-border) !important;
    }

    .dark-mode #modalBiaya .modal-body {
        background: var(--dark-bg) !important;
    }

    .dark-mode #modalBiaya .modal-title {
        color: var(--dark-text) !important;
    }

    .dark-mode #modalBiaya .modal-biaya-status-badges .badge {
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: none !important;
    }

    .dark-mode #modalBiaya h6 {
        color: #d6dbe6 !important;
    }

    .dark-mode #modalBiaya table:not(:has(thead)) tr {
        background: var(--dark-panel-soft) !important;
        border-color: #464957 !important;
    }

    .dark-mode #modalBiaya table:not(:has(thead)) th {
        background: var(--dark-elevated) !important;
        color: #aeb7c6 !important;
        border-bottom: 1px solid var(--dark-border) !important;
    }

    .dark-mode #modalBiaya table:not(:has(thead)) td {
        background: var(--dark-panel-soft) !important;
        color: #ffffff !important;
    }

    .dark-mode #modalBiaya table:has(thead) {
        background: var(--dark-panel-soft) !important;
        border-color: var(--dark-border) !important;
    }

    .dark-mode #modalBiaya table:has(thead) th {
        background: var(--dark-elevated) !important;
        color: #aeb7c6 !important;
    }

    .dark-mode #modalBiaya table:has(thead) td {
        background: var(--dark-panel-soft) !important;
        color: var(--dark-text) !important;
    }

    .dark-mode #modalBiaya .card,
    .dark-mode #modalBiaya .accordion-item,
    .dark-mode #modalBiaya .alert-light {
        background: var(--dark-panel-soft) !important;
        border-color: var(--dark-border) !important;
    }

    .dark-mode #modalBiaya .view-detail-action-footer {
        background: var(--dark-panel) !important;
        border-top: 1px solid var(--dark-border) !important;
        box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.35) !important;
    }

    .dark-mode #modalBiaya .btn-close {
        background-color: #050608 !important;
        filter: invert(1) grayscale(100%);
        opacity: 0.9;
    }
}

.dark-mode #modalInputBiayaPermohonan .biaya-modal,
.dark-mode #modalInputBiayaSettlement .biaya-modal,
.dark-mode #modalInputBiayaPermohonan .modal-content,
.dark-mode #modalInputBiayaSettlement .modal-content {
    background: var(--dark-panel) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalInputBiayaPermohonan .biaya-modal-header,
.dark-mode #modalInputBiayaSettlement .biaya-modal-header,
.dark-mode #modalInputBiayaPermohonan .biaya-modal-footer,
.dark-mode #modalInputBiayaSettlement .biaya-modal-footer {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalInputBiayaPermohonan .modal-body,
.dark-mode #modalInputBiayaSettlement .modal-body {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalInputBiayaPermohonan .biaya-summary-item,
.dark-mode #modalInputBiayaSettlement .biaya-summary-item,
.dark-mode #modalInputBiayaPermohonan .biaya-note-box,
.dark-mode #modalInputBiayaSettlement .biaya-note-box,
.dark-mode #modalInputBiayaPermohonan .biaya-total-box,
.dark-mode #modalInputBiayaSettlement .biaya-total-box {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalInputBiayaPermohonan .biaya-summary-item span,
.dark-mode #modalInputBiayaSettlement .biaya-summary-item span,
.dark-mode #modalInputBiayaPermohonan .biaya-total-box span,
.dark-mode #modalInputBiayaSettlement .biaya-total-box span,
.dark-mode #modalInputBiayaPermohonan .permohonan-info-text,
.dark-mode #modalInputBiayaSettlement .text-muted {
    color: var(--dark-muted) !important;
}

.dark-mode #modalInputBiayaPermohonan .biaya-summary-item strong,
.dark-mode #modalInputBiayaSettlement .biaya-summary-item strong,
.dark-mode #modalInputBiayaPermohonan .biaya-total-box strong,
.dark-mode #modalInputBiayaSettlement .biaya-total-box strong,
.dark-mode #modalInputBiayaPermohonan #permohonan-total,
.dark-mode #modalInputBiayaSettlement #biaya-total {
    color: var(--dark-text) !important;
}

.dark-mode #modalInputBiayaPermohonan .biaya-table-wrap,
.dark-mode #modalInputBiayaSettlement .biaya-table-wrap {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode #modalInputBiayaPermohonan .biaya-input-table,
.dark-mode #modalInputBiayaSettlement .biaya-input-table,
.dark-mode #modalInputBiayaPermohonan .biaya-input-table tbody,
.dark-mode #modalInputBiayaSettlement .biaya-input-table tbody,
.dark-mode #modalInputBiayaPermohonan .biaya-input-table tr,
.dark-mode #modalInputBiayaSettlement .biaya-input-table tr,
.dark-mode #modalInputBiayaPermohonan .biaya-input-table td,
.dark-mode #modalInputBiayaSettlement .biaya-input-table td {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalInputBiayaPermohonan .biaya-input-table thead,
.dark-mode #modalInputBiayaSettlement .biaya-input-table thead,
.dark-mode #modalInputBiayaPermohonan .biaya-input-table thead.table-light,
.dark-mode #modalInputBiayaSettlement .biaya-input-table thead.table-light,
.dark-mode #modalInputBiayaPermohonan .biaya-input-table thead th,
.dark-mode #modalInputBiayaSettlement .biaya-input-table thead th {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-muted) !important;
}

.dark-mode #modalInputBiayaPermohonan .biaya-input-table .input-group-text,
.dark-mode #modalInputBiayaSettlement .biaya-input-table .input-group-text {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-muted) !important;
}

.dark-mode #modalInputBiayaPermohonan .form-control,
.dark-mode #modalInputBiayaSettlement .form-control,
.dark-mode #modalInputBiayaPermohonan input[type="file"].form-control,
.dark-mode #modalInputBiayaSettlement input[type="file"].form-control,
.dark-mode #modalInputBiayaPermohonan textarea.form-control,
.dark-mode #modalInputBiayaSettlement textarea.form-control {
    background: #15161b !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

.dark-mode #modalInputBiayaPermohonan .form-control:focus,
.dark-mode #modalInputBiayaSettlement .form-control:focus {
    border-color: var(--dark-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.2) !important;
}

.dark-mode #modalInputBiayaPermohonan .form-control::placeholder,
.dark-mode #modalInputBiayaSettlement .form-control::placeholder {
    color: var(--dark-subtle) !important;
}

.dark-mode #modalInputBiayaPermohonan input[readonly],
.dark-mode #modalInputBiayaSettlement input[readonly],
.dark-mode #modalInputBiayaPermohonan input:disabled,
.dark-mode #modalInputBiayaSettlement input:disabled {
    background: #111215 !important;
    color: var(--dark-muted) !important;
}

.dark-mode #modalInputBiayaPermohonan .btn-light,
.dark-mode #modalInputBiayaSettlement .btn-light {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #modalInputBiayaPermohonan .btn-outline-primary,
.dark-mode #modalInputBiayaSettlement .btn-outline-primary {
    border-color: var(--dark-accent) !important;
    color: #c9c1ff !important;
}

.dark-mode #modalInputBiayaPermohonan .btn-outline-primary:hover,
.dark-mode #modalInputBiayaSettlement .btn-outline-primary:hover {
    background: rgba(124, 92, 255, 0.18) !important;
}

.dark-mode #modalInputBiayaPermohonan .btn-outline-danger,
.dark-mode #modalInputBiayaSettlement .btn-outline-danger {
    border-color: rgba(244, 63, 94, 0.55) !important;
    color: #fda4af !important;
}

.dark-mode #modalInputBiayaPermohonan .btn-close,
.dark-mode #modalInputBiayaSettlement .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.75;
}

.dark-mode footer,
.dark-mode .footer {
    background: var(--dark-shell) !important;
    border-top: 1px solid var(--dark-border) !important;
    color: var(--dark-muted) !important;
}

.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-shell);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #343642;
    border-radius: 999px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4a4d5c;
}

.dark-mode .container-fluid:has(#formVisitFilterCollapse) > .card,
.dark-mode .container-fluid:has(#formVisitFilterCollapse) .card {
    background: var(--dark-panel) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #formVisitFilterCollapse .bg-light {
    background: var(--dark-elevated) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode #formVisitFilterCollapse .form-label {
    color: var(--dark-muted) !important;
}

.dark-mode #formVisitFilterCollapse .form-control,
.dark-mode #formVisitFilterCollapse .form-select {
    background-color: #15161b !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

.dark-mode #formVisitFilterCollapse .form-control::placeholder {
    color: var(--dark-subtle) !important;
}

.dark-mode #formVisitFilterCollapse .form-control:focus,
.dark-mode #formVisitFilterCollapse .form-select:focus {
    border-color: var(--dark-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.2) !important;
}

.dark-mode #formVisitFilterCollapse input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.85);
}

.dark-mode .container-fluid:has(#formVisitFilterCollapse) .btn-light {
    background: var(--dark-panel-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.dark-mode #color-legend {
    background: var(--dark-elevated) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

.dark-mode #color-legend .legend-title {
    color: var(--dark-text) !important;
}

.dark-mode #color-legend .legend-item span:not(.legend-box) {
    color: var(--dark-muted) !important;
}

@media (max-width: 1199.98px) {
    .dark-mode #layout-menu {
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45) !important;
    }
}