/* ============================================================
   SIDEBAR — Sestocre Harajest
   Arah desain: "Aurora Glass", warna DISATUKAN (permintaan user:
   "ngeblend sama warna sidebar nya, tanpa mencolok").
   ------------------------------------------------------------
   - SELALU gelap (berpijak dari var(--sidebar)) di kedua tema
     aplikasi, teks putih/terang.
   - Dasar sidebar dilapisi "aurora mesh": blob gradient blur
     besar yang drift pelan di belakang konten (pseudo-element,
     TANPA elemen HTML baru) — HANYA satu keluarga warna biru
     (var(--sb-accent-*), turunan var(--primary)) supaya menyatu
     dengan warna sidebar sendiri, bukan macam-macam hue.
   - SATU aksen biru untuk SEMUA kategori menu (sebelumnya tiap
     seksi—Utama/Operasional/Keuangan/Lainnya—punya hue beda;
     user minta disatukan biar tidak "ramai"/tidak nyatu dengan
     sidebar). Atribut data-accent masih ada di markup (lihat
     includes/sidebar.php) tapi sengaja TIDAK dipetakan ke CSS
     apa pun lagi — dorman, aman dipakai lagi nanti kalau perlu
     diferensiasi per kategori tanpa harus ubah PHP.
   - Item AKTIF WAJIB tidak "nyaru" (permintaan user) walau
     warnanya disatukan & diredam: dipastikan lewat DUA marker
     independen — (1) accent bar kiri solid 3px yang selalu
     terlihat apa pun kondisinya, (2) fill + border yang jelas
     lebih terang dari item diam. Glow/bayangan dibuat MODEST
     (bayangan elevasi gelap, bukan halo warna terang menyebar)
     supaya tidak "mencolok".
   - Ikon aktif di-fill gradient (background-clip:text, target
     <i> DAN <i>::before karena glyph Boxicons/FontAwesome
     dirender lewat ::before — lihat catatan §ICON-FIX).
   - Collapsed (~92px): pill aktif → ring tipis di sekeliling
     ikon (redup, bukan glow terang).
   - Submenu: max-height transition + reveal stagger per sub-item.
   ============================================================ */

/* ---------- Token lokal aksen (scoped ke .sidebar) ---------- */
.sidebar{
    /* SATU keluarga biru untuk seluruh sidebar — accent-a ditautkan
       ke var(--primary) (identitas biru aplikasi sendiri) supaya
       highlight terasa "milik" sidebar/app, bukan warna asing. */
    --sb-accent-a:var(--primary);
    --sb-accent-b:#60a5fa;
    --sb-accent-c:#93c5fd;

    --sb-item-radius:12px;
    --sb-pill-radius:14px;

    /* hierarki teks putih */
    --sb-text:rgba(255,255,255,.76);
    --sb-text-strong:#ffffff;
    --sb-icon:rgba(255,255,255,.58);
    --sb-muted:rgba(255,255,255,.38);

    background:
        linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 24%),
        linear-gradient(190deg,
            color-mix(in srgb, var(--sidebar) 90%, #000 10%) 0%,
            var(--sidebar) 42%,
            color-mix(in srgb, var(--sidebar) 88%, #000 12%) 100%);
    color:var(--sb-text-strong);
    width:248px;
    height:100vh;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    z-index:1000;
    isolation:isolate;
    overflow:hidden;                     /* kontainer blob aurora; nav scroll sendiri */
    border-right:1px solid rgba(255,255,255,.08);
    /* Aurora Prisma: rim-light 1px di dalam → tepi kaca ter-bevel, bukan potongan keras. */
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        inset -1px 0 0 rgba(255,255,255,.05),
        6px 0 40px -12px rgba(0,0,0,.55);
    /* Aurora Prisma: frost lebih dalam (18→24) + saturate & brightness tipis. */
    -webkit-backdrop-filter:blur(24px) saturate(140%) brightness(1.02);
    backdrop-filter:blur(24px) saturate(140%) brightness(1.02);
    transition:width .3s cubic-bezier(.4,0,.2,1),
               padding .3s cubic-bezier(.4,0,.2,1),
               transform .3s cubic-bezier(.4,0,.2,1);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.sidebar *{ box-sizing:border-box; }

/* ---------- AURORA MESH — blob blur besar, drift pelan.
   Satu keluarga biru saja (bukan biru+violet+cyan) agar menyatu
   dengan warna dasar sidebar, tidak terasa "ramai". ---------- */
.sidebar::before,
.sidebar::after{
    content:"";
    position:absolute;
    pointer-events:none;
    z-index:0;
    filter:blur(60px);
    will-change:transform;
}
.sidebar::before{
    inset:-18% -55% auto -45%;
    height:62%;
    background:
        radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--sb-accent-a) 42%, transparent), transparent 62%),
        radial-gradient(circle at 78% 35%, color-mix(in srgb, var(--sb-accent-b) 26%, transparent), transparent 60%);
    opacity:.55;
    animation:sbAuroraA 22s ease-in-out infinite alternate;
}
.sidebar::after{
    inset:auto -50% -22% -40%;
    height:56%;
    background:
        radial-gradient(circle at 25% 100%, color-mix(in srgb, var(--sb-accent-a) 26%, transparent), transparent 62%),
        radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--sb-accent-b) 22%, transparent), transparent 58%);
    opacity:.45;
    animation:sbAuroraB 26s ease-in-out infinite alternate;
}
/* Aurora Prisma: gerak arc 3-stop (0/50/100) di dua sumbu — kedalaman kebaca
   sbg gerak melengkung pelan, bukan geser bolak-balik. */
@keyframes sbAuroraA{
    0%  { transform:translate3d(0,0,0) scale(1); }
    50% { transform:translate3d(4%,3%,0) scale(1.06); }
    100%{ transform:translate3d(2%,6%,0) scale(1.09); }
}
@keyframes sbAuroraB{
    0%  { transform:translate3d(0,0,0) scale(1); }
    50% { transform:translate3d(-5%,-1%,0) scale(1.07); }
    100%{ transform:translate3d(-3%,-4%,0) scale(1.1); }
}
/* ---------- AURORA PRISMA — bidang blob parallax ke-3 (dimmer, jalur & tempo
   sendiri) memberi depth-plane tambahan; elemen nyata (bukan pseudo) karena
   ::before/::after sudah dipakai dua blob pertama. Di-drop di mobile & reduced-
   motion (lihat blok masing-masing). ---------- */
