/* DeskAli mobile route surfaces ------------------------------------------------
   Structural shells should not look like a white card wrapped around another
   set of cards.  Keep real records, KPIs and notices as cards, but let route
   sections and forms use the phone canvas with one consistent small gutter.
   This file is deliberately mobile-only and loads after every feature sheet. */
@media(max-width:680px){
  .content.has-mobile-route-head{
    padding-right:11px;
    padding-left:11px;
  }
  .content.has-mobile-route-head:not(.dispatch-route-shell){
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));
  }

  .content.has-mobile-route-head>.mobile-route-head+*{
    width:100%;
    max-width:none;
    margin-right:0;
    margin-left:0;
  }

  .content.has-mobile-route-head>.mobile-route-head+.stack,
  .fs-grid,.ops-shell,.inv-shell,.pur-shell,.ts-shell,.av-shell,.ws-shell{
    gap:10px;
  }

  /* Legacy routes: flatten only panels that are direct route sections. Inner
     record cards, stat tiles and notices keep their visual grouping. */
  .content[data-route]:not([data-route="overview"]):not([data-route="map"])>
    .mobile-route-head+.stack>.panel{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .content[data-route]:not([data-route="overview"]):not([data-route="map"])>
    .mobile-route-head+.stack>.panel>.panel-h{
    padding:7px 2px 8px;
    border-bottom:0;
  }
  .content[data-route]:not([data-route="overview"]):not([data-route="map"])>
    .mobile-route-head+.stack>.panel>.panel-b{
    padding:4px 2px 10px;
  }

  /* Feature-suite routes (Lead Intake, Shared Inbox, Email Messages and the
     rest) all use this same shell. */
  .fs-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:5px 9px;
    padding:0 2px;
  }
  .fs-head>div{display:contents}
  .fs-head h2{grid-column:1;grid-row:1;margin:0}
  .fs-head p{grid-column:1/-1;grid-row:2;margin:0;line-height:1.45}
  .fs-head .fs-status{grid-column:2;grid-row:1;margin:0;align-self:center}
  .fs-grid{grid-template-columns:minmax(0,1fr);width:100%}
  .fs-panel.panel{
    width:100%;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .fs-panel>.panel-h{padding:7px 2px 8px;border-bottom:0}
  .fs-panel>.panel-b{padding:4px 2px 10px}
  .fs-form-grid,.fs-field,.fs-field .inp,.fs-check,.fs-actions{width:100%}
  .fs-form-grid{gap:10px}
  .fs-check{min-height:44px;background:#fff}
  .fs-field .inp{min-height:44px}

  /* New operations route family. The direct card is layout furniture; cards
     nested inside grids remain cards. */
  .ops-shell:not(.ops-map-shell)>.ops-card{
    width:100%;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .ops-shell:not(.ops-map-shell)>.ops-card>.ops-table-wrap,
  .ops-shell:not(.ops-map-shell)>.ops-card>.ops-card-grid,
  .ops-shell:not(.ops-map-shell)>.ops-card>.ops-template-grid{
    width:100%;
  }

  /* Invoice and purchase builders: remove the section shell, not mobile row
     cards or catalogue/template cards. */
  .inv-shell>.inv-card,
  .inv-builder-main>.inv-card,
  .inv-builder-side>.inv-card,
  .pur-shell>.pur-card,
  .pur-builder>main>.pur-card,
  .pur-builder>aside>.pur-card{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .inv-card>.inv-card-head{padding:7px 2px 8px;border-bottom:0}
  .inv-card>.inv-card-body{padding:4px 2px 10px}
  .pur-builder>main>.pur-pad,.pur-builder>aside>.pur-pad,
  .pur-shell>.pur-pad{padding:8px 2px}
  .inv-field .inp,.pur-grid .inp,.pur-pad>.inp{width:100%}

  /* Website editor, advanced trade tools and Timesheets use their own shells. */
  .ws-shell{padding:0 2px}
  .ws-domain,.ws-editor>section{
    padding:9px 2px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .ws-fields input,.ws-fields textarea,.ws-service input,.ws-service textarea,
  .ws-domain input{width:100%}
  .av-shell>.av-card{
    padding:9px 2px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .ts-toolbar{
    padding:8px 2px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  /* Forms should consume the available width without triggering iOS zoom or
     horizontal document growth. */
  .content.has-mobile-route-head input:not([type="checkbox"]):not([type="radio"]),
  .content.has-mobile-route-head select,
  .content.has-mobile-route-head textarea{
    max-width:100%;
  }

  /* Jobs status filters are controls, not another card. Keep the active pill
     clear, remove the strip behind the group, and tighten the first statuses
     so Underway is not clipped at the phone edge. */
  .content[data-route="jobs"] .jobs-tabs{
    gap:2px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .content[data-route="jobs"] .jobs-tab{gap:4px;padding:7px 5px}
  .content[data-route="jobs"] .jobs-tab span{min-width:17px;height:17px;padding:0 4px}
}

@media(max-width:380px){
  .content.has-mobile-route-head{padding-right:9px;padding-left:9px}
  .fs-status{padding:6px 8px;font-size:10px}
}