/* =====================================================================
   navbar.css - Gaya khusus Navbar / Topbar PAUD
   ---------------------------------------------------------------------
   Di-load di setiap halaman PAUD via:
       <link rel="stylesheet" href="../css/navbar.css">

   Markup navbar sendiri berada di components/navbar.html dan dimuat oleh
   js/navbar.js ke dalam #navbar-container. File ini hanya berisi gaya,
   bukan logika.

   Catatan penting:
   - Navbar memakai utility class Tailwind, jadi stylesheet ini hanya
    raya aturan yang tidak bisa diekspresikan lewat class di markup.
   - Aturan #notifPanel di bawah dipindahkan dari sidebarpaud.css karena
     panel notifikasi milik navbar (bukan sidebar). Warna/utility tetap
     berasal dari Tailwind agar tampilan tidak berubah.
   ===================================================================== */

/* ---------- Placeholder selagi components/navbar.html di-fetch ----------
   Mencegah content "berganti" sesaat (CLS) ketika markup navbar belum
   selesai dimuat: container langsung menggambar baris dengan tinggi yang
   sama seperti <header> aslinya. */
#navbar-container {
    flex-shrink: 0;
}

#navbar-container:empty {
    height: 4rem;
    background-color: #fbfbfb;
    border-bottom: 1px solid #e2e8f0;
}

@media (min-width: 768px) {
    #navbar-container:empty {
        height: 5rem;
    }
}

/* ---------- Judul & sub-judul halaman ----------
   Memastikan teks dinamis dari data-title/data-subtitle tidak melebihi
   ruang header dan selalu terpotong rapi. */
[data-paud-navbar-title],
[data-paud-navbar-subtitle] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Anti-kedip profil (foto & nama pojok kanan) ----------
   Alur refresh: #navbar-container kosong -> markup di-fetch -> render
   cache localStorage (sinkron, instan) -> fetch Supabase (async).
   Tanpa ini, nilai cadangan markup ("PA" / "Pengguna" / lingkaran kosong)
   sempat ter-cat satu frame sebelum foto asli tiba.
   - #profileButton berawal dengan class `paud-profile-pend` (opacity 0)
     langsung di components/navbar.html; navbar.js menghapusnya tepat
     setelah render profil pertama, sehingga yang pertama kali terlihat
     sudah data cache, bukan nilai cadangan. Opacity (bukan display)
     dipakai supaya tidak ada pergeseran layout (CLS).
   - Selama tertunda, avatar memakai shimmer skeleton sebagai penanda
     muat, bukan foto default/kosong. */
#profileButton {
    transition: opacity 0.22s ease;
}

#profileButton.paud-profile-pend {
    opacity: 0;
}

#profileButton.paud-profile-pend #paudNavbarAvatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 255, 255, 0.75) 50%,
        transparent 80%
    );
    animation: paud-avatar-shimmer 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes paud-avatar-shimmer {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    #profileButton {
        transition: none;
    }
    #profileButton.paud-profile-pend #paudNavbarAvatar::after {
        animation: none;
    }
}

/* ---------- Panel notifikasi ----------
   Di layar kecil panel dibuat fixed agar tidak tertutup sidebar/drawer
   dan tetap memenuhi lebar layar. (Aturan ini berasal dari
   sidebarpaud.css; dipindah ke sini karena #notifPanel adalah milik navbar.) */
@media (max-width: 767px) {
    #notifPanel {
        position: fixed;
        top: 4.25rem;
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
    }
}

/* ---------- Dropdown profil ----------
   Membatasi lebar teks nama/role agar panel tidak melebar saat nama
   pengguna panjang. */
#profileButton [data-paud-navbar-user-name],
#profileButton [data-paud-navbar-user-role],
#profilePanel [data-paud-navbar-user-name-panel],
#profilePanel [data-paud-navbar-user-role-panel] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 9rem;
}

#profilePanel [data-paud-navbar-user-name-panel],
#profilePanel [data-paud-navbar-user-role-panel] {
    max-width: 100%;
}

/* ---------- Global search di topbar ----------
   Dropdown-nya dibuat oleh js/livesearchbar.js
   (window.PAUD_GLOBAL_SEARCH); gaya dasarnya ada di
   pencarianpakar.css. Yang ditambahkan di sini hanya
   penyesuaian khusus topbar. */
[data-paud-navbar-search] .paud-global-search-dropdown {
    /* Di topbar dropdown boleh lebih lebar daripada input (w-72) supaya
       badge kategori + judul tidak sering terpotong. */
    min-width: 22rem;
    /* denser supaya lebih banyak modul terlihat tanpa scroll panjang */
    max-height: 26rem;
}

/* Input global search mewarisi utility Tailwind; samakan tinggi & radius
   dengan tombol lonceng di sebelahnya agar baris navbar tetap rata. */
[data-paud-navbar-search] .paud-global-search-input {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}