/* ==========================================================
   Template: Aurora Sidebar
   - Tampilan benar-benar berbeda (layout sidebar pada desktop)
   - Scoped: hanya aktif jika body memiliki class .tpl-aurora
   - Tidak mengubah struktur konten/logic (aman & maintainable)
   ========================================================== */

body.tpl-aurora {
  /* Visual language berbeda: radius lebih kecil + tipografi kontras */
  --fisip-radius: 14px;
  --aurora-sidebar-w: 280px;
  --aurora-sidebar-bg: #0b1220;
  --aurora-sidebar-fg: #f8fafc;
  --aurora-sidebar-muted: rgba(248, 250, 252, 0.74);

  background:
    radial-gradient(900px 420px at 14% 2%, rgba(var(--fisip-primary-rgb), 0.18), transparent 55%),
    radial-gradient(700px 380px at 96% 10%, rgba(var(--fisip-primary-rgb), 0.12), transparent 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.03), rgba(15, 23, 42, 0)),
    var(--fisip-bg);
}

body.tpl-aurora .site-title {
  letter-spacing: 0.35px;
}

body.tpl-aurora h1,
body.tpl-aurora h2,
body.tpl-aurora h3,
body.tpl-aurora .site-title {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

/* ----------------------------------------------------------
   Header & Navbar (mobile/tablet: tetap top)
   ---------------------------------------------------------- */

body.tpl-aurora .site-header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

html[data-theme="dark"] body.tpl-aurora .site-header {
  background: rgba(15, 23, 42, 0.85);
}

body.tpl-aurora .site-logo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

body.tpl-aurora .site-nav .nav-link {
  border-radius: 14px;
  padding: 0.55rem 0.9rem;
}

body.tpl-aurora .dropdown-menu {
  border-radius: 16px;
}

/* ----------------------------------------------------------
   Desktop: ubah menjadi sidebar layout (perbedaan besar)
   ---------------------------------------------------------- */

@media (min-width: 992px) {
  body.tpl-aurora .site-header {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--aurora-sidebar-w);
    z-index: 1040;

    background:
      radial-gradient(680px 420px at 30% -10%, rgba(var(--fisip-primary-rgb), 0.25), transparent 60%),
      radial-gradient(540px 380px at 100% 35%, rgba(var(--fisip-primary-rgb), 0.14), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
      var(--aurora-sidebar-bg);

    border-right: 1px solid rgba(226, 232, 240, 0.12);
    box-shadow: 18px 0 45px rgba(2, 6, 23, 0.18);
    backdrop-filter: none;
  }

  html[data-theme="dark"] body.tpl-aurora .site-header {
    border-right: 1px solid rgba(226, 232, 240, 0.10);
    box-shadow: 18px 0 45px rgba(0, 0, 0, 0.32);
  }

  body.tpl-aurora .site-header .container {
    max-width: none;
    width: 100%;
  }

  /* Top bar -> kolom */
  body.tpl-aurora .site-header > .container {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    padding: 18px 16px;
  }

  body.tpl-aurora .site-header a[href="/"] {
    padding: 10px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.12);
  }

  body.tpl-aurora .site-header .site-title,
  body.tpl-aurora .site-header .site-tagline {
    color: var(--aurora-sidebar-fg) !important;
  }

  body.tpl-aurora .site-header .site-tagline {
    opacity: 0.82;
  }

  /* Tombol utilitas di sidebar */
  body.tpl-aurora .site-header .btn-outline-secondary {
    --bs-btn-color: var(--aurora-sidebar-fg);
    --bs-btn-border-color: rgba(226, 232, 240, 0.22);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.10);
    --bs-btn-hover-border-color: rgba(226, 232, 240, 0.32);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.14);
    --bs-btn-active-border-color: rgba(226, 232, 240, 0.38);
    color: var(--aurora-sidebar-fg);
  }

  /* Navbar menjadi list vertikal */
  body.tpl-aurora #siteNavbar {
    border: 0;
    background: transparent;
  }

  body.tpl-aurora #siteNavbar .container {
    max-width: none;
    width: 100%;
    padding: 0 16px 18px;
  }

  body.tpl-aurora #siteNavbar .navbar-toggler {
    display: none;
  }

  body.tpl-aurora #navbarSite {
    display: block !important;
  }

  body.tpl-aurora .site-nav .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0;
  }

  body.tpl-aurora .site-nav .nav-link {
    position: relative;
    color: var(--aurora-sidebar-fg) !important;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(226, 232, 240, 0.16);
    border-radius: 14px;
    padding: 0.62rem 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  }

  body.tpl-aurora .site-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(226, 232, 240, 0.22);
    transform: translateX(2px);
  }

  body.tpl-aurora .site-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(var(--fisip-primary-rgb), 0.26), rgba(255, 255, 255, 0.02));
    border-color: rgba(var(--fisip-primary-rgb), 0.34);
    box-shadow: 0 0 0 5px rgba(var(--fisip-primary-rgb), 0.14);
  }

  /* Dropdown dalam sidebar: tampil sebagai panel */
  body.tpl-aurora .site-nav .dropdown-menu {
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.12);
    background: rgba(15, 23, 42, 0.92);
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.35);
    padding: 10px;
  }

  body.tpl-aurora .site-nav .dropdown-item {
    border-radius: 12px;
    color: var(--aurora-sidebar-fg);
    padding: 0.55rem 0.7rem;
  }

  body.tpl-aurora .site-nav .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  body.tpl-aurora .site-nav .dropdown-item.active {
    background: rgba(var(--fisip-primary-rgb), 0.22);
  }

  /* Konten utama bergeser ke kanan */
  body.tpl-aurora .site-main {
    margin-left: var(--aurora-sidebar-w);
  }

  body.tpl-aurora .site-footer {
    margin-left: var(--aurora-sidebar-w);
  }
}

