/* =======================================================
   Widgets & Cards — Style A Classic (Clean & Fixed)
======================================================= */

/* --- Stat Cards Umum --- */
.stat-card {
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.stat-card .text-muted {
    font-size: 13px;
}

.stat-card .h4 {
    font-size: 1.6rem;
}

/* --- Base Card Style --- */
.card {
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

/* --- Chart Card Layout --- */
.chart-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px;
    border: 1px solid rgba(0,0,0,0.06);
    
    /* FIX Grafik tenggelam */
    min-height: 330px;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chart-card h6 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* --- Canvas Fix (agar proporsional) --- */
.chart-card canvas {
    width: 100% !important;
    height: 230px !important;
}

/* --- Chart elements identifier --- */
#chartJamaah,
#chartAir,
#chartDonutJamaah {
    max-width: 100%;
}

/* --- Loading indicator (optional future feature) --- */
.chart-loading {
    position: relative;
}

.chart-loading::after {
    content: "Loading...";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 12px;
    color: #6b7280;
}

/* --- Small subtitle text --- */
.subtitle {
    margin-bottom: 0;
}

/* --- Live badge (jika dipakai di realtime sensor) --- */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #166534;
}

.live-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.35);
}

/* --- Tombol Aksi Mini (tabel dll) --- */
.action-buttons .btn-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    margin: 0 3px;
}

.action-buttons i {
    font-size: 14px;
}

.btn-icon:hover {
    transform: scale(1.06);
    transition: transform .15s ease;
}
