[data-theme="dark"], [data-theme="night"] {
    --bs-body-bg: #0F172A;
    --bs-body-color: var(--body-color);
    --bs-border-color: var(--border-color);
    --bs-border-color-translucent: rgba(255,255,255,0.1);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: #1E293B;
    --bs-tertiary-bg: #1E293B;
    --bs-tertiary-color: var(--text-muted);
    --bs-emphasis-color: var(--body-color);
    --bs-heading-color: var(--body-color);

    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--primary);

    --bs-modal-bg: #1E293B;
    --bs-modal-color: var(--body-color);
    --bs-modal-border-color: var(--border-color);
    --bs-modal-header-border-color: var(--border-color);
    --bs-modal-footer-border-color: var(--border-color);

    --bs-card-bg: #1E293B;
    --bs-card-color: var(--body-color);
    --bs-card-border-color: var(--border-color);
    --bs-card-cap-bg: rgba(255,255,255,0.03);
    --bs-card-cap-color: var(--text-muted);

    --bs-btn-color: var(--body-color);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-color: var(--body-color);
    --bs-btn-hover-bg: var(--hover-bg);
    --bs-btn-hover-border-color: var(--border-color);
    --bs-btn-active-color: var(--body-color);
    --bs-btn-active-border-color: var(--border-color);
    --bs-btn-disabled-color: var(--text-muted);

    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-secondary: var(--text-muted);

    --bs-pagination-color: var(--body-color);
    --bs-pagination-bg: #1E293B;
    --bs-pagination-border-color: var(--border-color);
    --bs-pagination-hover-color: var(--body-color);
    --bs-pagination-hover-bg: var(--hover-bg);
    --bs-pagination-hover-border-color: var(--border-color);
    --bs-pagination-focus-color: var(--body-color);
    --bs-pagination-focus-bg: var(--hover-bg);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-disabled-color: var(--text-muted);
    --bs-pagination-disabled-bg: #1E293B;
    --bs-pagination-disabled-border-color: var(--border-color);

    --bs-form-control-bg: #1E293B;
    --bs-form-control-color: var(--body-color);
    --bs-form-control-border-color: var(--border-color);
    --bs-form-control-focus-bg: #1E293B;
    --bs-form-control-focus-border-color: var(--primary);
    --bs-form-select-bg: #1E293B;
    --bs-form-select-color: var(--body-color);
    --bs-form-select-border-color: var(--border-color);
    --bs-form-label-color: var(--text-muted);

    --bs-dropdown-bg: #1E293B;
    --bs-dropdown-color: var(--body-color);
    --bs-dropdown-border-color: var(--border-color);
    --bs-dropdown-link-color: var(--body-color);
    --bs-dropdown-link-hover-color: var(--body-color);
    --bs-dropdown-link-hover-bg: var(--hover-bg);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--primary);
    --bs-dropdown-divider-bg: var(--border-color);

    --bs-list-group-bg: #1E293B;
    --bs-list-group-color: var(--body-color);
    --bs-list-group-border-color: var(--border-color);
    --bs-list-group-action-color: var(--body-color);
    --bs-list-group-action-hover-bg: var(--hover-bg);
    --bs-list-group-action-active-bg: var(--primary);
    --bs-list-group-action-active-color: #fff;

    --bs-accordion-bg: #1E293B;
    --bs-accordion-color: var(--body-color);
    --bs-accordion-border-color: var(--border-color);
    --bs-accordion-button-color: var(--body-color);
    --bs-accordion-button-bg: #1E293B;
    --bs-accordion-button-active-bg: rgba(var(--primary-rgb),0.12);
    --bs-accordion-button-active-color: var(--body-color);

    --bs-table-color: var(--body-color);

    --bs-close-color: var(--body-color);
}

[data-theme="dark"] .table,
[data-theme="night"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--body-color);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: rgba(255,255,255,0.02);
    --bs-table-striped-color: var(--body-color);
    --bs-table-hover-bg: var(--hover-bg);
    --bs-table-hover-color: var(--body-color);
}

[data-theme="dark"] .navbar,
[data-theme="night"] .navbar {
    border-bottom-color: rgba(51, 65, 85, 0.5);
}

[data-theme="dark"] .sidebar,
[data-theme="night"] .sidebar {
    border-right-color: rgba(51, 65, 85, 0.5);
}

[data-theme="dark"] .card,
[data-theme="night"] .card {
    background: rgba(30, 41, 59, 0.7);
}