/* ----------------------------------------------------------
   Surfaces, cards, article blocks
   ---------------------------------------------------------- */

body.tpl-aurora .bg-white,
body.tpl-aurora .card {
  border-radius: 16px !important;
}

body.tpl-aurora .card,
body.tpl-aurora article.bg-white {
  box-shadow: 0 18px 45px rgba(2, 6, 23, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] body.tpl-aurora .card,
html[data-theme="dark"] body.tpl-aurora article.bg-white {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(226, 232, 240, 0.12);
}

body.tpl-aurora .btn {
  border-radius: 14px;
}

body.tpl-aurora .badge {
  border-radius: 999px;
}

/* Breadcrumb: lebih khas */
body.tpl-aurora .site-breadcrumb {
  background: transparent !important;
  border-bottom: 0 !important;
}

body.tpl-aurora .site-breadcrumb .breadcrumb {
  gap: 8px;
}

body.tpl-aurora .site-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: rgba(100, 116, 139, 0.9);
}

body.tpl-aurora .site-breadcrumb a {
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
}

html[data-theme="dark"] body.tpl-aurora .site-breadcrumb a {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(226, 232, 240, 0.14);
}

/* Footer: tampil minimal (tetap konsisten, tetapi berbeda feel) */
body.tpl-aurora .site-footer {
  background: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(15, 23, 42, 0.10);
}

html[data-theme="dark"] body.tpl-aurora .site-footer {
  background: rgba(15, 23, 42, 0.75);
  border-top: 1px solid rgba(226, 232, 240, 0.12);
}

/* ----------------------------------------------------------
   Aurora: Banner 1920x720 (tidak terpotong) + Readability tweaks
   ---------------------------------------------------------- */
body.tpl-aurora .hero {
  aspect-ratio: 1920 / 720;
  min-height: 240px;
}

body.tpl-aurora .hero #heroCarousel,
body.tpl-aurora .hero .carousel-inner,
body.tpl-aurora .hero .carousel-item {
  height: 100%;
}

body.tpl-aurora .hero .carousel-item img {
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  background: radial-gradient(800px 420px at 20% 20%, rgba(var(--fisip-primary-rgb), 0.10), transparent 55%),
    rgba(2, 6, 23, 0.12);
}

@media (max-width: 576px) {
  body.tpl-aurora .hero {
    min-height: 210px;
  }
}

