/* PBB Argomulyo - Modern Government Theme
   Palette: Navy #1e3a8a · Blue #3b82f6 · Gold #f59e0b · White #ffffff
   v1.1 - Layout fixes, no-login public, admin-only protected pages */

:root {
    --navy: #1e3a8a;
    --navy-light: #2563eb;
    --blue: #3b82f6;
    --blue-light: #60a5fa;
    --gold: #f59e0b;
    --gold-light: #fbbf24;
    --white: #ffffff;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* Extended color tokens for status indicators & accents */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-500: #10b981;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;

    --orange-50: #fffbeb;
    --orange-100: #fef3c7;
    --orange-500: #f59e0b;
    --orange-600: #d97706;
    --orange-700: #b45309;
    --orange-800: #92400e;

    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;

    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-700: #1e40af;
    --blue-800: #1e3a8a;

    --indigo-50: #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-500: #6366f1;
    --indigo-700: #4338ca;

    --purple-50: #f5f3ff;
    --purple-100: #ede9fe;
    --purple-700: #5b21b6;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--slate-50);
    color: var(--slate-900);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===========================
   HEADER
   =========================== */
.app-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
}
.app-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;       /* nowrap — keep brand + nav in 1 row */
    overflow: hidden;        /* clip if overflow */
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    text-decoration: none;
    flex-shrink: 0;        /* never shrink — keep full brand text visible */
}
.brand:hover { text-decoration: none; }
.brand-mark { flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 18px; font-weight: 800; }
.brand-text small { font-size: 12px; opacity: 0.85; }

/* ===========================
   SIDEBAR / APP NAVIGATION
   =========================== */
.app-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Section grouping */
.nav-section {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-section-admin {
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
}
.nav-section-title {
    display: none; /* desktop: hide labels, sections are visual */
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 6px;
}

/* Nav item — desktop: horizontal pill */
.nav-item {
    color: var(--white);
    padding: 12px 14px !important;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px !important;
    overflow: hidden;
}
.nav-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transform: translateY(-1px);
}
.nav-item:hover::before { opacity: 1; }
.nav-item.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.08));
    color: #fde68a;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}
.nav-item.active::before { opacity: 1; }

/* Icon wrapper — rounded square box di belakang emoji */
.nav-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-icon {
    width: 20px;
    height: 20px;
    line-height: 1;
    color: currentColor;
    filter: grayscale(0.2);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:hover .nav-icon-wrap {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.08);
}
.nav-item:hover .nav-icon {
    transform: scale(1.1);
}
.nav-item.active .nav-icon-wrap {
    background: linear-gradient(135deg, var(--gold) 0%, #fbbf24 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.nav-item.active .nav-icon {
    filter: grayscale(0);
    transform: scale(1.05);
}

/* Badge notifikasi di menu (counter akun terblokir, dll) */
.nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 2px #fff;
    pointer-events: none;
    animation: navBadgePulse 2s ease-in-out infinite;
    z-index: 2;
}
.nav-badge-danger { background: #ef4444; }
.nav-badge-warning { background: #f59e0b; }
.nav-badge-success { background: #10b981; }

/* Compound badge: 2 angka dalam 1 pill (misal "2/0" = lunas/menunggu).
   Render sebagai 2 mini badge side-by-side di dalam 1 container pill. */
.nav-badge-compound {
    position: absolute;
    top: 2px;        /* FIX 2026-07-02: geser masuk drawer (sebelumnya -6px → terpotong di mobile) */
    right: 2px;      /* FIX 2026-07-02: geser masuk drawer (sebelumnya -6px → terpotong di mobile) */
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 18px;    /* FIX 2026-07-02: kecilkan biar muat di icon-wrap 36px tanpa keluar */
    padding: 0 4px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1.5px #fff;
    pointer-events: none;
    animation: navBadgePulse 2s ease-in-out infinite;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.nav-badge-compound .nb-seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 12px;
    padding: 0 3px;
    border-radius: 6px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.nav-badge-compound .nb-seg-success { background: #10b981; }
.nav-badge-compound .nb-seg-warning { background: #f59e0b; }
.nav-badge-compound .nb-sep {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    margin: 0 1px;
    line-height: 1;
}

.nav-icon-wrap { position: relative; }

/* Sembunyikan badge di menu yang sedang aktif (sudah jelas di-highlight, ga perlu badge) */
.nav-item.active .nav-badge,
.nav-item.active .nav-badge-compound { display: none !important; }
@keyframes navBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.nav-label {
    position: relative;
    z-index: 1;
}

/* User area */
.nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.user-info { display: flex; flex-direction: column; line-height: 1.1; }
.user-name { font-size: 13px; font-weight: 600; }
.user-role {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 2px;
    width: fit-content;
}
.role-admin { background: var(--gold); color: var(--navy); }
.role-petugas { background: var(--blue); color: var(--white); }
.role-viewer { background: var(--slate-300); color: var(--slate-700); }

.nav-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
}
.nav-login.btn-primary,
.nav-login {
    margin-left: 8px;
    /* Distinct gold gradient — stands out from navy nav buttons */
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
    color: var(--navy) !important;
    font-weight: 600 !important;
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
    transition: all 0.2s ease;
}
/* Sidebar version: full-width block button, consistent with nav items */
.nav-login--sidebar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 12px 12px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    text-decoration: none !important;
}
.nav-login:hover {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%) !important;
    color: var(--navy) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45);
    text-decoration: none;
}
.nav-login:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}
.logout-form { display: inline-flex; margin: 0; padding: 0; }
.logout-form button { font: inherit; }
.btn-logout {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    border: 1px solid rgba(220, 38, 38, 0.5);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-logout svg { width: 14px; height: 14px; display: block; }
.btn-logout:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}
.btn-logout:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.menu-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    border: none;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    margin-left: auto;
    cursor: pointer;
}

/* ===========================
   MAIN
   =========================== */
.app-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 80px 20px; /* extra bottom space for fixed footer */
    flex: 1;
    width: 100%;
}
.app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--white, #ffffff);
    border-top: 1px solid var(--slate-200, #e2e8f0);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.04);
    padding: 8px 16px; /* FIX 2026-07-03: lebih tipis dari 10px → 8px */
    text-align: center;
    color: var(--slate-500, #64748b);
    pointer-events: auto;
}
.app-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px; /* FIX 2026-07-03: gap lebih rapat 2px → 1px */
    line-height: 1.3; /* FIX 2026-07-03: line-height tighter 1.4 → 1.3 */
    max-width: 1400px;
    margin: 0 auto;
    text-align: center; /* FIX 2026-07-03: explicit center */
}
.app-footer-copyright {
    font-size: 11px; /* FIX 2026-07-03: lebih kecil 12px → 11px */
    color: var(--slate-500, #64748b);
    letter-spacing: 0.01em;
    text-align: center;
}
.app-footer-copyright #appVersion {
    font-weight: 600;
    color: var(--slate-600, #475569);
}
.app-footer-credit {
    font-size: 10px; /* FIX 2026-07-03: lebih kecil 11px → 10px */
    color: var(--slate-400, #94a3b8);
    letter-spacing: 0.02em;
    text-align: center;
}
.app-footer-credit strong {
    color: var(--slate-500, #64748b);
    font-weight: 500;
}
.app-footer .update-dot {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 8px;
    height: 8px;
    background: var(--gold, #f59e0b);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
    cursor: pointer;
}
.app-footer .update-dot[hidden] {
    display: none;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.page-header h1 { margin: 0 0 4px; font-size: 28px; font-weight: 800; }
.page-header p { margin: 0; color: var(--slate-500); font-size: 14px; }
.header-actions { display: flex; gap: 8px; }

/* ===========================
   BUTTONS
   =========================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    background: var(--white);
    color: var(--slate-700);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: var(--navy);
    color: var(--white);
}
.btn-primary:hover { background: var(--navy-light); }
.btn-gold {
    background: var(--gold);
    color: var(--navy);
}
.btn-gold:hover { background: var(--gold-light); }
.btn-danger {
    background: var(--danger);
    color: var(--white);
}
.btn-success {
    background: var(--success);
    color: var(--white);
}
.btn-success:hover { background: #059669; }
.btn-warning {
    background: var(--gold);
    color: var(--navy);
}
.btn-warning:hover { background: var(--gold-light); }
.btn-info {
    background: var(--info);
    color: var(--white);
}
.btn-info:hover { background: var(--navy-light); }
.btn-outline {
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-ghost {
    background: transparent;
    color: var(--slate-600);
    border: 1px solid var(--slate-200);
}
.btn-ghost:hover { background: var(--slate-100); }
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ===========================
   CARDS
   =========================== */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--slate-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.card-header h2 { margin: 0; font-size: 16px; font-weight: 700; }
.card-header small { color: var(--slate-500); }
.card-link { font-size: 13px; }
.card-body { padding: 20px; }

/* ===========================
   STATS GRID
   =========================== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--navy);
}
.stat-primary { border-left-color: var(--navy); }
.stat-gold { border-left-color: var(--gold); }
.stat-success { border-left-color: var(--success); }
.stat-warning { border-left-color: var(--warning); }
.stat-info { border-left-color: var(--info); }
.stat-secondary { border-left-color: var(--slate-500); }
.stat-icon {
    font-size: 32px;
    line-height: 1;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slate-50);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.stat-content { flex: 1; min-width: 0; }
.stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--slate-900);
    line-height: 1.1;
    word-break: break-all;
}
.stat-value small { font-size: 14px; color: var(--slate-500); font-weight: 600; }
.stat-label { font-size: 12px; color: var(--slate-500); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

/* FIX 2026-07-02 v2: Card merged "Status Bayar" — gabung SUDAH LUNAS + SISA TARGET
   dalam 1 card, layout 2 row atas-bawah dengan icon bulat colorful dan pemisah visible.
   Tujuannya: lebih berwarna, jelas pemisahnya, dan ada icon yang menarik. */
.stat-card-merged {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--slate-200, #e2e8f0);
}
.stat-merged-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #0f1d4a 0%, #1e3a8a 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.stat-merged-header-icon {
    font-size: 16px;
    line-height: 1;
}
.stat-merged-header-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ffffff;
}

.stat-merged-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    position: relative;
    transition: background 0.2s;
}
.stat-merged-row + .stat-merged-row {
    border-top: 1px solid transparent;
}
.stat-merged-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%);
}
.stat-merged-success::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #10b981 0%, #047857 100%);
}
.stat-merged-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.04) 100%);
}
.stat-merged-danger::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
}
.stat-merged-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.stat-merged-success .stat-merged-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
}
.stat-merged-danger .stat-merged-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.3);
}
.stat-merged-body {
    flex: 1;
    min-width: 0;
}
.stat-merged-num {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--slate-900);
    word-break: break-all;
}
.stat-merged-num small {
    font-size: 13px;
    color: var(--slate-500);
    font-weight: 600;
    margin-left: 2px;
}
.stat-merged-success .stat-merged-num { color: #047857; }
.stat-merged-danger .stat-merged-num { color: #b91c1c; }
.stat-merged-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 2px;
}
.stat-merged-success .stat-merged-label { color: #059669; }
.stat-merged-danger .stat-merged-label { color: #dc2626; }
.stat-merged-sub {
    font-size: 11px;
    color: var(--slate-500);
    font-weight: 500;
    margin-top: 1px;
}

/* FIX 2026-07-02 v2: Pemisah yang visible antara LUNAS dan SISA TARGET.
   Bukan dashed tipisan — pakai line tegas dengan accent dot/arrow. */
.stat-merged-divider {
    position: relative;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
}
.stat-merged-divider-line {
    display: block;
    width: 80%;
    height: 2px;
    background: linear-gradient(to right,
        transparent 0%,
        #cbd5e1 15%,
        #94a3b8 50%,
        #cbd5e1 85%,
        transparent 100%
    );
    border-radius: 2px;
}
.stat-merged-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border: 2px solid #94a3b8;
    border-radius: 1px;
    background: #ffffff;
}

/* ===========================
   DASHBOARD GRID
   =========================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.dashboard-grid .card-wide { grid-column: 1 / -1; }

/* ===========================
   TABLES
   =========================== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table th, .data-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--slate-100);
}
.data-table th {
    background: var(--slate-50);
    color: var(--slate-600);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.data-table tbody tr:hover { background: var(--slate-50); cursor: pointer; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .col-nop { font-family: 'SF Mono', monospace; font-weight: 600; font-size: 12px; }
.data-table .col-nama { font-weight: 600; }
.data-table .col-amount { text-align: right; font-weight: 700; }
.data-table .col-actions { text-align: right; }

/* ===========================
   PILLS (canonical definitions — keep these as single source of truth)
   Variants defined further below at line ~1700 with more complete set.
   =========================== */

/* ===========================
   FORMS
   =========================== */
.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--slate-700);
}
.form-group .required { color: #dc2626; margin-left: 2px; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--slate-500);
}
.form-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 12px;
    color: #78350f;
    line-height: 1.5;
}

/* WP Edit Modal — info context block (read-only fields) */
.wp-edit-context {
    background: var(--slate-50, #f8fafc);
    border: 1px solid var(--slate-100, #f1f5f9);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 4px;
}
.wp-edit-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--slate-200, #e2e8f0);
}
.wp-edit-row:last-child { border-bottom: none; }
.wp-edit-label {
    color: var(--slate-500, #64748b);
    font-weight: 500;
    flex-shrink: 0;
}
.wp-edit-value {
    color: var(--slate-900, #0f172a);
    font-weight: 600;
    text-align: right;
}
.wp-edit-value.mono {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
}

/* Edit WP inline icon button (di tabel wp_list) */
.btn-edit-wp {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.btn-edit-wp:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
}
.btn-edit-wp:active { transform: translateY(0); }
.btn-edit-wp svg { display: block; }

/* Mobile: stack Edit + Detail buttons */
@media (max-width: 640px) {
    .col-edit {
        text-align: right;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    .btn-edit-wp { padding: 8px 10px; }
}
input[type="text"], input[type="password"], input[type="search"], input[type="number"],
input[type="email"], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--white);
    color: var(--slate-900);
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}

/* ===========================
   ALERTS
   =========================== */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid;
}
.alert-danger { background: rgba(239, 68, 68, 0.08); color: #991b1b; border-color: rgba(239, 68, 68, 0.2); }
.alert-success { background: rgba(16, 185, 129, 0.08); color: #065f46; border-color: rgba(16, 185, 129, 0.2); }
.alert-info { background: rgba(59, 130, 246, 0.08); color: #1e40af; border-color: rgba(59, 130, 246, 0.2); }

/* ===========================
   LOGIN PAGE
   =========================== */
.login-page {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-container { width: 100%; max-width: 400px; }
.login-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    box-shadow: var(--shadow-lg);
}
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand .brand-icon { display: flex; justify-content: center; margin-bottom: 16px; }
.login-brand h1 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 800;
    color: var(--navy);
    background: linear-gradient(135deg, var(--navy), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.login-brand .subtitle { color: var(--slate-500); font-size: 13px; margin: 0; }
.login-form { margin-bottom: 16px; }
.login-hint {
    text-align: center;
    padding: 12px;
    background: var(--slate-50);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--slate-600);
}
.login-hint code {
    background: var(--white);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    border: 1px solid var(--slate-200);
}

/* ===========================
   FILTER BAR
   =========================== */
.filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}
.filter-search { flex: 1; min-width: 200px; }
.filter-bar select, .filter-bar input { min-width: 160px; }

/* ===========================
   TABS
   =========================== */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--slate-200);
    margin-bottom: 16px;
    overflow-x: auto;
}
.tab {
    background: none;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-500);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all 0.15s;
}
.tab:hover { color: var(--navy); }
.tab.active {
    color: var(--navy);
    border-bottom-color: var(--gold);
}

/* ===========================
   UPLOAD ZONE
   =========================== */
.upload-zone {
    border: 2px dashed var(--slate-300);
    border-radius: var(--radius);
    padding: 48px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--slate-50);
    margin: 20px 0;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--navy);
    background: rgba(30, 58, 138, 0.04);
}
.upload-icon { font-size: 56px; margin-bottom: 8px; }
.upload-text { font-size: 16px; color: var(--slate-700); margin-bottom: 4px; }
.upload-hint { font-size: 12px; color: var(--slate-500); }

/* ===========================
   BULK UPLOAD TABLE
   =========================== */
.bulk-builder { margin-top: 16px; overflow-x: auto; }
.bulk-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.bulk-table th, .bulk-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--slate-100);
    text-align: left;
    vertical-align: middle;
}
.bulk-table th {
    background: var(--slate-50);
    font-size: 12px;
    font-weight: 700;
    color: var(--slate-600);
    text-transform: uppercase;
}
.bulk-table input { padding: 6px 8px; font-size: 13px; }
.bulk-table .file-name { font-size: 12px; color: var(--slate-600); }
.bulk-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.bulk-row-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.bulk-row-status.empty { background: var(--slate-100); color: var(--slate-500); }
.bulk-row-status.ready { background: rgba(16, 185, 129, 0.12); color: #047857; }
.bulk-row-status.invalid { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }

/* ===========================
   PAGINATION
   =========================== */
.pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 16px;
    padding: 12px;
    flex-wrap: wrap;
}
.pagination button {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--slate-600);
}
.pagination button:hover { background: var(--slate-50); }
.pagination button.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .page-info { padding: 0 8px; color: var(--slate-500); align-self: center; font-size: 13px; }

/* ===========================
   MODAL
   =========================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--slate-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h2 { margin: 0; font-size: 20px; }
.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--slate-500);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--slate-50); }
.modal-body { padding: 20px 24px; }
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--slate-100);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ===========================
   MISC
   =========================== */
.loading { padding: 32px; text-align: center; color: var(--slate-500); }
.empty { padding: 32px; text-align: center; color: var(--slate-400); }
.muted { color: var(--slate-500); font-size: 13px; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-gold { color: var(--gold); font-weight: 700; }
.text-mono { font-family: 'SF Mono', Menlo, monospace; }
.text-bold { font-weight: 700; }
.divider { height: 1px; background: var(--slate-200); margin: 16px 0; }
.spacer { flex: 1; }
.hidden { display: none !important; }

/* Progress bar */
.progress {
    height: 8px;
    background: var(--slate-100);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--navy), var(--blue));
    border-radius: 999px;
    transition: width 0.3s;
    color: var(--white);
    font-size: 10px;
    text-align: center;
    line-height: 8px;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 900px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .sidebar-header {
        display: flex !important;
        align-items: center !important;
        padding: 20px 18px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(0, 0, 0, 0.2) !important;
        flex-shrink: 0 !important;
    }
    .sidebar-header .brand {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        color: #fff !important;
        text-decoration: none !important;
    }
    .sidebar-header .brand-mark {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .sidebar-header .brand-mark svg {
        width: 36px !important;
        height: 36px !important;
    }
    .sidebar-header .brand-text strong {
        display: block !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #fff !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    .sidebar-header .brand-text small {
        display: block !important;
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        margin-top: 3px !important;
        white-space: nowrap !important;
    }
}
@media (max-width: 640px) {
    .app-header-inner { padding: 12px 14px; }
    .menu-toggle { display: flex; }
    .brand-text strong { font-size: 16px; }
    .brand-text small { font-size: 10px; }
    body:not(.menu-open) .app-nav { display: none; }
    .app-main { padding: 16px 12px 90px 12px; }
    .page-header h1 { font-size: 22px; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 12px; gap: 8px; }
    .stat-icon { font-size: 22px; width: 36px; height: 36px; }
    .stat-value { font-size: 16px; }
    .stat-label { font-size: 10px; }
    .filter-bar select, .filter-bar input { min-width: 120px; }
    .data-table { font-size: 12px; }
    .data-table th, .data-table td { padding: 8px 6px; }
}

/* ===========================
   SIDE DRAWER (Mobile Menu)
   =========================== */
.menu-toggle {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    border: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}
.menu-toggle:active {
    transform: scale(0.95);
}
.menu-toggle svg {
    width: 24px;
    height: 24px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body.menu-open .menu-toggle svg {
    transform: rotate(90deg);
}

/* Backdrop */
.menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.menu-open .menu-backdrop {
    opacity: 1;
    visibility: visible;
}

/* Drawer panel */
.app-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;          /* default nowrap — desktop inline nav */
}
@media (max-width: 640px) {
    .app-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 320px;
        max-width: 88vw;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        flex-wrap: nowrap;
        background: linear-gradient(180deg, #0f1d4a 0%, #1e3a8a 50%, #2563eb 100%);
        color: var(--white);
        padding: 0;
        z-index: 999;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: -8px 0 32px rgba(15, 23, 42, 0.4);
        overflow-y: auto;
        visibility: hidden;
    }
    body.menu-open .app-nav {
        transform: translateX(0);
        visibility: visible;
    }
}

/* Drawer header (user profile) */
@media (max-width: 640px) {
    .app-nav::before {
        content: '';
        display: block;
        height: 24px;
        flex-shrink: 0;
    }
    .drawer-profile {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px 20px;
        margin: 16px 0 8px !important;
        background: rgba(255, 255, 255, 0.06);
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
    }
    body.menu-open .drawer-profile {
        opacity: 1;
        transform: translateY(0);
    }
    .drawer-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
        color: var(--navy);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 20px;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }
    .drawer-user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .drawer-user-name {
        font-size: 15px;
        font-weight: 700;
        /* FIX 2026-07-02: nama panjang terpotong ellipsis. Pakai 2 baris (line-clamp 2)
           supaya "Laurensius Rendi Setiawan" tetap readable tanpa ellipsis.
           Ditambah title attribute di HTML untuk full name saat hover. */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        line-height: 1.2;
    }
    .drawer-user-role {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.8;
    }
}
@media (min-width: 641px) {
    .drawer-profile { display: none; }
}

/* Drawer nav items (mobile only) */
@media (max-width: 640px) {
    /* Sections tampil di mobile */
    .nav-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 100%;
        padding: 8px 12px 4px;
    }
    .nav-section-admin {
        margin-left: 0;
        padding-left: 12px;
        padding-top: 4px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 6px;
    }
    .nav-section-title {
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: rgba(255, 255, 255, 0.45);
        padding: 6px 12px 8px;
    }

    .nav-item {
        width: 100%;
        padding: 12px 14px !important;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 12px !important;
        opacity: 0;
        transform: translateX(20px);
        transition: background 0.2s, color 0.2s, opacity 0.4s ease, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        border-left: 3px solid transparent;
        position: relative;
    }
    .nav-item::before { display: none; }
    .nav-icon-wrap {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
    }
    .nav-item .nav-icon {
        font-size: 18px;
    }
    .nav-item .nav-label {
        flex: 1;
    }
    .nav-item:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateX(0);
    }
    .nav-item.active {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
        color: #fde68a;
        font-weight: 700;
        border-left-color: var(--gold);
    }
    .nav-item.active .nav-icon-wrap {
        background: linear-gradient(135deg, var(--gold) 0%, #fbbf24 100%);
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    }
    .nav-item:active {
        background: rgba(255, 255, 255, 0.16);
    }
    /* Stagger animation — animate seluruh nav-item di dalam sections */
    body.menu-open .nav-section .nav-item:nth-child(2) { transition-delay: 0.05s; opacity: 1; transform: translateX(0); }
    body.menu-open .nav-section .nav-item:nth-child(3) { transition-delay: 0.10s; opacity: 1; transform: translateX(0); }
    body.menu-open .nav-section .nav-item:nth-child(4) { transition-delay: 0.15s; opacity: 1; transform: translateX(0); }
    body.menu-open .nav-section .nav-item:nth-child(5) { transition-delay: 0.20s; opacity: 1; transform: translateX(0); }
    body.menu-open .nav-section .nav-item:nth-child(6) { transition-delay: 0.25s; opacity: 1; transform: translateX(0); }
    body.menu-open .nav-section .nav-item:nth-child(7) { transition-delay: 0.30s; opacity: 1; transform: translateX(0); }
    body.menu-open .nav-section .nav-item:nth-child(8) { transition-delay: 0.35s; opacity: 1; transform: translateX(0); }

    /* Drawer profile animate first */
    body.menu-open .drawer-profile {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.05s;
    }
}

/* Drawer divider */
@media (max-width: 640px) {
    .nav-divider {
        width: 100%;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        margin: 8px 0;
    }
}

/* Drawer user section + logout */
@media (max-width: 640px) {
    .nav-user {
        margin: auto 0 0;
        padding: 16px 20px 24px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: rgba(0, 0, 0, 0.15);
    }
    .nav-user .user-info { display: none; }
    .nav-user .logout-form { width: 100%; }
        .nav-user .logout-form button.btn-logout,
        .nav-user .logout-form button {
            width: 100%;
            justify-content: center;
            padding: 12px 16px;
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
            color: #fff !important;
            border: 1px solid rgba(220, 38, 38, 0.5) !important;
            border-radius: 10px !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3) !important;
        }
        .nav-user .logout-form button.btn-logout svg,
        .nav-user .logout-form button svg { width: 16px; height: 16px; }
        .nav-user .logout-form button.btn-logout:hover,
        .nav-user .logout-form button:hover {
            background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
            transform: translateY(-1px);
            box-shadow: 0 5px 16px rgba(220, 38, 38, 0.45) !important;
        }
        .nav-user .logout-form button.btn-logout:active,
        .nav-user .logout-form button:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3) !important;
        }
    .nav-login {
        margin: 8px 20px 0;
        width: calc(100% - 40px);
        justify-content: center;
        padding: 12px 16px;
        background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
        color: var(--navy) !important;
        border-radius: var(--radius-sm);
        font-weight: 700;
        text-align: center;
    }
}

