/* QDS app layout */
:root {
  --qds-sidebar-w: 260px;
  --qds-sidebar-bg: #1e293b;
  --qds-sidebar-fg: #94a3b8;
  --qds-sidebar-highlight-bg: #334155;
  --qds-sidebar-highlight-fg: #ffffff;
  --qds-content-bg: #f8f9fa;
  --qds-content-fg: #212529;
  --qds-card-bg: #ffffff;
  --qds-card-fg: #212529;
  --qds-card-border: #dee2e6;
  --qds-btn-bg: #0d6efd;
  --qds-btn-fg: #ffffff;
}

/* Flex child boleh menyusut agar overflow/scroll di dalam kartu bekerja */
.min-h-0 {
  min-height: 0 !important;
}

body.qds-app-body {
  background-color: var(--qds-content-bg) !important;
  color: var(--qds-content-fg);
}

/* Warna sekunder Bootstrap mengikuti tema (teks konten di luar kartu) */
body.qds-app-body main {
  --bs-secondary-color: color-mix(in srgb, var(--qds-content-fg) 56%, var(--qds-content-bg));
}

body.qds-app-body main .text-muted {
  color: color-mix(in srgb, var(--qds-content-fg) 58%, var(--qds-content-bg)) !important;
}

body.qds-app-body main .text-secondary {
  color: color-mix(in srgb, var(--qds-content-fg) 72%, var(--qds-content-bg)) !important;
}

/* Elemen Bootstrap `.card` (seluruh app termasuk halaman login) */
body.qds-app-body .card {
  --bs-card-bg: var(--qds-card-bg);
  --bs-secondary-color: color-mix(in srgb, var(--qds-card-fg) 56%, var(--qds-card-bg));
  background-color: var(--qds-card-bg);
  color: var(--qds-card-fg);
  border: 1px solid var(--qds-card-border) !important;
  border-radius: var(--bs-card-border-radius);
}

body.qds-app-body .card > .card-header {
  background-color: var(--qds-card-bg) !important;
  color: inherit;
  border-bottom-color: var(--qds-card-border) !important;
}

body.qds-app-body .card > .card-footer {
  background-color: var(--qds-card-bg) !important;
  color: inherit;
  border-top-color: var(--qds-card-border) !important;
}

/* Sudut dalam mengikuti radius kartu (pakai variabel Bootstrap; inherit sering tidak terpakai) */
body.qds-app-body .card > .card-header:first-child {
  border-top-left-radius: var(--bs-card-border-radius);
  border-top-right-radius: var(--bs-card-border-radius);
}

body.qds-app-body .card > .card-footer:last-child {
  border-bottom-left-radius: var(--bs-card-border-radius);
  border-bottom-right-radius: var(--bs-card-border-radius);
}

body.qds-app-body .card > .card-body:first-child {
  border-top-left-radius: var(--bs-card-border-radius);
  border-top-right-radius: var(--bs-card-border-radius);
}

body.qds-app-body .card > .card-body:last-child {
  border-bottom-left-radius: var(--bs-card-border-radius);
  border-bottom-right-radius: var(--bs-card-border-radius);
}

/*
 * Daftar penerima / daging masuk / scan kupon: footer & toolbar di dalam .card-body.p-0,
 * bukan anak langsung .card — radius harus di blok pertama & .card-footer bersarang.
 */
body.qds-app-body .card > .card-body.p-0 > :first-child {
  border-top-left-radius: var(--bs-card-border-radius);
  border-top-right-radius: var(--bs-card-border-radius);
}

body.qds-app-body .card > .card-body.p-0 > :last-child {
  border-bottom-left-radius: var(--bs-card-border-radius);
  border-bottom-right-radius: var(--bs-card-border-radius);
}

/* Di dalam kartu: muted / sekunder mengikuti warna teks kartu */
body.qds-app-body main .card .text-muted {
  color: color-mix(in srgb, var(--qds-card-fg) 58%, var(--qds-card-bg)) !important;
}