.sb-blob{
    position:absolute;
    inset:12% -50% auto -35%;
    height:48%;
    z-index:0;
    pointer-events:none;
    filter:blur(70px);
    opacity:.32;
    will-change:transform;
    background:
        radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--sb-accent-c) 30%, transparent), transparent 60%),
        radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--sb-accent-a) 22%, transparent), transparent 62%);
    animation:sbAuroraC 34s ease-in-out infinite alternate;
}
@keyframes sbAuroraC{
    0%  { transform:translate3d(0,0,0) scale(1); }
    50% { transform:translate3d(-3%,5%,0) scale(1.08); }
    100%{ transform:translate3d(4%,-3%,0) scale(1.04); }
}
/* ---------- AURORA PRISMA — kaca ber-tekstur: grain feTurbulence tipis (~5%)
   + specular top-sheen. Grain menghapus banding gradasi biru pada blob & kasih
   kesan "frosted glass" beneran. Statis (tanpa animasi), GPU-murah. ---------- */
.sb-glass{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.045;
    filter:grayscale(1);              /* jaga grain tetap netral, bukan bintik warna */
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:150px 150px;
}

/* konten sidebar harus di atas mesh aurora + bidang kaca Prisma */
.sidebar > .sidebar-top,
.sidebar > .sb-search,
.sidebar > nav{ position:relative; z-index:1; }

/* ============================================================
   HEADER / BRAND (tetap di atas, tidak ikut scroll)
   ============================================================ */
.sidebar-top{
    flex-shrink:0;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:24px 16px;
}
.sidebar-top::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--sb-accent-a) 40%, transparent) 30%,
        color-mix(in srgb, var(--sb-accent-b) 35%, transparent) 65%,
        transparent);
    opacity:.6;
}

/* legacy wrapper (masih dipakai di beberapa halaman) */
.logo{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
}

.sidebar-brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
    min-width:0;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sidebar-brand:hover{ transform:translateY(-1px); }

/* Logo Sidebar */
.brand-logo{
    position:relative;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sidebar-brand:hover .brand-logo{
    transform:translateY(-1px) scale(1.04);
}

.logo-img{
    width:62px;
    height:62px;
    object-fit:contain;
    flex-shrink:0;
    position:relative;
}

/* End Logo Sidebar */

.brand-text{
    display:flex;
    flex-direction:column;
    min-width:0;
    max-width:216px;
    opacity:1;
    overflow:hidden;
    white-space:nowrap;
    /* Sama persis .3s cubic-bezier(.4,0,.2,1) dengan transisi width .sidebar —
       biar teks masuk/keluar kerasa satu gerakan sama pergeseran logo pas
       sidebar di-collapse/expand, bukan animasi terpisah sendiri. */
    transition:max-width .3s cubic-bezier(.4,0,.2,1),
               opacity .22s ease,
               transform .3s cubic-bezier(.4,0,.2,1);
}

.brand-name{
    display:flex;
    flex-direction:column;
    line-height:1.08;
    font-family:'Poppins', sans-serif;
    font-weight:800;
    letter-spacing:-.4px;
    /* Parent tidak lagi ikut animasi — masing-masing child (bn-1/bn-2) punya
       animasi masuk sendiri, satu kali saja (bukan infinite), dengan stagger
       supaya "Sestocre" masuk duluan baru disusul "Harajest". Karena sidebar
       ini di-render ulang server-side tiap pindah halaman, animasi otomatis
       "replay" tiap navigasi.
       2026-07-14: timing final via angka eksak dari user — Sestocre 900ms,
       Harajest 1300ms, disambung langsung (delay Harajest = durasi Sestocre)
       biar satu gerakan mulus, ga ada jeda kosong ataupun tabrakan.
       2026-07-14 (revisi): animasinya sendiri baru dipicu lewat class
       body.pl-ready (assets/js/page-loader.js) begitu #pageLoader mulai
       hilang, bukan langsung dari paint — lihat catatan di bawah .bn-2. */
}
.brand-name .bn-1{
    font-size:21px;
    color:#ffffff;
    opacity:0;
    transform:translateX(-36px);
    text-shadow:0 0 0 rgba(255,255,255,0);
}
.brand-name .bn-2{
    font-size:15px;
    font-weight:600;
    margin-top:2px;
    background:linear-gradient(90deg, var(--sb-accent-c), var(--sb-accent-b), var(--sb-accent-c));
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    opacity:0;
    transform:translateX(-36px);
    background-position:0% 50%;
}
/* Animasi baru jalan setelah #pageLoader mulai hilang (body.pl-ready, lewat
   assets/js/page-loader.js) — bukan dari paint, karena overlay loader (z-index
   99999) nutupin sidebar duluan dan animasinya keburu kelar diam-diam di
   belakang layar sebelum overlay-nya hilang. */
body.pl-ready .brand-name .bn-1{
    animation:bnEnterGlow .9s cubic-bezier(.16,1,.3,1) 1 both;
}
body.pl-ready .brand-name .bn-2{
    animation:bnEnterShimmer 1.3s cubic-bezier(.16,1,.3,1) .9s 1 both;
}
/* Sestocre: geser+fade masuk dari kiri, 900ms (dipicu body.pl-ready, bukan
   dari paint), lalu sekali saja ada glow putih lembut yang lewat dan balik
   flat — bukan loop. */
@keyframes bnEnterGlow{
    0%   { opacity:0; transform:translateX(-36px); text-shadow:0 0 0 rgba(255,255,255,0); }
    45%  { opacity:1; transform:translateX(0);      text-shadow:0 0 0 rgba(255,255,255,0); }
    70%  { text-shadow:0 0 14px rgba(255,255,255,.5); }
    100% { opacity:1; transform:translateX(0);      text-shadow:0 0 0 rgba(255,255,255,0); }
}
/* Harajest: mulai persis saat Sestocre selesai (900ms), lalu 1300ms geser+fade
   masuk dari kiri, lalu sekali shimmer nyapu gradiennya lalu balik ke posisi
   awal (tampilan diam tetap sama persis, tidak ada pergeseran gradient
   permanen). */
@keyframes bnEnterShimmer{
    0%   { opacity:0; transform:translateX(-36px); background-position:0% 50%; }
    45%  { opacity:1; transform:translateX(0);      background-position:0% 50%; }
    70%  { background-position:100% 50%; }
    100% { opacity:1; transform:translateX(0);      background-position:0% 50%; }
}
@media (prefers-reduced-motion: reduce){
    .brand-name .bn-1,
    .brand-name .bn-2{
        /* !important: menang lawan body.pl-ready ...  yang spesifisitasnya lebih
           tinggi dari selector ini. */
        animation:none !important;
        opacity:1;
        transform:none;
    }
    .brand-name .bn-1{ text-shadow:0 0 0 rgba(255,255,255,0); }
    .brand-name .bn-2{ background-position:0% 50%; }
}

.brand-tagline{
    display:inline-flex;
    align-items:center;
    gap:4px;
    width:fit-content;
    max-width:100%;
    font-size:8px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:color-mix(in srgb, var(--sb-accent-c) 85%, #fff 15%);
    margin-top:8px;
    padding:3px 7px 3px 6px;
    border-radius:999px;
    background:color-mix(in srgb, var(--sb-accent-a) 18%, transparent);
    border:1px solid color-mix(in srgb, var(--sb-accent-a) 32%, transparent);
}
.brand-tagline::before{
    content:"";
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--sb-accent-b);
    box-shadow:0 0 5px color-mix(in srgb, var(--sb-accent-a) 65%, transparent);
    flex-shrink:0;
    animation:bnDotPulse 3.2s ease-in-out infinite;
}
@keyframes bnDotPulse{
    0%,100%{ opacity:1;  box-shadow:0 0 5px color-mix(in srgb, var(--sb-accent-a) 65%, transparent); }
    50%    { opacity:.55; box-shadow:0 0 9px color-mix(in srgb, var(--sb-accent-a) 90%, transparent); }
}

/* ============================================================
   AREA NAV (flex:1 + scroll internal, scrollbar tipis)
   ============================================================ */
.sidebar nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:14px 10px 24px;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb, var(--sb-accent-a) 26%, transparent) transparent;
    /* Aurora Prisma — scroll-fade: item memudar halus di tepi atas/bawah saat
       lewat di bawah header & footer, bukan terpotong keras. */
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 16px), transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 16px), transparent 100%);
}
.sidebar nav::-webkit-scrollbar{ width:5px; }
.sidebar nav::-webkit-scrollbar-track{ background:transparent; }
.sidebar nav::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--sb-accent-a) 28%, transparent);
    border-radius:6px;
}
.sidebar nav:hover::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--sb-accent-a) 48%, transparent);
}
.sidebar nav::-webkit-scrollbar-thumb:hover{
    background:color-mix(in srgb, var(--sb-accent-a) 65%, transparent);
}

