/* =======================================================================
   DESKTOP SIDEBAR MODULE (GLOBAL – SEMUA HALAMAN)
   -----------------------------------------------------------------------
   Khusus viewport ≥ 1024px SAJA. Mobile ≤ 1023px TIDAK DISENTUH sama sekali
   (sudah ditangani sepenuhnya oleh menu-mobile.css + rule NO FLASH di situ).
   
   Tujuan: Jadikan sidebar sticky desktop PERSIS HOME di blog, slots, slot-demos,
   post, page, single post, single slot — SEMUA.
   ======================================================================= */

@media (min-width: 1024px) {

  /* ===================================================================
     0. ⭐ HEADER STATIC LOCK — TIDAK BOLEH BERGERAK SAAT TOGGLE SIDEBAR!
        (Layer 2 FALLBACK: specificity override tinggi CSS lokal)
     Bug root cause: rule padding content-area (250px) kadang menimpa
     .header-inner.container (SPEC lebih rendah) → user lihat "menu header
     bergeser" saat click buka/tutup hamburger toggle sidebar.
     =================================================================== */
  html body header.app-header,
  body .app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    translate: 0 0 !important;
    z-index: var(--nav-header-z, 100) !important;
  }
  html body .app-header .header-inner.container,
  html body .app-header > .header-inner,
  html body.sidebar-iconmode .app-header .header-inner,
  html body.sidebar-icononly .app-header .header-inner,
  html body.drawer-open .app-header .header-inner,
  html body.mm-drawer-open .app-header .header-inner,
  html body.mm-active .app-header .header-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    transform: none !important;
    translate: 0 0 !important;
  }

  /* ===================================================================
     1. ROOT SIDEBAR POSITION + DIMENSI (fixed di kiri, 230px / 64px)
     =================================================================== */
  #home-sidebar-wrap.home-sidebar,
  .home-sidebar {
    position: fixed !important;
    top: var(--nav-header-height, 64px) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 230px !important;
    max-width: 230px !important;
    height: auto !important;
    z-index: var(--nav-sidebar-z, 95) !important;
    background: var(--color-bg-primary, #0b0a1f);
    border-right: 1px solid rgba(236, 72, 153, 0.12);
    /* ===== LAYER 1 (ROOT): OVERFLOW VISIBLE = TIDAK ADA CLIP SAMA SEKALI
       Mengatasi CSS Spec bug: visible + auto di axis berbeda → visible
       dipaksa auto jadi paint klip. Root 100% passthrough, scroll di-handle
       oleh PALING DALAM (.home-sidebar-cards). ===== */
    overflow: visible !important;
    padding-top: 8px !important;
    padding-bottom: 24px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    transition: width 300ms ease, transform 300ms ease !important;
  }

  /* ===== LAYER 2 (.sidebar-sticky): JUGA PASSTHROUGH VISIBLE, TIDAK ADA CLIP ===== */
  #home-sidebar-wrap.home-sidebar > .sidebar-sticky,
  .home-sidebar > .sidebar-sticky {
    height: 100% !important;
    max-height: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* ===== LAYER 3: .home-sidebar-cards — SCROLL CONTAINER SEBENARNYA
     padding-right 16px GENAP = buffer LUAS agar sb-link margin-right 8px + border 1.5px
     JAUH di dalam batas clip. Rounded corner R14 + anti-alias pixel = 100% TERLIHAT,
     TIDAK TERKLIP. ===== */
  #home-sidebar-wrap.home-sidebar .home-sidebar-cards,
  .home-sidebar .home-sidebar-cards {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    box-sizing: border-box !important;
    padding-right: 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  /* ===== ICON-ONLY MODE 64px (LEBIH KOMPAK, TIDAK TERLALU LEBAR) ===== */
  #home-sidebar-wrap.home-sidebar.sidebar-icononly,
  body.sidebar-iconmode #home-sidebar-wrap,
  body.sidebar-iconmode .home-sidebar,
  .home-sidebar.sidebar-icononly {
    width: 64px !important;
    max-width: 64px !important;
    min-width: 64px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    /* ⭐⭐⭐ ANTI BERATAKAN / FLICKER 230→64px: TIDAK ADA TRANSISI SAAT PAGE LOAD REFRESH!
       Transition HANYA di state default (expanded 230px), agar user click hamburger
       expand/collapse masih mulus. Refresh collapsed state = LANGSUNG 64px SEKETIKA! */
    transition: none !important;
    -webkit-transition: none !important;
    transition-property: none !important;
    /* Border kanan collapse hidden agar tidak menambah visual width beratakan */
    border-right: 1px solid rgba(236,72,153,0.06) !important;
    box-sizing: border-box !important;
  }
  body.sidebar-iconmode #home-sidebar-wrap .home-sidebar-cards,
  .home-sidebar.sidebar-icononly .home-sidebar-cards {
    padding-right: 8px !important;
    padding-left: 2px !important;
  }

  /* ====== ⭐⭐⭐ USER LAPORAN FIX: MODE ICON ONLY DESKTOP SAAT KLIK HAMBURGER ======
     (Sudah di PINDAHKAN ke FILE BENAR ini dari menu-mobile.css — specificity 100% WIN!)
     Rules lengkap sembunyikan label text + section title DISCOVER/LIVE CASINO +
     CENTERKAN badge icon agar pas tengah persegi 64px.
     ================================================================================ */
  /* 1) HIDE SEMUA LABEL TEXT (sb-label, sb-section-title DISCOVER/LIVE CASINO, chevron) */
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-label,
  body.sidebar-iconmode .sb-label,
  body.sidebar-icononly .sb-label,
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-section-title,
  body.sidebar-iconmode .sb-section-title,
  body.sidebar-icononly .sb-section-title,
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-sec-chevron,
  body.sidebar-iconmode .sb-sec-chevron {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: none !important;
    pointer-events: none !important;
    clip-path: inset(0) !important;
  }
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-section-title::after,
  body.sidebar-iconmode .sb-section-title::after,
  body.sidebar-icononly .sb-section-title::after {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
  }
  /* 2) SB-LINK: CENTER BADGE ICON di tengah 64px sidebar, hapus gap label */
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-link,
  body.sidebar-iconmode .sb-link,
  body.sidebar-icononly .sb-link {
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 0 !important;
    margin: 2px auto !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 56px !important;
    text-align: center !important;
    display: flex !important;
  }
  /* 3) SB-ICON-BADGE: tetap 26px, CENTER 0 AUTO */
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-icon-badge,
  body.sidebar-iconmode .sb-icon-badge,
  body.sidebar-icononly .sb-icon-badge {
    margin: 0 auto !important;
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-ic-wrap,
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-ic,
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-link-icon,
  body.sidebar-iconmode .sb-ic-wrap,
  body.sidebar-iconmode .sb-ic,
  body.sidebar-iconmode .sb-link-icon,
  body.sidebar-icononly .sb-ic-wrap,
  body.sidebar-icononly .sb-ic,
  body.sidebar-icononly .sb-link-icon {
    width: 100% !important;
    height: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    display: inline-flex !important;
  }
  /* 4) SB-DIVIDER: kecilkan gap mode icon */
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-divider,
  body.sidebar-iconmode .sb-divider {
    margin: 10px 8px !important;
  }
  /* 5) ⭐⭐⭐ PENCEGAH KILAU BLUR: drawer-backdrop HANYA UNTUK MOBILE!
     Di desktop ≥1024px FORCE DISABLED SEMUA, meskipun class .is-visible tertinggal. */
  .drawer-backdrop,
  .drawer-backdrop.is-visible {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    pointer-events: none !important;
  }

  /* ===== HIDE SCROLLBAR INDICATOR (3 browser coverage) ===== */
  #home-sidebar-wrap.home-sidebar,
  .home-sidebar,
  #home-sidebar-wrap .home-sidebar-card,
  .home-sidebar .home-sidebar-card,
  #home-sidebar-wrap .home-sidebar-cards,
  .home-sidebar .home-sidebar-cards {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  #home-sidebar-wrap.home-sidebar::-webkit-scrollbar,
  .home-sidebar::-webkit-scrollbar,
  #home-sidebar-wrap .home-sidebar-card::-webkit-scrollbar,
  .home-sidebar .home-sidebar-card::-webkit-scrollbar,
  #home-sidebar-wrap.home-sidebar::-webkit-scrollbar-track,
  .home-sidebar::-webkit-scrollbar-track,
  #home-sidebar-wrap.home-sidebar::-webkit-scrollbar-thumb,
  .home-sidebar::-webkit-scrollbar-thumb {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
  }
  #home-sidebar-wrap.home-sidebar .home-sidebar-cards::-webkit-scrollbar,
  .home-sidebar .home-sidebar-cards::-webkit-scrollbar,
  #home-sidebar-wrap .home-sidebar-cards::-webkit-scrollbar-track,
  .home-sidebar .home-sidebar-cards::-webkit-scrollbar-track,
  #home-sidebar-wrap .home-sidebar-cards::-webkit-scrollbar-thumb,
  .home-sidebar .home-sidebar-cards::-webkit-scrollbar-thumb {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
  }

  /* ===================================================================
     2. CONTENT AREA PADDING — dorong konten melewati sidebar (230px / 64px)
     Berlaku untuk SEMUA HALAMAN, TIDAK HANYA HOME.
     ⚠️ HANYA APPLY ke LAYOUT ROOT WRAPPER, BUKAN .container GENERIC
        (karena .container sering NESTED → double padding 2x lipat).
     ⚠️ JANGAN PAKAI :not(complex descendant) — browser sering salah
        evaluate. Layout wrappers jelas BUKAN footer, footer diatur
        SESUDAH rule ini dengan specificity sendiri.
     =================================================================== */

  /* NORMAL MODE 230px */
  html body .container-home,
  html body .container.container-home,
  html body .home-layout,
  html body .container.home-layout,
  html body .home-content,
  html body .container.home-content,
  html body .post-layout-with-sidebar-left,
  html body .container.post-layout-with-sidebar-left,
  html body .container.post-layout.post-layout-with-sidebar-left,
  html body .slot-layout,
  html body .container.slot-layout,
  html body .container.slot-layout.post-layout,
  html body .container.slot-layout.post-layout.post-layout-with-sidebar-left,
  html body .post-layout,
  html body .container.post-layout {
    padding-left: calc(230px + 1.25rem) !important;
    padding-right: 2.5rem !important;
  }
  html body footer.app-footer {
    padding-left: calc(230px + 1.25rem) !important;
    padding-right: 0 !important;
  }
  html body footer.app-footer > .container.footer-inner {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }

  /* ICON-ONLY MODE 64px — padding kiri lebih kecil */
  html body.sidebar-iconmode .container-home,
  html body.sidebar-iconmode .container.container-home,
  html body.sidebar-iconmode .home-layout,
  html body.sidebar-iconmode .container.home-layout,
  html body.sidebar-iconmode .home-content,
  html body.sidebar-iconmode .container.home-content,
  html body.sidebar-iconmode .post-layout-with-sidebar-left,
  html body.sidebar-iconmode .container.post-layout-with-sidebar-left,
  html body.sidebar-iconmode .container.post-layout.post-layout-with-sidebar-left,
  html body.sidebar-iconmode .slot-layout,
  html body.sidebar-iconmode .container.slot-layout,
  html body.sidebar-iconmode .container.slot-layout.post-layout,
  html body.sidebar-iconmode .container.slot-layout.post-layout.post-layout-with-sidebar-left,
  html body.sidebar-iconmode .post-layout,
  html body.sidebar-iconmode .container.post-layout {
    padding-left: calc(64px + 0.75rem) !important;
  }
  html body.sidebar-iconmode footer.app-footer {
    padding-left: calc(64px + 0.75rem) !important;
  }
  html body.sidebar-iconmode footer.app-footer > .container.footer-inner {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
}


/* =========================================================
   [MIGRATED] CSS VARIABLES GLOBAL
   (dibutuhkan desktop + mobile, declare di desktop-sidebar.css global)
   ========================================================= */
:root {
  --nav-sidebar-width: 230px;
  --nav-sidebar-width-collapsed: 64px;
  --nav-header-height: 64px;
  --mobile-bottom-height: 72px;
  --nav-sidebar-z: 95;
  --nav-sidebar-border: rgba(236, 72, 153, 0.12);
}


/* =========================================================
   [MIGRATED] DESKTOP ONLY (≥1024px) — POSITION & HEIGHT RULES
   Overflow visible, height calc, scroll container home-sidebar-cards.
   ========================================================= */
@media (min-width: 1024px) {

  #home-sidebar-wrap.home-sidebar,
  #home-sidebar-wrap.home-sidebar.sidebar-icononly,
  .home-sidebar,
  .home-sidebar.sidebar-icononly {
    transform: none;
    /* ===== LAYER 1: ROOT = OVERFLOW VISIBLE (passthrough, NO CLIP)
       ⭐ EXPLICIT HEIGHT calc(100dvh - 64px) — JANGAN height:auto!
       height:auto + position fixed + top/bottom = CHILD height:100% TIDAK ADA REFERENSI
       → overflow-y:auto di layer CARDS TIDAK PERNAH TRIGGER! ===== */
    position: fixed;
    top: var(--nav-header-height);
    left: 0;
    bottom: 0;
    height: calc(100dvh - var(--nav-header-height, 64px)) !important;
    max-height: calc(100dvh - var(--nav-header-height, 64px)) !important;
    overflow: visible !important;
    padding-top: 8px !important;
    padding-bottom: 24px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    z-index: var(--nav-sidebar-z);
  }
  #home-sidebar-wrap.home-sidebar.sidebar-icononly,
  .home-sidebar.sidebar-icononly {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  /* ===== LAYER 2: .sidebar-sticky = PASSTHROUGH VISIBLE JUGA (NO CLIP) ===== */
  #home-sidebar-wrap.home-sidebar > .sidebar-sticky,
  .home-sidebar > .sidebar-sticky {
    height: 100% !important;
    max-height: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  /* ===== LAYER 3 (PALING DALAM): .home-sidebar-cards = SCROLL CONTAINER SEBENARNYA
     Di sinilah overflow-y:auto di-apply, DAN di sini jugalah PADDING-RIGHT 16px (GENAP)
     membuat sb-link outer boundary JAUH dari dinding clip = rounded TIDAK TERKLIP.
     ⭐ EXPLICIT MAX-HEIGHT calc(100dvh - 64px) — DOUBLE SAFE fallback agar overflow-y:auto
     SELALU TRIGGER meskipun parent ROOT height auto (tanpa referensi). ===== */
  #home-sidebar-wrap.home-sidebar .home-sidebar-cards,
  .home-sidebar .home-sidebar-cards {
    height: 100% !important;
    max-height: calc(100dvh - var(--nav-header-height, 64px)) !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    box-sizing: border-box !important;
    padding-right: 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .home-sidebar-cards,
  .home-sidebar.sidebar-icononly .home-sidebar-cards {
    padding-right: 8px !important;
  }
  #home-sidebar-wrap.home-sidebar .home-sidebar-cards::-webkit-scrollbar,
  .home-sidebar .home-sidebar-cards::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
  }
}

/* Backdrop drawer (mobile) – SPINDEX style: STOP di atas bottom-nav */
.drawer-backdrop {
  position: fixed;
  inset: var(--nav-header-height) 0 0 0;
  z-index: calc(var(--nav-sidebar-z) - 1);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}
@media (max-width: 1023px) {
  .drawer-backdrop {
    bottom: var(--mobile-bottom-height, 72px);
    background: rgba(10, 12, 30, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}
.drawer-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}


/* =========================================================
   [MIGRATED] LAYOUT PADDING DORONG KONTEN (≥1024px)
   Padding-left 230px normal / 64px icononly mode. Footer + container luar ikut terdorong.
   ========================================================= */
/* =======================================================================
   [MIGRATED FROM LAYOUT BLOCK] — DORONG KONTEN KE KANAN, AGAR TIDAK TERTUTUP SIDEBAR
   -----------------------------------------------------------------------
   Ini aturan DORONG KONTEN UTAMA ke kanan, agar TIDAK tertutup
   sidebar fixed overlay (230px / 80px).
   - Berlaku GLOBAL UNTUK SEMUA PAGE (home, post, slots, search, dll)
   - Kalau buat template BARU, TIDAK PERLU menulis aturan ini lagi.
   ======================================================================= */

@media (min-width: 1024px) {
  /* --- Default (sidebar full width 230px) --- */

  /* Container layout UTAMA (home-layout, post-layout dll) */
  body .container.home-layout,
  body .home-layout,
  body .container.post-layout.post-layout-with-sidebar-left,
  body .post-layout.post-layout-with-sidebar-left {
    padding-left: calc(var(--nav-sidebar-width) + 0.5rem) !important;
  }

  /* Area spesifik di dalam <main> */
  body main#main-content .home-layout,
  body main#main-content .post-layout.post-layout-with-sidebar-left {
    padding-left: calc(var(--nav-sidebar-width) + 0.5rem) !important;
  }

  /* FOOTER & CONTAINER LUAR (bukan di dalam layout wrapper tapi
     langsung child <main>) ikut terdorong. */
  body footer.app-footer,
  body main > .container,
  body .page-width {
    padding-left: calc(var(--nav-sidebar-width) + 0.5rem) !important;
  }

  /* Isi kolom utama: HILANGKAN extra padding supaya TIDAK double geser */
  body .home-layout > .home-main-content,
  body .post-layout.post-layout-with-sidebar-left > [style*="display:contents"] > .post-content-wrap,
  body .post-layout.post-layout-with-sidebar-left > .post-main-three-col > .post-content-wrap,
  body .post-layout.post-layout-with-sidebar-left > .post-content-wrap {
    padding-left: 0 !important;
  }

  /* --- Icon-mode (sidebar collapsed 64px — LEBIH KOMPAK) --- */
  body.sidebar-iconmode .container.home-layout,
  body.sidebar-iconmode .home-layout,
  body.sidebar-iconmode .container.post-layout.post-layout-with-sidebar-left,
  body.sidebar-iconmode .post-layout.post-layout-with-sidebar-left {
    padding-left: calc(var(--nav-sidebar-width-collapsed) + 0.5rem) !important;
  }

  body.sidebar-iconmode main#main-content .home-layout,
  body.sidebar-iconmode main#main-content .post-layout.post-layout-with-sidebar-left {
    padding-left: calc(var(--nav-sidebar-width-collapsed) + 0.5rem) !important;
  }

  body.sidebar-iconmode footer.app-footer,
  body.sidebar-iconmode main > .container,
  body.sidebar-iconmode .page-width {
    padding-left: calc(var(--nav-sidebar-width-collapsed) + 0.5rem) !important;
  }
}