/*
 * Panel "daftar kosong" pada halaman index
 * (components/emptyState.blade.php).
 *
 * Bentuknya mengikuti kartu status pada css/error-page.css supaya kondisi
 * "belum ada data" terasa satu keluarga dengan halaman 403/404: ikon bulat
 * beraksen, judul Montserrat, lalu kalimat penjelas.
 *
 * Semua warna diturunkan dari --empty-state-color, jadi cukup menimpa satu
 * variabel itu kalau suatu halaman perlu nuansa berbeda.
 *
 * Dimuat global lewat layouts/app.blade.php.
 */

.empty-state {
    --empty-state-color: #dc3545;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed color-mix(in srgb, var(--empty-state-color), transparent 70%);
    border-radius: 15px;
    background-color: color-mix(in srgb, var(--empty-state-color), transparent 95%);
}

.empty-state-icon {
    width: 82px;
    height: 82px;
    margin-bottom: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    line-height: 1;
    background: color-mix(in srgb, var(--empty-state-color), transparent 88%);
    color: var(--empty-state-color);
}

.empty-state-title {
    font-family: var(--heading-font);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--empty-state-color);
    margin-bottom: 8px;
}

.empty-state-text {
    /* Dibatasi agar kalimat penjelas tidak melebar penuh di layar lebar. */
    max-width: 440px;
    margin-bottom: 0;
    font-size: .95rem;
    color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.empty-state-action {
    margin-top: 22px;
}

@media (max-width: 575px) {
    .empty-state {
        padding: 36px 18px;
    }

    .empty-state-icon {
        width: 68px;
        height: 68px;
        font-size: 28px;
    }

    .empty-state-title {
        font-size: 1.1rem;
    }
}