.sidebar nav ul{
    list-style:none;
    margin:0;
    padding:0;
}
.sidebar nav > ul{
    display:flex;
    flex-direction:column;
    gap:5px;
}

/* ============================================================
   LABEL SEKSI (.nav-section) — dot kecil + divider tipis, satu
   warna biru redup (bukan tinted per-kategori lagi).
   ============================================================ */
.nav-section{
    display:none;
}
.nav-section > span{ display:none; }

/* ============================================================
   ITEM NAV (link dasar)
   ============================================================ */
.sidebar nav a{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 12px;
    border-radius:var(--sb-item-radius);
    border:1.5px solid transparent;      /* transparan by default → aktif tak "loncat" */
    font-size:14.5px;
    font-weight:600;
    letter-spacing:.1px;
    line-height:1.25;
    color:var(--sb-text);
    text-decoration:none;
    white-space:nowrap;
    transition:background .2s ease, color .18s ease, transform .2s cubic-bezier(.4,0,.2,1),
               box-shadow .2s ease, border-color .2s ease;
}
.sidebar nav a i{
    font-size:19px;
    width:23px;
    min-width:23px;
    text-align:center;
    flex-shrink:0;
    color:var(--sb-icon);
    transition:color .18s ease, transform .2s cubic-bezier(.4,0,.2,1), filter .2s ease;
}
.nav-label{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* hover — micro-lift + tint biru sangat lembut (transform/background/
   box-shadow saja, ringan; TIDAK "mencolok" — sekadar penanda kursor). */
.sidebar nav a:hover:not(.active){
    background:color-mix(in srgb, var(--sb-accent-a) 10%, rgba(255,255,255,.05));
    color:var(--sb-text-strong);
    transform:translateX(3px);
    box-shadow:0 3px 14px -4px rgba(0,0,0,.4);
}
.sidebar nav a:hover:not(.active) i{
    color:rgba(255,255,255,.92);
    transform:scale(1.08);
}

/* ============================================================
   ITEM AKTIF (top-level & toggle) — PENANDA GANDA supaya TIDAK
   PERNAH "nyaru": (1) accent bar kiri solid, selalu terlihat
   apa pun kondisinya; (2) fill+border yang jelas lebih terang
   dari item diam. Glow dibuat MODEST (elevasi gelap, bukan halo
   warna terang menyebar) — permintaan user: "jangan mencolok".
   ============================================================ */
.sidebar nav > ul > li > a.active,
.sidebar nav > ul > li > .submenu-toggle.active{
    color:var(--sb-text-strong);
    font-weight:700;
    /* Aurora Prisma — jewel pill: glaze radial terkonsentrasi di tepi kiri (dari
       arah lightpipe bar) di atas fill dasar tipis → pill terasa "membiaskan"
       cahaya keluar dari bar, bukan kotak tint rata. */
    background:
        radial-gradient(130% 100% at 0% 50%, color-mix(in srgb, var(--sb-accent-a) 28%, transparent), transparent 62%),
        color-mix(in srgb, var(--sb-accent-a) 12%, transparent);
    border-color:color-mix(in srgb, var(--sb-accent-a) 30%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 6px 22px -12px rgba(2,6,23,.6),
        0 0 0 1px rgba(255,255,255,.05);
    -webkit-backdrop-filter:blur(8px) saturate(115%);
    backdrop-filter:blur(8px) saturate(115%);
}
/* accent bar — marker utama "ini halaman aktif", independen dari fill */
.sidebar nav > ul > li > a.active::before,
.sidebar nav > ul > li > .submenu-toggle.active::before{
    content:"";
    position:absolute;
    left:4px;
    top:50%;
    transform:translateY(-50%);
    width:3px;
    height:16px;
    border-radius:3px;
    /* Aurora Prisma — lightpipe: inti terang + bloom lembut (tetap modest, bukan
       neon), ujung membulat → seperti batang kaca menyala, marker "kamu di sini". */
    background:linear-gradient(180deg, var(--sb-accent-c), var(--sb-accent-a));
    box-shadow:
        0 0 8px color-mix(in srgb, var(--sb-accent-a) 60%, transparent),
        0 0 3px color-mix(in srgb, var(--sb-accent-c) 70%, transparent);
}
.sidebar nav > ul > li > a.active:hover,
.sidebar nav > ul > li > .submenu-toggle.active:hover{
    transform:none;                       /* pill aktif diam, tidak ikut micro-lift hover */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 5px 16px -6px rgba(2,6,23,.55),
        0 0 0 1px rgba(255,255,255,.07);
}

/* ---------- §ICON-FIX -----------------------------------------
   Boxicons (bx-*) & Font Awesome merender glyph lewat pseudo-
   elemen ::before pada <i> (content di-set di sana oleh CSS
   library-nya), BUKAN sebagai text node langsung di <i>. Karena
   background-clip:text hanya meng-clip ke "kotak teks" milik
   elemen yang benar-benar memilikinya, trik gradient-fill HARUS
   diulang pada <i>::before juga — kalau hanya di <i>, ikon akan
   tampak kosong/transparan (tidak ada teks untuk di-clip di <i>
   itu sendiri). Pola ini dipakai di semua state aktif di bawah. */
/* IKON AKTIF (fix 2026-07-20): ikon di app ini = Lucide via CSS mask +
   background-color:currentColor (lihat icons.css). Jadi warnanya ditentukan
   `color` doang — CUKUP set color. JANGAN pernah set `background`/`background:none`
   di sini: itu bakal menghapus fill mask → ikon aktif HILANG total (bug lama:
   background:none + trik background-clip:text sisa era font-icon). accent-c solid
   + bloom tetap terlihat jewel & selalu tampil. */
.sidebar nav > ul > li > a.active i,
.sidebar nav > ul > li > .submenu-toggle.active i{
    color:var(--sb-accent-c);
    filter:drop-shadow(0 0 6px color-mix(in srgb, var(--sb-accent-a) 45%, transparent));
    transform:none;
}
/* panah tetap terang solid (bukan gradient, biar tidak "berebut" fokus dgn ikon) */
.sidebar nav > ul > li > .submenu-toggle.active .submenu-arrow{
    color:rgba(255,255,255,.85);
}

/* ============================================================
   SUBMENU (Finance / Produksi / Sales Analytics)
   ============================================================ */
.has-submenu{ position:relative; }

.has-submenu > .submenu-toggle{
    display:flex;
    align-items:center;
    cursor:pointer;
    user-select:none;
    outline:none;
}

/* panah dropdown */
.has-submenu .submenu-arrow{
    margin-left:auto;
    width:auto;
    min-width:0;
    font-size:18px;
    color:var(--sb-muted);
    transition:transform .32s cubic-bezier(.4,0,.2,1), color .2s ease;
    flex-shrink:0;
}
.has-submenu:hover .submenu-arrow{ color:rgba(255,255,255,.65); }
.has-submenu.open .submenu-arrow{
    transform:rotate(180deg);
    color:rgba(255,255,255,.85);
}

/* sorot lembut saat grup terbuka tapi halaman bukan yang aktif */
.has-submenu.open > .submenu-toggle:not(.active){
    background:color-mix(in srgb, var(--sb-accent-a) 8%, rgba(255,255,255,.04));
    color:var(--sb-text-strong);
}
.has-submenu.open > .submenu-toggle:not(.active) i{ color:rgba(255,255,255,.88); }

/* panel submenu — buka/tutup via .open. Pakai max-height (bukan trik
   grid-template-rows: 0fr/1fr) karena trik itu butuh SATU child pembungkus
   agar baris grid bisa dikompres bersama — <ul class="submenu"><li>...</li></ul>
   tanpa wrapper akan membuat tiap <li> jadi baris implisit terpisah sehingga
   0fr tidak mengecilkan semuanya. Daripada menambah markup wrapper, dipilih
   max-height (aman, tanpa perlu ubah PHP) + opacity & translateY supaya
   tetap terasa seperti "reveal" modern, bukan sekadar kotak yang membesar,
   DITAMBAH reveal stagger per sub-item (transition-delay bertingkat di
   .submenu li a, murah karena cuma transform/opacity) untuk kesan "cascade"
   yang lebih hidup saat grup dibuka. */
.submenu{
    list-style:none;
    margin:4px 0 8px;
    padding:0;
    position:relative;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-4px);
    transition:max-height .38s cubic-bezier(.4,0,.2,1),
               opacity .26s ease,
               transform .3s cubic-bezier(.4,0,.2,1);
}
.has-submenu.open .submenu{
    max-height:640px;
    opacity:1;
    transform:translateY(0);
}

/* rail: garis vertikal penghubung, biru redup */
.submenu::before{
    content:"";
    position:absolute;
    left:23.5px;
    top:2px;
    bottom:8px;
    width:1.5px;
    background:linear-gradient(180deg,
        color-mix(in srgb, var(--sb-accent-a) 35%, transparent),
        transparent);
    border-radius:2px;
}

/* sub-item */
.submenu li{ position:relative; }
.submenu li a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8.5px 8px 8.5px 30px;
    font-size:13.5px;
    font-weight:500;
    color:rgba(255,255,255,.62);
    text-decoration:none;
    border-radius:var(--sb-item-radius);
    border:1.5px solid transparent;
    margin:2px 0;
    white-space:nowrap;
    opacity:0;
    transform:translateX(-6px);
    transition:background .18s ease, color .18s ease, transform .28s cubic-bezier(.34,1.56,.64,1),
               opacity .24s ease;
}
.submenu li a i{
    font-size:16.5px;
    width:18px;
    min-width:18px;
    text-align:center;
    flex-shrink:0;
    color:rgba(255,255,255,.44);
    transition:color .18s ease;
}
.submenu li a:hover{
    background:color-mix(in srgb, var(--sb-accent-a) 9%, rgba(255,255,255,.04));
    color:#ffffff;
    transform:translateX(2px);
}
.submenu li a:hover i{ color:rgba(255,255,255,.88); }

