/* ---------- Sidebar / Drawer ---------- */
.paud-sidebar {
    width: 17rem;                    /* lebar drawer di mobile (maks. 85vw) */
    max-width: 85vw;
    flex-shrink: 0;                   /* shrink-0 */
    display: flex;                    /* flex */
    flex-direction: column;           /* flex-col */
    justify-content: flex-start;      /* justify-start: tidak ada lagi
                                          profile card di dasar sidebar,
                                          jadi jangan pakai justify-between
                                          yang menyisakan blank-space. */
    height: 100%;                     /* h-full */
    background-color: #fbfbfb;        /* bg-white */
    border-right: 1px solid #e2e8f0;  /* border-r border-slate-200 */

    /* Mobile: sidebar tampil sebagai drawer off-canvas di sisi kiri layar */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.paud-sidebar.open {
    transform: translateX(0);
    box-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.35);
}

.paud-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background-color: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.paud-sidebar-backdrop.show { opacity: 1; visibility: visible; }
body.paud-drawer-open { overflow: hidden; }

.paud-drawer-close {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border: none;
    border-radius: 0.5rem;
    background-color: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.paud-drawer-close:hover { background-color: #f1f5f9; color: #0f172a; }

@media (min-width: 768px) {
    .paud-sidebar {
        position: static;
        width: 16rem;
        max-width: none;
        transform: none;
        transition: none;
        box-shadow: none;
        z-index: auto;
    }
    .paud-sidebar-backdrop { display: none; }
    .paud-drawer-close { display: none; }
}

/* ---------- Logo Area ---------- */
.paud-logo-area {
    height: 5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}
.paud-logo-img { height: 3rem; width: 3rem; object-fit: contain; flex-shrink: 0; }
.paud-logo-text { min-width: 0; line-height: 1.25; }

/* 4 Okt 2026: judul logo berubah dari "PAUD" (4 huruf) menjadi
   "Administrasi Penkes" (20 huruf), jadi ukuran huruf diturunkan.

   Perhitungan ruang yang tersedia (desktop, sidebar 17rem):
     17rem - padding 1.25rem x 2 - logo 3rem - gap 0.75rem = 172px
   Pada 1.25rem (20px) teks "Administrasi Penkes" ≈ 208px, sehingga
   akan membungkus menjadi 2 baris. Karena .paud-logo-title memakai
   line-height tetap 2rem, dua baris itu (64px) ditambah baris
   "Kecamatan Tamansari" melampaui tinggi .paud-logo-area (5rem) dan
   sub-judul tergeser keluar area.

   0.9375rem (15px) ≈ 156px < 172px, jadi muat satu baris. white-space
   ::nowrap menjaga label tidak pernah terpotong / membungkus bila
   font sistem substituen sedikit lebih lebar. */
.paud-logo-title { font-size: 0.9375rem; line-height: 1.5rem; font-weight: 700; letter-spacing: -0.015em; color: #0f172a; white-space: nowrap; }
.paud-logo-sub { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- App Switcher (dropdown kustom, bukan <select> bawaan) ----------
   Tombol trigger meniru gaya select lama; popover mengikuti gaya dropdown
   dashboard (kartu putih rounded-xl + item hover abu). */
.paud-switcher { padding: 1rem 1.5rem; border-bottom: 1px solid #f1f5f9; }
.paud-switcher-label { display: block; margin-bottom: 0.5rem; font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.paud-switcher-field { position: relative; }
.paud-switcher-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background-color: #f8fafc;
    color: #334155;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.paud-switcher-btn:hover { background-color: #f1f5f9; }
.paud-switcher-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #3b82f6; }
.paud-switcher-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paud-switcher-caret { display: flex; align-items: center; color: #94a3b8; flex-shrink: 0; }
.paud-switcher-caret i { font-size: 0.875rem; line-height: 1.25rem; }
.paud-switcher-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.375rem;
    padding: 0.375rem;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15);
    z-index: 50;
}
.paud-switcher-menu[hidden] { display: none; }
.paud-switcher-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.paud-switcher-item:hover { background-color: #f8fafc; }
.paud-switcher-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paud-switcher-item.is-active { font-weight: 700; color: #0f172a; }
.paud-switcher-check { display: flex; align-items: center; color: #2563eb; flex-shrink: 0; }

/* ---------- Navigasi ---------- */
/* flex-1: menu mengisi sisa tinggi sidebar (dulu ruang bawah dipakai
   kartu profil; sekarang tidak ada lagi elemen mt-auto di bawah nav). */
.paud-nav-wrap { flex: 1 1 0%; overflow-y: auto; padding: 1.5rem 1rem; }
.paud-nav-wrap > * + * { margin-top: 2rem; }
.paud-nav-label { margin-bottom: 0.75rem; padding: 0 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.paud-nav > * + * { margin-top: 0.25rem; }
.paud-nav-group { padding-top: 0.5rem; }

.paud-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.paud-nav-item i { font-size: 1.25rem; line-height: 1.75rem; }
.paud-nav-item:hover { background-color: #f8fafc; color: #0f172a; }

/* State Aktif Halaman (Background Biru Muda, Teks Biru) */
.paud-nav-item.active { background-color: #eff6ff; color: #2563eb; font-weight: 600; }
.paud-nav-item.active:hover { background-color: #eff6ff; color: #2563eb; }

.paud-nav-group-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: #475569;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.paud-nav-group-btn:hover { background-color: #f8fafc; color: #0f172a; }
.paud-nav-group-label { display: flex; align-items: center; gap: 0.75rem; font-weight: 500; }
.paud-nav-group-label i { font-size: 1.25rem; line-height: 1.75rem; }

.paud-caret { font-size: 0.875rem; line-height: 1.25rem; transform: rotate(-90deg); transition: transform 0.2s ease; }
.paud-caret.open { transform: rotate(0deg); }

.paud-submenu { display: none; position: relative; padding: 0.25rem 0.75rem 0.25rem 2.75rem; }
.paud-submenu.open { display: block; }
.paud-submenu > * + * { margin-top: 0.25rem; }
.paud-submenu-line { position: absolute; left: 1.5rem; top: 0; bottom: 0; width: 1px; background-color: #e2e8f0; }

.paud-submenu-item {
    position: relative;
    z-index: 10;
    display: block;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}
.paud-submenu-item:hover { color: #2563eb; }
.paud-submenu-item.active-sub { color: #2563eb; font-weight: 600; }
.paud-submenu-item-flex { display: flex; align-items: center; justify-content: space-between; }
.paud-tick { position: absolute; left: -1.25rem; top: 50%; width: 0.75rem; border-top: 1px solid #e2e8f0; }
.paud-badge { padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 10px; font-weight: 700; background-color: #dfe9ff; color: #2563eb; }

/* ---------- User Profile Bottom ----------
   DIHAPUS 4 Okt 2026. Kartu profil (avatar + nama + email + tombol keluar)
   di dasar sidebar sudah dibuang dari components/sidebar.html dan dari
   markup sidebar yang di-hardcode di pages/penggunapaud.html, sehingga
   aturan .paud-profile* di bawah ini tidak lagi terpakai.
   Identitas pengguna (nama, foto, role) tetap tampil di topbar:
   components/navbar.html + js/navbar.js, dan logout tetap memakai
   window.paudLogout() dari item "Keluar" pada dropdown topbar. */

@media (max-width: 767px) {
    body.h-screen { height: 100dvh; }
    .paud-logo-area { height: 4rem; padding: 0 1rem; }
    /* Aturan #notifPanel (panel notifikasi topbar) dipindahkan ke
       css/navbar.css karena panel tersebut kini bagian dari navbar. */
    #paud-toast-container { left: 1rem; right: 1rem; top: 1rem; width: auto; max-width: none; transform: none; }
    .overflow-x-auto > table { min-width: 780px; }
}

/* ==========================================
   MENU "PENGGUNA PAUD" UNTUK ROLE USER / STAF (user_paud)
   ----------------------------------------------------------
   Class role-user-paud ditempelkan ke <body> oleh ../js/main.js
   (initUserRoleSidebar) begitu role dibaca dari Supabase Auth +
   baris user_profiles - bukan dari localStorage. Aturan ini
   menyembunyikan menu "Pengguna PAUD" di SEMUA halaman PAUD,
   sehingga menu tidak pernah terlihat sesaat (flicker) saat sidebar
   dirender dari cache lokalStorage lalu diganti markup segar.

   src/js/main.js hidePenggunaMenu() menerapkan lapis kedua secara
   langsung di DOM (display:none !important + aria-hidden), jadi menu
   tetap tersembunyi walau stylesheet ini belum termuat.
   ========================================== */
body.role-user-paud a[href*="penggunapaud"] {
    display: none !important;
}

/* Varian: bila item menu dibungkus <li> (markah lain / migrasi). */
body.role-user-paud li:has(a[href*="penggunapaud"]) {
    display: none !important;
}