body.qds-app-body main .card .text-secondary {
  color: color-mix(in srgb, var(--qds-card-fg) 72%, var(--qds-card-bg)) !important;
}

body.qds-app-body main .card code {
  color: color-mix(in srgb, var(--qds-card-fg) 82%, var(--qds-btn-bg)) !important;
}

/*
 * Latar & kontrol di dalam kartu: utility Bootstrap sering memakai putih tetap (!important).
 */
body.qds-app-body main .card .bg-white {
  background-color: var(--qds-card-bg) !important;
}

/* Detail penerima: kotak QR tetap putih (scan tetap terbaca di tema gelap/kustom) */
body.qds-app-body main .pn-view-qr-surface {
  background-color: #ffffff !important;
}

/*
 * Halaman detail penerima: tombol primer outline (Bagikan) mengikuti tema tombol.
 */
body.qds-app-body main .pn-penerima-view-page .btn-outline-primary {
  color: var(--qds-btn-bg);
  border-color: var(--qds-btn-bg);
}

body.qds-app-body main .pn-penerima-view-page .btn-outline-primary:hover,
body.qds-app-body main .pn-penerima-view-page .btn-outline-primary:focus {
  background-color: var(--qds-btn-bg);
  border-color: var(--qds-btn-bg);
  color: var(--qds-btn-fg);
}

body.qds-app-body main .pn-penerima-view-page .btn-outline-primary:active {
  filter: brightness(0.92);
}

body.qds-app-body main .card .bg-light {
  background-color: color-mix(in srgb, var(--qds-card-fg) 9%, var(--qds-card-bg)) !important;
}

body.qds-app-body main .card .form-control:not([type="color"]),
body.qds-app-body main .card .form-select {
  background-color: color-mix(in srgb, var(--qds-card-fg) 4%, var(--qds-card-bg));
  border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

body.qds-app-body main .card .form-control:focus:not([type="color"]),
body.qds-app-body main .card .form-select:focus {
  background-color: color-mix(in srgb, var(--qds-card-fg) 4%, var(--qds-card-bg));
  border-color: color-mix(in srgb, var(--qds-btn-bg) 50%, var(--qds-card-border));
  color: var(--qds-card-fg);
}

/* Panah select & ikon kalender di form kartu: warna dari Setel tema (chevron via --qds-select-chevron-bg di theme.js) */
body.qds-app-body main .card .form-select:not([multiple]):not([size]) {
  background-image: var(--qds-select-chevron-bg, var(--bs-form-select-bg-img));
}

body.qds-app-body main .card input[type="datetime-local"] {
  accent-color: var(--qds-btn-bg);
  color: var(--qds-card-fg);
}

body.qds-app-body main .card input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.92;
  cursor: pointer;
  filter: var(--qds-datetime-calendar-indicator-filter, none);
}

