:root{--app-bg:#f5f7fb;--sidebar:#111827;--sidebar-muted:#9ca3af;--primary:#2563eb;--card-radius:18px}*{box-sizing:border-box}body{font-family:Inter,system-ui,sans-serif;background:var(--app-bg);color:#111827}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:var(--sidebar);color:white;z-index:1040}.brand{display:flex;align-items:center;gap:12px;padding:24px}.brand strong{display:block}.brand small{display:block;color:#94a3b8;font-size:.75rem}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#2563eb,#60a5fa);display:grid;place-items:center;font-weight:800;color:white;font-size:1.2rem}.sidebar .nav-link{color:#cbd5e1;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px}.sidebar .nav-link:hover{color:white;background:rgba(255,255,255,.07)}.sidebar .nav-section{font-size:.68rem;letter-spacing:.1em;color:#64748b;margin:18px 12px 6px}.sidebar .nav-link.disabled{opacity:.45}.user-card{display:flex;gap:10px;align-items:center;padding:12px;background:rgba(255,255,255,.06);border-radius:14px}.avatar{width:38px;height:38px;border-radius:50%;background:#334155;display:grid;place-items:center;font-weight:700}.main-content{margin-left:270px;min-height:100vh}.topbar{height:72px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid #e5e7eb;display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:1020}.content-wrap{padding:28px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.page-head h1{font-size:1.65rem;font-weight:700;margin:0}.page-head p{color:#64748b;margin:5px 0 0}.metric-card{background:white;border-radius:var(--card-radius);padding:20px;display:flex;gap:16px;align-items:center;box-shadow:0 5px 20px rgba(15,23,42,.05);height:100%}.metric-icon{width:48px;height:48px;border-radius:14px;background:#eff6ff;color:#2563eb;display:grid;place-items:center;font-size:1.25rem}.metric-card span{display:block;color:#64748b;font-size:.84rem}.metric-card strong{display:block;font-size:1.45rem;margin-top:2px}.metric-card.muted{opacity:.65}.card{border-radius:var(--card-radius)}.table>:not(caption)>*>*{padding:15px 18px}.table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b;background:#f8fafc;border-bottom:1px solid #e5e7eb}.code-pill{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f1f5f9;border-radius:8px;padding:5px 8px;font-size:.84rem}.form-card{max-width:950px}.form-control,.form-select,.input-group-text{min-height:44px;border-color:#dbe2ea}.btn{border-radius:10px}.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 10%,#dbeafe,transparent 30%),radial-gradient(circle at 80% 80%,#e0e7ff,transparent 32%),#f8fafc}.login-card{width:min(100%,430px);background:white;padding:34px;border-radius:24px;box-shadow:0 20px 60px rgba(15,23,42,.12)}.login-card .brand{padding:0}.min-w-0{min-width:0}@media(max-width:991.98px){.main-content{margin-left:0}.content-wrap{padding:20px}.topbar{padding:0 16px}.page-head{align-items:flex-start;flex-direction:column}.page-head .btn{width:100%}}[data-bs-theme="dark"] body{--app-bg:#0b1120;color:#e5e7eb}[data-bs-theme="dark"] .topbar,[data-bs-theme="dark"] .metric-card,[data-bs-theme="dark"] .card{background:#111827!important;color:#e5e7eb}[data-bs-theme="dark"] .table{--bs-table-bg:#111827;--bs-table-color:#e5e7eb;--bs-table-border-color:#293548}[data-bs-theme="dark"] .table thead th{background:#0f172a;color:#94a3b8}
.router-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#e5e7eb;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}.router-detail-grid>div{background:#fff;padding:18px}.router-detail-grid span{display:block;font-size:.78rem;color:#64748b;margin-bottom:5px}.router-detail-grid strong{display:block;word-break:break-word}.status-big{display:flex;align-items:center;gap:12px;padding:15px;border-radius:14px;background:#f8fafc}.status-big>i{font-size:1.6rem;color:#64748b}.status-big strong,.status-big small{display:block}.status-big small{color:#64748b}.status-big.success{background:#ecfdf5}.status-big.success>i,.status-big.success strong{color:#047857}@media(max-width:767.98px){.router-detail-grid{grid-template-columns:1fr}}[data-bs-theme="dark"] .router-detail-grid{background:#293548;border-color:#293548}[data-bs-theme="dark"] .router-detail-grid>div,[data-bs-theme="dark"] .status-big{background:#111827}
.status-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid #eef2f7}.status-row:last-of-type{border-bottom:0}.rank-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eef2f7}.rank-row:last-child{border-bottom:0}.rank-no{width:30px;height:30px;border-radius:9px;background:#eff6ff;color:#2563eb;display:grid;place-items:center;font-weight:700;font-size:.82rem}.finance-card{background:#fff;border-radius:var(--card-radius);padding:20px;box-shadow:0 5px 20px rgba(15,23,42,.05);height:100%}.finance-card span,.finance-card small{display:block;color:#64748b}.finance-card span{font-size:.82rem}.finance-card strong{display:block;font-size:1.35rem;margin:6px 0 3px}.finance-card small{font-size:.76rem}.group-report-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #eef2f7}.group-report-row:last-child{border-bottom:0}.group-report-row strong{font-size:.88rem;white-space:nowrap}[data-bs-theme="dark"] .finance-card{background:#111827;color:#e5e7eb}[data-bs-theme="dark"] .status-row,[data-bs-theme="dark"] .rank-row,[data-bs-theme="dark"] .group-report-row{border-color:#293548}
/* Patch 07.2.2 - compact premium pagination */
.smart-pager-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid #e9eef5}.smart-pager-info{font-size:.82rem;color:#64748b}.smart-pager{display:flex;align-items:center;gap:6px}.smart-page{min-width:38px;height:38px;padding:0 11px;border:1px solid #dfe6ef;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#475569;background:#fff;font-weight:600;font-size:.86rem;transition:.18s ease}.smart-page:hover{border-color:#a8b7cc;background:#f8fafc;color:#0f172a;transform:translateY(-1px)}.smart-page.active{background:#0f172a;border-color:#0f172a;color:#fff;box-shadow:0 5px 14px rgba(15,23,42,.16)}.smart-page.disabled{opacity:.4;pointer-events:none}.smart-page.nav-page{gap:7px;min-width:auto}.smart-ellipsis{min-width:26px;text-align:center;color:#94a3b8}.smart-page-mobile{display:none;height:38px;align-items:center;gap:6px;padding:0 12px;border:1px solid #dfe6ef;border-radius:11px;color:#64748b;background:#fff;font-size:.86rem}.smart-page-mobile strong{color:#0f172a}.finance-net{border-left:4px solid #16a34a}.finance-fee{border-left:4px solid #f59e0b}.fee-unsynced{font-size:.72rem;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:3px 7px;display:inline-flex;align-items:center;gap:4px}.fee-synced{font-size:.72rem;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;padding:3px 7px;display:inline-flex;align-items:center;gap:4px}@media(max-width:767.98px){.smart-pager-wrap{align-items:stretch;flex-direction:column}.smart-pager{justify-content:space-between}.smart-page-numbers{display:none}.smart-page-mobile{display:flex}.smart-page.nav-page span{display:none}.smart-page.nav-page{width:40px;padding:0}.smart-pager-info{text-align:center}}[data-bs-theme="dark"] .smart-page,[data-bs-theme="dark"] .smart-page-mobile{background:#111827;border-color:#334155;color:#cbd5e1}[data-bs-theme="dark"] .smart-page.active{background:#e5e7eb;border-color:#e5e7eb;color:#111827}[data-bs-theme="dark"] .smart-pager-wrap{border-color:#293548}

/* =========================================================
   PATCH 08.2.5 - PREMIUM VISUAL WORKSPACE
   Tampilan saja. Tidak mengubah route, controller, JS, query,
   form action, field, tabel database, maupun flow aplikasi.
   ========================================================= */

:root{
    --workspace-surface:#ffffff;
    --workspace-surface-soft:#f8fafc;
    --workspace-border:#e6ebf2;
    --workspace-border-strong:#d8e0ea;
    --workspace-text:#0f172a;
    --workspace-muted:#64748b;
    --workspace-blue:#2563eb;
    --workspace-indigo:#4f46e5;
    --workspace-cyan:#0891b2;
    --workspace-green:#16a34a;
    --workspace-amber:#d97706;
    --workspace-violet:#7c3aed;
    --workspace-rose:#e11d48;
    --workspace-shadow:0 12px 34px rgba(15,23,42,.07);
    --workspace-shadow-hover:0 18px 42px rgba(15,23,42,.11);
}

.content-wrap{
    background:
        radial-gradient(circle at 100% 0,rgba(37,99,235,.045),transparent 23rem),
        radial-gradient(circle at 0 100%,rgba(124,58,237,.035),transparent 24rem);
}
.page-head{padding:2px 2px 0}
.page-head h1{letter-spacing:-.025em;color:var(--workspace-text)}
.page-head p{max-width:850px;line-height:1.6}

.card,.metric-card,.finance-card{
    position:relative;
    border:1px solid var(--workspace-border)!important;
    background:var(--workspace-surface);
    box-shadow:var(--workspace-shadow)!important;
}
.card{overflow:visible}
.card-header{border-color:var(--workspace-border)!important}
.card-header.bg-transparent{background:linear-gradient(180deg,rgba(248,250,252,.95),rgba(255,255,255,.3))!important}
.card h2,.card h5,.card .h6{letter-spacing:-.012em}

.metric-card,.finance-card{
    overflow:hidden;isolation:isolate;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.metric-card::before,.finance-card::before{
    content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--card-accent,var(--workspace-blue));
}
.metric-card::after,.finance-card::after{
    content:"";position:absolute;width:120px;height:120px;right:-56px;top:-62px;border-radius:50%;
    background:var(--card-glow,rgba(37,99,235,.08));z-index:-1;
}
.metric-card:hover,.finance-card:hover{transform:translateY(-2px);box-shadow:var(--workspace-shadow-hover)!important;border-color:var(--workspace-border-strong)!important}
.row>[class*="col"]:nth-child(6n+1) .metric-card,.row>[class*="col"]:nth-child(6n+1) .finance-card{--card-accent:#2563eb;--card-glow:rgba(37,99,235,.10)}
.row>[class*="col"]:nth-child(6n+2) .metric-card,.row>[class*="col"]:nth-child(6n+2) .finance-card{--card-accent:#7c3aed;--card-glow:rgba(124,58,237,.10)}
.row>[class*="col"]:nth-child(6n+3) .metric-card,.row>[class*="col"]:nth-child(6n+3) .finance-card{--card-accent:#0891b2;--card-glow:rgba(8,145,178,.10)}
.row>[class*="col"]:nth-child(6n+4) .metric-card,.row>[class*="col"]:nth-child(6n+4) .finance-card{--card-accent:#16a34a;--card-glow:rgba(22,163,74,.10)}
.row>[class*="col"]:nth-child(6n+5) .metric-card,.row>[class*="col"]:nth-child(6n+5) .finance-card{--card-accent:#d97706;--card-glow:rgba(217,119,6,.11)}
.row>[class*="col"]:nth-child(6n+6) .metric-card,.row>[class*="col"]:nth-child(6n+6) .finance-card{--card-accent:#e11d48;--card-glow:rgba(225,29,72,.09)}
.metric-icon{
    color:var(--card-accent,var(--workspace-blue));
    background:color-mix(in srgb,var(--card-accent,var(--workspace-blue)) 11%,white);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--card-accent,var(--workspace-blue)) 14%,transparent);
}
.metric-card span,.finance-card span{font-weight:600;letter-spacing:.015em}
.metric-card small,.finance-card small{margin-top:5px;line-height:1.45}
.finance-net,.finance-fee{border-left:1px solid var(--workspace-border)!important}

.router-detail-grid{border-color:var(--workspace-border)!important;background:var(--workspace-border)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.router-detail-grid>div{background:linear-gradient(180deg,#fff,#fbfdff)}
.status-big{border:1px solid var(--workspace-border);background:linear-gradient(180deg,#fbfdff,#f8fafc)}
.status-big.success{border-color:#bbf7d0;background:linear-gradient(180deg,#f0fdf4,#ecfdf5)}
.card .text-secondary.small,.card small.text-secondary{line-height:1.5}
.alert{border-radius:14px;box-shadow:0 5px 18px rgba(15,23,42,.035)}

.card-body>.table-responsive{border:1px solid var(--workspace-border);border-radius:14px;background:var(--workspace-surface);overflow:auto}
.card>.table-responsive{border-radius:0 0 var(--card-radius) var(--card-radius);background:var(--workspace-surface);overflow:auto}
.table-responsive{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
.table-responsive::-webkit-scrollbar{height:9px;width:9px}
.table-responsive::-webkit-scrollbar-thumb{background:#cbd5e1;border:2px solid transparent;background-clip:padding-box;border-radius:999px}
.table{margin-bottom:0;vertical-align:middle}
.table>:not(caption)>*>*{padding:14px 16px;border-bottom-color:#edf1f6}
.table thead th{
    position:relative;color:#475569;font-weight:700;
    background:linear-gradient(180deg,#f8fafc,#f4f7fb);
    border-bottom:1px solid var(--workspace-border-strong);white-space:nowrap;
}
.table thead th::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:1px;background:linear-gradient(90deg,rgba(37,99,235,.24),transparent)}
.table tbody tr{transition:background-color .14s ease,box-shadow .14s ease}
.table tbody tr:nth-child(even){background:rgba(248,250,252,.58)}
.table-hover>tbody>tr:hover>*{--bs-table-bg-state:rgba(239,246,255,.72)}
.table tbody tr:hover{box-shadow:inset 3px 0 0 rgba(37,99,235,.45)}
.table td{color:#334155}
.table td strong,.table td.fw-semibold{color:#0f172a}
.table code,.code-pill{border:1px solid #e2e8f0;background:#f8fafc;color:#334155}
.table .badge{padding:.48em .72em;border-radius:999px;font-weight:650;letter-spacing:.015em}
.table tbody tr:only-child td.text-center{background:radial-gradient(circle at 50% 0,rgba(37,99,235,.055),transparent 70%)}

.dt-container{color:var(--workspace-text)}
.dt-container .dt-layout-row{margin:0;padding:11px 2px;gap:12px}
.dt-container .dt-layout-row:first-child{padding-top:2px;padding-bottom:14px}
.dt-container .dt-layout-row:last-child{padding-top:15px}
.dt-container .dt-search,.dt-container .dt-length{display:flex;align-items:center;gap:8px;color:var(--workspace-muted);font-size:.82rem;font-weight:600}
.dt-container .dt-search input,.dt-container .dt-length select{
    border:1px solid var(--workspace-border-strong)!important;border-radius:10px!important;
    background:#fff!important;min-height:38px;box-shadow:0 3px 10px rgba(15,23,42,.035);
}
.dt-container .dt-search input{min-width:220px;padding:.45rem .75rem!important}
.dt-container .dt-info{color:var(--workspace-muted);font-size:.82rem}
.dt-container .pagination{gap:5px}
.dt-container .page-link{
    min-width:36px;height:36px;display:grid;place-items:center;border-radius:9px!important;
    border:1px solid var(--workspace-border-strong);color:#475569;background:#fff;font-weight:600;box-shadow:none!important;
}
.dt-container .active>.page-link{background:#0f172a;border-color:#0f172a;color:#fff}
.dt-container .page-link:hover{color:#0f172a;background:#f8fafc;border-color:#b9c5d4}

.card-body>form.row,.card-body>form.border,.card-body>form[id$="Filter"]{border-radius:14px}
.form-label{font-size:.79rem;font-weight:650;color:#475569;margin-bottom:.42rem}
.form-control,.form-select,.input-group-text{border-radius:10px;background-color:#fff;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.form-control:focus,.form-select:focus{border-color:#93b4f5;box-shadow:0 0 0 .22rem rgba(37,99,235,.09)}
.btn{font-weight:600;letter-spacing:.005em}
.btn-primary{box-shadow:0 6px 14px rgba(37,99,235,.16)}
.btn-success{box-shadow:0 6px 14px rgba(22,163,74,.13)}
.btn-sm{border-radius:9px}
.smart-pager-wrap{border-top-color:var(--workspace-border)}
.smart-page,.smart-page-mobile{box-shadow:0 3px 10px rgba(15,23,42,.035)}

@media(max-width:767.98px){
    .card::before{content:none!important;display:none!important}
    .metric-card,.finance-card{padding:17px}
    .metric-icon{width:44px;height:44px;border-radius:12px}
    .table>:not(caption)>*>*{padding:12px 13px}
    .dt-container .dt-layout-row{flex-direction:column;align-items:stretch!important}
    .dt-container .dt-search,.dt-container .dt-length{justify-content:space-between}
    .dt-container .dt-search input{min-width:0;width:100%}
}

[data-bs-theme="dark"]{
    --workspace-surface:#111827;--workspace-surface-soft:#0f172a;
    --workspace-border:#263244;--workspace-border-strong:#334155;
    --workspace-text:#e5e7eb;--workspace-muted:#94a3b8;
    --workspace-shadow:0 12px 34px rgba(0,0,0,.22);
    --workspace-shadow-hover:0 18px 44px rgba(0,0,0,.30);
}
[data-bs-theme="dark"] .content-wrap{background:radial-gradient(circle at 100% 0,rgba(59,130,246,.06),transparent 23rem),radial-gradient(circle at 0 100%,rgba(139,92,246,.05),transparent 24rem)}
[data-bs-theme="dark"] .page-head h1,[data-bs-theme="dark"] .table td strong,[data-bs-theme="dark"] .table td.fw-semibold{color:#e5e7eb}
[data-bs-theme="dark"] .card,[data-bs-theme="dark"] .metric-card,[data-bs-theme="dark"] .finance-card,[data-bs-theme="dark"] .card-body>.table-responsive,[data-bs-theme="dark"] .card>.table-responsive{background:#111827!important;border-color:var(--workspace-border)!important}
[data-bs-theme="dark"] .card-header.bg-transparent{background:linear-gradient(180deg,#111827,#101827)!important}
[data-bs-theme="dark"] .metric-icon{background:color-mix(in srgb,var(--card-accent,var(--workspace-blue)) 18%,#111827)}
[data-bs-theme="dark"] .router-detail-grid>div{background:linear-gradient(180deg,#111827,#0f172a)}
[data-bs-theme="dark"] .status-big{background:linear-gradient(180deg,#111827,#0f172a);border-color:#334155}
[data-bs-theme="dark"] .table tbody tr:nth-child(even){background:rgba(15,23,42,.6)}
[data-bs-theme="dark"] .table-hover>tbody>tr:hover>*{--bs-table-bg-state:rgba(30,58,138,.16)}
[data-bs-theme="dark"] .table td{color:#cbd5e1}
[data-bs-theme="dark"] .table code,[data-bs-theme="dark"] .code-pill{background:#0f172a;color:#cbd5e1;border-color:#334155}
[data-bs-theme="dark"] .dt-container .dt-search input,[data-bs-theme="dark"] .dt-container .dt-length select,[data-bs-theme="dark"] .dt-container .page-link,[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select,[data-bs-theme="dark"] .input-group-text{background:#0f172a!important;border-color:#334155!important;color:#e5e7eb!important}
[data-bs-theme="dark"] .dt-container .active>.page-link{background:#e5e7eb!important;border-color:#e5e7eb!important;color:#111827!important}
[data-bs-theme="dark"] .form-label{color:#cbd5e1}



/* =========================================================
   PATCH 08.2.6 — TABLE ACCENT FIX
   Card tetap premium TANPA garis biru.
   Accent biru hanya untuk workspace tabel.
   ========================================================= */

/* Jangan pernah tampilkan garis accent pada card biasa. */
.card::before{
    content:none!important;
    display:none!important;
}

/*
 * Accent tabel:
 * border atas biru mengikuti radius sudut kiri/kanan atas.
 * Bukan pill, bukan garis melingkar mengelilingi card.
 */
.table-responsive{
    position:relative;
    background:var(--workspace-surface);
    border:1px solid var(--workspace-border)!important;
    border-top:3px solid var(--workspace-blue)!important;
    border-radius:14px!important;
    overflow:auto;
}

/* Tabel yang langsung berada di dalam card tetap memiliki workspace sendiri. */
.card > .table-responsive,
.card-body > .table-responsive{
    border:1px solid var(--workspace-border)!important;
    border-top:3px solid var(--workspace-blue)!important;
    border-radius:14px!important;
}

/* Hindari accent biru ganda di header kolom. */
.table thead th::after{
    content:none!important;
    display:none!important;
}

/* Header tetap premium tetapi bersih. */
.table thead th{
    background:linear-gradient(180deg,#f8fafc,#f4f7fb);
    border-bottom:1px solid var(--workspace-border-strong);
}

/* Supaya lengkungan top workspace terlihat rapi pada sudut tabel. */
.table-responsive > .table{
    margin-bottom:0;
}
.table-responsive > .table thead tr:first-child th:first-child{
    border-top-left-radius:10px;
}
.table-responsive > .table thead tr:first-child th:last-child{
    border-top-right-radius:10px;
}

/* Card tetap memakai tampilan premium dari Patch 08.2.5. */
.card,
.metric-card,
.finance-card{
    border:1px solid var(--workspace-border)!important;
    box-shadow:var(--workspace-shadow)!important;
}

/* Dark mode table accent */
[data-bs-theme="dark"] .table-responsive,
[data-bs-theme="dark"] .card > .table-responsive,
[data-bs-theme="dark"] .card-body > .table-responsive{
    background:#111827;
    border-color:var(--workspace-border)!important;
    border-top-color:#3b82f6!important;
}

[data-bs-theme="dark"] .table thead th{
    background:linear-gradient(180deg,#0f172a,#111827);
}


/* =========================================================
   PATCH 10.2.3 — UI WORKSPACE HARMONIZATION
   Dashboard / Payment / Audit / Report share one visual system.
   ========================================================= */

.content-wrap .page-head{
    position:relative;
    overflow:hidden;
    padding:20px 22px;
    margin-bottom:18px;
    border:1px solid #e7edf4;
    border-radius:18px;
    background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}
.content-wrap .page-head::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:linear-gradient(180deg,#22d3ee,#3b82f6 48%,#8b5cf6);
}
.content-wrap .page-head h1{
    margin-bottom:4px;
    font-size:clamp(1.35rem,2vw,1.72rem);
    font-weight:760;
    letter-spacing:-.025em;
}
.content-wrap .page-head p{
    margin-bottom:0;
    color:#64748b;
}

/* Payment hub now follows the dashboard hero/panel language. */
body .payment-hub .pay-hero,
body .create-payment .create-hero{
    position:relative!important;
    overflow:hidden!important;
    padding:22px 24px!important;
    border:1px solid #e7edf4!important;
    border-radius:20px!important;
    background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
    box-shadow:0 10px 28px rgba(15,23,42,.055)!important;
}
body .payment-hub .pay-hero::before,
body .create-payment .create-hero::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:5px;
    background:linear-gradient(180deg,#22d3ee 0%,#3b82f6 48%,#8b5cf6 100%);
}
body .payment-hub .pay-card,
body .create-payment .provider-choice,
body .create-payment .coming-card{
    border:1px solid #e7edf4!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 10px 28px rgba(15,23,42,.055)!important;
}
body .payment-hub .payment-account{
    position:relative;
    overflow:hidden;
    border:1px solid #e7edf4!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#fff,#fbfdff)!important;
    box-shadow:0 5px 16px rgba(15,23,42,.035);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
body .payment-hub .payment-account:hover,
body .create-payment .provider-choice.available:hover{
    transform:translateY(-2px);
    border-color:#d9e5f4!important;
    box-shadow:0 15px 32px rgba(15,23,42,.08)!important;
}
body .payment-hub .provider-icon,
body .create-payment .provider-icon{
    background:linear-gradient(145deg,#eff6ff,#eef2ff)!important;
    border-color:#cfe0ff!important;
    color:#2563eb!important;
    box-shadow:0 5px 14px rgba(37,99,235,.08);
}
body .payment-hub .cap-chip,
body .create-payment .cap-chip{
    border-color:#dfe7f0!important;
    background:#f8fafc!important;
    color:#475569;
}
body .payment-hub .pay-card>.card-header{
    padding-top:20px!important;
}
body .payment-hub .btn-primary,
body .create-payment .btn-primary{
    box-shadow:0 7px 16px rgba(37,99,235,.16);
}

/* Audit/server pagination aligns visually with DataTables paging. */
.smart-pager-wrap{
    margin-top:15px!important;
    padding-top:15px!important;
}
.smart-page{
    min-width:36px!important;
    height:36px!important;
    border-radius:9px!important;
    box-shadow:none!important;
}
.smart-page.active{
    background:#0f172a!important;
    border-color:#0f172a!important;
    color:#fff!important;
}

/* Sidebar hierarchy: visible sections without feeling fragmented. */
.sidebar .nav-section{
    margin-top:16px;
    margin-bottom:3px;
    padding:0 12px;
    color:#94a3b8;
    font-size:.64rem;
    font-weight:800;
    letter-spacing:.11em;
}
.sidebar .nav-link{
    min-height:42px;
}
.offcanvas .nav-section{
    color:#94a3b8;
    font-size:.64rem;
    font-weight:800;
    letter-spacing:.11em;
}

/* Mobile keeps compact layout. */
@media(max-width:767.98px){
    .content-wrap .page-head{
        padding:17px 18px;
        border-radius:16px;
    }
    body .payment-hub .pay-hero,
    body .create-payment .create-hero{
        padding:18px!important;
    }
}

/* Dark-mode parity. */
[data-bs-theme="dark"] .content-wrap .page-head,
[data-bs-theme="dark"] body .payment-hub .pay-hero,
[data-bs-theme="dark"] body .create-payment .create-hero,
[data-bs-theme="dark"] body .payment-hub .pay-card,
[data-bs-theme="dark"] body .payment-hub .payment-account,
[data-bs-theme="dark"] body .create-payment .provider-choice,
[data-bs-theme="dark"] body .create-payment .coming-card{
    background:#111827!important;
    border-color:#2a374b!important;
}
[data-bs-theme="dark"] body .payment-hub .cap-chip,
[data-bs-theme="dark"] body .create-payment .cap-chip{
    background:#0f172a!important;
    border-color:#334155!important;
    color:#cbd5e1!important;
}


/* =========================================================
   PATCH 10.2.4 — OVERLAY + COMPACT SIDEBAR + BRAND ICON
   ========================================================= */

/*
 * Sidebar tidak memakai internal scrollbar.
 * Tinggi link dan jarak section menyesuaikan tinggi viewport sehingga
 * seluruh menu ROOT/TENANT tetap turun sampai bawah dengan rapi.
 */
.sidebar{
    overflow:hidden;
}
.sidebar .brand{
    flex:0 0 auto;
    padding:
        clamp(13px,2.35vh,24px)
        24px
        clamp(7px,1.25vh,14px);
}
.sidebar .brand-mark{
    width:42px;
    height:42px;
    padding:0;
    overflow:hidden;
    background:transparent;
    border-radius:13px;
    box-shadow:
        0 8px 22px rgba(37,99,235,.23),
        0 0 0 1px rgba(255,255,255,.08);
}
.sidebar .brand-mark img{
    display:block;
    width:100%;
    height:100%;
}
.sidebar .sidebar-nav{
    flex:1 1 auto;
    min-height:0;
    margin-top:clamp(5px,1.45vh,17px)!important;
    gap:clamp(0px,.22vh,3px)!important;
    overflow:visible;
}
.sidebar .sidebar-nav .nav-link{
    min-height:clamp(32px,4.5vh,42px);
    padding:
        clamp(5px,.78vh,10px)
        13px;
    font-size:clamp(.76rem,1.55vh,.91rem);
    line-height:1.15;
}
.sidebar .sidebar-nav .nav-link i{
    width:18px;
    flex:0 0 18px;
    font-size:clamp(.88rem,1.75vh,1rem);
}
.sidebar .sidebar-nav .nav-section{
    margin:
        clamp(7px,1.25vh,14px)
        12px
        clamp(1px,.4vh,4px);
    font-size:clamp(.56rem,1.05vh,.64rem);
    line-height:1.1;
}

/* Untuk layar desktop yang sangat pendek, padatkan sedikit lagi. */
@media (min-width:992px) and (max-height:720px){
    .sidebar .brand-mark{
        width:36px;
        height:36px;
        border-radius:11px;
    }
    .sidebar .brand{
        padding:10px 22px 6px;
        gap:10px;
    }
    .sidebar .brand small{
        font-size:.68rem;
    }
    .sidebar .sidebar-nav{
        margin-top:3px!important;
    }
    .sidebar .sidebar-nav .nav-link{
        min-height:31px;
        padding:5px 12px;
        font-size:.76rem;
    }
    .sidebar .sidebar-nav .nav-section{
        margin:6px 11px 2px;
        font-size:.55rem;
    }
}

/* Mobile offcanvas juga dipadatkan, bukan dibuat daftar scroll panjang. */
.offcanvas .mobile-sidebar-nav{
    gap:1px!important;
}
.offcanvas .mobile-sidebar-nav .nav-link{
    min-height:35px;
    padding:7px 10px;
    font-size:.86rem;
}
.offcanvas .mobile-sidebar-nav .nav-section{
    margin:8px 8px 2px!important;
    font-size:.58rem;
}
@media(max-height:650px){
    .offcanvas .mobile-sidebar-nav .nav-link{
        min-height:31px;
        padding:5px 9px;
        font-size:.78rem;
    }
    .offcanvas .mobile-sidebar-nav .nav-section{
        margin:5px 8px 1px!important;
        font-size:.54rem;
    }
}

/* Browser/UI brand icon. */
.brand-mark img,
.offcanvas-header img{
    filter:drop-shadow(0 4px 8px rgba(15,23,42,.16));
}


/* =========================================================
   PATCH 10.2.5 — SIDEBAR ORIGINAL SIZE + NATURAL PAGE SCROLL
   ========================================================= */

/*
 * Kembalikan ukuran menu seperti sebelum 10.2.4.
 * Sidebar TIDAK memakai scrollbar internal.
 * Jika menu lebih tinggi dari layar, seluruh halaman yang bergerak turun,
 * sehingga item paling bawah tetap dapat dicapai secara natural.
 */
@media (min-width:992px){
    .app-shell{
        display:flex;
        align-items:flex-start;
        min-height:100vh;
    }

    .sidebar{
        position:sticky!important;
        top:0;
        inset:auto!important;
        flex:0 0 270px;
        width:270px;
        min-width:270px;
        min-height:100vh;
        height:max-content;
        overflow:visible!important;
        align-self:flex-start;
    }

    .main-content{
        flex:1 1 auto;
        min-width:0;
        margin-left:0!important;
    }

    /* Ukuran asli menu dikembalikan */
    .sidebar .brand{
        padding:24px!important;
        gap:12px!important;
    }

    .sidebar .brand-mark{
        width:42px!important;
        height:42px!important;
        border-radius:13px!important;
    }

    .sidebar .brand small{
        font-size:.75rem!important;
    }

    .sidebar .sidebar-nav{
        flex:0 0 auto!important;
        min-height:auto!important;
        margin-top:1.5rem!important;
        gap:.25rem!important;
        overflow:visible!important;
    }

    .sidebar .sidebar-nav .nav-link{
        min-height:42px!important;
        padding:11px 13px!important;
        font-size:inherit!important;
        line-height:normal!important;
    }

    .sidebar .sidebar-nav .nav-link i{
        width:auto!important;
        flex:0 0 auto!important;
        font-size:inherit!important;
    }

    .sidebar .sidebar-nav .nav-section{
        margin:18px 12px 6px!important;
        font-size:.64rem!important;
        line-height:normal!important;
    }
}

/* Batalkan pemadatan khusus layar pendek dari patch sebelumnya. */
@media (min-width:992px) and (max-height:720px){
    .sidebar .brand-mark{
        width:42px!important;
        height:42px!important;
        border-radius:13px!important;
    }

    .sidebar .brand{
        padding:24px!important;
        gap:12px!important;
    }

    .sidebar .brand small{
        font-size:.75rem!important;
    }

    .sidebar .sidebar-nav{
        margin-top:1.5rem!important;
    }

    .sidebar .sidebar-nav .nav-link{
        min-height:42px!important;
        padding:11px 13px!important;
        font-size:inherit!important;
    }

    .sidebar .sidebar-nav .nav-section{
        margin:18px 12px 6px!important;
        font-size:.64rem!important;
    }
}


/* =========================================================
   PATCH 10.2.6 — PREMIUM SIDEBAR REDESIGN
   Full-height rail, natural page scroll, no internal scrollbar.
   ========================================================= */

@media (min-width:992px){
    /*
     * Sidebar menjadi kolom layout sungguhan.
     * Background ikut sepanjang tinggi halaman, jadi tidak pernah "putus"
     * walau konten kanan lebih panjang dari viewport.
     */
    .app-shell{
        display:flex!important;
        align-items:stretch!important;
        min-height:100vh;
        background:var(--app-bg);
    }

    .sidebar{
        position:relative!important;
        inset:auto!important;
        top:auto!important;
        flex:0 0 270px!important;
        width:270px!important;
        min-width:270px!important;
        min-height:100vh!important;
        height:auto!important;
        align-self:stretch!important;
        overflow:visible!important;
        color:#f8fafc;
        border-right:1px solid rgba(148,163,184,.12);
        background:
            radial-gradient(
                circle at 20% 4%,
                rgba(56,189,248,.14),
                transparent 230px
            ),
            radial-gradient(
                circle at 100% 38%,
                rgba(99,102,241,.10),
                transparent 260px
            ),
            linear-gradient(
                180deg,
                #08111f 0%,
                #0b1424 44%,
                #0b1220 100%
            )!important;
        box-shadow:
            inset -1px 0 rgba(255,255,255,.025),
            12px 0 36px rgba(15,23,42,.055);
    }

    .main-content{
        flex:1 1 auto!important;
        min-width:0!important;
        margin-left:0!important;
    }

    /* Premium brand panel */
    .sidebar .brand{
        position:relative;
        margin:16px 14px 8px!important;
        padding:14px 14px!important;
        gap:12px!important;
        border:1px solid rgba(148,163,184,.13);
        border-radius:18px;
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.075),
                rgba(255,255,255,.025)
            );
        box-shadow:
            0 14px 28px rgba(2,6,23,.18),
            inset 0 1px rgba(255,255,255,.05);
        backdrop-filter:blur(12px);
    }

    .sidebar .brand::after{
        content:"";
        position:absolute;
        right:13px;
        top:13px;
        width:7px;
        height:7px;
        border-radius:999px;
        background:#22c55e;
        box-shadow:0 0 0 4px rgba(34,197,94,.10);
    }

    .sidebar .brand strong{
        color:#fff;
        font-size:.94rem;
        letter-spacing:-.015em;
    }

    .sidebar .brand small{
        color:#8fa2bc!important;
        font-size:.70rem!important;
        margin-top:3px;
    }

    .sidebar .brand-mark{
        width:42px!important;
        height:42px!important;
        flex:0 0 42px;
        border-radius:13px!important;
        box-shadow:
            0 10px 22px rgba(37,99,235,.24),
            0 0 0 1px rgba(255,255,255,.10)!important;
    }

    .sidebar-workspace-label{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        margin:15px 27px 3px;
        color:#64748b;
        font-size:.59rem;
        font-weight:800;
        letter-spacing:.14em;
        text-transform:uppercase;
    }

    .sidebar-workspace-dot{
        width:5px;
        height:5px;
        border-radius:999px;
        background:#38bdf8;
        box-shadow:0 0 0 4px rgba(56,189,248,.07);
    }

    /* Original comfortable sizing, redesigned surface. */
    .sidebar .sidebar-nav{
        flex:0 0 auto!important;
        min-height:auto!important;
        margin-top:0!important;
        gap:3px!important;
        overflow:visible!important;
        padding-bottom:26px;
    }

    .sidebar .sidebar-nav .nav-section{
        display:flex;
        align-items:center;
        gap:9px;
        margin:17px 8px 5px!important;
        padding:0 7px!important;
        color:#62748c!important;
        font-size:.59rem!important;
        font-weight:800!important;
        line-height:1!important;
        letter-spacing:.13em!important;
    }

    .sidebar .sidebar-nav .nav-section::after{
        content:"";
        height:1px;
        flex:1;
        min-width:15px;
        background:
            linear-gradient(
                90deg,
                rgba(100,116,139,.30),
                rgba(100,116,139,0)
            );
    }

    .sidebar .sidebar-nav .nav-link{
        position:relative;
        min-height:46px!important;
        padding:6px 10px!important;
        gap:10px!important;
        overflow:hidden;
        color:#aebdd0!important;
        font-size:.855rem!important;
        font-weight:590;
        line-height:1.2!important;
        border:1px solid transparent;
        border-radius:13px!important;
        background:transparent;
        transition:
            transform .16s ease,
            background .16s ease,
            border-color .16s ease,
            color .16s ease,
            box-shadow .16s ease;
    }

    .sidebar .sidebar-nav .nav-link i{
        width:32px!important;
        height:32px!important;
        flex:0 0 32px!important;
        display:grid;
        place-items:center;
        color:#91a6bf;
        font-size:.92rem!important;
        border:1px solid rgba(148,163,184,.10);
        border-radius:10px;
        background:rgba(255,255,255,.035);
        transition:
            background .16s ease,
            color .16s ease,
            border-color .16s ease,
            transform .16s ease;
    }

    .sidebar .sidebar-nav .nav-link:hover{
        transform:translateX(2px);
        color:#f8fafc!important;
        border-color:rgba(148,163,184,.13);
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.072),
                rgba(255,255,255,.035)
            )!important;
        box-shadow:0 8px 18px rgba(2,6,23,.11);
    }

    .sidebar .sidebar-nav .nav-link:hover i{
        color:#dff6ff;
        border-color:rgba(56,189,248,.18);
        background:rgba(56,189,248,.10);
        transform:scale(1.03);
    }

    .sidebar .sidebar-nav .nav-link.active{
        color:#fff!important;
        border-color:rgba(96,165,250,.22);
        background:
            linear-gradient(
                100deg,
                rgba(37,99,235,.28),
                rgba(79,70,229,.14) 70%,
                rgba(56,189,248,.07)
            )!important;
        box-shadow:
            0 10px 24px rgba(2,6,23,.19),
            inset 0 1px rgba(255,255,255,.045);
    }

    .sidebar .sidebar-nav .nav-link.active::before{
        content:"";
        position:absolute;
        left:0;
        top:10px;
        bottom:10px;
        width:3px;
        border-radius:0 999px 999px 0;
        background:linear-gradient(180deg,#38bdf8,#6366f1);
        box-shadow:0 0 12px rgba(56,189,248,.42);
    }

    .sidebar .sidebar-nav .nav-link.active i{
        color:#fff;
        border-color:rgba(147,197,253,.25);
        background:
            linear-gradient(
                145deg,
                rgba(59,130,246,.30),
                rgba(99,102,241,.22)
            );
        box-shadow:0 5px 14px rgba(37,99,235,.16);
    }
}

/*
 * Mobile menu gets the same premium hierarchy, while offcanvas itself
 * remains the normal Bootstrap interaction.
 */
@media (max-width:991.98px){
    #mobileNav .offcanvas-header{
        border-bottom:1px solid #e8edf4;
        background:
            linear-gradient(
                180deg,
                #ffffff,
                #f8fbff
            );
    }

    #mobileNav .offcanvas-body{
        background:#f8fafc;
    }

    #mobileNav .mobile-sidebar-nav .nav-section{
        display:flex;
        align-items:center;
        gap:8px;
        margin:15px 7px 4px!important;
        color:#94a3b8!important;
        font-size:.58rem!important;
        font-weight:800!important;
        letter-spacing:.12em!important;
    }

    #mobileNav .mobile-sidebar-nav .nav-section::after{
        content:"";
        height:1px;
        flex:1;
        background:linear-gradient(90deg,#d9e2ee,transparent);
    }

    #mobileNav .mobile-sidebar-nav .nav-link{
        min-height:43px!important;
        padding:8px 10px!important;
        margin:2px 0;
        color:#475569;
        border:1px solid transparent;
        border-radius:12px;
        font-size:.84rem!important;
        font-weight:600;
    }

    #mobileNav .mobile-sidebar-nav .nav-link i{
        width:31px;
        height:31px;
        display:grid;
        place-items:center;
        border-radius:9px;
        background:#eef4fb;
        color:#64748b;
    }

    #mobileNav .mobile-sidebar-nav .nav-link.active{
        color:#1d4ed8;
        border-color:#dbeafe;
        background:linear-gradient(90deg,#eff6ff,#f5f3ff);
    }

    #mobileNav .mobile-sidebar-nav .nav-link.active i{
        color:#fff;
        background:linear-gradient(135deg,#2563eb,#4f46e5);
        box-shadow:0 5px 12px rgba(37,99,235,.18);
    }
}

[data-bs-theme="dark"] #mobileNav .offcanvas-header,
[data-bs-theme="dark"] #mobileNav .offcanvas-body{
    background:#0f172a;
    border-color:#253246;
}

[data-bs-theme="dark"] #mobileNav .mobile-sidebar-nav .nav-link{
    color:#cbd5e1;
}

[data-bs-theme="dark"] #mobileNav .mobile-sidebar-nav .nav-link i{
    background:#172033;
    color:#94a3b8;
}

[data-bs-theme="dark"] #mobileNav .mobile-sidebar-nav .nav-link.active{
    color:#fff;
    border-color:rgba(96,165,250,.20);
    background:linear-gradient(90deg,rgba(37,99,235,.24),rgba(79,70,229,.15));
}