/* POS UMKM - Tahap 24B: Dark Mode Professional
   Override paling akhir untuk mengubah seluruh aplikasi menjadi dark mode.
   Fokus: nyaman dilihat, kontras aman, form/tabel/modal/kasir tetap jelas.
*/

:root {
    color-scheme: dark;
    --app-bg: #0b1220;
    --app-bg-2: #111827;
    --app-surface: #111827;
    --app-surface-soft: #162033;
    --app-surface-tint: #10233f;
    --app-text: #dbe7f5;
    --app-heading: #f8fafc;
    --app-muted: #94a3b8;
    --app-muted-2: #64748b;
    --app-border: #273449;
    --app-border-soft: #1f2a3d;
    --app-primary: #60a5fa;
    --app-primary-hover: #93c5fd;
    --app-primary-strong: #bfdbfe;
    --app-primary-soft: rgba(37, 99, 235, .20);
    --app-success: #34d399;
    --app-success-soft: rgba(16, 185, 129, .14);
    --app-warning: #fbbf24;
    --app-warning-soft: rgba(245, 158, 11, .15);
    --app-danger: #fb7185;
    --app-danger-soft: rgba(244, 63, 94, .15);
    --app-info: #38bdf8;
    --app-info-soft: rgba(14, 165, 233, .15);
    --app-shadow-xs: 0 1px 2px rgba(0, 0, 0, .18);
    --app-shadow-sm: 0 14px 34px rgba(0, 0, 0, .28);
    --app-shadow: 0 20px 50px rgba(0, 0, 0, .38);
    --app-shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
    --app-focus: 0 0 0 4px rgba(96, 165, 250, .24);
    --nav-bg: rgba(15, 23, 42, .94);
    --nav-bg-2: rgba(17, 24, 39, .94);
    --nav-text: #f8fafc;
    --nav-muted: #94a3b8;
    --nav-hover: rgba(96, 165, 250, .13);
    --nav-active: #60a5fa;
    --nav-active-hover: #93c5fd;
    --nav-border: rgba(51, 65, 85, .95);
}

* {
    scrollbar-color: #475569 transparent;
}

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

body {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 34rem),
        radial-gradient(circle at top right, rgba(20, 184, 166, .10), transparent 30rem),
        linear-gradient(180deg, #07101f 0%, #0b1220 45%, #0f172a 100%) !important;
}

body,
input,
select,
textarea,
button {
    color: var(--app-text);
}

::selection {
    background: rgba(96, 165, 250, .32);
    color: #ffffff;
}

/* Typography */
.page-title,
.page-header h1,
.page-header h2,
h1,
h2,
h3,
h4,
h5,
h6,
.card-header h3,
.panel-header h3,
.table-header h3,
.pos-header h2,
.cart-panel h3,
.checkout-panel h3,
.login-card h2,
.login-intro h1 {
    color: var(--app-heading) !important;
}

p,
div,
span,
li,
td,
th {
    border-color: var(--app-border-soft);
}

.page-subtitle,
.muted,
.small-muted,
.subtitle,
.item-desc,
.kpi-label,
.kpi-note,
.login-intro p,
.login-footer-note,
.submit-helper,
.help-text,
.form-hint,
.text-muted {
    color: var(--app-muted) !important;
}

/* Navbar */
.app-navbar {
    background: linear-gradient(135deg, var(--nav-bg), var(--nav-bg-2)) !important;
    border-bottom-color: var(--nav-border) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .34) !important;
}

.app-brand,
.app-brand-text strong,
.branch-pill strong,
.user-button span:nth-child(2) {
    color: var(--app-heading) !important;
}

.app-brand-text small,
.app-nav-trigger:after {
    color: var(--nav-muted) !important;
}

.app-nav-link,
.app-nav-trigger {
    color: #cbd5e1 !important;
}

.app-nav-link:hover,
.app-nav-trigger:hover,
.app-nav-link.active,
.app-nav-group.active .app-nav-trigger {
    background: var(--nav-hover) !important;
    color: var(--app-primary-strong) !important;
}

.app-nav-link.primary {
    background: linear-gradient(135deg, #2563eb, #0f766e) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, .34) !important;
}

.nav-icon {
    background: rgba(96, 165, 250, .13) !important;
}

.app-dropdown,
.user-dropdown,
.dropdown-panel {
    background: rgba(15, 23, 42, .98) !important;
    border-color: rgba(51, 65, 85, .95) !important;
    box-shadow: var(--app-shadow-lg) !important;
}

.app-dropdown-title {
    color: #94a3b8 !important;
}

.app-dropdown a,
.user-dropdown a {
    color: var(--app-text) !important;
}

.app-dropdown a:hover,
.app-dropdown a.active,
.user-dropdown a:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, .17), rgba(15, 23, 42, .96)) !important;
    border-color: rgba(96, 165, 250, .25) !important;
    color: var(--app-heading) !important;
}

.branch-pill,
.user-button,
.mobile-menu-label {
    background: rgba(15, 23, 42, .78) !important;
    border-color: var(--nav-border) !important;
    color: var(--app-muted) !important;
}

/* Surfaces */
.card,
.panel,
.box,
.form-card,
.table-card,
.summary-card,
.hero-side,
.dashboard-panel,
.login-card,
.modal-content,
.modal-box,
.dropdown-panel,
.filter-bar,
.filters,
.search-bar,
.filter-card,
.pos-header,
.pos-topbar,
.cart-panel,
.checkout-panel,
.top-box,
.dashboard-shift-card,
.kpi-card,
.quick-card,
.compact-list-item,
.login-point,
.shift-meta-grid > div,
.month-summary > div,
.dashboard-tip,
.checkout-section,
.summary-fixed,
.payment-status-box {
    background: rgba(17, 24, 39, .94) !important;
    border-color: rgba(51, 65, 85, .92) !important;
    color: var(--app-text) !important;
    box-shadow: var(--app-shadow-sm) !important;
}

.card:hover,
.panel:hover,
.table-card:hover,
.summary-card:hover,
.kpi-card:hover,
.quick-card:hover {
    box-shadow: var(--app-shadow) !important;
}

.section-kicker,
.hero-eyebrow {
    background: rgba(37, 99, 235, .18) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, .26) !important;
}

.dashboard-hero-main {
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, .16), transparent 22rem),
        linear-gradient(135deg, rgba(17, 24, 39, .98), rgba(15, 23, 42, .96)) !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

.shift-box,
.quick-card,
.compact-list-item,
.empty,
.empty-state,
.empty-cart {
    background: rgba(15, 23, 42, .82) !important;
    border-color: rgba(51, 65, 85, .88) !important;
    color: var(--app-muted) !important;
}

.shift-box.is-open {
    background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(15, 23, 42, .96)) !important;
    border-color: rgba(52, 211, 153, .32) !important;
}

.shift-box.is-closed {
    background: linear-gradient(135deg, rgba(244, 63, 94, .14), rgba(15, 23, 42, .96)) !important;
    border-color: rgba(251, 113, 133, .30) !important;
}

.quick-card.primary {
    background: linear-gradient(135deg, rgba(37, 99, 235, .20), rgba(15, 23, 42, .96)) !important;
    border-color: rgba(96, 165, 250, .30) !important;
}

.kpi-card::after {
    background: rgba(96, 165, 250, .12) !important;
}

.kpi-icon,
.quick-icon {
    background: rgba(96, 165, 250, .15) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, .24) !important;
}

.kpi-value,
.summary-row.total {
    color: var(--app-heading) !important;
}

/* Forms */
label,
.form-label {
    color: #cbd5e1 !important;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="file"],
select,
textarea,
.pay-input {
    background: rgba(15, 23, 42, .96) !important;
    border-color: rgba(71, 85, 105, .88) !important;
    color: var(--app-heading) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

input::placeholder,
textarea::placeholder {
    color: #64748b !important;
}

input[type="file"] {
    color: #dbeafe !important;
    padding: 8px 10px !important;
    line-height: 1.35 !important;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    min-height: 34px;
    margin-right: 12px;
    padding: 7px 12px;
    border: 1px solid rgba(96, 165, 250, .38);
    border-radius: 9px;
    background: rgba(30, 41, 59, .96);
    color: #f8fafc;
    font-weight: 800;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: rgba(37, 99, 235, .24);
    border-color: rgba(147, 197, 253, .62);
}

select option {
    background: #0f172a;
    color: #e2e8f0;
}

input:hover,
select:hover,
textarea:hover {
    border-color: rgba(96, 165, 250, .45) !important;
}

input:focus,
select:focus,
textarea:focus,
.pay-input:focus {
    background: rgba(2, 6, 23, .96) !important;
    border-color: var(--app-primary) !important;
    box-shadow: var(--app-focus) !important;
}

input[readonly],
input:disabled,
select:disabled,
textarea:disabled {
    background: rgba(30, 41, 59, .82) !important;
    color: #94a3b8 !important;
    border-color: rgba(51, 65, 85, .86) !important;
}

/* Buttons */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .34) !important;
}

.btn-muted,
.btn-secondary,
.btn-outline,
.btn-soft,
.btn-glass,
button:not(.app-nav-trigger):not(.user-button):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
    background: rgba(30, 41, 59, .92) !important;
    border-color: rgba(71, 85, 105, .88) !important;
    color: #dbeafe !important;
    box-shadow: var(--app-shadow-xs) !important;
}

.btn-muted:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn-soft:hover,
.btn-glass:hover {
    background: rgba(37, 99, 235, .18) !important;
    border-color: rgba(96, 165, 250, .42) !important;
    color: #ffffff !important;
}

.btn-success,
.badge-success {
    background: #059669 !important;
    color: #ffffff !important;
}

.btn-danger,
.badge-danger {
    background: #e11d48 !important;
    color: #ffffff !important;
}

.btn-warning,
.badge-warning {
    background: #d97706 !important;
    color: #ffffff !important;
}

/* Tables */
.table-wrap,
.table-responsive,
.cart-table-wrap {
    background: rgba(15, 23, 42, .94) !important;
    border-color: rgba(51, 65, 85, .92) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

table {
    background: transparent !important;
    color: var(--app-text) !important;
}

thead th,
table th {
    background: rgba(30, 41, 59, .96) !important;
    color: #cbd5e1 !important;
    border-bottom-color: rgba(71, 85, 105, .95) !important;
}

table td {
    color: var(--app-text) !important;
    border-bottom-color: rgba(51, 65, 85, .72) !important;
}

tbody tr {
    background: transparent !important;
}

tbody tr:hover,
.cart-table tbody tr:hover {
    background: rgba(37, 99, 235, .10) !important;
}

.table-link,
a.table-link,
a {
    color: #93c5fd;
}

.table-link:hover,
a.table-link:hover,
a:hover {
    color: #bfdbfe;
}

/* Alerts & status */
.alert-danger {
    background: rgba(244, 63, 94, .16) !important;
    color: #fecdd3 !important;
    border-color: rgba(251, 113, 133, .32) !important;
}

.alert-success {
    background: rgba(16, 185, 129, .15) !important;
    color: #bbf7d0 !important;
    border-color: rgba(52, 211, 153, .30) !important;
}

.alert-warning {
    background: rgba(245, 158, 11, .16) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, .30) !important;
}

.alert-info,
.badge-info {
    background: rgba(14, 165, 233, .16) !important;
    color: #bae6fd !important;
    border-color: rgba(56, 189, 248, .30) !important;
}

.badge,
.status-badge,
.label-status {
    border: 1px solid rgba(255, 255, 255, .08) !important;
}

/* POS / Kasir */
.pos-page {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .16), transparent 32rem),
        linear-gradient(180deg, #07101f, #0b1220) !important;
}