body.qds-app-body main .card .input-group-text {
  background-color: color-mix(in srgb, var(--qds-card-fg) 8%, var(--qds-card-bg));
  border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

body.qds-app-body main .card .pagination .page-link {
  background-color: var(--qds-card-bg);
  border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

body.qds-app-body main .card .pagination .page-link:hover {
  background-color: color-mix(in srgb, var(--qds-card-fg) 12%, var(--qds-card-bg));
  border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

body.qds-app-body main .card .pagination .page-item.active .page-link {
  background-color: var(--qds-btn-bg);
  border-color: var(--qds-btn-bg);
  color: var(--qds-btn-fg);
}

body.qds-app-body main .card .pagination .page-item.disabled .page-link {
  background-color: var(--qds-card-bg);
  border-color: var(--qds-card-border);
  color: color-mix(in srgb, var(--qds-card-fg) 45%, var(--qds-card-bg));
}

/* Tombol outline sekunder di konten utama (Salin, Tutup, Kembali, dll.) mengikuti tema kartu — Batal memakai .btn-qds-batal */
body.qds-app-body main .btn-outline-secondary {
  color: var(--qds-card-fg);
  border-color: var(--qds-card-border);
}

body.qds-app-body main .btn-outline-secondary:hover,
body.qds-app-body main .btn-outline-secondary:focus {
  background-color: color-mix(in srgb, var(--qds-card-fg) 12%, var(--qds-card-bg));
  border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

body.qds-app-body main .btn-outline-secondary:active {
  filter: brightness(0.96);
}

/* Tombol Hapus (btn-outline-danger): latar merah solid, teks putih */
body.qds-app-body .btn-outline-danger {
  color: #fff !important;
  background-color: #dc3545 !important;
  border-color: #b02a37 !important;
}

body.qds-app-body .btn-outline-danger:hover,
body.qds-app-body .btn-outline-danger:focus {
  color: #fff !important;
  background-color: #bb2d3b !important;
  border-color: #9a2530 !important;
}

body.qds-app-body .btn-outline-danger:active {
  color: #fff !important;
  background-color: #a52834 !important;
  border-color: #842029 !important;
}

/* Tombol Batal: abu-abu solid, teks hitam (hanya elemen dengan .btn-qds-batal) */
body.qds-app-body .btn.btn-qds-batal {
  color: #111 !important;
  background-color: #ced4da !important;
  border-color: #adb5bd !important;
}

body.qds-app-body .btn.btn-qds-batal:hover,
body.qds-app-body .btn.btn-qds-batal:focus {
  color: #111 !important;
  background-color: #adb5bd !important;
  border-color: #868e96 !important;
}

body.qds-app-body .btn.btn-qds-batal:active {
  color: #111 !important;
  background-color: #868e96 !important;
  border-color: #6c757d !important;
}

/* Utility garis Bootstrap di area utama mengikuti border tema kartu */
body.qds-app-body main .border,
body.qds-app-body main .border-top,
body.qds-app-body main .border-bottom,
body.qds-app-body main .border-start,
body.qds-app-body main .border-end,
body.qds-app-body main .border-secondary {
  border-color: var(--qds-card-border) !important;
}

body.qds-app-body main .card hr {
  border-top-color: var(--qds-card-border);
  opacity: 1;
}

/* Teks/link aksen Bootstrap di dalam kartu mengikuti warna teks kartu tema */
body.qds-app-body main .card .text-primary,
body.qds-app-body main .card .link-primary {
  color: var(--qds-card-fg) !important;
}

body.qds-app-body main .card a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.page-link) {
  color: var(--qds-card-fg);
}

body.qds-app-body main .card a:not(.btn):not(.badge):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.page-link):hover {
  color: color-mix(in srgb, var(--qds-btn-bg) 50%, var(--qds-card-fg));
}

body.qds-app-body .modal-content {
  background-color: var(--qds-card-bg);
  color: var(--qds-card-fg);
  border-color: var(--qds-card-border);
}

body.qds-app-body .modal-header,
body.qds-app-body .modal-footer {
  background-color: var(--qds-card-bg);
  border-color: var(--qds-card-border);
}

body.qds-app-body .modal-body {
  background-color: var(--qds-card-bg);
  color: var(--qds-card-fg);
}

body.qds-app-body .modal-content .modal-title {
  color: var(--qds-card-fg);
}

body.qds-app-body .modal-content .text-muted {
  color: color-mix(in srgb, var(--qds-card-fg) 58%, var(--qds-card-bg)) !important;
}

/* Area pratinjau kamera Scan QR mengikuti permukaan kartu tema */
body.qds-app-body #modalScanQr .sk-scan-qr-reader {
  background-color: color-mix(in srgb, var(--qds-card-fg) 10%, var(--qds-card-bg)) !important;
  border: 1px solid var(--qds-card-border);
}

body.qds-app-body .modal-content hr {
  border-top-color: var(--qds-card-border);
  opacity: 1;
}

/*
 * Tabel di <main> mengikuti tema Card (teks, garis, header/footer .table-light,
 * hover striping, tfoot.bg-light).
 */
main .table {
  --bs-table-color: var(--qds-card-fg);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--qds-card-border);
  --bs-table-striped-bg: color-mix(in srgb, var(--qds-card-fg) 6%, var(--qds-card-bg));
  --bs-table-striped-color: var(--qds-card-fg);
  --bs-table-active-bg: color-mix(in srgb, var(--qds-card-fg) 14%, var(--qds-card-bg));
  --bs-table-active-color: var(--qds-card-fg);
  --bs-table-hover-bg: color-mix(in srgb, var(--qds-card-fg) 14%, var(--qds-card-bg));
  --bs-table-hover-color: var(--qds-card-fg);
  color: var(--qds-card-fg);
}

