
/* ── Global ── */
.dashboard-wrapper {}

/* ═══════════════════════════════════════
   NOTIFIKASI ALERT
═══════════════════════════════════════ */
.dash-alert-pending {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: none !important;
    border-left: 5px solid #f59e0b !important;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(245,158,11,0.15) !important;
    padding: 18px 22px;
}
.dash-alert-pending .alert-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 6px;
    background: rgba(255,255,255,0.9);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.dash-alert-pending h5 {}
.dash-alert-pending p { margin-bottom: 10px; }
.dash-alert-pending .badge-total {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    padding: 8px 18px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}

/* ── Alert Buttons ── */
.btn-alert-pinjaman {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; border: none; border-radius: 6px; padding: 7px 14px;
    text-decoration: none; box-shadow: 0 3px 10px rgba(245,158,11,0.3);
    transition: transform .15s, box-shadow .15s;
    display: inline-flex; align-items: center; gap: 5px;
}
.btn-alert-pinjaman:hover { transform: translateY(-1px); color: #fff; }
.btn-alert-iuran {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff; border: none; border-radius: 6px; padding: 7px 14px;
    text-decoration: none; box-shadow: 0 3px 10px rgba(14,165,233,0.3);
    transition: transform .15s, box-shadow .15s;
    display: inline-flex; align-items: center; gap: 5px;
}
.btn-alert-iuran:hover { transform: translateY(-1px); color: #fff; }

/* ═══════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════ */
.dash-card {
    background: #fff;
    border-radius: 6px;
    padding: 12px 14px;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0,40,40,0.07);
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.dash-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,40,40,0.10); }
.dash-card.accent-left { border-left: 3px solid var(--card-accent, #14a897); }
.dash-card .card-icon {
    width: 34px; height: 34px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-size: .82rem;
    background: color-mix(in srgb, var(--card-accent, #14a897) 12%, white);
}
.dash-card .card-icon.lg { width: 36px; height: 36px; font-size: .88rem; }
.dash-card small.card-label {
    color: #6b7280; text-transform: uppercase; letter-spacing: .4px;
    font-size: .66rem; display: block; margin-bottom: 1px;
}
.dash-card .card-value {
    font-weight: 700; letter-spacing: -.3px; line-height: 1.2;
    font-size: .95rem;
    color: var(--card-accent, #14a897);
}
.dash-card .card-value.neutral { color: #1a3535; }
.dash-card .card-value.danger  { color: #e05252; }
.dash-card .card-value.warning-c { color: #d97706; }
.dash-card .card-sub { color: #9fbfbf; margin-top: 1px; font-size: .70rem; }
.dash-card .badge-notif {
    position: absolute; top: -5px; right: -5px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff; padding: 2px 6px; border-radius: 30px; font-size: .68rem;
    box-shadow: 0 2px 8px rgba(239,68,68,0.35); z-index: 10;
}
.dash-card .btn-card-action {
    border-radius: 5px; border: 1px solid var(--card-accent, #14a897);
    background: var(--card-accent, #14a897); color: #fff;
    padding: 3px 9px; font-size: .74rem; text-decoration: none; transition: all .15s;
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap; flex-shrink: 0;
}
.dash-card .btn-card-action:hover { background: transparent; color: var(--card-accent, #14a897); }

/* Verifikasi CTA button */
.btn-verif {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; border: none; border-radius: 6px; padding: 8px 14px;
    text-decoration: none; margin-top: 12px; transition: all .15s;
}
.btn-verif-warning { background: linear-gradient(135deg,#f59e0b,#d97706); color:#fff; border:none; box-shadow:0 3px 10px rgba(245,158,11,.30); }
.btn-verif-warning:hover { background: linear-gradient(135deg,#d97706,#b45309); color:#fff; }
.btn-verif-success { background: linear-gradient(135deg,#059669,#047857); color:#fff; border:none; box-shadow:0 3px 10px rgba(5,150,105,.30); }
.btn-verif-success:hover { background: linear-gradient(135deg,#047857,#065f46); color:#fff; }
.btn-verif-danger { background: linear-gradient(135deg,#ef4444,#dc2626); color:#fff; border:none; box-shadow:0 3px 10px rgba(239,68,68,.28); }
.btn-verif-danger:hover { background: linear-gradient(135deg,#dc2626,#b91c1c); color:#fff; }
.btn-verif-info { background: linear-gradient(135deg,#0ea5e9,#0284c7); color:#fff; border:none; box-shadow:0 3px 10px rgba(14,165,233,.28); }
.btn-verif-info:hover { background: linear-gradient(135deg,#0284c7,#0369a1); color:#fff; }

/* ═══════════════════════════════════════
   TABEL PENDING
═══════════════════════════════════════ */
.pending-table-card {
    background: #fff; border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,40,40,0.07);
    border: 1px solid rgba(0,0,0,0.05);
    border-top: 4px solid #f59e0b; overflow: hidden;
}
.pending-table-card .card-header {
    background: linear-gradient(135deg, #fffbeb, #fef9ee);
    border-bottom: 1px solid rgba(245,158,11,0.15); padding: 18px 22px;
}
.pending-table-card .card-body { padding: 0 22px 18px; }
.pending-table-card table thead th {
    border-bottom: 2px solid #f0f6f5; padding: 14px 10px; background: #fff;
}
.pending-table-card table tbody tr { border-bottom: 1px solid #f0f6f5; transition: background .12s; }
.pending-table-card table tbody tr:hover { background: #f8fdfb; }
.pending-table-card table tbody td { padding: 12px 10px; vertical-align: middle; }

.badge-pinjaman {
    background: linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e;
    padding: 4px 9px; border-radius: 20px; border: 1px solid rgba(245,158,11,0.3);
    display: inline-flex; align-items: center; gap: 4px;
}
.badge-iuran {
    background: linear-gradient(135deg,#e0f2fe,#bae6fd); color:#0c4a6e;
    padding: 4px 9px; border-radius: 20px; border: 1px solid rgba(14,165,233,0.3);
    display: inline-flex; align-items: center; gap: 4px;
}
.btn-verif-sm {
    background: linear-gradient(135deg,#059669,#047857); color:#fff; border:none;
    border-radius: 6px; padding: 5px 14px; text-decoration: none;
    transition: all .15s; display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 3px 8px rgba(5,150,105,0.25);
}
.btn-verif-sm:hover { background: linear-gradient(135deg,#047857,#065f46); color:#fff; }

/* ═══════════════════════════════════════
   INFO / SECTION CARDS
═══════════════════════════════════════ */
.info-card {
    background: #fff; border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,40,40,0.07);
    border: 1px solid rgba(0,0,0,0.05); overflow: hidden; height: 100%;
}
.info-card .info-card-header {
    background: linear-gradient(135deg,#f4fcfb,#eaf7f5);
    border-bottom: 1px solid rgba(20,168,151,0.1);
    padding: 14px 20px; display: flex; align-items: center; gap: 8px;
}
.info-card .info-card-body { padding: 16px 20px; }
.payment-list-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #f0f6f5;
}
.payment-list-item:last-child { border-bottom: none; }

/* ═══════════════════════════════════════
   KAS RT INFO
═══════════════════════════════════════ */
.kas-info-card {
    background: linear-gradient(135deg,#f4fcfb 0%,#eaf7f5 100%);
    border-radius: 6px; padding: 22px 26px;
    border: 1px solid rgba(20,168,151,0.15);
    box-shadow: 0 2px 12px rgba(11,122,110,0.08);
}

/* ═══════════════════════════════════════
   QUICK MENU
═══════════════════════════════════════ */
.quick-menu-card {
    background: #fff; border-radius: 6px; padding: 22px 16px;
    text-align: center; text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(0,40,40,0.07);
    border: 1px solid rgba(0,0,0,0.05); display: block; height: 100%;
    transition: transform .18s, box-shadow .18s;
}
.quick-menu-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,40,40,0.12); }
.quick-menu-card .qm-icon {
    width: 54px; height: 54px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    background: color-mix(in srgb, var(--qm-color, #14a897) 12%, white);
}
.quick-menu-card h6 { margin-bottom: 4px; }

/* ═══════════════════════════════════════
   MOBILE OVERRIDES
═══════════════════════════════════════ */
/* Mobile: pending table → card list */
.mobile-pending-list { display: none; }
.desktop-pending-table { display: block; }

@media (max-width: 767.98px) {

    /* Alert */
    .dash-alert-pending {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 14px 16px;
    }
    .dash-alert-pending .alert-icon-wrap { width: 40px; height: 40px; }
    .dash-alert-pending h5 { font-size: .95rem; }
    .dash-alert-pending .badge-total { display: none; }
    .dash-alert-pending .d-flex.gap-2 { flex-wrap: wrap; }
    .btn-alert-pinjaman, .btn-alert-iuran { flex: 1; justify-content: center; font-size: .82rem; padding: 8px 10px; }

    /* Stat cards: 2 kolom */
    .stat-row-1 > [class*='col-'],
    .stat-row-2 > [class*='col-'] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Stat card compact */
    .dash-card { padding: 13px 14px; }
    .dash-card small.card-label { font-size: .68rem; }
    .dash-card .card-value { font-size: 1.05rem !important; }
    .dash-card .card-sub { font-size: .72rem; }
    .dash-card .card-icon { width: 38px; height: 38px; }
    .dash-card .card-icon.lg { width: 40px; height: 40px; }
    .dash-card .btn-card-action { padding: 5px 10px; font-size: .78rem; }
    .btn-verif { font-size: .82rem; padding: 8px 10px; margin-top: 10px; }

    /* Pending table: hide, show cards */
    .desktop-pending-table { display: none !important; }
    .mobile-pending-list { display: flex !important; flex-direction: column; gap: 10px; padding: 12px; }
    .pending-table-card .card-body { padding: 0; }
    .pending-table-card .card-header { padding: 13px 16px; }
    .pending-table-card .card-header h5 { font-size: .9rem; }

    /* Mobile pending card item */
    .mob-pending-item {
        border: 1.5px solid #f1f3f5;
        border-radius: 10px;
        background: #fff;
        padding: 12px 14px;
    }
    .mob-pending-item .mp-top {
        display: flex; justify-content: space-between; align-items: flex-start;
        margin-bottom: 8px;
    }
    .mob-pending-item .mp-name { font-size: .87rem; font-weight: 700; color: #111827; }
    .mob-pending-item .mp-detail { font-size: .75rem; color: #6b7280; margin-top: 2px; }
    .mob-pending-item .mp-amount { font-size: .9rem; font-weight: 800; color: #059669; white-space: nowrap; }
    .mob-pending-item .mp-footer {
        display: flex; justify-content: space-between; align-items: center;
        padding-top: 9px; border-top: 1px solid #f3f4f6;
        gap: 8px;
    }
    .mob-pending-item .mp-meta { font-size: .73rem; color: #9ca3af; }

    /* Info cards: stack */
    .info-card .info-card-body { padding: 12px 14px; }
    .payment-list-item { padding: 8px 0; }

    /* Kas card */
    .kas-info-card { padding: 16px; }
    .kas-info-card .d-flex { flex-direction: column; gap: 12px !important; }
    .kas-info-card .btn-card-action { width: 100%; justify-content: center; }

    /* Quick menu: 2 kolom */
    .quick-menu-row > [class*='col-'] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .quick-menu-card { padding: 16px 10px; }
    .quick-menu-card .qm-icon { width: 44px; height: 44px; margin-bottom: 8px; }
    .quick-menu-card h6 { font-size: .82rem; margin-bottom: 2px; }
    .quick-menu-card small { font-size: .72rem; }
}

