/* LioraPath V19.13 — unified desktop + mobile screen edits
   Targeted UI patch only. Keeps V19.11 stable app logic and V19.8 dashboard design. */

/* ---------- Shared / desktop ---------- */
#appShell .app-top{
  box-sizing:border-box!important;
}
#appShell .app-search{
  min-width:180px!important;
}
#appShell .app-top-actions{
  margin-left:auto!important;
  flex:0 0 auto!important;
  justify-content:flex-end!important;
  align-items:center!important;
}
#appShell .v15-top-bell,
#appShell .v15-top-user,
#appShell .v15-continue{
  flex:0 0 auto!important;
}

/* Keep the current classy dashboard and remove the old handwritten phrase everywhere. */
#appShell .v197-journey-note,
#appShell [data-v1913-remove="small-steps"]{
  display:none!important;
}

/* Stronger colored LioraPath slogan/branding on the dark navigation surfaces. */
#appShell .sidebar-brand img{
  content:url('assets/liorapath-logo-light-v198.svg')!important;
  filter:none!important;
}

/* Keep sign out as a real labeled action on desktop too. */
#appShell .v1913-signout,
#appShell .v198-signout{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  white-space:nowrap!important;
}
#appShell .v1913-signout .v1913-signout-label,
#appShell .v198-signout .v1913-signout-label{
  display:inline!important;
  visibility:visible!important;
  opacity:1!important;
}

@media(min-width:761px){
  /* Notification, profile/name, and journey CTA stay at the far-right edge. */
  #appShell .app-top{
    display:flex!important;
    align-items:center!important;
  }
  #appShell .app-search{
    flex:1 1 auto!important;
    max-width:720px!important;
  }
  #appShell .app-top-actions{
    margin-left:auto!important;
    padding-left:8px!important;
  }
  #appShell .sidebar-brand img{
    width:205px!important;
    max-width:100%!important;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  /* Remove the old non-working white/top buttons. The right-side hamburger is the only menu control. */
  #appShell .v14-mobile-signout,
  #appShell .mobile-dash-home{
    display:none!important;
  }

  /* Full logo at left, bell + avatar + hamburger grouped at the top-right. */
  #appShell .app-top{
    left:0!important;
    width:100%!important;
    height:72px!important;
    padding:0 10px 0 12px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto 42px!important;
    gap:5px!important;
    overflow:visible!important;
  }
  #appShell .v15-top-brand{
    display:flex!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    padding:0!important;
  }
  #appShell .v15-top-brand img{
    display:block!important;
    width:clamp(142px,42vw,182px)!important;
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:left center!important;
    content:url('assets/liorapath-logo-light-v198.svg')!important;
    filter:none!important;
    overflow:visible!important;
  }
  #appShell .app-top-actions{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
    margin:0!important;
    padding:0!important;
    gap:4px!important;
  }
  #appShell .mobile-menu{
    display:grid!important;
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:0!important;
  }
  #appShell .mobile-menu:before{
    content:'☰'!important;
    font-size:29px!important;
    line-height:1!important;
    color:#fff!important;
  }

  /* Drawer stays right-side and uses scrolling only for nav, so account/sign-out remain available. */
  #appShell .sidebar{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    padding-bottom:max(16px,env(safe-area-inset-bottom))!important;
  }
  #appShell .side-nav{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  #appShell .sidebar-bottom{
    flex:0 0 auto!important;
    margin-top:auto!important;
    padding-top:10px!important;
    background:#fff!important;
    position:relative!important;
    z-index:2!important;
  }

  /* Fix the user name that was white-on-white in the mobile drawer. */
  #appShell .sidebar-bottom .user-chip{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    margin-bottom:8px!important;
    padding:8px 7px!important;
  }
  #appShell .sidebar-bottom .user-chip>div:last-child{
    display:block!important;
    min-width:0!important;
  }
  #appShell .sidebar-bottom .user-chip b{
    display:block!important;
    color:#173a5c!important;
    font-size:13px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    max-width:215px!important;
  }
  #appShell .sidebar-bottom .user-chip span{
    display:block!important;
    color:#7e8f9f!important;
    font-size:10.5px!important;
    margin-top:2px!important;
  }

  /* Full mobile Sign out button — text cannot collapse to a lone arrow. */
  #appShell .v1913-signout,
  #appShell .v198-signout,
  #appShell .sidebar-bottom button[data-action="logout"]{
    width:100%!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    padding:11px 14px!important;
    border-radius:11px!important;
    background:#f5f8f9!important;
    color:#173a5c!important;
    border:1px solid #e0e7ea!important;
    font-size:13.5px!important;
    font-weight:750!important;
    text-align:left!important;
    overflow:visible!important;
  }
  #appShell .sidebar-bottom button[data-action="logout"] span,
  #appShell .v1913-signout .v1913-signout-label{
    display:inline!important;
    visibility:visible!important;
    opacity:1!important;
    color:inherit!important;
  }

  /* The white drawer uses the dark/colored logo; no clipping. */
  #appShell .sidebar-brand{
    overflow:visible!important;
  }
  #appShell .sidebar-brand img{
    width:210px!important;
    max-width:100%!important;
    content:url('assets/liorapath-logo.svg')!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
}

@media(max-width:390px){
  #appShell .app-top{
    grid-template-columns:minmax(0,1fr) auto 38px!important;
    padding-left:9px!important;
  }
  #appShell .v15-top-brand img{width:140px!important}
  #appShell .mobile-menu{width:36px!important;min-width:36px!important}
}