/* reveal cascade: saat grup dibuka, sub-item fade+slide masuk bertingkat */
.has-submenu.open .submenu li a{
    opacity:1;
    transform:translateX(0);
}
.has-submenu.open .submenu li:nth-child(1) a{ transition-delay:.03s; }
.has-submenu.open .submenu li:nth-child(2) a{ transition-delay:.06s; }
.has-submenu.open .submenu li:nth-child(3) a{ transition-delay:.09s; }
.has-submenu.open .submenu li:nth-child(4) a{ transition-delay:.12s; }
.has-submenu.open .submenu li:nth-child(5) a{ transition-delay:.15s; }
.has-submenu.open .submenu li:nth-child(6) a{ transition-delay:.18s; }
.has-submenu.open .submenu li:nth-child(7) a{ transition-delay:.21s; }
.has-submenu.open .submenu li:nth-child(n+8) a{ transition-delay:.24s; }

/* sub-item aktif — accent bar tipis + fill redup, senada parent tapi
   lebih ringan (hierarki: sub-item < item top-level). */
.submenu li a.active{
    background:color-mix(in srgb, var(--sb-accent-a) 14%, transparent);
    border-color:color-mix(in srgb, var(--sb-accent-a) 26%, transparent);
    color:#ffffff;
    font-weight:600;
}
/* Titik penanda dipakai box-shadow (halo tembus pandang), BUKAN border solid yang coba
   menyamai warna background sidebar (bug lama: background sidebar itu gradient aurora yang
   drift/animasi, jadi border 2.5px solid var(--sidebar) nyaris tidak pernah pas sama persis
   dgn warna di baliknya — hasilnya keliatan seperti kotak/ring ganjil, bukan titik bulat
   rapi). Halo translucent otomatis "menyatu" dgn background apa pun di baliknya. */
