/*
 * Application theme layered over AdminLTE 3 (Bootstrap 4). Shared, unchanged, by
 * evaluasi-sanggau and pdam-sanggau; pdam-sanggau adds its palette in sanggau-theme.css.
 *
 * Rules are prefixed with `.wrapper` so they outrank AdminLTE (including its `.dark-mode`
 * variants) without !important. Classes use the `app-` prefix to stay clear of the
 * evaluation page's `sg-` styles.
 *
 * Scale: text 14px; controls 40px tall (32px small) with 10px radius (8px small);
 * labels 13px semibold; table headers 11.5px uppercase; table cells 13px.
 */
:root {
  --app-font: "Plus Jakarta Sans", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --app-radius: 14px;
  --app-control-h: 2.5rem;
  --app-control-h-sm: 2rem;
  --app-control-radius: 10px;
  --app-control-radius-sm: 8px;
  --app-bg: #f3f6f8;
  --app-surface: #ffffff;
  --app-surface-2: #f5f8fa;
  --app-input: #ffffff;
  --app-line: #dde6eb;
  --app-line-strong: #c7d3db;
  --app-text: #17364c;
  --app-muted: #50667a;
  --app-track: #e4ecf0;
  --app-accent: #087e8b;
  --app-on-accent: #ffffff;
  --app-accent-soft: #e2f2f4;
  --app-side: #12293a;
  --app-side-text: #d3e0e8;
  --app-side-muted: #93abbb;
  --app-good: #15803d;
  --app-good-soft: #e5f4ea;
  --app-danger: #b42318;
  --app-danger-soft: #fcebe9;
  --app-warn: #b45309;
  --app-warn-soft: #fcefdf;
  --app-blue: #2459a6;
  --app-blue-soft: #e7eefa;
  --app-shadow: 0 1px 2px rgba(16, 40, 56, .05), 0 6px 18px rgba(16, 40, 56, .04);
  --app-popover-shadow: 0 12px 32px rgba(16, 40, 56, .14);
  --app-focus: #edb837;
  --app-grid: #e4ebef;
  --app-tooltip: #17364c;
  --app-chart-drd: #b3c3cf;
  --app-chart-trx: #087e8b;
  --app-chart-per: #17364c;
  --app-chart-kub: #d9822b;
  --app-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7c8a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
  --app-search-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='none' stroke='%236b7c8a' stroke-linecap='round' stroke-width='1.8'%3e%3ccircle cx='7' cy='7' r='4.5'/%3e%3cpath d='m10.5 10.5 3 3'/%3e%3c/g%3e%3c/svg%3e");
}

body.dark-mode {
  --app-bg: #0d1a23;
  --app-surface: #142530;
  --app-surface-2: #18303d;
  --app-input: #0f212c;
  --app-line: #26404f;
  --app-line-strong: #355467;
  --app-text: #e4edf2;
  --app-muted: #9db2c1;
  --app-track: #22394a;
  --app-accent: #4cc0cc;
  --app-on-accent: #08242a;
  --app-accent-soft: #153b43;
  --app-side: #09141b;
  --app-side-text: #cddbe4;
  --app-side-muted: #8aa2b2;
  --app-good: #6fcf8f;
  --app-good-soft: #173322;
  --app-danger: #f08a7e;
  --app-danger-soft: #3b201d;
  --app-warn: #f0a35c;
  --app-warn-soft: #3a2a17;
  --app-blue: #93b8f0;
  --app-blue-soft: #1b2c45;
  --app-shadow: none;
  --app-popover-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --app-grid: #223a49;
  --app-tooltip: #253f50;
  --app-chart-drd: #4f6677;
  --app-chart-trx: #4cc0cc;
  --app-chart-per: #c4dcef;
  --app-chart-kub: #f0a35c;
  --app-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a9bcc9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
  --app-search-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='none' stroke='%23a9bcc9' stroke-linecap='round' stroke-width='1.8'%3e%3ccircle cx='7' cy='7' r='4.5'/%3e%3cpath d='m10.5 10.5 3 3'/%3e%3c/g%3e%3c/svg%3e");
}