/* Pastikan caret dropdown ikut terang di sidebar */
@media (min-width: 992px) {
  body.tpl-aurora .site-nav .dropdown-toggle::after {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45));
  }
}

/* ----------------------------------------------------------
   Aurora Sidebar: Light/Dark menu readability (aligned with Aurora Extreme)
   - Mengikuti pola Aurora Extreme: gunakan token warna (text/surface/border) yang diganti via html[data-theme="dark"].
   - Support juga Bootstrap 5: data-bs-theme.
   ---------------------------------------------------------- */

/* Default = LIGHT */
body.tpl-aurora {
  /* Sidebar tokens (light) */
  --aur-sb-bg: #ffffff;
  --aur-sb-border: rgba(15, 23, 42, 0.10);
  --aur-sb-shadow: 18px 0 45px rgba(2, 6, 23, 0.08);

  --aur-sb-home-bg: rgba(255, 255, 255, 0.70);
  --aur-sb-home-border: rgba(15, 23, 42, 0.10);

  --aur-sb-btn-border: rgba(15, 23, 42, 0.16);
  --aur-sb-btn-hover-bg: rgba(15, 23, 42, 0.06);
  --aur-sb-btn-hover-border: rgba(15, 23, 42, 0.22);
  --aur-sb-btn-active-bg: rgba(15, 23, 42, 0.08);
  --aur-sb-btn-active-border: rgba(15, 23, 42, 0.26);

  --aur-sb-nav-bg: rgba(15, 23, 42, 0.06);
  --aur-sb-nav-bg-hover: rgba(15, 23, 42, 0.08);
  --aur-sb-nav-border: rgba(15, 23, 42, 0.10);
  --aur-sb-nav-border-hover: rgba(15, 23, 42, 0.14);
  --aur-sb-text-shadow: none;

  --aur-sb-dropdown-bg: rgba(255, 255, 255, 0.96);
  --aur-sb-dropdown-shadow: 0 18px 45px rgba(2, 6, 23, 0.16);
  --aur-sb-dropdown-item-hover: rgba(15, 23, 42, 0.06);
  --aur-sb-dropdown-item-active: rgba(var(--fisip-primary-rgb), 0.16);

  /* Alias ke variabel lama (dipakai aturan sebelumnya) */
  --aurora-sidebar-bg: var(--aur-sb-bg);
  --aurora-sidebar-fg: #0f172a;
  --aurora-sidebar-muted: rgba(15, 23, 42, 0.72);
}

/* Explicit LIGHT (defensive reset) */
html[data-theme="light"] body.tpl-aurora,
body.tpl-aurora[data-theme="light"],
html[data-bs-theme="light"] body.tpl-aurora,
body.tpl-aurora[data-bs-theme="light"] {
  --aurora-sidebar-bg: var(--aur-sb-bg);
  --aurora-sidebar-fg: #0f172a;
  --aurora-sidebar-muted: rgba(15, 23, 42, 0.72);
}

/* DARK override */
html[data-theme="dark"] body.tpl-aurora,
body.tpl-aurora[data-theme="dark"],
html[data-bs-theme="dark"] body.tpl-aurora,
body.tpl-aurora[data-bs-theme="dark"] {
  --aur-sb-bg: #0b1220;
  --aur-sb-border: rgba(226, 232, 240, 0.12);
  --aur-sb-shadow: 18px 0 45px rgba(0, 0, 0, 0.32);

  --aur-sb-home-bg: rgba(255, 255, 255, 0.06);
  --aur-sb-home-border: rgba(226, 232, 240, 0.12);

  --aur-sb-btn-border: rgba(226, 232, 240, 0.22);
  --aur-sb-btn-hover-bg: rgba(255, 255, 255, 0.10);
  --aur-sb-btn-hover-border: rgba(226, 232, 240, 0.32);
  --aur-sb-btn-active-bg: rgba(255, 255, 255, 0.14);
  --aur-sb-btn-active-border: rgba(226, 232, 240, 0.38);

  --aur-sb-nav-bg: rgba(255, 255, 255, 0.07);
  --aur-sb-nav-bg-hover: rgba(255, 255, 255, 0.12);
  --aur-sb-nav-border: rgba(226, 232, 240, 0.16);
  --aur-sb-nav-border-hover: rgba(226, 232, 240, 0.22);
  --aur-sb-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);

  --aur-sb-dropdown-bg: rgba(15, 23, 42, 0.92);
  --aur-sb-dropdown-shadow: 0 18px 45px rgba(2, 6, 23, 0.35);
  --aur-sb-dropdown-item-hover: rgba(255, 255, 255, 0.08);
  --aur-sb-dropdown-item-active: rgba(var(--fisip-primary-rgb), 0.22);

  --aurora-sidebar-bg: var(--aur-sb-bg);
  --aurora-sidebar-fg: #f8fafc;
  --aurora-sidebar-muted: rgba(248, 250, 252, 0.74);
}

