/* Tombol ikon dengan nama yang muncul saat disorot.
 *
 * Ikon tanpa teks memang lebih ringkas, tetapi ia memindahkan beban ke ingatan
 * pengguna: gambar panah melingkar bisa berarti muat ulang, ulangi, atau putar.
 * Karena itu setiap tombol di sini wajib membawa namanya sendiri lewat data-tip,
 * dan nama yang sama juga dipasang sebagai aria-label supaya pembaca layar tidak
 * kehilangan apa pun.
 *
 * Tooltip ini memakai ::after, bukan atribut title bawaan peramban, karena title
 * baru muncul setelah jeda satu detik lebih dan tidak bisa diatur tampilannya.
 * Atribut title tetap dipasang sebagai cadangan bila CSS gagal dimuat.
 */

.tombol-ikon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* display: inline-flex di atas berbenturan dengan .hidden milik Tailwind — keduanya
 * sama-sama satu kelas, jadi yang menang tergantung urutan muat. Tombol "Keluar Kelas"
 * yang seharusnya tersembunyi sampai ada kelas aktif bisa muncul terus karenanya.
 * Aturan ini menutup celah itu tanpa bergantung pada urutan berkas. */
.tombol-ikon.hidden { display: none !important; }

.tombol-ikon > svg {
    width: 1.15rem;
    height: 1.15rem;
    pointer-events: none;
}

.tombol-ikon::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 60;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    white-space: nowrap;
    background: #0f172a;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    padding: 5px 9px;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .13s ease, transform .13s ease;
}

.tombol-ikon::before {
    content: "";
    position: absolute;
    z-index: 60;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    border: 5px solid transparent;
    border-top-color: #0f172a;
    opacity: 0;
    pointer-events: none;
    transition: opacity .13s ease, transform .13s ease;
}

.tombol-ikon:hover::after,
.tombol-ikon:hover::before,
.tombol-ikon:focus-visible::after,
.tombol-ikon:focus-visible::before,
/* Layar sentuh tidak punya hover sama sekali. Tanpa baris ini, nama tombolnya
 * tidak pernah bisa dimunculkan di HP — pengguna hanya melihat gambar. */
.tombol-ikon:active::after,
.tombol-ikon:active::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Tooltip di dekat tepi atas layar akan terpotong. Pasang data-tip-bawah agar
 * namanya muncul di bawah tombol. */
.tombol-ikon[data-tip-bawah]::after {
    bottom: auto;
    top: calc(100% + 8px);
}
.tombol-ikon[data-tip-bawah]::before {
    bottom: auto;
    top: calc(100% + 3px);
    border-top-color: transparent;
    border-bottom-color: #0f172a;
}

/* Sidebar gelap: tombol keluar dan sejenisnya butuh tooltip terang agar terbaca. */
.tombol-ikon.tip-terang::after {
    background: #f8fafc;
    color: #0f172a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.tombol-ikon.tip-terang::before { border-top-color: #f8fafc; }
.tombol-ikon.tip-terang[data-tip-bawah]::before {
    border-top-color: transparent;
    border-bottom-color: #f8fafc;
}

@media (prefers-reduced-motion: reduce) {
    .tombol-ikon::after,
    .tombol-ikon::before { transition: none; }
}