:root {
    --home-green: #9b722b;
    --home-green-dark: #17130e;
    --home-gold: #b58a3a;
    --home-cyan: #08b9df;
    --home-ink: #23313b;
    --home-muted: #6b7a86;
    --home-bg: #edf2f6;
}

* { box-sizing: border-box; }
body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; color: var(--home-ink); background: var(--home-bg); font-family: Arial, sans-serif; font-size: 14px; }
.site-header { background: linear-gradient(110deg, #17130e, #2b2115); border-bottom: 3px solid var(--home-gold); box-shadow: 0 3px 10px rgb(38 26 10 / 22%); }
.site-header-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-brand { display: inline-flex; align-items: center; min-height: 72px; color: #f5ead2; font-size: 13px; font-weight: 700; text-decoration: none; }
.site-brand:hover { color: #fff; }
.site-logo { display: block; width: 106px; height: auto; max-height: 62px; object-fit: contain; }
.site-brand-name { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgb(181 138 58 / 55%); }
.bi-logo { display: block; width: 48px; height: 48px; object-fit: contain; }
.page-shell { flex: 1 0 auto; padding: 28px 0 42px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-heading h1 { margin: 0; font-size: clamp(20px, 3vw, 28px); font-weight: 700; letter-spacing: -.3px; }
.eyebrow { display: block; margin-bottom: 5px; color: var(--home-green); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.heading-status { padding: 7px 10px; color: var(--home-green-dark); border: 1px solid #c9e9dc; border-radius: 20px; background: #f1fbf6; font-size: 11px; white-space: nowrap; }
.btn-back { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; color: var(--home-green-dark); border: 1px solid #c9e9dc; border-radius: 4px; background: #f1fbf6; font-size: 11px; font-weight: 700; text-decoration: none; }
.btn-back:hover { color: #fff; background: var(--home-green-dark); }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.summary-card { position: relative; min-height: 132px; overflow: hidden; padding: 18px; border-radius: 7px; color: #fff; box-shadow: 0 9px 20px rgb(35 64 80 / 11%); }
.summary-card::after { position: absolute; right: -24px; bottom: -35px; width: 105px; height: 105px; border: 16px solid rgb(255 255 255 / 15%); border-radius: 50%; content: ""; }
.summary-card-green { background: linear-gradient(135deg, #087d52, #12ad70); }
.summary-card-blue { background: linear-gradient(135deg, #1976a6, #33a6cf); }
.summary-card-orange { background: linear-gradient(135deg, #c57920, #eda849); }
.summary-card-purple { background: linear-gradient(135deg, #66589d, #887ac4); }
.summary-label, .summary-note { display: block; position: relative; z-index: 1; }
.summary-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .9; }
.summary-value { display: block; position: relative; z-index: 1; margin: 14px 0 7px; font-size: clamp(22px, 2.5vw, 30px); line-height: 1; }
.summary-note { font-size: 11px; opacity: .85; }
.payment-status-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
.payment-status-alert > i { margin-top: 2px; }
.data-panel { padding: 18px 20px 22px; background: #fff; border: 1px solid #e0e7eb; border-radius: 7px; box-shadow: 0 8px 24px rgb(35 64 80 / 7%); }
.sales-chart-panel { margin-bottom: 22px; }
.chart-unit { color: var(--home-muted); font-size: 11px; }
.chart-wrap { position: relative; height: 280px; }
.item-sales-trigger { padding: 0; color: #28769b; border: 0; background: transparent; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.item-sales-trigger:hover { color: #17130e; }
.modal-title { margin: 0; font-size: 17px; }
.modal-body .chart-wrap { height: 340px; }
.modal-body .table { margin: 0; font-size: 12px; }
.modal-body .table thead th { padding: 10px 8px; color: var(--home-muted); border-bottom: 2px solid #e4ecef; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.modal-body .table tbody td { padding: 11px 8px; border-color: #edf1f3; white-space: nowrap; }
.modal-body .table tbody tr { transition: background-color .18s ease; }
.modal-body .table tbody tr:hover { background: #f4fbf8; }
.daily-sales-empty { margin: 0; color: var(--home-muted); text-align: center; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
/* Toolbar DataTables UMKM: 2 filter baru (kiri) + search DataTables (kanan), space-between */
.umkm-dt-toolbar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 10px 14px; background: #f6faf9; border: 1px solid #e0e7eb; border-radius: 6px; }
.umkm-dt-filters { display: flex; flex: 0 0 auto; align-items: center; }
.umkm-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
.umkm-filter-bar .filter-field { display: flex; align-items: center; }
.umkm-filter-bar select { height: 36px; padding: 5px 10px; border: 1px solid #cfdde2; border-radius: 5px; background: #fff; font-size: 12px; color: #2c3e46; }
.umkm-filter-bar select:focus { border-color: #28769b; outline: none; }
.umkm-filter-bar .btn-filter { height: 36px; padding: 5px 16px; }
.filter-field-kpwdn { width: 250px; }
/* .filter-field-sales { width: 220px; } */
.filter-field-status { width: 200px; }
/* Search DataTables: kanan di desktop (space-between), kiri + full-width di mobile */
.umkm-dt-search { flex: 0 1 auto; width: 300px; max-width: 100%; }
.umkm-dt-search .dt-search { display: flex; align-items: center; text-align: left; }
.umkm-dt-search .dt-search label { display: none; }
.umkm-dt-search .dt-input { height: 36px; width: 100%; max-width: 100%; padding: 5px 12px; border: 1px solid #cfdde2; border-radius: 5px; background: #fff; font-size: 12px; color: #2c3e46; }
.umkm-dt-search .dt-input:focus { border-color: #28769b; outline: none; }
/* Footer DataTables (info + paginasi sejajar) */
.umkm-dt-footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; }
.umkm-dt-info { color: var(--home-muted); font-size: 12px; }
div.dt-container div.dt-search input { margin-left: 0; width: 100%; }
/* Select2: samakan tampilan dengan select native di toolbar */
.filter-field-kpwdn .select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single { height: 36px; padding: 4px 10px; border: 1px solid #cfdde2; border-radius: 5px; background: #fff; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 26px; padding-right: 22px; color: #2c3e46; font-size: 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #8aa0a8; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: #28769b; }
.select2-dropdown { border: 1px solid #cfdde2; border-radius: 5px; font-size: 12px; }
.select2-container--default .select2-search--dropdown .select2-search__field { height: 32px; padding: 5px 10px; border: 1px solid #cfdde2; border-radius: 4px; font-size: 12px; }
.select2-container--default .select2-results__option { padding: 6px 10px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #28769b; }
.panel-heading h2 { margin: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.data-panel .table { margin: 0; font-size: 12px; }
.data-panel thead th { padding: 10px 8px; color: var(--home-muted); border-bottom: 2px solid #e4ecef; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }
.data-panel tbody td { padding: 11px 8px; border-color: #edf1f3; }
.data-panel tbody td:nth-child(2), .data-panel tbody td:nth-child(6), .data-panel tbody td:nth-child(7) { white-space: nowrap; }
.data-panel tbody tr { transition: background-color .18s ease, transform .18s ease; }
.data-panel tbody tr:hover { background: #f4fbf8; }
.btn-detail { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; color: #fff; background: #378db7; border: 0; border-radius: 4px; font-size: 11px; font-weight: 700; text-decoration: none; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn-detail:hover { color: #fff; background: #28769b; }
.btn-detail:focus-visible { outline: 2px solid #1a536f; outline-offset: 2px; }
.btn-detail:hover { box-shadow: 0 4px 9px rgb(40 118 155 / 22%); transform: translateY(-1px); }
.dataTables_wrapper .dataTables_filter input { min-height: 31px; margin-left: 6px; padding: 5px 9px; border: 1px solid #d5dfe4; border-radius: 4px; font-size: 12px; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { margin-top: 15px; font-size: 11px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: 4px 8px !important; }
.site-footer { flex-shrink: 0; padding: 12px 0; border-top: 1px solid #d7e0e5; color: #60707a; background: #fff; font-size: 10px; }
.footer-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-identity { display: flex; align-items: center; gap: 11px; }
.kopebi-logo { display: block; width: 42px; height: 42px; object-fit: contain; }
.footer-logo { display: block; width: 174px; height: 48px; object-fit: contain; object-position: right center; }

@media (max-width: 767px) {
    /* Toolbar filter: semua full-width, tersusun vertikal, search rata kiri */
    .umkm-dt-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .umkm-dt-filters { width: 100%; }
    .umkm-filter-bar { width: 100%; }
    .umkm-filter-bar .filter-field { width: 100%; }
    .filter-field-kpwdn, .filter-field-sales, .filter-field-status { width: 100%; max-width: none; }
    .umkm-dt-search { width: 100%; max-width: none; }
    .umkm-dt-search .dt-input { width: 100%; }
    .filter-field-kpwdn .select2-container { width: 100% !important; }
}

@media (max-width: 575px) {
    .page-shell { padding: 18px 0 28px; }
    .site-brand { min-height: 62px; }
    .site-logo { width: 92px; max-height: 52px; }
    .site-brand-name { margin-left: 11px; padding-left: 11px; font-size: 11px; }
    .bi-logo { width: 40px; height: 40px; }
    .page-heading { align-items: flex-start; }
    .heading-status { margin-top: 2px; }
    .btn-back { margin-top: 4px; }
    .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .summary-card { min-height: 120px; padding: 14px; }
    .summary-value { margin-top: 12px; font-size: 23px; }
    .data-panel { padding: 15px 12px; border-radius: 5px; }
    .data-panel .table { display: block; }
    .data-panel thead { display: none; }
    .data-panel tbody, .data-panel tr, .data-panel td { display: block; width: 100%; }
    .data-panel tbody tr { margin-bottom: 12px; padding: 8px 10px; border: 1px solid #e1e9ed; border-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgb(36 68 84 / 6%); }
    .data-panel tbody tr:hover { transform: translateY(-1px); }
    .data-panel tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding: 8px 2px; border-bottom: 1px solid #eef2f4; text-align: right; }
    .data-panel tbody td::before { color: var(--home-muted); content: attr(data-label); font-size: 10px; font-weight: 700; text-align: left; text-transform: uppercase; }
    .data-panel tbody td:last-child { border-bottom: 0; }
    .data-panel tbody td:first-child { justify-content: flex-end; }
    .data-panel tbody td:first-child::before { display: none; }
    .data-panel tbody td:first-child .btn-detail { min-width: 82px; justify-content: center; }
    .data-panel tbody td:nth-child(6), .data-panel tbody td:nth-child(7) { white-space: normal; }
    .modal-body .table { display: block; }
    .modal-body .table thead { display: none; }
    .modal-body .table tbody, .modal-body .table tr, .modal-body .table td { display: block; width: 100%; }
    .modal-body .table tbody tr { margin-bottom: 12px; padding: 8px 10px; border: 1px solid #e1e9ed; border-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgb(36 68 84 / 6%); }
    .modal-body .table tbody tr:hover { background: #fff; }
    .modal-body .table tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding: 8px 2px; border-color: #eef2f4; text-align: right; white-space: normal; }
    .modal-body .table tbody td::before { color: var(--home-muted); content: attr(data-label); font-size: 10px; font-weight: 700; text-align: left; text-transform: uppercase; }
    .modal-body .table tbody td:last-child { border-bottom: 0; }
    .modal-body .table tbody td:first-child { justify-content: flex-end; }
    .modal-body .table tbody td:first-child::before { display: none; }
    .modal-body .table tbody td.item-sales-date { justify-content: space-between; }
    .modal-body .table tbody td.item-sales-date::before { display: block; }
    .modal-body .table-responsive { overflow: visible; }
    .dataTables_wrapper .dataTables_filter { margin-bottom: 10px; text-align: left; }
    .dataTables_wrapper .dataTables_filter input { width: min(100%, 230px); margin-left: 0; }
    .dataTables_wrapper .dataTables_info { float: none; }
    .dataTables_wrapper .dataTables_paginate { float: none; margin-top: 10px; text-align: left; }
    .footer-content { align-items: flex-start; flex-direction: column; gap: 10px; }
    .footer-identity { align-items: center; }
    .footer-logo { width: 150px; height: 42px; object-position: left center; }
}

@media (min-width: 576px) and (max-width: 991px) {
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
}