/* Terapkan token untuk menu sidebar (desktop) */
@media (min-width: 992px) {
  body.tpl-aurora .site-header {
    border-right: 1px solid var(--aur-sb-border);
    box-shadow: var(--aur-sb-shadow);

    background:
      radial-gradient(680px 420px at 30% -10%, rgba(var(--fisip-primary-rgb), 0.16), transparent 60%),
      radial-gradient(540px 380px at 100% 35%, rgba(var(--fisip-primary-rgb), 0.10), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
      var(--aurora-sidebar-bg);
  }

  /* Dark: sedikit lebih “neon” seperti Aurora Extreme */
  html[data-theme="dark"] body.tpl-aurora .site-header,
  body.tpl-aurora[data-theme="dark"] .site-header,
  html[data-bs-theme="dark"] body.tpl-aurora .site-header,
  body.tpl-aurora[data-bs-theme="dark"] .site-header {
    background:
      radial-gradient(680px 420px at 30% -10%, rgba(var(--fisip-primary-rgb), 0.25), transparent 60%),
      radial-gradient(540px 380px at 100% 35%, rgba(var(--fisip-primary-rgb), 0.14), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.00)),
      var(--aurora-sidebar-bg);
  }

  body.tpl-aurora .site-header a[href="/"] {
    background: var(--aur-sb-home-bg);
    border: 1px solid var(--aur-sb-home-border);
  }

  body.tpl-aurora .site-header .site-title,
  body.tpl-aurora .site-header .site-tagline {
    color: var(--aurora-sidebar-fg) !important;
  }

  body.tpl-aurora .site-header .site-tagline {
    opacity: 0.85;
  }

  /* Tombol utilitas */
  body.tpl-aurora .site-header .btn-outline-secondary {
    --bs-btn-color: var(--aurora-sidebar-fg);
    --bs-btn-border-color: var(--aur-sb-btn-border);
    --bs-btn-hover-bg: var(--aur-sb-btn-hover-bg);
    --bs-btn-hover-border-color: var(--aur-sb-btn-hover-border);
    --bs-btn-active-bg: var(--aur-sb-btn-active-bg);
    --bs-btn-active-border-color: var(--aur-sb-btn-active-border);
    color: var(--aurora-sidebar-fg) !important;
  }

  /* Nav links */
  body.tpl-aurora .site-nav .nav-link {
    color: var(--aurora-sidebar-fg) !important;
    background: var(--aur-sb-nav-bg);
    border-color: var(--aur-sb-nav-border);
    text-shadow: var(--aur-sb-text-shadow);
  }

  body.tpl-aurora .site-nav .nav-link:hover {
    background: var(--aur-sb-nav-bg-hover);
    border-color: var(--aur-sb-nav-border-hover);
  }

  /* Active state (light default) */
  body.tpl-aurora .site-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(var(--fisip-primary-rgb), 0.16), rgba(15, 23, 42, 0.02));
    border-color: rgba(var(--fisip-primary-rgb), 0.40);
    box-shadow: 0 0 0 5px rgba(var(--fisip-primary-rgb), 0.12);
  }

  /* Active state (dark) */
  html[data-theme="dark"] body.tpl-aurora .site-nav .nav-link.active,
  body.tpl-aurora[data-theme="dark"] .site-nav .nav-link.active,
  html[data-bs-theme="dark"] body.tpl-aurora .site-nav .nav-link.active,
  body.tpl-aurora[data-bs-theme="dark"] .site-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(var(--fisip-primary-rgb), 0.26), rgba(255, 255, 255, 0.02));
    border-color: rgba(var(--fisip-primary-rgb), 0.34);
    box-shadow: 0 0 0 5px rgba(var(--fisip-primary-rgb), 0.14);
  }

  /* Dropdown panel */
  body.tpl-aurora .site-nav .dropdown-menu {
    background: var(--aur-sb-dropdown-bg);
    border: 1px solid var(--aur-sb-border);
    box-shadow: var(--aur-sb-dropdown-shadow);
  }

  body.tpl-aurora .site-nav .dropdown-item {
    color: var(--aurora-sidebar-fg);
  }

  body.tpl-aurora .site-nav .dropdown-item:hover {
    background: var(--aur-sb-dropdown-item-hover);
  }

  body.tpl-aurora .site-nav .dropdown-item.active {
    background: var(--aur-sb-dropdown-item-active);
  }
}
/* ==========================================================
   FIX V3 (Nuclear Hover Layer):
   - Pastikan dropdown/submenu sidebar selalu di paling depan.
   - Saat hover / fokus di sidebar, konten utama diturunkan.
   - Aman untuk desktop pointer (hover) saja.
   ========================================================== */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  body.tpl-aurora .site-header {
    position: fixed; /* pastikan z-index bekerja konsisten */
    isolation: isolate; /* stacking context stabil */
    z-index: 3000; /* base lebih tinggi dari elemen lain */
    overflow: visible !important; /* cegah submenu ter-clip */
  }

  /* Saat interaksi: angkat setinggi-tingginya */
  body.tpl-aurora .site-header:hover,
  body.tpl-aurora .site-header:focus-within {
    z-index: 2147483000 !important;
  }

  /* Jika browser mendukung :has(), tetap tinggi saat dropdown sedang terbuka */
  body.tpl-aurora .site-header:has(.dropdown-menu.show),
  body.tpl-aurora .site-header:has(.dropdown-submenu:hover) {
    z-index: 2147483000 !important;
  }

  /* Dropdown & submenu selalu di atas */
  body.tpl-aurora .site-header .dropdown-menu {
    z-index: 2147483000 !important;
  }
  body.tpl-aurora .site-header .dropdown-submenu > .dropdown-menu {
    z-index: 2147483000 !important;
  }

  /* Pastikan parent submenu jadi layer di atas sibling */
  body.tpl-aurora .site-header .dropdown,
  body.tpl-aurora .site-header .dropend,
  body.tpl-aurora .site-header .dropdown-submenu {
    position: relative;
  }
  body.tpl-aurora .site-header .dropdown:hover,
  body.tpl-aurora .site-header .dropend:hover,
  body.tpl-aurora .site-header .dropdown-submenu:hover {
    z-index: 2147483000 !important;
  }


  /* Saat dropdown terbuka, matikan clipping dari container scroll (jika ada) */
  body.tpl-aurora .site-header:hover #siteNavbar,
  body.tpl-aurora .site-header:focus-within #siteNavbar,
  body.tpl-aurora .site-header:has(.dropdown-menu.show) #siteNavbar,
  body.tpl-aurora .site-header:has(.dropdown-submenu:hover) #siteNavbar {
    overflow: visible !important;
  }

  /* Turunkan konten utama saat sidebar sedang di-hover / focus (boleh ketutup) */
  body.tpl-aurora .site-header:hover ~ .site-main,
  body.tpl-aurora .site-header:focus-within ~ .site-main,
  body.tpl-aurora .site-header:hover ~ .site-footer,
  body.tpl-aurora .site-header:focus-within ~ .site-footer,
  body.tpl-aurora .site-header:hover ~ .site-breadcrumb,
  body.tpl-aurora .site-header:focus-within ~ .site-breadcrumb {
    position: relative !important;
    z-index: 0 !important;
  }

  /* Turunkan tombol scroll-top jika perlu */
  body.tpl-aurora .site-header:hover ~ #btnScrollTop,
  body.tpl-aurora .site-header:focus-within ~ #btnScrollTop {
    z-index: 0 !important;
  }
}