/**
 * Dark mode — modals, overlays, PrimeVue panels, app-specific UI
 * Loaded last (after custom.css) so it overrides light backgrounds.
 */
[data-layout-mode=dark_mode] {
    --dm-bg: #12151a;
    --dm-surface: #1a1f27;
    --dm-surface-2: #232a35;
    --dm-surface-3: #2c3441;
    --dm-border: #2a3340;
    --dm-border-hover: #384353;
    --dm-text: #e8edf3;
    --dm-text-secondary: #9aa5b4;
    --dm-text-muted: #6b7785;
    --dm-accent: #4a8fd4;
    --dm-accent-soft: rgba(74, 143, 212, 0.16);
}

/* ========== PrimeVue Dialog / Confirm ========== */
[data-layout-mode=dark_mode] .p-dialog,
[data-layout-mode=dark_mode] .p-dialog .p-dialog-header,
[data-layout-mode=dark_mode] .p-dialog .p-dialog-content,
[data-layout-mode=dark_mode] .p-dialog .p-dialog-footer,
[data-layout-mode=dark_mode] .p-confirmdialog,
[data-layout-mode=dark_mode] .p-confirmdialog .p-dialog-content,
[data-layout-mode=dark_mode] .p-confirmdialog .p-dialog-footer {
    background: var(--dm-surface) !important;
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border) !important;
}

