/*
 * ShiftNevis canonical mobile/tablet app header.
 * This is the single geometry source for dashboard header <= 1160px.
 * Phone keeps the compact title + Home/Notifications/Logout row; dashboard
 * specific Support/Upgrade actions belong to dashboard-mobile-app.js.
 */
@media (max-width:1160px){
  html body .app .main .app-header{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    direction:ltr!important;
    width:100%!important;
    min-height:72px!important;
    height:auto!important;
    padding:10px 14px!important;
    gap:12px!important;
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid #eee9f6!important;
    box-shadow:0 5px 18px rgba(31,23,56,.045)!important;
  }

  html body .app .main .app-header__title{
    order:2!important;
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    margin:0!important;
    direction:rtl!important;
    text-align:right!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    grid-template-areas:"logo title" "logo subtitle"!important;
    column-gap:9px!important;
    row-gap:1px!important;
    align-items:center!important;
  }

  html body .app .main .app-header__logo{
    grid-area:logo!important;
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:13px!important;
  }

  html body .app .main .app-header__title>b{
    grid-area:title!important;
    margin:0!important;
    font-size:16px!important;
    line-height:1.3!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body .app .main .app-header__subtitle{
    grid-area:subtitle!important;
    margin:0!important;
    font-size:10.5px!important;
    line-height:1.35!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  html body .app .main .app-header__tools{
    order:1!important;
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    direction:ltr!important;
    gap:7px!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:max-content!important;
    margin:0!important;
    padding:0!important;
  }

  html body .app .main .app-header__tools>.btn:not(.btn--home):not(.btn--support):not(.btn--upgrade):not(.btn--danger),
  html body .app .main .app-header__tools .autosave-status{display:none!important}

  html body .app .main .app-header__tools .btn--home,
  html body .app .main .app-header__tools .btn--support,
  html body .app .main .app-header__tools .btn--upgrade,
  html body .app .main .app-header__tools .btn--danger,
  html body .app .main .app-header__tools .sn-notify__bell{
    box-sizing:border-box!important;
    position:relative!important;
    inset:auto!important;
    float:none!important;
    transform:none!important;
    display:block!important;
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    margin:0!important;
    padding:0!important;
    border-radius:12px!important;
    line-height:1!important;
    font-size:0!important;
    text-align:center!important;
    overflow:visible!important;
  }

  html body .app .main .app-header__tools .sn-notify{
    position:relative!important;
    inset:auto!important;
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    margin:0!important;
    padding:0!important;
  }

  html body .app .main .app-header__tools .btn--home>i,
  html body .app .main .app-header__tools .btn--support>i,
  html body .app .main .app-header__tools .btn--upgrade>i,
  html body .app .main .app-header__tools .btn--danger>i,
  html body .app .main .app-header__tools .sn-notify__bell>i{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    display:block!important;
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    margin:auto!important;
    padding:0!important;
    transform:none!important;
    line-height:18px!important;
    font-size:16px!important;
    text-align:center!important;
    pointer-events:none!important;
  }

  html body .app .main .app-header__tools .btn--home>i::before,
  html body .app .main .app-header__tools .btn--support>i::before,
  html body .app .main .app-header__tools .btn--upgrade>i::before,
  html body .app .main .app-header__tools .btn--danger>i::before,
  html body .app .main .app-header__tools .sn-notify__bell>i::before{
    position:static!important;
    display:inline-block!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    line-height:18px!important;
  }

  html body .app .main .app-header__tools .btn--home::before,
  html body .app .main .app-header__tools .btn--home::after,
  html body .app .main .app-header__tools .btn--support::before,
  html body .app .main .app-header__tools .btn--support::after,
  html body .app .main .app-header__tools .btn--upgrade::before,
  html body .app .main .app-header__tools .btn--upgrade::after,
  html body .app .main .app-header__tools .btn--danger::before,
  html body .app .main .app-header__tools .btn--danger::after,
  html body .app .main .app-header__tools .sn-notify__bell::before,
  html body .app .main .app-header__tools .sn-notify__bell::after{content:none!important;display:none!important}

  html body .app .main .app-header__tools .btn--home{color:#6d28d9!important;border:1px solid #e2d8f3!important;background:#faf7ff!important}
  html body .app .main .app-header__tools .btn--support{color:#2563eb!important;border:1px solid #dbeafe!important;background:#f7fbff!important}
  html body .app .main .app-header__tools .btn--upgrade{color:#9a670f!important;border:1px solid #f3df9c!important;background:linear-gradient(145deg,#fffdf5,#fff8df)!important;box-shadow:none!important}
  html body .app .main .app-header__tools .btn--danger{color:#be123c!important;border:1px solid #fecdd3!important;background:#fff5f6!important}
  html body .app .main .app-header__tools .sn-notify__bell{color:#6d28d9!important;border:1px solid #e2d8f3!important;background:#fff!important}
  html body .app .main .app-header__tools .sn-notify__count{top:-5px!important;right:-5px!important}
}

@media (max-width:760px){
  html body .app .main .app-header{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    direction:ltr!important;
    min-height:68px!important;
    padding:8px 10px!important;
    gap:8px!important;
  }

  html body .app .main .app-header__title{
    order:2!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    column-gap:7px!important;
  }

  html body .app .main .app-header__logo{width:40px!important;height:40px!important;min-width:40px!important;border-radius:12px!important}
  html body .app .main .app-header__title>b{font-size:15px!important}
  html body .app .main .app-header__subtitle{font-size:10px!important}

  html body .app .main .app-header__tools{
    order:1!important;
    display:flex!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:max-content!important;
    gap:5px!important;
  }

  /* Support and plan upgrade are dashboard-home actions on phones, not header actions. */
  html body .app .main .app-header__tools .btn--support,
  html body .app .main .app-header__tools .btn--upgrade{display:none!important}

  html body .app .main .app-header__tools .btn--home,
  html body .app .main .app-header__tools .btn--danger,
  html body .app .main .app-header__tools .sn-notify,
  html body .app .main .app-header__tools .sn-notify__bell{
    display:block!important;
    flex-basis:36px!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    border-radius:11px!important;
  }
}

@media (max-width:430px){
  html body .app .main .app-header{padding-inline:7px!important;gap:6px!important}
  html body .app .main .app-header__title{grid-template-columns:36px minmax(0,1fr)!important;column-gap:5px!important}
  html body .app .main .app-header__logo{width:36px!important;height:36px!important;min-width:36px!important}
  html body .app .main .app-header__title>b{font-size:13.5px!important}
  html body .app .main .app-header__subtitle{font-size:9px!important}
  html body .app .main .app-header__tools{gap:4px!important}
  html body .app .main .app-header__tools .btn--home,
  html body .app .main .app-header__tools .btn--danger,
  html body .app .main .app-header__tools .sn-notify,
  html body .app .main .app-header__tools .sn-notify__bell{
    flex-basis:33px!important;width:33px!important;min-width:33px!important;max-width:33px!important;
    height:33px!important;min-height:33px!important;max-height:33px!important;
  }
  html body .app .main .app-header__tools .btn--home>i,
  html body .app .main .app-header__tools .btn--danger>i,
  html body .app .main .app-header__tools .sn-notify__bell>i{font-size:14px!important}
}