/* ---------- Base ---------- */
body { font-family: var(--app-font); font-size: .875rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.dark-mode { color-scheme: dark; }
.wrapper :focus-visible { outline: 3px solid var(--app-focus); outline-offset: 2px; }
.wrapper .text-muted { color: var(--app-muted) !important; }
.wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4, .wrapper h5 { color: inherit; }
.wrapper h4 { font-size: 1rem; font-weight: 700; }

/* ---------- Shell ---------- */
.wrapper .content-wrapper { background: var(--app-bg); color: var(--app-text); }
.wrapper .content > .container-fluid { padding-bottom: 1rem; }
.wrapper .main-footer { padding: .875rem 1.25rem; background: var(--app-surface); border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: .8125rem; }
.wrapper .main-footer a { color: var(--app-accent); }

/* ---------- Top navigation ---------- */
.wrapper .main-header.navbar { background: var(--app-surface); border-bottom: 1px solid var(--app-line); }
.wrapper .main-header.navbar .navbar-nav .nav-link {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem;
  border-radius: var(--app-control-radius); color: var(--app-muted); font-size: .875rem;
}
.wrapper .main-header.navbar .navbar-nav .nav-link:hover { background: var(--app-surface-2); color: var(--app-text); }
.wrapper .main-header.navbar .navbar-nav .nav-link > .fas,
.wrapper .main-header.navbar .navbar-nav .nav-link > .far { font-size: 1rem; }
.app-icon-btn { border: 0; background: transparent; cursor: pointer; font: inherit; }
.app-topnav-title { display: flex; align-items: center; height: 2.5rem; padding: 0 .5rem; font-weight: 600; color: var(--app-text); }

.app-year { position: relative; display: flex; align-items: center; margin: 0 0 0 .5rem; }
.app-year-select {
  -webkit-appearance: none; appearance: none;
  height: var(--app-control-h); padding: 0 2.25rem; border: 1px solid var(--app-line); border-radius: var(--app-control-radius);
  background-color: var(--app-surface); color: var(--app-text); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.app-year-select:hover { border-color: var(--app-line-strong); }
.app-year-icon, .app-year-chevron { position: absolute; color: var(--app-muted); font-size: .8125rem; pointer-events: none; }
.app-year-icon { left: .8rem; }
.app-year-chevron { right: .8rem; font-size: .6875rem; }

/* Account menu */
.wrapper .main-header.navbar .navbar-nav .app-user-toggle { gap: .5rem; padding: 0 .5rem 0 .375rem; color: var(--app-text); font-weight: 600; }
.app-user-avatar { box-sizing: border-box; width: 2rem; height: 2rem; padding: 2px; border-radius: 8px; object-fit: contain; background: #ffffff; }
.app-user-chevron { font-size: .625rem; color: var(--app-muted); }
.wrapper .app-user-menu {
  min-width: 16rem; margin-top: .375rem; padding: .375rem; border: 1px solid var(--app-line); border-radius: 12px;
  background: var(--app-surface); box-shadow: var(--app-popover-shadow); font-size: .875rem;
}
.app-user-menu-head { display: flex; align-items: center; gap: .75rem; padding: .5rem .625rem; }
.app-user-menu-head strong { display: block; color: var(--app-text); line-height: 1.3; }
.app-user-menu-head small { color: var(--app-muted); font-size: .75rem; }
.wrapper .app-user-menu .dropdown-item { display: flex; align-items: center; padding: .5rem .625rem; border-radius: 8px; color: var(--app-text); }
.wrapper .app-user-menu .dropdown-item:hover { background: var(--app-surface-2); }
/* Fixed icon box so the labels of all items start at the same x, whichever glyph is used. */
.wrapper .app-user-menu .dropdown-item > i { flex: 0 0 1rem; width: 1rem; text-align: center; font-size: .875rem; color: var(--app-muted); }
.wrapper .app-user-menu .dropdown-divider { margin: .375rem 0; border-top-color: var(--app-line); }
.wrapper .app-user-menu .dropdown-header { padding: .375rem .625rem .25rem; text-align: left; color: var(--app-muted); font-size: .71875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Sidebar ---------- */
.wrapper .main-sidebar { background: var(--app-side); }
.wrapper .main-sidebar .sidebar { padding: 0 .625rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.wrapper .main-sidebar .brand-link,
.wrapper .main-sidebar .brand-link:hover { border-bottom-color: rgba(255, 255, 255, .08); color: #ffffff; }
.layout-navbar-fixed .wrapper .main-sidebar .brand-link:not([class*="navbar"]) { background: var(--app-side); }
/* The emblem is landscape (430x342): shown whole in a rounded box instead of being cropped to a circle. */
.wrapper .main-sidebar .brand-link .brand-image {
  box-sizing: border-box; height: 2rem; max-height: 2rem; margin-left: .75rem; padding: 2px; border-radius: 8px;
  background: #ffffff; box-shadow: none; object-fit: contain;
}
.wrapper .main-sidebar .brand-text { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }

/* Bootstrap's .nav wraps, which sizes every item to the widest one; AdminLTE also gives each link a fixed 234px. */
.wrapper .main-sidebar .nav-sidebar { flex-wrap: nowrap; }
.wrapper .main-sidebar .nav-sidebar .nav-link { width: auto; }
.wrapper .main-sidebar .nav-sidebar .nav-header {
  padding: 1rem .75rem .375rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--app-side-muted);
}
.wrapper .main-sidebar .nav-sidebar .nav-item > .nav-link {
  display: block; margin-bottom: 2px; padding: .5rem .75rem; border-radius: 8px;
  color: var(--app-side-text); font-size: .875rem; font-weight: 500; line-height: 1.25rem;
}
.wrapper .main-sidebar .nav-sidebar .nav-link > .nav-icon {
  width: 1.25rem; margin: 0 .625rem 0 0; font-size: .9375rem; line-height: 1.25rem; text-align: center; vertical-align: top;
}
/* Long menu names wrap beside the icon instead of under it, clear of the group arrow. */
.wrapper .main-sidebar .nav-sidebar .nav-link > p { display: inline-block; width: calc(100% - 1.875rem); margin: 0; vertical-align: top; white-space: normal; }
.wrapper .main-sidebar .nav-sidebar .nav-link > p > .right { top: .875rem; right: .75rem; font-size: .6875rem; color: var(--app-side-muted); }
.wrapper .main-sidebar .app-nav-group > p { padding-right: 1.25rem; }
.wrapper .main-sidebar .nav-sidebar > .nav-item > .nav-link:not(.active):hover { background: rgba(255, 255, 255, .06); color: #ffffff; }
.wrapper .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background: var(--app-accent); color: var(--app-on-accent); box-shadow: none; font-weight: 600;
}
.wrapper .main-sidebar .app-nav-group.is-current { color: #ffffff; font-weight: 600; }

/* Second level: smaller rows hanging off a guide line under the group. */
.wrapper .main-sidebar .nav-sidebar .nav-treeview { margin: 0 0 .375rem 1.25rem; padding-left: .5rem; border-left: 1px solid rgba(255, 255, 255, .1); }
.wrapper .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link { padding: .375rem .625rem; font-size: .8125rem; }
.wrapper .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon { width: 1rem; margin-right: .5rem; font-size: .8125rem; color: var(--app-side-muted); }
.wrapper .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link > p { width: calc(100% - 1.5rem); }
.wrapper .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link { color: var(--app-side-text); }
.wrapper .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link:not(.active):hover { background: rgba(255, 255, 255, .06); color: #ffffff; }
.wrapper .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active,
.wrapper .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active:hover {
  background: var(--app-accent); color: var(--app-on-accent); box-shadow: none; font-weight: 600;
}
.wrapper .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active > .nav-icon { color: inherit; }

/* Operator card in the sidebar */
.app-loket {
  margin: .75rem 0 .25rem; padding: .75rem; border-radius: 10px;
  background: rgba(255, 255, 255, .06); color: var(--app-side-text); font-size: .75rem;
}
.app-loket-name { color: #ffffff; font-size: .875rem; font-weight: 700; line-height: 1.3; }
.app-loket-meta { display: grid; gap: .25rem; margin: .5rem 0 0; }
.app-loket-meta > div { display: flex; justify-content: space-between; gap: .75rem; }
.app-loket-meta dt { font-weight: 500; color: var(--app-side-muted); }
.app-loket-meta dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .app-loket { display: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview { margin-left: 0; padding-left: 0; border-left: 0; }
/* In the icon-only rail every icon is centred in the rail. */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link { padding-right: 0; padding-left: 0; text-align: center; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link > .nav-icon { width: 100%; margin-right: 0; }
/* Labels leave the flow in the rail so they cannot shift the centred icon (AdminLTE gives them margin-left: -10px). */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link > p { position: absolute; width: 0; margin: 0; padding: 0; overflow: hidden; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link { width: auto; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .brand-link { padding-right: 0; padding-left: 0; text-align: center; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .brand-link .brand-image { margin-right: 0; margin-left: 0; float: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .brand-link .brand-text { position: absolute; width: 0; overflow: hidden; }

/* ---------- Page header ---------- */
.wrapper .content-header { padding: 1.5rem .5rem 1.125rem; }
.wrapper .content-header h1 { font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.app-eyebrow { margin: 0 0 .25rem; font-size: .75rem; font-weight: 600; color: var(--app-accent); letter-spacing: .02em; }
.app-page-subtitle { margin: .375rem 0 0; color: var(--app-muted); }

/* ---------- Cards ---------- */
.wrapper .card {
  margin-bottom: 1.25rem; background: var(--app-surface); color: var(--app-text);
  border: 1px solid var(--app-line); border-radius: var(--app-radius); box-shadow: var(--app-shadow);
}
.wrapper .card > .card-header { padding: .875rem 1.25rem; border-bottom-color: var(--app-line); background: transparent; }
.wrapper .card > .card-header:first-child { border-radius: calc(var(--app-radius) - 1px) calc(var(--app-radius) - 1px) 0 0; }
.wrapper .card-body { padding: 1.25rem; }
/* Filter-only cards (export forms) end at the header instead of showing an empty body. */
.wrapper .card-header:has(.app-filter) + .card-body:not(:has(*)) { display: none; }
.wrapper .card-header:has(.app-filter):has(+ .card-body:not(:has(*))) { border-bottom: 0; }
.wrapper .card-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--app-line); background: var(--app-surface-2); }
/* One line is as tall as the small buttons beside it (32px); wrapped titles stay tight. */
.wrapper .card-title { padding: .3125rem 0; font-size: .9375rem; font-weight: 700; line-height: 1.375rem; }
.wrapper .card.card-outline.card-primary { border-top: 3px solid var(--app-accent); }
/* A card inside a card (e.g. the transactions table inside the payment card) stays flat. */
.wrapper .card .card { margin-bottom: 1rem; box-shadow: none; }
.wrapper .card .card:last-child { margin-bottom: 0; }
/* ...and when it spans the whole width of its parent (inside a form) it becomes a section of it. */
.wrapper .card > form > .card,
.wrapper .card > .card { margin: 0; border-width: 1px 0; border-radius: 0; }
/* Actions that sit next to a card title use the small button size and line up on the right. */
.wrapper .card > .card-header:has(> .card-title + .btn) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.wrapper .card > .card-header:has(> .card-title + .btn)::after { display: none; }
.wrapper .card > .card-header:has(> .card-title + .btn) > .card-title { float: none; margin: 0; }
.wrapper .card > .card-header > .card-title ~ .btn { float: none; margin: 0; }
.wrapper .card > .card-header:has(> .card-title + .btn) > :not(.card-title):not(.btn) { flex: 0 0 100%; }
.wrapper .card > .card-header > .card-title ~ .btn,
.wrapper .card > .card-header > .card-title ~ form:not(.app-filter) .btn,
.wrapper .card > .card-header > .float-right > .btn,
/* Row actions inside tables are always the small size, whichever size the markup asks for. */
.wrapper td .btn:not(.btn-tool):not(.btn-link) {
  padding: .3125rem .75rem; border-radius: var(--app-control-radius-sm); font-size: .8125rem;
}

/* Card header with title and tools on one wrapping row */
.wrapper .app-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.wrapper .app-card-header::after { display: none; }
.wrapper .app-card-header .card-title { float: none; margin: 0; }
.wrapper .app-card-header .card-tools { float: none; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0; }
/* AdminLTE pulls .btn-tool up by .75rem; inside a wrapping toolbar that makes the second line overlap the first. */
.wrapper .app-card-header .card-tools .btn-tool { margin: 0; }
.wrapper .app-card-header .card-tools .form-control-sm { flex: 1 1 9.5rem; width: auto; min-width: 0; }
.wrapper .card-tools .btn-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border-radius: var(--app-control-radius-sm); color: var(--app-muted); font-size: .8125rem;
}
.wrapper .card-tools .btn-tool:hover { background: var(--app-surface-2); color: var(--app-text); }

/* ---------- Forms ---------- */
/* Same weight as AdminLTE's label rule (so it wins by order) and below DataTables' control labels. */
.wrapper .content-wrapper label:where(:not(.app-check-label):not(.app-radio-inline):not(.custom-control-label)),
.wrapper .col-form-label {
  margin-bottom: .375rem; padding-top: 0; padding-bottom: 0; color: var(--app-text); font-size: .8125rem; font-weight: 600; line-height: 1.25rem;
}
.wrapper .form-group { margin-bottom: 1rem; }
.wrapper .form-text { margin-top: .375rem; font-size: .75rem; }

.wrapper .form-control,
.wrapper .custom-select {
  height: var(--app-control-h); padding: .5rem .875rem; border: 1px solid var(--app-line); border-radius: var(--app-control-radius);
  background-color: var(--app-input); color: var(--app-text); font-size: .875rem; line-height: 1.375rem; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* AdminLTE's dark mode paints fields #343a40 with grey borders at higher specificity; keep the theme's tokens. */
.dark-mode .wrapper .form-control:not(.form-control-navbar):not(.form-control-sidebar) { background-color: var(--app-input); color: var(--app-text); }
.dark-mode .wrapper .form-control:not(.form-control-navbar):not(.form-control-sidebar):not(.is-invalid):not(:focus) { border-color: var(--app-line); }
.dark-mode .wrapper .form-control:not(.form-control-navbar):not(.form-control-sidebar):disabled,
.dark-mode .wrapper .form-control:not(.form-control-navbar):not(.form-control-sidebar)[readonly] { background-color: var(--app-surface-2); }
.dark-mode .wrapper .form-control:not(.form-control-navbar):not(.form-control-sidebar):focus { border-color: var(--app-accent); }
.wrapper .form-control:hover:not(:disabled):not([readonly]),
.wrapper .custom-select:hover { border-color: var(--app-line-strong); }
.wrapper .form-control:focus,
.wrapper .custom-select:focus { border-color: var(--app-accent); background-color: var(--app-input); color: var(--app-text); box-shadow: 0 0 0 3px var(--app-accent-soft); }
.wrapper .form-control::placeholder { color: var(--app-muted); opacity: .75; }
.wrapper .form-control:disabled,
.wrapper .form-control[readonly] { background-color: var(--app-surface-2); color: var(--app-text); opacity: 1; }
.wrapper textarea.form-control { height: auto; min-height: 5.5rem; }
.wrapper .form-control-sm,
.wrapper .custom-select-sm {
  height: var(--app-control-h-sm); padding: .25rem .625rem; border-radius: var(--app-control-radius-sm); font-size: .8125rem; line-height: 1.375rem;
}
/* One chevron for every single-value select, in place of each browser's own arrow. */
.wrapper select.form-control:not([multiple]):not([size]),
.wrapper .custom-select {
  -webkit-appearance: none; appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: var(--app-chevron); background-repeat: no-repeat; background-position: right .75rem center; background-size: .75rem;
}
.wrapper select.form-control-sm:not([multiple]):not([size]),
.wrapper .custom-select-sm { padding-right: 1.875rem; background-position: right .5rem center; }

.wrapper .input-group-text {
  display: flex; align-items: center; gap: .5rem; padding: 0 .75rem;
  border: 1px solid var(--app-line); border-radius: var(--app-control-radius);
  background: var(--app-surface-2); color: var(--app-muted); font-size: .8125rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap;
}
.wrapper .input-group-text > .fa,
.wrapper .input-group-text > .fas,
.wrapper .input-group-text > .far { width: .875rem; font-size: .8125rem; text-align: center; }
.wrapper .input-group > .form-control:focus { z-index: 3; }
/* Filters inside a card body sit above the table that follows. */
.wrapper .card-body > .app-filter { margin: 0 0 1rem; }
/* The pay button sits one step below the stacked amount rows. */
.wrapper .card-footer .input-group ~ form,
.wrapper .card-footer .input-group ~ .btn { margin-top: 1rem; }
/* The payment column lines up with the content above instead of Bootstrap's column gutter. */
.wrapper .card-footer .form-group > [class*="col-"] { padding-right: 0; padding-left: 0; }
.wrapper .card-footer .form-group { margin-bottom: 0; }
/* Stacked amount rows in card footers (payment: total, cash, change). */
.wrapper .card-footer .input-group + .input-group { margin-top: .5rem; }
.wrapper .card-footer .input-group-append > .input-group-text { min-width: 8.75rem; }

.wrapper input[type="checkbox"],
.wrapper input[type="radio"] { width: 1rem; height: 1rem; accent-color: var(--app-accent); vertical-align: -.1875rem; }
.app-checks { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.wrapper .app-check-input { margin: 0; }
.wrapper .app-check-label { margin: 0 .875rem 0 0; color: var(--app-text); font-size: .875rem; font-weight: 500; cursor: pointer; }
.app-radio-inline { display: inline-flex; align-items: center; gap: .5rem; margin: 0 1.25rem 0 0; font-size: .875rem; font-weight: 500; cursor: pointer; }

/* File inputs: same box as the other fields, with the native button styled like a small action button. */
.wrapper input[type="file"] {
  display: block; width: 100%; height: var(--app-control-h); padding: 0; border: 1px solid var(--app-line); border-radius: var(--app-control-radius);
  background: var(--app-input); color: var(--app-muted); font-size: .8125rem; line-height: calc(var(--app-control-h) - 2px); cursor: pointer; overflow: hidden;
}
.wrapper input[type="file"]::file-selector-button {
  height: calc(var(--app-control-h) - 2px); margin: 0 .75rem 0 0; padding: 0 .875rem; border: 0; border-right: 1px solid var(--app-line);
  background: var(--app-surface-2); color: var(--app-text); font: inherit; font-weight: 600; cursor: pointer;
}
.wrapper input[type="file"]:hover::file-selector-button { background: var(--app-accent-soft); }
/* Fields that were laid out inline in Bootstrap 3 markup now stack with full-width inputs. */
/* Bootstrap 3 columns placed directly in a table cell become stacked blocks of one comfortable width. */
.wrapper td > [class*="col-md-"] { width: 100%; max-width: 22rem; flex: none; padding: 0; }
.wrapper td > [class*="col-md-"] + [class*="col-md-"] { margin-top: 1rem; }
.wrapper td .form-group > .form-group { margin-bottom: .75rem; }
.wrapper td form .btn { margin-top: .25rem; }

/* ---------- Buttons ---------- */
.wrapper .btn:not(.btn-tool):not(.btn-link) {
  display: inline-flex; align-items: center; justify-content: center; gap: .4375rem;
  padding: .5625rem 1rem; border-radius: var(--app-control-radius);
  font-size: .875rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap;
}
.wrapper .btn-block:not(.btn-tool) { display: flex; width: 100%; }
/* Buttons joined to an input keep only their outer corners rounded. */
.wrapper .input-group .btn:not(.btn-tool):not(.btn-link) { border-radius: 0; }
.wrapper .input-group > .input-group-append:last-child > .btn:last-child { border-top-right-radius: var(--app-control-radius); border-bottom-right-radius: var(--app-control-radius); }
.wrapper .input-group > .input-group-prepend:first-child > .btn:first-child { border-top-left-radius: var(--app-control-radius); border-bottom-left-radius: var(--app-control-radius); }
.wrapper .input-group-append .btn + .btn { margin-left: -1px; }
.wrapper .btn.btn-sm:not(.btn-tool) { padding: .3125rem .75rem; border-radius: var(--app-control-radius-sm); font-size: .8125rem; }
.wrapper .btn.btn-xs:not(.btn-tool) { gap: .25rem; padding: .125rem .5rem; border-radius: 6px; font-size: .75rem; }
.wrapper .btn:not(.btn-tool) > .fa,
.wrapper .btn:not(.btn-tool) > .fas,
.wrapper .btn:not(.btn-tool) > .far,
.wrapper .btn:not(.btn-tool) > span.fa { font-size: .875em; }
.wrapper .btn:disabled,
.wrapper .btn.disabled { opacity: .55; }
.wrapper .btn-primary,
.wrapper .btn-primary:not(:disabled):not(.disabled):active,
.wrapper .btn-primary:focus { border-color: var(--app-accent); background-color: var(--app-accent); color: var(--app-on-accent); }
.wrapper .btn-primary:hover { border-color: var(--app-accent); background-color: var(--app-accent); color: var(--app-on-accent); filter: brightness(.92); }
.wrapper .btn-default { border-color: var(--app-line); background-color: var(--app-surface); color: var(--app-text); }
.wrapper .btn-default:hover { border-color: var(--app-line-strong); background-color: var(--app-surface-2); color: var(--app-text); }
.wrapper .btn:focus,
.wrapper .btn.focus { box-shadow: 0 0 0 3px var(--app-accent-soft); }
.wrapper .app-btn-primary { border-color: transparent; background: var(--app-accent); color: var(--app-on-accent); }
.wrapper .app-btn-primary:hover { filter: brightness(.92); color: var(--app-on-accent); }

/* ---------- Badges and alerts ---------- */
.wrapper .badge { padding: .25rem .5rem; border-radius: 6px; font-size: .75rem; font-weight: 600; line-height: 1rem; }
.app-badge {
  display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .75rem; border-radius: 999px;
  background: var(--app-accent-soft); color: var(--app-accent); font-size: .75rem; font-weight: 600;
}
/* Alerts: a soft tint with the normal text colour, instead of AdminLTE's solid fills with white text. */
.wrapper .alert { padding: .75rem 1rem; border: 1px solid var(--app-line); border-radius: 12px; color: var(--app-text); font-size: .875rem; }
.wrapper .alert-success { border-color: color-mix(in srgb, var(--app-good) 35%, transparent); background: var(--app-good-soft); }
.wrapper .alert-danger { border-color: color-mix(in srgb, var(--app-danger) 35%, transparent); background: var(--app-danger-soft); }
.wrapper .alert-warning { border-color: color-mix(in srgb, var(--app-warn) 35%, transparent); background: var(--app-warn-soft); }
.wrapper .alert-info { border-color: color-mix(in srgb, var(--app-accent) 35%, transparent); background: var(--app-accent-soft); }
.wrapper .alert a:not(.btn) { color: inherit; font-weight: 600; text-decoration: underline; }
.wrapper .alert-dismissible { padding-right: 3rem; }
.wrapper .alert-dismissible .close { padding: .75rem 1rem; color: var(--app-muted); text-shadow: none; opacity: .8; }
.wrapper .alert-dismissible .close:hover { color: var(--app-text); opacity: 1; }
.wrapper .alert > p:last-child { margin-bottom: 0; }

/* ---------- Report tables (DRD, LPP, Tunggakan in evaluasi-sanggau) ---------- */
.wrapper .app-table { margin-bottom: 0; color: var(--app-text); font-size: .8125rem; }
.wrapper .app-table th,
.wrapper .app-table td { padding: .625rem .875rem; border-color: var(--app-line); vertical-align: middle; }
.wrapper .app-table thead th {
  border-top: 0; border-bottom: 1px solid var(--app-line); background: var(--app-surface-2);
  color: var(--app-muted); font-size: .71875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.wrapper .app-table th:not(:first-child),
.wrapper .app-table td:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wrapper .app-table.table-hover > tbody > tr:not(.expandable-body):hover { background: var(--app-surface-2); color: var(--app-text); }
.wrapper .app-table .app-table-total > th,
.wrapper .app-table .app-table-total > td {
  border-top: 2px solid var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); font-weight: 700;
}
.wrapper .app-table > tbody > tr.expandable-body > td > div { padding: .5rem 1rem 1rem 2.75rem; background: var(--app-surface-2); }
.wrapper .expandable-body .app-table-nested { width: 100%; margin: 0; border: 1px solid var(--app-line); background: var(--app-surface); }
.wrapper .app-table-nested th,
.wrapper .app-table-nested td { padding: .5rem .75rem; }
.app-expand { display: inline-flex; align-items: center; gap: .625rem; font-weight: 600; }
.app-expand-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid var(--app-line); border-radius: 8px;
  background: var(--app-surface); color: var(--app-accent); font-size: .75rem; cursor: pointer;
}
[data-widget="expandable-table"][aria-expanded="true"] > td > .app-expand > .app-expand-btn { border-color: transparent; background: var(--app-accent-soft); }
.app-hint { color: var(--app-muted); cursor: help; }

/* ---------- Label/value tables (customer details) ---------- */
.wrapper .app-keyvalue { margin-bottom: 0; color: var(--app-text); font-size: .875rem; }
.wrapper .app-keyvalue td { padding: .625rem .875rem; border-color: var(--app-line); vertical-align: top; }
.wrapper .app-keyvalue tr:first-child td { border-top: 0; }
.wrapper .app-keyvalue td:first-child { width: 14rem; color: var(--app-muted); font-weight: 500; }
.wrapper .app-keyvalue td strong { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .wrapper .app-keyvalue, .wrapper .app-keyvalue tbody, .wrapper .app-keyvalue tr, .wrapper .app-keyvalue td { display: block; width: 100%; }
  .wrapper .app-keyvalue tr { padding: .625rem .25rem; border-top: 1px solid var(--app-line); }
  .wrapper .app-keyvalue tr:first-child { border-top: 0; }
  .wrapper .app-keyvalue td { padding: 0; border: 0; }
  .wrapper .app-keyvalue td:first-child { width: 100%; margin-bottom: .125rem; font-size: .75rem; }
}

/* A small form sitting inline next to a card title. */
.wrapper .app-inline-form { display: inline-flex; margin: 0 0 0 .5rem; vertical-align: middle; }

/* ---------- Report filters: label, input groups and actions on one wrapping row ---------- */
.wrapper .app-filter { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin: 1rem 0 0; }
.wrapper .app-filter .input-group { width: auto; flex: 0 1 auto; flex-wrap: nowrap; }
.wrapper .app-filter .form-control { width: auto; min-width: 9rem; }
.wrapper .app-filter .input-group.date .form-control { width: 9.5rem; min-width: 0; }
.app-filter-prepend-label { font-size: .8125rem; font-weight: 600; color: var(--app-muted); }
.app-filter-label { font-size: .8125rem; font-weight: 600; color: var(--app-muted); }

/* ---------- DataTables (Bootstrap 4 integration) ---------- */
.wrapper .app-datatable { margin-bottom: 0 !important; color: var(--app-text); font-size: .8125rem; }
.wrapper .app-datatable th,
.wrapper .app-datatable td { padding: .625rem .875rem; border-color: var(--app-line); vertical-align: middle; }
.wrapper .app-datatable td { white-space: nowrap; }
.wrapper .app-datatable thead th {
  border-top: 0; border-bottom: 1px solid var(--app-line); background: var(--app-surface-2);
  color: var(--app-muted); font-size: .71875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.wrapper .app-datatable tfoot th { border-top: 2px solid var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); font-weight: 700; white-space: nowrap; }
.wrapper .app-datatable.table-hover tbody tr:hover { background: var(--app-surface-2); color: var(--app-text); }
/* Room on the right for DataTables' sort arrows. */
.wrapper table.dataTable.app-datatable thead > tr > th.sorting,
.wrapper table.dataTable.app-datatable thead > tr > th.sorting_asc,
.wrapper table.dataTable.app-datatable thead > tr > th.sorting_desc { padding-right: 1.75rem; }
.wrapper table.dataTable thead > tr > th.sorting::before,
.wrapper table.dataTable thead > tr > th.sorting::after,
.wrapper table.dataTable thead > tr > th.sorting_asc::before,
.wrapper table.dataTable thead > tr > th.sorting_asc::after,
.wrapper table.dataTable thead > tr > th.sorting_desc::before,
.wrapper table.dataTable thead > tr > th.sorting_desc::after { bottom: .625rem; font-size: .75rem; }

/* Row actions stay in view on wide tables: the last column sticks to the right edge while the other columns scroll. */
.wrapper table.app-sticky-action > thead > tr > :last-child,
.wrapper table.app-sticky-action > tbody > tr > :last-child,
.wrapper table.app-sticky-action > tfoot > tr > :last-child { position: sticky; right: 0; z-index: 1; background: var(--app-surface); box-shadow: inset 1px 0 0 var(--app-line); }
.wrapper table.app-sticky-action > thead > tr > :last-child { z-index: 2; background: var(--app-surface-2); }
.wrapper table.app-sticky-action > tfoot > tr > :last-child { background: var(--app-accent-soft); }
.wrapper table.app-sticky-action.table-hover > tbody > tr:hover > :last-child { background: var(--app-surface-2); }
.app-action-note { display: inline-block; color: var(--app-muted); font-size: .75rem; font-weight: 600; line-height: 1rem; white-space: nowrap; }

/* ---------- Loading feedback (app-theme.js) ---------- */
/* A 4px striped bar on the bottom edge of the navigation; the stripes keep moving so a long wait still looks alive. */
.app-loading { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; height: 4px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; }
.main-header > .app-loading { position: absolute; top: auto; bottom: -2px; z-index: 1; }
.app-loading.is-active { opacity: 1; }
.app-loading.is-done { opacity: 0; transition: opacity .3s .15s; }
.app-loading > span { display: block; width: 0; height: 100%; border-radius: 0 4px 4px 0; background-color: var(--app-progress, var(--app-accent)); background-image: linear-gradient(-45deg, rgba(255, 255, 255, .45) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, .45) 75%, transparent 75%); background-size: 16px 16px; box-shadow: 0 0 8px var(--app-progress, var(--app-accent)); transition: width 8s cubic-bezier(.08, .6, .2, 1); animation: app-loading-stripes .6s linear infinite; }
.app-loading.is-done > span { transition: width .2s ease-out; }
/* "Memuat data…" under the navigation once a wait passes 0.3s. */
.app-loading-chip { position: fixed; top: 68px; left: 50%; z-index: 2001; display: inline-flex; align-items: center; gap: .5rem; max-width: calc(100vw - 32px); padding: .5rem 1rem .5rem .75rem; border: 1px solid var(--app-line); border-radius: 999px; background: var(--app-surface); color: var(--app-text); box-shadow: 0 8px 24px rgba(15, 23, 42, .18); font-size: .875rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -6px); transition: opacity .2s, transform .2s; }
.app-loading-chip.is-active { opacity: 1; transform: translate(-50%, 0); }
.app-loading-chip > i, .app-busy::after { flex: none; width: 1rem; height: 1rem; border: 2px solid var(--app-line); border-top-color: var(--app-accent); border-radius: 50%; animation: app-spin .7s linear infinite; }
/* The button that started the wait shows a spinner and ignores further clicks until it is done. */
.app-busy { position: relative; pointer-events: none; cursor: progress; }
.app-busy::after { content: ""; display: inline-block; width: .875rem; height: .875rem; margin-left: .5rem; vertical-align: -.125rem; border-color: currentColor; border-top-color: transparent; opacity: .85; }
@keyframes app-spin { to { transform: rotate(360deg); } }
@keyframes app-loading-stripes { to { background-position: 16px 0; } }
@media (prefers-reduced-motion: reduce) { .app-loading > span, .app-loading.is-done > span { transition: none; animation: none; } .app-loading-chip > i, .app-busy::after { animation-duration: 2s; } }
/* Wide tables scroll inside their card instead of stretching the page; the search box and pagination stay in place. */
.wrapper div.dataTables_wrapper > .row > [class*="col-"]:has(> table) { overflow-x: auto; }
.wrapper .table-responsive:has(> .dataTables_wrapper > .row > [class*="col-"] > table) { overflow-x: visible; }
.wrapper div.dataTables_wrapper > .row:first-child { align-items: center; margin-bottom: .875rem; }
.wrapper div.dataTables_wrapper > .row:last-child { align-items: center; margin-top: .875rem; }
/* Tables configured without length/search controls don't keep an empty row above them. */
.wrapper div.dataTables_wrapper > .row:first-child:not(:has(.dataTables_length, .dataTables_filter, .dt-buttons)) { display: none; }
.wrapper div.dataTables_wrapper div.dataTables_length label,
.wrapper div.dataTables_wrapper div.dataTables_filter label {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; margin: 0; color: var(--app-muted); font-size: .8125rem; font-weight: 500;
}
.wrapper div.dataTables_wrapper div.dataTables_length select { width: auto; min-width: 4.5rem; }
.wrapper div.dataTables_wrapper div.dataTables_filter input {
  width: 15rem; min-width: 0; flex: 0 1 15rem; height: var(--app-control-h-sm); margin-left: 0; padding: .25rem .75rem .25rem 2rem; border-radius: var(--app-control-radius-sm); font-size: .8125rem;
  background-image: var(--app-search-icon); background-repeat: no-repeat; background-position: .625rem center; background-size: .875rem;
}
.wrapper div.dataTables_wrapper div.dataTables_info { padding-top: 0; color: var(--app-muted); font-size: .8125rem; }
.wrapper div.dataTables_wrapper div.dataTables_paginate ul.pagination { gap: .25rem; margin: 0; }
.wrapper .dataTables_wrapper .page-link {
  display: flex; align-items: center; justify-content: center; min-width: var(--app-control-h-sm); height: var(--app-control-h-sm); margin: 0; padding: 0 .625rem;
  border: 1px solid transparent; border-radius: var(--app-control-radius-sm); background: transparent;
  color: var(--app-text); font-size: .8125rem; font-weight: 600; line-height: 1;
}
.wrapper .dataTables_wrapper .page-link:hover { border-color: var(--app-line); background: var(--app-surface-2); color: var(--app-text); }
.wrapper .dataTables_wrapper .page-link:focus { box-shadow: 0 0 0 3px var(--app-accent-soft); }
.wrapper .dataTables_wrapper .page-item.active .page-link { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-on-accent); }
.wrapper .dataTables_wrapper .page-item.previous .page-link,
.wrapper .dataTables_wrapper .page-item.next .page-link { padding: 0 .75rem; border-color: var(--app-line); background: var(--app-surface); }
.wrapper .dataTables_wrapper .page-item.disabled .page-link { border-color: var(--app-line); background: var(--app-surface); color: var(--app-muted); opacity: .55; }
/* The "…" gap between page numbers is not a button. */
.wrapper .dataTables_wrapper .page-item.disabled:not(.previous):not(.next) .page-link { min-width: 1.5rem; padding: 0; border-color: transparent; background: transparent; opacity: 1; }
.wrapper div.dataTables_processing {
  margin-top: -1.5rem; padding: .75rem 1rem; border: 1px solid var(--app-line); border-radius: 12px;
  background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-popover-shadow); font-size: .8125rem;
}
.wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .875rem; }
.wrapper .dataTables_wrapper > .row .dt-buttons { margin-bottom: 0; }
.wrapper .dt-buttons .dt-button {
  height: var(--app-control-h-sm); padding: 0 .75rem; border: 1px solid var(--app-line); border-radius: var(--app-control-radius-sm);
  background: var(--app-surface); color: var(--app-text); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.wrapper .dt-buttons .dt-button:hover { border-color: var(--app-line-strong); background: var(--app-surface-2); }

/* ---------- Popovers appended to body (datepicker, dropdowns) ---------- */
body .datepicker.dropdown-menu {
  padding: .5rem; border: 1px solid var(--app-line); border-radius: 12px;
  background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-popover-shadow); font-family: var(--app-font); font-size: .8125rem;
}
body .datepicker table tr td,
body .datepicker table tr th { border-radius: 6px; }
body .datepicker table tr td span { border-radius: 8px; }
body .datepicker.dropdown-menu table tr td span:hover,
body .datepicker.dropdown-menu table tr td.day:hover,
body .datepicker.dropdown-menu table tr td span.focused,
body .datepicker.dropdown-menu table tr td.focused,
body .datepicker.dropdown-menu thead tr:first-child th:hover { background: var(--app-surface-2); color: var(--app-text); }
body .datepicker.dropdown-menu table tr td span.active,
body .datepicker.dropdown-menu table tr td span.active:hover,
body .datepicker.dropdown-menu table tr td span.active.focused,
body .datepicker.dropdown-menu table tr td.active,
body .datepicker.dropdown-menu table tr td.active:hover {
  background: var(--app-accent); border-color: var(--app-accent); color: var(--app-on-accent); text-shadow: none;
}
body .datepicker.dropdown-menu table tr td span.old,
body .datepicker.dropdown-menu table tr td span.new,
body .datepicker.dropdown-menu table tr td.old,
body .datepicker.dropdown-menu table tr td.new { color: var(--app-muted); }

/* ---------- Modals (Bootstrap 3 markup: close button first, Close button floated left) ---------- */
.wrapper .modal-header .close { order: 2; margin: -.25rem -.5rem -.25rem auto; padding: .25rem .5rem; color: var(--app-muted); font-size: 1.375rem; font-weight: 400; text-shadow: none; opacity: 1; }
.wrapper .modal-header .close:hover { color: var(--app-text); }
.wrapper .modal-footer > .float-left { margin-right: auto; }
.wrapper .modal-content { border: 0; border-radius: 16px; background: var(--app-surface); color: var(--app-text); box-shadow: 0 24px 48px rgba(16, 40, 56, .2); }
.wrapper .modal-header { align-items: center; padding: 1rem 1.25rem; border-color: var(--app-line); }
.wrapper .modal-body { padding: 1.25rem; }
.wrapper .modal-footer { gap: .5rem; padding: .875rem 1.25rem; border-color: var(--app-line); }
.wrapper .modal-footer > * { margin: 0; }
.wrapper .modal-title { font-size: 1rem; font-weight: 700; line-height: 1.5rem; }

/* Collapsible sections inside a card (former Bootstrap 3 panels) */
.wrapper .app-collapse-card { margin-top: .75rem; margin-bottom: .75rem; box-shadow: none; }
.wrapper .app-collapse-card > .card-header { padding: .625rem 1rem; border-bottom: 0; }
.wrapper .app-collapse-card > .card-header:has(+ .collapse.show),
.wrapper .app-collapse-card > .card-header:has(+ .collapsing) { border-bottom: 1px solid var(--app-line); }
.wrapper .app-collapse-card > .card-header a { display: block; color: var(--app-accent); font-size: .875rem; font-weight: 600; }

/* ---------- Feature card: icon, text and one call to action ---------- */
.app-feature {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 1.5rem; padding: 1.25rem;
  background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--app-radius); box-shadow: var(--app-shadow);
}
.app-feature-icon { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.app-feature-body { flex: 1 1 16rem; min-width: 0; }
.app-feature-body p { margin: .25rem 0 0; color: var(--app-muted); }

/* Chart canvas box for Chart.js with maintainAspectRatio: false */
.app-chart-box { position: relative; height: 18rem; }
.app-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.app-chart-head .app-section-title { margin: 0; }
.app-chart-sub { margin: .25rem 0 0; color: var(--app-muted); font-size: .8125rem; }
.app-chart-stat { flex-shrink: 0; text-align: right; }
.app-chart-stat strong { display: block; color: var(--app-text); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.app-chart-stat span { color: var(--app-muted); font-size: .75rem; }
.app-chart-empty { margin: 2rem 0; color: var(--app-muted); text-align: center; }
.app-keyvalue-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 10px; background: var(--app-surface-2); }
.app-keyvalue-inline dt { color: var(--app-muted); font-size: .75rem; font-weight: 600; }
.app-keyvalue-inline dd { margin: 0; color: var(--app-text); font-weight: 700; }
.app-chart-box-lg { height: 20rem; }
.app-chart-note { margin: .5rem 0 0; color: var(--app-muted); font-size: .75rem; }
/* Segmented switch (e.g. Lembar / Rupiah). */
.app-seg { display: inline-flex; flex-shrink: 0; padding: 3px; border-radius: 10px; background: var(--app-surface-2); border: 1px solid var(--app-line); }
.app-seg > button { min-height: 32px; padding: 0 .875rem; border: 0; border-radius: 8px; background: transparent; color: var(--app-muted); font-size: .8125rem; font-weight: 600; }
.app-seg > button[aria-pressed="true"] { background: var(--app-surface); color: var(--app-text); box-shadow: 0 1px 2px rgba(16, 40, 56, .12); }
.app-seg > button:focus-visible { outline: 3px solid var(--app-focus); outline-offset: 1px; }
/* Legend chips that carry each series' total. */
.app-legend-chips { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.app-legend-chip { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; align-items: center; min-width: 13rem; padding: .625rem .875rem; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-surface-2); }
.app-legend-chip > i { width: .625rem; height: .625rem; border-radius: 50%; }
.app-legend-chip > span { color: var(--app-muted); font-size: .8125rem; font-weight: 600; }
.app-legend-chip > strong { grid-column: 2; color: var(--app-text); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.app-legend-chip > small { grid-column: 2; color: var(--app-muted); font-size: .75rem; }
/* Ranked list with in-row bars (Tunggakan per Kecamatan). */
.app-rank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rank-rows, 7), auto); grid-auto-flow: column; column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.app-rank-item { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: center; column-gap: .625rem; row-gap: .375rem; padding: .625rem 0; border-bottom: 1px solid var(--app-line); }
.app-rank-no { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--app-surface-2); color: var(--app-muted); font-size: .75rem; font-weight: 700; }
.app-rank-item.is-top .app-rank-no { background: color-mix(in srgb, var(--app-chart-kub) 18%, transparent); color: var(--app-text); }
.app-rank-name { overflow: hidden; color: var(--app-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app-rank-value { text-align: right; white-space: nowrap; }
.app-rank-value strong { color: var(--app-text); font-variant-numeric: tabular-nums; }
.app-rank-value small { margin-left: .375rem; color: var(--app-muted); font-size: .75rem; }
.app-rank-bar { grid-column: 2 / 4; height: 6px; overflow: hidden; border-radius: 999px; background: var(--app-track); }
.app-rank-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--app-chart-kub); }
@media (max-width: 767.98px) { .app-rank { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } .app-legend-chip { flex: 1 1 100%; } }
@media (max-width: 575.98px) { .app-chart-head { flex-direction: column; gap: .5rem; } .app-chart-stat { text-align: left; } }

/* ---------- Sections ---------- */
.app-section { margin-bottom: .5rem; }
.app-section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .25rem .75rem; margin-bottom: .75rem;
}
.app-section-title { margin: 0; font-size: .9375rem; font-weight: 700; }
.app-section-caption { font-size: .8125rem; color: var(--app-muted); }
.app-section-link { font-size: .8125rem; font-weight: 600; color: var(--app-accent); }
.app-section-link:hover { color: var(--app-text); }
.app-grid-row > [class*="col-"] { margin-bottom: 1rem; }

/* ---------- KPI cards ---------- */
.app-kpi {
  height: 100%; display: flex; flex-direction: column; gap: .625rem; padding: 1rem 1.125rem;
  background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}
.app-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.app-kpi-label { font-size: .8125rem; font-weight: 600; color: var(--app-muted); }
.app-kpi-icon {
  flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: .9375rem;
}
.app-kpi-value {
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.app-kpi-note { margin-top: auto; font-size: .8125rem; color: var(--app-muted); }
.app-progress { height: 6px; border-radius: 999px; background: var(--app-track); overflow: hidden; }
.app-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--app-accent); }

.app-tone-good { background: var(--app-good-soft); color: var(--app-good); }
.app-tone-danger { background: var(--app-danger-soft); color: var(--app-danger); }
.app-tone-warn { background: var(--app-warn-soft); color: var(--app-warn); }
.app-tone-blue { background: var(--app-blue-soft); color: var(--app-blue); }
.app-tone-accent { background: var(--app-accent-soft); color: var(--app-accent); }

/* ---------- Panels ---------- */
.app-panel {
  height: 100%; padding: 1.25rem; background: var(--app-surface); border: 1px solid var(--app-line);
  border-radius: var(--app-radius); box-shadow: var(--app-shadow);
}
.app-panel .app-section-head { margin-bottom: .5rem; }

/* ---------- Bank balances ---------- */
.app-bank { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem .875rem; padding: .75rem 0; }
.app-bank + .app-bank { border-top: 1px solid var(--app-line); }
.app-bank-icon {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.app-bank-info { flex: 1 1 11rem; min-width: 0; }
.app-bank-name { font-weight: 600; }
.app-bank-number { font-weight: 500; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.app-bank-holder { font-size: .8125rem; color: var(--app-muted); }
.app-bank-amount { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.app-copy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  min-width: 2.5rem; height: var(--app-control-h); padding: 0 .75rem; border: 1px solid var(--app-line); border-radius: var(--app-control-radius);
  background: var(--app-surface); color: var(--app-text); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.app-copy-btn:hover { border-color: var(--app-line-strong); background: var(--app-surface-2); }
.app-copy-btn.is-copied { border-color: transparent; background: var(--app-accent-soft); color: var(--app-accent); }

/* ---------- Arrears ---------- */
.app-total-label { font-size: .8125rem; color: var(--app-muted); }
.app-total-value { font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.app-split { display: flex; gap: 3px; height: 10px; margin: 1rem 0; border-radius: 999px; overflow: hidden; }
.app-split > span { display: block; }
.app-split-warn { background: var(--app-warn); }
.app-split-danger { flex: 1 1 auto; background: var(--app-danger); }
.app-split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; }
.app-split-item { padding: .875rem; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface-2); }
.app-split-label { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--app-muted); }
.app-split-value { margin-top: .25rem; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-swatch { flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; }
.app-swatch-warn { background: var(--app-warn); }
.app-swatch-danger { background: var(--app-danger); }

/* ---------- Legends ---------- */
.app-legend { display: flex; flex-wrap: wrap; gap: .375rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--app-muted); }
.app-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.app-legend-swatch { width: 10px; height: 10px; border-radius: 3px; }
.app-legend-line { width: 16px; height: 3px; border-radius: 2px; }
.app-legend-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.app-legend-drd { background: var(--app-chart-drd); }
.app-legend-trx { background: var(--app-chart-trx); }
.app-legend-per { background: var(--app-chart-per); }
.app-legend-kub { background: var(--app-chart-kub); }

/* DRD & LPP chart */
.wrapper .card > .card-header .app-section-head { margin-bottom: 0; }
.app-chart-scroll { overflow-x: auto; }
.app-chart { position: relative; height: 20rem; min-width: 36rem; }
.app-chart-note { margin: .75rem 0 0; font-size: .8125rem; color: var(--app-muted); }

/* ---------- Customer map ---------- */
.app-map-status { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--app-accent); }
.app-map-status::before {
  content: "\f3c5"; margin-right: .375rem;
  font-family: "Font Awesome 5 Free"; font-weight: 900;
}
.app-map-search { display: flex; flex-wrap: wrap; gap: .625rem; margin-bottom: .75rem; }
.app-map-search-field { flex: 1 1 15rem; min-width: 0; }
.app-map-legend { margin-bottom: .875rem; }
.app-map {
  width: 100%; height: clamp(20rem, 60vh, 37.5rem);
  border: 1px solid var(--app-line); border-radius: var(--app-radius); overflow: hidden; background: var(--app-surface-2);
}

/* Select2 (customer search) */
.wrapper .app-map-search .select2-container--bootstrap4 .select2-selection {
  min-height: var(--app-control-h); border: 1px solid var(--app-line); border-radius: var(--app-control-radius); background: var(--app-surface);
}
.wrapper .app-map-search .select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-accent-soft);
}
.wrapper .app-map-search .select2-container--bootstrap4 .select2-selection--multiple .select2-search__field { margin-top: .5rem; padding-left: .5rem; color: var(--app-text); font-size: .875rem; }
.wrapper .app-map-search .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
  margin-top: .375rem; border: 0; border-radius: 6px; background: var(--app-accent-soft); color: var(--app-text); font-size: .8125rem;
}

/* ---------- Responsive ---------- */
/* Keep the row label visible while wide report tables scroll sideways. */
@media (max-width: 991.98px) {
  .wrapper .app-table:not(.app-table-nested) > * > tr:not(.expandable-body) > :first-child {
    position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--app-line);
  }
  .wrapper .app-table:not(.app-table-nested) > tbody > tr:not(.expandable-body):not(.app-table-total) > td:first-child { background: var(--app-surface); }
}

