/* EarthRoster V1452.178 — one mobile viewport contract for the genuine Add Shift
   screens. No duplicate inputs, handlers, employee records, or fake pages. */
@media(max-width:760px){
  :root{
    --er178-visible-height:100dvh;
    --er178-window-top:0px;
    --er178-safe-top:env(safe-area-inset-top,0px);
    --er178-safe-bottom:env(safe-area-inset-bottom,0px);
  }
  /* Every opened Shift panel uses the exact same viewport-sized scroll shell.
     Prevent the high-priority older shift overlays from trapping the header. */
  html body[data-modal-type="shift"] #modalHost .modal-overlay:has(>.shift-modal){
    box-sizing:border-box!important;position:fixed!important;
    top:var(--er178-window-top)!important;bottom:auto!important;left:0!important;right:0!important;
    width:100%!important;height:var(--er178-visible-height)!important;max-height:var(--er178-visible-height)!important;
    padding:0!important;margin:0!important;overflow:hidden!important;
    display:flex!important;align-items:stretch!important;justify-content:stretch!important;
    transform:none!important;overscroll-behavior:contain!important;
  }
  html body[data-modal-type="shift"] #modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel){
    box-sizing:border-box!important;position:relative!important;inset:auto!important;
    display:flex!important;flex-direction:column!important;
    flex:1 1 auto!important;min-width:0!important;min-height:0!important;
    width:100%!important;max-width:100%!important;
    height:100%!important;max-height:100%!important;
    padding:0!important;margin:0!important;overflow:hidden!important;
    border-radius:0!important;transform:none!important;
    animation:none!important;scroll-behavior:auto!important;
  }
  html body[data-modal-type="shift"] #modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel)>.modal-head{
    position:relative!important;inset:auto!important;top:auto!important;
    flex:0 0 auto!important;z-index:30!important;
    box-sizing:border-box!important;width:100%!important;
    height:auto!important;min-height:calc(56px + var(--er178-safe-top))!important;
    padding:calc(7px + var(--er178-safe-top)) 13px 7px!important;
    margin:0!important;overflow:visible!important;transform:none!important;
    display:flex!important;align-items:center!important;gap:8px!important;
  }
  html body[data-modal-type="shift"] #modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel)>.modal-head :is(.modal-x,.er163-back,.er176-panel-back,button){
    position:relative!important;inset:auto!important;transform:none!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 40px!important;width:40px!important;height:40px!important;min-height:40px!important;
    margin:0!important;padding:6px!important;z-index:32!important;
    pointer-events:auto!important;touch-action:manipulation!important;
  }
  html body[data-modal-type="shift"] #modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel)>.modal-head h2{
    flex:1 1 auto!important;min-width:0!important;max-width:100%!important;
    margin:0!important;font-size:clamp(17px,4.7vw,21px)!important;line-height:1.2!important;
    overflow-wrap:anywhere!important;
  }
  html body[data-modal-type="shift"] #modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel)>.modal-body{
    position:relative!important;inset:auto!important;flex:1 1 auto!important;
    box-sizing:border-box!important;min-height:0!important;max-height:none!important;height:auto!important;
    padding-bottom:14px!important;overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;overflow-anchor:none!important;scroll-behavior:auto!important;
    -webkit-overflow-scrolling:touch!important;transform:none!important;
  }
  html body[data-modal-type="shift"] #modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel)>.modal-foot{
    position:relative!important;inset:auto!important;bottom:auto!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    flex:0 0 auto!important;z-index:30!important;
    box-sizing:border-box!important;width:100%!important;
    height:auto!important;min-height:0!important;
    margin:0!important;padding:8px 12px calc(9px + var(--er178-safe-bottom))!important;
    border-top:1px solid #dfe7dc!important;background:#fffefa!important;
    transform:none!important;box-shadow:none!important;gap:6px!important;
  }
  html body[data-modal-type="shift"] #modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel)>.modal-foot :is(button,.btn){
    box-sizing:border-box!important;min-width:0!important;min-height:42px!important;
    margin:0!important;transform:none!important;touch-action:manipulation!important;
  }
  /* Employee search is still the original real data-backed selector. Its
     list scrolls inside the page body, not beneath the bottom Add button. */
  html body[data-modal-type="shift"] #modalHost .er173-staff .modal-body .er962-staff-picker{
    min-height:0!important;height:auto!important;padding-bottom:8px!important;
  }
  html body[data-modal-type="shift"] #modalHost .er173-staff .er932-staff-list{
    min-height:0!important;max-height:none!important;overflow:visible!important;
  }
  /* Keep the publishing section expanded, as approved, with no false arrow. */
  html body[data-modal-type="shift"] #modalHost .er164-approved-design details.er163-publishing>summary{
    cursor:default!important;pointer-events:none!important;
  }
  html body[data-modal-type="shift"] #modalHost .er164-approved-design details.er163-publishing>summary :is(svg,.chevron,[class*="chevron"]){
    display:none!important;
  }
  /* Calendar modal is centred inside the keyboard-aware visible viewport. */
  html body .er173-calendar-overlay{
    position:fixed!important;inset:auto 0 auto 0!important;
    top:var(--er178-window-top)!important;
    width:100%!important;height:var(--er178-visible-height)!important;
    box-sizing:border-box!important;padding:12px!important;overflow:hidden!important;
  }
  html body .er173-calendar-sheet{min-height:0!important;max-height:calc(var(--er178-visible-height) - 24px)!important;}
  /* All opened choice/publishing/colour/contact/email screens share the
     same bounded header/body/footer split. */
  html body :is(.er173-choice-overlay,.er174-config-overlay,.er173-time-overlay){
    position:fixed!important;inset:auto 0 auto 0!important;top:var(--er178-window-top)!important;
    box-sizing:border-box!important;width:100%!important;
    height:var(--er178-visible-height)!important;max-height:var(--er178-visible-height)!important;
    overflow:hidden!important;padding:0!important;margin:0!important;
    display:flex!important;align-items:stretch!important;justify-content:stretch!important;
  }
  html body :is(.er173-choice-sheet,.er174-config-sheet,.er173-time-sheet){
    position:relative!important;inset:auto!important;flex:1 1 auto!important;
    box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
    width:100%!important;height:100%!important;max-width:100%!important;
    max-height:100%!important;min-height:0!important;
    margin:0!important;padding:0!important;border-radius:0!important;
    overflow:hidden!important;transform:none!important;
  }
  html body :is(.er173-choice-sheet,.er174-config-sheet,.er173-time-sheet)>header{
    position:relative!important;top:auto!important;flex:0 0 auto!important;
    box-sizing:border-box!important;height:auto!important;
    min-height:calc(58px + var(--er178-safe-top))!important;
    padding:calc(7px + var(--er178-safe-top)) 14px 7px!important;
    margin:0!important;display:flex!important;align-items:center!important;z-index:10!important;
  }
  html body :is(.er173-choice-sheet,.er174-config-sheet,.er173-time-sheet)>header button{
    flex:0 0 42px!important;width:42px!important;height:42px!important;
    min-height:42px!important;display:grid!important;place-items:center!important;
    pointer-events:auto!important;touch-action:manipulation!important;
  }
  html body :is(.er173-choice-content,.er174-config-content,.er173-time-content){
    flex:1 1 auto!important;min-height:0!important;height:auto!important;
    box-sizing:border-box!important;overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;overflow-anchor:none!important;
  }
  html body :is(.er173-choice-sheet,.er174-config-sheet,.er173-time-sheet)>footer{
    box-sizing:border-box!important;position:relative!important;flex:0 0 auto!important;
    height:auto!important;min-height:0!important;margin:0!important;
    padding:8px 12px calc(9px + var(--er178-safe-bottom))!important;
    z-index:10!important;background:#fffefa!important;border-top:1px solid #e0e7db!important;
  }
  html body :is(.er173-choice-sheet,.er174-config-sheet,.er173-time-sheet)>footer button{
    min-height:44px!important;touch-action:manipulation!important;
  }
  /* Checklist and its two subpages have the same safe-area contract. */
  html body #er963NotesSheet.er175-checklist-page{
    top:var(--er178-window-top)!important;bottom:auto!important;
    height:var(--er178-visible-height)!important;max-height:var(--er178-visible-height)!important;
    min-height:0!important;overflow:hidden!important;
  }
  html body #er963NotesSheet.er175-checklist-page .er963-sheet-head{
    height:auto!important;min-height:calc(58px + var(--er178-safe-top))!important;
    padding:calc(7px + var(--er178-safe-top)) 13px 8px!important;
    flex:0 0 auto!important;z-index:30!important;
  }
  html body #er963NotesSheet.er175-checklist-page .er963-sheet-body{
    flex:1 1 auto!important;min-height:0!important;max-height:none!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain!important;
  }
  html body #er963NotesSheet.er175-checklist-page .er963-sheet-foot{
    position:relative!important;inset:auto!important;flex:0 0 auto!important;
    box-sizing:border-box!important;min-height:0!important;
    padding:8px 12px calc(9px + var(--er178-safe-bottom))!important;
    margin:0!important;z-index:30!important;transform:none!important;
  }
  html body #er963NotesSheet.er175-checklist-page :is(.er175-job-back,.er963-sheet-head button,.er963-sheet-foot button){
    touch-action:manipulation!important;pointer-events:auto!important;min-height:42px!important;
  }
  /* Consistent slim, two-sided treatment in admin and employee roster/home. */
  html body #app #page :is(.roster-mobile,.home-roster-list)>article.er156-card{
    box-sizing:border-box!important;border-left-width:5px!important;border-right-width:5px!important;
    border-radius:15px!important;transform:none!important;
  }
}
/* Only standalone iOS needs the minimum chrome spacing when a browser reports
   an empty safe-area. Do not add an arbitrary 50px gap to normal Safari tabs. */