/* Desktop: hide mobile-only elements */
@media (min-width: 641px) {
    .menu-backdrop { display: none; }
    .app-nav::before { display: none; }
}

/* ===========================
   ANIMATIONS
   =========================== */
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
/* Override style untuk manual input (saat JS inject input element) */
.barcode-scanner-video input[type="text"] {
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    border: 1px solid #475569 !important;
    background: #1e293b !important;
    color: #ffffff !important;
    font-size: 16px !important;
    text-align: center !important;
    letter-spacing: normal !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 500 !important;
    outline: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
}
.barcode-scanner-video input[type="text"]::placeholder {
    color: #94a3b8 !important;
    font-size: 13px !important;
    letter-spacing: normal !important;
    opacity: 1 !important;
}
.barcode-scanner-video input[type="text"]:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3) !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===========================
   PROFESSIONAL REDESIGN v3
   Filter bar, stat cards, action buttons
   =========================== */

/* ===== Stat cards: uniform sizing + proper borders ===== */
.stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
@media (min-width: 640px) {
    .stats-row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .stats-row { grid-template-columns: repeat(5, 1fr); }
}

.stats-row .stat-mini {
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.2s, transform 0.2s;
    min-height: 72px;
    justify-content: center;
}
.stats-row .stat-mini:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}
.stat-mini-total { border-left-color: var(--blue-700); }
.stat-mini-pending { border-left-color: var(--orange-600); }
.stat-mini-verified { border-left-color: var(--green-600); }
.stat-mini-rejected { border-left-color: var(--red-600); }
.stat-mini-lunas { border-left-color: var(--green-700); }
.stat-mini-size { border-left-color: var(--indigo-500); }

/* Stat mini INSIDE combined card (Sisa Target di dalam Sudah Lunas) */
.stat-card-combined { min-height: auto; }

.stat-card-combined .stat-mini-icon { font-size: 14px; line-height: 1; }
.stat-card-combined .stat-mini-label {
    font-size: 10px;
    font-weight: 700;
    color: #be123c;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.stat-card-combined .stat-mini-value {
    font-size: 14px;
    font-weight: 700;
    color: #be123c;
    margin-left: auto;
}
.stat-card-combined .stat-mini-sub {
    font-size: 10px;
    color: #9f1239;
    width: 100%;
    margin-top: 2px;
}

.stat-mini-val {
    font-size: 22px;
    font-weight: 800;
    color: #0a1635;
    font-feature-settings: 'tnum';
    line-height: 1.1;
    letter-spacing: -0.5px;
}

/* ===== Filter bar: professional grouped layout ===== */
.filter-bar-bukti {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.filter-label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-left: 2px;
}
.filter-input,
.filter-bar-bukti input[type="search"],
.filter-bar-bukti input[type="date"],
.filter-bar-bukti select {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: #0a1635;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 42px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.filter-bar-bukti input[type="search"] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cline x1='21' y1='21' x2='16.65' y2='16.65'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
    padding-left: 38px;
}
.filter-bar-bukti input[type="date"] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3e%3cline x1='16' y1='2' x2='16' y2='6'/%3e%3cline x1='8' y1='2' x2='8' y2='6'/%3e%3cline x1='3' y1='10' x2='21' y2='10'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
    padding-left: 38px;
    color: #0a1635;
}
.filter-bar-bukti select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    padding-right: 36px;
    cursor: pointer;
}
.filter-input:focus,
.filter-bar-bukti input:focus,
.filter-bar-bukti select:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

.filter-group-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.filter-group-dates > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Reset button: full-width on mobile, auto on desktop */
.filter-bar-bukti .btn-ghost {
    background: #f1f5f9;
    color: #0a1635;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    min-height: 42px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
    text-decoration: none;
    width: 100%;
    font-family: inherit;
}
.filter-bar-bukti .btn-ghost:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}
@media (min-width: 1024px) {
    .filter-bar-bukti .btn-ghost { width: auto; }
}

@media (min-width: 640px) {
    .filter-bar-bukti {
        grid-template-columns: 1fr 1fr;
    }
    .filter-bar-bukti .filter-group-search { grid-column: 1 / -1; }
    .filter-bar-bukti .filter-group-actions { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .filter-bar-bukti {
        grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr auto;
        align-items: end;
        gap: 12px;
    }
    .filter-bar-bukti .filter-group-search { grid-column: auto; }
    .filter-bar-bukti .filter-group-actions { grid-column: auto; }
}

/* ===== Card header for the table ===== */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 12px 12px 0 0;
}
.card-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0a1635;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-header .muted {
    font-size: 12.5px;
    color: #64748b;
    font-weight: 500;
}

/* ===== Professional action buttons ===== */
.bukti-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    background: #ffffff;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.2px;
    font-family: inherit;
}
.btn-act:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-act:active:not(:disabled) { transform: translateY(0); }

.btn-act-approve {
    border-color: #16a34a;
    color: #15803d;
    background: #f0fdf4;
}
.btn-act-approve:hover:not(:disabled) {
    background: #16a34a;
    color: #ffffff;
    border-color: #15803d;
}

.btn-act-reject {
    border-color: #dc2626;
    color: #b91c1c;
    background: #fef2f2;
}
.btn-act-reject:hover:not(:disabled) {
    background: #dc2626;
    color: #ffffff;
    border-color: #b91c1c;
}

.btn-act-notes {
    border-color: #6366f1;
    color: #4338ca;
    background: #eef2ff;
}
.btn-act-notes:hover:not(:disabled) {
    background: #6366f1;
    color: #ffffff;
    border-color: #4338ca;
}

.btn-act-reset {
    border-color: #94a3b8;
    color: #475569;
    background: #f8fafc;
}
.btn-act-reset:hover:not(:disabled) {
    background: #475569;
    color: #ffffff;
    border-color: #334155;
}

.btn-act-delete {
    border-color: #f87171;
    color: #991b1b;
    background: #fff1f2;
}
.btn-act-delete:hover:not(:disabled) {
    background: #b91c1c;
    color: #ffffff;
    border-color: #7f1d1d;
}

/* ==================================================
   DETAIL BUTTON (Colorful) — untuk wp_list & penghapusan
   Gradient navy → biru, aksen gold, eye-catching.
   Icon 🛈 otomatis via ::before.
   ================================================== */
.btn-act-detail {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #ffffff !important;
    border: 1.5px solid #d4a017;
    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.25);
    padding: 8px 14px;
    font-size: 12.5px;
    letter-spacing: 0.3px;
}
.btn-act-detail::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .45em; vertical-align: middle; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath d=%27M1 8s3-7 7-7 7 7 7 7-3 7-7 7-7-7-7-7z%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%271.5%27 stroke-linejoin=%27round%27/%3e%3ccircle cx=%278%27 cy=%278%27 r=%273.5%27 fill=%27%23ffffff%27/%3e%3ccircle cx=%278%27 cy=%278%27 r=%271.5%27 fill=%27%231e3a8a%27/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; }
.btn-act-detail:hover:not(:disabled) {
    background: linear-gradient(135deg, #d4a017 0%, #f59e0b 100%);
    color: #1e3a8a !important;
    border-color: #1e3a8a;
    box-shadow: 0 6px 16px rgba(212, 160, 23, 0.35);
    transform: translateY(-2px);
}
.btn-act-detail:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(30, 58, 138, 0.3);
}

/* ==================================================
   Modal Penghapusan SPPT (admin only) — responsive
   Backdrop gelap, modal centered, max-width 480px
   ================================================== */
.pbb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: pbbModalFadeIn 0.18s ease-out;
}
@keyframes pbbModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.pbb-modal {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35), 0 4px 12px rgba(15, 23, 42, 0.15);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: pbbModalSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pbbModalSlideUp {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.pbb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    flex-shrink: 0;
}
.pbb-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.pbb-modal-close:hover { opacity: 1; }
.pbb-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.pbb-modal-footer {
    padding: 12px 18px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
}
.pbb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1.5px solid transparent;
    line-height: 1;
    white-space: nowrap;
}
.pbb-btn-ghost {
    background: #ffffff;
    color: #475569;
    border-color: #cbd5e1;
}
.pbb-btn-ghost:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

/* Responsive: stack footer + full-width buttons di mobile */
@media (max-width: 480px) {
    .pbb-modal-overlay { padding: 0; }
    .pbb-modal {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
    .pbb-modal-header { padding: 12px 14px; }
    .pbb-modal-header h3 { font-size: 15px !important; }
    .pbb-modal-body { padding: 14px; }
    .pbb-modal-footer {
        flex-direction: column-reverse;
        gap: 6px;
        padding: 10px 14px;
    }
    .pbb-modal-footer .pbb-btn {
        width: 100%;
        padding: 11px 14px;
        font-size: 13.5px;
    }
}
.btn-act-penghapusan {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #b91c1c !important;
    border: 1.5px solid #fca5a5;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.12);
    padding: 8px 12px;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.18s ease;
    line-height: 1;
    white-space: nowrap;
}
.btn-act-penghapusan svg { flex-shrink: 0; }
.btn-act-penghapusan:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: #ffffff !important;
    border-color: #991b1b;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3);
    transform: translateY(-1px);
}
.btn-act-penghapusan:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25);
}

/* Responsive: stack buttons di mobile */
@media (max-width: 640px) {
    .col-actions {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        align-items: stretch;
    }
    .col-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.btn-act:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #e2e8f0;
}
.btn-act:disabled:hover {
    transform: none;
    box-shadow: none;
}

@media (max-width: 480px) {
    .bukti-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }
    .btn-act { flex-shrink: 0; }
}

/* ===== Notes inline editor ===== */
.bukti-notes-editor {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 8px;
    display: none;
}
.bukti-notes-editor.open { display: block; }
.bukti-notes-editor textarea {
    width: 100%;
    min-height: 64px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    resize: vertical;
    background: #ffffff;
    color: #0a1635;
    font-family: inherit;
}
.bukti-notes-editor textarea:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.bukti-notes-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    justify-content: flex-end;
}

/* ===== Toast notification ===== */
.admin-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0a1635;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
    opacity: 0;
    transition: all 0.25s ease-out;
    z-index: 9999;
    pointer-events: none;
}
.admin-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.admin-toast.success { background: #15803d; }
.admin-toast.error { background: #b91c1c; }
/* ============================================================ */
/* ADMIN BUKTI — REDESIGN 2026-06-26                             */
/* Modern card layout, touch-friendly, responsive               */
/* ============================================================ */

/* === Base table styling (desktop) === */
.admin-bukti-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.admin-bukti-table tbody tr {
    transition: background 0.12s, transform 0.12s;
    background: #fff;
}
.admin-bukti-table tbody tr:hover {
    background: #f8fafc;
}
.admin-bukti-table tbody tr.row-updating {
    animation: rowPulse 0.8s ease-out;
}
.admin-bukti-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
    padding: 12px 10px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}
.admin-bukti-table tbody tr:last-child td {
    border-bottom: none;
}
.admin-bukti-table .bukti-wp-meta,
.admin-bukti-table .bukti-wp-name,
.admin-bukti-table .bukti-file-link,
.admin-bukti-table .bukti-file-meta {
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
}

/* === Typography === */
.admin-bukti-table .bukti-wp-name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
}
.admin-bukti-table .bukti-wp-meta {
    font-size: 12px;
    color: #475569;
    line-height: 1.45;
    margin-top: 2px;
}
.admin-bukti-table .nop-fmt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.2px;
}
.admin-bukti-table .bukti-tagihan {
    font-size: 14px;
    font-weight: 700;
    color: #d97706;          /* gold accent untuk tagihan */
    text-align: right;
    white-space: nowrap;
}
.admin-bukti-table .bukti-time {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}
.admin-bukti-table .bukti-uploader {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 2px;
}
.admin-bukti-table .bukti-file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #1e3a5f;
    text-decoration: none;
    font-weight: 600;
    font-size: 12.5px;
}
.admin-bukti-table .bukti-file-link:hover {
    text-decoration: underline;
}
.admin-bukti-table .bukti-file-meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

/* === Status pills === */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
}
.pill-pending   { background: #fef3c7; color: #92400e; }
.pill-verified  { background: #22c55e; color: #ffffff; }  /* solid hijau */
.pill-rejected  { background: #ef4444; color: #ffffff; }  /* solid merah */
.pill-failed    { background: #fee2e2; color: #991b1b; }
.pill-lunas     { background: #22c55e; color: #ffffff; }  /* solid hijau */
.pill-menunggu  { background: #fef3c7; color: #92400e; }
.pill-success   { background: #22c55e; color: #ffffff; }
.pill-warning   { background: #fef3c7; color: #92400e; }
.pill-info      { background: #1e3a5f; color: #ffffff; }  /* primary navy */
.pill-muted     { background: #e2e8f0; color: #475569; }
.pill-manual    { background: #ede9fe; color: #5b21b6; }
.pill-single    { background: #dbeafe; color: #1e40af; }
.pill-bulk      { background: #ede9fe; color: #5b21b6; }
.pill-penghapusan { background: #fef3c7; color: #92400e; }
.pill-mini { font-size: 10px; padding: 2px 7px; }

/* === Action buttons — touch-friendly 44px === */
.bukti-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: stretch;
}
.btn-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
    background: #f1f5f9;
    color: #334155;
}
.btn-act:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.btn-act:active:not(:disabled) {
    transform: translateY(0);
}
.btn-act:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-act-approve {
    background: #22c55e;
    color: #fff;
    border-color: #16a34a;
}
.btn-act-approve:hover:not(:disabled) {
    background: #16a34a;
}
.btn-act-reject {
    background: #ef4444;
    color: #fff;
    border-color: #dc2626;
}
.btn-act-reject:hover:not(:disabled) {
    background: #dc2626;
}
.btn-act-notes,
.btn-act-reset {
    background: #e2e8f0;
    color: #334155;
    border-color: #cbd5e1;
}
.btn-act-notes:hover:not(:disabled),
.btn-act-reset:hover:not(:disabled) {
    background: #cbd5e1;
}
.btn-act-delete {
    background: #fff;
    color: #ef4444;
    border-color: #ef4444;
}
.btn-act-delete:hover:not(:disabled) {
    background: #fee2e2;
    color: #dc2626;
}
.btn-act-download {
    background: #1e3a5f;
    color: #fff;
    border-color: #1e3a5f;
}
.btn-act-download:hover {
    background: #0f2540;
}

/* === Notes (catatan auto-detect) — scrollable box === */
.admin-bukti-table .bukti-notes-box {
    margin-top: 8px;
    padding: 8px 12px;
    background: #f1f5f9;
    border-left: 3px solid #64748b;
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    line-height: 1.5;
    color: #334155;
    max-height: 120px;
    overflow-y: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* === Bukti dusun tag === */
.bukti-dusun-tag {
    display: inline-block;
    background: #dbeafe;
    color: #1e40af;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 3px;
}

/* === Row variants === */
.admin-bukti-table tbody tr.row-lunas {
    background: #f0fdf4;
}
.admin-bukti-table tbody tr.row-lunas:hover {
    background: #dcfce7;
}
.admin-bukti-table tbody tr.row-verified-pending {
    background: #fef9c3;
}
.admin-bukti-table tbody tr.row-rejected {
    background: #fef2f2;
}
.admin-bukti-table tbody tr.row-rejected:hover {
    background: #fee2e2;
}

@keyframes rowPulse {
    0%   { background: #fef3c7; }
    100% { background: transparent; }
}

/* === DESKTOP LAYOUT (>768px): grid 2 kolom info + sidebar aksi === */
@media (min-width: 769px) {
    .admin-bukti-table,
    .admin-bukti-table thead,
    .admin-bukti-table tbody,
    .admin-bukti-table tr,
    .admin-bukti-table td {
        display: block;
    }
    .admin-bukti-table thead {
        display: none;
    }
    .admin-bukti-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 280px;
        gap: 0;
        align-items: start;        /* FIX AREA KOSONG: cell tidak stretch ke tinggi yang sama */
        margin-bottom: 16px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 0;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        overflow: hidden;
    }
    .admin-bukti-table tbody tr:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    /* Kolom info utama: NOP, WP, Tagihan, Tipe, File, Status, Waktu */
    .admin-bukti-table tbody tr td:not(.col-aksi) {
        padding: 10px 16px;
        border-bottom: 1px solid #f1f5f9;
        border-right: none;
        display: flex;
        align-items: center;
        align-self: start;        /* FIX: cell align ke atas, tidak stretch */
        gap: 12px;
    }
    .admin-bukti-table tbody tr td:not(.col-aksi):last-of-type {
        border-bottom: 1px solid #e2e8f0;
    }
    .admin-bukti-table tbody tr td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        flex: 0 0 90px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .admin-bukti-table tbody tr td > * {
        flex: 1 1 0;
        min-width: 0;
    }
    /* Sidebar aksi: full column di kanan */
    /* === DEPRECATED 2026-06-30: gaya lama yang override admin_bukti_redesign.css.
       File admin_bukti_redesign.css (di-include setelah app.v3.css) sekarang
       pakai .col-aksi dengan overflow-x: auto (horizontal scroll) supaya tombol
       tidak memakan tempat vertikal. JANGAN aktifkan rule ini. */
    /*
    .admin-bukti-table tbody tr td.col-aksi {
        grid-row: 1 / -1;
        grid-column: 2;
        background: #f8fafc;
        border-left: 1px solid #e2e8f0;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    */
    .admin-bukti-table tbody tr td.col-aksi::before {
        content: 'Aksi';
        font-weight: 700;
        color: #1e3a5f;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
        display: block;
    }
    /* === DEPRECATED: rule ini bikin tombol vertikal. Pakai horizontal
       dari admin_bukti_redesign.css (line 643-680). */
    /*
    .admin-bukti-table .bukti-actions {
        flex-direction: column;
        width: 100%;
    }
    */
    .admin-bukti-table .bukti-actions .btn-act {
        width: auto !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        min-width: 0;
        white-space: nowrap;
    }
    /* NOP column: full width di header card */
    .admin-bukti-table tbody tr td.col-nop {
        grid-column: 1;
        background: #f1f5f9;
        border-bottom: 1px solid #e2e8f0;
        padding: 12px 16px;
        font-size: 14px;
    }
    .admin-bukti-table tbody tr td.col-nop::before {
        flex: 0 0 auto;
    }
    .admin-bukti-table tbody tr td.col-nop .nop-fmt {
        font-size: 14px;
    }
    .admin-bukti-table .bukti-tagihan {
        text-align: left;
        font-size: 16px;
    }
}

/* === MOBILE LAYOUT (≤768px): stacked card === */
@media (max-width: 768px) {
    .admin-bukti-table,
    .admin-bukti-table thead,
    .admin-bukti-table tbody,
    .admin-bukti-table tr,
    .admin-bukti-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    .admin-bukti-table thead {
        display: none;
    }
    .admin-bukti-table tbody tr {
        margin-bottom: 14px;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        padding: 12px 14px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .admin-bukti-table td {
        padding: 8px 0 !important;
        border: none !important;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        min-width: 0;
        line-height: 1.4;
    }
    .admin-bukti-table td + td {
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 2px;
        padding-top: 10px !important;
    }
    .admin-bukti-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        flex: 0 0 70px;
        font-size: 11px;
        line-height: 1.4;
        padding-top: 2px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .admin-bukti-table td > * {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }
    .admin-bukti-table .bukti-wp-name {
        font-size: 15px;
    }
    .admin-bukti-table .nop-fmt {
        font-size: 13px;
    }
    .admin-bukti-table .bukti-tagihan {
        font-size: 18px;
        text-align: left;
        width: 100%;
    }
    .admin-bukti-table .bukti-notes-box {
        font-size: 11.5px;
        max-height: 100px;
        padding: 8px 10px;
    }
    /* Aksi: 2 kolom di mobile, full-width */
    .admin-bukti-table .bukti-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        width: 100%;
    }
    .admin-bukti-table .bukti-actions .btn-act {
        width: 100%;
        min-height: 44px;
    }
    .admin-bukti-table .bukti-actions .btn-act-download,
    .admin-bukti-table .bukti-actions .btn-act-delete {
        grid-column: span 2;
    }
    .admin-bukti-table td.col-aksi {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-bukti-table td.col-aksi::before {
        margin-bottom: 4px;
    }
    /* Hide label desktop-only */
    .admin-bukti-table .label-mobile {
        display: none;
    }
}

/* === Extra small mobile (≤380px) === */
@media (max-width: 380px) {
    .admin-bukti-table td::before {
        flex: 0 0 56px;
        font-size: 10.5px;
    }
    .admin-bukti-table tbody tr {
        padding: 10px 12px;
    }
    .admin-bukti-table .bukti-actions {
        grid-template-columns: 1fr;
    }
    .admin-bukti-table .bukti-actions .btn-act-download,
    .admin-bukti-table .bukti-actions .btn-act-delete {
        grid-column: span 1;
    }
    .btn-act {
        font-size: 12px;
        padding: 10px 8px;
    }
}

/* (Section mobile responsive yang lama sudah di-replace dengan versi baru di patch utama) */

@keyframes rowPulse {
    0%   { background: #fef3c7; }
    100% { background: transparent; }
}

/* ===== Status pill polish ===== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
}
.pill-pending { background: #fef3c7; color: #92400e; }
.pill-verified { background: #dcfce7; color: #166534; }
.pill-rejected { background: #fee2e2; color: #991b1b; }
.pill-failed { background: #fee2e2; color: #991b1b; }
.pill-lunas { background: #dcfce7; color: #166534; }
.pill-menunggu { background: #fef3c7; color: #92400e; }
.pill-success { background: #dcfce7; color: #166534; }
.pill-warning { background: #fef3c7; color: #92400e; }
.pill-info { background: #dbeafe; color: #1e40af; }
.pill-muted { background: var(--slate-100); color: var(--slate-600); }
.pill-manual { background: #e0e7ff; color: #3730a3; }
.pill-single { background: #dbeafe; color: #1e40af; }
.pill-bulk { background: #ede9fe; color: #5b21b6; }
.pill-penghapusan { background: #fef3c7; color: #92400e; }

/* Pill size variants */
.pill-mini { font-size: 10px; padding: 2px 7px; }

/* Page transition */
.app-main {
    animation: fadeInUp 0.4s ease;
}

/* Card hover effect */
.card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Stat card animation */
.stat-card {
    transition: transform 0.2s, box-shadow 0.2s;
    animation: fadeInUp 0.5s ease backwards;
}
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.20s; }
.stat-card:nth-child(5) { animation-delay: 0.25s; }
.stat-card:nth-child(6) { animation-delay: 0.30s; }
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================
   SECTION CARDS (WP Detail)
   =========================== */
.section-card {
    margin-bottom: 20px;
    animation: fadeInUp 0.4s ease backwards;
}
.section-card:nth-child(2) { animation-delay: 0.05s; }
.section-card:nth-child(3) { animation-delay: 0.10s; }
.section-card:nth-child(4) { animation-delay: 0.15s; }
.section-card:nth-child(5) { animation-delay: 0.20s; }
.section-payment {
    border-top: 4px solid var(--gold);
}

/* Info grid (identitas, OP) */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 20px;
}
.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.info-item.info-full { grid-column: 1 / -1; }
.info-item.info-highlight .info-value { color: var(--navy); }
.info-label {
    font-size: 11px;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.info-value {
    font-size: 14px;
    color: var(--slate-900);
    word-break: break-word;
}
.info-value-lg { font-size: 18px; font-weight: 700; }
.info-mono { font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace; font-size: 13px; }

/* NJOP Grid */
.njop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.njop-item {
    background: var(--slate-50);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--slate-200);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.njop-item.njop-total {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--slate-100) 0%, var(--slate-200) 100%);
    border-color: var(--slate-300);
}
.njop-label {
    font-size: 11px;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.njop-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--slate-900);
}
.njop-value small { font-size: 12px; color: var(--slate-500); font-weight: 500; }

/* Tagihan box */
.tagihan-box {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: white;
    padding: 24px 20px;
    border-radius: var(--radius);
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.tagihan-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(245,158,11,0.2) 0%, transparent 70%);
    border-radius: 50%;
}
.tagihan-label {
    font-size: 12px;
    opacity: 0.9;
    letter-spacing: 1.5px;
    font-weight: 600;
    position: relative;
}
.tagihan-value {
    font-size: 36px;
    font-weight: 800;
    margin: 8px 0;
    letter-spacing: -0.5px;
    position: relative;
}
.tagihan-status {
    font-size: 12px;
    opacity: 0.85;
    position: relative;
}
.tagihan-status strong {
    background: rgba(245, 158, 11, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 4px;
}

/* Upload box (drag-drop inline) */
.upload-box {
    margin-bottom: 20px;
}
.upload-drop {
    border: 2px dashed var(--slate-300);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--slate-50);
    transition: all 0.2s;
    position: relative;
}
.upload-drop:hover {
    border-color: var(--gold);
    background: rgba(245, 158, 11, 0.04);
}
.upload-drop.drag {
    border-color: var(--gold);
    background: rgba(245, 158, 11, 0.08);
    transform: scale(1.01);
}
.upload-icon {
    font-size: 40px;
    margin-bottom: 8px;
    opacity: 0.7;
}
.upload-text {
    font-size: 15px;
    color: var(--slate-700);
    margin-bottom: 4px;
}
.upload-text strong { color: var(--navy); }
.upload-hint {
    font-size: 12px;
    color: var(--slate-500);
    margin-top: 6px;
}
.upload-hint code {
    background: var(--slate-200);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
}
.upload-progress {
    margin-top: 12px;
    padding: 12px;
    background: var(--slate-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--slate-200);
}
.upload-progress-bar {
    background: var(--slate-200);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.upload-progress-fill {
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
    height: 100%;
    width: 0%;
    transition: width 0.2s;
    border-radius: 3px;
}
.upload-progress-text {
    font-size: 12px;
    color: var(--slate-600);
    text-align: center;
}
.upload-result {
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.upload-result.success {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.upload-result.error {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.upload-result code {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* Bukti list */
.bukti-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.bukti-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}
.bukti-item:hover {
    background: var(--white);
    border-color: var(--blue);
    transform: translateX(2px);
    box-shadow: var(--shadow);
}
.bukti-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}
.bukti-info {
    flex: 1;
    min-width: 0;
}
.bukti-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-900);
    word-break: break-all;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    margin-bottom: 4px;
}
.bukti-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 11px;
    color: var(--slate-500);
}
.bukti-actions {
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .bukti-item { flex-wrap: wrap; }
    .bukti-actions { width: 100%; }
    .bukti-actions .btn { width: 100%; justify-content: center; }
    .tagihan-value { font-size: 28px; }
    .njop-grid { grid-template-columns: repeat(2, 1fr); }
    .info-grid { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
    .info-item.info-full { grid-column: 1 / -1; }
}

/* ===========================
   PILL (Status badges)
   =========================== */
.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.pill-lunas, .pill-verified, .pill-TINGGI { background: rgba(16, 185, 129, 0.15); color: #047857; }
.pill-belum, .pill-pending, .pill-MINIMAL { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.pill-menunggu, .pill-manual, .pill-SEDANG { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.pill-failed, .pill-STANDAR { background: rgba(100, 116, 139, 0.15); color: #475569; }

/* ===========================
   ALERT
   =========================== */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid;
}
.alert-info { background: rgba(59, 130, 246, 0.1); color: #1d4ed8; border-color: rgba(59, 130, 246, 0.3); }
.alert-error, .alert-danger { background: rgba(239, 68, 68, 0.1); color: #b91c1c; border-color: rgba(239, 68, 68, 0.3); }
.alert-success { background: rgba(16, 185, 129, 0.1); color: #047857; border-color: rgba(16, 185, 129, 0.3); }
.alert a { font-weight: 600; }

/* ===========================
   SPLASH SCREEN
   =========================== */
.app-splash {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0a1635 0%, #1e3a8a 50%, #2563eb 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.6s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.6s;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.app-splash.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* After splash fully removed from DOM, allow clicks to pass through */
body.app-ready .app-splash {
    pointer-events: none !important;
}
body.app-ready {
    overflow: auto;
}
.app-splash-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.app-splash-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}
.app-splash-orb-1 {
    width: 400px; height: 400px;
    top: -100px; right: -100px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
    animation: splash-float1 8s ease-in-out infinite;
}
.app-splash-orb-2 {
    width: 300px; height: 300px;
    bottom: -80px; left: -80px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    animation: splash-float2 10s ease-in-out infinite;
}
@keyframes splash-float1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, 30px) scale(1.1); }
}
@keyframes splash-float2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.15); }
}
.app-splash-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}
.app-splash-logo {
    position: relative;
    width: 120px; height: 120px;
    margin-bottom: 28px;
    animation: splash-logoIn 0.8s cubic-bezier(0.32, 0.72, 0, 1) backwards;
}
@keyframes splash-logoIn {
    from { opacity: 0; transform: scale(0.6) rotate(-10deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}
.app-splash-logo svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 8px 24px rgba(245, 158, 11, 0.4));
    animation: splash-pulse 3s ease-in-out infinite;
}
@keyframes splash-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.app-splash-ring, .app-splash-ring-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.app-splash-ring {
    inset: -8px;
    border: 2px solid transparent;
    border-top-color: #f59e0b;
    border-right-color: #fbbf24;
    animation: splash-spin 1.5s linear infinite;
}
.app-splash-ring-2 {
    inset: -16px;
    border: 1px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.3);
    border-left-color: rgba(255, 255, 255, 0.15);
    animation: splash-spin 2.5s linear infinite reverse;
}
@keyframes splash-spin { to { transform: rotate(360deg); } }
.app-splash-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: splash-fadeUp 0.6s ease 0.3s backwards;
}
.app-splash-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 12px;
    letter-spacing: 0.5px;
    animation: splash-fadeUp 0.6s ease 0.4s backwards;
}
.app-splash-tag {
    color: #f59e0b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 48px;
    padding: 4px 12px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    animation: splash-fadeUp 0.6s ease 0.5s backwards;
}
@keyframes splash-fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.app-splash-loader {
    width: 200px;
    animation: splash-fadeUp 0.6s ease 0.7s backwards;
}
.app-splash-loader-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}
.app-splash-loader-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
    border-radius: 2px;
    width: 0%;
    transition: width 0.4s ease;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
    position: relative;
}
.app-splash-loader-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: splash-shimmer 1.5s linear infinite;
}
@keyframes splash-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.app-splash-loader-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    margin-top: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    min-height: 16px;
    transition: opacity 0.3s;
}
.app-splash-footer {
    position: absolute;
    bottom: 24px;
    left: 0; right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    letter-spacing: 0.5px;
    animation: splash-fadeUp 0.6s ease 0.9s backwards;
}
.app-splash-footer strong { color: #f59e0b; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
    .app-splash-orb, .app-splash-logo svg,
    .app-splash-ring, .app-splash-ring-2,
    .app-splash-loader-fill::after { animation: none; }
}

/* ===========================
   KELAS CHART (Distribusi)
   =========================== */
.kelas-chart { display: flex; flex-direction: column; gap: 16px; }

.kelas-stacked-bar {
    display: flex;
    width: 100%;
    height: 32px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--slate-200);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    position: relative;
}
.kelas-segment {
    height: 100%;
    transition: opacity 0.2s, transform 0.2s;
    position: relative;
    cursor: default;
}
.kelas-segment:hover { opacity: 0.85; transform: scaleY(1.05); z-index: 1; }
.kelas-segment + .kelas-segment { border-left: 1px solid rgba(255,255,255,0.4); }
.kelas-TINGGI { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important; }
.kelas-SEDANG { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important; }
.kelas-STANDAR { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important; }
.kelas-MINIMAL { background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%) !important; }

.kelas-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kelas-legend-item {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.kelas-legend-item:hover { background: var(--slate-50); }

.kelas-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.kelas-legend-content { min-width: 0; }
.kelas-legend-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.kelas-legend-header strong { font-size: 14px; color: var(--slate-900); }
.kelas-legend-pct {
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-700);
    font-variant-numeric: tabular-nums;
}
.kelas-legend-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 11px;
    color: var(--slate-500);
    line-height: 1.4;
}
.kelas-legend-meta > span { white-space: nowrap; }
.kelas-legend-dot { opacity: 0.4; }
.kelas-legend-desc { color: var(--slate-400); font-style: italic; }

