/* ==========================================================================
   Sidebar bersama — satu-satunya gaya untuk partial _AppSidebar.
   Dimuat _Layout sesudah stylesheet halaman, di setiap halaman yang
   menampilkan sidebar. Perilakunya ada di wwwroot/js/app-shell.js.

   Pembagian tugas dengan stylesheet halaman:
   - Di sini: tampilan isi sidebar, keadaan terlipat, overlay, dan panel geser
     di layar kecil.
   - Di halaman: letak sidebar di desktop (grid pada pengadaan.css, fixed pada
     summary.css), lebar kerangka yang mengikuti --sidebar-width, serta
     tombol #sidebar-collapse dan #menu-button di header halaman.

   Token warna dan radius (--card, --border, --accent, --radius-md, dst.)
   berasal dari stylesheet halaman; nilainya sama di semua halaman.
   ========================================================================== */


@media (min-width: 768px) {
    .app[data-sidebar-collapsed="true"] { --sidebar-width: 68px; }
}

.sidebar {
    z-index: 100;
    min-width: 0;
    padding: 16px 12px;
    background: var(--card);
    border-right: 1px solid var(--border);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    margin-bottom: 18px;
    padding: 0 10px;
}

.sidebar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--foreground);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.sidebar .logo-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--primary);
    flex: none;
    color: var(--primary-foreground);
    font-size: 13px;
}

/* Tombol tutup panel: hanya ada selama sidebar menjadi panel geser. */
.sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--foreground);
    cursor: pointer;
}

.sidebar-close:hover { background: var(--accent); }

.sidebar .nav-section { margin-bottom: 24px; }

.sidebar .nav-label {
    height: 15px;
    margin-bottom: 7px;
    padding: 0 10px;
    overflow: hidden;
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    white-space: nowrap;
}

.sidebar .nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--radius-md);
    overflow: hidden;
    color: var(--sidebar-foreground);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.sidebar .nav-icon { flex: none; }

.sidebar .nav-item:hover { background: var(--accent); color: var(--foreground); text-decoration: none; }
.sidebar .nav-item.active { background: var(--accent); color: var(--foreground); }

/* Ikon menu 16 px seperti Sidebar shadcn (size-4), sama dengan IMFARES. */
.sidebar .nav-icon { width: 16px; height: 16px; }

.sidebar .sidebar-footer {
    position: absolute;
    right: 12px;
    bottom: 16px;
    left: 12px;
}

.sidebar .profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: var(--radius-md);
}

.sidebar .profile:hover { background: var(--accent); }

.sidebar .profile .avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--muted);
    color: var(--foreground);
    font-size: 12px;
    font-weight: 600;
}

.sidebar .profile-info { flex: 1; min-width: 0; }
/* Nama di profil sidebar membuka halaman Kelola Profil. */
.sidebar a.profile-info { color: inherit; text-decoration: none; }
.sidebar a.profile-info:hover .profile-name { text-decoration: underline; }

.sidebar .profile-name,
.sidebar .profile-email {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar .profile-name { font-size: 13px; font-weight: 500; }

.sidebar .profile-email {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 12px;
}

.sidebar .profile-logout { display: flex; margin: 0; }

/* Keluar (akun) atau Masuk (tamu). */
.profile-action {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

.profile-action:hover { background: var(--accent); color: var(--foreground); }

.overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--overlay);
}

/* --- Terlipat jadi kolom ikon (desktop) ---------------------------------- */

/* Seperti sidebar IMFARES (Sidebar shadcn collapsible="icon"): lebar
   menyempit, teks terpotong oleh lebarnya sendiri dan memudar, label bagian
   naik menghilang. Elemen tetap di tempat supaya bisa dianimasikan; logo dan
   ikon menu tidak bergeser. Kolom ikon di dalam 68 px adalah 48 px. */
