/*
 * v234 — satu indikator aktif untuk seluruh portal.
 * Hanya navigasi/tab yang aktif; tombol aksi dan tombol formulir tidak disentuh.
 */

/* Bidang aktif: hijau gelap Claymorphism, konsisten di semua struktur portal. */
html[data-clay-theme="v228"] body :is(
  #groupNav > button.active,
  #subNav > button.active,
  #foundationNav > button.active,
  #ownerNav > button.active,
  .sidebar nav > button.active,
  .foundation-app aside nav > button.active,
  .portal-nav-desktop > button:is(.active,.bg-emerald-500,.bg-emerald-50,.text-emerald-500,.portal-accreditation-nav-active,[aria-current="page"],[aria-selected="true"],[aria-pressed="true"]),
  .portal-nav-mobile > button:is(.active,.bg-emerald-500,.bg-emerald-50,.text-emerald-500,.portal-accreditation-nav-active,[aria-current="page"],[aria-selected="true"],[aria-pressed="true"]),
  .unified-sidebar nav button.active,
  .unified-bottom button.active,
  .portal-groups > button.active,
  .nav-button.active,
  .subnav > button.active,
  .auth-tabs > button.active,
  .login-methods > button.active,
  [role="tablist"] button:is(.active,[aria-selected="true"]),
  [role="tab"]:is(.active,[aria-selected="true"]),
  [class$="-tabs"] button.active,
  [class*="-tabs "] button.active,
  [class$="-nav"] button.active,
  nav button:is(.active,.bg-emerald-500,.bg-emerald-50,.text-emerald-500,.portal-accreditation-nav-active,[aria-current="page"],[aria-selected="true"]),
  nav a:is(.active,[aria-current="page"])
) {
  border-color:rgba(167,243,208,.3) !important;
  background:linear-gradient(145deg,#117862 0%,#075847 100%) !important;
  color:#f7fffc !important;
  -webkit-text-fill-color:#f7fffc !important;
  box-shadow:
    4px 5px 10px rgba(5,74,58,.22),
    -2px -2px 6px rgba(255,255,255,.62),
    inset 1px 1px 0 rgba(255,255,255,.17) !important;
  text-shadow:0 1px 1px rgba(2,43,34,.2) !important;
  transform:none !important;
  filter:none !important;
  transition:background-color 70ms ease,box-shadow 70ms ease !important;
}

/*
 * Kunci khusus Portal Yayasan. Struktur lama Yayasan memiliki selector aktif
 * tersendiri, jadi aturan ini sengaja dibuat eksplisit agar tidak kembali mint.
 */
html[data-portal-brand="yayasan"][data-clay-theme="v228"]
  body .foundation-app #foundationNav > button.active {
  border-color:rgba(167,243,208,.3) !important;
  background:linear-gradient(145deg,#117862 0%,#075847 100%) !important;
  color:#f7fffc !important;
  -webkit-text-fill-color:#f7fffc !important;
  box-shadow:
    4px 5px 10px rgba(5,74,58,.22),
    -2px -2px 6px rgba(255,255,255,.62),
    inset 1px 1px 0 rgba(255,255,255,.17) !important;
}

/* Label aktif tetap putih, tetapi warna ikon tidak ikut diputihkan. */
html[data-clay-theme="v228"] body :is(
  #groupNav > button.active,
  #subNav > button.active,
  #foundationNav > button.active,
  #ownerNav > button.active,
  .sidebar nav > button.active,
  .foundation-app aside nav > button.active,
  .portal-nav-desktop > button:is(.active,.bg-emerald-500,.bg-emerald-50,.text-emerald-500,.portal-accreditation-nav-active,[aria-current="page"],[aria-selected="true"],[aria-pressed="true"]),
  .portal-nav-mobile > button:is(.active,.bg-emerald-500,.bg-emerald-50,.text-emerald-500,.portal-accreditation-nav-active,[aria-current="page"],[aria-selected="true"],[aria-pressed="true"]),
  .unified-sidebar nav button.active,
  .unified-bottom button.active,
  .portal-groups > button.active,
  .nav-button.active,
  .subnav > button.active,
  [role="tablist"] button:is(.active,[aria-selected="true"]),
  [role="tab"]:is(.active,[aria-selected="true"]),
  nav button:is(.active,.bg-emerald-500,.bg-emerald-50,.text-emerald-500,.portal-accreditation-nav-active,[aria-current="page"],[aria-selected="true"]),
  nav a:is(.active,[aria-current="page"])
) :is(span,b,small,.admin-nav-label):not(.nav-icon):not(.admin-nav-icon) {
  color:#f7fffc !important;
  -webkit-text-fill-color:#f7fffc !important;
}

/* Ikon SVG langsung: Portal Guru, Siswa, Yayasan, dan Portal Pemilik. */
html[data-clay-theme="v228"] body :is(
  #foundationNav > button.active,
  #ownerNav > button.active,
  .nav-button.active,
  .portal-nav-desktop > button:is(.active,.bg-emerald-500,.bg-emerald-50,.text-emerald-500,.portal-accreditation-nav-active,[aria-current="page"],[aria-selected="true"],[aria-pressed="true"]),
  .portal-nav-mobile > button:is(.active,.bg-emerald-500,.bg-emerald-50,.text-emerald-500,.portal-accreditation-nav-active,[aria-current="page"],[aria-selected="true"],[aria-pressed="true"])
) > :is(svg,.nav-icon,i) {
  display:block !important;
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  padding:5px !important;
  border:1px solid rgba(255,255,255,.58) !important;
  border-radius:9px !important;
  background:linear-gradient(145deg,#effff8,#ccefe3) !important;
  color:#075847 !important;
  -webkit-text-fill-color:#075847 !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  box-shadow:
    0 3px 7px rgba(2,44,35,.16),
    inset 1px 1px 0 rgba(255,255,255,.88) !important;
  text-shadow:none !important;
}

/* Wadah ikon Portal Sekolah: latar terang dan garis ikon hijau gelap. */
html[data-portal-brand="sekolah"][data-clay-theme="v228"]
  body #groupNav > button.active > .admin-nav-icon {
  display:grid !important;
  place-items:center !important;
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.58) !important;
  border-radius:9px !important;
  background:linear-gradient(145deg,#effff8,#ccefe3) !important;
  color:#075847 !important;
  -webkit-text-fill-color:#075847 !important;
  box-shadow:
    0 3px 7px rgba(2,44,35,.16),
    inset 1px 1px 0 rgba(255,255,255,.88) !important;
}

html[data-portal-brand="sekolah"][data-clay-theme="v228"]
  body #groupNav > button.active > .admin-nav-icon > svg {
  display:block !important;
  width:18px !important;
  height:18px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#075847 !important;
  -webkit-text-fill-color:#075847 !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  box-shadow:none !important;
}

