/* SLPT R27 Navigation + Terminology Correction — UI-only. */
/* Restores existing sidebarCollapsed preference semantics without changing Settings defaults. */

@media(min-width:901px){
  html[data-role="owner"] #appView.app-shell,
  html[data-role="coach"] #appView.app-shell,
  html[data-role="clinician"] #appView.app-shell{
    display:grid!important;
    grid-template-columns:196px minmax(0,1fr)!important;
    gap:0!important;
    padding:0!important;
  }

  html[data-role="owner"] #appView .sidebar,
  html[data-role="coach"] #appView .sidebar,
  html[data-role="clinician"] #appView .sidebar{
    position:sticky!important;
    inset:auto!important;
    top:0!important;
    width:196px!important;
    height:100vh!important;
    transform:none!important;
    pointer-events:auto!important;
    padding:14px 10px!important;
    border-radius:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    transition:width .18s ease,padding .18s ease!important;
  }

  html[data-role="owner"] #appView .sidebar .sidebar-brand-row,
  html[data-role="coach"] #appView .sidebar .sidebar-brand-row,
  html[data-role="clinician"] #appView .sidebar .sidebar-brand-row{
    min-height:44px!important;
    margin-bottom:8px!important;
    padding:0 3px!important;
  }

  html[data-role="owner"] #appView .sidebar .brand,
  html[data-role="coach"] #appView .sidebar .brand,
  html[data-role="clinician"] #appView .sidebar .brand{
    padding:3px 7px 6px!important;
    font-size:21px!important;
  }

  html[data-role="owner"] #appView .sidebar .nav,
  html[data-role="coach"] #appView .sidebar .nav,
  html[data-role="clinician"] #appView .sidebar .nav{gap:3px!important}

  html[data-role="owner"] #appView .sidebar .nav button,
  html[data-role="coach"] #appView .sidebar .nav button,
  html[data-role="clinician"] #appView .sidebar .nav button{
    min-height:39px!important;
    padding:7px 9px!important;
    border-radius:9px!important;
    font-size:11.5px!important;
  }

  /* Existing saved preference: collapsed desktop rail. */
  html[data-sidebar-collapsed="true"][data-role="owner"] #appView.app-shell,
  html[data-sidebar-collapsed="true"][data-role="coach"] #appView.app-shell,
  html[data-sidebar-collapsed="true"][data-role="clinician"] #appView.app-shell{
    grid-template-columns:74px minmax(0,1fr)!important;
  }

  html[data-sidebar-collapsed="true"][data-role="owner"] #appView .sidebar,
  html[data-sidebar-collapsed="true"][data-role="coach"] #appView .sidebar,
  html[data-sidebar-collapsed="true"][data-role="clinician"] #appView .sidebar{
    width:74px!important;
    padding:12px 8px!important;
  }

  html[data-sidebar-collapsed="true"] #appView .sidebar .sidebar-brand-row{
    min-height:8px!important;
    margin:0 0 7px!important;
    padding:0!important;
  }
  html[data-sidebar-collapsed="true"] #appView .sidebar .brand,
  html[data-sidebar-collapsed="true"] #appView .sidebar .brand-copy,
  html[data-sidebar-collapsed="true"] #appView .sidebar .sidebar-user-copy,
  html[data-sidebar-collapsed="true"] #appView .sidebar .coach-control,
  html[data-sidebar-collapsed="true"] #appView .sidebar .r232-side-summary,
  html[data-sidebar-collapsed="true"] #appView .sidebar .nav button span:last-child{
    display:none!important;
  }
  html[data-sidebar-collapsed="true"] #appView .sidebar .nav{gap:5px!important;margin-top:0!important}
  html[data-sidebar-collapsed="true"] #appView .sidebar .nav button{
    width:46px!important;
    min-width:46px!important;
    min-height:42px!important;
    height:42px!important;
    margin-inline:auto!important;
    padding:0!important;
    justify-content:center!important;
    gap:0!important;
    border-radius:11px!important;
  }
  html[data-sidebar-collapsed="true"] #appView .sidebar .nav button .r23-nav-icon{
    width:30px!important;
    height:30px!important;
    margin:0!important;
  }

  /* One clear top-bar control; state is communicated by icon + accessible label. */
  #appView #mobileMenu{
    display:grid!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    padding:0!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,#fff,#f7f9fc)!important;
    color:#364152!important;
    border:1px solid #dfe5ee!important;
    box-shadow:0 6px 14px rgba(15,23,42,.06),inset 0 1px rgba(255,255,255,.92)!important;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
  }
  #appView #mobileMenu:hover{
    transform:translateY(-1px)!important;
    border-color:#cfd8e5!important;
    box-shadow:0 9px 18px rgba(15,23,42,.08),inset 0 1px rgba(255,255,255,.96)!important;
  }
  #appView #mobileMenu svg{width:19px!important;height:19px!important;display:block!important}
  html[data-theme="mist-graphite"] #appView #mobileMenu{
    background:linear-gradient(145deg,#101d2d,#0b1725)!important;
    color:#dce7f5!important;
    border-color:#26364a!important;
    box-shadow:0 7px 16px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.045)!important;
  }
}

/* Mobile/tablet remains an overlay drawer; only the control artwork is refined. */
@media(max-width:900px){
  #appView #mobileMenu{
    width:40px!important;
    height:40px!important;
    padding:0!important;
    border-radius:11px!important;
  }
  #appView #mobileMenu svg{width:19px!important;height:19px!important;display:block!important}
}

@media(prefers-reduced-motion:reduce){
  #appView .sidebar,#appView #mobileMenu{transition:none!important}
}