.kelas-legend-bar {
    grid-column: 1 / -1;
    height: 8px;
    background: #e2e8f0;            /* SAMA dengan Per Dusun */
    border-radius: 4px;             /* SAMA dengan Per Dusun */
    overflow: hidden;
    margin-top: 6px;
    position: relative;             /* untuk lunas overlay kalau ada */
}
.kelas-legend-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.kelas-footer {
    text-align: right;
    padding-top: 8px;
    border-top: 1px solid var(--slate-200);
}
.kelas-footer strong { color: var(--slate-900); }

@media (max-width: 640px) {
    .kelas-stacked-bar { height: 24px; }
    .kelas-legend-meta { font-size: 11px; }
    .kelas-legend-desc { display: none; }
}

/* ===========================
   UTILITIES
   =========================== */
.text-mono { font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace; }
.muted { color: var(--slate-500); }
.empty { padding: 32px 16px; text-align: center; color: var(--slate-500); font-style: italic; }
.btn-block { display: flex; width: 100%; align-items: center; justify-content: center; }
.btn-lg { padding: 14px 20px; font-size: 16px; }

/* ===========================
   MODAL (Payment + general)
   =========================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 0;
}
.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}
.modal-dialog {
    background: var(--white);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.3);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}
.modal-overlay.open .modal-dialog {
    transform: translateY(0);
}
@media (min-width: 641px) {
    .modal-overlay { align-items: center; padding: 20px; }
    .modal-dialog {
        border-radius: var(--radius-lg);
        max-height: 80vh;
        transform: translateY(20px) scale(0.96);
    }
    .modal-overlay.open .modal-dialog {
        transform: translateY(0) scale(1);
    }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--slate-200);
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: white;
    position: relative;
}
.modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}
.modal-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.25); transform: rotate(90deg); }
.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--slate-200);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    background: var(--slate-50);
}

/* Modal steps */
.modal-step {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    align-items: flex-start;
}
.modal-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--navy);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}
.modal-step-content { flex: 1; min-width: 0; }
.modal-step-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--slate-900);
    margin-bottom: 8px;
}

/* NOP copy row */
.nop-copy-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    background: var(--slate-50);
    border: 2px solid var(--slate-200);
    border-radius: var(--radius-sm);
    padding: 4px;
    transition: border-color 0.2s;
}
.nop-copy-row:hover { border-color: var(--navy); }
.nop-copy-code {
    flex: 1;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    word-break: break-all;
    min-width: 0;
}
.btn-copy {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
    min-width: 88px;
    justify-content: center;
}
.btn-copy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3); }
.btn-copy.copied {
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
}

/* Payment URL box */
.payment-url-box {
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    word-break: break-all;
}
.payment-url-box code {
    font-size: 12px;
    color: var(--slate-700);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Modal summary */
.modal-summary {
    background: linear-gradient(135deg, var(--slate-50) 0%, var(--slate-100) 100%);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: 16px;
    border: 1px solid var(--slate-200);
}
.modal-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    color: var(--slate-600);
    gap: 8px;
}
.modal-summary-row strong {
    color: var(--slate-900);
    text-align: right;
    word-break: break-word;
}

/* iOS safe area for bottom sheet */
@supports (padding: max(0px)) {
    .modal-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}


/* ============================
   PWA Install Popup Modal
   ============================ */
.pwa-install-popup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.pwa-install-popup.show {
    opacity: 1;
    pointer-events: auto;
}
.pwa-install-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 53, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pwa-install-modal {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 24px 24px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(10, 22, 53, 0.4), 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: scale(0.85) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.pwa-install-popup.show .pwa-install-modal {
    transform: scale(1) translateY(0);
}
.pwa-install-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    color: #475569;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 2;
}
.pwa-install-close:hover {
    background: #e2e8f0;
    transform: rotate(90deg);
}
.pwa-install-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    filter: drop-shadow(0 8px 16px rgba(245, 158, 11, 0.35));
    animation: pwa-icon-float 3s ease-in-out infinite;
}
@keyframes pwa-icon-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.pwa-install-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #0a1635;
    line-height: 1.3;
}
.pwa-install-desc {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.5;
}
.pwa-install-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
}
.pwa-install-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
    color: #334155;
}
.pwa-feat-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.pwa-install-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.pwa-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
}
.pwa-btn-primary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.pwa-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.5);
}
.pwa-btn-primary:active {
    transform: translateY(0);
}
.pwa-btn-ghost {
    background: #f1f5f9;
    color: #475569;
}
.pwa-btn-ghost:hover {
    background: #e2e8f0;
}
.pwa-install-footnote {
    margin: 0;
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 0.5px;
}

/* Mobile: bottom sheet style */
@media (max-width: 480px) {
    .pwa-install-popup {
        align-items: flex-end;
        padding: 0;
    }
    .pwa-install-modal {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 24px 20px 20px;
        transform: translateY(100%);
    }
    .pwa-install-popup.show .pwa-install-modal {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-icon {
        animation: none;
    }
    .pwa-install-modal {
        transition: opacity 0.2s;
        transform: none;
    }
}


/* ============================
   SPPT Penghapusan Section
   ============================ */
.penghapusan-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-left: 4px solid #d97706;
    border-radius: 10px;
    margin-bottom: 14px;
}
.penghapusan-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);
}
.penghapusan-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.penghapusan-text strong {
    font-size: 15px;
    color: #92400e;
    font-weight: 700;
}
.penghapusan-text small {
    font-size: 12px;
    color: #a16207;
}
.penghapusan-table {
    margin-bottom: 12px;
}
.penghapusan-table th {
    background: #fef3c7 !important;
    color: #92400e !important;
}
.penghapusan-table tbody tr {
    background: #fffbeb;
}
.penghapusan-table tbody tr:hover {
    background: #fef3c7;
}
.penghapusan-note {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: #f8fafc;
    border-left: 3px solid #94a3b8;
    border-radius: 6px;
    font-size: 12.5px;
    color: #64748b;
}

.pill-penghapusan {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #fcd34d;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}


/* ============================
   Table Scroll Wrapper
   ============================ */
.table-scroll-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    scrollbar-width: thin;
    scrollbar-color: #d97706 #fef3c7;
}
.table-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}
.table-scroll-wrapper::-webkit-scrollbar-track {
    background: #fef3c7;
    border-radius: 4px;
}
.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    border-radius: 4px;
    border: 1px solid #fef3c7;
}
.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #d97706, #b45309);
}

/* Scroll hint arrows (animated) */
.scroll-hint-left, .scroll-hint-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
    animation: scroll-hint-pulse 1.5s ease-in-out infinite;
}
.scroll-hint-left { left: 8px; }
.scroll-hint-right { right: 8px; }

@keyframes scroll-hint-pulse {
    0%, 100% { opacity: 0.85; transform: translateY(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateY(-50%) scale(1.1); }
}

/* Show scroll hint on small screens where table needs horizontal scroll */
@media (max-width: 768px) {
    .penghapusan-table-wrapper .scroll-hint-left,
    .penghapusan-table-wrapper .scroll-hint-right {
        display: flex;
    }
}

/* Penghapusan table - column widths untuk scroll yang clean */
.penghapusan-table-wrapper .penghapusan-table {
    min-width: 720px;
    margin: 0;
    border-radius: 0;
    border: none;
}
.col-nop-th    { min-width: 140px; }
.col-alamat-th { min-width: 200px; }
.col-njop-th   { min-width: 130px; text-align: right !important; }
.col-status-th { min-width: 110px; text-align: center !important; }

.penghapusan-table td.col-nop {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    white-space: nowrap;
}
.penghapusan-table td:nth-child(3) {
    /* Alamat OP - allow wrap tapi dengan min-width */
    word-break: break-word;
    min-width: 200px;
}
.penghapusan-table td:nth-child(4),
.penghapusan-table th:nth-child(4) {
    text-align: right;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    white-space: nowrap;
}
.penghapusan-table td:last-child,
.penghapusan-table th:last-child {
    text-align: center;
}

/* Sticky first column (NOP) untuk scroll horizontal yang panjang */
.penghapusan-table thead th:first-child,
.penghapusan-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fef3c7;
    z-index: 2;
    box-shadow: 2px 0 4px rgba(217, 119, 6, 0.1);
}
.penghapusan-table thead th:first-child {
    z-index: 3;
}

/* ============================
   Penghapusan Card List (Mobile)
   ============================ */
.ph-card-list {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.ph-card {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(217, 119, 6, 0.08);
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}
.ph-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #fde68a;
    flex-wrap: wrap;
}
.ph-card-nop {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    background: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #fcd34d;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}
.ph-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #78350f;
    margin-bottom: 10px;
    line-height: 1.3;
    word-break: break-word;
}

/* Alamat OP - full width row */
.ph-card-row-full {
    display: block;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid rgba(252, 211, 77, 0.3);
}
.ph-card-row-full .ph-card-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    color: #a16207;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.ph-card-value-full {
    display: block;
    color: #451a03;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.5;
}

/* Grid 2 kolom untuk Dusun + Tagihan */
.ph-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}
.ph-card-cell {
    background: rgba(255, 255, 255, 0.6);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(252, 211, 77, 0.4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.ph-card-cell-tagihan {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #f59e0b;
}
.ph-card-label-sm {
    font-size: 10.5px;
    color: #a16207;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.ph-card-value-sm {
    font-size: 12.5px;
    color: #451a03;
    font-weight: 600;
    word-break: break-word;
}
.ph-card-tagihan {
    color: #92400e;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* NJOP meta footer */
.ph-card-meta {
    padding-top: 8px;
    border-top: 1px solid rgba(252, 211, 77, 0.4);
    color: #92400e;
    font-size: 11px;
    text-align: right;
    opacity: 0.85;
}

/* Responsive: stack grid on very small screens */
@media (max-width: 380px) {
    .ph-card-grid {
        grid-template-columns: 1fr;
    }
    .ph-card {
        padding: 12px;
    }
}

/* Show card list on mobile, hide table */
@media (max-width: 768px) {
    .penghapusan-table-wrapper {
        display: none;
    }
    .ph-card-list {
        display: flex;
    }
}
@media (min-width: 769px) {
    .ph-card-list {
        display: none;
    }
    .penghapusan-table-wrapper {
        display: block;
    }
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
    .scroll-hint-left, .scroll-hint-right {
        animation: none;
    }
}


/* ============================
   Penghapusan Table - Excel-like
   ============================ */

/* Banner sederhana */
.penghapusan-banner-simple {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-left: 4px solid #d97706;
    border-radius: 8px;
    margin-bottom: 14px;
}
.ph-banner-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2);
}
.ph-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ph-banner-text strong {
    font-size: 14px;
    color: #92400e;
    font-weight: 700;
    line-height: 1.3;
}
.ph-banner-text small {
    font-size: 11.5px;
    color: #a16207;
    line-height: 1.4;
}

/* Tabel wrapper - scroll horizontal dengan sticky columns */
.ph-table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    scrollbar-width: thin;
    scrollbar-color: #d97706 #fef3c7;
    max-height: 360px;
    overflow-y: auto;
}
.ph-table-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.ph-table-wrapper::-webkit-scrollbar-track {
    background: #fef3c7;
    border-radius: 4px;
}
.ph-table-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    border-radius: 4px;
}

/* Tabel utama - Excel style */
.ph-table {
    width: 100%;
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: #fff;
}

/* Header - sticky top + gold background */
.ph-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}
.ph-table thead th {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid #92400e;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
}
.ph-table thead th.ph-th-nop {
    position: sticky;
    left: 0;
    z-index: 11;
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    min-width: 165px;
}
.ph-table thead th.ph-th-num {
    text-align: right;
    min-width: 100px;
}
.ph-table thead th.ph-th-status {
    text-align: center;
    min-width: 70px;
}

/* Body cells */
.ph-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #fef3c7;
    color: #451a03;
    vertical-align: middle;
}
.ph-table tbody tr:hover td {
    background: #fef3c7;
}
.ph-table tbody tr:nth-child(even) td {
    background: #fffbeb;
}
.ph-table tbody tr:nth-child(even):hover td {
    background: #fef3c7;
}

/* Sticky first column (NOP) */
.ph-table tbody td.ph-td-nop {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fef3c7;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: #92400e;
    border-right: 2px solid #fcd34d;
    white-space: nowrap;
    box-shadow: 2px 0 4px rgba(217, 119, 6, 0.1);
}
.ph-table tbody tr:nth-child(even) td.ph-td-nop {
    background: #fde68a;
}
.ph-table tbody tr:hover td.ph-td-nop {
    background: #fcd34d;
}

.ph-table tbody td.ph-td-name {
    font-weight: 600;
    color: #78350f;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ph-table tbody td.ph-td-alamat {
    font-size: 12px;
    color: #57534e;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-table tbody td.ph-td-luas {
    text-align: right;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #57534e;
}

.ph-table tbody td.ph-td-njop {
    text-align: right;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #78716c;
}

.ph-table tbody td.ph-td-tagihan {
    text-align: right;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: #92400e;
    background: rgba(254, 243, 199, 0.5);
}

.ph-table tbody td.ph-td-status {
    text-align: center;
}

/* Pill sederhana */
.ph-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fcd34d;
    border-radius: 4px;
    font-size: 12px;
}

/* ============================
   Card List Sederhana (Mobile)
   ============================ */
.ph-card-list-simple {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.ph-card-simple {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
    max-width: 100%;
}
.ph-card-simple-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.ph-card-nop-sm {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    color: #92400e;
    background: #fff;
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid #fcd34d;
    word-break: break-all;
    line-height: 1.4;
}
.ph-pill-sm {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid #fcd34d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ph-card-simple-name {
    font-size: 15px;
    font-weight: 700;
    color: #78350f;
    line-height: 1.3;
    word-break: break-word;
    margin-bottom: 4px;
}
.ph-card-simple-alamat {
    font-size: 12px;
    color: #57534e;
    word-break: break-word;
    margin-bottom: 10px;
    line-height: 1.4;
}
.ph-card-simple-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.ph-card-simple-grid > div {
    background: rgba(255, 255, 255, 0.6);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(252, 211, 77, 0.4);
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}
.ph-card-simple-grid > div:has(.ph-cs-tagihan) {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #f59e0b;
}
.ph-cs-label {
    font-size: 10px;
    color: #a16207;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.ph-cs-val {
    font-size: 12px;
    color: #451a03;
    font-weight: 600;
    word-break: break-word;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ph-cs-tagihan {
    color: #92400e !important;
    font-weight: 700 !important;
}

@media (max-width: 380px) {
    .ph-card-simple-grid {
        grid-template-columns: 1fr;
    }
}

/* Switch antara tabel & card */
@media (max-width: 768px) {
    .ph-table-wrapper {
        display: none;
    }
    .ph-card-list-simple {
        display: flex;
    }
}
@media (min-width: 769px) {
    .ph-card-list-simple {
        display: none;
    }
    .ph-table-wrapper {
        display: block;
    }
}


/* ============================
   Penghapusan - Tabel Simpel (Flat List)
   ============================ */

/* Banner minimal */
.ph-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    margin-bottom: 12px;
}
.ph-banner-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.ph-banner-text strong {
    display: block;
    font-size: 13.5px;
    color: #92400e;
    font-weight: 700;
    line-height: 1.3;
}
.ph-banner-text small {
    font-size: 11.5px;
    color: #a16207;
    line-height: 1.4;
}

/* Tabel wrapper - scroll horizontal saja */
.ph-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #fde68a;
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: #d97706 #fef3c7;
}
.ph-table-wrap::-webkit-scrollbar {
    height: 6px;
}
.ph-table-wrap::-webkit-scrollbar-track {
    background: #fef3c7;
}
.ph-table-wrap::-webkit-scrollbar-thumb {
    background: #d97706;
    border-radius: 3px;
}

/* Tabel utama - flat, no nested box */
.ph-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
}
.ph-table thead th {
    background: #fef3c7;
    color: #92400e;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 9px 12px;
    text-align: left;
    border-bottom: 2px solid #d97706;
    white-space: nowrap;
}
.ph-table thead th.ph-th-num {
    text-align: right;
}

/* Body - flat, no border per cell */
.ph-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    vertical-align: middle;
}
.ph-table tbody tr:last-child td {
    border-bottom: none;
}
.ph-table tbody tr:hover td {
    background: #fffbeb;
}

.ph-table tbody td.ph-td-nop {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: #1e3a8a;
    white-space: nowrap;
}
.ph-table tbody td.ph-td-name {
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}
.ph-table tbody td.ph-td-alamat {
    font-size: 12px;
    color: #6b7280;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ph-table tbody td.ph-td-num {
    text-align: right;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #4b5563;
    white-space: nowrap;
}
.ph-table tbody td.ph-td-tagihan {
    color: #92400e;
    font-weight: 700;
    font-size: 12.5px;
}


/* ============================
   Penghapusan - Tabel Final Fix
   (no box, no nested, clean)
   ============================ */

/* Banner tipis */
.ph-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    margin-bottom: 12px;
}
.ph-banner-icon { font-size: 18px; flex-shrink: 0; }
.ph-banner-text strong {
    display: block;
    font-size: 13.5px;
    color: #92400e;
    font-weight: 700;
    line-height: 1.3;
}
.ph-banner-text small {
    font-size: 11.5px;
    color: #a16207;
    line-height: 1.4;
}

/* Wrapper - scroll horizontal */
.ph-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #d97706 #fef3c7;
}
.ph-table-wrap::-webkit-scrollbar { height: 6px; }
.ph-table-wrap::-webkit-scrollbar-track { background: #fef3c7; }
.ph-table-wrap::-webkit-scrollbar-thumb { background: #d97706; border-radius: 3px; }

/* Tabel */
.ph-table {
    width: 100%;
    min-width: 580px;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 13px;
    background: #fff;
    table-layout: fixed;
}

/* Header - cream gold muda */
.ph-table thead th {
    background: #fde68a;
    color: #78350f;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid #d97706;
    white-space: nowrap;
}
.ph-table thead th.ph-th-num { text-align: right; }

/* Body cells - clean, no background */
.ph-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    vertical-align: middle;
    background: transparent;
}
.ph-table tbody tr:last-child td { border-bottom: none; }
.ph-table tbody tr:hover td { background: #fffbeb; }

/* Column 1: NOP - monospace */
.ph-table tbody td.ph-td-nop {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: #1e3a8a;
    white-space: nowrap;
}

/* Column 2: Nama WP - prioritaskan! Tidak dipotong */
.ph-table tbody td.ph-td-name {
    font-weight: 600;
    color: #111827;
    /* Jangan pakai nowrap - biarkan wrap jika perlu */
    word-break: break-word;
    min-width: 110px;
}

/* Column 3: Luas inline - format "B 1850 · G 0" */
.ph-table tbody td.ph-td-luas-inline {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #4b5563;
    white-space: nowrap;
}
.ph-l-inline { display: inline-block; }
.ph-l-sep {
    display: inline-block;
    margin: 0 4px;
    color: #d97706;
    font-weight: 700;
}

/* Column 4 & 5: Numeric - monospace right-align */
.ph-table tbody td.ph-td-num {
    text-align: right;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #4b5563;
    white-space: nowrap;
}
.ph-table tbody td.ph-td-tagihan {
    color: #92400e;
    font-weight: 700;
    font-size: 12.5px;
}


/* ============================
   PENGHAPUSAN CARDS (semua field XLSX)
   ============================ */
.ph-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.ph-card {
    background: #ffffff;
    border: 1px solid #fde68a;
    border-left: 4px solid #d97706;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.08);
}

.ph-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #fde68a;
}

.ph-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #0a1635;
    margin-bottom: 10px;
    line-height: 1.3;
}