@media(max-width:760px) and (display-mode:standalone){
  :root{--er178-safe-top:max(48px,env(safe-area-inset-top,0px));--er178-safe-bottom:max(18px,env(safe-area-inset-bottom,0px));}
}
/* Older mobile layers use !important. Mirror the safety-critical geometry in
   the same named layer so an older header rule cannot win on iPhone Safari. */
@layer er-earth {
 @media(max-width:760px){
  html.er-earth body[data-modal-type="shift"] #modalHost#modalHost .modal-overlay:has(>.shift-modal){
    position:fixed!important;inset:auto 0 auto 0!important;
    top:var(--er178-window-top)!important;height:var(--er178-visible-height)!important;
    max-height:var(--er178-visible-height)!important;padding:0!important;
    overflow:hidden!important;align-items:stretch!important;
  }
  html.er-earth body[data-modal-type="shift"] #modalHost#modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel){
    height:100%!important;max-height:100%!important;min-height:0!important;
    overflow:hidden!important;display:flex!important;flex-direction:column!important;
    border-radius:0!important;margin:0!important;
  }
  html.er-earth body[data-modal-type="shift"] #modalHost#modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel)>.modal-head{
    position:relative!important;inset:auto!important;z-index:40!important;
    min-height:calc(56px + var(--er178-safe-top))!important;
    padding:calc(7px + var(--er178-safe-top)) 13px 7px!important;
    flex:0 0 auto!important;transform:none!important;
  }
  html.er-earth body[data-modal-type="shift"] #modalHost#modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel)>.modal-body{
    min-height:0!important;max-height:none!important;flex:1 1 auto!important;
    overflow-y:auto!important;overflow-x:hidden!important;
  }
  html.er-earth body[data-modal-type="shift"] #modalHost#modalHost .modal-overlay>.shift-modal:is(.er164-approved-design,.er173-panel)>.modal-foot{
    position:relative!important;inset:auto!important;z-index:40!important;
    min-height:0!important;height:auto!important;flex:0 0 auto!important;
    padding:8px 12px calc(9px + var(--er178-safe-bottom))!important;
    transform:none!important;
  }
 }
}
/* A shared roster card is used on Roster and Dashboard for either role.
   This targets only its layout; employee Start / Accept / Decline actions remain. */
@layer er103 {
 @media(max-width:1023px){
  html body #app #page :is(.roster-mobile,.home-roster-list)>article.er156-card{
    box-sizing:border-box!important;min-height:0!important;height:auto!important;
    margin:0!important;padding:6px 8px 6px 10px!important;
    border-left:5px solid var(--er156-solid,#50805b)!important;
    border-right:5px solid var(--er156-solid,#50805b)!important;
    border-radius:15px!important;overflow:hidden!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-heading{
    display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;
    align-items:center!important;gap:4px!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-tags{
    display:flex!important;flex-direction:row!important;align-items:center!important;
    justify-content:flex-end!important;flex-wrap:nowrap!important;
    max-width:min(54vw,190px)!important;gap:3px!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-chip{
    box-sizing:border-box!important;min-height:18px!important;height:18px!important;
    padding:2px 4px!important;font-size:9px!important;line-height:1!important;
    white-space:nowrap!important;border-radius:7px!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-team-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:2px 6px!important;
  }
 }
}