/* Mobile layout: full-width content and a header in normal document flow. */
@media screen and (max-width:899px){
 html body{margin:0!important;padding:0!important;min-width:0!important}
 html body .app{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:visible!important;min-height:100dvh!important}
 html body .app main{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:18px 12px max(28px,env(safe-area-inset-bottom))!important}
 html body .app header.top{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;gap:8px!important;padding:12px!important;overflow:visible!important}
 html body .app header.top .header-search-with-alerts{display:contents!important}
 html body .app header.top .header-search-with-alerts .header-search{grid-column:1/-1!important;grid-row:2!important;width:100%!important;max-width:none!important;min-width:0!important;height:44px!important;justify-self:stretch!important;display:flex!important;margin:0!important}
 html body .app header.top .header-search .input{height:42px!important;font-size:16px!important;min-width:0!important;margin:0!important;padding:0 12px!important}
 html body .app header.top .header-search button{height:44px!important;width:44px!important;min-width:44px!important;font-size:24px!important;border:0!important}
 html body .app header.top .brand{grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;padding:0!important;justify-content:flex-start!important}
 html body .app header.top .brandlock{width:100%!important;min-width:0!important;align-items:flex-start!important;justify-content:center!important;margin:0!important;padding:0!important}
 html body .app header.top .ep-logistica-brand{width:132px!important;max-width:100%!important;max-height:30px!important;object-fit:contain!important;object-position:left center!important;margin:0!important}
 html body .app header.top .ui-app-name{font-size:10px!important;letter-spacing:1.5px!important;padding:0!important}
 html body .app header.top .personal-important{grid-column:3!important;grid-row:1!important;width:auto!important;min-width:0!important}
 html body .app header.top .important-alert-button{min-height:44px!important;padding:8px!important;font-size:12px!important;gap:5px!important;white-space:nowrap}
 html body .app header.top .important-alert-panel{position:fixed!important;top:72px!important;left:12px!important;right:12px!important;width:auto!important;max-height:calc(100dvh - 96px)!important}
 html body .app header.top .header-info{display:none!important}
 html body .mobile-menu-toggle{display:grid!important;left:12px!important;top:12px!important;width:44px!important;height:44px!important;min-height:44px!important;font-size:22px!important}
 html body .app main .screen{min-width:0!important;max-width:100%!important}
 html body .app main .screen>.sec:first-child{margin-top:0!important}
 html body .app main h1{font-size:28px!important;line-height:1.15!important}
 html body .app #home .p4-top{margin-top:0!important}
 html body .app #home .p4-actions{grid-template-columns:1fr!important;gap:10px!important}
 html body .app #home .p4-action{display:grid!important;grid-template-columns:36px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:12px!important;row-gap:3px!important;min-height:82px!important;padding:14px 16px!important;align-items:center!important;justify-content:start!important}
 html body .app #home .p4-action b{grid-column:1!important;grid-row:1/3!important;font-size:30px!important;text-align:center!important}
 html body .app #home .p4-action span{grid-column:2!important;grid-row:1!important;font-size:18px!important;line-height:1.2!important;margin:0!important}
 html body .app #home .p4-action small{grid-column:2!important;grid-row:2!important;font-size:15px!important;line-height:1.3!important;margin:0!important}
 html body .app #home .p4-panel{padding:12px!important}
 html body .app #home :is(.home-section-head,.p4-title) h2{font-size:20px!important}
 html body .app #home .home-section-head{gap:8px!important;flex-wrap:wrap!important}
 html body .app #home #upcomingLoads .load-card{padding:14px 12px!important;min-width:0!important}
 html body .app #home #upcomingLoads .load-card h3{font-size:19px!important}
 html body .app #home #upcomingLoads .load-card :is(.small,.load-when){font-size:15px!important}
 html body .app #projects .filter-chips{display:flex!important;flex-wrap:wrap!important;gap:8px!important;overflow:visible!important}
 html body .app #projects .chip{font-size:15px!important;min-height:44px!important;padding:10px 12px!important}
 html body .app #projectList>.card{padding:16px!important;margin-bottom:12px!important}
 html body .app #projectList>.card>.row{display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;gap:10px 12px!important;align-items:start!important}
 html body .app #projectList .thumb{width:64px!important;height:64px!important;grid-column:1!important;grid-row:1/3!important;flex:none!important;object-fit:cover!important}
 html body .app #projectList .grow{grid-column:2!important;grid-row:1!important;min-width:0!important}
 html body .app #projectList h3{font-size:21px!important;line-height:1.2!important;overflow-wrap:anywhere!important;margin:0 0 8px!important}
 html body .app #projectList .small{font-size:15px!important;line-height:1.4!important}
 html body .app #projectList .risk-stack{grid-column:2!important;grid-row:2!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:6px!important;min-width:0!important}
 html body .app #projectList .badge{font-size:13px!important;padding:6px 10px!important;white-space:normal!important}
 html body .app #projectList .progress{margin:14px 0 10px!important}
}