.submenu li a.active::before{
    content:"";
    position:absolute;
    left:19px;
    top:50%;
    transform:translateY(-50%);
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--sb-accent-c);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--sb-accent-a) 22%, transparent),
        0 0 6px color-mix(in srgb, var(--sb-accent-a) 55%, transparent);
    /* Aurora Prisma — halo bernafas pelan (dimatikan di prefers-reduced-motion). */
    animation:sbSubPulse 3.4s ease-in-out infinite;
}
@keyframes sbSubPulse{
    0%,100%{ box-shadow:
        0 0 0 3px color-mix(in srgb, var(--sb-accent-a) 20%, transparent),
        0 0 6px color-mix(in srgb, var(--sb-accent-a) 48%, transparent); }
    50%    { box-shadow:
        0 0 0 4px color-mix(in srgb, var(--sb-accent-a) 28%, transparent),
        0 0 11px color-mix(in srgb, var(--sb-accent-a) 78%, transparent); }
}
.submenu li a.active i{
    color:var(--sb-accent-c);
}

/* ============================================================
   AURORA PRISMA — QUICK-FILTER MENU (frosted search)
   '/' fokus, Esc bersihin, di rail collapsed jadi tombol ikon.
   ============================================================ */
.sb-search{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:8px;
    margin:14px 13px 10px;      /* beri napas dari header brand di atas (bukan mepet) */
    padding:0 10px 0 8px;
    height:40px;
    border-radius:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sb-search:focus-within{
    border-color:color-mix(in srgb, var(--sb-accent-b) 55%, transparent);
    background:rgba(255,255,255,.07);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3),
               0 0 0 3px color-mix(in srgb, var(--sb-accent-a) 22%, transparent);
}
.sb-search-ico{
    display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; flex-shrink:0; padding:0;
    border:0; background:transparent; cursor:text;
    color:rgba(255,255,255,.55); font-size:17px;
}
.sb-search-input{
    flex:1 1 auto; min-width:0;
    border:0; outline:none; background:transparent;
    color:var(--sb-text-strong);
    font-family:inherit; font-size:13px; font-weight:500; letter-spacing:.1px;
}
.sb-search-input::placeholder{ color:rgba(255,255,255,.42); }
.sb-search-kbd{
    flex-shrink:0; line-height:1;
    font-size:10px; font-weight:700;
    color:rgba(255,255,255,.5);
    border:1px solid rgba(255,255,255,.16);
    border-radius:5px; padding:2px 5px;
    background:rgba(255,255,255,.04);
}
.sb-search-clear{
    display:none;
    align-items:center; justify-content:center;
    width:22px; height:22px; flex-shrink:0; padding:0;
    border:0; border-radius:6px; cursor:pointer;
    background:rgba(255,255,255,.06); color:rgba(255,255,255,.7); font-size:15px;
    transition:background .15s ease, color .15s ease;
}
.sb-search-clear:not([hidden]){ display:flex; }
.sb-search-clear:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* empty-state saat filter tak menemukan menu apa pun */
.sb-search-empty{
    margin:8px 12px; padding:16px 10px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    text-align:center; font-size:12.5px; color:rgba(255,255,255,.45);
}
.sb-search-empty i{ font-size:22px; opacity:.6; }

/* item/section yang di-hide oleh filter benar-benar hilang (menang atas
   display:flex milik .nav-section) */
.sidebar nav [hidden]{ display:none !important; }

/* ============================================================
   TOMBOL CIUTKAN/LEBARKAN — fab bulat "nempel" di garis tepi kanan
   sidebar, tengah tinggi layar (2026-07-22, gantiin footer profil yang
   dihapus krn sudah ada profil di navbar). SENGAJA elemen fixed di LUAR
   <aside> (lihat includes/sidebar.php), bukan di dalam — .sidebar sendiri
   overflow:hidden (kontainer blob aurora), kalau taruh di dalam & nongol
   keluar separuh bakal kepotong. Posisi `left` disamakan manual dgn lebar
   .sidebar tiap state (248/92px) via sibling selector, sama kayak lebar
   .sidebar sendiri yang juga hardcoded (bukan var), lihat komentar di atas.
   ============================================================ */
