/* Brenova canonical application shell.
 * Sole owner of workspace visibility and the complete bottom-navigation surface.
 */

/* SVG-enhanced Font Awesome nodes must never render the original pseudo glyph too. */
i.brn-svg-replaced::before{content:none!important;display:none!important;}
:root{--br-nav-height:62px;}

#main-app > nav:has(#bottom-nav-container){
  position:fixed!important;
  inset:auto 0 0!important;
  z-index:500!important;
  padding:0 0 calc(8px + env(safe-area-inset-bottom))!important;
  pointer-events:none!important;
  background:transparent!important;
}

#bottom-nav-container{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  width:min(calc(100% - 48px),680px)!important;
  min-height:62px!important;
  height:62px!important;
  margin:0 auto!important;
  padding:5px!important;
  gap:5px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border:1px solid rgba(255,204,0,.34)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(14,16,23,.98),rgba(10,12,18,.98))!important;
  color:var(--br-nav-fg,#f3f4f6)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)!important;
  transform:none!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
#bottom-nav-container *{pointer-events:auto!important;box-sizing:border-box!important;}

#bottom-nav-container .brenova-nav-btn{
  appearance:none!important;
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  justify-self:stretch!important;
  width:100%!important;
  min-width:0!important;
  height:52px!important;
  min-height:52px!important;
  margin:0!important;
  padding:5px 3px!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid transparent!important;
  border-radius:16px!important;
  background:linear-gradient(160deg,rgba(18,22,31,.64),rgba(12,15,23,.58))!important;
  background-image:linear-gradient(160deg,rgba(18,22,31,.64),rgba(12,15,23,.58))!important;
  color:var(--br-nav-muted,#949cab)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  transform:none!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .1s ease!important;
}
#bottom-nav-container .brenova-nav-btn::before,
#bottom-nav-container .brenova-nav-btn::after{content:none!important;display:none!important;}

#bottom-nav-container .brenova-nav-icon{
  display:block!important;
  margin:0!important;
  color:inherit!important;
  font-size:19px!important;
  line-height:1!important;
  filter:none!important;
  text-shadow:none!important;
}
#bottom-nav-container .brenova-nav-label{
  display:block!important;
  width:100%!important;
  min-height:0!important;
  max-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  color:inherit!important;
  font-size:8.5px!important;
  font-weight:900!important;
  line-height:1.15!important;
  opacity:0!important;
  pointer-events:none!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-overflow:ellipsis!important;
  transition:opacity .12s ease,max-height .12s ease!important;
}
#bottom-nav-container .brenova-nav-btn.is-active{gap:4px!important;}
#bottom-nav-container .brenova-nav-btn.is-active .brenova-nav-label{
  min-height:10px!important;
  max-height:11px!important;
  opacity:1!important;
}
#bottom-nav-container .brenova-nav-secondary.is-active{
  border-color:rgba(255,204,0,.58)!important;
  background:linear-gradient(160deg,rgba(58,49,12,.54),rgba(25,23,19,.92))!important;
  color:#ffd84d!important;
  box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,232,126,.10)!important;
}
#bottom-nav-container .brenova-nav-primary{
  border-color:transparent!important;
  background:linear-gradient(160deg,rgba(31,24,5,.34),rgba(18,16,10,.46))!important;
  background-image:linear-gradient(160deg,rgba(31,24,5,.34),rgba(18,16,10,.46))!important;
  color:#e4b700!important;
  box-shadow:inset 0 1px 0 rgba(255,222,120,.04)!important;
}
#bottom-nav-container .brenova-nav-primary .brenova-nav-icon{font-size:20px!important;}
#bottom-nav-container .brenova-nav-primary.is-active{
  border-color:rgba(255,204,0,.72)!important;
  background:linear-gradient(180deg,#ffd84d 0%,#f7c600 100%)!important;
  background-image:none!important;
  color:#090a0e!important;
  box-shadow:0 10px 28px rgba(255,204,0,.22), inset 0 1px 0 rgba(255,244,190,.30)!important;
}
#bottom-nav-container .brenova-nav-filler{display:block!important;min-width:0!important;}

main.container,#main-app main{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;}
.tab-content.active{display:block!important;visibility:visible!important;opacity:1!important;transform:none!important;content-visibility:visible!important;contain:none!important;}
.tab-content.active>*{visibility:visible!important;opacity:1!important;content-visibility:visible!important;contain:none!important;}

@media(max-width:420px){
  #main-app > nav:has(#bottom-nav-container){padding-bottom:calc(7px + env(safe-area-inset-bottom))!important;}
  #bottom-nav-container{width:calc(100% - 48px)!important;min-height:62px!important;height:62px!important;padding:5px!important;gap:5px!important;border-radius:21px!important;}
  #bottom-nav-container .brenova-nav-btn{height:52px!important;min-height:52px!important;border-radius:16px!important;}
  #bottom-nav-container .brenova-nav-icon{font-size:18px!important;}
  #bottom-nav-container .brenova-nav-primary .brenova-nav-icon{font-size:19px!important;}
}
@media(prefers-reduced-motion:reduce){#bottom-nav-container .brenova-nav-btn,#bottom-nav-container .brenova-nav-label{transition:none!important;}}