[data-theme="dark"] .modal-content,
[data-theme="night"] .modal-content {
    background: #1E293B;
}

[data-theme="dark"] .dropdown-menu,
[data-theme="night"] .dropdown-menu {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .btn-close,
[data-theme="night"] .btn-close {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .page-header-actions .btn-outline-secondary,
[data-theme="night"] .page-header-actions .btn-outline-secondary {
    border-color: #334155;
}

[data-theme="dark"] .welcome-section,
[data-theme="night"] .welcome-section {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(99, 102, 241, 0.06));
    border-color: rgba(var(--primary-rgb), 0.2);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="night"] .form-control,
[data-theme="night"] .form-select {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="night"] .form-control:focus,
[data-theme="night"] .form-select:focus {
    background: #1E293B;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="night"] .dataTables_wrapper .dataTables_filter input {
    background: #1E293B;
    border-color: #334155;
}

[data-theme="dark"] .dataTables_wrapper .paginate_button,
[data-theme="night"] .dataTables_wrapper .paginate_button {
    border-color: #334155;
}

[data-theme="dark"] .dataTables_wrapper .paginate_button.current,
[data-theme="night"] .dataTables_wrapper .paginate_button.current {
    border-color: var(--primary);
}

[data-theme="dark"] .table.dataTable tbody tr:hover,
[data-theme="night"] .table.dataTable tbody tr:hover {
    background: rgba(67, 97, 238, 0.15) !important;
}

[data-theme="dark"] .stat-card .stat-bg-icon,
[data-theme="night"] .stat-card .stat-bg-icon {
    opacity: 0.04;
}

[data-theme="dark"] .text-dark,
[data-theme="night"] .text-dark {
    color: #E2E8F0 !important;
}

[data-theme="dark"] .bg-white,
[data-theme="night"] .bg-white {
    background-color: #1E293B !important;
}

[data-theme="dark"] .border,
[data-theme="night"] .border {
    border-color: #334155 !important;
}

[data-theme="dark"] .border-top,
[data-theme="night"] .border-top {
    border-top-color: #334155 !important;
}

[data-theme="dark"] .border-bottom,
[data-theme="night"] .border-bottom {
    border-bottom-color: #334155 !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme="night"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: var(--body-color);
    --bs-table-bg-type: rgba(255,255,255,0.02);
}

[data-theme="dark"] .text-muted,
[data-theme="night"] .text-muted {
    color: #94A3B8 !important;
}

/* Native date/time pickers: render controls (calendar icon, popup) in dark */
[data-theme="dark"] input[type="date"],
[data-theme="night"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="night"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="night"] input[type="time"],
[data-theme="dark"] input[type="month"],
[data-theme="night"] input[type="month"],
[data-theme="dark"] input[type="week"],
[data-theme="night"] input[type="week"] {
    color-scheme: dark;
    background-color: var(--input-bg, #0B1220) !important;
    color: var(--body-color) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="night"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="night"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="night"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator,
[data-theme="night"] input[type="week"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="night"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
    cursor: pointer;
}

/* Override hardcoded light inline backgrounds inside modals / forms */
[data-theme="dark"] input[readonly],
[data-theme="night"] input[readonly] {
    background-color: #0B1220 !important;
    color: var(--body-color) !important;
}

[data-theme="dark"] .modal-body,
[data-theme="night"] .modal-body {
    color: var(--body-color);
}

[data-theme="dark"] #aksiMenu,
[data-theme="night"] #aksiMenu {
    background: #1E293B !important;
    border-color: var(--border-color) !important;
    color: var(--body-color) !important;
}

[data-theme="dark"] .print-sidebar,
[data-theme="night"] .print-sidebar {
    background: #1E293B !important;
    border-right-color: var(--border-color) !important;
}

/* Remap hardcoded light inline surfaces to theme (readonly fields, soft panels across all pages).
   Uses inline-style substring match so it only hits solid light grays, not gradients or print paper (class-based). */
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="night"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="night"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background:#f0f0f0"],
[data-theme="night"] [style*="background:#f0f0f0"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="night"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="night"] [style*="background:#f3f4f6"] {
    background-color: var(--bg-soft) !important;
}

/* Autocomplete list: white hover + black text ONLY in dark/night.
   Light mode keeps the subtle var(--hover-bg) hover (set in each view's <style>). */
[data-theme="dark"] .item-autocomplete .ac-item:hover,
[data-theme="night"] .item-autocomplete .ac-item:hover,
[data-theme="dark"] .item-autocomplete-top .ac-item:hover,
[data-theme="night"] .item-autocomplete-top .ac-item:hover,
[data-theme="dark"] .item-autocomplete .ac-item.active,
[data-theme="night"] .item-autocomplete .ac-item.active,
[data-theme="dark"] .item-autocomplete-top .ac-item.active,
[data-theme="night"] .item-autocomplete-top .ac-item.active {
    background: #fff !important;
    color: #1e293b !important;
}
[data-theme="dark"] .item-autocomplete .ac-item:hover strong,
[data-theme="night"] .item-autocomplete .ac-item:hover strong,
[data-theme="dark"] .item-autocomplete .ac-item.active strong,
[data-theme="night"] .item-autocomplete .ac-item.active strong,
[data-theme="dark"] .item-autocomplete-top .ac-item:hover strong,
[data-theme="night"] .item-autocomplete-top .ac-item:hover strong,
[data-theme="dark"] .item-autocomplete-top .ac-item.active strong,
[data-theme="night"] .item-autocomplete-top .ac-item.active strong {
    color: #1e293b !important;
}
[data-theme="dark"] .item-autocomplete .ac-item:hover .ac-meta,
[data-theme="night"] .item-autocomplete .ac-item:hover .ac-meta,
[data-theme="dark"] .item-autocomplete .ac-item.active .ac-meta,
[data-theme="night"] .item-autocomplete .ac-item.active .ac-meta,
[data-theme="dark"] .item-autocomplete-top .ac-item:hover .ac-meta,
[data-theme="night"] .item-autocomplete-top .ac-item:hover .ac-meta,
[data-theme="dark"] .item-autocomplete-top .ac-item.active .ac-meta,
[data-theme="night"] .item-autocomplete-top .ac-item.active .ac-meta {
    color: #64748b !important;
}
[data-theme="dark"] .item-autocomplete .ac-item:hover .ac-meta .ac-spek,
[data-theme="night"] .item-autocomplete .ac-item:hover .ac-meta .ac-spek,
[data-theme="dark"] .item-autocomplete .ac-item.active .ac-meta .ac-spek,
[data-theme="night"] .item-autocomplete .ac-item.active .ac-meta .ac-spek,
[data-theme="dark"] .item-autocomplete-top .ac-item:hover .ac-meta .ac-spek,
[data-theme="night"] .item-autocomplete-top .ac-item:hover .ac-meta .ac-spek,
[data-theme="dark"] .item-autocomplete-top .ac-item.active .ac-meta .ac-spek,
[data-theme="night"] .item-autocomplete-top .ac-item.active .ac-meta .ac-spek {
    color: #64748b !important;
}
[data-theme="dark"] .item-autocomplete .ac-item:hover .ac-meta .ac-plu,
[data-theme="night"] .item-autocomplete .ac-item:hover .ac-meta .ac-plu,
[data-theme="dark"] .item-autocomplete .ac-item.active .ac-meta .ac-plu,
[data-theme="night"] .item-autocomplete .ac-item.active .ac-meta .ac-plu,
[data-theme="dark"] .item-autocomplete-top .ac-item:hover .ac-meta .ac-plu,
[data-theme="night"] .item-autocomplete-top .ac-item:hover .ac-meta .ac-plu,
[data-theme="dark"] .item-autocomplete-top .ac-item.active .ac-meta .ac-plu,
[data-theme="night"] .item-autocomplete-top .ac-item.active .ac-meta .ac-plu {
    color: #64748b !important;
    background: #eef2f7 !important;
}
[data-theme="dark"] .item-autocomplete .ac-item:hover .ac-meta .ac-harga,
[data-theme="night"] .item-autocomplete .ac-item:hover .ac-meta .ac-harga,
[data-theme="dark"] .item-autocomplete .ac-item.active .ac-meta .ac-harga,
[data-theme="night"] .item-autocomplete .ac-item.active .ac-meta .ac-harga,
[data-theme="dark"] .item-autocomplete-top .ac-item:hover .ac-meta .ac-harga,
[data-theme="night"] .item-autocomplete-top .ac-item:hover .ac-meta .ac-harga,
[data-theme="dark"] .item-autocomplete-top .ac-item.active .ac-meta .ac-harga,
[data-theme="night"] .item-autocomplete-top .ac-item.active .ac-meta .ac-harga {
    color: #1e293b !important;
}

/* ── SweetAlert2 dark theming ── */
[data-theme="dark"] .swal2-popup,
[data-theme="night"] .swal2-popup {
    background: var(--surface) !important;
    color: var(--body-color) !important;
}
[data-theme="dark"] .swal2-title,
[data-theme="night"] .swal2-title,
[data-theme="dark"] .swal2-html-container,
[data-theme="night"] .swal2-html-container,
[data-theme="dark"] .swal2-content,
[data-theme="night"] .swal2-content {
    color: var(--body-color) !important;
}
[data-theme="dark"] .swal2-close,
[data-theme="night"] .swal2-close {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .swal2-close:hover,
[data-theme="night"] .swal2-close:hover {
    color: var(--body-color) !important;
}
[data-theme="dark"] .swal2-input,
[data-theme="night"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="night"] .swal2-textarea,
[data-theme="dark"] .swal2-select,
[data-theme="night"] .swal2-select,
[data-theme="dark"] .swal2-file,
[data-theme="night"] .swal2-file {
    background: var(--input-bg) !important;
    color: var(--body-color) !important;
    border-color: var(--border-color) !important;
    color-scheme: dark;
}
[data-theme="dark"] .swal2-input::placeholder,
[data-theme="night"] .swal2-input::placeholder,
[data-theme="dark"] .swal2-textarea::placeholder,
[data-theme="night"] .swal2-textarea::placeholder {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .swal2-validation-message,
[data-theme="night"] .swal2-validation-message {
    background: var(--bg-soft) !important;
    color: var(--body-color) !important;
}
[data-theme="dark"] .swal2-footer,
[data-theme="night"] .swal2-footer {
    border-top-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}
[data-theme="dark"] .swal2-timer-progress-bar,
[data-theme="night"] .swal2-timer-progress-bar {
    background: rgba(255, 255, 255, .2) !important;
}

/* ── Surat Jalan modal (info panel + summary card) ── */
[data-theme="dark"] .sj-info-panel,
[data-theme="night"] .sj-info-panel,
[data-theme="dark"] .po-summary-card,
[data-theme="night"] .po-summary-card {
    background: var(--surface) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .sj-info-panel h6,
[data-theme="night"] .sj-info-panel h6,
[data-theme="dark"] .po-summary-card h6,
[data-theme="night"] .po-summary-card h6 {
    color: var(--body-color) !important;
}
[data-theme="dark"] #alamatDetailDisplay,
[data-theme="night"] #alamatDetailDisplay,
[data-theme="dark"] #alamatBillToDisplay,
[data-theme="night"] #alamatBillToDisplay {
    background: var(--bg-soft) !important;
    border-color: var(--border-color) !important;
    color: var(--body-color) !important;
}

/* ── Reseller modal (komisi cards) ── */
[data-theme="dark"] .komisi-card,
[data-theme="night"] .komisi-card {
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .komisi-card:hover,
[data-theme="night"] .komisi-card:hover {
    background: var(--hover-bg) !important;
    border-color: #3b82f6 !important;
}
[data-theme="dark"] .komisi-card.active,
[data-theme="night"] .komisi-card.active {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
}
[data-theme="dark"] .komisi-card[data-type="titip_harga"]:hover,
[data-theme="night"] .komisi-card[data-type="titip_harga"]:hover {
    background: var(--hover-bg) !important;
    border-color: #f59e0b !important;
}
[data-theme="dark"] .komisi-card[data-type="titip_harga"].active,
[data-theme="night"] .komisi-card[data-type="titip_harga"].active {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: #f59e0b !important;
}

/* ── Cussupp modal (PIC rows) ── */
[data-theme="dark"] .pic-row,
[data-theme="night"] .pic-row {
    background: var(--bg-soft) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .pic-row:hover,
[data-theme="night"] .pic-row:hover {
    background: var(--hover-bg) !important;
    border-color: var(--primary) !important;
}
[data-theme="dark"] .pic-row .pic-name input,
[data-theme="night"] .pic-row .pic-name input,
[data-theme="dark"] .pic-row .pic-kontak input,
[data-theme="night"] .pic-row .pic-kontak input {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--body-color) !important;
    color-scheme: dark;
}

/* ── Payment page (DataTable header + bayar/detail modals) ── */
[data-theme="dark"] .bayar-summary-banner,
[data-theme="night"] .bayar-summary-banner,
[data-theme="dark"] .detail-summary-banner,
[data-theme="night"] .detail-summary-banner,
[data-theme="dark"] .bayar-metode-menu,
[data-theme="night"] .bayar-metode-menu,
[data-theme="dark"] .bayar-upload-area,
[data-theme="night"] .bayar-upload-area,
[data-theme="dark"] .inv-upload-area,
[data-theme="night"] .inv-upload-area,
[data-theme="dark"] .bayar-history-box,
[data-theme="night"] .bayar-history-box {
    background: var(--bg-soft) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .bayar-upload-area:hover,
[data-theme="night"] .bayar-upload-area:hover,
[data-theme="dark"] .bayar-upload-area.dragover,
[data-theme="night"] .bayar-upload-area.dragover,
[data-theme="dark"] .inv-upload-area:hover,
[data-theme="night"] .inv-upload-area:hover,
[data-theme="dark"] .inv-upload-area.dragover,
[data-theme="night"] .inv-upload-area.dragover {
    background: var(--hover-bg) !important;
    border-color: var(--primary) !important;
}
[data-theme="dark"] .banner-value,
[data-theme="night"] .banner-value,
[data-theme="dark"] .banner-tagihan,
[data-theme="night"] .banner-tagihan {
    color: var(--body-color) !important;
}
[data-theme="dark"] .bukti-lightbox-inner,
[data-theme="night"] .bukti-lightbox-inner,
[data-theme="dark"] #buktiLightboxContent,
[data-theme="night"] #buktiLightboxContent {
    background: var(--surface) !important;
}
[data-theme="dark"] .pay-summary-card,
[data-theme="night"] .pay-summary-card {
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .pay-summary-text .ps-value,
[data-theme="night"] .pay-summary-text .ps-value {
    color: var(--body-color) !important;
}
[data-theme="dark"] .pay-summary-text .ps-value.text-green,
[data-theme="night"] .pay-summary-text .ps-value.text-green {
    color: #4ade80 !important;
}
[data-theme="dark"] .pay-summary-text .ps-value.text-amber,
[data-theme="night"] .pay-summary-text .ps-value.text-amber {
    color: #fbbf24 !important;
}
[data-theme="dark"] .pay-table thead tr,
[data-theme="night"] .pay-table thead tr {
    background: var(--bg-soft) !important;
}
[data-theme="dark"] .pay-table thead th,
[data-theme="night"] .pay-table thead th {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .pay-table th,
[data-theme="night"] .pay-table th {
    color: var(--text-muted) !important;
}
/* Dark text hardcoded to #1e293b → make readable on dark surfaces */
[data-theme="dark"] .bayar-section-header > span,
[data-theme="night"] .bayar-section-header > span,
[data-theme="dark"] .bayar-input,
[data-theme="night"] .bayar-input,
[data-theme="dark"] .bayar-metode-field input,
[data-theme="night"] .bayar-metode-field input,
[data-theme="dark"] .bayar-textarea,
[data-theme="night"] .bayar-textarea,
[data-theme="dark"] .bayar-hist-amount,
[data-theme="night"] .bayar-hist-amount,
[data-theme="dark"] .detail-ic-value,
[data-theme="night"] .detail-ic-value {
    color: var(--body-color) !important;
}
/* Light input surfaces / borders inside modals */
[data-theme="dark"] .bayar-input,
[data-theme="night"] .bayar-input,
[data-theme="dark"] .bayar-input-wrap,
[data-theme="night"] .bayar-input-wrap,
[data-theme="dark"] .bayar-metode-wrap,
[data-theme="night"] .bayar-metode-wrap,
[data-theme="dark"] .bayar-metode-field input,
[data-theme="night"] .bayar-metode-field input,
[data-theme="dark"] .bayar-textarea,
[data-theme="night"] .bayar-textarea {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color-scheme: dark;
}
/* Light section/card backgrounds */
[data-theme="dark"] .detail-history-section,
[data-theme="night"] .detail-history-section,
[data-theme="dark"] .detail-info-card,
[data-theme="night"] .detail-info-card {
    background: var(--bg-soft) !important;
    border-color: var(--border-color) !important;
}
/* Light hover states */
[data-theme="dark"] .bayar-hist-item:hover,
[data-theme="night"] .bayar-hist-item:hover,
[data-theme="dark"] .bayar-metode-item:hover,
[data-theme="night"] .bayar-metode-item:hover {
    background: var(--hover-bg) !important;
}
/* Dividers / borders */
[data-theme="dark"] .bayar-history-col,
[data-theme="night"] .bayar-history-col,
[data-theme="dark"] .bayar-footer,
[data-theme="night"] .bayar-footer,
[data-theme="dark"] .detail-footer,
[data-theme="night"] .detail-footer,
[data-theme="dark"] .detail-info-section,
[data-theme="night"] .detail-info-section,
[data-theme="dark"] .bayar-metode-item,
[data-theme="night"] .bayar-metode-item {
    border-color: var(--border-color) !important;
}

/* ── po-supplier "Terbitkan Dokumen" modal ── */
[data-theme="dark"] #terbitModal .terbit-modal-body,
[data-theme="night"] #terbitModal .terbit-modal-body {
    background: var(--bg-soft) !important;
}
[data-theme="dark"] #terbitModal .terbit-step-bar,
[data-theme="night"] #terbitModal .terbit-step-bar,
[data-theme="dark"] #terbitModal .terbit-summary-card,
[data-theme="night"] #terbitModal .terbit-summary-card,
[data-theme="dark"] #terbitModal .terbit-modal-footer,
[data-theme="night"] #terbitModal .terbit-modal-footer {
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
}
/* Invisible dark text → readable */
[data-theme="dark"] #terbitModal .terbit-step-title,
[data-theme="night"] #terbitModal .terbit-step-title,
[data-theme="dark"] #terbitModal .terbit-card .terbit-name,
[data-theme="night"] #terbitModal .terbit-card .terbit-name,
[data-theme="dark"] #terbitModal .terbit-summary-value,
[data-theme="night"] #terbitModal .terbit-summary-value {
    color: var(--body-color) !important;
}
/* Neutral borders / dividers */
[data-theme="dark"] #terbitModal .terbit-step-title,
[data-theme="night"] #terbitModal .terbit-step-title,
[data-theme="dark"] #terbitModal .tsi-num,
[data-theme="night"] #terbitModal .tsi-num,
[data-theme="dark"] #terbitModal .terbit-step-line,
[data-theme="night"] #terbitModal .terbit-step-line,
[data-theme="dark"] #terbitModal .terbit-summary-row,
[data-theme="night"] #terbitModal .terbit-summary-row {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #terbitModal .terbit-step-line,
[data-theme="night"] #terbitModal .terbit-step-line,
[data-theme="dark"] #terbitModal .terbit-step-line.done,
[data-theme="night"] #terbitModal .terbit-step-line.done {
    background: var(--border-color) !important;
}
[data-theme="dark"] #terbitModal .terbit-step-line.done,
[data-theme="night"] #terbitModal .terbit-step-line.done {
    background: #16a34a !important;
}
/* Neutral cards (blue/green/amber accent cards intentionally kept colored) */
[data-theme="dark"] #terbitModal .terbit-card,
[data-theme="night"] #terbitModal .terbit-card,
[data-theme="dark"] #terbitModal .terbit-card-bill,
[data-theme="night"] #terbitModal .terbit-card-bill,
[data-theme="dark"] #terbitModal .tsi-num,
[data-theme="night"] #terbitModal .tsi-num {
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
}
/* Toggle buttons (neutral state) */
[data-theme="dark"] #terbitModal .terbit-toggle-btn,
[data-theme="night"] #terbitModal .terbit-toggle-btn {
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #terbitModal .terbit-toggle-btn:hover,
[data-theme="night"] #terbitModal .terbit-toggle-btn:hover {
    background: var(--hover-bg) !important;
}
/* Ghost button */
[data-theme="dark"] #terbitModal .terbit-btn-ghost,
[data-theme="night"] #terbitModal .terbit-btn-ghost {
    background: var(--hover-bg) !important;
    color: var(--body-color) !important;
}
[data-theme="dark"] #terbitModal .terbit-btn-ghost:hover,
[data-theme="night"] #terbitModal .terbit-btn-ghost:hover {
    background: var(--border-color) !important;
    color: var(--body-color) !important;
}
/* Date input inside due-section (keep amber accent border, dark field) */
[data-theme="dark"] #terbitModal .terbit-due-input,
[data-theme="night"] #terbitModal .terbit-due-input {
    background: var(--input-bg) !important;
    color: var(--body-color) !important;
    color-scheme: dark;
}
/* Colored accent cards: darker tinted versions (hue preserved) */
[data-theme="dark"] #terbitModal .terbit-detail-blue,
[data-theme="night"] #terbitModal .terbit-detail-blue {
    background: linear-gradient(145deg, rgba(37,99,235,.16), rgba(37,99,235,.08)) !important;
    border-color: rgba(59,130,246,.4) !important;
}
[data-theme="dark"] #terbitModal .terbit-detail-green,
[data-theme="night"] #terbitModal .terbit-detail-green {
    background: linear-gradient(145deg, rgba(22,163,74,.16), rgba(22,163,74,.08)) !important;
    border-color: rgba(34,197,94,.4) !important;
}
[data-theme="dark"] #terbitModal .terbit-detail-amber,
[data-theme="night"] #terbitModal .terbit-detail-amber,
[data-theme="dark"] #terbitModal .terbit-due-section,
[data-theme="night"] #terbitModal .terbit-due-section {
    background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,158,11,.08)) !important;
    border-color: rgba(251,191,36,.4) !important;
}
/* Field value chips inside colored cards */
[data-theme="dark"] #terbitModal .terbit-detail-field-value,
[data-theme="night"] #terbitModal .terbit-detail-field-value {
    background: rgba(255,255,255,.06) !important;
    color: var(--body-color) !important;
    border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] #terbitModal .terbit-detail-field-value:hover,
