
/* ===== RESET FOCUS ===== */
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: #20c997; box-shadow: 0 0 0 3px rgba(32,201,151,.12); }
.form-control, .form-select { border-radius: 8px; border: 1.5px solid #e5e7eb; font-size: .88rem; padding: 9px 12px; }

/* ===== STATUS BADGES ===== */
.status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.sb-lunas      { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.sb-verifikasi { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }
.sb-pending    { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.sb-other      { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }

/* ===== STAT CARDS ===== */
.stat-card { border-radius:12px; border:none; box-shadow:0 1px 4px rgba(0,0,0,.08); }

/* ===== SECTION / TABLE CARD ===== */
.section-card { border-radius:14px; border:none; box-shadow:0 1px 6px rgba(0,0,0,.07); overflow:hidden; margin-bottom:20px; }
.section-card-header {
    padding:13px 20px; display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid #f1f3f5; background:#fff;
}
.section-card-header .title { font-size:.85rem; font-weight:700; color:#374151; display:flex; align-items:center; gap:6px; }
.section-card-header .title i { color:#20c997; }

/* ===== TABLES ===== */
.iuran-table th {
    font-size:.75rem; text-transform:uppercase; letter-spacing:.04em;
    color:#6b7280; font-weight:700; padding:10px 16px;
    background:#f8fffe; border-bottom:1.5px solid #e5e7eb;
    white-space:nowrap;
}
.iuran-table td { padding:10px 16px; vertical-align:middle; font-size:.85rem; border-bottom:1px solid #f3f4f6; }
.iuran-table tbody tr:last-child td { border-bottom:none; }
.iuran-table tbody tr:hover { background:#f8fffe; }

/* Verifikasi table highlight */
.row-verif td { background:#fffbeb !important; }
.row-verif:hover td { background:#fef3c7 !important; }

/* ===== FILTER CARD ===== */
.filter-card { border-radius:12px; border:1.5px solid #e5e7eb; box-shadow:none; margin-bottom:20px; }
.filter-card .card-body { padding:16px 20px; }

/* ===== ALERT VERIF ===== */
.verif-alert {
    background:#fffbeb; border:1.5px solid #fde68a; border-radius:12px;
    padding:13px 18px; margin-bottom:16px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.verif-alert .va-text { font-size:.85rem; font-weight:600; color:#92400e; }
.btn-verif-now { background:#f59e0b; border:none; color:#fff; border-radius:8px; padding:6px 14px; font-size:.8rem; font-weight:700; white-space:nowrap; }
.btn-verif-now:hover { background:#d97706; color:#fff; }

/* ===== ADMIN BUTTONS (header) ===== */
.admin-header-btns { display:flex; gap:8px; flex-wrap:wrap; }
.admin-header-btns .btn { font-size:.82rem; padding:7px 14px; border-radius:8px; font-weight:600; white-space:nowrap; }

/* ===== ACTION BUTTONS in table ===== */
.btn-act { font-size:.78rem; padding:5px 10px; border-radius:7px; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }

/* ===== DESKTOP: tabel tampil, card list sembunyi ===== */
.desktop-table   { display: block; }

/* PENTING: Jangan pakai d-flex di HTML untuk mobile-iuran-list,
   gunakan CSS flex di sini agar display:none bisa override dengan benar */
.mobile-iuran-list {
    display: none;        /* hidden di desktop */
}

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
    .container-fluid { padding-left:12px !important; padding-right:12px !important; }

    /* Header */
    .iuran-header { flex-direction:column !important; align-items:flex-start !important; gap:10px; }
    .admin-header-btns { display:grid; grid-template-columns:1fr 1fr; width:100%; }
    .admin-header-btns .btn { justify-content:center; }
    .admin-header-btns .btn:last-child { grid-column:1/-1; }

    /* Stat cards: 2 col */
    .stat-row > [class*='col-'] { flex:0 0 50% !important; max-width:50% !important; }
    .stat-card .card-body { padding:10px 12px !important; }

    /* Filter: full width */
    .filter-row > [class*='col-'] { flex:0 0 100% !important; max-width:100% !important; }
    .filter-row .col-btn { flex:0 0 100% !important; max-width:100% !important; }
    .filter-row .col-btn .btn { width:100%; }

    /* Mobile: sembunyikan tabel, tampilkan card list */
    .desktop-table     { display: none !important; }
    .mobile-iuran-list { display: flex !important; flex-direction: column; gap: 10px; padding: 12px; }

    /* Verif alert */
    .verif-alert { flex-direction:column; align-items:flex-start; }
    .btn-verif-now { width:100%; text-align:center; }
}