[data-layout-mode=dark_mode] .p-dialog .p-dialog-header .p-dialog-title,
[data-layout-mode=dark_mode] .p-dialog .p-dialog-header .p-dialog-header-icon,
[data-layout-mode=dark_mode] .p-confirmdialog .p-confirmdialog-message {
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .p-dialog-mask.p-component-overlay {
    background-color: rgba(18, 21, 26, 0.65) !important;
}

/* ========== Overlay panels (filter, export, notifications) ========== */
[data-layout-mode=dark_mode] .p-overlaypanel,
[data-layout-mode=dark_mode] .p-overlaypanel .p-overlaypanel-content,
[data-layout-mode=dark_mode] .filter-container,
[data-layout-mode=dark_mode] .filter-container .p-overlaypanel-content {
    background: var(--dm-surface) !important;
    color: var(--dm-text-secondary) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-layout-mode=dark_mode] .p-overlaypanel-content .p-button {
    background: var(--dm-surface-3) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .p-overlaypanel-content .p-button:enabled:hover {
    background: var(--dm-surface-2) !important;
}

/* ========== All form inputs (global catch-all) ========== */
[data-layout-mode=dark_mode] .p-inputtext,
[data-layout-mode=dark_mode] .p-inputtextarea,
[data-layout-mode=dark_mode] .p-inputnumber-input,
[data-layout-mode=dark_mode] .p-password-input,
[data-layout-mode=dark_mode] .p-autocomplete .p-autocomplete-input,
[data-layout-mode=dark_mode] .form-control,
[data-layout-mode=dark_mode] textarea.form-control,
[data-layout-mode=dark_mode] select.form-control,
[data-layout-mode=dark_mode] input.form-control {
    background: var(--dm-surface-3) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .p-inputtext:enabled:focus,
[data-layout-mode=dark_mode] .p-inputtextarea:enabled:focus,
[data-layout-mode=dark_mode] .form-control:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 2px var(--dm-accent-soft) !important;
}

/* ========== Dropdown / MultiSelect ========== */
[data-layout-mode=dark_mode] .p-dropdown,
[data-layout-mode=dark_mode] .p-multiselect,
[data-layout-mode=dark_mode] .p-dropdown .p-dropdown-label,
[data-layout-mode=dark_mode] .p-dropdown .p-dropdown-trigger,
[data-layout-mode=dark_mode] .p-multiselect .p-multiselect-label,
[data-layout-mode=dark_mode] .p-multiselect .p-multiselect-trigger {
    background: var(--dm-surface-3) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .p-dropdown-panel,
[data-layout-mode=dark_mode] .p-multiselect-panel,
[data-layout-mode=dark_mode] .p-dropdown-header,
[data-layout-mode=dark_mode] .p-multiselect-header,
[data-layout-mode=dark_mode] .p-dropdown-filter-container,
[data-layout-mode=dark_mode] .p-multiselect-filter-container {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .p-dropdown-item,
[data-layout-mode=dark_mode] .p-multiselect-item {
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .p-dropdown-item.p-highlight,
[data-layout-mode=dark_mode] .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
[data-layout-mode=dark_mode] .p-multiselect-item.p-highlight,
[data-layout-mode=dark_mode] .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .p-dropdown-empty-message,
[data-layout-mode=dark_mode] .p-multiselect-empty-message {
    color: var(--dm-text-muted) !important;
}

/* ========== Calendar / Datepicker ========== */
[data-layout-mode=dark_mode] .p-calendar .p-inputtext,
[data-layout-mode=dark_mode] .p-calendar button.p-datepicker-trigger,
[data-layout-mode=dark_mode] .p-datepicker,
[data-layout-mode=dark_mode] .p-datepicker-panel,
[data-layout-mode=dark_mode] .p-datepicker-header,
[data-layout-mode=dark_mode] .p-datepicker-calendar-container,
[data-layout-mode=dark_mode] .p-datepicker table td,
[data-layout-mode=dark_mode] .p-datepicker table th {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .p-datepicker table td > span {
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .p-datepicker table td > span.p-highlight,
[data-layout-mode=dark_mode] .p-datepicker table td.p-datepicker-today > span {
    background: var(--dm-accent-soft) !important;
    color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .p-datepicker table td > span:not(.p-disabled):hover {
    background: var(--dm-surface-2) !important;
}

[data-layout-mode=dark_mode] .p-datepicker .p-datepicker-header .p-datepicker-title button,
[data-layout-mode=dark_mode] .p-datepicker .p-datepicker-header .p-datepicker-prev,
[data-layout-mode=dark_mode] .p-datepicker .p-datepicker-header .p-datepicker-next {
    color: var(--dm-text) !important;
}

/* ========== Autocomplete / Listbox ========== */
[data-layout-mode=dark_mode] .p-autocomplete-panel,
[data-layout-mode=dark_mode] .p-autocomplete-items,
[data-layout-mode=dark_mode] .p-listbox,
[data-layout-mode=dark_mode] .p-listbox-list,
[data-layout-mode=dark_mode] .p-autocomplete-item {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .p-autocomplete-item.p-highlight,
[data-layout-mode=dark_mode] .p-listbox-item.p-highlight {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

/* ========== Toast / Messages ========== */
[data-layout-mode=dark_mode] .p-toast .p-toast-message,
[data-layout-mode=dark_mode] .p-toast .p-toast-message-content,
[data-layout-mode=dark_mode] .p-inline-message,
[data-layout-mode=dark_mode] .p-message {
    background: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .p-toast .p-toast-message-icon,
[data-layout-mode=dark_mode] .p-toast .p-toast-summary,
[data-layout-mode=dark_mode] .p-toast .p-toast-detail {
    color: var(--dm-text) !important;
}

/* ========== Panel / Accordion / Fieldset ========== */
[data-layout-mode=dark_mode] .p-panel,
[data-layout-mode=dark_mode] .p-panel .p-panel-header,
[data-layout-mode=dark_mode] .p-panel .p-panel-content,
[data-layout-mode=dark_mode] .p-panel .p-panel-footer,
[data-layout-mode=dark_mode] .p-fieldset,
[data-layout-mode=dark_mode] .p-fieldset .p-fieldset-legend,
[data-layout-mode=dark_mode] .p-accordion .p-accordion-header .p-accordion-header-link,
[data-layout-mode=dark_mode] .p-accordion .p-accordion-content,
[data-layout-mode=dark_mode] .p-accordion-header-action {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

/* ========== Sidebar / Tooltip ========== */
[data-layout-mode=dark_mode] .p-sidebar,
[data-layout-mode=dark_mode] .p-sidebar .p-sidebar-header,
[data-layout-mode=dark_mode] .p-sidebar .p-sidebar-content,
[data-layout-mode=dark_mode] .p-tooltip .p-tooltip-text {
    background: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

/* ========== Buttons (secondary / default in modals) ========== */
[data-layout-mode=dark_mode] .p-button:not(.p-button-primary):not(.p-button-danger):not(.p-button-success):not(.p-button-warning):not(.p-button-info):not(.vr-wizard--done-btn):not(.vr-wizard--next-btn),
[data-layout-mode=dark_mode] .btn-default,
[data-layout-mode=dark_mode] .btn-default:hover,
[data-layout-mode=dark_mode] .btn-default:focus {
    background: var(--dm-surface-3) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .p-button:not(.p-button-primary):not(.p-button-danger):not(.vr-wizard--done-btn):not(.vr-wizard--next-btn):enabled:hover,
[data-layout-mode=dark_mode] .btn-default:hover {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

/* ========== Radio / Switch / Checkbox ========== */
/* Bootstrap .form-check-input on p-checkbox root causes light border — reset wrapper */
[data-layout-mode=dark_mode] .p-checkbox.form-check-input,
[data-layout-mode=dark_mode] .form-check-input.p-checkbox {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

[data-layout-mode=dark_mode] .p-radiobutton .p-radiobutton-box,
[data-layout-mode=dark_mode] .p-inputswitch .p-inputswitch-slider,
[data-layout-mode=dark_mode] .p-checkbox .p-checkbox-box,
[data-layout-mode=dark_mode] .p-datatable .p-checkbox .p-checkbox-box,
[data-layout-mode=dark_mode] .checkbox-container .p-checkbox .p-checkbox-box,
[data-layout-mode=dark_mode] .p-checkbox:not(.p-highlight):not(.p-disabled) .p-checkbox-box {
    background: var(--dm-surface-2) !important;
    border: 1px solid var(--dm-border) !important;
    outline: none !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .p-checkbox:not(.p-disabled):not(.p-highlight):hover .p-checkbox-box,
[data-layout-mode=dark_mode] .p-datatable .p-checkbox:not(.p-disabled):not(.p-highlight):hover .p-checkbox-box {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border-hover) !important;
}

[data-layout-mode=dark_mode] .p-checkbox.p-focus .p-checkbox-box,
[data-layout-mode=dark_mode] .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus) .p-checkbox-box,
[data-layout-mode=dark_mode] .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 1px var(--dm-accent-soft) !important;
    outline: none !important;
}

[data-layout-mode=dark_mode] .p-radiobutton .p-radiobutton-box.p-highlight,
[data-layout-mode=dark_mode] .p-checkbox.p-highlight .p-checkbox-box,
[data-layout-mode=dark_mode] .p-checkbox.p-highlight:hover .p-checkbox-box,
[data-layout-mode=dark_mode] .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box,
[data-layout-mode=dark_mode] .p-datatable .p-checkbox.p-highlight .p-checkbox-box,
[data-layout-mode=dark_mode] .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
    background: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .p-inputswitch .p-inputswitch-slider:before {
    background: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .checkbox-container,
[data-layout-mode=dark_mode] .p-datatable .p-datatable-thead .checkbox-container,
[data-layout-mode=dark_mode] .p-datatable .p-datatable-tbody .checkbox-container {
    background: transparent !important;
    border: none !important;
}

/* ========== File upload / Chips / Timeline ========== */
[data-layout-mode=dark_mode] .p-fileupload,
[data-layout-mode=dark_mode] .p-fileupload-content,
[data-layout-mode=dark_mode] .p-fileupload-row,
[data-layout-mode=dark_mode] .p-chips .p-chips-multiple-container,
[data-layout-mode=dark_mode] .p-timeline-event-content,
[data-layout-mode=dark_mode] .p-timeline-event-opposite {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

/* ========== SweetAlert2 ========== */
[data-layout-mode=dark_mode] .swal2-popup,
[data-layout-mode=dark_mode] .swal2-html-container,
[data-layout-mode=dark_mode] .swal2-title,
[data-layout-mode=dark_mode] .swal2-content {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .swal2-styled.swal2-cancel {
    background: var(--dm-surface-3) !important;
    color: var(--dm-text-secondary) !important;
    border: 1px solid var(--dm-border) !important;
}

[data-layout-mode=dark_mode] button.swal2-styled.swal2-confirm {
    background-color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .swal2-icon {
    border-color: var(--dm-border) !important;
}

/* ========== Select2 (plugin) ========== */
[data-layout-mode=dark_mode] .select2-container--default .select2-selection--single,
[data-layout-mode=dark_mode] .select2-container--default .select2-selection--multiple,
[data-layout-mode=dark_mode] .select2-dropdown {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
}

/* ========== App-specific: modals & wizards ========== */
[data-layout-mode=dark_mode] .vr-wizard--footer,
[data-layout-mode=dark_mode] .step-view,
[data-layout-mode=dark_mode] .form-overlay,
[data-layout-mode=dark_mode] .form-overlay .table-responsive,
[data-layout-mode=dark_mode] .special-request-container,
[data-layout-mode=dark_mode] .search-input,
[data-layout-mode=dark_mode] .expense-item-search,
[data-layout-mode=dark_mode] .table-top .search-input,
[data-layout-mode=dark_mode] .search-header,
[data-layout-mode=dark_mode] .search-header .search-input {
    background: var(--dm-surface) !important;
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border) !important;
}

/* Validation tooltip box/shadow in dark mode */
[data-layout-mode=dark_mode] .form-overlay .p-error {
    background: #ff5f5f !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

[data-layout-mode=dark_mode] .form-overlay .p-error:after {
    border-color: #ff5f5f transparent transparent !important;
}

[data-layout-mode=dark_mode] .stock-input-number {
    background: var(--dm-surface-3) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .order-item-card,
[data-layout-mode=dark_mode] .account-payable-modal .order-item-card,
[data-layout-mode=dark_mode] .product-card,
[data-layout-mode=dark_mode] .payment-summary-cont,
[data-layout-mode=dark_mode] .account-payable-modal .payment-summary-cont,
[data-layout-mode=dark_mode] .accounting-content-item,
[data-layout-mode=dark_mode] .tabledetails > ul > li,
[data-layout-mode=dark_mode] .tabledetails .table-bar li {
    background: var(--dm-surface-2) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .order-item-card.active,
[data-layout-mode=dark_mode] .account-payable-modal .order-item-card.active {
    background: var(--dm-accent-soft) !important;
    border-color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .order-item-img-cont,
[data-layout-mode=dark_mode] .account-payable-modal .order-item-img-cont,
[data-layout-mode=dark_mode] .account-payable-modal .order-selections .order-item-img-cont,
[data-layout-mode=dark_mode] .product-img-cont,
[data-layout-mode=dark_mode] .expense-item-img-cont {
    background: var(--dm-surface-3) !important;
    border: 1px solid var(--dm-border) !important;
}

[data-layout-mode=dark_mode] .order-item-detail,
[data-layout-mode=dark_mode] .order-item-detail div,
[data-layout-mode=dark_mode] .accounting-item-details,
[data-layout-mode=dark_mode] .accounting-item-details div {
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .expense-modal .accounting-item-details,
[data-layout-mode=dark_mode] .expense-modal .accounting-item-details div,
[data-layout-mode=dark_mode] .expense-modal .label-title,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-item-details,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-item-details div,
[data-layout-mode=dark_mode] .cash-request-modal .label-title,
[data-layout-mode=dark_mode] .refund-modal .accounting-item-details,
[data-layout-mode=dark_mode] .refund-modal .accounting-item-details div,
[data-layout-mode=dark_mode] .refund-modal .label-title,
[data-layout-mode=dark_mode] .account-receivable-modal .accounting-item-details,
[data-layout-mode=dark_mode] .account-receivable-modal .accounting-item-details div,
[data-layout-mode=dark_mode] .account-receivable-modal .label-title,
[data-layout-mode=dark_mode] .decline-expense-modal .label-title {
    color: var(--dm-text-secondary) !important;
}

/* Accounting modals — category/type cards (expense, AR, refund, encashment, etc.) */
[data-layout-mode=dark_mode] .expense-modal .accounting-type,
[data-layout-mode=dark_mode] .expense-modal .accounting-item-card,
[data-layout-mode=dark_mode] .expense-modal .accounting-item-img-cont,
[data-layout-mode=dark_mode] .expense-modal .category-selection > .d-flex > div > .accounting-item-img-cont,
[data-layout-mode=dark_mode] .expense-modal .accounting-item-card.create-new,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-type,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-item-card,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-item-img-cont,
[data-layout-mode=dark_mode] .refund-modal .accounting-type,
[data-layout-mode=dark_mode] .refund-modal .accounting-item-card,
[data-layout-mode=dark_mode] .refund-modal .accounting-item-img-cont,
[data-layout-mode=dark_mode] .account-receivable-modal .accounting-type,
[data-layout-mode=dark_mode] .account-receivable-modal .accounting-item-card,
[data-layout-mode=dark_mode] .account-receivable-modal .accounting-item-img-cont,
[data-layout-mode=dark_mode] .decline-expense-modal .accounting-type,
[data-layout-mode=dark_mode] .decline-expense-modal .accounting-item-card,
[data-layout-mode=dark_mode] .decline-expense-modal .accounting-item-img-cont {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .expense-modal .accounting-type.selected,
[data-layout-mode=dark_mode] .expense-modal .accounting-item-card.selected,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-type.selected,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-item-card.selected,
[data-layout-mode=dark_mode] .refund-modal .accounting-type.selected,
[data-layout-mode=dark_mode] .refund-modal .accounting-item-card.selected,
[data-layout-mode=dark_mode] .account-receivable-modal .accounting-type.selected,
[data-layout-mode=dark_mode] .account-receivable-modal .accounting-item-card.selected,
[data-layout-mode=dark_mode] .decline-expense-modal .accounting-type.selected,
[data-layout-mode=dark_mode] .decline-expense-modal .accounting-item-card.selected {
    background: var(--dm-accent-soft) !important;
    border-color: var(--dm-accent) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .expense-modal .accounting-title-container,
[data-layout-mode=dark_mode] .expense-modal .summary-title-container,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-title-container,
[data-layout-mode=dark_mode] .refund-modal .accounting-title-container,
[data-layout-mode=dark_mode] .account-receivable-modal .accounting-title-container {
    border-top-color: var(--dm-border) !important;
    border-bottom-color: var(--dm-border) !important;
}

[data-layout-mode=dark_mode] .expense-modal .accounting-content-item,
[data-layout-mode=dark_mode] .expense-modal .accounting-content,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-content-item,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-content,
[data-layout-mode=dark_mode] .refund-modal .accounting-content-item,
[data-layout-mode=dark_mode] .refund-modal .accounting-content {
    border-bottom-color: var(--dm-border) !important;
}

[data-layout-mode=dark_mode] .expense-modal .summary-item,
[data-layout-mode=dark_mode] .cash-request-modal .summary-item,
[data-layout-mode=dark_mode] .refund-modal .summary-item,
[data-layout-mode=dark_mode] .account-receivable-modal .summary-item {
    background-color: var(--dm-surface-2) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .expense-modal .summary-item p,
[data-layout-mode=dark_mode] .cash-request-modal .summary-item p,
[data-layout-mode=dark_mode] .refund-modal .summary-item p,
[data-layout-mode=dark_mode] .account-receivable-modal .summary-item p {
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .expense-modal .summary-item .text-blue,
[data-layout-mode=dark_mode] .cash-request-modal .summary-item .text-blue,
[data-layout-mode=dark_mode] .refund-modal .summary-item .text-blue,
[data-layout-mode=dark_mode] .account-receivable-modal .summary-item .text-blue,
[data-layout-mode=dark_mode] .expense-modal .text-blue,
[data-layout-mode=dark_mode] .cash-request-modal .text-blue,
[data-layout-mode=dark_mode] .refund-modal .text-blue {
    color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .expense-modal .payment-cont .control-label,
[data-layout-mode=dark_mode] .cash-request-modal .payment-cont .control-label,
[data-layout-mode=dark_mode] .refund-modal .payment-cont .control-label,
[data-layout-mode=dark_mode] .expense-modal .category-type-cont .label-title,
[data-layout-mode=dark_mode] .cash-request-modal .category-type-cont .label-title {
    color: var(--dm-text-muted) !important;
}

[data-layout-mode=dark_mode] .expense-modal .form-control::placeholder,
[data-layout-mode=dark_mode] .expense-modal .p-inputtext::placeholder,
[data-layout-mode=dark_mode] .cash-request-modal .form-control::placeholder,
[data-layout-mode=dark_mode] .cash-request-modal .p-inputtext::placeholder,
[data-layout-mode=dark_mode] .refund-modal .form-control::placeholder,
[data-layout-mode=dark_mode] .refund-modal .p-inputtext::placeholder,
[data-layout-mode=dark_mode] .account-receivable-modal .form-control::placeholder,
[data-layout-mode=dark_mode] .account-receivable-modal .p-inputtext::placeholder {
    color: var(--dm-text-muted) !important;
    opacity: 1;
}

[data-layout-mode=dark_mode] .expense-modal .note-input,
[data-layout-mode=dark_mode] .cash-request-modal .note-input,
[data-layout-mode=dark_mode] .refund-modal .note-input {
    background: var(--dm-surface-3) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .expense-modal .btn-theme,
[data-layout-mode=dark_mode] .cash-request-modal .btn-theme,
[data-layout-mode=dark_mode] .refund-modal .btn-theme,
[data-layout-mode=dark_mode] .account-receivable-modal .btn-theme,
[data-layout-mode=dark_mode] .expense-modal .accounting-title-container .btn-theme {
    background-color: var(--dm-surface-3) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .expense-modal .btn-theme .p-button-label,
[data-layout-mode=dark_mode] .expense-modal .btn-theme .p-button-icon {
    color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .expense-modal .btn-normal,
[data-layout-mode=dark_mode] .cash-request-modal .btn-normal,
[data-layout-mode=dark_mode] .refund-modal .btn-normal {
    background: var(--dm-accent-soft) !important;
    border-color: var(--dm-accent) !important;
    color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .expense-modal .btn-normal:hover,
[data-layout-mode=dark_mode] .cash-request-modal .btn-normal:hover,
[data-layout-mode=dark_mode] .refund-modal .btn-normal:hover {
    background: rgba(74, 143, 212, 0.22) !important;
    color: var(--dm-text) !important;
}

/* Mode of payment — visible bank logos & labels */
[data-layout-mode=dark_mode] .expense-modal .payment-item img,
[data-layout-mode=dark_mode] .cash-request-modal .payment-item img,
[data-layout-mode=dark_mode] .refund-modal .payment-item img,
[data-layout-mode=dark_mode] .account-receivable-modal .payment-item img {
    filter: grayscale(0.2) brightness(1.1) opacity(0.88) !important;
}

[data-layout-mode=dark_mode] .expense-modal .payment-item span,
[data-layout-mode=dark_mode] .cash-request-modal .payment-item span,
[data-layout-mode=dark_mode] .refund-modal .payment-item span,
[data-layout-mode=dark_mode] .account-receivable-modal .payment-item span {
    color: var(--dm-text-muted) !important;
}

[data-layout-mode=dark_mode] .expense-modal .mode-of-payment-cont input[type="radio"]:checked + .payment-item,
[data-layout-mode=dark_mode] .expense-modal input.radio-payment-mode:checked + label.payment-item,
[data-layout-mode=dark_mode] .cash-request-modal .mode-of-payment-cont input[type="radio"]:checked + .payment-item,
[data-layout-mode=dark_mode] .refund-modal .mode-of-payment-cont input[type="radio"]:checked + .payment-item,
[data-layout-mode=dark_mode] .account-receivable-modal .mode-of-payment-cont input[type="radio"]:checked + .payment-item,
[data-layout-mode=dark_mode] input.radio-payment-mode:checked + label.payment-item {
    background: var(--dm-accent-soft) !important;
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 1px var(--dm-accent-soft) !important;
}

[data-layout-mode=dark_mode] .expense-modal .mode-of-payment-cont input[type="radio"]:checked + .payment-item img,
[data-layout-mode=dark_mode] .expense-modal input.radio-payment-mode:checked + label.payment-item img,
[data-layout-mode=dark_mode] .cash-request-modal .mode-of-payment-cont input[type="radio"]:checked + .payment-item img,
[data-layout-mode=dark_mode] .refund-modal .mode-of-payment-cont input[type="radio"]:checked + .payment-item img {
    filter: none !important;
    opacity: 1 !important;
}

[data-layout-mode=dark_mode] .expense-modal .mode-of-payment-cont input[type="radio"]:checked + .payment-item span,
[data-layout-mode=dark_mode] .expense-modal input.radio-payment-mode:checked + label.payment-item span,
[data-layout-mode=dark_mode] .cash-request-modal .mode-of-payment-cont input[type="radio"]:checked + .payment-item span,
[data-layout-mode=dark_mode] .refund-modal .mode-of-payment-cont input[type="radio"]:checked + .payment-item span {
    color: var(--dm-text) !important;
    font-weight: 600;
}

[data-layout-mode=dark_mode] .expense-modal .payment-summary-cont,
[data-layout-mode=dark_mode] .expense-modal .payment-summary-item,
[data-layout-mode=dark_mode] .cash-request-modal .payment-summary-cont,
[data-layout-mode=dark_mode] .cash-request-modal .payment-summary-item,
[data-layout-mode=dark_mode] .refund-modal .payment-summary-cont,
[data-layout-mode=dark_mode] .refund-modal .payment-summary-item,
[data-layout-mode=dark_mode] .account-receivable-modal .payment-summary-cont,
[data-layout-mode=dark_mode] .account-receivable-modal .payment-summary-item,
[data-layout-mode=dark_mode] .edit-receivable-modal .payment-summary-cont,
[data-layout-mode=dark_mode] .edit-receivable-modal .payment-summary-item,
[data-layout-mode=dark_mode] .view-modal.account-receivable-modal .details-content,
[data-layout-mode=dark_mode] .view-modal.account-receivable-modal .tabledetails {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .expense-modal .accounting-item-card.create-new .icon svg path,
[data-layout-mode=dark_mode] .cash-request-modal .accounting-item-card.create-new .icon svg path {
    fill: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .account-payable-modal .p-skeleton,
[data-layout-mode=dark_mode] .p-skeleton {
    background: linear-gradient(90deg, #2c3441 0%, #3a4554 45%, #2c3441 90%) !important;
    background-size: 200% 100% !important;
    animation: dm-skeleton-shimmer 1.35s ease-in-out infinite !important;
}

[data-layout-mode=dark_mode] .p-skeleton::before,
[data-layout-mode=dark_mode] .p-skeleton::after {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0)
    ) !important;
}

@keyframes dm-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* Wizard footer — Cancel / Prev / Next (account payable & other modals) */
[data-layout-mode=dark_mode] .account-payable-modal .vr-wizard--close-btn.vr-wizard--btn,
[data-layout-mode=dark_mode] .account-payable-modal .vr-wizard--prev-btn.vr-wizard--btn,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--close-btn.vr-wizard--btn,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--prev-btn.vr-wizard--btn {
    --wizard-stepper--btn-bg: var(--dm-surface-3) !important;
    --wizard-stepper--prev-btn-bg: var(--dm-surface-3) !important;
    --wizard-stepper--btn-color: #ffffff !important;
    --wizard-stepper--prev-btn-color: #ffffff !important;
    --wizard-stepper--btn-border-color: var(--dm-border) !important;
    --wizard-stepper--prev-btn-border-color: var(--dm-border) !important;
    background: var(--dm-surface-3) !important;
    color: #ffffff !important;
    border: 1px solid var(--dm-border) !important;
}

[data-layout-mode=dark_mode] .account-payable-modal .vr-wizard--next-btn.vr-wizard--btn,
[data-layout-mode=dark_mode] .account-payable-modal .vr-wizard--done-btn.vr-wizard--btn,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--next-btn.vr-wizard--btn,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--done-btn.vr-wizard--btn {
    --wizard-stepper--btn-bg: var(--dm-accent) !important;
    --wizard-stepper--btn-color: #fff !important;
    --wizard-stepper--btn-border-color: var(--dm-accent) !important;
    background: var(--dm-accent) !important;
    color: #fff !important;
    border: 1px solid var(--dm-accent) !important;
}

/* Keep primary wizard actions blue even when disabled */
[data-layout-mode=dark_mode] .account-payable-modal .vr-wizard--next-btn.vr-wizard--btn:disabled,
[data-layout-mode=dark_mode] .account-payable-modal .vr-wizard--done-btn.vr-wizard--btn:disabled,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--next-btn.vr-wizard--btn:disabled,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--done-btn.vr-wizard--btn:disabled,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--next-btn.vr-wizard--btn.p-disabled,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--done-btn.vr-wizard--btn.p-disabled {
    background: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: #ffffff !important;
    opacity: 0.75;
}

[data-layout-mode=dark_mode] .p-dialog .vr-wizard--btn.secondary,
[data-layout-mode=dark_mode] .account-payable-modal .vr-wizard--btn.secondary {
    background: var(--dm-surface-3) !important;
    color: #ffffff !important;
    border: 1px solid var(--dm-border) !important;
}

/* Ensure Close/secondary labels stay white in dark mode */
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--btn.secondary,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--btn.secondary .p-button-label,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--close-btn.vr-wizard--btn,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--close-btn.vr-wizard--btn .p-button-label,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--prev-btn.vr-wizard--btn,
[data-layout-mode=dark_mode] .p-dialog .vr-wizard--prev-btn.vr-wizard--btn .p-button-label {
    color: #ffffff !important;
}

[data-layout-mode=dark_mode] .account-payable-modal .w-stepper__item.active,
[data-layout-mode=dark_mode] .account-payable-modal .w-stepper__item.completed {
    color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .account-payable-modal .w_stepper__item_content::before {
    background-color: var(--dm-surface-3) !important;
}

[data-layout-mode=dark_mode] .account-payable-modal .w-stepper__item.active .w_stepper__item_content::before,
[data-layout-mode=dark_mode] .account-payable-modal .w-stepper__item.completed .w_stepper__item_content::before {
    background-color: var(--dm-accent-soft) !important;
    border-color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .account-payable-modal .w-stepper__item:not(:first-child)::before {
    background-color: var(--dm-border) !important;
}

/* Upload cards (Capture/Upload) inside payment modal */
[data-layout-mode=dark_mode] .account-payable-modal .upload-container,
[data-layout-mode=dark_mode] .p-dialog .upload-container {
    background-color: var(--dm-surface-2) !important;
    border: 1px dashed var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .account-payable-modal .upload-label,
[data-layout-mode=dark_mode] .p-dialog .upload-label {
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .account-payable-modal .upload-label .action,
[data-layout-mode=dark_mode] .p-dialog .upload-label .action {
    color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .account-payable-modal video,
[data-layout-mode=dark_mode] .account-payable-modal canvas,
[data-layout-mode=dark_mode] .account-payable-modal .img-preview-cont,
[data-layout-mode=dark_mode] .account-payable-modal .loader-container,
[data-layout-mode=dark_mode] .p-dialog video,
[data-layout-mode=dark_mode] .p-dialog canvas,
[data-layout-mode=dark_mode] .p-dialog .img-preview-cont,
[data-layout-mode=dark_mode] .p-dialog .loader-container {
    background-color: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
}

/* Supplier Bank payment mode cards */
[data-layout-mode=dark_mode] .mode-of-payment-cont .payment-item,
[data-layout-mode=dark_mode] .account-payable-modal .payment-item {
    background: var(--dm-surface-2) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .mode-of-payment-cont .payment-item span,
[data-layout-mode=dark_mode] .account-payable-modal .payment-item span {
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .mode-of-payment-cont input[type="radio"]:checked + .payment-item,
[data-layout-mode=dark_mode] .account-payable-modal input[type="radio"]:checked + .payment-item {
    background: var(--dm-accent-soft) !important;
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 1px var(--dm-accent-soft) !important;
}

[data-layout-mode=dark_mode] .category-cont a {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-accent) !important;
    color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .category-cont a.selected {
    background: var(--dm-accent-soft) !important;
}

[data-layout-mode=dark_mode] .shop-cont .header,
[data-layout-mode=dark_mode] .items-selection-container .header {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .p-dialog .p-datatable .p-datatable-thead > tr > th,
[data-layout-mode=dark_mode] .p-dialog .p-datatable .p-datatable-tbody > tr > td,
[data-layout-mode=dark_mode] .account-payable-modal .p-datatable .p-datatable-thead > tr > th,
[data-layout-mode=dark_mode] .account-payable-modal .p-datatable .p-datatable-tbody > tr > td {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .p-dialog .p-datatable-loading-overlay,
[data-layout-mode=dark_mode] .p-datatable-loading-overlay {
    background: rgba(18, 21, 26, 0.5) !important;
}

/* Labels & muted text inside modals */
[data-layout-mode=dark_mode] .p-dialog label,
[data-layout-mode=dark_mode] .p-dialog .col-form-label,
[data-layout-mode=dark_mode] .p-overlaypanel label,
[data-layout-mode=dark_mode] .form-overlay label,
[data-layout-mode=dark_mode] .p-dialog .text-muted {
    color: var(--dm-text-muted) !important;
}

[data-layout-mode=dark_mode] .p-dialog h1,
[data-layout-mode=dark_mode] .p-dialog h2,
[data-layout-mode=dark_mode] .p-dialog h3,
[data-layout-mode=dark_mode] .p-dialog h4,
[data-layout-mode=dark_mode] .p-dialog h5,
[data-layout-mode=dark_mode] .p-dialog h6,
[data-layout-mode=dark_mode] .p-dialog .text-dark {
    color: var(--dm-text) !important;
}

/* ========== Expense PR compare modal (scoped Vue styles) ========== */
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-header-bar,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-kpi,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-toolbar,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-accordion-head,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-table-card,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-note-card,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-search,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-check-ui,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-clear-btn {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-meta-primary,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-dialog-title,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-kpi-value,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-table thead th {
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-table thead th {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border) !important;
}

[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-meta-secondary,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-dialog-eyebrow,
[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-kpi-label {
    color: var(--dm-text-muted) !important;
}

[data-layout-mode=dark_mode] .expense-pr-compare-dialog .compare-search :deep(input) {
    background: transparent !important;
    color: var(--dm-text) !important;
}

/* ========== Global loader (app-loader / datatable #loading) ========== */
[data-layout-mode=dark_mode] div#global-loader,
[data-layout-mode=dark_mode] #global-loader {
    background-image: radial-gradient(
        rgba(18, 21, 26, 0.88),
        rgba(18, 21, 26, 0.5),
        rgba(18, 21, 26, 0.12),
        transparent,
        transparent
    ) !important;
    background-color: transparent !important;
}

[data-layout-mode=dark_mode] .p-datatable-loading-overlay div#global-loader,
[data-layout-mode=dark_mode] .p-datatable-loading-overlay #global-loader,
[data-layout-mode=dark_mode] .p-dialog .p-datatable-loading-overlay div#global-loader {
    height: 100% !important;
    max-height: 100%;
    min-height: 0;
}

[data-layout-mode=dark_mode] .p-dialog .app-loader,
[data-layout-mode=dark_mode] .loader-overlay {
    background: rgba(18, 21, 26, 0.6) !important;
}

/* ========== Status pills (PAID / PENDING / AUDITED) ========== */
[data-layout-mode=dark_mode] .bg-soft-success {
    background: rgba(46, 184, 128, 0.2) !important;
    color: #7fe6b6 !important;
    border: 1px solid rgba(46, 184, 128, 0.35) !important;
}

[data-layout-mode=dark_mode] .bg-soft-secondary {
    background: rgba(120, 138, 160, 0.2) !important;
    color: #c3cfdd !important;
    border: 1px solid rgba(120, 138, 160, 0.35) !important;
}

[data-layout-mode=dark_mode] .account-payable-modal td .bg-soft-success,
[data-layout-mode=dark_mode] .account-payable-modal td .bg-soft-secondary,
[data-layout-mode=dark_mode] .p-datatable td .bg-soft-success,
[data-layout-mode=dark_mode] .p-datatable td .bg-soft-secondary {
    border-radius: 4px;
    font-weight: 600;
}

/* ========== Sidebar Notification Badges ========== */
[data-layout-mode=dark_mode] .sidebar .sidebar-menu ul li a span.badge,
[data-layout-mode=dark_mode] .sidebars .sidebar-menu ul li a span.badge,
[data-layout-mode=dark_mode] .mini-sidebar .sidebar .sidebar-menu ul li a span.badge,
[data-layout-mode=dark_mode] .mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a span.badge {
    color: #ffffff !important;
    font-weight: 700;
}

/* ========== Financial Audit Module ========== */
[data-layout-mode=dark_mode] .financial_audit .fa-audit-board,
[data-layout-mode=dark_mode] .financial_audit .fa-date-divider,
[data-layout-mode=dark_mode] .financial_audit .fa-account-card,
[data-layout-mode=dark_mode] .financial_audit .fa-legend-inner,
[data-layout-mode=dark_mode] .financial_audit .fa-audit-action-center,
[data-layout-mode=dark_mode] .financial_audit .fa-audit-options-item,
[data-layout-mode=dark_mode] .financial_audit .fa-discrepancy-alert {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .financial_audit .fa-card-header,
[data-layout-mode=dark_mode] .financial_audit .fa-card-titlebar,
[data-layout-mode=dark_mode] .financial_audit .fa-card-subheader,
[data-layout-mode=dark_mode] .financial_audit .fa-card-beginning,
[data-layout-mode=dark_mode] .financial_audit .fa-entry-row,
[data-layout-mode=dark_mode] .financial_audit .fa-entry-cell,
[data-layout-mode=dark_mode] .financial_audit .fa-col-sort-btn,
[data-layout-mode=dark_mode] .financial_audit .fa-card-menu-inner,
[data-layout-mode=dark_mode] .financial_audit .fa-card-menu-item,
[data-layout-mode=dark_mode] .financial_audit .fa-column-sort-choice {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .financial_audit .fa-card-title,
[data-layout-mode=dark_mode] .financial_audit .fa-col-header-label,
[data-layout-mode=dark_mode] .financial_audit .fa-column-total-row span,
[data-layout-mode=dark_mode] .financial_audit .fa-card-total-row,
[data-layout-mode=dark_mode] .financial_audit .fa-card-total-row span,
[data-layout-mode=dark_mode] .financial_audit .fa-card-total-row strong,
[data-layout-mode=dark_mode] .financial_audit .fa-legend-code {
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .financial_audit .fa-legend .text-muted.small,
[data-layout-mode=dark_mode] .financial_audit .fa-legend-label,
[data-layout-mode=dark_mode] .financial_audit .fa-audit-options-panel__title {
    color: var(--dm-text-muted) !important;
}

[data-layout-mode=dark_mode] .financial_audit .fa-beginning-peso-sign,
[data-layout-mode=dark_mode] .financial_audit .right-label span {
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .financial_audit :deep(.fa-beginning-input),
[data-layout-mode=dark_mode] .financial_audit :deep(.fa-entry-cell input),
[data-layout-mode=dark_mode] .financial_audit :deep(.fa-entry-cell .fa-entry-input),
[data-layout-mode=dark_mode] .financial_audit :deep(.fa-entry-cell .h-2) {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .financial_audit .fa-entry-cell .with-peso::after {
    color: var(--dm-text-muted) !important;
}

[data-layout-mode=dark_mode] .financial_audit .fa-audit-toolbar-mini,
[data-layout-mode=dark_mode] .financial_audit .fa-audit-toolbar-expand,
[data-layout-mode=dark_mode] .financial_audit .fa-audit-options-btn {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* Financial Audit components */
[data-layout-mode=dark_mode] .fa-action-card {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .fa-action-card__title,
[data-layout-mode=dark_mode] .fa-action-card__value {
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .fa-action-card__suffix {
    color: var(--dm-text-muted) !important;
}

[data-layout-mode=dark_mode] .fa-focus-zoom-panel,
[data-layout-mode=dark_mode] .fa-focus-toggle,
[data-layout-mode=dark_mode] .fa-focus-zoom-btn,
[data-layout-mode=dark_mode] .fa-focus-cols-presets,
[data-layout-mode=dark_mode] .fa-focus-cols-preset {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .fa-focus-zoom-value,
[data-layout-mode=dark_mode] .fa-focus-toggle-label {
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .fa-focus-zoom-divider {
    background: var(--dm-border) !important;
}

[data-layout-mode=dark_mode] .fa-unplotted-tools,
[data-layout-mode=dark_mode] .fa-unplotted-search-box,
[data-layout-mode=dark_mode] .fa-unplotted-type-filter,
[data-layout-mode=dark_mode] .fa-unplotted-clear-filter,
[data-layout-mode=dark_mode] .fa-unplotted-section-header,
[data-layout-mode=dark_mode] .fa-unplotted-date-card,
[data-layout-mode=dark_mode] .fa-unplotted-detail-level,
[data-layout-mode=dark_mode] .fa-unplotted-hierarchy-legend,
[data-layout-mode=dark_mode] .fa-unplotted-stat-card {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .fa-unplotted-stat-card strong,
[data-layout-mode=dark_mode] .fa-unplotted-legend-title,
[data-layout-mode=dark_mode] .fa-unplotted-dialog-header h5 {
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .fa-unplotted-eyebrow,
[data-layout-mode=dark_mode] .fa-unplotted-strip-label,
[data-layout-mode=dark_mode] .fa-unplotted-empty p,
[data-layout-mode=dark_mode] .fa-unplotted-match-count {
    color: var(--dm-text-muted) !important;
}

[data-layout-mode=dark_mode] .fa-unplotted-detail-table thead th {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

[data-layout-mode=dark_mode] .fa-audit-loader-panel {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .fa-audit-loader-title {
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .fa-audit-loader-hint {
    color: var(--dm-text-muted) !important;
}

[data-layout-mode=dark_mode] .fa-audit-loader-stop {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
    color: #fda4af !important;
}

[data-layout-mode=dark_mode] .financial_audit .fa-audit-options-panel,
[data-layout-mode=dark_mode] .financial_audit .fa-card-menu-panel,
[data-layout-mode=dark_mode] .financial_audit .fa-card-menu-btn,
[data-layout-mode=dark_mode] .financial_audit .fa-card-menu-danger-zone,
[data-layout-mode=dark_mode] .financial_audit .fa-roadmap-summary,
[data-layout-mode=dark_mode] .financial_audit .fa-roadmap-day,
[data-layout-mode=dark_mode] .financial_audit .fa-roadmap-marker-wrap,
[data-layout-mode=dark_mode] .financial_audit .fa-audit-toolbar-mini__actions {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .fa-unplotted-modal .p-dialog-header,
[data-layout-mode=dark_mode] .fa-unplotted-modal .p-dialog-content,
[data-layout-mode=dark_mode] .fa-unplotted-body,
[data-layout-mode=dark_mode] .fa-unplotted-list-scroll {
    background: var(--dm-surface) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .fa-unplotted-search-mark {
    background: rgba(250, 204, 21, 0.28) !important;
    color: #fde68a !important;
}

/* ========== Payment/Transaction Module Dark Fixes ========== */
[data-layout-mode=dark_mode] .details-label,
[data-layout-mode=dark_mode] .manage-modal .details-label,
[data-layout-mode=dark_mode] .refund-modal .details-label {
    color: var(--dm-text-muted) !important;
}

[data-layout-mode=dark_mode] .details-content,
[data-layout-mode=dark_mode] .view-order-items > div,
[data-layout-mode=dark_mode] .view-order-items-title > div,
[data-layout-mode=dark_mode] .view-order-items > div > div,
[data-layout-mode=dark_mode] .view-order-items-title > div > div {
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .order-item-title {
    color: var(--dm-accent) !important;
    border-bottom-color: rgba(74, 143, 212, 0.5) !important;
}

[data-layout-mode=dark_mode] .product-variation-cont,
[data-layout-mode=dark_mode] .expense-item-form-cont,
[data-layout-mode=dark_mode] .product-variation-cont > div,
[data-layout-mode=dark_mode] .expense-item-form-cont > div,
[data-layout-mode=dark_mode] .product-variation,
[data-layout-mode=dark_mode] .expense-category,
[data-layout-mode=dark_mode] .payment-info {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .product-variation:hover,
[data-layout-mode=dark_mode] .product-variation.variant-selected,
[data-layout-mode=dark_mode] .expense-category:hover,
[data-layout-mode=dark_mode] .expense-category.selected {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-accent) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .product-variation-tick,
[data-layout-mode=dark_mode] .expense-category-tick {
    background: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .otp-modal .otp-button,
[data-layout-mode=dark_mode] .otp input {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-layout-mode=dark_mode] .otp-modal .otp-button:focus,
[data-layout-mode=dark_mode] .otp-modal .otp-button:hover,
[data-layout-mode=dark_mode] .otp input:hover,
[data-layout-mode=dark_mode] .otp input:focus {
    background: var(--dm-surface-2) !important;
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 2px var(--dm-accent-soft) !important;
}

[data-layout-mode=dark_mode] .otp-modal .clear-btn {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
    color: #fda4af !important;
}

/* ========== Shared Components Dark Sweep ========== */
[data-layout-mode=dark_mode] .p-float-label:has(input:focus) label,
[data-layout-mode=dark_mode] .p-float-label:has(input.p-filled) label,
[data-layout-mode=dark_mode] .p-float-label:has(input:-webkit-autofill) label,
[data-layout-mode=dark_mode] .p-float-label:has(textarea:focus) label,
[data-layout-mode=dark_mode] .p-float-label:has(textarea.p-filled) label,
[data-layout-mode=dark_mode] .p-float-label:has(.p-inputwrapper-focus) label,
[data-layout-mode=dark_mode] .p-float-label:has(.p-inputwrapper-filled) label,
[data-layout-mode=dark_mode] .p-float-label:has(.p-inputwrapper-focus) label.filter-account,
[data-layout-mode=dark_mode] .p-float-label:has(.p-inputwrapper-filled) label.filter-account {
    background-color: var(--dm-surface) !important;
    color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .col-form-label,
[data-layout-mode=dark_mode] .col-form-label.text-right {
    color: var(--dm-text-muted) !important;
}

/* Face detect component global class overrides */
[data-layout-mode=dark_mode] .face-detection,
[data-layout-mode=dark_mode] .face-detection video,
[data-layout-mode=dark_mode] .face-detection canvas,
[data-layout-mode=dark_mode] .spinner-container,
[data-layout-mode=dark_mode] .face-detection-container .title-container,
[data-layout-mode=dark_mode] .attendance-container,
[data-layout-mode=dark_mode] .menu-content {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .loading-circle-overlay.blue {
    color: var(--dm-accent) !important;
}

[data-layout-mode=dark_mode] .loading-circle-overlay.red {
    color: #f87171 !important;
}

[data-layout-mode=dark_mode] .face-detection-container .title-container p,
[data-layout-mode=dark_mode] .legend-item,
[data-layout-mode=dark_mode] .camera-loading .loading-message {
    color: var(--dm-text) !important;
}

/* Wizard/response shared secondary and step view */
[data-layout-mode=dark_mode] .step-view {
    background: var(--dm-surface) !important;
}

[data-layout-mode=dark_mode] .secondary,
[data-layout-mode=dark_mode] .page-btn .secondary {
    background: var(--dm-surface-3) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-accent) !important;
}

/* ========== Residual full-app dark cleanup ========== */
[data-layout-mode=dark_mode] .search-input,
[data-layout-mode=dark_mode] .search-header,
[data-layout-mode=dark_mode] .special-request-container,
[data-layout-mode=dark_mode] .stock-input-number,
[data-layout-mode=dark_mode] .payment-cont .image-upload,
[data-layout-mode=dark_mode] .p-fileupload .p-fileupload-content,
[data-layout-mode=dark_mode] .p-fileupload .p-fileupload-buttonbar {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

/* ========== Module route patches (reports/payment/inventory) ========== */
[data-layout-mode=dark_mode] .saved-summary-dialog-header,
[data-layout-mode=dark_mode] .saved-summary-list-card,
[data-layout-mode=dark_mode] .saved-summary-hero,
[data-layout-mode=dark_mode] .saved-summary-stat-card,
[data-layout-mode=dark_mode] .saved-summary-skeleton-row,
[data-layout-mode=dark_mode] .saved-summary-list-stats div,
[data-layout-mode=dark_mode] .saved-summary-filter-chip,
[data-layout-mode=dark_mode] .saved-summary-empty,
[data-layout-mode=dark_mode] .saved-summary-date-filter,
[data-layout-mode=dark_mode] .saved-summary-metrics-card {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .saved-summary-empty p,
[data-layout-mode=dark_mode] .saved-summary-meta,
[data-layout-mode=dark_mode] .saved-summary-hero p,
[data-layout-mode=dark_mode] .saved-summary-list-stats span {
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .kit-counter-guide-modal,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__sidebar,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__content,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__timeline-item,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__note,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__art,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__image,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__close {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .kit-counter-guide-modal__subtitle,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__meta,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__step-description,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__timeline-label,
[data-layout-mode=dark_mode] .kit-counter-guide-modal__done-copy p {
    color: var(--dm-text-secondary) !important;
}

[data-layout-mode=dark_mode] .fa-unplotted-compact-bar,
[data-layout-mode=dark_mode] .fa-unplotted-hero,
[data-layout-mode=dark_mode] .fa-unplotted-stat-card,
[data-layout-mode=dark_mode] .fa-unplotted-search-box,
[data-layout-mode=dark_mode] .fa-unplotted-section-header,
[data-layout-mode=dark_mode] .fa-unplotted-date-card,
[data-layout-mode=dark_mode] .fa-unplotted-tools,
[data-layout-mode=dark_mode] .fa-unplotted-hierarchy-legend > div {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: none !important;
}

[data-layout-mode=dark_mode] .fa-unplotted-eyebrow,
[data-layout-mode=dark_mode] .fa-unplotted-strip-meta,
[data-layout-mode=dark_mode] .fa-unplotted-strip-stat em,
[data-layout-mode=dark_mode] .fa-unplotted-hero p,
[data-layout-mode=dark_mode] .fa-unplotted-hierarchy-title > div > span,
[data-layout-mode=dark_mode] .fa-unplotted-match-count {
    color: var(--dm-text-secondary) !important;
}

/* ========== Auth pages — modern dark palette (login, register, OTP, forgot) ========== */
html[data-layout-mode=dark_mode] body,
html[data-layout-mode=dark_mode] .main-wrapper,
html[data-layout-mode=dark_mode] .account-content,
html[data-layout-mode=dark_mode] .login-wrapper.login-new {
    background: var(--dm-bg, #0c0e12) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content.user-login .login-userset.login-userset {
    background: var(--dm-surface, #1a1f27) !important;
    border: 1px solid var(--dm-border, #2a3340) !important;
    border-radius: 16px !important;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .login-userheading h3 {
    color: var(--dm-text, #f1f5f9) !important;
    font-weight: 700 !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .login-userheading h4,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .signinform h4 {
    color: var(--dm-text-muted, #8b98a8) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .signinform h4 a,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .signinform h4 a.hover-a,
html[data-layout-mode=dark_mode] .login-wrapper .hover-a {
    color: var(--dm-accent, #5b9fd4) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .hover-a:hover,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .signinform h4 a:hover {
    color: #7eb8e8 !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .hover-a:after {
    background: var(--dm-accent, #5b9fd4) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login label,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .form-label,
html[data-layout-mode=dark_mode] .login-wrapper label span.remember-me,
html[data-layout-mode=dark_mode] .login-wrapper .form-check-label.remember-me,
html[data-layout-mode=dark_mode] .login-wrapper label.checkboxs .form-check-label,
html[data-layout-mode=dark_mode] .login-wrapper .authentication-check .remember-me,
html[data-layout-mode=dark_mode] .login-wrapper .authentication-check label.checkboxs span {
    color: var(--dm-text, #f1f5f9) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login input,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .p-inputtext,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .p-password input,
html[data-layout-mode=dark_mode] .login-wrapper.login-new .login-content.user-login .login-userset form .otp-box input {
    background: var(--dm-surface-3, #252b36) !important;
    border: 1px solid var(--dm-border, #3d4858) !important;
    color: var(--dm-text, #f1f5f9) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login input::placeholder,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .p-inputtext::placeholder {
    color: var(--dm-text-muted, #6b7785) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login input:focus,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .p-inputtext:enabled:focus,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .p-password input:focus {
    border-color: var(--dm-accent, #5b9fd4) !important;
    box-shadow: 0 0 0 3px var(--dm-accent-soft, rgba(91, 159, 212, 0.2)) !important;
    outline: none !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .forgot-link,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .signinform .hover-a.resend {
    color: var(--dm-accent, #5b9fd4) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .forgot-link:hover {
    color: #7eb8e8 !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .btn-login.btn-login {
    background: linear-gradient(135deg, #4a8fd4 0%, #3d7ab8 100%) !important;
    border: 1px solid rgba(91, 159, 212, 0.35) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(74, 143, 212, 0.35) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .btn-login:hover:not(:disabled) {
    background: linear-gradient(135deg, #5a9fe4 0%, #4a8fd4 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 22px rgba(74, 143, 212, 0.45) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .btn-login:disabled,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .form-login .btn-login.p-disabled {
    background: var(--dm-surface-3, #2c3441) !important;
    border-color: var(--dm-border, #2a3340) !important;
    color: var(--dm-text-muted, #6b7785) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .p-checkbox .p-checkbox-box {
    background: var(--dm-surface-3, #252b36) !important;
    border-color: var(--dm-border, #3d4858) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .p-checkbox.p-highlight .p-checkbox-box {
    background: var(--dm-accent, #4a8fd4) !important;
    border-color: var(--dm-accent, #4a8fd4) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .p-password .p-password-toggle-icon,
html[data-layout-mode=dark_mode] .login-wrapper .p-password svg {
    color: var(--dm-text-muted, #8b98a8) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .copyright-text p,
html[data-layout-mode=dark_mode] .login-wrapper .login-content .login-userset .my-4 p {
    color: var(--dm-text-muted, #6b7785) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content .p-message {
    background: var(--dm-surface-2, #232a35) !important;
    border: 1px solid var(--dm-border, #2a3340) !important;
    color: var(--dm-text-secondary, #c5d0dc) !important;
}

html[data-layout-mode=dark_mode] .login-wrapper .login-content.user-login .login-register {
    background: var(--dm-surface, #1a1f27) !important;
    border: 1px solid var(--dm-border, #2a3340) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4) !important;
}

/* ========== List pages — status tabs & table total footer ========== */
html[data-layout-mode=dark_mode] .page-header-tabs.p-tabview .p-tabview-nav,
html[data-layout-mode=dark_mode] .nav.nav-tabs.page-header-tabs.p-tabview .p-tabview-nav,
html[data-layout-mode=dark_mode] .page-header-tabs.p-tabview .p-tabview-nav-content {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html[data-layout-mode=dark_mode] .page-header-tabs.p-tabview .p-tabview-nav li .p-tabview-nav-link,
html[data-layout-mode=dark_mode] .nav.nav-tabs.page-header-tabs .p-tabview-nav li .p-tabview-nav-link {
    background: transparent !important;
    color: var(--dm-text-muted) !important;
    border-color: transparent !important;
}

html[data-layout-mode=dark_mode] .page-header-tabs.p-tabview .p-tabview-nav li.p-highlight,
html[data-layout-mode=dark_mode] .page-header-tabs.p-tabview .p-tabview-nav li.p-tabview-header.p-highlight,
html[data-layout-mode=dark_mode] .nav.nav-tabs.page-header-tabs .p-tabview-nav li.p-highlight {
    background: transparent !important;
}

html[data-layout-mode=dark_mode] .page-header-tabs.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link,
html[data-layout-mode=dark_mode] .page-header-tabs.p-tabview .p-tabview-nav li.p-tabview-header.p-highlight .p-tabview-nav-link,
html[data-layout-mode=dark_mode] .nav.nav-tabs.page-header-tabs .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35) !important;
}

html[data-layout-mode=dark_mode] .page-header-tabs .p-tabview-nav li.p-highlight .fw-normal,
html[data-layout-mode=dark_mode] .page-header-tabs .p-tabview-header.p-highlight .fw-normal {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

html[data-layout-mode=dark_mode] .page-header-tabs .p-tabview-nav li:not(.p-highlight) .fw-normal {
    color: var(--dm-text-muted) !important;
}

html[data-layout-mode=dark_mode] .p-datatable .p-datatable-tfoot > tr > td,
html[data-layout-mode=dark_mode] .p-datatable tfoot > tr > td,
html[data-layout-mode=dark_mode] .datatable-custom .p-datatable-tfoot > tr > td {
    background: var(--dm-surface-2) !important;
    color: var(--dm-text-secondary) !important;
    border: 1px solid var(--dm-border) !important;
}

html[data-layout-mode=dark_mode] .p-datatable .p-datatable-tfoot > tr > td .text-bold,
html[data-layout-mode=dark_mode] .p-datatable .p-datatable-tfoot > tr > td.text-bold {
    color: var(--dm-text) !important;
}

html[data-layout-mode=dark_mode] .bg-light-yellow,
html[data-layout-mode=dark_mode] .p-datatable .p-datatable-tfoot .bg-light-yellow,
html[data-layout-mode=dark_mode] .p-datatable tfoot .bg-light-yellow {
    background: rgba(74, 143, 212, 0.14) !important;
    color: var(--dm-accent) !important;
}

/* Transaction — tabs (light style: muted label + accent underline on active text) */
html[data-layout-mode=dark_mode] .production_staff .tabs .p-button,
html[data-layout-mode=dark_mode] .production_staff .tabs button,
html[data-layout-mode=dark_mode] .ofd_staff .tabs .p-button,
html[data-layout-mode=dark_mode] .ofd_staff .tabs button {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--dm-text-muted) !important;
    padding: 0.5rem 0.85rem !important;
    min-width: auto !important;
}

html[data-layout-mode=dark_mode] .production_staff .tabs .p-button .fw-normal,
html[data-layout-mode=dark_mode] .ofd_staff .tabs .p-button .fw-normal,
html[data-layout-mode=dark_mode] .production_staff .tabs button .fw-normal,
html[data-layout-mode=dark_mode] .ofd_staff .tabs button .fw-normal {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--dm-text-muted) !important;
    display: inline-block !important;
    padding-bottom: 4px !important;
    line-height: 1.25 !important;
}

html[data-layout-mode=dark_mode] .production_staff .tabs .p-button.active,
html[data-layout-mode=dark_mode] .production_staff .tabs button.active,
html[data-layout-mode=dark_mode] .production_staff .tabs .active.p-button,
html[data-layout-mode=dark_mode] .ofd_staff .tabs .p-button.active,
html[data-layout-mode=dark_mode] .ofd_staff .tabs button.active,
html[data-layout-mode=dark_mode] .ofd_staff .tabs .active.p-button {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    color: var(--dm-text) !important;
    box-shadow: none !important;
}

html[data-layout-mode=dark_mode] .production_staff .tabs .p-button.active .fw-normal,
html[data-layout-mode=dark_mode] .ofd_staff .tabs .p-button.active .fw-normal,
html[data-layout-mode=dark_mode] .production_staff .tabs button.active .fw-normal,
html[data-layout-mode=dark_mode] .ofd_staff .tabs button.active .fw-normal {
    color: var(--dm-text) !important;
    border-bottom: 3px solid var(--dm-accent) !important;
    font-weight: 500 !important;
}

html[data-layout-mode=dark_mode] .page-header-tabs.p-tabview .p-tabview-ink-bar,
html[data-layout-mode=dark_mode] .nav.nav-tabs.page-header-tabs.p-tabview .p-tabview-ink-bar {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ========== Chat sidebar — user list panel (chat_overlay.vue) ========== */
html[data-layout-mode=dark_mode] .chat-sidebar .chat-list {
    background: var(--dm-surface, #1a1f27) !important;
    border-left: 1px solid var(--dm-border, #2a3340);
    color: var(--dm-text, #e8edf3) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-list h6 {
    color: var(--dm-text, #e8edf3) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-list-close {
    color: var(--dm-text-secondary, #c5d0dc) !important;
    cursor: pointer;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-list-close:hover {
    color: var(--dm-text, #e8edf3) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-list .search-input input,
html[data-layout-mode=dark_mode] .chat-sidebar .chat-list .search-input .form-control,
html[data-layout-mode=dark_mode] .chat-sidebar .chat-list .search-input .p-inputtext {
    background: var(--dm-surface-3, #2c3441) !important;
    border-color: var(--dm-border, #2a3340) !important;
    color: var(--dm-text, #e8edf3) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-list .search-input input::placeholder {
    color: var(--dm-text-muted, #9aa8b8) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-list .btn-searchset {
    color: var(--dm-text-muted, #9aa8b8) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .page-header-tabs.p-tabview .p-tabview-nav,
html[data-layout-mode=dark_mode] .chat-sidebar .p-tabview .p-tabview-nav {
    background: transparent !important;
    border-color: var(--dm-border, #2a3340) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .page-header-tabs .p-tabview-nav li .p-tabview-nav-link,
html[data-layout-mode=dark_mode] .chat-sidebar .p-tabview .p-tabview-nav li .p-tabview-nav-link {
    background: var(--dm-surface-3, #2c3441) !important;
    color: var(--dm-text-muted, #9aa8b8) !important;
    border-color: var(--dm-border, #2a3340) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .page-header-tabs .p-tabview-nav li.p-highlight .p-tabview-nav-link,
html[data-layout-mode=dark_mode] .chat-sidebar .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .page-header-tabs .p-tabview-nav li.p-highlight .fw-normal,
html[data-layout-mode=dark_mode] .chat-sidebar .p-tabview .p-tabview-nav li.p-highlight .fw-normal {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-items {
    background: transparent !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-items .user {
    background: var(--dm-surface, #1a1f27) !important;
    border-bottom-color: var(--dm-border, #2a3340) !important;
    color: var(--dm-text, #e8edf3) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-items .user:hover {
    background: var(--dm-surface-2, #232a35) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-items .user.disabled {
    opacity: 0.5;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-items .user .text-muted {
    color: var(--dm-text-muted, #9aa8b8) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-items .user .text-blue {
    color: #93c5fd !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .chat-items .user img {
    border-bottom-color: var(--dm-border, #2a3340) !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .online {
    color: #86efac !important;
}

html[data-layout-mode=dark_mode] .chat-sidebar .offline {
    color: #f87171 !important;
}