/* 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; }
}

/* ==========================================================================
   Sidebar: dapat digulir dan dikuncupkan
   ==========================================================================
   Satu aturan untuk SISWA, GURU, ADMIN, dan ORANG TUA.

   Mode kuncup bukan "sidebar sempit berisi potongan teks". Ia adalah icon rail:
   setiap menu menyisakan satu ikon, badge notifikasi tetap terlihat, dan nama menu
   muncul sebagai tooltip. JavaScript hanya menormalkan markup lama/dinamis; seluruh
   tata letaknya tetap ditentukan CSS di sini. */

#dashboard > aside,
#teacher-dashboard > aside,
#admin-dashboard > aside,
#parent-dashboard > aside {
    flex-direction: column;
    overflow: hidden;
    transition: width .18s ease, flex-basis .18s ease, max-width .18s ease;
}

/* Hanya daftar menunya yang menggulir. Kepala dan kaki tetap di tempat. */
#dashboard > aside > nav,
#teacher-dashboard > aside > nav,
#admin-dashboard > aside > nav,
#parent-dashboard > aside > nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

#dashboard > aside > nav::-webkit-scrollbar,
#teacher-dashboard > aside > nav::-webkit-scrollbar,
#admin-dashboard > aside > nav::-webkit-scrollbar,
#parent-dashboard > aside > nav::-webkit-scrollbar { width: 6px; }

#dashboard > aside > nav::-webkit-scrollbar-thumb,
#teacher-dashboard > aside > nav::-webkit-scrollbar-thumb,
#admin-dashboard > aside > nav::-webkit-scrollbar-thumb,
#parent-dashboard > aside > nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   ICON RAIL
   -------------------------------------------------------------------------- */

.sp-kuncup #dashboard > aside,
.sp-kuncup #teacher-dashboard > aside,
.sp-kuncup #admin-dashboard > aside,
.sp-kuncup #parent-dashboard > aside {
    width: 4.5rem !important;
    flex-basis: 4.5rem !important;
    max-width: 4.5rem !important;
    min-width: 4.5rem !important;
}

.sp-kuncup #dashboard > aside > nav,
.sp-kuncup #teacher-dashboard > aside > nav,
.sp-kuncup #admin-dashboard > aside > nav,
.sp-kuncup #parent-dashboard > aside > nav {
    padding-left: .45rem !important;
    padding-right: .45rem !important;
    overflow-x: visible;
}

/* Raw text-node tidak bisa diberi display:none. Karena itu ukuran huruf tombol dibuat
   nol, lalu hanya span ikon dan badge yang dipulihkan. Cara ini sekaligus menangani
   tombol admin/orang-tua lama tanpa menulis ulang onclick atau atribut datanya. */
.sp-kuncup #dashboard > aside > nav button,
.sp-kuncup #dashboard > aside > nav a,
.sp-kuncup #teacher-dashboard > aside > nav button,
.sp-kuncup #teacher-dashboard > aside > nav a,
.sp-kuncup #admin-dashboard > aside > nav button,
.sp-kuncup #admin-dashboard > aside > nav a,
.sp-kuncup #parent-dashboard > aside > nav button,
.sp-kuncup #parent-dashboard > aside > nav a {
    position: relative;
    width: 100% !important;
    min-height: 3rem !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: .25rem !important;
    padding-right: .25rem !important;
    gap: 0 !important;
    text-align: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible;
}

/* Label eksplisit dan sisa penanda heuristik versi lama tidak boleh membawa ikon ikut
   hilang. Container yang memuat ikon tidak diberi kelas ini oleh sidebar_kuncup.js. */
.sp-kuncup .sp-sidebar-label,
.sp-kuncup .sp-sidebar-teks,
.sp-kuncup .sp-sidebar-dekorasi {
    display: none !important;
}

/* Container dari markup lama tetap boleh flex, tetapi text-node di dalamnya mewarisi
   font-size:0. Kelas wrapper dipasang JavaScript sehingga tidak membutuhkan :has(). */