.shortcut-bar .kbd,
.kbd {
    background: rgba(30, 41, 59, .96) !important;
    color: #e2e8f0 !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

.submit-helper {
    background: rgba(15, 23, 42, .86) !important;
    color: var(--app-muted) !important;
}

/* Login */
.login-page {
    background:
        radial-gradient(circle at 15% 15%, rgba(37, 99, 235, .24), transparent 33rem),
        radial-gradient(circle at 85% 25%, rgba(20, 184, 166, .16), transparent 30rem),
        linear-gradient(135deg, #07101f, #0b1220 55%, #0f172a) !important;
}

.login-intro,
.login-intro h1 {
    color: var(--app-heading) !important;
}

.login-brand-mark,
.app-brand-mark {
    background: linear-gradient(135deg, #2563eb 0%, #0d9488 100%) !important;
    color: #ffffff !important;
}

/* Modal */
.modal-backdrop {
    background: rgba(2, 6, 23, .72) !important;
    backdrop-filter: blur(7px);
}

hr {
    border-top-color: rgba(51, 65, 85, .90) !important;
}

/* Print tetap terang agar struk/laporan enak dicetak */
@media print {
    :root {
        color-scheme: light;
    }

    html,
    body,
    .card,
    .panel,
    .box,
    .table-card,
    .modal-content,
    .modal-box,
    table,
    thead th,
    table th,
    table td {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }

    table th,
    table td {
        border-color: #e5e7eb !important;
    }
}

/* Tahap 24B.1 - Dark table row hover readability fix
   Pastikan semua hover tabel tetap gelap. Beberapa CSS lama memakai
   selector `tbody tr:hover td` dengan background putih, sehingga teks
   dark mode menjadi pudar/hilang. Override ini sengaja diletakkan paling
   bawah agar menang dari app.css/admin-system.css/finance-report.css. */
:root {
    --dark-row-hover-bg: rgba(30, 41, 59, .88);
    --dark-row-hover-bg-strong: rgba(51, 65, 85, .86);
    --dark-row-hover-border: rgba(96, 165, 250, .24);
}

.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > *,
table tbody tr:hover,
table tbody tr:hover > th,
table tbody tr:hover > td,
tbody tr:hover,
tbody tr:hover > th,
tbody tr:hover > td,
tr:hover td,
tr:hover th,
.cart-table tbody tr:hover,
.cart-table tbody tr:hover > td,
.data-table tbody tr:hover,
.data-table tbody tr:hover > td,
.report-table tbody tr:hover,
.report-table tbody tr:hover > td,
.compact-table tbody tr:hover,
.compact-table tbody tr:hover > td,
.inventory-table tbody tr:hover,
.inventory-table tbody tr:hover > td,
.purchase-table tbody tr:hover,
.purchase-table tbody tr:hover > td,
.finance-table tbody tr:hover,
.finance-table tbody tr:hover > td {
    background-color: var(--dark-row-hover-bg) !important;
    background-image: none !important;
    color: #f8fafc !important;
    --bs-table-accent-bg: var(--dark-row-hover-bg) !important;
    --bs-table-hover-bg: var(--dark-row-hover-bg) !important;
    --bs-table-hover-color: #f8fafc !important;
}

table tbody tr:hover > td,
table tbody tr:hover > th,
tbody tr:hover > td,
tbody tr:hover > th {
    border-bottom-color: var(--dark-row-hover-border) !important;
}

table tbody tr:hover a,
table tbody tr:hover .table-link,
tbody tr:hover a,
tbody tr:hover .table-link {
    color: #bfdbfe !important;
}

table tbody tr:hover .badge,
table tbody tr:hover .table-badge,
tbody tr:hover .badge,
tbody tr:hover .table-badge {
    filter: none !important;
}

/* Baris yang punya background custom tetap dibuat readable saat hover */
table tbody tr[style]:hover,
table tbody tr[style]:hover > td,
table tbody tr[style]:hover > th {
    background-color: var(--dark-row-hover-bg-strong) !important;
    color: #f8fafc !important;
}

/* Tahap 24B.2 - Comprehensive dark readability cleanup
   Fokus: hilangkan panel/subpanel terang yang lolos dari override dark mode,
   khususnya header, section kecil, summary, kartu kasir, modal, pagination,
   dan utility class umum seperti bg-white / text-dark. */
:root {
    --dark-subsurface: rgba(17, 24, 39, .98);
    --dark-subsurface-soft: rgba(15, 23, 42, .94);
    --dark-subsurface-tint: rgba(30, 41, 59, .94);
    --dark-subsurface-strong: #1e293b;
    --dark-text-strong: #f8fafc;
    --dark-text-soft: #cbd5e1;
    --dark-text-muted: #94a3b8;
}

/* Utility classes yang sering bikin teks hilang di dark mode */
.bg-white,
.bg-light,
.background-white,
.surface-white,
.table-light,
.card-header.bg-white,
.card-header.bg-light,
.modal-header.bg-white,
.modal-header.bg-light {
    background: var(--dark-subsurface) !important;
    color: var(--dark-text-strong) !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

.text-dark,
.text-body,
.text-black,
.text-secondary-dark {
    color: var(--dark-text-strong) !important;
}

.text-secondary,
.text-muted,
.text-body-secondary,
small,
.small,
.form-text {
    color: var(--dark-text-muted) !important;
}

/* Header / sub-card yang masih putih */
.panel-header,
.card-header,
.box-header,
.section-header,
.top-box,
.inline-item-panel,
.scan-box-main,
.checkout-section,
.summary-fixed,
.summary-row.total,
.modal,
.modal-header,
.search-result,
.list-group-item,
.dropdown-item,
.popover,
.tooltip-inner,
.page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--dark-subsurface) !important;
    color: var(--dark-text-strong) !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

.scan-box-main,
.summary-fixed,
.summary-row.total,
.checkout-section,
.search-result:hover {
    background: linear-gradient(180deg, rgba(30, 41, 59, .98), rgba(15, 23, 42, .98)) !important;
}

.panel-header,
.modal-header,
.card-header,
.box-header,
.section-header {
    border-bottom-color: rgba(51, 65, 85, .92) !important;
}

/* POS / kasir readability */
.pos-topbar,
.cart-panel,
.checkout-panel,
.cart-table-wrap,
.checkout-body,
.checkout-panel .panel-header,
.cart-panel .panel-header,
.summary-fixed,
.checkout-section,
.modal-body {
    background: var(--dark-subsurface-soft) !important;
    color: var(--dark-text-strong) !important;
}

.top-card-title,
.scan-box-main label,
.checkout-section-title,
.payment-grid label,
.checkout-panel label,
.summary-fixed label,
.summary-row,
.summary-row strong,
.inline-item-name,
.top-customer-name,
.result-title,
.modal-header h3,
.panel-header h3,
.search-result strong,
.cart-panel h3,
.checkout-panel h3 {
    color: var(--dark-text-strong) !important;
}

.inline-item-meta,
.small-muted,
.result-meta,
.checkout-panel .small-muted,
.cart-panel .small-muted,
.summary-row:not(.total),
.panel-header .small-muted {
    color: var(--dark-text-muted) !important;
}

#barcodeInput,
.pay-input,
.payment-grid input,
.payment-grid select,
.checkout-panel input,
.checkout-panel select,
.inline-item-grid input,
.inline-item-grid select,
.modal input,
.modal select,
.modal textarea {
    background: rgba(15, 23, 42, .96) !important;
    color: var(--dark-text-strong) !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

#barcodeInput::placeholder,
.pay-input::placeholder {
    color: #64748b !important;
}

#receivableMethodHint,
#paidAmountHint,
.alert-soft-warning,
.notice-warning {
    background: rgba(120, 53, 15, .28) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, .28) !important;
}

.summary-row.total,
.grand-total,
.total-box,
.total-summary {
    border-color: rgba(96, 165, 250, .28) !important;
    background: linear-gradient(135deg, rgba(37, 99, 235, .30), rgba(30, 41, 59, .96)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 34px rgba(0,0,0,.22) !important;
}

.summary-row.total strong,
.summary-row.total span,
.summary-row.total div,
.grand-total strong,
.grand-total span,
.total-box strong,
.total-box span {
    color: #ffffff !important;
}

.pay-input,
.summary-fixed .pay-input {
    border-color: rgba(96, 165, 250, .42) !important;
    background: rgba(2, 6, 23, .92) !important;
    color: #f8fafc !important;
}

.empty-cart,
.empty,
.empty-state,
.empty-cart strong,
.empty-cart b {
    color: var(--dark-text-soft) !important;
}

.search-result:hover {
    border-color: rgba(96, 165, 250, .40) !important;
}

/* Tables / pagination / misc components */
.table,
.table-responsive,
.dataTables_wrapper,
.dataTables_wrapper .dataTables_info,
.pagination,
.list-group,
.list-group-item-action:hover,
.breadcrumb,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--dark-text-soft) !important;
}

.page-link,
.pagination .page-item .page-link {
    background: rgba(30, 41, 59, .92) !important;
    color: var(--dark-text-soft) !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

.page-item.active .page-link,
.pagination .page-item.active .page-link {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

.page-item.disabled .page-link,
.pagination .page-item.disabled .page-link {
    background: rgba(51, 65, 85, .75) !important;
    color: #94a3b8 !important;
}

/* Bootstrap-ish buttons that may still default to light */
.btn-light,
.btn-default,
.btn-outline-secondary,
.btn-outline-dark {
    background: rgba(30, 41, 59, .92) !important;
    color: #e2e8f0 !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

.btn-light:hover,
.btn-default:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
    background: rgba(37, 99, 235, .18) !important;
    color: #ffffff !important;
    border-color: rgba(96, 165, 250, .42) !important;
}


/* Tahap 24B.2A - Targeted Visual Fix
   Perbaikan kecil dari baseline 24B2.
   Jangan sweep global agresif. Fokus hanya elemen yang terlihat putih/pudar
   pada screenshot: stat cards, price card, SKU/barcode pill, nomor kecil
   invoice/pembelian, dan area pagination footer. */

:root {
    --dark-fix-panel: #111827;
    --dark-fix-panel-2: #162033;
    --dark-fix-panel-3: #1e293b;
    --dark-fix-border: #334155;
    --dark-fix-text: #f8fafc;
    --dark-fix-muted: #94a3b8;
    --dark-fix-blue-soft: rgba(37, 99, 235, .18);
}

/* 1) Summary/stat card yang masih putih, contoh halaman Shift Kasir */
.stat-card,
.stats-card,
.metric-card,
.summary-card,
.dashboard-stat,
.report-stat,
.stat-box,
.summary-box,
.kpi-box,
.info-card,
.total-card {
    background: linear-gradient(180deg, var(--dark-fix-panel-2), var(--dark-fix-panel)) !important;
    color: var(--dark-fix-text) !important;
    border-color: var(--dark-fix-border) !important;
}

.stat-card *,
.stats-card *,
.metric-card *,
.summary-card *,
.dashboard-stat *,
.report-stat *,
.stat-box *,
.summary-box *,
.kpi-box *,
.info-card *,
.total-card * {
    color: inherit;
}

.stat-card small,
.stats-card small,
.metric-card small,
.summary-card small,
.dashboard-stat small,
.report-stat small,
.stat-box small,
.summary-box small,
.kpi-box small,
.info-card small,
.total-card small,
.stat-label,
.metric-label,
.summary-label {
    color: var(--dark-fix-muted) !important;
}

.stat-value,
.metric-value,
.summary-value,
.kpi-number,
.total-value {
    color: #dbeafe !important;
}

/* 2) Card kecil harga retail/member yang masih putih */
.price-card,
.price-box,
.current-price,
.retail-price-card,
.member-price-card,
.product-price-card,
.price-summary,
.price-level-card {
    background: linear-gradient(180deg, var(--dark-fix-panel-2), var(--dark-fix-panel)) !important;
    color: var(--dark-fix-text) !important;
    border-color: var(--dark-fix-border) !important;
}

.price-card *,
.price-box *,
.current-price *,
.retail-price-card *,
.member-price-card *,
.product-price-card *,
.price-summary *,
.price-level-card * {
    color: var(--dark-fix-text) !important;
}

.price-card small,
.price-box small,
.current-price small,
.retail-price-card small,
.member-price-card small,
.product-price-card small,
.price-summary small,
.price-level-card small {
    color: var(--dark-fix-muted) !important;
}

/* 3) Pill putih pada SKU / barcode / nomor kecil invoice.
   Dibuat gelap, tapi tetap terlihat sebagai kode. */
td code,
td .code,
td .sku,
td .barcode,
td .invoice-no,
td .serial,
td .pill-code,
td .mini-code,
td .badge-code,
.sku-pill,
.barcode-pill,
.code-pill,
.invoice-pill,
.serial-pill,
.mini-pill,
.ref-pill,
.table-code,
.product-code,
.product-sku,
.product-barcode {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(71, 85, 105, .88) !important;
    box-shadow: none !important;
}

/* Banyak halaman membuat kode sebagai input readonly/disabled di dalam tabel */
table input[readonly],
table input:disabled,
table .readonly,
table .disabled,
.table-wrap input[readonly],
.table-wrap input:disabled,
.table-responsive input[readonly],
.table-responsive input:disabled {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border-color: rgba(71, 85, 105, .88) !important;
    opacity: 1 !important;
}

/* Jika kode dibuat dengan style inline background putih */
table span[style*="background:#fff"],
table span[style*="background: #fff"],
table div[style*="background:#fff"],
table div[style*="background: #fff"],
table small[style*="background:#fff"],
table small[style*="background: #fff"] {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

/* 4) Pagination/footer table yang masih putih */
.pagination-wrap,
.pagination-wrapper,
.pagination-bar,
.table-footer,
.table-pagination,
.data-footer,
.list-footer,
.card-footer,
.panel-footer,
.table-card-footer {
    background: rgba(15, 23, 42, .94) !important;
    color: var(--dark-fix-muted) !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

.pagination-wrap *,
.pagination-wrapper *,
.pagination-bar *,
.table-footer *,
.table-pagination *,
.data-footer *,
.list-footer *,
.card-footer *,
.panel-footer *,
.table-card-footer * {
    color: inherit;
}

.pagination-wrap .page-link,
.pagination-wrapper .page-link,
.pagination-bar .page-link,
.table-footer .page-link,
.table-pagination .page-link,
.card-footer .page-link,
.panel-footer .page-link {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

.pagination-wrap .active .page-link,
.pagination-wrapper .active .page-link,
.pagination-bar .active .page-link,
.table-footer .active .page-link,
.table-pagination .active .page-link,
.card-footer .active .page-link,
.panel-footer .active .page-link,
.pagination .active,
.pagination .active a,
.pagination .active button {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* 5) Kalau masih ada row/panel putih di dalam table-card/list-card, gelapkan */
.table-card > div[style*="background:#fff"],
.table-card > div[style*="background: #fff"],
.panel > div[style*="background:#fff"],
.panel > div[style*="background: #fff"],
.card > div[style*="background:#fff"],
.card > div[style*="background: #fff"] {
    background: rgba(15, 23, 42, .94) !important;
    color: var(--dark-fix-text) !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

/* 6) Tombol/label status jangan ikut jadi putih pucat */
.badge,
.status-badge,
.label-status {
    opacity: 1 !important;
}

.badge-success,
.status-active,
.status-badge.success,
.status-badge.open,
.badge.open {
    background: rgba(16, 185, 129, .18) !important;
    color: #86efac !important;
    border-color: rgba(52, 211, 153, .28) !important;
}

.badge-danger,
.status-danger,
.status-badge.danger,
.status-badge.closed,
.badge.closed {
    background: rgba(244, 63, 94, .18) !important;
    color: #fda4af !important;
    border-color: rgba(251, 113, 133, .28) !important;
}

/* 7) Link nomor transaksi/pembelian tetap jelas */
table a,
.table-card a,
.panel a {
    color: #bfdbfe !important;
}

table a:hover,
.table-card a:hover,
.panel a:hover {
    color: #ffffff !important;
}

/* 8) Jangan ganggu mode print */
@media print {
    .stat-card,
    .stats-card,
    .metric-card,
    .summary-card,
    .dashboard-stat,
    .report-stat,
    .stat-box,
    .summary-box,
    .kpi-box,
    .info-card,
    .total-card,
    .price-card,
    .price-box,
    .current-price,
    .retail-price-card,
    .member-price-card,
    .product-price-card,
    .price-summary,
    .price-level-card,
    .pagination-wrap,
    .pagination-wrapper,
    .pagination-bar,
    .table-footer,
    .table-pagination,
    .data-footer,
    .list-footer,
    .card-footer,
    .panel-footer,
    .table-card-footer {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }
}


/* Tahap 24B.2B - Shift page stat cards fix
   Patch kecil khusus untuk masalah di pages/shift.php:
   ringkasan atas (Transaksi, Penjualan Non-Cash, Total Penjualan, Diskon)
   masih putih dan teksnya pudar.
   Dibuat spesifik supaya tidak merusak layout halaman lain. */

body:has(.shift-summary-grid) .shift-summary-grid > *,
body:has(.shift-summary-grid) .shift-summary-grid .card,
body:has(.shift-summary-grid) .shift-summary-grid .summary-card,
body:has(.shift-summary-grid) .shift-summary-grid .stat-card,
body:has(.shift-summary-grid) .shift-summary-grid .metric-card,
body:has(.shift-summary-grid) .shift-summary-grid .box,
body:has(.shift-summary-grid) .shift-summary-grid .panel,
.shift-summary-grid > *,
.shift-summary-grid .card,
.shift-summary-grid .summary-card,
.shift-summary-grid .stat-card,
.shift-summary-grid .metric-card,
.shift-summary-grid .box,
.shift-summary-grid .panel,
.shift-stats > *,
.shift-stats .card,
.shift-stats .summary-card,
.shift-stats .stat-card,
.shift-stats .metric-card,
.shift-metrics > *,
.shift-metrics .card,
.shift-metrics .summary-card,
.shift-metrics .stat-card,
.shift-metrics .metric-card,
.shift-overview > *,
.shift-overview .card,
.shift-overview .summary-card,
.shift-overview .stat-card,
.shift-overview .metric-card {
    background: linear-gradient(180deg, #162033 0%, #111827 100%) !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border: 1px solid rgba(51, 65, 85, .92) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
}

.shift-summary-grid > * *,
.shift-stats > * *,
.shift-metrics > * *,
.shift-overview > * * {
    color: inherit !important;
}

.shift-summary-grid small,
.shift-summary-grid .label,
.shift-summary-grid .title,
.shift-summary-grid .muted,
.shift-summary-grid .text-muted,
.shift-summary-grid .summary-label,
.shift-summary-grid .stat-label,
.shift-summary-grid .metric-label,
.shift-stats small,
.shift-stats .label,
.shift-stats .title,
.shift-stats .muted,
.shift-stats .text-muted,
.shift-stats .summary-label,
.shift-stats .stat-label,
.shift-stats .metric-label,
.shift-metrics small,
.shift-metrics .label,
.shift-metrics .title,
.shift-metrics .muted,
.shift-metrics .text-muted,
.shift-metrics .summary-label,
.shift-metrics .stat-label,
.shift-metrics .metric-label,
.shift-overview small,
.shift-overview .label,
.shift-overview .title,
.shift-overview .muted,
.shift-overview .text-muted,
.shift-overview .summary-label,
.shift-overview .stat-label,
.shift-overview .metric-label {
    color: #94a3b8 !important;
}

.shift-summary-grid strong,
.shift-summary-grid b,
.shift-summary-grid .value,
.shift-summary-grid .amount,
.shift-summary-grid .number,
.shift-summary-grid .summary-value,
.shift-summary-grid .stat-value,
.shift-summary-grid .metric-value,
.shift-stats strong,
.shift-stats b,
.shift-stats .value,
.shift-stats .amount,
.shift-stats .number,
.shift-stats .summary-value,
.shift-stats .stat-value,
.shift-stats .metric-value,
.shift-metrics strong,
.shift-metrics b,
.shift-metrics .value,
.shift-metrics .amount,
.shift-metrics .number,
.shift-metrics .summary-value,
.shift-metrics .stat-value,
.shift-metrics .metric-value,
.shift-overview strong,
.shift-overview b,
.shift-overview .value,
.shift-overview .amount,
.shift-overview .number,
.shift-overview .summary-value,
.shift-overview .stat-value,
.shift-overview .metric-value {
    color: #dbeafe !important;
}

/* Fallback untuk halaman shift.php jika class grid-nya ternyata generic.
   Target dibatasi pada halaman yang punya judul Shift Kasir. */
body:has(.page-title) .summary-grid > *,
body:has(.page-title) .stats-grid > *,
body:has(.page-title) .metrics-grid > * {
    background-color: #111827 !important;
}

/* Browser fallback tanpa :has(): class umum di bagian atas halaman shift */
.summary-grid .summary-card,
.summary-grid .stat-card,
.summary-grid .metric-card,
.stats-grid .summary-card,
.stats-grid .stat-card,
.stats-grid .metric-card,
.metrics-grid .summary-card,
.metrics-grid .stat-card,
.metrics-grid .metric-card {
    background: linear-gradient(180deg, #162033 0%, #111827 100%) !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

.summary-grid .summary-card *,
.summary-grid .stat-card *,
.summary-grid .metric-card *,
.stats-grid .summary-card *,
.stats-grid .stat-card *,
.stats-grid .metric-card *,
.metrics-grid .summary-card *,
.metrics-grid .stat-card *,
.metrics-grid .metric-card * {
    color: inherit !important;
}

.summary-grid .summary-card small,
.summary-grid .stat-card small,
.summary-grid .metric-card small,
.stats-grid .summary-card small,
.stats-grid .stat-card small,
.stats-grid .metric-card small,
.metrics-grid .summary-card small,
.metrics-grid .stat-card small,
.metrics-grid .metric-card small {
    color: #94a3b8 !important;
}

/* Tambahan khusus jika kartu dibuat memakai inline white background */
body:has(.page-title) .page-content > div[style*="background:#fff"],
body:has(.page-title) .page-content > div[style*="background: #fff"],
body:has(.page-title) .content > div[style*="background:#fff"],
body:has(.page-title) .content > div[style*="background: #fff"] {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

@media print {
    .shift-summary-grid > *,
    .shift-stats > *,
    .shift-metrics > *,
    .shift-overview > * {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }
}


/* Tahap 24B.2C - Final targeted visual fix
   Basis: 24B2/24B2A/24B2B. Versi 24B3 tetap tidak dipakai.
   Fokus: elemen yang masih putih/pudar dari CSS lama tanpa mengubah layout. */

/* A. Fix utama screenshot shift.php: kartu atas ternyata memakai .mini-card */
.mini-card,
.shift-page .mini-card,
.shift-kpi-grid .mini-card,
.payment-grid.shift-kpi-grid .mini-card,
.shift-page .payment-grid.shift-kpi-grid > .mini-card,
.shift-page .payment-grid.shift-kpi-grid > div,
.shift-page .payment-grid.shift-kpi-grid > section {
    background: linear-gradient(180deg, #162033 0%, #111827 100%) !important;
    background-color: #111827 !important;
    color: #f8fafc !important;
    border: 1px solid rgba(51, 65, 85, .94) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
}

.mini-card *,
.shift-page .mini-card *,
.shift-kpi-grid .mini-card *,
.payment-grid.shift-kpi-grid .mini-card * {
    color: inherit !important;
}

.mini-card small,
.mini-card .small,
.mini-card .label,
.mini-card .title,
.mini-card .muted,
.mini-card .text-muted,
.mini-card p,
.shift-page .mini-card small,
.shift-page .mini-card .small,
.shift-page .mini-card .label,
.shift-page .mini-card .title,
.shift-page .mini-card .muted,
.shift-page .mini-card .text-muted,
.shift-page .mini-card p {
    color: #94a3b8 !important;
}

.mini-card strong,
.mini-card b,
.mini-card .value,
.mini-card .amount,
.mini-card .number,
.shift-page .mini-card strong,
.shift-page .mini-card b,
.shift-page .mini-card .value,
.shift-page .mini-card .amount,
.shift-page .mini-card .number {
    color: #dbeafe !important;
}

/* B. Form/filter/kartu kecil yang kadang masih terang */
.filter-card,
.filter-box,
.search-card,
.search-box,
.form-section,
.form-panel,
.input-card,
.info-box,
.info-panel,
.action-card,
.shift-action-card {
    background: rgba(17, 24, 39, .94) !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

.filter-card *,
.filter-box *,
.search-card *,
.search-box *,
.form-section *,
.form-panel *,
.input-card *,
.info-box *,
.info-panel *,
.action-card *,
.shift-action-card * {
    color: inherit;
}

.theme-dark .mini-list-row,
body:not(.theme-light) .mini-list-row {
    background: rgba(15, 23, 42, .96) !important;
    border-color: rgba(71, 85, 105, .9) !important;
    color: #f8fafc !important;
}

.theme-dark .mini-list-row span,
body:not(.theme-light) .mini-list-row span {
    color: #cbd5e1 !important;
}

/* C. Kode/SKU/barcode/invoice kecil yang masih putih di beberapa tabel */
.code-chip,
.code-badge,
.sku-badge,
.barcode-badge,
.sku-code,
.barcode-code,
.invoice-code,
.reference-code,
.row-code,
.number-chip,
.number-badge,
td code,
td kbd,
td samp,
.table-card code,
.table-card kbd,
.table-card samp,
.table-responsive code,
.table-responsive kbd,
.table-responsive samp {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(71, 85, 105, .88) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* Banyak kode di halaman dibuat sebagai input kecil readonly */
td input[readonly],
td input:disabled,
td input[type="text"][readonly],
td input[type="number"][readonly],
.table-card td input[readonly],
.table-card td input:disabled,
.table-responsive td input[readonly],
.table-responsive td input:disabled {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border-color: rgba(71, 85, 105, .88) !important;
    opacity: 1 !important;
}

/* D. Pagination footer yang masih putih */
.pagination-info,
.pagination-container,
.pagination-wrap,
.pagination-wrapper,
.pagination-bar,
.table-footer,
.table-pagination,
.card-footer,
.panel-footer,
.list-footer {
    background: rgba(15, 23, 42, .96) !important;
    color: #94a3b8 !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

.pagination-info *,
.pagination-container *,
.pagination-wrap *,
.pagination-wrapper *,
.pagination-bar *,
.table-footer *,
.table-pagination *,
.card-footer *,
.panel-footer *,
.list-footer * {
    color: inherit;
}

/* E. Area putih inline di dalam card/panel/table: override lebih hati-hati */
.card [style*="background:#fff"],
.card [style*="background: #fff"],
.card [style*="background:#ffffff"],
.card [style*="background: #ffffff"],
.panel [style*="background:#fff"],
.panel [style*="background: #fff"],
.panel [style*="background:#ffffff"],
.panel [style*="background: #ffffff"],
.table-card [style*="background:#fff"],
.table-card [style*="background: #fff"],
.table-card [style*="background:#ffffff"],
.table-card [style*="background: #ffffff"],
.table-responsive [style*="background:#fff"],
.table-responsive [style*="background: #fff"],
.table-responsive [style*="background:#ffffff"],
.table-responsive [style*="background: #ffffff"] {
    background: rgba(17, 24, 39, .94) !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

/* F. Jika ada utility bootstrap/old CSS yang masih memaksa putih */
.bg-white,
.bg-light,
.table-light,
.card.bg-white,
.panel.bg-white,
.box.bg-white,
div.bg-white,
section.bg-white {
    background: rgba(17, 24, 39, .94) !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

/* G. Tetap pastikan print terang */
@media print {
    .mini-card,
    .shift-page .mini-card,
    .filter-card,
    .filter-box,
    .search-card,
    .search-box,
    .form-section,
    .form-panel,
    .input-card,
    .info-box,
    .info-panel,
    .action-card,
    .shift-action-card,
    .pagination-info,
    .pagination-container,
    .pagination-wrap,
    .pagination-wrapper,
    .pagination-bar,
    .table-footer,
    .table-pagination,
    .card-footer,
    .panel-footer,
    .list-footer {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }
}


/* Tahap 24B.2D - Remaining circled visual fixes
   Basis: 24B2C yang shift.php sudah benar.
   Patch ini khusus untuk elemen yang masih putih dari screenshot lain:
   - SKU / Barcode pill di produk, stok, pembelian
   - card Harga Retail di product_price_levels.php
   - nomor kecil pembelian (#20, #19, dst)
   - footer/pagination putih di beberapa list seperti supplier
   Tidak mengubah logic dan tidak sweep layout global. */

/* 1) Product/stock/purchase code pills.
   Di CSS lama ada beberapa kode dibuat sebagai inline-block dengan background putih,
   sering bukan class .code saja. Selector dibuat berdasarkan pola umum dan posisi tabel. */
table td > span,
table td > small,
table td > div,
.table-card td > span,
.table-card td > small,
.table-card td > div,
.table-responsive td > span,
.table-responsive td > small,
.table-responsive td > div {
    color: inherit;
}

/* Target kode pendek di kolom SKU/Barcode/No Pembelian yang biasanya berupa badge/pill */
td .badge:not(.badge-success):not(.badge-danger):not(.badge-warning):not(.badge-info),
td .chip,
td .pill,
td .tag,
td .code,
td .sku,
td .barcode,
td .mono,
td .monospace,
td .ref,
td .invoice,
td .number,
td .small-code,
td .code-small,
td .badge-code,
td .sku-pill,
td .barcode-pill,
td .invoice-pill,
td .ref-pill,
td .code-pill,
td .table-code,
td .product-code,
td .product-sku,
td .product-barcode,
td [class*="code"],
td [class*="sku"],
td [class*="barcode"],
td [class*="invoice"],
td [class*="ref-"],
td [class*="ref_"] {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(71, 85, 105, .88) !important;
    box-shadow: none !important;
}

/* Kode yang berupa input readonly/disabled di dalam tabel */
table td input[readonly],
table td input:disabled,
table td input[type="text"][readonly],
table td input[type="number"][readonly],
.table-card td input[readonly],
.table-card td input:disabled,
.table-responsive td input[readonly],
.table-responsive td input:disabled {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border-color: rgba(71, 85, 105, .88) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #dbeafe !important;
}

/* Kode yang berupa style inline putih */
table td span[style*="background"],
table td small[style*="background"],
table td div[style*="background"],
.table-card td span[style*="background"],
.table-card td small[style*="background"],
.table-card td div[style*="background"],
.table-responsive td span[style*="background"],
.table-responsive td small[style*="background"],
.table-responsive td div[style*="background"] {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

/* 2) Fallback spesifik: kolom pertama/kedua pada tabel produk/stok/pembelian sering berisi SKU & barcode pill.
   Jangan ubah semua cell, hanya anak elemen kecil di dua kolom pertama. */
table tbody td:nth-child(1) > span,
table tbody td:nth-child(1) > small,
table tbody td:nth-child(1) > code,
table tbody td:nth-child(1) > input[readonly],
table tbody td:nth-child(2) > span,
table tbody td:nth-child(2) > small,
table tbody td:nth-child(2) > code,
table tbody td:nth-child(2) > input[readonly] {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(71, 85, 105, .88) !important;
    box-shadow: none !important;
}

/* 3) Nomor kecil di bawah no pembelian seperti #20, #19, dst */
.purchase-no,
.purchase-number,
.po-number,
.invoice-number,
.transaction-number,
.document-number,
.no-pembelian,
.no-invoice,
.no-transaksi,
td small[class*="no"],
td small[class*="number"],
td span[class*="no"],
td span[class*="number"] {
    color: #bfdbfe !important;
}

td small[style*="background"],
td span[style*="background"] {
    border-radius: 8px !important;
}

/* 4) Card Harga Retail / price card di Harga Grosir Member.
   Dari screenshot card kecil kanan masih putih. Target beberapa pola class umum. */
.price-mini-card,
.price-current-card,
.current-price-card,
.retail-card,
.retail-price,
.retail-price-box,
.product-retail-card,
.product-current-price,
.price-display-card,
.price-display,
.price-summary-card,
.price-card,
.price-box,
.current-price,
.product-price-card,
.price-summary,
.price-level-card,
.mini-card.price-card,
.mini-card.price-box {
    background: linear-gradient(180deg, #162033 0%, #111827 100%) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(51, 65, 85, .94) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
}

.price-mini-card *,
.price-current-card *,
.current-price-card *,
.retail-card *,
.retail-price *,
.retail-price-box *,
.product-retail-card *,
.product-current-price *,
.price-display-card *,
.price-display *,
.price-summary-card *,
.price-card *,
.price-box *,
.current-price *,
.product-price-card *,
.price-summary *,
.price-level-card * {
    color: inherit !important;
}

.price-mini-card small,
.price-current-card small,
.current-price-card small,
.retail-card small,
.retail-price small,
.retail-price-box small,
.product-retail-card small,
.product-current-price small,
.price-display-card small,
.price-display small,
.price-summary-card small,
.price-card small,
.price-box small,
.current-price small,
.product-price-card small,
.price-summary small,
.price-level-card small {
    color: #94a3b8 !important;
}

/* 5) Jika halaman harga punya card di area produk kiri dengan style inline putih */
body:has(select[name*="product"]) .card [style*="background"],
body:has(select[name*="product"]) .panel [style*="background"],
body:has(select[name*="produk"]) .card [style*="background"],
body:has(select[name*="produk"]) .panel [style*="background"] {
    background: rgba(17, 24, 39, .94) !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

/* 6) Pagination/footer putih di supplier dan list lain.
   Di screenshot supplier footer putih ada di bawah table, biasanya bukan .pagination-wrap saja
   tapi div langsung setelah table. */
.table-card > .pagination,
.table-card > .pagination-info,
.table-card > .pagination-container,
.table-card > .pagination-wrap,
.table-card > .pagination-wrapper,
.table-card > .pagination-bar,
.table-card > .table-footer,
.table-card > .footer,
.table-card > div:last-child,
.panel > .pagination,
.panel > .pagination-info,
.panel > .pagination-container,
.panel > .pagination-wrap,
.panel > .pagination-wrapper,
.panel > .pagination-bar,
.panel > .table-footer,
.panel > .footer {
    background: rgba(15, 23, 42, .96) !important;
    color: #94a3b8 !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

/* Supaya div terakhir card yang berisi form/button tidak semuanya jadi gelap aneh:
   hanya pastikan tombol pagination tetap readable. */
.table-card > div:last-child .page-link,
.table-card > div:last-child a,
.table-card > div:last-child button,
.panel > div:last-child .page-link,
.panel > div:last-child a,
.panel > div:last-child button {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

.table-card > div:last-child .active,
.table-card > div:last-child .active a,
.table-card > div:last-child .active button,
.table-card > div:last-child .page-link.active,
.panel > div:last-child .active,
.panel > div:last-child .active a,
.panel > div:last-child .active button,
.panel > div:last-child .page-link.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* 7) White utilities inside data cards */
.table-card .bg-white,
.table-card .bg-light,
.panel .bg-white,
.panel .bg-light,
.card .bg-white,
.card .bg-light {
    background: rgba(17, 24, 39, .94) !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

/* 8) Jangan ubah print */
@media print {
    .price-mini-card,
    .price-current-card,
    .current-price-card,
    .retail-card,
    .retail-price,
    .retail-price-box,
    .product-retail-card,
    .product-current-price,
    .price-display-card,
    .price-display,
    .price-summary-card,
    .price-card,
    .price-box,
    .current-price,
    .product-price-card,
    .price-summary,
    .price-level-card,
    .table-card > div:last-child,
    .panel > div:last-child {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }
}

/* Tahap 24B.2E - Exact specificity fixes
   Perbaikan berdasarkan class asli dari halaman yang masih putih.
   Penyebab utama: CSS lama punya selector lebih spesifik seperti
   body.detail-page .info-box dan .price-level-page .price-retail-summary.
   Patch ini memakai selector yang sama/lebih spesifik dan diletakkan paling akhir. */

/* 1) Harga Grosir / Member: card Harga Retail */
body.price-level-page .price-retail-summary,
.price-level-page .price-retail-summary,
.inventory-page.price-level-page .price-retail-summary,
.price-level-main-card .price-retail-summary {
    background: linear-gradient(180deg, #162033 0%, #111827 100%) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(51, 65, 85, .94) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
}
body.price-level-page .price-retail-summary span,
.price-level-page .price-retail-summary span,
.inventory-page.price-level-page .price-retail-summary span,
.price-level-main-card .price-retail-summary span {
    color: #94a3b8 !important;
}
body.price-level-page .price-retail-summary strong,
.price-level-page .price-retail-summary strong,
.inventory-page.price-level-page .price-retail-summary strong,
.price-level-main-card .price-retail-summary strong {
    color: #dbeafe !important;
}

/* 2) Detail transaksi / retur / pembelian / akun kas: info-box putih */
body.detail-page .info-box,
body.sales-detail-page .info-box,
body.transaction-detail-page .info-box,
body.sales-return-page .info-box,
body.purchase-page.detail-page .info-box,
body.finance-page.detail-page .info-box,
body.cash-account-detail-page .info-box,
body.user-permission-page .info-box,
.card .info-grid .info-box,
.panel .info-grid .info-box,
.info-grid > .info-box {
    background: linear-gradient(180deg, #162033 0%, #111827 100%) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(51, 65, 85, .94) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}
body.detail-page .info-box .info-label,
body.sales-detail-page .info-box .info-label,
body.transaction-detail-page .info-box .info-label,
body.sales-return-page .info-box .info-label,
body.purchase-page.detail-page .info-box .info-label,
body.finance-page.detail-page .info-box .info-label,
body.cash-account-detail-page .info-box .info-label,
.info-grid > .info-box .info-label,
.info-grid > .info-box .label {
    color: #94a3b8 !important;
}
body.detail-page .info-box .info-value,
body.detail-page .info-box .value,
body.sales-detail-page .info-box .info-value,
body.transaction-detail-page .info-box .info-value,
body.sales-return-page .info-box .info-value,
body.purchase-page.detail-page .info-box .info-value,
body.finance-page.detail-page .info-box .info-value,
body.cash-account-detail-page .info-box .info-value,
.info-grid > .info-box .info-value,
.info-grid > .info-box .value {
    color: #f8fafc !important;
}
body.detail-page .info-box .muted,
body.sales-detail-page .info-box .muted,
body.transaction-detail-page .info-box .muted,
body.finance-page.detail-page .info-box .muted,
body.cash-account-detail-page .info-box .muted,
.info-grid > .info-box .muted {
    color: #94a3b8 !important;
}

/* 3) Detail transaksi: kotak summary total putih */
body.sales-detail-page .summary,
body.transaction-detail-page .summary,
body.detail-page .summary,
.sales-detail-page .summary,
.transaction-detail-page .summary,
.card .summary {
    background: rgba(15, 23, 42, .96) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(51, 65, 85, .92) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}
body.sales-detail-page .summary .summary-row,
body.transaction-detail-page .summary .summary-row,
body.detail-page .summary .summary-row,
.card .summary .summary-row {
    color: #cbd5e1 !important;
    border-color: rgba(51,65,85,.8) !important;
}
body.sales-detail-page .summary .summary-row.total,
body.transaction-detail-page .summary .summary-row.total,
body.detail-page .summary .summary-row.total,
.card .summary .summary-row.total {
    background: rgba(37, 99, 235, .28) !important;
    color: #ffffff !important;
    border-color: rgba(96,165,250,.36) !important;
}
body.sales-detail-page .summary strong,
body.transaction-detail-page .summary strong,
body.detail-page .summary strong,
.card .summary strong {
    color: #f8fafc !important;
}

/* 4) Produk/Stok/Stock opname: SKU dan Barcode pill */
body.inventory-page .sku-code,
body.inventory-page .barcode-code,
body.product-page .sku-code,
body.product-page .barcode-code,
body.stock-page .sku-code,
body.stock-page .barcode-code,
.inventory-table-card .sku-code,
.inventory-table-card .barcode-code,
.table-wrap .sku-code,
.table-wrap .barcode-code,
.stock-page .table-wrap .sku-code,
.stock-page .table-wrap .barcode-code,
.product-page .table-wrap .sku-code,
.product-page .table-wrap .barcode-code,
.stock-opname-page .sku-code,
.stock-opname-page .barcode-code {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(71, 85, 105, .88) !important;
    box-shadow: none !important;
}

/* 5) Pembelian: kode kecil #id */
body.purchase-page .purchase-code,
.purchase-page .purchase-code,
.purchase-history-card .purchase-code,
.purchase-list-table .purchase-code,
.purchase-id-cell .purchase-code {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(71, 85, 105, .88) !important;
    box-shadow: none !important;
}
body.purchase-page .purchase-number,
.purchase-page .purchase-number,
.purchase-history-card .purchase-number {
    color: #bfdbfe !important;
}

/* 6) Pagination bar pada halaman list */
body.purchase-page .pagination-bar,
body.supplier-page .pagination-bar,
body.inventory-page .pagination-bar,
body.product-page .pagination-bar,
body.sales-page .pagination-bar,
body.customer-page .pagination-bar,
body.receivable-page .pagination-bar,
body.sales-return-page .pagination-bar,
.purchase-page .pagination-bar,
.supplier-page .pagination-bar,
.inventory-page .pagination-bar,
.product-page .pagination-bar,
.card > .pagination-bar,
.panel > .pagination-bar,
.table-card > .pagination-bar {
    background: rgba(15, 23, 42, .96) !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(51, 65, 85, .92) !important;
    border-color: rgba(51, 65, 85, .92) !important;
}
body.purchase-page .pagination-bar .muted,
body.supplier-page .pagination-bar .muted,
body.inventory-page .pagination-bar .muted,
body.product-page .pagination-bar .muted,
.pagination-bar .muted {
    color: #94a3b8 !important;
}
body.purchase-page .pagination-bar .page-link,
body.supplier-page .pagination-bar .page-link,
body.inventory-page .pagination-bar .page-link,
body.product-page .pagination-bar .page-link,
.pagination-bar .page-link {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(71, 85, 105, .88) !important;
}
body.purchase-page .pagination-bar .page-link.active-page,
body.supplier-page .pagination-bar .page-link.active-page,
.role-permission-page .permission-item,
body.role-permission-page .permission-item,
body.admin-system-page.role-permission-page .permission-item,
.user-permission-page .permission-item,
body.user-permission-page .permission-item,
body.admin-system-page.user-permission-page .permission-item {
    background: rgba(15, 23, 42, .96) !important;
    border-color: rgba(51, 65, 85, .92) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .20) !important;
}

.role-permission-page .permission-item:hover,
body.role-permission-page .permission-item:hover,
body.admin-system-page.role-permission-page .permission-item:hover,
.user-permission-page .permission-item:hover,
body.user-permission-page .permission-item:hover,
body.admin-system-page.user-permission-page .permission-item:hover {
    background: rgba(30, 41, 59, .96) !important;
    border-color: rgba(96, 165, 250, .36) !important;
}

.role-permission-page .permission-name,
body.role-permission-page .permission-name,
.user-permission-page .permission-name,
body.user-permission-page .permission-name {
    color: #f8fafc !important;
}

.role-permission-page .permission-code,
body.role-permission-page .permission-code,
.user-permission-page .permission-code,
body.user-permission-page .permission-code {
    color: #94a3b8 !important;
}

.role-permission-page .module-title,
body.role-permission-page .module-title,
.user-permission-page .module-title,
body.user-permission-page .module-title {
    background: linear-gradient(135deg, #1e3a8a, #0f766e) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(96, 165, 250, .34) !important;
}

.role-permission-page .permission-item input[type="checkbox"],
body.role-permission-page .permission-item input[type="checkbox"],
.user-permission-page .permission-item input[type="checkbox"],
body.user-permission-page .permission-item input[type="checkbox"] {
    accent-color: #60a5fa !important;
}

.role-permission-page .permission-item input[type="radio"],
body.role-permission-page .permission-item input[type="radio"],
.user-permission-page .permission-item input[type="radio"],
body.user-permission-page .permission-item input[type="radio"] {
    accent-color: #60a5fa !important;
}

.role-permission-page .hint,
body.role-permission-page .hint,
.user-permission-page .hint,
body.user-permission-page .hint {
    color: #94a3b8 !important;
}

.role-permission-page select,
.role-permission-page input,
body.role-permission-page select,
body.role-permission-page input,
.user-permission-page select,
.user-permission-page input,
body.user-permission-page select,
body.user-permission-page input {
    background: rgba(15, 23, 42, .96) !important;
    color: #f8fafc !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

.role-permission-page .card h3,
body.role-permission-page .card h3,
.user-permission-page .card h3,
body.user-permission-page .card h3 {
    color: #f8fafc !important;
}

.role-permission-page .role-default,
body.role-permission-page .role-default,
.user-permission-page .role-default,
body.user-permission-page .role-default {
    color: #94a3b8 !important;
}

.role-permission-page .role-default .allow,
body.role-permission-page .role-default .allow,
.user-permission-page .role-default .allow,
body.user-permission-page .role-default .allow {
    color: #34d399 !important;
}

.role-permission-page .role-default .deny,
body.role-permission-page .role-default .deny,
.user-permission-page .role-default .deny,
body.user-permission-page .role-default .deny {
    color: #f87171 !important;
}

.role-permission-page .permission-grid,
body.role-permission-page .permission-grid,
.user-permission-page .permission-grid,
body.user-permission-page .permission-grid {
    gap: 10px !important;
}

.user-permission-page .radio-row label,
body.user-permission-page .radio-row label {
    background: rgba(15, 23, 42, .96) !important;
    border-color: rgba(71, 85, 105, .88) !important;
    color: #cbd5e1 !important;
}

.user-permission-page .radio-row label:has(input[type="radio"]:checked),
body.user-permission-page .radio-row label:has(input[type="radio"]:checked) {
    border-color: rgba(96, 165, 250, .64) !important;
    background: rgba(30, 41, 59, .98) !important;
    color: #f8fafc !important;
}
body.inventory-page .pagination-bar .page-link.active-page,
body.product-page .pagination-bar .page-link.active-page,
.pagination-bar .page-link.active-page {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}
body.purchase-page .pagination-bar .page-link.btn-disabled,
body.supplier-page .pagination-bar .page-link.btn-disabled,
body.inventory-page .pagination-bar .page-link.btn-disabled,
body.product-page .pagination-bar .page-link.btn-disabled,
.pagination-bar .page-link.btn-disabled {
    background: rgba(51, 65, 85, .78) !important;
    color: #94a3b8 !important;
}

/* User create/edit - branch access cards */
body.user-create-page .branch-item,
body.user-edit-page .branch-item,
body.user-tambah-page .branch-item {
    background: rgba(15, 23, 42, .96) !important;
    border-color: rgba(71, 85, 105, .88) !important;
    color: #e2e8f0 !important;
}

body.user-create-page .branch-item span,
body.user-edit-page .branch-item span,
body.user-tambah-page .branch-item span {
    color: #e2e8f0 !important;
}

body.user-create-page .branch-item input[type="checkbox"],
body.user-edit-page .branch-item input[type="checkbox"],
body.user-tambah-page .branch-item input[type="checkbox"] {
    accent-color: #60a5fa !important;
}

body.user-create-page .branch-item:has(input[type="checkbox"]:checked),
body.user-edit-page .branch-item:has(input[type="checkbox"]:checked),
body.user-tambah-page .branch-item:has(input[type="checkbox"]:checked) {
    background: rgba(30, 41, 59, .98) !important;
    border-color: rgba(96, 165, 250, .64) !important;
}

/* Safety net: admin pages option cards must never fall back to white in dark mode */
body.admin-system-page .branch-list label,
body.admin-system-page .branch-item,
body.admin-system-page .radio-row label,
body.admin-system-page .permission-item {
    background: rgba(15, 23, 42, .96) !important;
    border-color: rgba(71, 85, 105, .88) !important;
    color: #e2e8f0 !important;
}

body.admin-system-page .branch-list label span,
body.admin-system-page .branch-item span,
body.admin-system-page .radio-row label span,
body.admin-system-page .permission-item span,
body.admin-system-page .permission-item small,
body.admin-system-page .permission-item strong {
    color: #e2e8f0 !important;
}

body.admin-system-page .branch-list label:has(input:checked),
body.admin-system-page .branch-item:has(input:checked),
body.admin-system-page .radio-row label:has(input:checked),
body.admin-system-page .permission-item:has(input:checked) {
    background: rgba(30, 41, 59, .98) !important;
    border-color: rgba(96, 165, 250, .64) !important;
}

body.admin-system-page .branch-list input[type="checkbox"],
body.admin-system-page .branch-item input[type="checkbox"],
body.admin-system-page .radio-row input[type="radio"],
body.admin-system-page .permission-item input[type="checkbox"] {
    accent-color: #60a5fa !important;
}

/* 7) Jika ada card kecil lain di detail yang masih memakai inline/utility background putih */
body.detail-page .bg-white,
body.detail-page .bg-light,
body.detail-page [style*="background:#fff"],
body.detail-page [style*="background: #fff"],
body.detail-page [style*="background:#ffffff"],
body.detail-page [style*="background: #ffffff"],
body.finance-page.detail-page .bg-white,
body.finance-page.detail-page .bg-light,
body.finance-page.detail-page [style*="background:#fff"],
body.finance-page.detail-page [style*="background: #fff"] {
    background: rgba(17, 24, 39, .94) !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

@media print {
    body.price-level-page .price-retail-summary,
    .price-level-page .price-retail-summary,
    body.detail-page .info-box,
    body.sales-detail-page .summary,
    body.transaction-detail-page .summary,
    body.detail-page .summary,
    body.purchase-page .pagination-bar,
    body.supplier-page .pagination-bar,
    body.inventory-page .pagination-bar,
    body.product-page .pagination-bar {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }
}


/* Tahap 24B.2G - Kasir cart table fix
   Fix spesifik untuk halaman kasir: tabel keranjang masih putih karena pos.css
   punya selector cart table yang kuat. Tidak mengubah layout/logic. */

.pos-page .cart-panel,
body .cart-panel {
    background: rgba(15, 23, 42, .96) !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

.pos-page .cart-table-wrap,
body .cart-table-wrap {
    background: rgba(15, 23, 42, .96) !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

/* Header dan cell tabel keranjang */
.pos-page .cart-table,
.pos-page .cart-table thead,
.pos-page .cart-table tbody,
body .cart-table,
body .cart-table thead,
body .cart-table tbody {
    background: transparent !important;
    color: #f8fafc !important;
}

.pos-page .cart-table th,
body .cart-table th {
    background: rgba(30, 41, 59, .98) !important;
    color: #dbeafe !important;
    border-bottom-color: rgba(71, 85, 105, .95) !important;
}

.pos-page .cart-table td,
body .cart-table td {
    background: rgba(15, 23, 42, .82) !important;
    color: #f8fafc !important;
    border-bottom-color: rgba(51, 65, 85, .78) !important;
}

.pos-page .cart-table tbody tr:nth-child(even) td,
body .cart-table tbody tr:nth-child(even) td {
    background: rgba(17, 24, 39, .88) !important;
}

.pos-page .cart-table tbody tr:hover td,
body .cart-table tbody tr:hover td {
    background: rgba(37, 99, 235, .14) !important;
    color: #ffffff !important;
}

/* Teks dalam tabel keranjang */
.pos-page .cart-table td *,
body .cart-table td * {
    color: inherit;
}

.pos-page .cart-table .item-name,
.pos-page .cart-table .cart-item-name,
.pos-page .cart-table strong,
.pos-page .cart-table b,
body .cart-table .item-name,
body .cart-table .cart-item-name,
body .cart-table strong,
body .cart-table b {
    color: #f8fafc !important;
}

.pos-page .cart-table .item-meta,
.pos-page .cart-table .muted,
.pos-page .cart-table small,
body .cart-table .item-meta,
body .cart-table .muted,
body .cart-table small {
    color: #94a3b8 !important;
}

/* SKU badge kecil seperti BRG-111 / TEH001 */
.pos-page .cart-table .sku-code,
.pos-page .cart-table .barcode-code,
.pos-page .cart-table .code,
.pos-page .cart-table .badge,
.pos-page .cart-table code,
.pos-page .cart-table td span[class*="sku"],
.pos-page .cart-table td span[class*="code"],
.pos-page .cart-table td small[class*="sku"],
.pos-page .cart-table td small[class*="code"],
body .cart-table .sku-code,
body .cart-table .barcode-code,
body .cart-table .code,
body .cart-table code,
body .cart-table td span[class*="sku"],
body .cart-table td span[class*="code"],
body .cart-table td small[class*="sku"],
body .cart-table td small[class*="code"] {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(71, 85, 105, .88) !important;
    box-shadow: none !important;
}

/* Input qty/diskon di keranjang */
.pos-page .cart-table input,
.pos-page .cart-table select,
body .cart-table input,
body .cart-table select {
    background: rgba(15, 23, 42, .98) !important;
    color: #f8fafc !important;
    border-color: rgba(71, 85, 105, .88) !important;
    -webkit-text-fill-color: #f8fafc !important;
}

.pos-page .cart-table input:focus,
.pos-page .cart-table select:focus,
body .cart-table input:focus,
body .cart-table select:focus {
    background: rgba(2, 6, 23, .98) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, .22) !important;
}

/* Tombol hapus kecil X */
.pos-page .cart-table .remove-btn,
.pos-page .cart-table button.remove-btn,
body .cart-table .remove-btn,
body .cart-table button.remove-btn {
    background: rgba(244, 63, 94, .85) !important;
    color: #ffffff !important;
    border-color: rgba(251, 113, 133, .45) !important;
}

/* Jika row/cell punya style inline background putih */
.pos-page .cart-table tr[style*="background"],
.pos-page .cart-table td[style*="background"],
.pos-page .cart-table th[style*="background"],
.pos-page .cart-table span[style*="background"],
body .cart-table tr[style*="background"],
body .cart-table td[style*="background"],
body .cart-table th[style*="background"],
body .cart-table span[style*="background"] {
    background: rgba(15, 23, 42, .88) !important;
    color: #f8fafc !important;
}

/* Print tetap terang */
@media print {
    .cart-panel,
    .cart-table-wrap,
    .cart-table,
    .cart-table th,
    .cart-table td {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }
}


/* Tahap 24B.2H - Final Dark Sweep
   Tujuan: menutup elemen putih/pucat yang masih lolos dari CSS lama.
   Ini tetap override visual saja, tidak menyentuh logic.
   Patch lebih luas, tapi dibatasi ke komponen umum: info/detail/summary/card/table/button/progress. */

:root {
    --dm-bg: #0b1220;
    --dm-panel: #111827;
    --dm-panel-2: #162033;
    --dm-panel-3: #1e293b;
    --dm-border: rgba(51, 65, 85, .92);
    --dm-border-2: rgba(71, 85, 105, .88);
    --dm-text: #f8fafc;
    --dm-text-2: #dbeafe;
    --dm-muted: #94a3b8;
    --dm-blue: #60a5fa;
    --dm-blue-soft: rgba(37, 99, 235, .18);
    --dm-green-soft: rgba(16, 185, 129, .18);
    --dm-red-soft: rgba(244, 63, 94, .18);
    --dm-yellow-soft: rgba(245, 158, 11, .18);
}

/* 1) Semua card/box detail yang biasa masih putih */
.info-box,
.info-card,
.info-panel,
.detail-box,
.detail-card,
.detail-panel,
.detail-info,
.transaction-info,
.invoice-info,
.customer-info,
.account-info,
.cash-account-info,
.branch-info,
.summary-box,
.summary-card,
.summary-panel,
.total-box,
.total-card,
.total-panel,
.payment-box,
.payment-card,
.payment-panel,
.receivable-box,
.receivable-card,
.receivable-panel,
.debt-box,
.debt-card,
.debt-panel,
.point-box,
.point-card,
.stat-box,
.stat-card,
.metric-box,
.metric-card,
.mini-card,
.card-white,
.box-white,
.panel-white,
.white-card,
.white-box,
.white-panel {
    background: linear-gradient(180deg, var(--dm-panel-2) 0%, var(--dm-panel) 100%) !important;
    background-color: var(--dm-panel) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
}

.info-box *,
.info-card *,
.info-panel *,
.detail-box *,
.detail-card *,
.detail-panel *,
.detail-info *,
.transaction-info *,
.invoice-info *,
.customer-info *,
.account-info *,
.cash-account-info *,
.branch-info *,
.summary-box *,
.summary-card *,
.summary-panel *,
.total-box *,
.total-card *,
.total-panel *,
.payment-box *,
.payment-card *,
.payment-panel *,
.receivable-box *,
.receivable-card *,
.receivable-panel *,
.debt-box *,
.debt-card *,
.debt-panel *,
.point-box *,
.point-card *,
.stat-box *,
.stat-card *,
.metric-box *,
.metric-card *,
.mini-card *,
.card-white *,
.box-white *,
.panel-white *,
.white-card *,
.white-box *,
.white-panel * {
    color: inherit;
}

/* label kecil di card detail */
.info-box small,
.info-card small,
.info-panel small,
.detail-box small,
.detail-card small,
.detail-panel small,
.summary-box small,
.summary-card small,
.summary-panel small,
.total-box small,
.total-card small,
.total-panel small,
.payment-box small,
.payment-card small,
.payment-panel small,
.receivable-box small,
.receivable-card small,
.receivable-panel small,
.debt-box small,
.debt-card small,
.debt-panel small,
.point-box small,
.point-card small,
.stat-box small,
.stat-card small,
.metric-box small,
.metric-card small,
.mini-card small,
.info-label,
.detail-label,
.summary-label,
.total-label,
.payment-label,
.receivable-label,
.debt-label,
.point-label,
.card-label,
.box-label,
.muted,
.text-muted {
    color: var(--dm-muted) !important;
}

/* nilai/angka penting di card detail */
.info-box strong,
.info-card strong,
.info-panel strong,
.detail-box strong,
.detail-card strong,
.detail-panel strong,
.summary-box strong,
.summary-card strong,
.summary-panel strong,
.total-box strong,
.total-card strong,
.total-panel strong,
.payment-box strong,
.payment-card strong,
.payment-panel strong,
.receivable-box strong,
.receivable-card strong,
.receivable-panel strong,
.debt-box strong,
.debt-card strong,
.debt-panel strong,
.point-box strong,
.point-card strong,
.stat-box strong,
.stat-card strong,
.metric-box strong,
.metric-card strong,
.mini-card strong,
.info-value,
.detail-value,
.summary-value,
.total-value,
.payment-value,
.receivable-value,
.debt-value,
.point-value,
.card-value,
.box-value {
    color: var(--dm-text) !important;
}

/* 2) Detail transaksi: grid info atas yang masih putih */
.detail-page .info-box,
.detail-page .detail-box,
.detail-page .summary-box,
.detail-page .total-box,
.transaction-detail-page .info-box,
.transaction-detail-page .detail-box,
.transaction-detail-page .summary-box,
.transaction-detail-page .total-box,
.sales-detail-page .info-box,
.sales-detail-page .detail-box,
.sales-detail-page .summary-box,
.sales-detail-page .total-box,
body[class*="detail"] .info-box,
body[class*="detail"] .detail-box,
body[class*="detail"] .summary-box,
body[class*="detail"] .total-box {
    background: linear-gradient(180deg, var(--dm-panel-2), var(--dm-panel)) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* 3) Summary total putih di detail transaksi */
.transaction-summary,
.invoice-summary,
.receipt-summary,
.payment-summary,
.total-summary,
.grand-summary,
.summary-receipt,
.summary-total,
.detail-total,
.detail-summary,
.sales-summary,
.receivable-summary {
    background: linear-gradient(180deg, var(--dm-panel-2), var(--dm-panel)) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
}

.transaction-summary *,
.invoice-summary *,
.receipt-summary *,
.payment-summary *,
.total-summary *,
.grand-summary *,
.summary-receipt *,
.summary-total *,
.detail-total *,
.detail-summary *,
.sales-summary *,
.receivable-summary * {
    color: inherit !important;
}

/* 4) Piutang progress bar yang masih hijau/merah sangat pucat di card */
.progress,
.progress-bar-wrap,
.receivable-progress,
.debt-progress,
.piutang-progress {
    background: rgba(15, 23, 42, .96) !important;
    border: 1px solid var(--dm-border-2) !important;
    color: var(--dm-text) !important;
}

.progress-bar,
.progress-paid,
.paid-progress,
.receivable-paid,
.piutang-paid,
.progress-success {
    background: linear-gradient(90deg, #059669, #10b981) !important;
    color: #ffffff !important;
}

.progress-unpaid,
.remaining-progress,
.receivable-remaining,
.piutang-remaining,
.progress-danger {
    background: linear-gradient(90deg, #b91c1c, #ef4444) !important;
    color: #ffffff !important;
}

.progress-warning,
.progress-partial {
    background: linear-gradient(90deg, #b45309, #f59e0b) !important;
    color: #ffffff !important;
}

/* Jika progress dibuat sebagai div/span inline background hijau/merah pucat */
.receivable-card [style*="background"],
.receivable-panel [style*="background"],
.debt-card [style*="background"],
.debt-panel [style*="background"],
.piutang-card [style*="background"],
.piutang-panel [style*="background"],
.transaction-summary [style*="background"],
.invoice-summary [style*="background"],
.payment-summary [style*="background"],
.total-summary [style*="background"],
.detail-summary [style*="background"] {
    color: #ffffff !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

/* 5) Tombol Detail/disabled/action yang putih pucat */
.btn-detail,
.detail-btn,
.action-detail,
.table-action,
.action-btn,
.btn-action,
.btn-view,
.view-btn,
.btn-open,
.open-btn,
.btn-disabled,
.btn:disabled,
button:disabled,
a.btn-disabled,
.page-link.btn-disabled,
table .btn,
table button,
.table-card .btn,
.table-card button,
.table-responsive .btn,
.table-responsive button {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border-color: rgba(71, 85, 105, .88) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #dbeafe !important;
    box-shadow: none !important;
}

.btn-detail:hover,
.detail-btn:hover,
.action-detail:hover,
.table-action:hover,
.action-btn:hover,
.btn-action:hover,
.btn-view:hover,
.view-btn:hover,
.btn-open:hover,
.open-btn:hover,
table .btn:hover,
table button:hover,
.table-card .btn:hover,
.table-card button:hover,
.table-responsive .btn:hover,
.table-responsive button:hover {
    background: rgba(37, 99, 235, .22) !important;
    color: #ffffff !important;
    border-color: rgba(96, 165, 250, .45) !important;
}

/* Tombol aksi bahaya/sukses jangan ikut jadi abu-abu */
.btn-danger,
button.btn-danger,
a.btn-danger,
.table-card .btn-danger,
.table-responsive .btn-danger {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
}

.btn-success,
button.btn-success,
a.btn-success,
.table-card .btn-success,
.table-responsive .btn-success {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary,
.table-card .btn-primary,
.table-responsive .btn-primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* 6) Badge status yang masih terlalu pucat */
.badge,
.status-badge,
.label-status,
.status,
[class*="status-"] {
    opacity: 1 !important;
}

.badge.paid,
.status-paid,
.badge.lunas,
.status-lunas,
.badge-success,
.status-success {
    background: var(--dm-green-soft) !important;
    color: #86efac !important;
    border-color: rgba(52, 211, 153, .30) !important;
}

.badge.unpaid,
.status-unpaid,
.badge.belum,
.status-belum,
.badge-danger,
.status-danger {
    background: var(--dm-red-soft) !important;
    color: #fda4af !important;
    border-color: rgba(251, 113, 133, .30) !important;
}

.badge.partial,
.status-partial,
.badge-warning,
.status-warning {
    background: var(--dm-yellow-soft) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, .30) !important;
}

.badge-info,
.status-info {
    background: rgba(14, 165, 233, .18) !important;
    color: #bae6fd !important;
    border-color: rgba(56, 189, 248, .30) !important;
}

/* 7) Elemen style inline putih/pucat di dalam card/panel/table/detail.
   Ini bagian yang menutup sisa-sisa CSS lama yang pakai background putih. */
.card [style*="background:#fff"],
.card [style*="background: #fff"],
.card [style*="background:#ffffff"],
.card [style*="background: #ffffff"],
.card [style*="background:rgb(255"],
.card [style*="background: rgb(255"],
.card [style*="background-color:#fff"],
.card [style*="background-color: #fff"],
.card [style*="background-color:#ffffff"],
.card [style*="background-color: #ffffff"],
.panel [style*="background:#fff"],
.panel [style*="background: #fff"],
.panel [style*="background:#ffffff"],
.panel [style*="background: #ffffff"],
.panel [style*="background:rgb(255"],
.panel [style*="background: rgb(255"],
.panel [style*="background-color:#fff"],
.panel [style*="background-color: #fff"],
.panel [style*="background-color:#ffffff"],
.panel [style*="background-color: #ffffff"],
.table-card [style*="background:#fff"],
.table-card [style*="background: #fff"],
.table-card [style*="background:#ffffff"],
.table-card [style*="background: #ffffff"],
.table-card [style*="background:rgb(255"],
.table-card [style*="background: rgb(255"],
.table-card [style*="background-color:#fff"],
.table-card [style*="background-color: #fff"],
.table-card [style*="background-color:#ffffff"],
.table-card [style*="background-color: #ffffff"],
[class*="detail"] [style*="background:#fff"],
[class*="detail"] [style*="background: #fff"],
[class*="detail"] [style*="background:#ffffff"],
[class*="detail"] [style*="background: #ffffff"],
[class*="detail"] [style*="background-color:#fff"],
[class*="detail"] [style*="background-color: #fff"],
[class*="detail"] [style*="background-color:#ffffff"],
[class*="detail"] [style*="background-color: #ffffff"] {
    background: rgba(17, 24, 39, .96) !important;
    background-color: rgba(17, 24, 39, .96) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

/* 8) Utility putih yang masih lolos */
.bg-white,
.bg-light,
.table-light,
.card.bg-white,
.panel.bg-white,
.box.bg-white,
div.bg-white,
section.bg-white,
.bg-body,
.bg-body-tertiary {
    background: rgba(17, 24, 39, .96) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

.text-dark,
.text-black,
.text-body {
    color: var(--dm-text) !important;
}

/* 9) Khusus riwayat transaksi: tombol detail di kolom aksi */
.sales-history-table td:last-child a,
.sales-history-table td:last-child button,
.transaction-table td:last-child a,
.transaction-table td:last-child button,
.report-table td:last-child a,
.report-table td:last-child button,
table td:last-child .btn,
table td:last-child button {
    background: rgba(30, 41, 59, .96) !important;
    color: #dbeafe !important;
    border-color: rgba(71, 85, 105, .88) !important;
}

.sales-history-table td:last-child a:hover,
.sales-history-table td:last-child button:hover,
.transaction-table td:last-child a:hover,
.transaction-table td:last-child button:hover,
.report-table td:last-child a:hover,
.report-table td:last-child button:hover,
table td:last-child .btn:hover,
table td:last-child button:hover {
    background: rgba(37, 99, 235, .22) !important;
    color: #ffffff !important;
    border-color: rgba(96, 165, 250, .45) !important;
}

/* 10) Print tetap terang */
@media print {
    .info-box,
    .info-card,
    .info-panel,
    .detail-box,
    .detail-card,
    .detail-panel,
    .summary-box,
    .summary-card,
    .summary-panel,
    .total-box,
    .total-card,
    .total-panel,
    .payment-box,
    .payment-card,
    .payment-panel,
    .receivable-box,
    .receivable-card,
    .receivable-panel,
    .debt-box,
    .debt-card,
    .debt-panel,
    .point-box,
    .point-card,
    .stat-box,
    .stat-card,
    .metric-box,
    .metric-card,
    .mini-card,
    .transaction-summary,
    .invoice-summary,
    .receipt-summary,
    .payment-summary,
    .total-summary,
    .grand-summary,
    .summary-receipt,
    .summary-total,
    .detail-total,
    .detail-summary,
    .sales-summary,
    .receivable-summary {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }
}


/* Tahap 24B.2I - Receivable detail/progress fix
   Fix khusus untuk bagian Informasi Piutang di transaksi_detail.php:
   bar "Sudah Dibayar" dan "Sisa Piutang" masih terlalu terang/pucat.
   Target dibuat spesifik supaya tidak mengacaukan layout lain. */

/* Container box informasi piutang */
.transaction-detail-page .receivable-summary,
.transaction-detail-page .receivable-card,
.transaction-detail-page .receivable-box,
.transaction-detail-page .piutang-summary,
.transaction-detail-page .piutang-card,
.transaction-detail-page .piutang-box,
.sales-detail-page .receivable-summary,
.sales-detail-page .receivable-card,
.sales-detail-page .receivable-box,
.sales-detail-page .piutang-summary,
.sales-detail-page .piutang-card,
.sales-detail-page .piutang-box,
.detail-page .receivable-summary,
.detail-page .receivable-card,
.detail-page .receivable-box,
.detail-page .piutang-summary,
.detail-page .piutang-card,
.detail-page .piutang-box {
    background: linear-gradient(180deg, #162033 0%, #111827 100%) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(51, 65, 85, .94) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

/* Kalau halaman memakai generic summary/card untuk box kanan piutang */
.transaction-detail-page .card:has(.receivable-row),
.transaction-detail-page .card:has(.piutang-row),
.transaction-detail-page .card:has(.progress-row),
.transaction-detail-page .card:has([class*="paid"]),
.transaction-detail-page .card:has([class*="remaining"]),
.detail-page .card:has(.receivable-row),
.detail-page .card:has(.piutang-row),
.detail-page .card:has(.progress-row) {
    background: linear-gradient(180deg, #162033 0%, #111827 100%) !important;
    color: #f8fafc !important;
    border-color: rgba(51, 65, 85, .94) !important;
}

/* Bar terang hijau/merah/pink di piutang */
.transaction-detail-page .receivable-summary [style*="background"],
.transaction-detail-page .receivable-card [style*="background"],
.transaction-detail-page .receivable-box [style*="background"],
.transaction-detail-page .piutang-summary [style*="background"],
.transaction-detail-page .piutang-card [style*="background"],
.transaction-detail-page .piutang-box [style*="background"],
.transaction-detail-page .progress [style*="background"],
.transaction-detail-page [class*="receivable"] [style*="background"],
.transaction-detail-page [class*="piutang"] [style*="background"],
.transaction-detail-page [class*="paid"] [style*="background"],
.transaction-detail-page [class*="remaining"] [style*="background"],
.detail-page [class*="receivable"] [style*="background"],
.detail-page [class*="piutang"] [style*="background"] {
    color: #ffffff !important;
    border-color: rgba(71, 85, 105, .70) !important;
}

/* Class kemungkinan untuk bar sudah bayar */
.transaction-detail-page .paid-row,
.transaction-detail-page .paid-bar,
.transaction-detail-page .paid-progress,
.transaction-detail-page .receivable-paid,
.transaction-detail-page .piutang-paid,
.transaction-detail-page .already-paid,
.transaction-detail-page [class*="paid"],
.detail-page .paid-row,
.detail-page .paid-bar,
.detail-page .paid-progress,
.detail-page .receivable-paid,
.detail-page .piutang-paid,
.detail-page .already-paid {
    background: linear-gradient(90deg, rgba(5, 150, 105, .92), rgba(16, 185, 129, .92)) !important;
    color: #ffffff !important;
    border-color: rgba(52, 211, 153, .45) !important;
}

/* Class kemungkinan untuk bar sisa piutang */
.transaction-detail-page .remaining-row,
.transaction-detail-page .remaining-bar,
.transaction-detail-page .remaining-progress,
.transaction-detail-page .receivable-remaining,
.transaction-detail-page .piutang-remaining,
.transaction-detail-page .unpaid-row,
.transaction-detail-page .unpaid-bar,
.transaction-detail-page [class*="remaining"],
.detail-page .remaining-row,
.detail-page .remaining-bar,
.detail-page .remaining-progress,
.detail-page .receivable-remaining,
.detail-page .piutang-remaining,
.detail-page .unpaid-row,
.detail-page .unpaid-bar {
    background: linear-gradient(90deg, rgba(190, 18, 60, .92), rgba(244, 63, 94, .92)) !important;
    color: #ffffff !important;
    border-color: rgba(251, 113, 133, .45) !important;
}

/* Fallback paling spesifik: bar pill kecil di dalam box piutang/detail */
.transaction-detail-page .receivable-summary span,
.transaction-detail-page .receivable-summary div,
.transaction-detail-page .receivable-card span,
.transaction-detail-page .receivable-card div,
.transaction-detail-page .piutang-summary span,
.transaction-detail-page .piutang-summary div,
.transaction-detail-page .piutang-card span,
.transaction-detail-page .piutang-card div {
    color: inherit;
}

.transaction-detail-page .receivable-summary span[style*="background"],
.transaction-detail-page .receivable-summary div[style*="background"],
.transaction-detail-page .receivable-card span[style*="background"],
.transaction-detail-page .receivable-card div[style*="background"],
.transaction-detail-page .piutang-summary span[style*="background"],
.transaction-detail_page .piutang-summary div[style*="background"],
.transaction-detail-page .piutang-card span[style*="background"],
.transaction-detail-page .piutang-card div[style*="background"] {
    color: #ffffff !important;
}

/* Jika tidak ada class piutang, target berdasarkan section Informasi Piutang:
   elemen ber-radius besar yang ada di kanan bawah card detail. */
.transaction-detail-page .card div[style*="border-radius"][style*="background"],
.transaction-detail-page .card span[style*="border-radius"][style*="background"] {
    color: #ffffff !important;
}

/* Jangan ubah print */
@media print {
    .transaction-detail-page .receivable-summary,
    .transaction-detail-page .receivable-card,
    .transaction-detail-page .receivable-box,
    .transaction-detail-page .piutang-summary,
    .transaction-detail-page .piutang-card,
    .transaction-detail-page .piutang-box {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
    }
}


/* Tahap 24B.2J - Exact summary row fix
   Fix langsung untuk transaksi_detail.php:
   .summary .summary-row.success dan .summary .summary-row.danger masih pucat.
   Selector dibuat sangat spesifik dan diletakkan paling akhir agar menang. */

/* Container summary kanan di Informasi Piutang */
body.transaction-detail-page .card .summary,
body.sales-detail-page.transaction-detail-page .card .summary,
body.detail-page.transaction-detail-page .card .summary,
.transaction-detail-page .summary {
    background: rgba(15, 23, 42, .96) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(51, 65, 85, .94) !important;
    box-shadow: none !important;
}

/* Row normal */
body.transaction-detail-page .card .summary .summary-row,
body.sales-detail-page.transaction-detail-page .card .summary .summary-row,
body.detail-page.transaction-detail-page .card .summary .summary-row,
.transaction-detail-page .summary .summary-row {
    background: transparent !important;
    background-color: transparent !important;
    color: #f8fafc !important;
    border-bottom-color: rgba(51, 65, 85, .72) !important;
}

/* Sudah Dibayar */
body.transaction-detail-page .card .summary .summary-row.success,
body.sales-detail-page.transaction-detail-page .card .summary .summary-row.success,
body.detail-page.transaction-detail-page .card .summary .summary-row.success,
.transaction-detail-page .summary .summary-row.success,
.transaction-detail-page div.summary div.summary-row.success {
    background: linear-gradient(90deg, rgba(5, 150, 105, .95), rgba(16, 185, 129, .95)) !important;
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid rgba(52, 211, 153, .45) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    margin: 8px 0 !important;
}

/* Sisa Piutang */
body.transaction-detail-page .card .summary .summary-row.danger,
body.sales-detail-page.transaction-detail-page .card .summary .summary-row.danger,
body.detail-page.transaction-detail-page .card .summary .summary-row.danger,
.transaction-detail-page .summary .summary-row.danger,
.transaction-detail-page div.summary div.summary-row.danger {
    background: linear-gradient(90deg, rgba(190, 18, 60, .95), rgba(244, 63, 94, .95)) !important;
    background-color: #be123c !important;
    color: #ffffff !important;
    border: 1px solid rgba(251, 113, 133, .45) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    margin: 8px 0 !important;
}

/* Pastikan teks di dalam row tidak ikut warna muted lama */
body.transaction-detail-page .card .summary .summary-row.success *,
body.transaction-detail-page .card .summary .summary-row.danger *,
body.sales-detail-page.transaction-detail-page .card .summary .summary-row.success *,
body.sales-detail-page.transaction-detail-page .card .summary .summary-row.danger *,
body.detail-page.transaction-detail-page .card .summary .summary-row.success *,
body.detail-page.transaction-detail-page .card .summary .summary-row.danger *,
.transaction-detail-page .summary .summary-row.success *,
.transaction-detail-page .summary .summary-row.danger * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Row status tetap dark */
body.transaction-detail-page .card .summary .summary-row:not(.success):not(.danger),
.transaction-detail-page .summary .summary-row:not(.success):not(.danger) {
    color: #f8fafc !important;
}

body.transaction-detail-page .card .summary .summary-row:not(.success):not(.danger) span,
.transaction-detail-page .summary .summary-row:not(.success):not(.danger) span {
    color: #dbeafe !important;
}

body.transaction-detail-page .card .summary .summary-row:not(.success):not(.danger) strong,
.transaction-detail-page .summary .summary-row:not(.success):not(.danger) strong {
    color: #ffffff !important;
}

/* Kalau CSS lama pakai background-image atau filter */
.transaction-detail-page .summary .summary-row.success,
.transaction-detail-page .summary .summary-row.danger {
    filter: none !important;
    opacity: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Print tetap normal */
@media print {
    body.transaction-detail-page .card .summary,
    body.transaction-detail-page .card .summary .summary-row,
    body.transaction-detail-page .card .summary .summary-row.success,
    body.transaction-detail-page .card .summary .summary-row.danger {
        background: #ffffff !important;
        color: #111827 !important;
        border-color: #e5e7eb !important;
        box-shadow: none !important;
    }

    body.transaction-detail-page .card .summary .summary-row * {
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
    }
}


/* Tahap 24B2K5 - Dark mode kasir: nama pelanggan harus jelas terbaca. */
.top-customer-name,
#selectedCustomerName {
    color: var(--dark-text-strong) !important;
}


/* Tahap 24B2K8 - Dark mode fix untuk purchase_order_create.php.
   Area input item PO sempat putih karena style purchasing.css lebih spesifik. */
body.po-professional-page .po-fast-entry,
body.po-professional-page .po-selected-product,
body.po-professional-page .po-cart-table-wrap,
body.po-professional-page .po-table-toolbar,
body.po-professional-page .po-summary-card,
body.po-professional-page .po-builder-card,
body.po-professional-page .po-doc-card {
    background: rgba(15, 23, 42, .82) !important;
    border-color: rgba(51, 65, 85, .92) !important;
    color: var(--dark-text-strong) !important;
}

body.po-professional-page .po-fast-entry label,
body.po-professional-page .po-card-heading h3,
body.po-professional-page .po-doc-header h3,
body.po-professional-page .po-summary-card h3,
body.po-professional-page .po-table-toolbar strong,
body.po-professional-page .po-product-preview-main strong,
body.po-professional-page .po-summary-list strong,
body.po-professional-page .po-professional-page .po-product-cell strong,
body.po-professional-page .po-product-cell strong {
    color: var(--dark-text-strong) !important;
}

body.po-professional-page .po-section-kicker,
body.po-professional-page .po-card-heading p,
body.po-professional-page .po-product-preview-main span,
body.po-professional-page .po-product-preview-meta,
body.po-professional-page .po-table-toolbar span,
body.po-professional-page .po-summary-list span,
body.po-professional-page .po-product-cell span,
body.po-professional-page .muted {
    color: var(--dark-text-muted) !important;
}

body.po-professional-page .po-fast-entry input,
body.po-professional-page .po-fast-entry select,
body.po-professional-page .po-fast-entry textarea,
body.po-professional-page .po-table-number,
body.po-professional-page .po-note-input,
body.po-professional-page #productSearchInput,
body.po-professional-page #itemQtyInput,
body.po-professional-page #itemCostInput,
body.po-professional-page #itemNotesInput {
    background: rgba(15, 23, 42, .96) !important;
    border-color: rgba(71, 85, 105, .88) !important;
    color: var(--dark-text-strong) !important;
}

body.po-professional-page .po-fast-entry input::placeholder,
body.po-professional-page .po-fast-entry textarea::placeholder,
body.po-professional-page #productSearchInput::placeholder,
body.po-professional-page #itemNotesInput::placeholder {
    color: #94a3b8 !important;
}

body.po-professional-page .po-product-results,
body.po-professional-page .po-result-item,
body.po-professional-page .po-result-empty {
    background: rgba(15, 23, 42, .98) !important;
    border-color: rgba(51, 65, 85, .92) !important;
    color: var(--dark-text-strong) !important;
}

body.po-professional-page .po-result-item:hover,
body.po-professional-page .po-result-item.active,
body.po-professional-page .po-result-item.po-result-item-compact.active {
    background: rgba(37, 99, 235, .20) !important;
    border-color: rgba(96, 165, 250, .36) !important;
}

body.po-professional-page .po-result-name,
body.po-professional-page .po-result-price {
    color: var(--dark-text-strong) !important;
}

body.po-professional-page .po-result-meta {
    color: var(--dark-text-muted) !important;
}

body.po-professional-page .po-professional-page .po-cart-table th,
body.po-professional-page .po-cart-table th {
    background: rgba(30, 41, 59, .96) !important;
    color: var(--dark-text-strong) !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

body.po-professional-page .po-cart-table td,
body.po-professional-page .empty-cell {
    background: rgba(15, 23, 42, .82) !important;
    color: var(--dark-text-strong) !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

body.po-professional-page .po-summary-list > div {
    border-bottom-color: rgba(148, 163, 184, .45) !important;
}

body.po-professional-page .po-grand-total-box {
    background: rgba(2, 6, 23, .92) !important;
    border: 1px solid rgba(51, 65, 85, .92) !important;
    color: #ffffff !important;
}


/* Tahap 24B2K9 - Dark mode fix untuk pembelian_multi.php.
   Status pembayaran segmented dan subtotal item masih memakai style light. */
body.purchase-direct-page .purchase-segmented {
    background: rgba(15, 23, 42, .96) !important;
    border: 1px solid rgba(51, 65, 85, .92) !important;
}

body.purchase-direct-page .purchase-segmented span {
    color: var(--dark-text-muted) !important;
    background: transparent !important;
}

body.purchase-direct-page .purchase-segmented input:checked + span {
    background: rgba(30, 41, 59, .96) !important;
    color: var(--dark-text-strong) !important;
    box-shadow: 0 6px 14px rgba(2, 6, 23, .22) !important;
}

body.purchase-direct-page .purchase-item-subtotal,
body.purchase-direct-page .purchase-direct-subtotal {
    background: rgba(15, 23, 42, .96) !important;
    border: 1px solid rgba(51, 65, 85, .92) !important;
}

body.purchase-direct-page .purchase-item-subtotal span,
body.purchase-direct-page .purchase-direct-subtotal span {
    color: var(--dark-text-muted) !important;
}

body.purchase-direct-page .purchase-item-subtotal strong,
body.purchase-direct-page .purchase-direct-subtotal strong {
    color: var(--dark-text-strong) !important;
}


/* Tahap 24B2K11 - User dropdown dark mode readability. */
.user-dropdown-header {
    color: #94a3b8 !important;
    border-bottom-color: rgba(51, 65, 85, .95) !important;
}

.user-dropdown-header strong {
    color: #ffffff !important;
}


/* Tahap 24B2K14 - Print Nota toggle dark mode readability. */
.print-toggle {
    background: rgba(30, 41, 59, .96) !important;
    border-color: rgba(96, 165, 250, .32) !important;
    color: #dbeafe !important;
}

.print-toggle span {
    color: #dbeafe !important;
}


/* Tahap 24B2J20 - Header action controls dark mode readability. */
.header-action-toggle,
.header-action-btn {
    background: rgba(30, 41, 59, .96) !important;
    border-color: rgba(96, 165, 250, .28) !important;
    color: #dbeafe !important;
}

.header-action-toggle span,
.header-action-btn small {
    color: #dbeafe !important;
}

.header-action-toggle:hover,
.header-action-btn:hover {
    background: rgba(37, 99, 235, .22) !important;
    color: #ffffff !important;
}


/* Tahap 24B2J22 - Bottom shortcut bar dark mode. */
.pos-bottom-shortcuts {
    background: rgba(15, 23, 42, .78) !important;
    border-color: rgba(51, 65, 85, .92) !important;
}

.pos-bottom-shortcuts .kbd {
    background: rgba(30, 41, 59, .92) !important;
    border-color: rgba(71, 85, 105, .88) !important;
    color: #e2e8f0 !important;
}

.pos-bottom-shortcuts .kbd span {
    color: #94a3b8 !important;
}

body.dark-mode .search-result-active,
body.dark-mode .search-result-active:hover,
.dark-mode .search-result-active,
.dark-mode .search-result-active:hover {
    background: linear-gradient(180deg, rgba(30, 64, 175, .42), rgba(30, 41, 59, .98)) !important;
    border-color: rgba(96, 165, 250, .9) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .16) !important;
}

body.dark-mode .search-result-active .result-title,
.dark-mode .search-result-active .result-title {
    color: #bfdbfe !important;
}

/* Kasir keyboard popup polish - stronger active row visibility in dark mode */
body.dark-mode #modalProductResults .search-result.search-result-active,
body.dark-mode #modalProductResults .search-result.search-result-active:hover,
body.dark-mode #modalCustomerResults .search-result.search-result-active,
body.dark-mode #modalCustomerResults .search-result.search-result-active:hover,
.dark-mode #modalProductResults .search-result.search-result-active,
.dark-mode #modalProductResults .search-result.search-result-active:hover,
.dark-mode #modalCustomerResults .search-result.search-result-active,
.dark-mode #modalCustomerResults .search-result.search-result-active:hover {
    position: relative;
    background: linear-gradient(135deg, rgba(37, 99, 235, .98), rgba(29, 78, 216, .92)) !important;
    border-color: #bfdbfe !important;
    color: #ffffff !important;
    box-shadow:
        0 0 0 3px rgba(191, 219, 254, .35),
        0 14px 28px rgba(2, 6, 23, .45) !important;
    transform: translateY(-1px);
}

body.dark-mode #modalProductResults .search-result.search-result-active::before,
body.dark-mode #modalCustomerResults .search-result.search-result-active::before,
.dark-mode #modalProductResults .search-result.search-result-active::before,
.dark-mode #modalCustomerResults .search-result.search-result-active::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 5px;
    border-radius: 999px;
    background: #facc15;
    box-shadow: 0 0 14px rgba(250, 204, 21, .8);
}

body.dark-mode #modalProductResults .search-result.search-result-active .result-title,
body.dark-mode #modalCustomerResults .search-result.search-result-active .result-title,
.dark-mode #modalProductResults .search-result.search-result-active .result-title,
.dark-mode #modalCustomerResults .search-result.search-result-active .result-title {
    color: #ffffff !important;
    font-weight: 950 !important;
}

body.dark-mode #modalProductResults .search-result.search-result-active .result-meta,
body.dark-mode #modalCustomerResults .search-result.search-result-active .result-meta,
.dark-mode #modalProductResults .search-result.search-result-active .result-meta,
.dark-mode #modalCustomerResults .search-result.search-result-active .result-meta {
    color: #e0f2fe !important;
}

body.dark-mode #modalProductResults .search-result.search-result-active .btn,
body.dark-mode #modalCustomerResults .search-result.search-result-active .btn,
.dark-mode #modalProductResults .search-result.search-result-active .btn,
.dark-mode #modalCustomerResults .search-result.search-result-active .btn {
    background: #facc15 !important;
    border-color: #fde68a !important;
    color: #111827 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .35) !important;
}

/* Report center */
body.dark-mode.report-center-page .report-center-sidebar,
body.dark-mode.report-center-page .report-center-content,
.dark-mode.report-center-page .report-center-sidebar,
.dark-mode.report-center-page .report-center-content {
    background: #111827 !important;
    border-color: rgba(148, 163, 184, .28) !important;
    color: #e5e7eb !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35) !important;
}

body.dark-mode.report-center-page .report-category,
.dark-mode.report-center-page .report-category {
    color: #e5e7eb !important;
}

body.dark-mode.report-center-page .report-category:hover,
body.dark-mode.report-center-page .report-category.active,
.dark-mode.report-center-page .report-category:hover,
.dark-mode.report-center-page .report-category.active {
    background: #172033 !important;
    border-color: rgba(96, 165, 250, .42) !important;
}

body.dark-mode.report-center-page .report-category strong,
body.dark-mode.report-center-page .report-row-main small,
body.dark-mode.report-center-page .report-center-total span,
body.dark-mode.report-center-page .report-empty-state,
.dark-mode.report-center-page .report-category strong,
.dark-mode.report-center-page .report-row-main small,
.dark-mode.report-center-page .report-center-total span,
.dark-mode.report-center-page .report-empty-state {
    color: #94a3b8 !important;
}

body.dark-mode.report-center-page .report-center-toolbar,
body.dark-mode.report-center-page .report-list-row,
.dark-mode.report-center-page .report-center-toolbar,
.dark-mode.report-center-page .report-list-row {
    border-color: rgba(148, 163, 184, .22) !important;
}

body.dark-mode.report-center-page .report-list-row,
.dark-mode.report-center-page .report-list-row {
    color: #e5e7eb !important;
}

body.dark-mode.report-center-page .report-list-row:hover,
.dark-mode.report-center-page .report-list-row:hover {
    background: #0f172a !important;
}

body.dark-mode.report-center-page .report-center-total,
body.dark-mode.report-center-page .report-badge,
.dark-mode.report-center-page .report-center-total,
.dark-mode.report-center-page .report-badge {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, .28) !important;
    color: #e5e7eb !important;
}

body.dark-mode.report-center-page .report-badge.priority,
.dark-mode.report-center-page .report-badge.priority {
    background: rgba(14, 116, 144, .22) !important;
    border-color: rgba(125, 211, 252, .35) !important;
    color: #bae6fd !important;
}

/* Report & finance pages: dark-mode variable bridge.
   finance-report.css memakai token --finance-* sendiri, jadi perlu dioverride saat file dark-mode aktif. */
:root {
    --finance-bg: #0b1220;
    --finance-card: #111827;
    --finance-border: #273449;
    --finance-border-soft: #1f2a3d;
    --finance-muted: #94a3b8;
    --finance-text: #e5edf7;
    --finance-primary: #60a5fa;
    --finance-soft: #162033;
    --finance-green: #34d399;
    --finance-red: #fb7185;
    --finance-orange: #fbbf24;
    --finance-blue: #93c5fd;
    --finance-shadow: 0 18px 44px rgba(0, 0, 0, .36);
}

body.finance-report-page,
body.report-page {
    background: var(--app-bg) !important;
    color: var(--finance-text) !important;
}

body.finance-report-page .card,
body.report-page .card,
body.finance-report-page .summary-card,
body.report-page .summary-card,
body.finance-report-page .filter-card,
body.report-page .filter-card,
body.finance-report-page .wide-card,
body.report-page .wide-card,
body.finance-report-page .report-center-sidebar,
body.finance-report-page .report-center-content,
body.finance-report-page .report-operation-row,
body.finance-report-page .report-center-total {
    background: var(--finance-card) !important;
    border-color: var(--finance-border) !important;
    color: var(--finance-text) !important;
}

body.finance-report-page table,
body.report-page table,
body.finance-report-page .table-responsive,
body.report-page .table-responsive {
    background: var(--finance-card) !important;
    border-color: var(--finance-border) !important;
    color: var(--finance-text) !important;
}

body.finance-report-page th,
body.report-page th {
    background: var(--finance-soft) !important;
    border-color: var(--finance-border) !important;
    color: #dbeafe !important;
}

body.finance-report-page td,
body.report-page td {
    background: var(--finance-card) !important;
    border-color: var(--finance-border-soft) !important;
    color: var(--finance-text) !important;
}

body.finance-report-page tbody tr:hover td,
body.report-page tbody tr:hover td,
body.finance-report-page .report-list-row:hover,
body.finance-report-page .report-operation-row:hover {
    background: #0f172a !important;
}

body.finance-report-page input,
body.finance-report-page select,
body.finance-report-page textarea,
body.report-page input,
body.report-page select,
body.report-page textarea {
    background: #0f172a !important;
    border-color: var(--finance-border) !important;
    color: var(--finance-text) !important;
}

body.finance-report-page input::placeholder,
body.report-page input::placeholder,
body.finance-report-page textarea::placeholder,
body.report-page textarea::placeholder {
    color: #64748b !important;
}

body.finance-report-page label,
body.report-page label,
body.finance-report-page .summary-title,
body.report-page .summary-title,
body.finance-report-page .report-row-main small,
body.finance-report-page .report-operation-row small,
body.finance-report-page .report-section-heading p,
body.finance-report-page .report-operation-row em,
body.finance-report-page .report-center-total span,
body.finance-report-page .report-category strong,
body.finance-report-page .report-empty-state,
body.report-page .muted,
body.finance-report-page .muted {
    color: var(--finance-muted) !important;
}

body.finance-report-page .report-list-row,
body.finance-report-page .report-center-toolbar,
body.finance-report-page .report-related-panel {
    border-color: var(--finance-border) !important;
}

body.finance-report-page .report-category,
body.finance-report-page .report-list-row,
body.finance-report-page .report-operation-row {
    color: var(--finance-text) !important;
}

body.finance-report-page .report-category:hover,
body.finance-report-page .report-category.active {
    background: #172033 !important;
    border-color: rgba(96, 165, 250, .42) !important;
}

body.finance-report-page .report-badge,
body.finance-report-page .report-section-heading span {
    background: #0f172a !important;
    border-color: var(--finance-border) !important;
    color: #dbeafe !important;
}

body.finance-report-page .report-badge.priority {
    background: rgba(14, 116, 144, .22) !important;
    border-color: rgba(125, 211, 252, .35) !important;
    color: #bae6fd !important;
}

body.finance-report-page .btn-secondary,
body.report-page .btn-secondary,
body.finance-report-page .report-page-nav .btn,
body.report-page .report-page-nav .btn {
    background: #162033 !important;
    border: 1px solid var(--finance-border) !important;
    color: #e5edf7 !important;
}

body.finance-report-page .btn-secondary:hover,
body.report-page .btn-secondary:hover,
body.finance-report-page .report-page-nav .btn:hover,
body.report-page .report-page-nav .btn:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

body.finance-report-page .empty,
body.report-page .empty {
    background: #0f172a !important;
    border-color: var(--finance-border) !important;
    color: var(--finance-muted) !important;
}