.ph-card-section {
    margin-bottom: 8px;
}

.ph-card-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

.ph-card-section-value {
    font-size: 13px;
    color: #1f2937;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ph-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 10px 0;
    padding: 10px;
    background: #fffbeb;
    border-radius: 8px;
}

@media (min-width: 380px) {
    .ph-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ph-grid-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ph-grid-item-wide {
    grid-column: 1 / -1;
    background: #fef3c7;
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 4px;
}

.ph-grid-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ph-grid-val {
    font-size: 13px;
    font-weight: 600;
    color: #0a1635;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ph-grid-val-njop {
    font-size: 15px;
    color: #d97706;
    font-weight: 700;
}

.ph-card-footnote {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #fde68a;
    font-size: 11.5px;
    color: #78350f;
    line-height: 1.4;
    font-style: italic;
}

.ph-foot-icon {
    margin-right: 2px;
}

@media (min-width: 640px) {
    .ph-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .ph-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* =====================================
   BUKTI BAYAR PAGE
   ===================================== */

.stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

@media (min-width: 640px) {
    .stats-row {
        grid-template-columns: repeat(5, 1fr);
    }
}

.stat-mini {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.stat-mini-val {
    font-size: 20px;
    font-weight: 700;
    color: #0a1635;
    font-feature-settings: 'tnum';
}

.filter-bar-bukti {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

@media (min-width: 640px) {
    .filter-bar-bukti {
        grid-template-columns: 2fr 1fr 1fr;
    }
    .filter-bar-bukti input[type="date"] { grid-column: auto; }
}

@media (min-width: 900px) {
    .filter-bar-bukti {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr auto;
        align-items: center;
    }
}

/* Bukti table */
.bukti-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    /* Visual cue for scrollable */
    background:
        linear-gradient(to right, white 30%, rgba(255,255,255,0)) left center / 20px 100% no-repeat local,
        linear-gradient(to right, rgba(255,255,255,0), white 70%) right center / 20px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) left center / 12px 100% no-repeat local,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) right center / 12px 100% no-repeat local;
    background-attachment: local, local, scroll, scroll;
}

.bukti-table {
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

/* Custom scrollbar - navy + gold theme */
.bukti-table-wrap::-webkit-scrollbar {
    height: 10px;
}
.bukti-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 8px;
}
.bukti-table-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #1e3a8a 0%, #f59e0b 100%);
    border-radius: 8px;
    border: 2px solid #f1f5f9;
}
.bukti-table-wrap::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #1e40af 0%, #fbbf24 100%);
}

.bukti-table th {
    background: #f1f5f9;
    color: #0a1635;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    padding: 10px 12px;
    border-bottom: 2px solid #cbd5e1;
    text-align: left;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.bukti-table .th-num { text-align: right; }

.bukti-table td {
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.bukti-table tbody tr:hover {
    background: #f8fafc;
}

.bukti-wp-name {
    font-weight: 700;
    color: #0a1635;
    font-size: 14px;
    margin-bottom: 2px;
}

.bukti-wp-meta {
    font-size: 12px;
    color: #475569;
    margin-bottom: 4px;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
}
.bukti-wp-meta a {
    word-break: break-all;
    overflow-wrap: anywhere;
}
.bukti-wp-name,
.bukti-file-link,
.bukti-file-meta {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
}

.bukti-dusun-tag {
    display: inline-block;
    background: #dbeafe;
    color: #1e40af;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
}

.bukti-tagihan {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-weight: 700;
    color: #d97706;
    font-size: 13.5px;
    text-align: right;
    white-space: nowrap;
}

.bukti-file-link {
    display: inline-block;
    background: #0a1635;
    color: #ffffff;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.15s;
}

.bukti-file-link:hover {
    background: #f59e0b;
    color: #0a1635;
}

.bukti-file-meta {
    font-size: 10.5px;
    color: #64748b;
    margin-top: 3px;
}

.bukti-time {
    font-size: 12.5px;
    color: #0a1635;
    font-weight: 600;
}

.bukti-uploader {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

/* Pills: status */
.pill-pending {
    background: #fef3c7;
    color: #92400e;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.pill-verified {
    background: #dcfce7;
    color: #166534;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}
.pill-rejected {
    background: #fee2e2;
    color: #991b1b;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pill-bulk {
    background: #ede9fe;
    color: #5b21b6;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-block;
}
.pill-single {
    background: #e0f2fe;
    color: #075985;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-block;
}
.pill-penghapusan {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-block;
}

/* Pagination */
.bukti-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 0 4px;
    border-top: 1px solid #e2e8f0;
    margin-top: 12px;
}

.pag-info {
    font-size: 12.5px;
    color: #475569;
    font-weight: 500;
}

.pag-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.btn-pag {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0a1635;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-pag:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-pag.active {
    background: #0a1635;
    color: #ffffff;
    border-color: #0a1635;
}

.btn-pag:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pag-ellipsis {
    color: #94a3b8;
    padding: 6px 4px;
    font-weight: 700;
}

/* Loading overlay */
.bukti-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    backdrop-filter: blur(2px);
    z-index: 10;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: #d97706;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   BUKTI BAYAR — Row coloring by WP payment status
   Added 2026-06-24 untuk highlight WP lunas
   ============================================================ */

/* Row hijau untuk bukti verified + WP sudah LUNAS */
.data-table tbody tr.row-lunas {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.04) 100%);
    border-left: 4px solid #10b981;
}
.data-table tbody tr.row-lunas:hover {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.08) 100%);
}
.data-table tbody tr.row-lunas > td {
    border-bottom-color: rgba(16, 185, 129, 0.20);
}

/* Row kuning untuk bukti verified tapi WP belum lunas (perlu backfill) */
.data-table tbody tr.row-verified-pending {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.03) 100%);
    border-left: 4px solid #f59e0b;
}
.data-table tbody tr.row-verified-pending:hover {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.06) 100%);
}

/* Row merah muda untuk bukti ditolak */
.data-table tbody tr.row-rejected {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.06) 0%, rgba(239, 68, 68, 0.02) 100%);
    border-left: 4px solid #ef4444;
}
.data-table tbody tr.row-rejected:hover {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.04) 100%);
}

/* Pill untuk WP LUNAS (di kolom NOP) */
.pill.pill-lunas {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    padding: 3px 8px;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
    display: inline-block;
}

/* Pill untuk MENUNGGU (di kolom NOP) */
.pill.pill-menunggu {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    padding: 3px 8px;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25);
    display: inline-block;
}

/* Stat mini tambahan: WP Lunas (di stats-row atas halaman bukti) */
.stat-mini.stat-mini-lunas {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.04) 100%);
    border-left: 4px solid #10b981;
}
.stat-mini.stat-mini-lunas .stat-mini-val {
    color: #059669;
}

/* Legend di atas tabel bukti */
.bukti-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(248, 250, 252, 0.7);
    border-radius: 8px;
    font-size: 12px;
    color: var(--slate-600, #475569);
}
.bukti-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bukti-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.08);
}
.bukti-legend-swatch.swatch-lunas {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.30), rgba(16, 185, 129, 0.10));
    border-left: 3px solid #10b981;
}
.bukti-legend-swatch.swatch-pending {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.08));
    border-left: 3px solid #f59e0b;
}
.bukti-legend-swatch.swatch-rejected {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.08));
    border-left: 3px solid #ef4444;
}

/* ============================================================
   WP LIST — bukti pending badge + row needs-admin highlight
   Added 2026-06-24 untuk highlight WP yang punya bukti menunggu verifikasi
   ============================================================ */

.data-table tbody tr.row-needs-admin {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, rgba(245, 158, 11, 0.02) 100%);
    border-left: 3px solid #f59e0b;
}
.data-table tbody tr.row-needs-admin:hover {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.04) 100%);
}

/* Badge "bukti pending" di kolom Status */
.bukti-pending-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Badge "verified" di kolom Status */
.bukti-verified-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.20);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Pulse animation untuk row yang butuh aksi admin (biar lebih eye-catching) */
@keyframes pulse-amber {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.40); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
.data-table tbody tr.row-needs-admin .bukti-pending-badge {
    animation: pulse-amber 2s ease-in-out infinite;
}

/* ============================================================
   DASHBOARD — Lunas Per Dusun section
   Added 2026-06-24 untuk visualisasi WP lunas per dusun
   ============================================================ */

.lunas-dusun-card {
    margin-top: 18px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgba(255,255,255,1) 60%);
    border-left: 4px solid #10b981;
}

/* Summary cards di atas grafik */
.lunas-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.lunas-summary-item {
    background: #fff;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(16, 185, 129, 0.18);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
    text-align: center;
    transition: transform 0.2s;
}
.lunas-summary-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}
.lunas-summary-val {
    font-size: 22px;
    font-weight: 800;
    color: #059669;
    letter-spacing: -0.5px;
}
.lunas-summary-label {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.4px;
}

/* List bar chart per dusun */
.lunas-dusun-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lunas-dusun-row {
    display: grid;
    grid-template-columns: 140px 1fr 140px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}
.lunas-dusun-row:hover {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.04) 0%, rgba(255,255,255,1) 80%);
    border-color: rgba(16, 185, 129, 0.30);
}
.lunas-dusun-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0a1635;
}
.lunas-rank {
    font-size: 16px;
    flex-shrink: 0;
}
.lunas-dusun-bar-wrap {
    background: #f1f5f9;
    border-radius: 20px;
    height: 26px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.lunas-dusun-bar {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    height: 100%;
    border-radius: 20px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    transition: width 0.6s ease;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}
.lunas-dusun-count {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.lunas-dusun-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    gap: 4px;
    text-align: right;
}
.lunas-dusun-pct {
    color: #475569;
    font-weight: 600;
    line-height: 1.3;
}
.lunas-dusun-money {
    color: #059669;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
}

/* Responsive: tablet & mobile */
@media (max-width: 900px) {
    .lunas-dusun-row {
        grid-template-columns: 1fr;
        grid-template-areas:
        "label"
        "bar"
        "meta";
        gap: 10px;
        padding: 14px 16px;
    }
    .lunas-dusun-label {
        grid-area: label;
        font-size: 14px;
        padding-bottom: 2px;
        border-bottom: 1px solid #f1f5f9;
    }
    .lunas-dusun-bar-wrap {
        grid-area: bar;
        height: 24px;
        order: 0;
    }
    .lunas-dusun-meta {
        grid-area: meta;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 8px;
        padding-top: 6px;
        border-top: 1px solid #f1f5f9;
    }
    .lunas-dusun-money {
        font-size: 13px;
    }
    .lunas-dusun-pct {
        font-size: 11px;
    }
}

/* =============================================================
   DASHBOARD — Section 2: Pembayaran Lunas Per Dusun
   Class: .dusun-lunas-list (server-side rendered, beda dari
   section 1 yang pakai .lunas-dusun-list JS-rendered).
   ============================================================= */

.dusun-lunas-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dusun-row {
    display: grid;
    grid-template-columns: 1.4fr 2fr 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}
.dusun-row:hover {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.04) 0%, rgba(255,255,255,1) 80%);
    border-color: rgba(16, 185, 129, 0.30);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06);
}

.dusun-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.dusun-nama {
    font-size: 14px;
    font-weight: 700;
    color: #0a1635;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dusun-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #64748b;
    flex-wrap: wrap;
}
.dusun-count {
    font-weight: 600;
    color: #475569;
}
.dusun-tagihan {
    color: #059669;
    font-weight: 700;
}

.dusun-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.progress-track {
    flex: 1;
    background: #f1f5f9;
    border-radius: 20px;
    height: 24px;
    overflow: hidden;
    position: relative;
    min-width: 60px;
}
.progress-fill {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    height: 100%;
    border-radius: 20px;
    min-width: 4px;
    transition: width 0.6s ease;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}
.progress-label {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    white-space: nowrap;
    min-width: 36px;
    text-align: right;
}

.dusun-badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.pill-mini {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
}
.pill-mini.pill-success {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #15803d;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.pill-mini.pill-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.pill-mini.pill-muted {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* Responsive: tablet & mobile */
@media (max-width: 900px) {
    .dusun-row {
        grid-template-columns: 1fr;
        grid-template-areas:
        "info"
        "progress"
        "badges";
        gap: 10px;
        padding: 14px 16px;
    }
    .dusun-info {
        grid-area: info;
        padding-bottom: 8px;
        border-bottom: 1px solid #f1f5f9;
    }
    .dusun-nama {
        font-size: 14px;
    }
    .dusun-progress {
        grid-area: progress;
        width: 100%;
    }
    .dusun-badges {
        grid-area: badges;
        justify-content: flex-start;
        padding-top: 6px;
        border-top: 1px solid #f1f5f9;
    }
}

/* ===== AUTO-UPDATE OVERLAY v17 ===== */
.update-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: updateFadeIn 0.25s ease-out;
}

@keyframes updateFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.update-overlay[hidden] {
    display: none !important;
}

.update-card {
    background: #fff;
    border-radius: 20px;
    padding: 36px 28px;
    max-width: 360px;
    width: calc(100% - 32px);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05);
    animation: updateSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes updateSlideUp {
    from { transform: translateY(30px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.update-spinner {
    margin: 0 auto 18px;
    display: flex;
    justify-content: center;
}

.update-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #1e3a8a;
}

.update-card p {
    margin: 0 0 18px;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.update-progress {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.update-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 50%, #f59e0b 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.update-card small {
    color: #94a3b8;
    font-size: 11px;
    font-family: 'SF Mono', Monaco, monospace;
}

/* Update indicator dot di footer */
.update-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #f59e0b;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    animation: updatePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
}

.update-dot[hidden] {
    display: none !important;
}

@keyframes updatePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

.update-dot.checking {
    animation: updateSpin 1s linear infinite;
    background: #3b82f6;
}

@keyframes updateSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Tombol Cek Update di header admin */
.btn-check-update {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.25);
    margin-left: 8px;
}

.btn-check-update:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.35);
}

.btn-check-update:active {
    transform: translateY(0);
}

.btn-check-update svg {
    width: 14px;
    height: 14px;
}

.app-footer {
    /* (no extra rule — main styles defined at top of file) */
}

/* Mobile responsive */
@media (max-width: 640px) {
    .update-card {
        padding: 28px 20px;
        max-width: 320px;
    }
    .update-card h3 { font-size: 18px; }
    .update-card p { font-size: 13px; }
    .btn-check-update {
        padding: 6px 10px;
        font-size: 12px;
    }
    .btn-check-update .label-text {
        display: none;
    }
}

/* ===== FIX: Header Actions Layout v17 ===== */
.page-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 20px 24px !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    margin-bottom: 20px !important;
}

.page-header > div:first-child {
    flex: 1 1 200px !important;
    min-width: 0 !important;
}

.page-header h1 {
    margin: 0 0 4px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1e3a8a !important;
}

.page-header p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    flex-shrink: 0 !important;
}

/* Stat grid biar mobile responsive juga */
.stat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.stat-card {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    border-left: 4px solid #e2e8f0 !important;
}