.sp-kuncup aside nav .sp-sidebar-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.sp-kuncup aside nav .sp-sidebar-icon {
    display: inline-flex !important;
    width: 2.6rem !important;
    height: 2.6rem !important;
    min-width: 2.6rem !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: .9rem !important;
    background: rgba(255, 255, 255, .075) !important;
    color: #fff !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.sp-kuncup aside nav button:hover .sp-sidebar-icon,
.sp-kuncup aside nav a:hover .sp-sidebar-icon,
.sp-kuncup aside nav button:focus-visible .sp-sidebar-icon,
.sp-kuncup aside nav a:focus-visible .sp-sidebar-icon {
    background: rgba(255, 255, 255, .16) !important;
}

/* Badge tetap informatif tetapi tidak menggeser ikon dari tengah. */
.sp-kuncup aside nav .sp-sidebar-badge {
    display: inline-flex !important;
    position: absolute !important;
    top: .2rem !important;
    right: .15rem !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1rem !important;
    min-height: 1rem !important;
    padding: 0 .2rem !important;
    font-size: .6rem !important;
    line-height: 1 !important;
    z-index: 2;
}
.sp-kuncup aside nav .sp-sidebar-badge.hidden { display: none !important; }

/* Hilangkan indentasi tree saat ruang horizontal tinggal 72 px. Semua level tetap dapat
   dipakai sebagai ikon dan dibedakan lewat tooltip. */
.sp-kuncup #student-submenu-ruang-kelas,
.sp-kuncup [id^="student-kelas-sub-"],
.sp-kuncup #teacher-nav-class-workspace,
.sp-kuncup #teacher-nav-bank-workspace,
.sp-kuncup #teacher-sidebar-class-tree,
.sp-kuncup [data-teacher-sidebar-class-panel] {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
}

/* Kepala rail tidak boleh memaksa tulisan StudentPro/Ruang Siswa/Admin Console menjadi
   beberapa baris. Pada dashboard tanpa tombol collapse di kepala, gantikan branding
   dengan emblem SP kecil. Guru mempertahankan tombol collapse milik resize sidebar. */
.sp-kuncup #dashboard > aside > div:first-child,
.sp-kuncup #admin-dashboard > aside > div:first-child,
.sp-kuncup #parent-dashboard > aside > div:first-child,
.sp-kuncup #teacher-dashboard > aside > div:first-child {
    min-height: 4.5rem;
    padding: .6rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sp-kuncup #dashboard > aside > div:first-child > *,
.sp-kuncup #admin-dashboard > aside > div:first-child > *,
.sp-kuncup #parent-dashboard > aside > div:first-child > * {
    display: none !important;
}

.sp-kuncup #dashboard > aside > div:first-child::after,
.sp-kuncup #admin-dashboard > aside > div:first-child::after,
.sp-kuncup #parent-dashboard > aside > div:first-child::after {
    content: 'SP';
    display: inline-flex;
    width: 2.65rem;
    height: 2.65rem;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .05em;
}

/* Footer berisi status/versi dalam bentuk teks panjang; pada rail ia hanya menghabiskan
   ruang dan membuat overflow. Status aplikasi tetap tersedia di isi dashboard. */
.sp-kuncup #dashboard > aside > div:last-child,
.sp-kuncup #admin-dashboard > aside > div:last-child,
.sp-kuncup #parent-dashboard > aside > div:last-child,
.sp-kuncup #teacher-dashboard > aside > div:last-child {
    display: none !important;
}

/* Isi halaman ikut bergeser. Konsol pengajar memakai flex sehingga mengikuti lebar
   sidebar sendiri; tiga dashboard fixed-sidebar perlu offset eksplisit. */
@media (min-width: 1024px) {
    .sp-kuncup #student-dashboard-shell,
    .sp-kuncup #admin-dashboard > main,
    .sp-kuncup #parent-dashboard > div {
        padding-left: 4.5rem !important;
        margin-left: 0 !important;
    }
}

/* Saat kuncup, nama menu muncul di kanan rail. */
.sp-kuncup aside [data-menu-nama] { position: relative; }
.sp-kuncup aside [data-menu-nama]::after {
    content: attr(data-menu-nama);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: #0f172a;
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    padding: 5px 9px;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
    z-index: 70;
}
.sp-kuncup aside [data-menu-nama]:hover::after,
.sp-kuncup aside [data-menu-nama]:focus-visible::after { opacity: 1; }