/*
 * Portal Pengelola v235 — samakan indikator menu aktif dengan portal lain.
 * Selector dibatasi ke #ownerNav agar badge, notifikasi, dan tombol aksi aman.
 */

html[data-clay-theme="v228"]
  body
  #ownerApp.owner-app
  #ownerNav
  > button.nav-button.active {
  position:relative !important;
  border-color:rgba(167, 214, 243,.3) !important;
  background:linear-gradient(145deg,#115478 0%,#073c58 100%) !important;
  color:#f7fffc !important;
  -webkit-text-fill-color:#f7fffc !important;
  box-shadow:
    4px 5px 10px rgba(5, 50, 74,.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;
}

html[data-clay-theme="v228"]
  body
  #ownerApp.owner-app
  #ownerNav
  > button.nav-button.active::before {
  content:"" !important;
  position:absolute !important;
  top:10px !important;
  bottom:10px !important;
  left:0 !important;
  display:block !important;
  width:4px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#20a7ff !important;
  box-shadow:none !important;
}

html[data-clay-theme="v228"]
  body
  #ownerApp.owner-app
  #ownerNav
  > button.nav-button.active
  > span {
  color:#f7fffc !important;
  -webkit-text-fill-color:#f7fffc !important;
}

html[data-clay-theme="v228"]
  body
  #ownerApp.owner-app
  #ownerNav
  > button.nav-button.active
  > svg {
  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:#073c58 !important;
  -webkit-text-fill-color:#073c58 !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;
}

@media (max-width:760px) {
  html[data-clay-theme="v228"]
    body
    #ownerApp.owner-app
    #ownerNav
    > button.nav-button.active {
    box-shadow:0 4px 9px rgba(5, 50, 74,.2),inset 1px 1px 0 rgba(255,255,255,.16) !important;
  }

  html[data-clay-theme="v228"]
    body
    #ownerApp.owner-app
    #ownerNav
    > button.nav-button.active
    > svg {
    flex-basis:28px !important;
    width:28px !important;
    height:28px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html[data-clay-theme="v228"]
    body
    #ownerApp.owner-app
    #ownerNav
    > button.nav-button.active {
    transition:none !important;
  }
}