main .table > :not(caption) > * > * {
  border-bottom-color: var(--qds-card-border);
}

main .table :where(thead.table-light, tfoot.table-light, tbody > tr.table-light) > * {
  --bs-table-bg: color-mix(in srgb, var(--qds-card-fg) 10%, var(--qds-card-bg));
  --bs-table-color: var(--qds-card-fg);
  --bs-table-border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

main .table thead.table-light.sticky-top {
  box-shadow: inset 0 -1px 0 var(--qds-card-border);
}

main .table tfoot.bg-light tr > th,
main .table tfoot.bg-light tr > td {
  --bs-table-bg: color-mix(in srgb, var(--qds-card-fg) 10%, var(--qds-card-bg));
  background-color: color-mix(in srgb, var(--qds-card-fg) 10%, var(--qds-card-bg)) !important;
  color: var(--qds-card-fg) !important;
  border-color: var(--qds-card-border) !important;
}

main .table thead.border-bottom > tr > *,
main .table tfoot.border-top > tr > * {
  border-color: var(--qds-card-border) !important;
}

/* Kotak warna di halaman setel tema */
.theme-color-swatch.form-control-color {
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0.15rem;
  cursor: pointer;
}

.sidebar {
  width: var(--qds-sidebar-w);
  background-color: var(--qds-sidebar-bg) !important;
  color: var(--qds-sidebar-highlight-fg);
}

.offcanvas.qds-theme-drawer {
  background-color: var(--qds-sidebar-bg) !important;
  color: var(--qds-sidebar-highlight-fg);
}

.sidebar .nav-link,
.offcanvas.qds-theme-drawer .nav-link {
  color: var(--qds-sidebar-fg) !important;
}

.sidebar .nav-link.active,
.offcanvas.qds-theme-drawer .nav-link.active,
.sidebar .nav-link.fw-semibold.active,
.offcanvas.qds-theme-drawer .nav-link.fw-semibold.active {
  background-color: var(--qds-sidebar-highlight-bg) !important;
  color: var(--qds-sidebar-highlight-fg) !important;
}

.sidebar .small.text-white-50,
.sidebar .text-white-50,
.offcanvas.qds-theme-drawer .small.text-white-50,
.offcanvas.qds-theme-drawer .text-white-50 {
  color: var(--qds-sidebar-fg) !important;
}

.sidebar .border-secondary,
.offcanvas.qds-theme-drawer .border-secondary {
  border-color: rgba(148, 163, 184, 0.35) !important;
}

.sidebar .qds-dark-switch .form-check-label,
.offcanvas.qds-theme-drawer .qds-dark-switch .form-check-label {
  color: var(--qds-sidebar-fg);
}

.sidebar .qds-dark-switch .form-check-input,
.offcanvas.qds-theme-drawer .qds-dark-switch .form-check-input {
  background-color: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.45);
}

