@media (max-width: 768px){
  .header-inner{display:flex;flex-wrap:wrap;gap:10px;padding:10px 0;min-height:unset}
  .topbar-nav{order:3;flex:0 0 100%;justify-content:flex-start}
  /*
    Mobile dropdown fix:
    Desktop sub-menus are absolutely positioned. The mobile stylesheet was
    setting overflow:auto on the menu strip, which clips absolutely-positioned
    children. On touch devices that made dropdowns appear "broken".

    Solution: keep the horizontal strip, but render sub-menus in-flow on mobile
    (position:static). JS already toggles .is-open.
  */
  .topbar-menu{width:100%;justify-content:flex-start;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
  .topbar-menu .menu-item-has-children::after{display:none}
  .topbar-menu .sub-menu{
    position:static;
    margin:8px 0 0;
    min-width:0;
    width:100%;
    box-shadow:none;
  }
  .topbar-menu .sub-menu .menu-item a{width:100%}
  .header-actions{order:2;flex-wrap:wrap;justify-content:flex-end}
  .nav-list{flex-wrap:wrap;justify-content:flex-end}
  .hero{min-height:60vh}
  .hero-content{text-align:left;padding:44px 16px}
}

@media (max-width: 768px){
  .dashboard-hero__inner{flex-direction:column;align-items:flex-start}

}


@media (max-width: 520px){
  .panel-foot{flex-direction:column;align-items:stretch}
  .panel-foot .btn{width:100%}
  .user-pill__name{max-width:160px;overflow:hidden;text-overflow:ellipsis}
  .user-menu__dropdown{min-width:min(92vw,260px)}
}


@media (max-width: 900px){
  .overview-card{grid-column:span 12}
}