@media (min-width: 768px) {
    .sidebar { overflow: hidden; }
    .sidebar-header { overflow: hidden; }

    .app[data-sidebar-collapsed="true"] .sidebar { padding-inline: 10px; }
    .app[data-sidebar-collapsed="true"] .sidebar-header { padding: 0 9px; }
    .app[data-sidebar-collapsed="true"] .logo-text,
    .app[data-sidebar-collapsed="true"] .nav-text { opacity: 0; }
    .app[data-sidebar-collapsed="true"] .nav-label { margin-top: -22px; opacity: 0; pointer-events: none; }
    .app[data-sidebar-collapsed="true"] .nav-item { width: 48px; padding: 0 16px; }
    .app[data-sidebar-collapsed="true"] .profile-info { display: none; }
    .app[data-sidebar-collapsed="true"] .sidebar-footer { right: 10px; left: 10px; }
    .app[data-sidebar-collapsed="true"] .profile { flex-direction: column; gap: 6px; padding: 4px; }
}

/* Animasi lipat hanya setelah app-shell.js menandai data-sidebar-ready,
   supaya lebar awal dari cookie tidak ikut dianimasikan saat halaman dibuka.
   200 ms linear, sama dengan IMFARES. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .app[data-sidebar-ready="true"] { transition: grid-template-columns .2s linear, padding-left .2s linear; }
    .app[data-sidebar-ready="true"] .sidebar { transition: width .2s linear, padding .2s linear; }
    .app[data-sidebar-ready="true"] .sidebar-header { transition: padding .2s linear; }
    .app[data-sidebar-ready="true"] .nav-item { transition: width .2s linear, padding .2s linear, background-color .15s ease, color .15s ease; }
    .app[data-sidebar-ready="true"] .nav-label { transition: margin .2s linear, opacity .2s linear; }
    .app[data-sidebar-ready="true"] .logo-text,
    .app[data-sidebar-ready="true"] .nav-text { transition: opacity .2s linear; }
}

/* --- Panel geser (layar kecil) -------------------------------------------
   Sidebar tidak pernah dihilangkan: tanpa panel ini halaman tidak punya
   jalan ke modul lain. */

@media (max-width: 767.98px) {
    .sidebar-close { display: inline-flex; }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 268px;
        height: 100dvh;
        box-shadow: 10px 0 30px rgba(0, 0, 0, .08);
        transform: translateX(-100%);
        visibility: hidden;
    }

    .sidebar[data-state="open"] {
        transform: none;
        visibility: visible;
    }

    /* Target sentuh untuk tautan dan tombol di dalam panel. */
    .sidebar .nav-item { height: 44px; padding: 0 12px; }
    .sidebar-close { width: 44px; height: 44px; }

    /* Kunci gulir halaman selama panel terbuka. */
    body:has(.sidebar[data-state="open"]) { overflow: hidden; }
}

@media (prefers-reduced-motion: no-preference) {
    .sidebar .nav-item,
    .sidebar .profile,
    .profile-action,
    .sidebar-close { transition: background-color .15s ease, color .15s ease; }

    .sidebar { transition: transform .26s cubic-bezier(.32, .72, 0, 1), visibility .26s; }
    .overlay:not([hidden]) { animation: app-sidebar-overlay-in .2s ease both; }

    @keyframes app-sidebar-overlay-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

@media (hover: none) {
    .sidebar .nav-item:not(.active):hover,
    .sidebar .profile:hover { background: transparent; }
}

@media print {
    .sidebar,
    .overlay { display: none !important; }
}

/* --- Pindah halaman: sidebar diam, konten berganti ----------------------
   Navigasi tetap muat ulang penuh, tetapi peramban yang mendukung View
   Transitions lintas dokumen (Chrome/Edge 126+, Safari 18.2+) menahan
   sidebar di tempatnya dan hanya memudarkan konten. Peramban lain memuat
   ulang seperti biasa. Hanya di desktop: di layar kecil sidebar adalah panel
   tersembunyi yang tidak perlu ditahan.

   Opt-in @view-transition sendiri ditulis inline di <head> _Layout, bukan
   di sini: berkas ini bisa belum termuat saat halaman baru pertama kali
   menghitung style, dan transisinya lalu dibatalkan. */

@media (min-width: 768px) {
    .sidebar { view-transition-name: app-sidebar; }
}

/* Sidebar lama dan baru identik: tampilkan yang baru langsung tanpa
   pudar, supaya tidak terlihat dimuat ulang. */
::view-transition-old(app-sidebar) { display: none; }
::view-transition-new(app-sidebar) { animation: none; }
::view-transition-group(app-sidebar) { animation-duration: 0s; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .16s; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}