.sidebar .qds-dark-switch .form-check-input:checked,
.offcanvas.qds-theme-drawer .qds-dark-switch .form-check-input:checked {
  background-color: var(--qds-btn-bg);
  border-color: var(--qds-btn-bg);
}

/* Header mobile: latar dan teks sama seperti sidebar (bukan area kartu). */
.qds-topbar {
  background-color: var(--qds-sidebar-bg) !important;
  border-color: color-mix(in srgb, var(--qds-sidebar-fg) 32%, var(--qds-sidebar-bg)) !important;
  color: var(--qds-sidebar-highlight-fg);
}

.qds-topbar .fw-semibold {
  color: var(--qds-sidebar-highlight-fg);
}

/*
 * Dark mode: utility Bootstrap (bg-white, bg-light, form, modal, pagination)
 * memakai warna tetap + !important sehingga harus ditimpa secara eksplisit.
 */
html.qds-dark .bg-white {
  background-color: var(--qds-card-bg) !important;
}

html.qds-dark .bg-light {
  background-color: color-mix(in srgb, var(--qds-card-fg) 9%, var(--qds-card-bg)) !important;
}

html.qds-dark .text-bg-light {
  background-color: color-mix(in srgb, var(--qds-card-fg) 14%, var(--qds-card-bg)) !important;
  color: var(--qds-card-fg) !important;
}

/* Badge peran di sidebar tetap kontras di atas latar sidebar gelap */
html.qds-dark .sidebar .badge.text-bg-light {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.qds-dark main .border,
html.qds-dark main .border-top,
html.qds-dark main .border-bottom,
html.qds-dark main .border-start,
html.qds-dark main .border-end {
  border-color: var(--qds-card-border) !important;
}

html.qds-dark .form-control,
html.qds-dark .form-select,
html.qds-dark textarea.form-control {
  background-color: var(--qds-card-bg);
  border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

html.qds-dark .form-control:focus,
html.qds-dark .form-select:focus,
html.qds-dark textarea.form-control:focus {
  background-color: var(--qds-card-bg);
  border-color: color-mix(in srgb, var(--qds-btn-bg) 65%, var(--qds-card-border));
  color: var(--qds-card-fg);
}

html.qds-dark .form-control::placeholder,
html.qds-dark textarea.form-control::placeholder {
  color: color-mix(in srgb, var(--qds-card-fg) 48%, transparent);
}

html.qds-dark .input-group-text {
  background-color: color-mix(in srgb, var(--qds-card-fg) 10%, var(--qds-card-bg));
  border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

html.qds-dark .form-check-input {
  background-color: var(--qds-card-bg);
  border-color: var(--qds-card-border);
}

html.qds-dark .form-check-input:checked {
  background-color: var(--qds-btn-bg);
  border-color: var(--qds-btn-bg);
}

html.qds-dark .form-check-input:focus {
  border-color: var(--qds-btn-bg);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--qds-btn-bg) 35%, transparent);
}

html.qds-dark .modal-content {
  background-color: var(--qds-card-bg);
  color: var(--qds-card-fg);
  border-color: var(--qds-card-border);
}

html.qds-dark .modal-header,
html.qds-dark .modal-footer {
  border-color: var(--qds-card-border);
}

html.qds-dark .modal-content .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: 0.65;
}

html.qds-dark .dropdown-menu {
  background-color: var(--qds-card-bg);
  border-color: var(--qds-card-border);
}

html.qds-dark .dropdown-item {
  color: var(--qds-card-fg);
}

html.qds-dark .dropdown-item:hover,
html.qds-dark .dropdown-item:focus {
  background-color: color-mix(in srgb, var(--qds-card-fg) 12%, var(--qds-card-bg));
  color: var(--qds-card-fg);
}

html.qds-dark .dropdown-divider {
  border-top-color: var(--qds-card-border);
}