.sb-collapse-fab{
    position:fixed;
    top:50%;
    left:248px;
    transform:translate(-50%,-50%);
    z-index:1001;
    width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:none;
    background:transparent;
    color:rgba(255,255,255,.65);
    font-size:15px; cursor:pointer;
    box-shadow:none;
    transition:left .3s cubic-bezier(.4,0,.2,1), color .18s ease, transform .3s cubic-bezier(.4,0,.2,1);
}
.sb-collapse-fab:hover{
    color:#fff;
}
.sb-collapse-fab i{ transition:transform .3s cubic-bezier(.4,0,.2,1); }
#sidebar.collapsed ~ .sb-collapse-fab{ left:92px; }
#sidebar.collapsed ~ .sb-collapse-fab i{ transform:rotate(180deg); }

/* ============================================================
   COLLAPSED (rail ikon, ~92px) — ring tipis di sekeliling ikon
   aktif, redup (bukan glow terang) supaya tidak "mencolok".
   ============================================================ */
.sidebar.collapsed{ width:92px; }

/* AURORA PRISMA — di rail collapsed: search jadi tombol ikon, footer avatar-only */
.sidebar.collapsed .sb-search{
    width:44px; margin:14px auto 10px; padding:0;   /* diturunin dikit dari divider brand (permintaan user) */
    justify-content:center;
    box-shadow:none;
}
.sidebar.collapsed .sb-search-input,
.sidebar.collapsed .sb-search-kbd,
.sidebar.collapsed .sb-search-clear{ display:none; }
.sidebar.collapsed .sb-search-ico{ width:100%; height:40px; cursor:pointer; color:rgba(255,255,255,.7); }
.sidebar.collapsed .sb-search-empty{ display:none; }

.sidebar.collapsed .sidebar-top{
    padding:24px 0;
    justify-content:center;
}
.sidebar.collapsed .sidebar-top::after{ left:22px; right:22px; }
.sidebar.collapsed .logo{ justify-content:center; }
.sidebar.collapsed .sidebar-brand{
    justify-content:center;
    gap:0;
}
.sidebar.collapsed .brand-text{
    max-width:0;
    opacity:0;
    transform:translateX(-8px);
}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .submenu,
.sidebar.collapsed .submenu-arrow{ display:none; }


.sidebar.collapsed nav{ padding:10px 10px 22px; }
.sidebar.collapsed nav > ul{ gap:5px; }

.sidebar.collapsed nav a{
    justify-content:center;
    gap:0;
    padding:12px 0;
    border-radius:var(--sb-pill-radius);
}
.sidebar.collapsed nav a i{
    width:auto;
    min-width:0;
}
.sidebar.collapsed nav a:hover:not(.active){ transform:translateY(-2px); }

/* item aktif collapsed → accent bar dipindah jadi ring tipis (bar kiri
   tidak relevan saat ikon di-center) + fill redup, senada versi terbuka */
.sidebar.collapsed nav > ul > li > a.active::before,
.sidebar.collapsed nav > ul > li > .submenu-toggle.active::before{ display:none; }
.sidebar.collapsed nav > ul > li > a.active,
.sidebar.collapsed nav > ul > li > .submenu-toggle.active{
    background:color-mix(in srgb, var(--sb-accent-a) 16%, transparent);
    box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--sb-accent-a) 45%, transparent),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 4px 14px -6px rgba(2,6,23,.55);
}
/* ikon aktif collapsed: putih solid + glow redup. Ikon = mask+currentColor,
   jadi cukup `color` (JANGAN background:none — bikin ikon hilang). */
.sidebar.collapsed nav > ul > li > a.active i,
.sidebar.collapsed nav > ul > li > .submenu-toggle.active i{
    color:#ffffff;
    filter:drop-shadow(0 0 4px color-mix(in srgb, var(--sb-accent-a) 45%, transparent));
}

/* ============================================================
   RAIL FLYOUT — popout submenu saat sidebar diciutkan (mode rail).
   Niru referensi user: hover ikon di rail → panel isi submenu nongol
   ke kanan (grup Finance/Vendor/Inventory dst), item tunggal → tooltip
   label ringkas. Elemen #sbFlyout DILEMPAR ke <body> oleh assets/js/
   sidebar.js (BUKAN anak .sidebar) — .sidebar overflow:hidden (kontainer
   blob aurora) + nav-nya scroll sendiri, jadi panel yang nongol ke kanan
   pasti kepotong kalau di dalam. position:fixed di body = lolos semua clip.
   Selalu gelap (base var(--sidebar)) senada sidebar di kedua tema aplikasi.
   ============================================================ */
.sb-flyout{
    /* Token aksen di-redeklarasi di sini karena #sbFlyout dilempar ke <body>
       (di luar .sidebar), jadi tak mewarisi --sb-accent-* yang di-scope ke
       .sidebar. Nilai identik supaya biru-nya persis sama dgn sidebar. */
    --sb-accent-a:var(--primary);
    --sb-accent-b:#60a5fa;
    --sb-accent-c:#93c5fd;

    position:fixed;
    z-index:1200;
    left:-9999px;                        /* ditaruh JS; jauh dulu biar tak kedip */
    top:0;
    min-width:216px;
    max-width:284px;
    padding:9px;
    border-radius:16px;
    isolation:isolate;                   /* stack context lokal utk glow ::after */
    /* Frosted aurora glass — resep dasar sama dgn .sidebar (top-sheen + gradasi
       190deg berpijak var(--sidebar)) supaya panel terasa "sepotong sidebar
       yang mengambang", bukan kartu gelap generik. */
    background:
        linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 26%),
        linear-gradient(190deg,
            color-mix(in srgb, var(--sidebar) 90%, #000 10%) 0%,
            var(--sidebar) 55%,
            color-mix(in srgb, var(--sidebar) 88%, #000 12%) 100%);
    border:1px solid rgba(255,255,255,.10);
    /* rim-light 1px di dalam (tepi kaca ter-bevel) + elevasi dalam, sama pola
       box-shadow sidebar. */
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 20px 54px -14px rgba(2,6,23,.72),
        0 4px 14px -8px rgba(2,6,23,.6);
    -webkit-backdrop-filter:blur(22px) saturate(150%) brightness(1.02);
    backdrop-filter:blur(22px) saturate(150%) brightness(1.02);
    color:rgba(255,255,255,.85);
    opacity:0;
    visibility:hidden;
    transform:translateX(-8px) scale(.97);
    transform-origin:left center;
    transition:opacity .17s ease,
               transform .2s cubic-bezier(.16,1,.3,1),
               visibility .17s;
    pointer-events:none;
}
.sb-flyout.open{
    opacity:1;
    visibility:visible;
    transform:translateX(0) scale(1);
    pointer-events:auto;
}
/* Aurora glow — semburat biru lembut di sudut kiri-atas (arah rail), niru mesh
   aurora sidebar tanpa animasi (murah, transient). Di bawah konten. */
.sb-flyout::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    z-index:0;
    background:
        radial-gradient(120% 82% at 0% 0%, color-mix(in srgb, var(--sb-accent-a) 22%, transparent), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--sb-accent-b) 12%, transparent), transparent 60%);
    opacity:.7;
}
/* jembatan tak-terlihat menutup gap rail↔panel supaya hover tak putus pas
   kursor menyeberang (tanpa ini pointer bisa "jatuh" di sela 12px). */
