/* HTNS v244 — bottom navigation icons only.
   Remove individual tab button boxes; the active icon itself is the indicator. */

html.htns-theme-v234 #mainApp .tabs button,
html.htns-theme-v234 #mainApp .tabs button.on,
body.guest-mode html.htns-theme-v234 #mainApp .tabs button,
body.view-only-mode html.htns-theme-v234 #mainApp .tabs button,
body[data-user-role="guest"] html.htns-theme-v234 #mainApp .tabs button,
body[data-mode="guest"] html.htns-theme-v234 #mainApp .tabs button,
body.guest-mode #mainApp .tabs button,
body.view-only-mode #mainApp .tabs button,
body[data-user-role="guest"] #mainApp .tabs button,
body[data-mode="guest"] #mainApp .tabs button,
#mainApp .tabs button,
#mainApp .tabs button.on{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline-offset:0 !important;
  padding:0 !important;
  color:#71879a !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#mainApp .tabs button > span,
body.guest-mode #mainApp .tabs button > span,
body.view-only-mode #mainApp .tabs button > span{
  display:none !important;
}

#mainApp .tabs button svg,
body.guest-mode #mainApp .tabs button svg,
body.view-only-mode #mainApp .tabs button svg{
  width:23px !important;
  height:23px !important;
  margin:0 auto !important;
  color:#71879a !important;
  stroke:currentColor !important;
  fill:none !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  transition:color .16s ease, stroke .16s ease, transform .12s ease !important;
}

html.htns-theme-v234 #mainApp .tabs button.on,
body.guest-mode #mainApp .tabs button.on,
body.view-only-mode #mainApp .tabs button.on,
body[data-user-role="guest"] #mainApp .tabs button.on,
body[data-mode="guest"] #mainApp .tabs button.on,
#mainApp .tabs button.on{
  color:#2f7db4 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

html.htns-theme-v234 #mainApp .tabs button.on svg,
body.guest-mode #mainApp .tabs button.on svg,
body.view-only-mode #mainApp .tabs button.on svg,
body[data-user-role="guest"] #mainApp .tabs button.on svg,
body[data-mode="guest"] #mainApp .tabs button.on svg,
#mainApp .tabs button.on svg{
  color:#2f7db4 !important;
  stroke:#2f7db4 !important;
  fill:none !important;
  transform:none !important;
}

/* Selection is represented by icon color only — no top/under line. */
#mainApp .tabs .tab-active-line,
body.guest-mode #mainApp .tabs .tab-active-line,
body.view-only-mode #mainApp .tabs .tab-active-line{
  display:none !important;
}

#mainApp .tabs button:active svg{
  transform:scale(.92) !important;
}

/* Keyboard focus remains accessible without restoring a button tile. */
#mainApp .tabs button:focus-visible{
  outline:none !important;
}
#mainApp .tabs button:focus-visible svg{
  outline:2px solid rgba(47,125,180,.28) !important;
  outline-offset:4px !important;
  border-radius:5px !important;
}

html.htns-theme-v234[data-theme="dark"] #mainApp .tabs button,
html.htns-theme-v234[data-theme="dark"] #mainApp .tabs button svg{
  color:#9fb4c6 !important;
  stroke:currentColor !important;
}
html.htns-theme-v234[data-theme="dark"] #mainApp .tabs button.on,
html.htns-theme-v234[data-theme="dark"] #mainApp .tabs button.on svg{
  color:#78b9e5 !important;
  stroke:#78b9e5 !important;
}

@media (max-width:390px){
  #mainApp .tabs button svg{
    width:22px !important;
    height:22px !important;
  }
}