.stat-card.stat-primary { border-left-color: #1e3a8a !important; }
.stat-card.stat-success { border-left-color: #10b981 !important; }
.stat-card.stat-warning { border-left-color: #f59e0b !important; }
.stat-card.stat-danger  { border-left-color: #ef4444 !important; }
.stat-card.stat-rose    { border-left-color: #f43f5e !important; background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important; }

/* SPLIT CARD: bagi dua sama besar (50:50) - untuk gabungan Sudah Lunas + Sisa Target */
.stat-card-split {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    border-left: none !important;
    grid-column: span 2 !important;
}
.stat-card-split .stat-split-half {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    min-width: 0;
    position: relative;
}
.stat-card-split .stat-split-divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #e2e8f0 30%, #e2e8f0 70%, transparent 100%);
    align-self: stretch;
    flex-shrink: 0;
}
.stat-card-split .stat-success-half {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left: 4px solid #10b981;
    border-radius: 14px 0 0 14px;
}
.stat-card-split .stat-rose-half {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border-right: 4px solid #f43f5e;
    border-radius: 0 14px 14px 0;
}
.stat-card-split .stat-split-half .stat-icon { font-size: 28px; flex-shrink: 0; }
.stat-card-split .stat-split-half .stat-content { flex: 1; min-width: 0; }
.stat-card-split .stat-split-half .stat-value { font-size: 22px !important; line-height: 1.1; }
.stat-card-split .stat-split-half .stat-label { font-size: 11px; }
.stat-card-split .stat-split-half .stat-sub { font-size: 11px; }

/* Responsive: di mobile ≤768px, card split jadi stack vertikal & full-width */
@media (max-width: 768px) {
    .stat-card-split {
        flex-direction: column !important;
        grid-column: span 1 !important;
    }
    .stat-card-split .stat-split-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent 0%, #e2e8f0 30%, #e2e8f0 70%, transparent 100%);
    }
    .stat-card-split .stat-success-half {
        border-radius: 14px 14px 0 0;
        border-left: 4px solid #10b981;
        border-bottom: none;
    }
    .stat-card-split .stat-rose-half {
        border-radius: 0 0 14px 14px;
        border-right: 4px solid #f43f5e;
        border-top: none;
    }
}

/* Responsive: di mobile ≤480px, card split jadi stack vertikal */
@media (max-width: 480px) {
    .stat-card-split { flex-direction: column !important; }
    .stat-card-split .stat-split-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent 0%, #e2e8f0 30%, #e2e8f0 70%, transparent 100%);
    }
    .stat-card-split .stat-success-half {
        border-radius: 14px 14px 0 0;
        border-left: 4px solid #10b981;
        border-bottom: none;
    }
    .stat-card-split .stat-rose-half {
        border-radius: 0 0 14px 14px;
        border-right: 4px solid #f43f5e;
        border-top: none;
    }
}

/* XL variant: bigger card dengan breakdown */
.stat-card.stat-card-xl { grid-column: span 1; min-height: 180px; }
.stat-card-xl .stat-value { font-size: 28px !important; }
.stat-card-xl .stat-icon { font-size: 36px !important; width: 56px !important; height: 56px !important; }

.stat-breakdown {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
}
.stat-bd-item {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 3px solid #cbd5e1;
}
.stat-bd-item.stat-bd-active { border-left-color: #10b981; background: #f0fdf4; }
.stat-bd-item.stat-bd-ph { border-left-color: #f43f5e; background: #fef2f2; }
.stat-bd-label { font-size: 10px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; }
.stat-bd-value { font-size: 16px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.stat-bd-sub { font-size: 10px; color: #64748b; font-weight: 500; }

@media (max-width: 768px) {
    .stat-card.stat-card-xl { min-height: auto; }
    .stat-breakdown { flex-direction: column; }
}

.stat-icon {
    font-size: 32px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
}

.stat-content { flex: 1 !important; min-width: 0 !important; }
.stat-value { font-size: 22px !important; font-weight: 700 !important; color: #0f172a !important; }
.stat-label { font-size: 13px !important; color: #64748b !important; margin-top: 2px !important; }
.stat-sub   { font-size: 12px !important; color: #94a3b8 !important; margin-top: 2px !important; }

/* Mobile fine-tune */
@media (max-width: 640px) {
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px !important;
    }
    .header-actions {
        justify-content: stretch !important;
    }
    .header-actions > * {
        flex: 1 !important;
        justify-content: center !important;
    }
    .btn-check-update .label-text {
        display: inline !important;
    }
    .stat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .stat-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 14px !important;
    }
    .stat-icon {
        margin: 0 auto !important;
    }
}

/* ===== HEADER UPDATE BUTTON (v17.1) ===== */
.header-update-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: none; /* shown via media query below */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    margin-left: 8px;
}

.header-update-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    transition: transform 0.4s ease;
}

.header-update-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.header-update-btn:active svg {
    transform: rotate(180deg);
}

.header-update-btn.checking svg {
    animation: headerSpin 1s linear infinite;
    color: #fbbf24;
}

.header-update-btn.clearing {
    pointer-events: none;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(239, 68, 68, 0.2) 100%);
    border: 1px solid rgba(245, 158, 11, 0.6);
    cursor: wait;
}

.header-update-btn.clearing svg {
    animation: headerSpin 0.6s linear infinite;
    color: #f59e0b;
    stroke-width: 3;
}

.header-update-btn.clearing .header-update-dot {
    background: #f59e0b;
    animation: headerSpin 0.6s linear infinite;
}

@keyframes headerSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Dot notification di pojok tombol */
.header-update-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: #f59e0b;
    border: 2px solid #1e3a8a;
    border-radius: 50%;
    animation: headerDotPulse 1.5s ease-in-out infinite;
}

.header-update-dot[hidden] {
    display: none !important;
}

@keyframes headerDotPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    50% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

.header-update-btn.has-update {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.15) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

/* ===== LAYOUT HEADER UPDATE — Show di mobile + tablet ===== */
@media (max-width: 1024px) {
    .header-update-btn {
        display: flex;
    }
    }

/* Desktop: sembunyikan icon button di header (tetap ada tombol di header content jika perlu) */
@media (min-width: 1025px) {
    /* Login Admin visibility swap for desktop */
    .nav-item-login--mobile { display: none !important; }
    .nav-item-login--desktop { display: flex !important; }

    .header-update-btn {
        display: none;
    }
}

/* Header layout — fix posisi tombol di header bar */
.app-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.brand-mark {
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-text small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

.menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
}

.menu-toggle svg {
    width: 22px;
    height: 22px;
}

/* ===== HEADER BUTTON GROUP FIX (v17.3) ===== */
/* Tombol Update dipush ke kanan setelah Brand, lalu Hamburger */
.header-update-btn {
    margin-left: auto !important;
}

/* Hamburger di kanan sekali dengan gap dari tombol Update */
.menu-toggle {
    margin-left: 8px !important;
}

/* ===== HEADER & NAV FINAL CLEANUP (v17.4) ===== */
/* Reset app-nav: hidden by default di semua viewport (drawer mode) */
.app-nav {
    margin-left: auto !important;
    display: none !important;
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 82vw !important;
    background: linear-gradient(180deg, #0f1d4a 0%, #1e3a8a 50%, #2563eb 100%) !important;
    color: var(--white) !important;
    padding: 0 !important;
    z-index: 999 !important;
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.4) !important;
    overflow-y: auto !important;
    visibility: hidden !important;
}

/* When menu open: show drawer */
body.menu-open .app-nav {
    transform: translateX(0) !important;
    visibility: visible !important;
    display: flex !important;
}

/* Reset menu-toggle: hidden default, show on mobile/tablet */
.menu-toggle {
    display: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

.menu-toggle svg {
    width: 22px !important;
    height: 22px !important;
}

/* Show sidebar toggle on screens < 1024px (mobile/tablet drawer mode) */
@media (max-width: 1024px) {
    .sidebar-toggle {
        display: flex !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 110 !important;
    }
    .app-header-inner {
        position: relative !important;
        padding-right: 60px !important;
    }

    /* Sidebar: drawer from left, hidden by default */
    .app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 82vw !important;
        background: linear-gradient(180deg, #0f1d4a 0%, #1e3a8a 50%, #2563eb 100%) !important;
        color: var(--white) !important;
        z-index: 999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
        box-shadow: 4px 0 32px rgba(15, 23, 42, 0.4) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
    .app-sidebar.is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
    }
    .app-sidebar.is-open .app-nav {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        padding: 12px 14px !important;
        margin-left: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    .app-sidebar::before {
        content: '' !important;
        display: block !important;
        height: 56px !important;
        flex-shrink: 0 !important;
    }
    /* Login Admin visibility per viewport — no doubles */
    .nav-item-login--desktop { display: none !important; }
    .nav-item-login--mobile { display: flex !important; }
    /* Nav items vertical */
    .app-nav .nav-item {
        color: rgba(255, 255, 255, 0.85) !important;
        padding: 11px 16px !important;
        margin: 0 10px 2px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        transition: background 0.2s, color 0.2s !important;
    }
    .app-nav .nav-item:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }
    .app-nav .nav-item.active {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.1)) !important;
        color: #fde68a !important;
        font-weight: 700 !important;
    }
    .app-nav .nav-item.active::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 8px !important;
        bottom: 8px !important;
        width: 3px !important;
        background: var(--gold, #f59e0b) !important;
        border-radius: 0 2px 2px 0 !important;
    }
    .app-nav .nav-icon {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
        fill: currentColor !important;
    }
    /* Drawer profile visible on mobile */
    .app-nav .drawer-profile {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 16px 20px 20px !important;
        margin: 16px 0 8px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        opacity: 0 !important;
        transform: translateY(-8px) !important;
        transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s !important;
    }
    body.menu-open .app-nav .drawer-profile,
    .app-sidebar.is-open .drawer-profile {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    /* Nav user at bottom of drawer */
    .app-nav .nav-user {
        padding: 16px !important;
        margin: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(0, 0, 0, 0.2) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .app-nav .nav-user button,
    .app-nav .nav-user .nav-login {
        width: 100% !important;
        justify-content: center !important;
    }

    /* No margin shift on mobile */
    .app-main {
        margin-left: 0 !important;
        max-width: 100vw !important;
    }
    }

/* ============================================================
   AUTO-DETECT: SIDEBAR LAYOUT (≥1024px)
   Desktop gets a left sidebar 260px wide. Main content shifts right.
   Mobile (<1024px) uses drawer pattern (below).
   ============================================================ */
@media (min-width: 1025px) {
    .app-header {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    /* Brand: never shrink — full text always visible */
    .brand {
        flex: 0 0 auto !important;
        max-width: none !important;
        min-width: auto !important;
    }

    .brand-text strong {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Sidebar container: fixed left, full height below header */
    .app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        max-width: 260px !important;
        background: linear-gradient(180deg, #0f1d4a 0%, #1e3a8a 50%, #2563eb 100%) !important;
        color: var(--white) !important;
        padding: 0 !important;
        z-index: 100 !important;
        transform: none !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 4px 0 24px rgba(15, 23, 42, 0.15) !important;
        overflow: hidden !important;
        transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    /* Hide top bar on desktop (brand moved to sidebar header) */
    .app-header {
        display: none !important;
    }

    /* Main content offset from top (no header) */
    .app-main {
        padding-top: 24px !important;
    }

    /* Brand inside sidebar: keep visible (desktop) */
        .app-sidebar .app-nav {
            position: static !important;
            width: 100% !important;
            max-width: none !important;
            background: transparent !important;
            box-shadow: none !important;
            transform: none !important;
            visibility: visible !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 6px !important;
            flex-wrap: nowrap !important;
            padding: 12px 14px !important;
            margin-left: 0 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            flex: 1 1 auto !important;
            min-height: 0 !important;
        }

    /* Sidebar header with brand (real element, not pseudo) */
    .sidebar-header {
        display: flex !important;
        align-items: center !important;
        padding: 20px 18px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(0, 0, 0, 0.2) !important;
        flex-shrink: 0 !important;
    }
    .sidebar-header .brand {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        color: #fff !important;
        text-decoration: none !important;
    }
    .sidebar-header .brand-mark {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .sidebar-header .brand-mark svg {
        width: 36px !important;
        height: 36px !important;
    }
    .sidebar-header .brand-text strong {
        display: block !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #fff !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    .sidebar-header .brand-text small {
        display: block !important;
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        margin-top: 3px !important;
        white-space: nowrap !important;
    }

    /* Sidebar section labels */
    .app-sidebar .nav-section {
        display: block !important;
        padding: 12px 16px 4px !important;
        margin-top: 8px !important;
    }
    .app-sidebar .nav-section:first-of-type {
        margin-top: 0 !important;
    }
    .app-sidebar .nav-section-title {
        display: block !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.2px !important;
        color: rgba(255, 255, 255, 0.45) !important;
        margin-bottom: 4px !important;
    }

    /* Hide drawer-only decoration on desktop */
    .app-nav::before {
        display: none !important;
    }

    /* Hide drawer-only user profile block on desktop */
    .app-nav .drawer-profile {
        display: none !important;
    }

    /* Nav items: vertical pill style in sidebar */
    .app-nav .nav-item {
        color: rgba(255, 255, 255, 0.85) !important;
        padding: 11px 16px !important;
        border-radius: 10px !important;
        margin: 0 12px 2px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        transition: all 0.18s ease !important;
        white-space: nowrap !important;
        border-bottom: none !important;
        position: relative !important;
    }

    .app-nav .nav-item:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        transform: translateX(2px) !important;
    }

    .app-nav .nav-item.active {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.1)) !important;
        color: #fde68a !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2) !important;
    }
    .app-nav .nav-item.active::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 8px !important;
        bottom: 8px !important;
        width: 3px !important;
        background: var(--gold, #f59e0b) !important;
        border-radius: 0 2px 2px 0 !important;
    }

    /* Nav icons */
    .app-nav .nav-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 16px !important;
        line-height: 1 !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        fill: currentColor !important;
    }

    /* User profile in sidebar (pinned to bottom) */
    .app-nav .drawer-profile {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        margin: auto 0 0 !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .drawer-avatar {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }
    .drawer-user-name {
        font-size: 13px !important;
    }
    .drawer-user-role {
        font-size: 10px !important;
    }

    /* User info in nav-user (login button container) */
    .app-nav .nav-user {
        padding: 12px 16px !important;
        margin: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        background: rgba(0, 0, 0, 0.2) !important;
        margin-left: 0 !important;
        border-left: none !important;
    }

    .app-nav .user-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        line-height: 1.3 !important;
    }
    .app-nav .user-name {
        color: rgba(255, 255, 255, 0.95) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    .app-nav .user-role {
        font-size: 10px !important;
    }
    .app-nav .nav-user button,
    .app-nav .nav-user .nav-login {
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        width: 100% !important;
        height: auto !important;
        justify-content: center !important;
    }
    .app-nav .logout-form {
        display: block !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .app-nav .nav-user button {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    .app-nav .nav-user button:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }

    /* Main content shift right to clear sidebar */
    .app-main {
        margin-left: 260px !important;
        max-width: calc(100vw - 260px) !important;
        transition: margin-left 0.3s cubic-bezier(0.32, 0.72, 0, 1), max-width 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    /* Sidebar collapsed: hide it, restore main full width */
    body.sidebar-collapsed .app-sidebar {
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }
    body.sidebar-collapsed .app-main {
        margin-left: 0 !important;
        max-width: 100vw !important;
    }
    body.sidebar-collapsed .sidebar-toggle svg {
        transform: scaleX(-1) !important;
    }
    .sidebar-toggle svg {
        transition: transform 0.3s ease !important;
    }

    /* Sidebar toggle button: hidden on desktop (use icon in top bar) */
    .sidebar-toggle {
        display: none !important;
    }
}

/* Override: ALWAYS show sidebar-toggle on mobile (must come AFTER desktop rule) */
@media (max-width: 1024px) {
    .sidebar-toggle {
        display: flex !important;
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 110 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        border: none !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: background 0.2s ease !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }
    .sidebar-toggle svg {
        width: 20px !important;
        height: 20px !important;
    }
    /* FIX: .menu-toggle mobile show — HTML pakai menu-toggle bukan sidebar-toggle */
    .menu-toggle {
        display: flex !important;
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 110 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }
    .menu-toggle svg {
        width: 22px !important;
        height: 22px !important;
    }
    .app-header-inner {
        position: relative !important;
        padding-left: 16px !important;
        padding-right: 64px !important;
        gap: 12px !important;
    }
    }

/* ===== MOBILE COMPACT LAYOUT v17.5 - Modern & Rapi ===== */

/* Card utama: rapat padding, tighter gap */
.card {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    border: 1px solid #eef2f7 !important;
}

.card-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.card-header h2 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e3a8a !important;
}

.card-body {
    padding: 16px 20px !important;
}

/* Page header: compact, no extra space */
.page-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    margin-bottom: 16px !important;
    border: 1px solid #eef2f7 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

.page-header h1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 4px !important;
    letter-spacing: -0.02em !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.page-header p {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* Stat grid mobile: 2x2 dengan card compact modern */
.stat-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

@media (min-width: 640px) {
    .stat-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
}

.stat-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    border-left: 3px solid #e2e8f0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}

.stat-card:active {
    transform: scale(0.98) !important;
}

.stat-card.stat-primary { border-left-color: #1e3a8a !important; }
.stat-card.stat-success { border-left-color: #10b981 !important; }
.stat-card.stat-warning { border-left-color: #f59e0b !important; }
.stat-card.stat-danger  { border-left-color: #ef4444 !important; }
.stat-card.stat-rose    { border-left-color: #f43f5e !important; background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important; }

/* SPLIT CARD: bagi dua sama besar (50:50) - untuk gabungan Sudah Lunas + Sisa Target */
.stat-card-split {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    border-left: none !important;
    grid-column: span 2 !important;
}
.stat-card-split .stat-split-half {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    min-width: 0;
    position: relative;
}
.stat-card-split .stat-split-divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #e2e8f0 30%, #e2e8f0 70%, transparent 100%);
    align-self: stretch;
    flex-shrink: 0;
}
.stat-card-split .stat-success-half {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-left: 4px solid #10b981;
    border-radius: 14px 0 0 14px;
}
.stat-card-split .stat-rose-half {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border-right: 4px solid #f43f5e;
    border-radius: 0 14px 14px 0;
}
.stat-card-split .stat-split-half .stat-icon { font-size: 28px; flex-shrink: 0; }
.stat-card-split .stat-split-half .stat-content { flex: 1; min-width: 0; }
.stat-card-split .stat-split-half .stat-value { font-size: 22px !important; line-height: 1.1; }
.stat-card-split .stat-split-half .stat-label { font-size: 11px; }
.stat-card-split .stat-split-half .stat-sub { font-size: 11px; }

/* Responsive: di mobile ≤768px, card split jadi stack vertikal & full-width */
@media (max-width: 768px) {
    .stat-card-split {
        flex-direction: column !important;
        grid-column: span 1 !important;
    }
    .stat-card-split .stat-split-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent 0%, #e2e8f0 30%, #e2e8f0 70%, transparent 100%);
    }
    .stat-card-split .stat-success-half {
        border-radius: 14px 14px 0 0;
        border-left: 4px solid #10b981;
        border-bottom: none;
    }
    .stat-card-split .stat-rose-half {
        border-radius: 0 0 14px 14px;
        border-right: 4px solid #f43f5e;
        border-top: none;
    }
}

/* Responsive: di mobile ≤480px, card split jadi stack vertikal */
@media (max-width: 480px) {
    .stat-card-split { flex-direction: column !important; }
    .stat-card-split .stat-split-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent 0%, #e2e8f0 30%, #e2e8f0 70%, transparent 100%);
    }
    .stat-card-split .stat-success-half {
        border-radius: 14px 14px 0 0;
        border-left: 4px solid #10b981;
        border-bottom: none;
    }
    .stat-card-split .stat-rose-half {
        border-radius: 0 0 14px 14px;
        border-right: 4px solid #f43f5e;
        border-top: none;
    }
}

/* XL variant: bigger card dengan breakdown */
.stat-card.stat-card-xl { grid-column: span 1; min-height: 180px; }
.stat-card-xl .stat-value { font-size: 28px !important; }
.stat-card-xl .stat-icon { font-size: 36px !important; width: 56px !important; height: 56px !important; }

.stat-breakdown {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
}
.stat-bd-item {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 3px solid #cbd5e1;
}
.stat-bd-item.stat-bd-active { border-left-color: #10b981; background: #f0fdf4; }
.stat-bd-item.stat-bd-ph { border-left-color: #f43f5e; background: #fef2f2; }
.stat-bd-label { font-size: 10px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; }
.stat-bd-value { font-size: 16px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.stat-bd-sub { font-size: 10px; color: #64748b; font-weight: 500; }

@media (max-width: 768px) {
    .stat-card.stat-card-xl { min-height: auto; }
    .stat-breakdown { flex-direction: column; }
}

.stat-icon {
    font-size: 20px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
}

.stat-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.stat-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

.stat-value small {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-left: 4px !important;
}

.stat-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-top: 2px !important;
}

.stat-sub {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

/* Per dusun section: compact */
.dusun-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

@media (min-width: 640px) {
    .dusun-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .dusun-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Bar chart bar - smooth animations */
.lunas-bar {
    height: 8px !important;
    background: #f1f5f9 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin-top: 6px !important;
}

.lunas-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%) !important;
    border-radius: 999px !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Main wrapper: tighter padding on mobile (but always reserve space for fixed footer) */
.app-main {
    padding: 12px 12px 84px 12px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

@media (min-width: 769px) {
    .app-main {
        padding: 24px 20px 88px 20px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 1025px) {
    .app-main {
        margin-left: 260px !important;
        max-width: calc(100vw - 260px) !important;
    }
    body.sidebar-collapsed .app-main {
        margin-left: 0 !important;
        max-width: 1400px !important;
    }
}

@media (min-width: 768px) {
    .app-main {
        padding: 20px 20px 88px 20px !important; /* extra bottom for fixed footer */
    }
}

/* Table: nice scroll & modern look */
.data-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px !important;
}

.data-table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    padding: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    text-align: left !important;
}

.data-table tbody td {
    padding: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.data-table tbody tr:hover {
    background: #f8fafc !important;
}

/* Empty state: clean centered */
.empty-state {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #94a3b8 !important;
}

.empty-state-icon {
    font-size: 48px !important;
    margin-bottom: 12px !important;
    opacity: 0.5 !important;
}

/* Loading: smooth */
.loading {
    padding: 32px !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
}

/* Filter bar: tight, modern */
.filter-bar {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 16px !important;
    border: 1px solid #eef2f7 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.filter-input,
.filter-bar select,
.filter-bar input[type="search"],
.filter-bar input[type="date"] {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    min-height: 42px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.filter-input:focus,
.filter-bar select:focus,
.filter-bar input:focus {
    outline: none !important;
    border-color: #1e3a8a !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1) !important;
}

.filter-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Buttons modern — these are NOT duplicates of base .btn above.
   They add subtle polish: min-height + gradient primary + active scale.
   Only the .btn-primary gradient is added on top of base .btn-primary.
*/
.btn {
    min-height: 40px !important;
}

.btn-primary {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(30, 58, 138, 0.2) !important;
}

.btn-primary:active {
    transform: scale(0.97) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    box-shadow: 0 4px 8px rgba(30, 58, 138, 0.3) !important;
}

/* Pills & badges modern */
.pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.pill-lunas { background: #d1fae5; color: #065f46; }
.pill-menunggu { background: #fef3c7; color: #92400e; }
.pill-belum { background: #fee2e2; color: #991b1b; }
.pill-verified { background: #d1fae5; color: #065f46; }
.pill-pending { background: #fef3c7; color: #92400e; }
.pill-rejected { background: #fee2e2; color: #991b1b; }

/* ===== DASHBOARD SECTIONS v17.6 - Compact & Modern ===== */
.dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

@media (min-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.dashboard-section .card-header {
    padding: 12px 16px !important;
}

.dashboard-section .card-header h2 {
    font-size: 14px !important;
}

.dashboard-section .card-header small {
    font-size: 11px !important;
    color: #94a3b8 !important;
}

.dashboard-section .card-body {
    padding: 14px 16px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}

.dashboard-section .card-body::-webkit-scrollbar {
    width: 4px !important;
}

.dashboard-section .card-body::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
}

/* Stat grid secondary: tight layout */
.stat-grid-secondary {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

@media (min-width: 640px) {
    .stat-grid-secondary {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.stat-grid-secondary .stat-card {
    padding: 12px 14px !important;
}

.stat-grid-secondary .stat-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    margin-bottom: 2px !important;
}

.stat-grid-secondary .stat-value {
    font-size: 16px !important;
}

.stat-grid-secondary .stat-label {
    font-size: 10px !important;
}

.stat-grid-secondary .stat-sub {
    font-size: 10px !important;
}

/* Badge mini in stat sub */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    margin-right: 4px !important;
}

.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }

/* Stat card variants */
.stat-card.stat-info { border-left-color: #0ea5e9 !important; }
.stat-card.stat-gold { border-left-color: #f59e0b !important; }
.stat-card.stat-secondary { border-left-color: #64748b !important; }



/* ============================================================
   RESPONSIVE TABLE → CARD MODE (MOBILE ≤ 768px)
   Convert wide tables into stacked card layout to prevent
   horizontal scroll on Android.
   Labels come from data-label attribute on each <td>.
   ============================================================ */

@media (max-width: 768px) {
    /* Wrap table in scrollable container but cap width */
    .card-body {
        overflow-x: hidden !important;
        padding: 12px !important;
    }

    /* Hide table head, rows become cards */
    .data-table thead {
        display: none !important;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .data-table {
        border-collapse: separate !important;
        border-spacing: 0 8px !important;
        font-size: 13px !important;
    }

    .data-table tbody tr {
        background: #ffffff !important;
        border: 1px solid var(--slate-200) !important;
        border-radius: 12px !important;
        padding: 12px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    }

    .data-table tbody tr:hover {
        background: var(--slate-50) !important;
        cursor: default !important;
    }

    /* Each td becomes label:value row */
    .data-table td {
        padding: 6px 0 !important;
        border-bottom: 1px dashed var(--slate-100) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: right !important;
    }

    .data-table td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .data-table td:first-child {
        padding-top: 0 !important;
    }

    /* Prepend label via ::before using data-label attribute OR fallback to nth-child */
    .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--slate-500);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        text-align: left;
        flex-shrink: 0;
    }

    /* Actions cell: stack buttons vertically */
    .data-table td.col-actions,
    .data-table td:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        text-align: left !important;
    }

    .data-table td.col-actions::before,
    .data-table td:last-child::before {
        margin-bottom: 4px;
    }

    .data-table td.col-actions form,
    .data-table td:last-child form {
        display: block !important;
        width: 100% !important;
    }

    .data-table td.col-actions button,
    .data-table td:last-child button {
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* Pills stay inline */
    .data-table .pill {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }

    /* Hide ID column on mobile (not informative) */
        .data-table td:first-child[data-label="ID"],
        .data-table td:first-child[data-label="#"] {
        color: var(--slate-400) !important;
        font-size: 10px !important;
        }
    }

    /* ============================================================ */
    /* DESIGN POLISH (2026-06-25)                                     */
    /* Modern, subtle UI enhancements — no layout changes             */
    /* ============================================================ */

    /* Smooth global transitions on interactive elements */
    .btn,
    .card,
    .stat-mini,
    .pill,
    .filter-input,
    input,
    select,
    textarea {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Enhanced focus state for accessibility (keyboard navigation) */
    .btn:focus-visible,
    .filter-input:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid var(--gold);
        outline-offset: 2px;
    }

    /* Subtle card hover lift effect (already in .card transition) */
    .card {
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Stat-mini: gentle scale + shadow on hover */
    .stat-mini {
        cursor: default;
    }
    .stats-row .stat-mini:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    /* Pill: subtle scale on hover (for interactive pills) */
    .pill {
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    a:hover .pill,
    button:hover .pill {
        transform: scale(1.05);
    }

    /* Modern scrollbar (subtle) */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: var(--slate-50);
    }
    ::-webkit-scrollbar-thumb {
        background: var(--slate-300);
        border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--slate-400);
    }

    /* Smooth text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* ============================================================ */
    /* EMOJI ICON STANDARDIZATION (2026-06-25)                       */
/* Standard icons: ✅ ❌ 🔄 ⏳ 📋 📊 (emoji style)              */
/* ============================================================ */

/* Ensure emoji renders properly across platforms */
.stat-mini-label,
.filter-label,
.pill,
.btn,
.nav-icon {
    font-variant-emoji: emoji;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Compact emoji in stat-mini (avoid oversized rendering) */
.stat-mini-label {
    font-size: 11px;
    line-height: 1.3;
}

/* Status pill emoji — slightly smaller to fit badge */
.pill {
    font-size: 11px;
    line-height: 1.2;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
/* ============================================================ */
/* PAYMENT SUCCESS PULSE (2026-06-26)                            */
/* Animasi saat pembayaran terverifikasi, supaya user notice    */
/* ============================================================ */
@keyframes pulse-success {
    0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
    50%  { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(22,163,74,0); }
    100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ============================================================ */
/* PAYMENT SPINNER (2026-06-26 — re-added after rollback)       */
/* Spinner untuk banner "Sedang menunggu pembayaran"             */
/* ============================================================ */
@keyframes pay-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   BUKTI BAYAR FIX v2 - 26 Juni 2026
   Selector disesuaikan dengan class di admin_bukti.v3.js
   ============================================================ */

/* FIX 1: Tombol Setujui (class JS: .btn-act .btn-act-approve) */
.btn-act.btn-act-approve,
button[data-act="approve"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #22c55e !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* FIX 2: Badge status tidak terpotong (class JS: .pill .pill-lunas/verified/rejected) */
.pill,
.pill-lunas,
.pill-terverifikasi,
.pill-verified,
.pill-rejected,
.pill-pending,
.pill-single,
.pill-bulk,
.pill-penghapusan,
.pill-info,
.pill-success,
.pill-warning,
.pill-muted,
.pill-manual,
.pill-menunggu,
.pill-failed {
    white-space: nowrap !important;
    width: fit-content !important;
    max-width: 100% !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
}

/* FIX 3: Status bar TERVERIFIKASI tidak melebar penuh (class JS: .bukti-status) */
.status-verified,
.status-terverifikasi,
.bukti-status .pill,
.bukti-status,
.bukti-status-pill,
.pill[data-status],
span.pill {
    display: inline-flex !important;
    width: auto !important;
    max-width: fit-content !important;
    overflow: visible !important;
    white-space: nowrap !important;
    min-width: fit-content !important;
}

/* FIX 4: Icon tombol aksi beda-beda (class JS: data-act attribute) */
button[data-act="approve"]::before { content: "✅ "; }
button[data-act="reject"]::before  { content: "❌ "; }
button[data-act="notes"]::before   { content: "✏️ "; }
button[data-act="reset"]::before    { content: "🔄 "; }
button[data-act="delete"]::before   { content: "🗑️ "; }
.btn-act-download::before           { content: "⬇️ "; }
.bukti-file-link::before            { content: "👁️ "; }

/* FIX 5: Catatan auto-detect (class JS: .bukti-wp-meta inline style) */
.bukti-wp-meta,
.catatan-auto,
.log-catatan,
.bukti-catatan {
    font-size: 12px !important;
    line-height: 1.6 !important;
    background: #f8fafc !important;
    border-left: 3px solid #3b82f6 !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    max-height: 120px !important;
    overflow-y: auto !important;
    word-break: break-word !important;
}

/* FIX 6: Mobile - nama WP tidak terpotong (class JS: .bukti-wp-name) */
@media (max-width: 768px) {
    .bukti-wp-name,
    .wp-nama,
    .wajib-pajak-nama {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    
    /* NOP monospace (class JS: .nop-fmt dan .col-nop) */
    .nop-fmt,
    .nop,
    .nomor-objek-pajak {
        font-family: monospace !important;
        font-size: 12px !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Card layout safety: pastikan tidak ada yang ke-clip */
    .admin-bukti-table tbody tr {
        overflow: visible !important;
    }
    .admin-bukti-table td {
        overflow: visible !important;
    }
}


/* ============================================================
   BUKTI BAYAR FIX v3 - 26 Juni 2026
   Tombol aksi mobile full-width + override selector yang match class JS
   ============================================================ */

/* MOBILE: paksa tombol aksi selalu tampil */
@media (max-width: 768px) {
    .bukti-actions,
    .col-aksi .bukti-actions,
    .col-aksi,
    [class*="aksi"],
    [class*="action"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
    }

    .bukti-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .aksi-toggle,
    .aksi-header,
    .bukti-toggle,
    .card-toggle,
    .collapse-toggle,
    .expand-toggle,
    .panel-toggle,
    .section-toggle,
    [class$="-toggle"]:not(.menu-toggle):not(.sidebar-toggle) {
        display: none !important;
    }

    .bukti-actions .btn,
    .bukti-actions .btn-act,
    .bukti-actions a.btn-act,
    .col-aksi .btn,
    .col-aksi .btn-act,
    [class*="aksi"] .btn,
    [class*="action"] .btn {
        display: flex !important;
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Override grid 2-kolom dari patch #8 — paksa jadi 1 kolom full-width */
    .admin-bukti-table .bukti-actions {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        width: 100% !important;
    }
    
    /* Semua tombol aksi SPAN FULL WIDTH (override grid-column: span 2) */
    .admin-bukti-table .bukti-actions .btn-act,
    .admin-bukti-table .bukti-actions .btn-act-download,
    .admin-bukti-table .bukti-actions .btn-act-delete {
        grid-column: auto !important;
        width: 100% !important;
    }
}


/* ============================================================
   BUKTI BAYAR FIX v4 - 26 Juni 2026
   Perbaiki urutan mobile: info dulu, tombol belakangan
   + fix nama WP tidak terpotong
   ============================================================ */

@media (max-width: 768px) {
    /* Perbaiki urutan: info dulu, tombol belakangan */
    .bukti-item,
    .bukti-card,
    .admin-bukti-table tbody tr {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Info kartu tampil dulu (order: 1) */
    .bukti-info,
    .bukti-detail,
    .bukti-main,
    .bukti-body,
    .admin-bukti-table tbody tr td:not(.col-aksi),
    td[data-label="NOP"],
    td[data-label="Wajib Pajak"],
    td[data-label="Tagihan"],
    td[data-label="Tipe"],
    td[data-label="File"],
    td[data-label="Status"],
    td[data-label="Waktu"],
    [class*="bukti-left"],
    [class*="bukti-body"] {
        order: 1 !important;
    }

    /* Tombol aksi tampil setelah info (order: 2) */
    .bukti-actions,
    .col-aksi,
    .col-aksi .bukti-actions,
    .aksi-panel,
    td[data-label="Aksi"],
    [class*="aksi"],
    [class*="action"] {
        order: 2 !important;
        margin-top: 12px !important;
    }

    /* Fix nama WP tidak terpotong */
    .bukti-wp-name,
    .wp-name,
    .nama-wp,
    td[data-label="Wajib Pajak"] .bukti-wp-name,
    td[data-label="Wajib Pajak"] span,
    td[data-label="WP"] .bukti-wp-name,
    td[data-label="WP"] span {
        white-space: nowrap !important;
        overflow: visible !important;
        min-width: max-content !important;
        word-break: keep-all !important;
        hyphens: none !important;
    }
}


/* ============================================================
   BUKTI BAYAR FIX v5 - 26 Juni 2026
   Fix alamat "ARGOMULYO" pecah vertikal jadi 1 huruf per baris
   ============================================================ */

@media (max-width: 768px) {
    /* Alamat WP di td Wajib Pajak - PAKSA 1 BARIS dengan scroll horizontal */
    .bukti-wp-meta,
    td[data-label="Wajib Pajak"] .bukti-wp-meta,
    td[data-label="Wajib Pajak"] div,
    td[data-label="Alamat"] div,
    td[data-label="Alamat"] .bukti-wp-meta,
    .bukti-alamat,
    .alamat-op {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        text-overflow: clip !important;
        hyphens: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }
    
    /* Container td Wajib Pajak - allow scroll horizontal, tidak pecah text */
    td[data-label="Wajib Pajak"],
    td[data-label="Alamat"] {
        overflow-x: auto !important;
        overflow-y: visible !important;
        word-break: keep-all !important;
    }
}


/* ============================================================
   BUKTI BAYAR FIX v7 - 26 Juni 2026
   Fix: tombol Catatan/Reset/Hapus tidak full-width
        + Badge TERVERIFIKASI overlap "3 jam lalu"
        + Alamat overflow ke cell di bawahnya
   ============================================================ */

@media (max-width: 768px) {
    /* FIX 1: Tombol Catatan/Reset/Hapus full-width 
       (td::before bocor jadi background — kita hide di Aksi cell) */
    td[data-label="Aksi"]::before,
    td.col-aksi::before {
        content: none !important;     /* hide label "AKSI" di mobile */
        display: none !important;
    }
    
    /* FIX 2: Badge TERVERIFIKASI tidak overlap "3 jam lalu" 
       (paksa wrap, badge jadi full-width) */
    td[data-label="Status"] {
        flex-wrap: wrap !important;
    }
    td[data-label="Status"] .pill,
    td[data-label="Status"] .bukti-wp-meta {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    
    /* FIX 3: Alamat ARGOMULYO tidak overflow ke cell di bawah 
       (bungkus dalam scrollable container) */
    td[data-label="Wajib Pajak"] {
        max-width: 100% !important;
        overflow: hidden !important;     /* hide overflow horizontal */
        position: relative !important;
    }
    td[data-label="Wajib Pajak"] .bukti-wp-meta {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        display: block !important;
        /* scrollbar tipis */
        scrollbar-width: thin !important;
    }
    td[data-label="Wajib Pajak"] .bukti-dusun-tag {
        display: inline-block !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }
}


/* ============================================================
   WP LIST + PENGHAPUSAN - KONSISTEN dengan admin_bukti card style
   Pattern card yang sama untuk konsistensi visual
   ============================================================ */

/* === .data-table (dipakai wp_list & penghapusan) — pola card sama === */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.data-table tbody tr {
    transition: background 0.12s, transform 0.12s;
    background: #fff;
}
.data-table tbody tr:hover {
    background: #f8fafc;
}
.data-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
    padding: 12px 10px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}
.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Row variants (sama dengan admin-bukti) */
.data-table tbody tr.row-lunas {
    background: #f0fdf4;
}
.data-table tbody tr.row-lunas:hover {
    background: #dcfce7;
}
.data-table tbody tr.row-rejected {
    background: #fef2f2;
}
.data-table tbody tr.row-rejected:hover {
    background: #fee2e2;
}
.data-table tbody tr.row-menunggu {
    background: #fef9c3;
}

/* === DESKTOP data-table: tabel horizontal panjang (proper <table>) === */
@media (min-width: 769px) {
    .data-table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        background: #fff !important;
    }
    .data-table thead {
        display: table-header-group !important;
    }
    .data-table thead th {
        display: table-cell !important;
        padding: 12px 14px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        color: var(--slate-600) !important;
        background: var(--slate-50) !important;
        border-bottom: 2px solid var(--slate-200) !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
    .data-table tbody {
        display: table-row-group !important;
    }
    .data-table tbody tr {
        display: table-row !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        grid-template-columns: none !important;
    }
    .data-table tbody tr:hover {
        background: var(--slate-50) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .data-table tbody td {
        display: table-cell !important;
        padding: 12px 14px !important;
        border-bottom: 1px solid var(--slate-200) !important;
        font-size: 14px !important;
        color: var(--slate-700) !important;
        vertical-align: middle !important;
        text-align: left !important;
        background: transparent !important;
        /* override flex from mobile rule */
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }
    .data-table tbody td::before {
        content: none !important;  /* hide mobile labels */
    }
    .data-table tbody td > * {
        flex: none !important;
    }
    /* Column-specific widths for desktop (compact fit) */
    .data-table .col-nop { white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; max-width: 140px; }
    .data-table .col-nama { min-width: 110px; max-width: 150px; }
    .data-table .col-alamat { min-width: 110px; max-width: 150px; font-size: 12px; }
    .data-table .col-dusun { white-space: nowrap; max-width: 80px; font-size: 12px; }
    .data-table .col-kelas { white-space: nowrap; max-width: 55px; font-size: 12px; }
    .data-table .col-tagihan { text-align: right; font-weight: 600; white-space: nowrap; font-size: 13px; }
    .data-table .col-status { white-space: nowrap; max-width: 100px; font-size: 12px; }
    .data-table .col-aksi { white-space: nowrap; text-align: right; }
    .data-table .col-tipe { white-space: nowrap; font-size: 12px; }
    .data-table .col-file { max-width: 110px; font-size: 12px; }
    .data-table .col-waktu { max-width: 130px; font-size: 11px; color: var(--slate-600); }
    .data-table .col-luas { white-space: nowrap; max-width: 75px; font-size: 12px; }
    .data-table .col-alasan { max-width: 150px; font-size: 12px; }
}

/* === MOBILE data-table: stacked card === */
@media (max-width: 768px) {
    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    .data-table thead {
        display: none;
    }
    .data-table tbody tr {
        margin-bottom: 14px;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        padding: 12px 14px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .data-table td {
        padding: 8px 0 !important;
        border: none !important;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        min-width: 0;
        line-height: 1.4;
    }
    .data-table td + td {
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 2px;
        padding-top: 10px !important;
    }
    .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        flex: 0 0 70px;
        font-size: 11px;
        line-height: 1.4;
        padding-top: 2px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .data-table td > * {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }
    .data-table tbody tr td:last-child {
        flex-direction: column;
        align-items: stretch;
    }
    .data-table tbody tr td:last-child::before {
        margin-bottom: 4px;
    }
    .data-table tbody tr td:last-child .btn,
    .data-table tbody tr td:last-child .btn-edit-wp,
    .data-table tbody tr td:last-child a {
        display: flex !important;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        border-radius: 8px;
        font-weight: 600;
        justify-content: center;
        align-items: center;
    }
}


/* ============================================================
   BUKTI BAYAR FIX v10 - 26 Juni 2026
   Fix: icon emoji ::before makan space, text tombol terpotong
   + Fix: timestamp "3 jam lalu" cuma jadi kotak
   ============================================================ */

/* KECILKAN font icon ::before + tambah spacing yang pas */
button[data-act="approve"]::before,
button[data-act="reject"]::before,
button[data-act="notes"]::before,
button[data-act="reset"]::before,
button[data-act="delete"]::before,
.btn-act-download::before,
.bukti-file-link::before {
    font-size: 0.9em !important;       /* icon lebih kecil dari text */
    margin-right: 4px !important;       /* spacing cukup */
    display: inline-block !important;
    flex-shrink: 0 !important;          /* tidak ke-compress */
}

/* Pastikan text button tidak ke-clip */
button[data-act] {
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* Fix khusus: timestamp "3 jam lalu" — text panjang jangan cuma jadi kotak */
td[data-label="Status"] .bukti-wp-meta,
td[data-label="Waktu"] .bukti-wp-meta,
.bukti-wp-meta {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: inline-block !important;
    width: auto !important;
}

/* Pastikan text content di cell Status tidak ke-compress */
td[data-label="Status"],
td[data-label="Waktu"] {
    overflow: visible !important;
}

/* Override button yang ada icon ::before — pastikan flex dengan gap */
.btn-act[data-act] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}


/* ============================================================
   BUKTI BAYAR FIX v11 - 26 Juni 2026
   Perkecil dan konsistensi tombol aksi + bukti (Unduh/Lihat)
   ============================================================ */

/* Base button lebih kecil dan konsisten */
.btn,
.btn-act,
.bukti-file-link,
.bukti-file-download {
    min-height: 36px !important;
    max-height: 44px !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    border-radius: 6px !important;
    gap: 4px !important;
}

/* Tombol aksi bukti bayar - lebih kecil */
.bukti-actions .btn-act,
.admin-bukti-table .bukti-actions .btn-act {
    min-height: 36px !important;
    max-height: 40px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    gap: 4px !important;
}

/* Mobile 768px: tombol lebih compact */
@media (max-width: 768px) {
    .btn,
    .btn-act,
    .bukti-actions .btn-act,
    .bukti-file-link,
    .bukti-file-download {
        min-height: 36px !important;
        max-height: 40px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        border-radius: 6px !important;
    }
    
    /* Icon ::before lebih kecil */
    button[data-act="approve"]::before,
    button[data-act="reject"]::before,
    button[data-act="notes"]::before,
    button[data-act="reset"]::before,
    button[data-act="delete"]::before,
    .btn-act-download::before,
    .bukti-file-link::before {
        font-size: 0.85em !important;
        margin-right: 3px !important;
    }
    
    /* Spacing antar tombol lebih rapat */
    .bukti-actions {
        gap: 5px !important;
        padding: 8px !important;
    }
}

/* Mobile kecil (≤380px) - tombol lebih ringkas */
@media (max-width: 380px) {
    .bukti-actions .btn-act,
    .btn-act {
        min-height: 34px !important;
        max-height: 38px !important;
        padding: 5px 8px !important;
        font-size: 11.5px !important;
    }
}

/* Desktop: tombol di sidebar aksi - tetap compact */
@media (min-width: 769px) {
    .bukti-actions .btn-act,
    .admin-bukti-table .bukti-actions .btn-act,
    .bukti-actions .btn-act {
        min-height: 30px !important;
        max-height: 32px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
}


/* ============================================================
   BUKTI BAYAR FIX v12 - 26 Juni 2026
   Fix: tombol Catatan/Reset/Hapus kecil di sidebar desktop
   - paksa full-width di .col-aksi (sidebar)
   ============================================================ */

/* Desktop: tombol di sidebar aksi FULL WIDTH */
@media (min-width: 769px) {
    .admin-bukti-table td.col-aksi,
    .admin-bukti-table td.col-aksi .bukti-actions {
        width: 100% !important;
        align-items: stretch !important;
    }
    .admin-bukti-table td.col-aksi .bukti-actions .btn-act,
    .bukti-actions .btn-act {
        width: 100% !important;
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Override SEMUA kondisi: tombol di .col-aksi PASTI full-width */
.admin-bukti-table td.col-aksi .btn-act,
.bukti-actions > .btn-act {
    width: 100% !important;
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    align-self: stretch !important;
}

/* Tombol di .bukti-actions (parent) — full width by default */
.bukti-actions {
    width: 100% !important;
}
.bukti-actions > * {
    width: 100% !important;
    flex-basis: 100% !important;
}


/* ============================================================
   BUKTI BAYAR FIX v13 - 26 Juni 2026
   Konsistensi border SEMUA tombol aksi (1px solid warna yg sama)
   ============================================================ */

/* RESET border base dulu - 1px solid transparent default */
.btn-act,
button[data-act] {
    border: 1px solid transparent !important;
    border-style: solid !important;
    border-width: 1px !important;
}

/* Override border di semua selector fix Bapak biar ada border */
.btn-act.btn-act-approve,
button[data-act="approve"] {
    border: 1px solid #16a34a !important;
}
.btn-act.btn-act-reject,
button[data-act="reject"] {
    border: 1px solid #dc2626 !important;
}
.btn-act.btn-act-notes,
button[data-act="notes"] {
    border: 1px solid #cbd5e1 !important;
}
.btn-act.btn-act-notes[data-act="reset"],
button[data-act="reset"] {
    border: 1px solid #cbd5e1 !important;
}
.btn-act.btn-act-delete,
button[data-act="delete"] {
    border: 1px solid #ef4444 !important;
}
.btn-act-download {
    border: 1px solid #1e3a5f !important;
}

/* Konsistensi: 1px solid di SEMUA viewport */
@media (max-width: 768px) {
    .btn-act,
    button[data-act] {
        border-style: solid !important;
        border-width: 1px !important;
    }
}


/* ============================================================
   BUKTI BAYAR FIX v14 - 26 Juni 2026
   Samakan style SEMUA tombol jadi SOLID (background warna + text putih)
   - Tombol Catatan/Reset/Hapus jadi solid seperti Setujui/Tolak
   ============================================================ */

/* Tombol Catatan/Reset: solid abu-abu + text putih (seperti style button) */
.btn-act.btn-act-notes,
button[data-act="notes"],
.btn-act.btn-act-notes[data-act="reset"],
button[data-act="reset"] {
    background: #64748b !important;       /* slate-500, abu-abu solid */
    color: #ffffff !important;
    border: 1px solid #475569 !important;  /* slate-600, border lebih gelap */
}
.btn-act.btn-act-notes:hover:not(:disabled),
button[data-act="notes"]:hover:not(:disabled),
button[data-act="reset"]:hover:not(:disabled) {
    background: #475569 !important;       /* slate-600 saat hover */
}

/* Tombol Hapus: solid merah + text putih (seperti Tolak) */
.btn-act.btn-act-delete,
button[data-act="delete"] {
    background: #ef4444 !important;        /* merah solid */
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
}
.btn-act.btn-act-delete:hover:not(:disabled),
button[data-act="delete"]:hover:not(:disabled) {
    background: #dc2626 !important;
}

/* Pastikan SEMUA tombol solid di mobile + desktop */
@media (max-width: 768px), (min-width: 769px) {
    .btn-act,
    button[data-act] {
        color: #ffffff !important;
    }
}


/* ============================================================
   BUKTI BAYAR FIX v15 - 26 Juni 2026
   Fix: text Catatan/Reset terpotong, full-width konsisten
   ============================================================ */

/* Reset semua button - paksa 100% width dan text visible */
.bukti-actions,
.admin-bukti-table .bukti-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
}

.bukti-actions .btn-act,
.admin-bukti-table .bukti-actions .btn-act,
.bukti-actions a.btn-act {
    width: 100% !important;
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Style solid color konsisten untuk Catatan/Reset */
.btn-act.btn-act-notes,
button[data-act="notes"],
button[data-act="reset"] {
    background: #475569 !important;        /* slate-600 - lebih gelap */
    color: #ffffff !important;
    border: 1px solid #334155 !important;  /* slate-700 border */
}
.btn-act.btn-act-notes:hover,
button[data-act="notes"]:hover,
button[data-act="reset"]:hover {
    background: #334155 !important;
}


/* ============================================================
   BUKTI BAYAR FIX v16 - 26 Juni 2026
   Percantik tombol: SVG icons (ganti emoji), gradient, shadow
   ============================================================ */

/* === STYLE BASE TOMBOL ELEGANT === */
.btn-act,
button[data-act] {
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}

.btn-act:hover:not(:disabled),
button[data-act]:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

.btn-act:active:not(:disabled),
button[data-act]:active:not(:disabled) {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

/* === GRADIENT UNTUK SETUJUI (hijau) === */
.btn-act.btn-act-approve,
button[data-act="approve"] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    border: 1px solid #15803d !important;
}
.btn-act.btn-act-approve:hover:not(:disabled) {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

/* === GRADIENT UNTUK TOLAK (merah) === */
.btn-act.btn-act-reject,
button[data-act="reject"] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border: 1px solid #b91c1c !important;
}
.btn-act.btn-act-reject:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

/* === GRADIENT UNTUK CATATAN & RESET (slate) === */
.btn-act.btn-act-notes,
button[data-act="notes"],
button[data-act="reset"] {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
}
.btn-act.btn-act-notes:hover:not(:disabled),
button[data-act="notes"]:hover:not(:disabled),
button[data-act="reset"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
}

/* === GRADIENT UNTUK HAPUS (merah lebih pekat) === */
.btn-act.btn-act-delete,
button[data-act="delete"] {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
}
.btn-act.btn-act-delete:hover:not(:disabled) {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

/* === GRADIENT UNTUK UNDUH (navy) === */
.btn-act-download {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2540 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0a1a30 !important;
}
.btn-act-download:hover {
    background: linear-gradient(135deg, #0f2540 0%, #0a1a30 100%) !important;
}

/* === GANTI EMOJI DENGAN SVG ICONS (Lucide style) === */
/* Hide emoji default - ganti dengan SVG via ::before */
button[data-act="approve"]::before,
button[data-act="reject"]::before,
button[data-act="notes"]::before,
button[data-act="reset"]::before,
button[data-act="delete"]::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Setujui: check icon (SVG white) */
button[data-act="approve"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
}

/* Tolak: x icon */
button[data-act="reject"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") !important;
}

/* Catatan: pencil icon */
button[data-act="notes"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>") !important;
}

/* Reset: rotate-ccw icon */
button[data-act="reset"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 4 1 10 7 10'/><path d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'/></svg>") !important;
}

/* Hapus: trash icon */
button[data-act="delete"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/></svg>") !important;
}

/* Unduh: download icon */
.btn-act-download::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") !important;
}

/* ============================================================
   BUKTI BAYAR FIX FINAL - 27 Juni 2026
   Berdasarkan class name AKTUAL dari admin_bukti.v3.js
   ============================================================ */

/* ===== RESET: Batalkan semua flex override dari patch sebelumnya ===== */
/* Sebelumnya CSS paksa tbody tr jadi flex — ini MERUSAK layout tabel */
.admin-bukti-table,
.admin-bukti-table tbody,
.admin-bukti-table thead,
.admin-bukti-table tr,
.admin-bukti-table th,
.admin-bukti-table td {
    display: revert !important;
}

/* ===== DESKTOP (>768px): Layout tabel normal ===== */
@media (min-width: 769px) {
    .bukti-table-wrap {
        width: 100% !important;
        overflow-x: auto !important;
    }
    .admin-bukti-table {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
    }
    .admin-bukti-table thead th {
        background: var(--navy, #1e3a8a) !important;
        color: #fff !important;
        padding: 12px 10px !important;
        font-size: 12px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
    .admin-bukti-table tbody tr {
        border-bottom: 1px solid #e2e8f0 !important;
        transition: background 0.15s !important;
    }
    .admin-bukti-table tbody tr:hover {
        background: #f8fafc !important;
    }
    .admin-bukti-table tbody tr.row-lunas {
        background: #f0fdf4 !important;
    }
    .admin-bukti-table tbody tr.row-rejected {
        background: #fff5f5 !important;
    }
    .admin-bukti-table tbody tr.row-verified-pending {
        background: #fffbeb !important;
    }
    .admin-bukti-table tbody td {
        padding: 12px 10px !important;
        vertical-align: top !important;
        font-size: 13px !important;
    }

    /* Kolom NOP: monospace */
    .admin-bukti-table td.col-nop {
        font-family: monospace !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        min-width: 160px !important;
    }

    /* Kolom Aksi: lebar fixed, panel kanan */
    .admin-bukti-table td.col-aksi {
        width: 180px !important;
        min-width: 180px !important;
        vertical-align: top !important;
        padding: 10px 8px !important;
    }

    /* Tagihan: bold orange */
    .admin-bukti-table td.bukti-tagihan {
        font-weight: 700 !important;
        color: #d97706 !important;
        white-space: nowrap !important;
    }
}

/* ===== MOBILE (≤768px): Card mode ===== */
@media (max-width: 768px) {
    .bukti-table-wrap {
        overflow-x: hidden !important;
    }

    /* Sembunyikan header tabel */
    .admin-bukti-table thead {
        display: none !important;
    }

    /* Setiap row jadi card */
    .admin-bukti-table,
    .admin-bukti-table tbody {
        display: block !important;
        width: 100% !important;
    }
    .admin-bukti-table tbody tr {
        display: block !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
        overflow: hidden !important;
    }
    .admin-bukti-table tbody tr.row-lunas {
        border-left: 4px solid #22c55e !important;
        background: #f0fdf4 !important;
    }
    .admin-bukti-table tbody tr.row-rejected {
        border-left: 4px solid #ef4444 !important;
        background: #fff5f5 !important;
    }
    .admin-bukti-table tbody tr.row-verified-pending {
        border-left: 4px solid #f59e0b !important;
        background: #fffbeb !important;
    }

    /* Setiap td jadi baris label:nilai */
    .admin-bukti-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 8px 14px !important;
        border-bottom: 1px dashed #f1f5f9 !important;
        font-size: 13px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .admin-bukti-table tbody td:last-child {
        border-bottom: none !important;
    }

    /* Label dari data-label */
    .admin-bukti-table tbody td::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        color: #64748b !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        flex-shrink: 0 !important;
        min-width: 70px !important;
    }

    /* NOP: monospace, full width di atas */
    .admin-bukti-table td.col-nop {
        font-family: monospace !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        background: #f8fafc !important;
        padding: 10px 14px !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Nama WP tidak terpotong */
    .bukti-wp-name {
        font-weight: 700 !important;
        font-size: 14px !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    /* Alamat tidak overflow */
    .bukti-wp-meta {
        font-size: 11px !important;
        color: #64748b !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    /* Tagihan: besar dan bold */
    .admin-bukti-table td.bukti-tagihan {
        font-weight: 800 !important;
        font-size: 16px !important;
        color: #d97706 !important;
        background: #fffbeb !important;
    }

    /* Status: badge tidak melebar penuh */
    .admin-bukti-table td[data-label="Status"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .admin-bukti-table td[data-label="Status"] [data-status-pill],
    .admin-bukti-table td[data-label="Status"] .pill {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: fit-content !important;
        white-space: nowrap !important;
    }

    /* Kolom Aksi: full width, tombol vertikal */
    .admin-bukti-table td.col-aksi {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 14px !important;
        background: #f8fafc !important;
        gap: 8px !important;
    }
    .admin-bukti-table td.col-aksi::before {
        content: none !important;
    }
    .bukti-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .bukti-actions .btn-act {
        display: flex !important;
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        gap: 8px !important;
    }
}

/* ===== FIX ICON: Reset pakai data-act="reset" tapi class btn-act-notes ===== */
/* Override: bedakan icon Reset vs Catatan berdasarkan data-act */
button[data-act="reset"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 4 1 10 7 10'/><path d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'/></svg>") !important;
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}
/* Catatan tetap pakai pencil icon */
button[data-act="notes"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>") !important;
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* ===== WARNA TOMBOL AKSI KONSISTEN ===== */
.btn-act { cursor: pointer !important; border: none !important; font-family: inherit !important; transition: all 0.2s !important; }
.btn-act-approve { background: #22c55e !important; color: #fff !important; }
.btn-act-approve:disabled { background: #86efac !important; cursor: not-allowed !important; }
.btn-act-reject { background: #ef4444 !important; color: #fff !important; }
.btn-act-reject:disabled { background: #fca5a5 !important; cursor: not-allowed !important; }
/* Catatan (data-act="notes") = abu gelap */
button.btn-act-notes[data-act="notes"] { background: #475569 !important; color: #fff !important; }
/* Reset (data-act="reset") pakai class btn-act-notes tapi warna berbeda */
button.btn-act-notes[data-act="reset"] { background: #64748b !important; color: #fff !important; }
.btn-act-delete { background: transparent !important; color: #ef4444 !important; border: 1.5px solid #ef4444 !important; }
.btn-act-delete:hover { background: #ef4444 !important; color: #fff !important; }

/* ============================================
   ICON COLOR MODIFIERS — full color per nav
   ============================================ */
.nav-icon-wrap--dashboard { color: #60a5fa; background: rgba(96, 165, 250, 0.12); }
.nav-icon-wrap--users { color: #a78bfa; background: rgba(167, 139, 250, 0.12); }
.nav-icon-wrap--upload { color: #34d399; background: rgba(52, 211, 153, 0.12); }
.nav-icon-wrap--check { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.nav-icon-wrap--file { color: #38bdf8; background: rgba(56, 189, 248, 0.12); }
.nav-icon-wrap--trash { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.nav-icon-wrap--user { color: #f472b6; background: rgba(244, 114, 182, 0.12); }

.nav-icon-wrap--dashboard .nav-icon,
.nav-icon-wrap--users .nav-icon,
.nav-icon-wrap--upload .nav-icon,
.nav-icon-wrap--check .nav-icon,
.nav-icon-wrap--file .nav-icon,
.nav-icon-wrap--trash .nav-icon,
.nav-icon-wrap--user .nav-icon {
    filter: none;
}

/* Hover: brighten + scale wrap */
.nav-item:hover .nav-icon-wrap--dashboard { background: rgba(96, 165, 250, 0.22); }
.nav-item:hover .nav-icon-wrap--users { background: rgba(167, 139, 250, 0.22); }
.nav-item:hover .nav-icon-wrap--upload { background: rgba(52, 211, 153, 0.22); }
.nav-item:hover .nav-icon-wrap--check { background: rgba(251, 191, 36, 0.22); }
.nav-item:hover .nav-icon-wrap--file { background: rgba(56, 189, 248, 0.22); }
.nav-item:hover .nav-icon-wrap--trash { background: rgba(248, 113, 113, 0.22); }
.nav-item:hover .nav-icon-wrap--user { background: rgba(244, 114, 182, 0.22); }

/* Active: gold gradient + white icon (override) */
.nav-item.active .nav-icon-wrap,
.nav-item.active .nav-icon-wrap--dashboard,
.nav-item.active .nav-icon-wrap--users,
.nav-item.active .nav-icon-wrap--upload,
.nav-item.active .nav-icon-wrap--check,
.nav-item.active .nav-icon-wrap--file,
.nav-item.active .nav-icon-wrap--trash,
.nav-item.active .nav-icon-wrap--user {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
    }

/* ====================================================================
   v17 — SIDEBAR LOGOUT BUTTON (fix icon terlalu besar + konsisten)
   ====================================================================
   .btn-sidebar-logout TIDAK inherit dari .btn-logout (mobile drawer),
   jadi butuh style sendiri dengan constraint icon size yang konsisten
   dengan nav-item.
   ==================================================================== */
.btn-sidebar-logout {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: rgba(220, 38, 38, 0.12);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(220, 38, 38, 0.25);
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    transition: all 0.18s ease;
}
.btn-sidebar-logout svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}
.btn-sidebar-logout span { line-height: 1; }
.btn-sidebar-logout:hover {
    background: rgba(220, 38, 38, 0.2);
    color: #fff;
    border-color: rgba(220, 38, 38, 0.45);
    transform: translateY(-1px);
}
.btn-sidebar-logout:active {
    transform: translateY(0);
}

/* ====================================================================
   v17 — SIDEBAR SECTION CONSISTENCY
   ====================================================================
   Pemisahan visual "UTAMA" vs "ADMIN" lebih tegas di desktop sidebar
   dengan divider + padding balance.
   ==================================================================== */
.app-sidebar .nav-section + .nav-section {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.app-sidebar .nav-section-admin {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
    padding-top: 10px;
}
.app-sidebar .nav-section-title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 14px 8px;
    margin-bottom: 2px;
}
.app-sidebar .sidebar-logout {
    margin-top: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.app-sidebar .sidebar-logout .logout-form {
    display: block;
    width: 100%;
}

/* ====================================================================
   v21 — SIDEBAR PROFILE & LOGOUT REDESIGN
   ====================================================================
   Sebelumnya: avatar ".L" menggantung full-width tanpa lingkaran,
   role "admin" jadi kotak oranye lebar-penuh dari .role-admin global,
   tombol logout terlalu redup. Redesain dengan avatar bulat 36px
   (background semi-transparan dengan inisial 2 huruf), role jadi
   pill kecil inline, logout lebih terang dengan border + icon.
   Berlaku di DESKTOP dan MOBILE (perbaikan kerapian dasar, bukan
   perubahan layout besar — sesuai instruksi Pak Rendi).
   ==================================================================== */
.app-sidebar .sidebar-profile {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 8px !important;
    padding: 12px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    min-width: 0 !important;
}
.app-sidebar .sidebar-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.3px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    user-select: none !important;
}
.app-sidebar .sidebar-user-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    line-height: 1.2 !important;
}
.app-sidebar .sidebar-user-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Override .role-admin/.role-petugas global — render as small pill,
   bukan badge oranye full-width */
.app-sidebar .sidebar-user-role,
.app-sidebar .sidebar-role {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: max-content !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    margin: 0 !important;
    /* Subtle pill warna netral — bukan oranye penuh dari .role-admin */
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    white-space: nowrap !important;
}
.app-sidebar .sidebar-role-admin,
.app-sidebar .sidebar-user-role.sidebar-role-admin {
    /* Pakai gold/emas sebagai aksen admin — konsisten dengan gold scale PAJAK */
    background: rgba(245, 158, 11, 0.22) !important;
    color: #fcd34d !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
.app-sidebar .sidebar-role-petugas,
.app-sidebar .sidebar-user-role.sidebar-role-petugas {
    background: rgba(59, 130, 246, 0.22) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

/* v21 — SIDEBAR LOGOUT BUTTON (lebih terang, ada icon) */
.app-sidebar .sidebar-logout {
    margin-top: 0 !important;
    padding: 8px 12px 14px !important;
    border-top: none !important;
}
.app-sidebar .sidebar-logout .btn-sidebar-logout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, color 0.18s ease !important;
}
.app-sidebar .sidebar-logout .btn-sidebar-logout svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    display: block !important;
    color: inherit !important;
}
.app-sidebar .sidebar-logout .btn-sidebar-logout:hover {
    background: rgba(220, 38, 38, 0.85) !important;
    color: #ffffff !important;
    border-color: rgba(220, 38, 38, 1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}
.app-sidebar .sidebar-logout .btn-sidebar-logout:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7) !important;
    outline-offset: 2px !important;
}
.app-sidebar .sidebar-logout .btn-sidebar-logout:active {
    transform: translateY(0) !important;
}

/* ====================================================================
   v17 — DATA TABLE → COMPACT CARD ON MOBILE
   ====================================================================
   Desktop: tabel panjang dengan hover & padding normal.
   Mobile (≤768px): convert ke stacked card kompak.
   Selector pakai :where() untuk low specificity, tidak override inline.
   ==================================================================== */
@media (max-width: 768px) {
    /* Wrap tabel dengan overflow-x auto agar bisa horizontal scroll
       jika kolom terlalu banyak di layar sangat kecil. */
    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table {
        font-size: 13px;
    }
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td {
        display: block;
        width: 100% !important;
    }
    .data-table tr {
        margin-bottom: 12px;
        padding: 12px;
        background: var(--white, #fff);
        border: 1px solid var(--slate-100, #f1f5f9);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }
    .data-table td {
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--slate-50, #f8fafc) !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left !important;
    }
    .data-table td:last-child {
        border-bottom: none !important;
        padding-top: 10px !important;
    }
    .data-table td::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--slate-500, #64748b);
        flex-shrink: 0;
        min-width: 80px;
    }
    .data-table td.col-amount {
        text-align: right !important;
        justify-content: flex-end;
    }
    .data-table td.col-amount::before { display: none; }
    .data-table td.col-actions {
        justify-content: flex-end;
        border-top: 1px solid var(--slate-50, #f8fafc);
        padding-top: 10px !important;
        margin-top: 4px;
    }
    .data-table td.col-actions::before { display: none; }
    .data-table td.col-nop {
        font-size: 12px;
        flex-wrap: wrap;
    }
    /* Hide alamat op di mobile (redundan dengan nama) */
    .data-table td.col-alamat { display: none !important; }
    .data-table td.col-dusun { display: none !important; }

    /* Filter bar mobile: rentang tanggal jadi 2 baris supaya tidak overflow */
    .filter-bar { gap: 6px; }
    .filter-bar .filter-group-date {
        flex-basis: 100%;
        order: 99;
    }
    .filter-bar .filter-date-range { display: flex; gap: 6px; }
    .filter-bar .filter-date-range .filter-date { flex: 1; min-width: 0; }
    .filter-bar .filter-date-sep { display: none; }

    /* Pagination ringkas */
    .pagination button { padding: 6px 10px; font-size: 12px; }
}

/* ====================================================================
   v17 — TABLE WRAPPER DEFAULT
   ==================================================================== */
.data-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =================================================================
   v19 — DESKTOP BUTTON & BADGE STANDARDIZATION
   Override mobile touch-friendly 44px ke compact 28-32px untuk desktop
   Hanya apply >= 769px, mobile <= 768 tetap utuh
   ================================================================= */
@media (min-width: 769px) {
    /* Override Pak's old full-width rule agar compact di desktop */
    .admin-bukti-table td.col-aksi .btn-act,
    .admin-bukti-table td.col-aksi .bukti-actions .btn-act,
    .bukti-actions > .btn-act,
    .bukti-actions > * {
        width: auto !important;
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        align-self: center !important;
    }
    .bukti-actions {
        width: auto !important;
        min-width: 0 !important;
    }
    /* Standar action buttons di SEMUA halaman */
    .btn-act,
    .btn-act-detail,
    .btn-act-penghapusan,
    .btn-edit-wp,
    .bukti-file-link,
    .bukti-file-download {
        min-height: 30px !important;
        max-height: 32px !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        border-radius: 8px !important;
        gap: 4px !important;
    }
    .btn-act svg,
    .btn-edit-wp svg,
    .btn-act-penghapusan svg {
        width: 14px !important;
        height: 14px !important;
    }
    /* bukti-actions: gap 6 antar tombol, no wrap agar baris ringkas */
    .bukti-actions {
        gap: 6px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        min-width: 0 !important; /* override admin_bukti_redesign min-width:100% */
        width: auto !important;
    }
    .bukti-actions .btn-act {
        padding: 4px 8px !important;
        font-size: 11px !important;
        min-width: 0 !important;
    }
    /* bukti-file-actions di bukti_bayar: Lihat + Unduh sejajar */
    .bukti-file-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    .bukti-file-link,
    .bukti-file-download {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .bukti-file-link::before,
    .bukti-file-download::before {
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
    }
    .bukti-file-link::before {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M1 8s3-7 7-7 7 7 7 7-3 7-7 7-7-7-7-7z' fill='none' stroke='%233b82f6' stroke-width='1.5' stroke-linejoin='round'/%3e%3ccircle cx='8' cy='8' r='3' fill='%233b82f6'/%3e%3c/svg%3e");
    }
    .bukti-file-download::before {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 1v10M4 7l4 4 4-4M2 14h12' fill='none' stroke='%2310b981' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    }
    /* === Standar BADGE di SEMUA halaman === */
    .pill,
    .pill-lunas,
    .pill-menunggu,
    .pill-pending,
    .pill-verified,
    .pill-rejected,
    .pill-bulk,
    .pill-single,
    .pill-penghapusan,
    .pill-tinggi,
    .pill-sedang,
    .pill-rendah,
    .pill-tinggi,
    .pill-sedang,
    .pill-rendah,
    .pill-success,
    .pill-failed {
        font-size: 11px !important;
        padding: 2px 8px !important;
        line-height: 1.3 !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        white-space: nowrap !important;
    }
    /* Warna pill-tinggi/sedang/rendah untuk kelas WP */
    .pill-tinggi  { background: rgba(239, 68, 68, 0.12) !important; color: #b91c1c !important; }
    .pill-sedang  { background: rgba(245, 158, 11, 0.14) !important; color: #b45309 !important; }
    .pill-rendah  { background: rgba(34, 197, 94, 0.14) !important; color: #15803d !important; }
    /* === wp_list: gabung col-edit ke col-actions (hapus col-edit jadi kosong) === */
    .data-table .col-edit {
        display: none !important;
    }
    /* === admin_bukti: dropdown (...) (Catatan, Reset, Hapus, Unduh) === */
    .bukti-actions-extra {
        position: relative;
        display: inline-block;
        min-width: 0 !important;
    }
    .bukti-actions-extra > summary {
        list-style: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        min-height: 30px;
        min-width: 30px !important;
        max-height: 32px;
        max-width: 36px !important;
        padding: 0;
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
        user-select: none;
    }
    .bukti-actions-extra > summary::-webkit-details-marker { display: none; }
    .bukti-actions-extra[open] > summary {
        background: #e2e8f0;
        color: #1e293b;
    }
    .bukti-actions-extra .dropdown-menu {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 50;
        min-width: 160px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
        padding: 4px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .bukti-actions-extra .dropdown-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        font-size: 12px;
        color: #334155;
        background: transparent;
        border: 0;
        border-radius: 6px;
        text-align: left;
        cursor: pointer;
        text-decoration: none;
        font-weight: 500;
    }
    .bukti-actions-extra .dropdown-item:hover {
        background: #f1f5f9;
        color: #0f172a;
    }
    .bukti-actions-extra .dropdown-item.danger { color: #b91c1c; }
    .bukti-actions-extra .dropdown-item.danger:hover { background: #fef2f2; }
    .bukti-actions-extra .dropdown-item.success { color: #047857; }
    .bukti-actions-extra .dropdown-item.success:hover { background: #f0fdf4; }
    /* hide scroll-hint chevron di desktop (no need, action visible) */
    .col-aksi > .scroll-hint { display: none !important; }
    /* notes small text under action — keep below 11px */
    .col-aksi .bukti-wp-meta {
        font-size: 11px !important;
        margin-top: 4px !important;
        line-height: 1.3 !important;
    }
    /* === admin_bukti: pindahkan 'Auto-sync dari BAPENDA' jadi 11px slate-500 di kolom STATUS === */
    .col-status .bukti-wp-meta {
        font-size: 11px !important;
        color: var(--slate-500) !important;
        margin-top: 3px !important;
        line-height: 1.3 !important;
    }
    /* === Tombol utama admin_bukti (Setujui/Tolak) lebih ringkas di desktop === */
    .bukti-actions > .btn-act-approve,
    .bukti-actions > .btn-act-reject {
        padding: 4px 10px !important;
        min-width: 0 !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }
    .bukti-actions > .btn-act-approve::before,
    .bukti-actions > .btn-act-reject::before {
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
    }
    .bukti-actions > .btn-act-approve::before {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 8l3 3 7-7' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    }
    .bukti-actions > .btn-act-reject::before {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='6' fill='none' stroke='%23b91c1c' stroke-width='1.5'/%3e%3cpath d='M5 5l6 6M11 5l-6 6' stroke='%23b91c1c' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
    }
    .bukti-actions > .btn-act-approve span.lbl,
    .bukti-actions > .btn-act-reject span.lbl {
        font-weight: 600;
    }
    /* === Baris tabel desktop: tinggi minimum ringkas === */
    .data-table tbody tr {
        height: 44px !important;
    }
    /* admin_bukti: tighter cell spacing & line-height untuk baris lebih ringkas */
    .admin-bukti-table .bukti-wp-name { line-height: 1.1 !important; font-size: 13px !important; margin-bottom: 1px !important; }
    .admin-bukti-table .bukti-wp-meta { line-height: 1.2 !important; font-size: 11px !important; margin-top: 1px !important; margin-bottom: 1px !important; }
    .admin-bukti-table .bukti-dusun-tag { font-size: 10px !important; margin-top: 1px !important; line-height: 1.2 !important; display: inline-block !important; }
    .admin-bukti-table .bukti-time { line-height: 1.2 !important; font-size: 12px !important; }
    .admin-bukti-table .bukti-uploader { line-height: 1.2 !important; font-size: 10px !important; color: var(--slate-500) !important; margin-top: 1px !important; }
    .admin-bukti-table .bukti-file-meta { font-size: 10px !important; color: var(--slate-500) !important; margin-top: 1px !important; line-height: 1.2 !important; }
}

/* =================================================================
   v20 — BADGE & TABLE HEADER STANDARDIZATION (single source of truth)
   Referensi: bukti_bayar.php (paling rapi per audit 30 Juni 2026)
   - Pill shape: padding 3/10, fs 11, weight 500, radius 6, line 1.4
   - Pill colors: 5 semantic groups (success/pending/danger/info/penghapusan)
   - Header: navy bg, white text, sticky saat scroll
   - Zebra striping: even row slate-50
   ================================================================= */

/* === PILL SHAPE (semua viewport) === */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.01em;
    vertical-align: middle;
}

/* === PILL COLORS — single source of truth (override semua duplikat) === */
/* Hijau = LUNAS / TERVERIFIKASI / SUCCESS */
.pill-lunas,
.pill-verified,
.pill-success {
    background: #10b981;
    color: #ffffff;
    font-weight: 600;
}
/* Kuning-oranye = BELUM / PENDING / MENUNGGU */
.pill-belum,
.pill-pending,
.pill-menunggu,
.pill-warning {
    background: #f59e0b;
    color: #ffffff;
    font-weight: 600;
}
/* Merah = DITOLAK / GAGAL / FAILED */
.pill-rejected,
.pill-failed,
.pill-danger {
    background: #ef4444;
    color: #ffffff;
    font-weight: 600;
}
/* Biru = INFO */
.pill-info,
.pill-single {
    background: #3b82f6;
    color: #ffffff;
    font-weight: 600;
}
/* Ungu = BULK */
.pill-bulk {
    background: #8b5cf6;
    color: #ffffff;
    font-weight: 600;
}
/* Oranye = PENGHAPUSAN */
.pill-penghapusan {
    background: #f97316;
    color: #ffffff;
    font-weight: 600;
}
/* Abu = MUTED (untuk label non-status) */
.pill-muted {
    background: #e2e8f0;
    color: #475569;
    font-weight: 500;
}
/* Kelas WP — TINGGI/SEDANG/RENDAH (lunas-style) */
.pill-tinggi {
    background: #ef4444;
    color: #ffffff;
    font-weight: 600;
}
.pill-sedang {
    background: #f59e0b;
    color: #ffffff;
    font-weight: 600;
}
.pill-rendah {
    background: #10b981;
    color: #ffffff;
    font-weight: 600;
}

@media (min-width: 769px) {
    /* === Override base .pill radius & padding (FIX 7 v10 line ~180120) === */
    .pill {
        border-radius: 6px !important;
        padding: 3px 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
    }
    /* === Override semua duplikat pill rule (line 130317, 180365, dll) === */
    .pill.pill-lunas,
    .pill.pill-verified,
    .pill.pill-rejected,
    .pill.pill-pending,
    .pill.pill-menunggu,
    .pill.pill-single,
    .pill.pill-bulk,
    .pill.pill-penghapusan,
    .pill.pill-info,
    .pill.pill-success,
    .pill.pill-warning,
    .pill.pill-failed,
    .pill.pill-belum,
    .pill.pill-tinggi,
    .pill.pill-sedang,
    .pill.pill-rendah {
        font-size: 11px !important;
        padding: 3px 10px !important;
        line-height: 1.4 !important;
        box-shadow: none !important;
        font-weight: 600 !important;
    }
    /* Specific warna overrides (line 130317 sets gradient, kita samakan ke solid) */
    .pill.pill-lunas,
    .pill.pill-verified,
    .pill.pill-success {
        background: #10b981 !important;
        color: #ffffff !important;
    }
    .pill.pill-belum,
    .pill.pill-pending,
    .pill.pill-menunggu,
    .pill.pill-warning {
        background: #f59e0b !important;
        color: #ffffff !important;
    }
    .pill.pill-rejected,
    .pill.pill-failed,
    .pill.pill-danger {
        background: #ef4444 !important;
        color: #ffffff !important;
    }
    .pill.pill-info,
    .pill.pill-single {
        background: #3b82f6 !important;
        color: #ffffff !important;
    }
    .pill.pill-bulk {
        background: #8b5cf6 !important;
        color: #ffffff !important;
    }
    .pill.pill-penghapusan {
        background: #f97316 !important;
        color: #ffffff !important;
    }
    .pill.pill-tinggi { background: #ef4444 !important; color: #ffffff !important; }
    .pill.pill-sedang { background: #f59e0b !important; color: #ffffff !important; }
    .pill.pill-rendah { background: #10b981 !important; color: #ffffff !important; }
    /* Override line 77401 weak rule (rgba green) */
    .pill-TINGGI, .pill-SEDANG, .pill-RENDAH, .pill-STANDAR, .pill-tinggi, .pill-sedang, .pill-rendah {
        color: #ffffff !important;
    }
    .pill-TINGGI, .pill-tinggi { background: #ef4444 !important; }
    .pill-SEDANG, .pill-sedang { background: #f59e0b !important; }
    .pill-RENDAH, .pill-rendah { background: #10b981 !important; }
    .pill-STANDAR { background: #64748b !important; }

    /* === HEADER TABEL: navy bg + white text + sticky === */
    .data-table thead th {
        background: #0d2137 !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        padding: 11px 14px !important;
        border-bottom: 2px solid #0d2137 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
    /* sticky thead — saat scroll, header tetap di atas */
    .data-table thead th {
        position: sticky;
        top: 0;
        z-index: 5;
    }
    /* Zebra striping: even row slate-50 (override line 202891 transparent !important) */
    .data-table tbody tr:nth-child(even):not(.row-lunas):not(.row-rejected):not(.row-verified-pending):not(.row-needs-admin) {
        background: #f8fafc !important;
    }
    .data-table tbody tr:nth-child(even):not(.row-lunas):not(.row-rejected):not(.row-verified-pending):not(.row-needs-admin):hover {
        background: #f1f5f9 !important;
    }
    /* Override row highlight gradient dari bukti_bayar agar kompatibel dengan zebra */
    .data-table tbody tr.row-lunas {
        background: linear-gradient(90deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.04) 100%) !important;
    }
    .data-table tbody tr.row-lunas:hover {
        background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
    }
    .data-table tbody tr.row-verified-pending {
        background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.03) 100%) !important;
    }
    .data-table tbody tr.row-verified-pending:hover {
        background: linear-gradient(90deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.06) 100%) !important;
    }
    .data-table tbody tr.row-rejected {
        background: linear-gradient(90deg, rgba(239, 68, 68, 0.06) 0%, rgba(239, 68, 68, 0.02) 100%) !important;
    }
    .data-table tbody tr.row-rejected:hover {
        background: linear-gradient(90deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.04) 100%) !important;
    }
    .data-table tbody tr.row-needs-admin {
        background: #fffbeb !important;
    }
    /* Hover: konsisten di semua 4 halaman (override admin-bukti & penghapusan) */
    .data-table tbody tr:hover,
    .admin-bukti-table tbody tr:hover,
    .penghapusan-table tbody tr:hover,
    .bukti-table tbody tr:hover {
        background: #f1f5f9 !important;
    }
    /* Padding cell konsisten: 11px vertikal, 14px horizontal */
    .data-table tbody td {
        padding: 11px 14px !important;
    }
}

/* ====================================================================
   v22 — MOBILE NOP & NAMA WP COMPACT (jaga text tetap dalam kolom)
   ====================================================================
   Sebelumnya di mobile (≤768px) NOP monospace 12-13px, nama WP 13px+
   dengan content panjang (24 char NOP, alamat panjang) bisa overflow
   atau wrap yang tidak rapi. Pak komplain: "NOP teksnya melebihi kolom".
   Solusi: kecilkan font + paksa wrap rapih + pastikan container punya
   max-width 100% + word-break: break-all untuk NOP.
   Berlaku di: wp_list, bukti_bayar, penghapusan, admin_bukti.
   ==================================================================== */
@media (max-width: 768px) {
    /* NOP monospace: 11px di mobile, wrap rapih, tidak overflow */
    .data-table td.col-nop,
    .bukti-table td.col-nop,
    .penghapusan-table td.col-nop,
    .admin-bukti-table td.col-nop {
        font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        line-height: 1.35 !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }
    /* NOP inner <a>: inherit, tidak override dari cell */
    .data-table td.col-nop a,
    .bukti-table td.col-nop a,
    .penghapusan-table td.col-nop a,
    .admin-bukti-table td.col-nop a,
    .data-table td.col-nop .nop-fmt,
    .admin-bukti-table td.col-nop .nop-fmt {
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        letter-spacing: inherit !important;
        color: #1e3a8a !important;
        text-decoration: none !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
    /* Nama WP: tetap wrap rapih, tidak overflow card */
    .data-table td.col-nama,
    .data-table td.col-alamat,
    .data-table td.col-dusun,
    .bukti-table td.col-nama,
    .bukti-table td.col-dusun,
    .penghapusan-table td.col-nama,
    .penghapusan-table td.col-alamat,
    .admin-bukti-table td.bukti-wp-name,
    .admin-bukti-table td.col-alamat {
        font-size: 13px !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }
    /* Nama WP: sedikit lebih besar sebagai primary identity */
    .data-table td.col-nama,
    .bukti-table td.col-nama,
    .penghapusan-table td.col-nama,
    .admin-bukti-table .bukti-wp-name {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    /* Cell container: max-width 100% supaya anak-anak wrap dalam card */
    .data-table td,
    .bukti-table td,
    .penghapusan-table td,
    .admin-bukti-table td {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
}

/* ====================================================================
   v24 — NOP READABLE (no truncate, wrap ke 2 baris, no tooltip)
   ====================================================================
   Pendekatan v23 (ellipsis + title) tidak dipakai lagi karena:
   1. Tooltip title= tampil sebagai kotak putih yang menimpa kolom lain
   2. NOP adalah data identifikasi penting yang HARUS selalu terlihat utuh

   Pendekatan v24:
   1. Hapus text-overflow:ellipsis, overflow:hidden, white-space:nowrap
   2. NOP full text SELALU terbaca via word-break:break-all + white-space:normal
   3. Lebar kolom 190px (sesuai spec Pak) — cukup untuk NOP 21-24 char
   4. NOP di-wrap ke 2 baris natural (browser auto-wrap based on width)
   5. vertical-align:top supaya NOP mulai dari atas cell (bukan tengah)
   6. JS inject <br> setelah 14 char (4 blok pertama) supaya NOP split
      jadi 2 baris visual yang rapi: "18.08.020.014" + ".002.008-XX"
   7. TIDAK ada title attribute — user tidak perlu hover

   Berlaku di: wp_list, bukti_bayar, penghapusan, admin_bukti.
   Hanya di DESKTOP (mobile sudah di-handle v22).
   ==================================================================== */
@media (min-width: 769px) {
    /* NOP cell: lebar 190px, full readable, wrap ke 2 baris */
    .data-table .col-nop,
    .bukti-table .col-nop,
    .penghapusan-table .col-nop,
    .admin-bukti-table .col-nop,
    .ph-table .col-nop {
        width: 190px !important;
        max-width: 190px !important;
        min-width: 190px !important;
        white-space: normal !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        font-variant-numeric: tabular-nums !important;
        font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        line-height: 1.3 !important;
        vertical-align: top !important;
        padding-top: 12px !important;
    }
    /* Anak NOP (a, span, div): block + 100% + wrap normal, BUKAN nowrap.
       TIDAK ada overflow:hidden, TIDAK ada text-overflow:ellipsis. */
    .data-table .col-nop a,
    .data-table .col-nop span,
    .data-table .col-nop div,
    .bukti-table .col-nop a,
    .bukti-table .col-nop span,
    .bukti-table .col-nop div,
    .penghapusan-table .col-nop a,
    .penghapusan-table .col-nop span,
    .penghapusan-table .col-nop div,
    .admin-bukti-table .col-nop a,
    .admin-bukti-table .col-nop span,
    .admin-bukti-table .col-nop div,
    .ph-table .col-nop a,
    .ph-table .col-nop span,
    .ph-table .col-nop div {
        display: block !important;
        max-width: 100% !important;
        width: 100% !important;
        white-space: normal !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        letter-spacing: inherit !important;
        line-height: inherit !important;
        color: #1e3a8a !important;
        text-decoration: none !important;
    }
    /* Update header <th> NOP width supaya match cell */
    .data-table thead th.col-nop,
    .bukti-table thead th.col-nop,
    .penghapusan-table thead th.col-nop,
    .admin-bukti-table thead th.col-nop,
    .ph-table thead th.col-nop,
    .data-table thead th:nth-child(1),
    .bukti-table thead th:nth-child(1),
    .penghapusan-table thead th:nth-child(1),
    .admin-bukti-table thead th:nth-child(1),
    .ph-table thead th:nth-child(1) {
        width: 190px !important;
        max-width: 190px !important;
        min-width: 190px !important;
        text-align: left !important;
    }
}

/* ====================================================================
   v25 — VERTICAL ALIGNMENT CENTER untuk konsistensi sel tabel desktop
   ====================================================================
   Masalah v24: Sel NOP `vertical-align:top` (supaya NOP mulai dari atas),
   tapi sel lain default middle. Saat NOP 2 baris + Alamat 2 baris
   membumbung tinggi row ~113px, konten sel AKSI (tombol 1-3 tombol
   vertikal 30px) terlihat "mengambang" di tengah bahkan "atas" karena
   justify default cell-table yang nempel top. 

   Solusi v25:
   1. Semua <td> default 4 tabel → vertical-align:middle (center)
   2. Kolom AKSI → flex column + justify-content:center + height:100%
      (supaya 1/2/3 tombol tetap center vertikal, tidak peduli tinggi row)
   3. NOP tetap vertical-align:top (konsisten dengan v24 — NOP mulai atas
      supaya rata dengan NAMA WP yang biasanya multi-line)
   4. Container flex untuk NAMA, ALAMAT, info supaya center
   5. Badge/info inline di dalam cell → tidak nempel ke salah satu sisi

   Berlaku di: wp_list, bukti_bayar, penghapusan, admin_bukti
   Hanya di DESKTOP (mobile sudah di-handle v22).
   ==================================================================== */
@media (min-width: 769px) {
    /* 1. Default semua sel 4 tabel → vertical-align middle */
    .data-table tbody td,
    .bukti-table tbody td,
    .penghapusan-table tbody td,
    .admin-bukti-table tbody td,
    .ph-table tbody td {
        vertical-align: middle !important;
    }

    /* 2. Sel AKSI jadi flex column container. v25 fix vertical-align.
          Pakai :has() + col-aksi-group + class spesifik karena di admin_bukti
          kolom AKSI tidak di posisi :last-child.
          EXCLUDE td yang isinya cuma text/info (mis. col waktu di admin_bukti
          yang bukan last-child tapi tidak punya button group) — pakai :not
          supaya tidak override display table-cell di cell yang text-only.
          Catatan: vertical-align: stretch bukan nilai valid CSS3 untuk
          vertical-align, jadinya kami pakai vertical-align: middle (default
          browser untuk td) + display: flex. Flex container akan stretch
          otomatis ke row height karena cell adalah table-cell. */
    .data-table tbody td.col-aksi,
    .bukti-table tbody td.col-aksi,
    .penghapusan-table tbody td.col-aksi,
    .admin-bukti-table tbody td.col-aksi,
    .ph-table tbody td.col-aksi,
    .data-table tbody td.aksi-col,
    .bukti-table tbody td.aksi-col,
    .penghapusan-table tbody td.aksi-col,
    .admin-bukti-table tbody td.aksi-col,
    .ph-table tbody td.aksi-col,
    .data-table tbody td.col-actions,
    .bukti-table tbody td.col-actions,
    .penghapusan-table tbody td.col-actions,
    .admin-bukti-table tbody td.col-actions,
    .ph-table tbody td.col-actions,
    .data-table tbody td:last-child:not(:has(.bukti-time, .bukti-uploader, small, .meta-only, .col-waktu)),
    .bukti-table tbody td:last-child:not(:has(.bukti-time, .bukti-uploader, small, .meta-only, .col-waktu)),
    .penghapusan-table tbody td:last-child:not(:has(.bukti-time, .bukti-uploader, small, .meta-only, .col-waktu)),
    .admin-bukti-table tbody td:last-child:not(:has(.bukti-time, .bukti-uploader, small, .meta-only, .col-waktu)),
    .ph-table tbody td:last-child:not(:has(.bukti-time, .bukti-uploader, small, .meta-only, .col-waktu)),
    .data-table tbody td:has(> .col-aksi-group),
    .bukti-table tbody td:has(> .col-aksi-group),
    .penghapusan-table tbody td:has(> .col-aksi-group),
    .admin-bukti-table tbody td:has(> .col-aksi-group),
    .ph-table tbody td:has(> .col-aksi-group),
    .data-table tbody td:has(> .bukti-actions),
    .bukti-table tbody td:has(> .bukti-actions),
    .penghapusan-table tbody td:has(> .bukti-actions),
    .admin-bukti-table tbody td:has(> .bukti-actions),
    .ph-table tbody td:has(> .bukti-actions) {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        vertical-align: middle !important;
        height: 100% !important;
        box-sizing: border-box !important;
        /* Padding asimetris: top bigger supaya group push ke center.
           Note: kita tidak pakai padding di sini karena padding dari selector
           bawah (11px 8px) sudah di-set. Kita override dgn padding lebih besar
           di top/bottom supaya group center.
           PENTING: di <td> dengan display:flex, justify-content:center
           tidak center child kalau cell height tidak explicit. Trik kita
           pakai padding simetris besar (12px 8px) dan box-sizing border-box. */
        padding: 12px 8px !important;
    }

    /* 2b. Container grup tombol AKSI: flex column, center, gap 6px,
            full height + flex-shrink:0 + margin auto supaya justify-content
            center di parent flex <td> bekerja. KRITIS: flex-shrink:0 agar
            child tidak shrink ke 0 height saat td flex container. */
    .col-aksi-group,
    .aksi-group,
    .btn-group,
    .data-table tbody td:last-child > .btn,
    .bukti-table tbody td:last-child > .btn,
    .penghapusan-table tbody td:last-child > .btn,
    .admin-bukti-table tbody td:last-child > .btn,
    .ph-table tbody td:last-child > .btn {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 6px !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: auto 0 !important;
        flex-shrink: 0 !important;
    }

    /* 2c. Tombol di dalam sel AKSI: full width, tidak melar ke samping,
            tetap center text */
    .data-table tbody td:last-child .btn,
    .bukti-table tbody td:last-child .btn,
    .penghapusan-table tbody td:last-child .btn,
    .admin-bukti-table tbody td:last-child .btn,
    .ph-table tbody td:last-child .btn,
    .data-table tbody td:last-child .btn-act,
    .bukti-table tbody td:last-child .btn-act,
    .penghapusan-table tbody td:last-child .btn-act,
    .admin-bukti-table tbody td:last-child .btn-act,
    .ph-table tbody td:last-child .btn-act {
        width: 100% !important;
        max-width: 110px !important;
        margin: 0 auto !important;
        justify-content: center !important;
    }

    /* 2d. Single-button AKSI: pastikan tetap center vertikal.
            Kita pakai flex-grow supaya button push ke center. */
    .data-table tbody td:last-child .btn:only-child,
    .bukti-table tbody td:last-child .btn:only-child,
    .penghapusan-table tbody td:last-child .btn:only-child,
    .admin-bukti-table tbody td:last-child .btn:only-child,
    .ph-table tbody td:last-child .btn:only-child,
    .data-table tbody td:last-child .btn-act:only-child,
    .bukti-table tbody td:last-child .btn-act:only-child,
    .penghapusan-table tbody td:last-child .btn-act:only-child,
    .admin-bukti-table tbody td:last-child .btn-act:only-child,
    .ph-table tbody td:last-child .btn-act:only-child {
        flex: 0 0 auto !important;
        margin: auto 0 !important;
    }

    /* 3. NOP tetap vertical-align:top (konsisten v24) — NOP mulai dari
          atas cell supaya rata dengan NAMA WP yang multi-line. TAPI
          padding cell ditambah sedikit supaya tidak nempel ke thead. */
    .data-table .col-nop,
    .bukti-table .col-nop,
    .penghapusan-table .col-nop,
    .admin-bukti-table .col-nop,
    .ph-table .col-nop {
        vertical-align: top !important;
    }

    /* 4. Container utama di sel konten: flex column center, supaya
          text/badge/info tetap center vertikal dalam cell besar */
    .data-table tbody td .cell-content,
    .bukti-table tbody td .cell-content,
    .penghapusan-table tbody td .cell-content,
    .admin-bukti-table tbody td .cell-content,
    .ph-table tbody td .cell-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    /* 5. Badge/info kecil di dalam cell: inline-block + center,
          tidak nempel ke atas/bawah cell */
    .data-table tbody td .pill,
    .bukti-table tbody td .pill,
    .penghapusan-table tbody td .pill,
    .admin-bukti-table tbody td .pill,
    .ph-table tbody td .pill,
    .data-table tbody td .badge,
    .bukti-table tbody td .badge,
    .penghapusan-table tbody td .badge,
    .admin-bukti-table tbody td .badge,
    .ph-table tbody td .badge,
    .data-table tbody td .info,
    .bukti-table tbody td .info,
    .penghapusan-table tbody td .info,
    .admin-bukti-table tbody td .info,
    .ph-table tbody td .info,
    .data-table tbody td .meta,
    .bukti-table tbody td .meta,
    .penghapusan-table tbody td .meta,
    .admin-bukti-table tbody td .meta,
    .ph-table tbody td .meta {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
    }
}

/* ====================================================================
   v26 — NAMA WP CELL: flex-column stack nama+alamat+badge dusun
   ====================================================================
   Masalah v25: badge dusun (.bukti-dusun-tag) di admin_bukti dan alamat
   panjang "ARGOMULYO RT:001 RW:12" di cell 107px saling overlap — badge
   flow horizontal (inline-block) menimpa teks alamat. 

   Solusi v26: bungkus nama+alamat+(badge+pill) dalam satu container
   .col-nama-wp flex-column. Container stack: nama (bold) → alamat
   (multi-line) → extra baris (badge dusun + pill penghapusan) pada baris
   TERPISAH paling bawah. TIDAK ada float, TIDAK ada absolute, TIDAK ada
   z-index bertumpuk. Lebar kolom NAMA WP diperbesar supaya nama + alamat
   muat tanpa terpotong.

   Berlaku di: wp_list, bukti_bayar, admin_bukti.
   Hanya di DESKTOP (mobile sudah di-handle v22).
   ==================================================================== */
@media (min-width: 769px) {
    /* Container utama: flex column, gap 4px, full width cell */
    .col-nama-wp {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Nama WP: bold, line-height rapat */
    .col-nama-wp .bukti-wp-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0a1635 !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Alamat: gray text, wrap normal, no truncate, no overflow hidden */
    .col-nama-wp .bukti-wp-meta {
        font-size: 12px !important;
        color: #475569 !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Override inline style italic/auto-sync jika ada */
        font-style: normal !important;
    }

    /* Extra baris (badge dusun + pill penghapusan): flex row, wrap,
       align-self flex-start supaya kiri-aligned, margin-top 2px */
    .col-nama-wp-extra {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        align-self: flex-start !important;
        margin-top: 2px !important;
        width: 100% !important;
    }

    /* Badge dusun: di baris sendiri, align-self start, no margin-right
       yang akan mendorong keluar cell */
    .col-nama-wp .bukti-dusun-tag {
        display: inline-flex !important;
        align-items: center !important;
        background: #dbeafe !important;
        color: #1e40af !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    /* Pill di dalam extra (penghapusan): sama style dengan badge */
    .col-nama-wp .pill {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* Lebar kolom NAMA WP — perbesar supaya nama+alamat+badge muat.
       Override default table-layout fixed (yang mungkin set col-nama kecil).
       Pakai :nth-child(2) untuk <th> karena admin_bukti tidak punya class
       di <th> (hanya <td> yang punya data-label). */
    .data-table .col-nama,
    .bukti-table .col-nama,
    .admin-bukti-table td[data-label="Wajib Pajak"] {
        min-width: 200px !important;
        width: 200px !important;
        max-width: 260px !important;
    }

    /* Header <th> NAMA WP match width — pakai :nth-child(2) untuk catch
       admin_bukti <th> tanpa class */
    .data-table thead th.col-nama,
    .bukti-table thead th.col-nama,
    .admin-bukti-table thead th:nth-child(2) {
        min-width: 200px !important;
        width: 200px !important;
    }
}

/* ============================================================
   DASHBOARD v17 - SERAGAMKAN UKURAN CARD + SISA TARGET DUSUN
   Added 2026-07-06 by request: semua card tinggi konsisten
   ============================================================ */

/* Samakan tinggi semua stat-card di grid utama */
.stat-grid > .stat-card,
.stat-grid-secondary > .stat-card {
    min-height: 165px;
    display: flex;
    flex-direction: column;
}

/* Stat content isi sisa space */
.stat-card .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Samakan tinggi stat-card-merged */
.stat-card-merged {
    min-height: 165px !important;
}

/* Style untuk dusun-sisa-list */
.dusun-sisa-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dusun-sisa-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(90deg, #fef2f2 0%, #ffffff 100%);
    border-left: 3px solid #dc2626;
    border-radius: 6px;
}

.dusun-sisa-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dusun-sisa-nama {
    font-size: 13px;
    font-weight: 700;
    color: #1e3a8a;
}

.dusun-sisa-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: #6b7280;
}

.dusun-sisa-count {
    color: #dc2626;
    font-weight: 600;
}

.dusun-sisa-nominal {
    color: #991b1b;
    font-weight: 700;
    font-size: 12px;
}

/* Total bar */
.dusun-sisa-total {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin-top: 8px;
    background: linear-gradient(90deg, #1e3a8a 0%, #312e81 100%);
    border-radius: 8px;
    color: #ffffff;
}

.dusun-sisa-total-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex: 1;
}

.dusun-sisa-total-wp {
    font-size: 14px;
    font-weight: 700;
}

.dusun-sisa-total-nominal {
    font-size: 16px;
    font-weight: 700;
    color: #fbbf24;
}

/* Mobile responsive - dusun-sisa */
@media (max-width: 640px) {
    .stat-grid > .stat-card,
    .stat-grid-secondary > .stat-card {
        min-height: 140px;
    }
    .stat-card-merged {
        min-height: 140px !important;
    }
    .dusun-sisa-row {
        padding: 8px 10px;
    }
    .dusun-sisa-nama {
        font-size: 12px;
    }
    .dusun-sisa-meta {
        font-size: 10px;
        flex-wrap: wrap;
    }
}


/* ============================================================
   DASHBOARD v18 - KONSISTENKAN FRAME LUNAS (2026-07-06)
   Hilangkan nested frame "SUDAH LUNAS", ganti jadi stat-card biasa.
   ============================================================ */

/* stat-success full style (konsisten dengan stat-warning/danger/primary) */
.stat-card.stat-success {
    border-left-color: #10b981 !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
}
.stat-card.stat-success .stat-icon {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    color: #047857 !important;
}
.stat-card.stat-success .stat-value {
    color: #047857 !important;
}
.stat-card.stat-success .stat-label {
    color: #047857 !important;
    font-weight: 700;
}

/* stat-sub-bold untuk nominal yang lebih ditekankan */
.stat-sub-bold {
    font-size: 12px !important;
    color: var(--slate-700) !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
}
.stat-card.stat-success .stat-sub-bold {
    color: #047857 !important;
    font-weight: 700 !important;
}

/* stat-card-merged yang sudah tidak dipakai di dashboard utama
   masih dipakai di tempat lain (lihat bukti_bayar.php), jadi biarkan */


/* ============================================================
   DASHBOARD v19 - RANKING DUSUN DALAM CARD SUDAH LUNAS
   Minimalis + rapi, muat di dalam card SUDAH LUNAS
   ============================================================ */

.stat-ranking-divider {
    margin: 12px -18px 8px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.25) 50%, transparent 100%);
}

.stat-ranking-title {
    font-size: 10px;
    font-weight: 700;
    color: #047857;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-ranking-row {
    display: grid;
    grid-template-columns: 26px 1fr auto auto;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.3;
    padding: 2px 0;
}

.stat-ranking-num {
    color: #047857;
    font-weight: 700;
    font-size: 10px;
}

.stat-ranking-name {
    color: #1e293b;
    font-weight: 600;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.stat-ranking-sisa {
    color: #64748b;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.stat-ranking-pct {
    color: #047857;
    font-weight: 700;
    font-size: 11px;
    min-width: 38px;
    text-align: right;
}

.stat-ranking-bar {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 1px;
    margin-bottom: 5px;
}

.stat-ranking-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Mobile responsive - ranking */
@media (max-width: 640px) {
    .stat-ranking-divider {
        margin: 10px -12px 6px;
    }
    .stat-ranking-row {
        font-size: 10px;
    }
    .stat-ranking-name {
        font-size: 10px;
    }
    .stat-ranking-pct {
        font-size: 10px;
        min-width: 32px;
    }
    .stat-ranking-sisa {
        font-size: 9px;
    }
    .stat-ranking-title {
        font-size: 9px;
    }
}


/* ============================================================
   DATA WP - SCAN BARCODE FEATURE (2026-07-06)
   Tombol scan + popup scanner profesional & proporsional
   ============================================================ */

/* Tombol scan barcode - sejajar dengan search bar */
.btn-scan-barcode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1.5px solid #1e3a8a;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    color: #1e3a8a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 38px;
    flex-shrink: 0;
    align-self: stretch;
}

.btn-scan-barcode:hover {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #ffffff;
    border-color: #1e3a8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
}
.btn-scan-barcode:active { transform: translateY(0); }
.btn-scan-barcode svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Popup scanner (overlay) */
.barcode-scanner-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: fadeIn 0.2s ease;
}
.barcode-scanner-popup.active {
    display: flex;
}
.barcode-scanner-panel {
    background: #0f172a;
    border-radius: 18px;
    padding: 20px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.barcode-scanner-popup.active {
    display: flex;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.barcode-scanner-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, transparent 100%);
    z-index: 10;
}
.barcode-scanner-header h3 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.barcode-scanner-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.barcode-scanner-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    transform: rotate(90deg);
}



.barcode-scanner-video {
    width: 100%;
    aspect-ratio: 4/3;
    background: #020617;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.barcode-scanner-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.barcode-scanner-video::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #ef4444 50%, transparent 100%);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
    z-index: 5;
    animation: scanLine 2s ease-in-out infinite;
}
.barcode-scanner-video::after {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 20%;
    right: 20%;
    border: 2px solid rgba(16, 185, 129, 0.6);
    border-radius: 8px;
    z-index: 4;
    pointer-events: none;
}
@keyframes scanLine {
    0%, 100% { transform: translateY(-100%); }
    50% { transform: translateY(100%); }
}

.barcode-scanner-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 13px;
    padding: 0 4px;
}
.barcode-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
    animation: pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.barcode-status-dot.active {
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}
.barcode-status-dot.error {
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.barcode-scanner-hint {
    color: #94a3b8;
    font-size: 11px;
    text-align: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    line-height: 1.4;
}

/* Tablet */
@media (max-width: 768px) {
    .btn-scan-barcode {
        padding: 7px 10px;
        min-height: 32px;
        font-size: 12px;
    }
    .btn-scan-barcode svg {
        width: 14px;
        height: 14px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .btn-scan-barcode span {
        display: none;
    }
    .btn-scan-barcode {
        padding: 0;
        width: 38px;
        height: 38px;
        min-height: 38px;
        justify-content: center;
        gap: 0;
    }
    .btn-scan-barcode svg {
        width: 18px;
        height: 18px;
    }
    .barcode-scanner-popup {
        padding: 12px;
    }
    .barcode-scanner-body {
        padding: 50px 14px 14px;
        max-width: 100%;
        border-radius: 12px;
    }
    .barcode-scanner-header {
        padding: 12px 16px;
    }
    .barcode-scanner-header h3 {
        font-size: 14px;
    }
    .barcode-scanner-close {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    .barcode-scanner-video {
        aspect-ratio: 16/10;
    }
}



/* ============================================================
   PAY MODAL ANIMATIONS v18.0.1
   Added 2026-07-07: animasi loading yang lebih hidup
   - .pay-spinner: pulse + rotate + multi-ring glow
   - .payStep1/2/3: smooth transition + shimmer effect
   - .pay-loading-title: pulse text
   ============================================================ */

.pay-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 4px solid rgba(30, 58, 138, 0.15);
    border-top-color: #1e3a8a;
    border-right-color: #3b82f6;
    animation: pay-spinner-rotate 1s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite, pay-spinner-pulse 1.6s ease-in-out infinite;
    position: relative;
    box-shadow: 0 0 0 0 rgba(30, 58, 138, 0.4);
}
.pay-spinner::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-bottom-color: #f59e0b;
    animation: pay-spinner-rotate-reverse 1.4s linear infinite;
}
.pay-spinner::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(30, 58, 138, 0.1);
    border-top-color: rgba(30, 58, 138, 0.4);
    animation: pay-spinner-rotate 2.2s linear infinite;
}

@keyframes pay-spinner-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes pay-spinner-rotate-reverse {
    0%   { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
@keyframes pay-spinner-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(30, 58, 138, 0.4),
                    0 0 0 0 rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(30, 58, 138, 0),
                    0 0 0 24px rgba(59, 130, 246, 0);
    }
}

/* Step indicators - smooth color transition + shimmer */
#payStep1, #payStep2, #payStep3 {
    transition: color 0.4s ease, transform 0.3s ease;
    padding: 4px 0;
    font-weight: 500;
}
#payStep1.active, #payStep2.active, #payStep3.active {
    transform: translateX(4px);
}
#payStep1.done, #payStep2.done, #payStep3.done {
    animation: pay-step-shimmer 1.2s ease-out;
}

@keyframes pay-step-shimmer {
    0% {
        background: linear-gradient(90deg, transparent 0%, rgba(22, 163, 74, 0.15) 50%, transparent 100%);
        background-size: 200% 100%;
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Loading title - subtle pulse */
#payLoadingTitle {
    animation: pay-title-pulse 1.8s ease-in-out infinite;
    letter-spacing: 0.2px;
}

@keyframes pay-title-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* Container animation - fade in when shown */
#payLoading {
    animation: pay-loading-fadein 0.3s ease-out;
}

@keyframes pay-loading-fadein {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Steps container - shimmer background sweep */
#payLoadingSteps {
    position: relative;
}
#payLoadingSteps::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.04) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: pay-steps-sweep 2.5s ease-in-out infinite;
    pointer-events: none;
    border-radius: 8px;
}

@keyframes pay-steps-sweep {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .pay-spinner,
    .pay-spinner::before,
    .pay-spinner::after {
        animation-duration: 3s;
    }
    #payStep1, #payStep2, #payStep3,
    #payLoadingTitle,
    #payLoadingSteps::before {
        animation: none;
    }
}




/* ============================================================
   WAY KANAN LOGO v18.0.3 (FIXED - proporsional)
   Logo asli 1445x1985 px (aspect 0.728 = lebih tinggi dari lebar)
   Container square, logo fit dengan object-fit: contain
   ============================================================ */

.pay-spinner-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pay-spinner-wrap .pay-spinner {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 72px;
    height: 72px;
}

.pay-logo-center {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    padding: 0;
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.18),
                0 0 0 3px rgba(255, 255, 255, 0.7);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation: pay-logo-bob 2.4s ease-in-out infinite;
}

.pay-logo-center img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

@keyframes pay-logo-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* Success glow tetap */
.pay-success-icon {
    position: relative;
    overflow: visible;
}
.pay-success-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.15) 0%, transparent 70%);
    z-index: -1;
    animation: pay-success-glow 2s ease-in-out infinite;
}

@keyframes pay-success-glow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.2); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pay-logo-center {
        animation: none;
    }
}

}

/* === PATCH STEP 5 (2026-07-17): badge perbaikan SPPT di wp_list.php ===
   Replikasi pattern dari .bukti-pending-badge / .bukti-verified-badge (above).
   Read-only display - TIDAK mengubah data apapun. */
.perbaikan-aktif-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25);
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    animation: pulse-amber 2s ease-in-out infinite;
}
.perbaikan-aktif-badge:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.40);
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
    animation: none;
}
.perbaikan-aktif-badge:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.30);
}

.perbaikan-baru-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.20);
    letter-spacing: 0.3px;
    white-space: nowrap;
}