/* Akreditasi Portal Guru memakai status dinamis; ikon dikunci sama seperti menu lain. */
html[data-portal-brand="guru"][data-clay-theme="v228"]
  body .portal-nav-desktop
  > button[data-portal-accreditation-nav="1"]:is(
    .portal-accreditation-nav-active,
    [aria-current="page"],
    [aria-selected="true"]
  ) > svg {
  background:linear-gradient(145deg,#effff8,#ccefe3) !important;
  color:#075847 !important;
  -webkit-text-fill-color:#075847 !important;
  stroke:currentColor !important;
}

@media (max-width:850px) {
  html[data-clay-theme="v228"] body :is(
    #groupNav > button.active,
    #subNav > button.active,
    #foundationNav > button.active,
    .portal-nav-mobile > button:is(.active,.bg-emerald-500,.bg-emerald-50,.text-emerald-500,.portal-accreditation-nav-active,[aria-current="page"],[aria-selected="true"]),
    .unified-bottom button.active,
    .nav-button.active,
    [role="tablist"] button:is(.active,[aria-selected="true"]),
    [role="tab"]:is(.active,[aria-selected="true"]),
    [class$="-tabs"] button.active
  ) {
    box-shadow:0 4px 9px rgba(5,74,58,.2),inset 1px 1px 0 rgba(255,255,255,.16) !important;
  }

  html[data-portal-brand="sekolah"][data-clay-theme="v228"]
    body #groupNav.admin-mobile-dock > button.active > .admin-nav-icon {
    flex-basis:28px !important;
    width:28px !important;
    height:28px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html[data-clay-theme="v228"] body :is(
    nav button.active,
    nav a.active,
    [role="tab"].active,
    [role="tab"][aria-selected="true"]
  ) {
    transition:none !important;
  }
}