.sb-flyout::before{
    content:"";
    position:absolute;
    left:-16px;
    top:0;
    bottom:0;
    width:16px;
    z-index:1;
}
/* konten di atas glow ::after */
.sb-flyout-title,
.sb-flyout-list{ position:relative; z-index:1; }

.sb-flyout-title{
    position:relative;
    font-family:'Poppins', sans-serif;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.3px;
    color:#fff;
    padding:6px 10px 9px 15px;
    white-space:nowrap;
}
/* grup: lightpipe accent bar kecil di kiri judul (sama motif marker aktif
   sidebar) + garis pemisah tipis di bawah. */
.sb-flyout:not(.sb-flyout--single) .sb-flyout-title{
    border-bottom:1px solid rgba(255,255,255,.09);
    margin-bottom:6px;
}
.sb-flyout:not(.sb-flyout--single) .sb-flyout-title::before{
    content:"";
    position:absolute;
    left:4px;
    top:calc(50% - 4px);
    transform:translateY(-50%);
    width:3px;
    height:13px;
    border-radius:3px;
    background:linear-gradient(180deg, var(--sb-accent-c), var(--sb-accent-a));
    box-shadow:
        0 0 8px color-mix(in srgb, var(--sb-accent-a) 60%, transparent),
        0 0 3px color-mix(in srgb, var(--sb-accent-c) 70%, transparent);
}
/* item tunggal → judul jadi tooltip ringkas: tanpa daftar, tanpa bar, tanpa
   lebar minimum, teks di-center vertikal enak. */
.sb-flyout--single{ min-width:0; padding:5px; }
.sb-flyout--single .sb-flyout-title{ padding:6px 12px; }

.sb-flyout-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}
.sb-flyout-list a{
    display:flex;
    align-items:center;
    gap:11px;
    padding:9px 11px;
    border-radius:11px;
    font-size:13.5px;
    font-weight:500;
    line-height:1.2;
    color:rgba(255,255,255,.7);
    text-decoration:none;
    white-space:nowrap;
    border:1.5px solid transparent;
    transition:background .18s ease, color .18s ease,
               transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
}
.sb-flyout-list a i{
    font-size:16.5px;
    width:19px;
    min-width:19px;
    text-align:center;
    flex-shrink:0;
    color:rgba(255,255,255,.5);
    transition:color .18s ease, transform .2s cubic-bezier(.4,0,.2,1), filter .2s ease;
}
/* hover — micro-lift + tint biru lembut, sama rasa dgn item nav sidebar. */
.sb-flyout-list a:hover{
    background:color-mix(in srgb, var(--sb-accent-a) 12%, rgba(255,255,255,.05));
    color:#fff;
    transform:translateX(3px);
    box-shadow:0 3px 14px -6px rgba(2,6,23,.5);
}
.sb-flyout-list a:hover i{ color:rgba(255,255,255,.95); transform:scale(1.08); }
/* aktif — jewel pill: glaze radial dari tepi kiri + fill tipis + ikon accent-c
   ber-glow, persis motif pill aktif sidebar. */
.sb-flyout-list a.active{
    background:
        radial-gradient(130% 100% at 0% 50%, color-mix(in srgb, var(--sb-accent-a) 26%, transparent), transparent 62%),
        color-mix(in srgb, var(--sb-accent-a) 12%, transparent);
    border-color:color-mix(in srgb, var(--sb-accent-a) 30%, transparent);
    color:#fff;
    font-weight:600;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 4px 16px -8px rgba(2,6,23,.55);
}
.sb-flyout-list a.active:hover{ transform:none; }   /* pill aktif diam */
.sb-flyout-list a.active i{
    color:var(--sb-accent-c);
    filter:drop-shadow(0 0 6px color-mix(in srgb, var(--sb-accent-a) 45%, transparent));
}

/* Reveal cascade — sub-item fade+slide masuk bertingkat saat panel terbuka,
   niru .has-submenu.open .submenu li a. Pakai animation (bukan transition)
   supaya pasti main walau elemen baru dibuat & .open diset sekaligus (transition
   butuh paint state awal dulu). fill backwards: tahan state awal selama delay,
   lalu revert ke base setelah selesai (jadi hover transform tetap bebas). */
@keyframes sbFlyItemIn{
    from{ opacity:0; transform:translateX(-9px); }
    to  { opacity:1; transform:translateX(0); }
}
.sb-flyout.open .sb-flyout-list li a{
    animation:sbFlyItemIn .3s cubic-bezier(.16,1,.3,1) backwards;
}
.sb-flyout.open .sb-flyout-list li:nth-child(1) a{ animation-delay:.02s; }
.sb-flyout.open .sb-flyout-list li:nth-child(2) a{ animation-delay:.05s; }
.sb-flyout.open .sb-flyout-list li:nth-child(3) a{ animation-delay:.08s; }
.sb-flyout.open .sb-flyout-list li:nth-child(4) a{ animation-delay:.11s; }
.sb-flyout.open .sb-flyout-list li:nth-child(5) a{ animation-delay:.14s; }
.sb-flyout.open .sb-flyout-list li:nth-child(6) a{ animation-delay:.17s; }
.sb-flyout.open .sb-flyout-list li:nth-child(7) a{ animation-delay:.2s; }
.sb-flyout.open .sb-flyout-list li:nth-child(n+8) a{ animation-delay:.23s; }

/* di layar sentuh / tanpa hover presisi & di mobile: matikan flyout (paradigma
   off-canvas penuh dipakai di sana, bukan rail). */