/* DataTables centres its controls on small screens (pagination with !important); keep them all centred. */
@media (max-width: 767.98px) {
  .wrapper div.dataTables_wrapper div.dataTables_info { text-align: center; }
  .wrapper div.dataTables_wrapper div.dataTables_filter { margin-top: .625rem; }
  .wrapper div.dataTables_wrapper div.dataTables_filter label { display: flex; width: 100%; }
  .wrapper div.dataTables_wrapper div.dataTables_filter input { flex: 1 1 auto; width: auto; min-width: 0; }
  .wrapper div.dataTables_wrapper div.dataTables_paginate ul.pagination { flex-wrap: wrap; gap: .125rem; margin-top: .625rem; }
  /* Previous/Next become arrows so a full pager fits one row; the words stay for screen readers. */
  .wrapper .dataTables_wrapper .page-item.previous .page-link,
  .wrapper .dataTables_wrapper .page-item.next .page-link { width: 2rem; padding: 0; font-size: 0; }
  .wrapper .dataTables_wrapper .page-item.previous .page-link::before,
  .wrapper .dataTables_wrapper .page-item.next .page-link::before { font-family: "Font Awesome 5 Free"; font-size: .6875rem; font-weight: 900; }
  .wrapper .dataTables_wrapper .page-item.previous .page-link::before { content: "\f053"; }
  .wrapper .dataTables_wrapper .page-item.next .page-link::before { content: "\f054"; }
}

@media (max-width: 575.98px) {
  .wrapper .content-header { padding: 1.125rem .25rem .875rem; }
  .wrapper .content-header h1 { font-size: 1.375rem; }
  .wrapper .card-body { padding: 1rem; }
  .wrapper .card > .card-header { padding: .75rem 1rem; }
  .wrapper .app-filter .input-group,
  .wrapper .app-filter .input-group.date { flex: 1 1 100%; }
  .wrapper .app-filter .input-group > .form-control,
  .wrapper .app-filter .input-group.date .form-control { flex: 1 1 auto; width: 1%; min-width: 0; }
  .wrapper .app-filter > .btn { flex: 1 1 auto; }
  .app-map-search .app-btn-primary { flex: 1 1 100%; }
  .app-chart { height: 17rem; }
  .app-total-value { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wrapper * { transition: none !important; animation: none !important; }
}