/* GYPTO Utilities V2.2 — clean Quality-style horizontal navigation.
   Navigation-only presentation change; no database or business-logic changes. */

:root{
  --ut-topbar:76px;
  --ut-nav-h:58px;
}

/* Remove the old side rail completely and restore the original full-width canvas. */
.app-sidebar,
.sidebar-scrim,
.mobile-sidebar-btn{display:none!important}
.app-main,
body.sidebar-collapsed .app-main{margin-inline-start:0!important}
.smart-header,
body.sidebar-collapsed .smart-header{
  inset-inline-start:0!important;
  height:calc(var(--ut-topbar) + var(--ut-nav-h))!important;
  overflow:visible!important;
}
.content{
  padding-top:calc(var(--ut-topbar) + var(--ut-nav-h) + 24px)!important;
}

/* Header remains exactly like the original Utilities layout. */
.main-header{height:var(--ut-topbar)!important;min-height:var(--ut-topbar)!important}
.brand-home span,.sidebar-brand-copy span{white-space:nowrap}

/* Real top navigation — independent from all historical sidebar rules. */
#smartHeader > #topNav.quality-horizontal-nav{
  position:relative!important;
  z-index:1120!important;
  width:100%!important;
  height:var(--ut-nav-h)!important;
  min-height:var(--ut-nav-h)!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:2px!important;
  padding:0 28px!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  white-space:nowrap!important;
  background:#fff!important;
  border:0!important;
  border-top:1px solid #e5edf5!important;
  border-bottom:1px solid #dbe5ef!important;
  box-shadow:none!important;
  scrollbar-width:thin;
}

#smartHeader > #topNav.quality-horizontal-nav .sidebar-section-label,
#smartHeader > #topNav.quality-horizontal-nav .sidebar-nav-icon,
#smartHeader > #topNav.quality-horizontal-nav .sidebar-nav-copy,
#smartHeader > #topNav.quality-horizontal-nav .sidebar-admin-lock{
  display:none!important;
}

#smartHeader > #topNav.quality-horizontal-nav > button{
  position:relative!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  height:100%!important;
  min-height:var(--ut-nav-h)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0!important;
  padding:0 18px!important;
  border:0!important;
  border-bottom:3px solid transparent!important;
  border-radius:0!important;
  background:transparent!important;
  color:#233e59!important;
  font-size:.87rem!important;
  font-weight:750!important;
  line-height:1!important;
  text-align:center!important;
  opacity:1!important;
  visibility:visible!important;
  text-indent:0!important;
  box-shadow:none!important;
}
#smartHeader > #topNav.quality-horizontal-nav > button:hover{
  background:#f5f9fd!important;
  color:#075fb8!important;
}
#smartHeader > #topNav.quality-horizontal-nav > button.active{
  background:#fffaf3!important;
  color:#102f4f!important;
  border-bottom-color:#ff9817!important;
  box-shadow:none!important;
}
#smartHeader > #topNav.quality-horizontal-nav .nav-chevron{
  display:inline-block!important;
  font-size:.74rem!important;
  color:#60788f!important;
  transform:translateY(-1px);
}
#smartHeader > #topNav.quality-horizontal-nav .nav-badge{
  display:inline-grid!important;
  place-items:center!important;
  min-width:20px!important;
  height:20px!important;
  margin-inline-start:4px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:#f24c5c!important;
  color:#fff!important;
  font-size:.63rem!important;
  font-weight:850!important;
}

/* Dropdowns use the same clear enterprise treatment as Quality. */
.nav-menu-portal{
  z-index:1500!important;
  padding:9px!important;
  background:#fff!important;
  border:1px solid #d8e3ed!important;
  border-radius:14px!important;
  box-shadow:0 18px 44px rgba(15,53,88,.18)!important;
}
.nav-menu-portal.wide{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:4px!important;
}
.nav-menu-portal button{
  min-height:54px!important;
  padding:10px 12px!important;
  border-radius:10px!important;
  color:#173957!important;
}
.nav-menu-portal button:hover,.nav-menu-portal button.active{
  background:#eef6ff!important;
  color:#075fb8!important;
}
.nav-menu-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#eaf3fb;color:#075fb8;flex:0 0 30px}
.nav-menu-copy{min-width:0}.nav-menu-copy b,.nav-menu-copy small{display:block}.nav-menu-copy b{font-size:.79rem}.nav-menu-copy small{margin-top:3px;color:#71859a;font-size:.65rem;font-weight:550;white-space:normal;line-height:1.3}

/* Dark mode. */
[data-theme="dark"] #smartHeader > #topNav.quality-horizontal-nav{
  background:#10273c!important;border-color:#29445e!important
}
[data-theme="dark"] #smartHeader > #topNav.quality-horizontal-nav > button{color:#c5d6e5!important}
[data-theme="dark"] #smartHeader > #topNav.quality-horizontal-nav > button:hover{background:#193954!important;color:#fff!important}
[data-theme="dark"] #smartHeader > #topNav.quality-horizontal-nav > button.active{background:#173149!important;color:#fff!important}
[data-theme="dark"] .nav-menu-portal{background:#10273c!important;border-color:#29445e!important}

@media(max-width:900px){
  :root{--ut-nav-h:54px}
  .smart-header,body.sidebar-collapsed .smart-header{height:calc(var(--ut-topbar) + var(--ut-nav-h))!important}
  .content{padding-top:calc(var(--ut-topbar) + var(--ut-nav-h) + 18px)!important}
  #smartHeader > #topNav.quality-horizontal-nav{padding:0 10px!important}
  #smartHeader > #topNav.quality-horizontal-nav > button{padding:0 13px!important;font-size:.78rem!important}
}
@media(max-width:560px){
  :root{--ut-nav-h:50px}
  #smartHeader > #topNav.quality-horizontal-nav > button{padding:0 11px!important;font-size:.72rem!important}
  .nav-menu-portal.wide{grid-template-columns:1fr!important}
}