/*
 * Penanda asal-usul data pada card halaman publik (lihat komponen Blade
 * resources/views/components/data-badge.blade.php).
 *
 * Sengaja dibuat kecil dan bernada rendah: penanda ini harus selalu terbaca,
 * tapi tidak boleh mencuri perhatian dari angka yang jadi isi utama card.
 */
.data-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: help;
}

.data-badge i {
    font-size: .82rem;
}

.data-badge--contoh {
    background-color: #fff4e0;
    border-color: #f5d9a8;
    color: #9a6108;
}

.data-badge--parsial {
    background-color: #fdf3f2;
    border-color: #f2c9c4;
    color: #a5453b;
}

.data-badge--statis {
    background-color: #eef1f6;
    border-color: #d5dce7;
    color: #566175;
}

/*
 * Varian ikon-saja — dipakai di header card. Labelnya pindah ke tooltip supaya
 * judul card tetap jadi elemen paling menonjol di header; keterangan lengkap
 * tiap penanda ada sekali di banner atas halaman.
 */
.data-badge--icon {
    gap: 0;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.data-badge--icon i {
    font-size: .9rem;
}

/* Legenda di banner atas memakai varian berlabel — sedikit dinaikkan agar
   sejajar dengan garis teks di sekitarnya. */
.data-note .data-badge,
.alert .data-badge {
    vertical-align: middle;
}

/* Di card-header yang sempit, biarkan badge turun baris alih-alih menekan judul. */
.card-header .data-badge {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .data-badge {
        font-size: .64rem;
    }
    .data-badge span {
        display: inline;
    }
}

/*
 * Di header card (flex + justify-content-between), dua penanda atau lebih akan
 * disebar rata: penanda pertama jatuh ke tengah header. Margin otomatis pada
 * penanda pertama mendorong semua penanda berkumpul di pojok kanan atas.
 */
.card-header > .data-badge--icon {
    margin-left: auto;
}

.card-header > .data-badge--icon + .data-badge--icon {
    margin-left: 0;
}