[data-theme="night"] #terbitModal .terbit-detail-field-value:hover {
    background: rgba(255,255,255,.1) !important;
}
/* Due section text → lighter amber for contrast */
[data-theme="dark"] #terbitModal .terbit-due-title,
[data-theme="night"] #terbitModal .terbit-due-title {
    color: #fbbf24 !important;
}
[data-theme="dark"] #terbitModal .terbit-due-sub,
[data-theme="night"] #terbitModal .terbit-due-sub {
    color: #fcd34d !important;
}
/* Selected card + active toggles: darker tint */
[data-theme="dark"] #terbitModal .terbit-card.selected,
[data-theme="night"] #terbitModal .terbit-card.selected,
[data-theme="dark"] #terbitModal .terbit-toggle-btn.active-blue,
[data-theme="night"] #terbitModal .terbit-toggle-btn.active-blue {
    background: rgba(37,99,235,.18) !important;
    border-color: rgba(59,130,246,.5) !important;
}
[data-theme="dark"] #terbitModal .terbit-toggle-btn.active-green,
[data-theme="night"] #terbitModal .terbit-toggle-btn.active-green {
    background: rgba(22,163,74,.18) !important;
    border-color: rgba(34,197,94,.5) !important;
}
/* Summary rows have inline light gradients (built in JS) → clear them */
[data-theme="dark"] #terbitModal .terbit-summary-row,
[data-theme="night"] #terbitModal .terbit-summary-row {
    background: transparent !important;
}