html.qds-dark .pagination .page-link {
  background-color: var(--qds-card-bg);
  border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

html.qds-dark .pagination .page-link:hover {
  background-color: color-mix(in srgb, var(--qds-card-fg) 14%, var(--qds-card-bg));
  border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

html.qds-dark .pagination .page-item.active .page-link {
  background-color: var(--qds-btn-bg);
  border-color: var(--qds-btn-bg);
  color: var(--qds-btn-fg);
}

html.qds-dark .pagination .page-item.disabled .page-link {
  background-color: var(--qds-card-bg);
  border-color: var(--qds-card-border);
  color: color-mix(in srgb, var(--qds-card-fg) 42%, var(--qds-card-bg));
}

html.qds-dark .btn-outline-secondary {
  color: var(--qds-card-fg);
  border-color: var(--qds-card-border);
}

html.qds-dark .btn-outline-secondary:hover,
html.qds-dark .btn-outline-secondary:focus {
  background-color: color-mix(in srgb, var(--qds-card-fg) 14%, var(--qds-card-bg));
  border-color: var(--qds-card-border);
  color: var(--qds-card-fg);
}

html.qds-dark .btn-outline-danger {
  color: #fff !important;
  background-color: #dc3545 !important;
  border-color: #b02a37 !important;
}

html.qds-dark .btn-outline-danger:hover,
html.qds-dark .btn-outline-danger:focus {
  color: #fff !important;
  background-color: #bb2d3b !important;
  border-color: #9a2530 !important;
}

html.qds-dark .btn-outline-danger:active {
  color: #fff !important;
  background-color: #a52834 !important;
  border-color: #842029 !important;
}

html.qds-dark .btn.btn-qds-batal {
  color: #111 !important;
  background-color: #ced4da !important;
  border-color: #adb5bd !important;
}

html.qds-dark .btn.btn-qds-batal:hover,
html.qds-dark .btn.btn-qds-batal:focus {
  color: #111 !important;
  background-color: #adb5bd !important;
  border-color: #868e96 !important;
}

html.qds-dark .btn.btn-qds-batal:active {
  color: #111 !important;
  background-color: #868e96 !important;
  border-color: #6c757d !important;
}

html.qds-dark .btn-outline-primary {
  color: var(--qds-btn-bg);
  border-color: var(--qds-btn-bg);
}

html.qds-dark .btn-outline-primary:hover,
html.qds-dark .btn-outline-primary:focus {
  background-color: var(--qds-btn-bg);
  border-color: var(--qds-btn-bg);
  color: var(--qds-btn-fg);
}

/* Area placeholder QR / blok semi-transparan gelap di atas kartu terang */
html.qds-dark .bg-dark.bg-opacity-10 {
  background-color: color-mix(in srgb, var(--qds-card-fg) 14%, var(--qds-card-bg)) !important;
}

.btn-primary {
  background-color: var(--qds-btn-bg) !important;
  border-color: var(--qds-btn-bg) !important;
  color: var(--qds-btn-fg) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(0.92);
  color: var(--qds-btn-fg) !important;
}

.btn-primary:active {
  filter: brightness(0.85);
}

.btn-icon-menu::before {
  content: "☰";
  font-size: 1.1rem;
  line-height: 1;
}

.table-modern {
  font-size: 0.9rem;
}

.card-stat {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
}

.stok-dl dt {
  font-weight: 500;
  padding-top: 0.15rem;
  color: color-mix(in srgb, var(--qds-card-fg) 58%, var(--qds-card-bg));
}

.stok-dl dd {
  margin-bottom: 0.4rem;
  color: var(--qds-card-fg);
}

/* Dashboard rekap: nilai prioritas (spesifik > utilitas .text-muted di beberapa konteks tabel) */
body.qds-app-body main .dashboard-dual-card .table tbody td.dash-rekap-prio {
  color: color-mix(in srgb, var(--qds-card-fg) 58%, var(--qds-card-bg)) !important;
}

.dashboard-dual-card {
  --bs-card-border-radius: 0.75rem;
  border-radius: var(--bs-card-border-radius);
}

.dashboard-page-root {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dashboard-cards-row {
  flex: 0 0 auto;
  min-height: 0;
}

@media (min-width: 992px) {
  .dashboard-rekap-scroll {
    max-height: min(360px, 38vh);
  }

  .dashboard-audit-scroll {
    max-height: min(280px, 32vh);
  }
}

.dashboard-rekap-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dashboard-rekap-scroll thead.sticky-top {
  z-index: 2;
}

.dashboard-audit-scroll {
  max-height: min(320px, 45vh);
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dashboard-audit-scroll .btn {
  white-space: nowrap;
}

.dashboard-audit-scroll thead.sticky-top {
  z-index: 2;
}

@media (max-width: 991.98px) {
  body.qds-app-body .app-shell > .flex-grow-1,
  body.qds-app-body main,
  body.qds-app-body main > .container-fluid {
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-page-root {
    width: 100%;
    min-width: 0;
  }

  /* Baris Bootstrap di container tanpa padding — cegah kartu melebar keluar layar */
  .dashboard-page-root > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  .dashboard-page-root > .row > [class*="col-"] {
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .dashboard-dual-card {
    min-width: 0;
    max-width: 100%;
  }

  .dashboard-dual-card .card-header,
  .dashboard-dual-card .card-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .dashboard-dual-card .card-body .row:not(.stok-dl) {
    --bs-gutter-x: 0.75rem;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
  }

  .dashboard-dual-card .stok-dl {
    --bs-gutter-x: 0.75rem;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
  }

  .dashboard-rekap-scroll,
  .dashboard-audit-scroll {
    overflow-x: auto;
    max-width: 100%;
  }
}

html.qds-dark .dashboard-dual-card .bg-light {
  background-color: color-mix(in srgb, var(--qds-card-bg) 88%, #fff 12%) !important;
}

/* Navigasi bawah mobile (floating tab bar) */
:root {
  --qds-mobile-tabbar-offset: 5.25rem;
}

@media (max-width: 991.98px) {
  body.qds-has-mobile-tabbar .app-shell > .flex-grow-1 > main {
    padding-bottom: calc(
      1rem + var(--qds-mobile-tabbar-offset) + env(safe-area-inset-bottom, 0px)
    ) !important;
  }
}

.qds-mobile-tabbar {
  position: fixed;
  left: 0.65rem;
  right: 0.65rem;
  bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  pointer-events: none;
}

.qds-mobile-tabbar-inner {
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 0.15rem;
  padding: 0.4rem 0.35rem 0.35rem;
  border-radius: 1rem;
  background-color: var(--qds-card-bg);
  color: var(--qds-card-fg);
  border: 1px solid var(--qds-card-border);
  box-shadow:
    0 0.35rem 1.1rem color-mix(in srgb, var(--qds-content-fg) 18%, transparent),
    0 0.1rem 0.25rem color-mix(in srgb, var(--qds-content-fg) 8%, transparent);
}

.qds-mobile-tabbar-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.2rem 0.15rem 0.1rem;
  border-radius: 0.65rem;
  text-decoration: none;
  color: color-mix(in srgb, var(--qds-card-fg) 58%, var(--qds-card-bg));
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.qds-mobile-tabbar-item:hover,
.qds-mobile-tabbar-item:focus-visible {
  color: var(--qds-btn-bg);
  background-color: color-mix(in srgb, var(--qds-btn-bg) 10%, var(--qds-card-bg));
}

.qds-mobile-tabbar-item.is-active {
  color: var(--qds-btn-bg);
  background-color: color-mix(in srgb, var(--qds-btn-bg) 14%, var(--qds-card-bg));
}

.qds-mobile-tabbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.35rem;
}

.qds-mobile-tabbar-label {
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}