@media (max-width:768px){
    .sb-flyout{ display:none !important; }
}
/* hormati preferensi kurangi gerak (flyout di luar .sidebar, jadi blok
   reduced-motion sidebar tak menjangkaunya — tambahkan di sini). */
@media (prefers-reduced-motion:reduce){
    .sb-flyout,
    .sb-flyout *{
        animation:none !important;
        transition-duration:.01ms !important;
    }
    .sb-flyout-list a{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   TOMBOL HAMBURGER (#menu-toggle) + navbar helper
   ============================================================ */
#menu-toggle{
    width:40px;
    height:40px;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
    color:#ffffff;
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#menu-toggle:hover{
    background:color-mix(in srgb, var(--sb-accent-a) 18%, rgba(255,255,255,.08));
    border-color:color-mix(in srgb, var(--sb-accent-b) 45%, transparent);
    color:var(--primary);
    box-shadow:0 4px 16px -4px color-mix(in srgb, var(--sb-accent-a) 35%, transparent);
    transform:translateY(-1px);
}

.navbar-left{
    display:flex;
    align-items:center;
    gap:12px;
}

/* ============================================================
   MOBILE — off-canvas overlay (.sidebar.open) + backdrop
   ============================================================ */
body.sidebar-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.55);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    z-index:900;
}

@media (max-width:768px){
    .sidebar{
        position:fixed;
        left:0;
        top:0;
        height:100vh;
        height:100dvh;
        transform:translateX(-100%);
        box-shadow:0 0 48px rgba(0,0,0,.6);
        z-index:1100;
    }
    /* di mobile abaikan collapse: selalu tampil penuh saat dibuka */
    .sidebar,
    .sidebar.collapsed{ width:272px; }

    .sidebar.open{ transform:translateX(0); }

    /* pulihkan tampilan penuh bila kelas collapsed masih menempel di mobile */
    .sidebar.collapsed .sidebar-top{ padding:24px 16px; }
    .sidebar.collapsed .sidebar-top::after{ left:18px; right:18px; }
    .sidebar.collapsed .sidebar-brand{ gap:12px; }
    .sidebar.collapsed .brand-text{ display:flex; max-width:216px; opacity:1; transform:none; }
    .sidebar.collapsed .nav-label{ display:block; }
    .sidebar.collapsed .submenu-arrow{ display:block; }
    .sidebar.collapsed .has-submenu.open .submenu{ display:block; }
    .sidebar.collapsed nav{ padding:14px 10px 24px; }
    .sidebar.collapsed nav a{ justify-content:flex-start; gap:12px; padding:11px 12px; border-radius:var(--sb-item-radius); }
    .sidebar.collapsed nav a i{ width:23px; min-width:23px; }
    .sidebar.collapsed nav > ul > li > a.active::before,
    .sidebar.collapsed nav > ul > li > .submenu-toggle.active::before{ display:block; }
    /* mobile pakai tampilan penuh (bukan rail): ikon aktif = accent-c solid.
       Cukup color (mask+currentColor) — jangan set background. */
    .sidebar.collapsed nav > ul > li > a.active i,
    .sidebar.collapsed nav > ul > li > .submenu-toggle.active i{
        color:var(--sb-accent-c);
        filter:drop-shadow(0 0 4px color-mix(in srgb, var(--sb-accent-a) 35%, transparent));
    }

    /* AURORA PRISMA — mobile: drop bidang kaca berat (perf) & pulihkan search +
       footer penuh walau kelas .collapsed masih menempel. */
    .sb-blob,
    .sb-glass{ display:none; }

    /* 2026-07-23 perf: backdrop-filter blur + blob aurora infinite terlalu berat
       buat GPU HP kelas menengah, apalagi backdrop-filter itu re-sample tiap
       frame SELAMA transform slide-in/out drawer (300ms x 60fps). Matikan
       total di mobile -- desktop tidak disentuh. */
    .sidebar{
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
    .sidebar::before,
    .sidebar::after{ display:none; }
    .sidebar nav > ul > li > a.active,
    .sidebar nav > ul > li > .submenu-toggle.active{
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
    body.sidebar-open::before{
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
    /* dot pulse (brand tagline + submenu aktif) animasi box-shadow infinite --
       repaint tiap tick, bukan compositor-only. Bekukan di frame diam saat
       mobile, tetap kelihatan (opacity/glow normal) cuma gak "bernafas" lagi. */
    .brand-tagline::before,
    .submenu li a.active::before{
        animation:none;
    }
    .sidebar.collapsed .sb-search{ width:auto; margin:2px 13px 10px; padding:0 10px 0 8px; justify-content:flex-start; box-shadow:inset 0 1px 2px rgba(0,0,0,.3); }
    .sidebar.collapsed .sb-search-input,
    .sidebar.collapsed .sb-search-kbd{ display:block; }
    .sidebar.collapsed .sb-search-ico{ width:24px; height:24px; cursor:text; }
    .sidebar.collapsed .sb-search-empty{ display:flex; }

    /* Mobile = overlay penuh (buka/tutup lewat hamburger navbar), gak ada
       konsep "rail ciutkan" — fab tepi kanan gak relevan di sini. */
    .sb-collapse-fab{ display:none; }
}

/* ============================================================
   AKSESIBILITAS — focus-visible ring kontras
   ============================================================ */
.sidebar a:focus-visible,
.has-submenu > .submenu-toggle:focus-visible,
#menu-toggle:focus-visible{
    outline:2px solid var(--sb-accent-b);
    outline-offset:2px;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--sb-accent-a) 25%, transparent);
    border-radius:var(--sb-item-radius);
}
.sidebar a:focus:not(:focus-visible),
.has-submenu > .submenu-toggle:focus:not(:focus-visible){
    outline:none;
    box-shadow:none;
}

/* hormati preferensi kurangi gerak: matikan animasi loop & percepat transisi */
@media (prefers-reduced-motion:reduce){
    .sidebar,
    .sidebar *,
    .sidebar *::before,
    .sidebar *::after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-delay:0s !important;
        animation-iteration-count:1 !important;
    }
    .sidebar::before,
    .sidebar::after,
    .sb-blob,
    .brand-logo::before{
        animation:none !important;
        transform:none !important;
    }
    .submenu li a{
        opacity:1 !important;
        transform:none !important;
    }
}