/* ── Print modal (po-customer, po-supplier, surat jalan, invoice) ── */
[data-theme="dark"] .print-toolbar,
[data-theme="night"] .print-toolbar {
    background: var(--surface) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .print-toolbar-title,
[data-theme="night"] .print-toolbar-title {
    color: var(--body-color) !important;
}
[data-theme="dark"] .print-sep,
[data-theme="night"] .print-sep {
    background: var(--border-color) !important;
}
/* Canvas backdrop (area around the paper) → dark. Paper (.print-iframe) stays white for printing. */
[data-theme="dark"] .print-canvas,
[data-theme="night"] .print-canvas {
    background: #0B1220 !important;
}
[data-theme="dark"] .print-btn-close,
[data-theme="night"] .print-btn-close {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .print-btn-close:hover,
[data-theme="night"] .print-btn-close:hover {
    color: #f87171 !important;
    background: rgba(248,113,113,.12) !important;
}
[data-theme="dark"] .print-dropdown-menu,
[data-theme="night"] .print-dropdown-menu {
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .print-dropdown-menu .dropdown-item,
[data-theme="night"] .print-dropdown-menu .dropdown-item {
    color: var(--body-color) !important;
}
[data-theme="dark"] .print-dropdown-menu .dropdown-item:hover,
[data-theme="night"] .print-dropdown-menu .dropdown-item:hover {
    background: var(--hover-bg) !important;
    color: var(--primary) !important;
}
[data-theme="dark"] .print-sidebar,
[data-theme="night"] .print-sidebar {
    background: var(--surface) !important;
    border-right-color: var(--border-color) !important;
}