/* V1452.175 — consistent slim roster cards and stable Add Shift mobile UI.
   Does not change the underlying roster, shift, notification or billing data. */
@media (max-width:1023px){
  html body #app #page :is(.roster-mobile,.home-roster-list){
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:5px!important;min-width:0!important;max-width:100%!important;width:100%!important;
    margin-left:0!important;margin-right:0!important;overflow:visible!important;overflow-anchor:none!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) > article.er156-card{
    display:block!important;box-sizing:border-box!important;position:relative!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    min-height:0!important;height:auto!important;max-height:none!important;
    margin:0!important;padding:7px 9px 7px 11px!important;
    border:1px solid var(--er156-solid,#50805b)!important;
    border-left:5px solid var(--er156-solid,#50805b)!important;
    border-right:5px solid var(--er156-solid,#50805b)!important;
    border-radius:15px!important;
    background:linear-gradient(110deg,var(--er156-surface,#f4f7f1),var(--er156-soft,#e8f0e5))!important;
    box-shadow:0 2px 5px rgba(29,62,40,.10),inset 0 0 0 1px #ffffff68!important;
    overflow:hidden!important;transform:none!important;animation:none!important;transition:background-color .12s ease,border-color .12s ease!important;
    contain:none!important;color:#18382b!important;cursor:pointer!important;
  }
  html body #app #page .er156-card *{box-sizing:border-box!important;}
  html body #app #page .er156-card .er156-heading{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    gap:5px!important;align-items:start!important;min-width:0!important;
  }
  html body #app #page .er156-card .er156-title{
    display:block!important;min-width:0!important;margin:1px 0 0!important;padding:0!important;
    font:750 15px/1.15 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    letter-spacing:-.1px!important;color:#18382a!important;overflow-wrap:break-word!important;
  }
  html body #app #page .er156-card .er156-tags{
    display:flex!important;flex-direction:row!important;justify-content:flex-end!important;
    align-items:flex-start!important;flex-wrap:wrap!important;gap:3px!important;
    width:auto!important;max-width:min(55%,205px)!important;margin:0!important;
  }
  html body #app #page .er156-card .er156-chip{
    display:inline-flex!important;align-items:center!important;gap:3px!important;
    min-height:20px!important;max-width:100%!important;padding:2px 5px!important;
    font:750 9.5px/1.05 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    border-radius:8px!important;white-space:nowrap!important;box-shadow:none!important;
  }
  html body #app #page .er156-card .er156-chip svg{width:11px!important;height:11px!important;flex:0 0 11px!important;}
  html body #app #page .er156-card .er156-main{display:block!important;margin-top:2px!important;min-width:0!important;}
  html body #app #page .er156-card .er156-info{display:flex!important;flex-wrap:wrap!important;gap:2px 10px!important;min-width:0!important;align-items:center!important;}
  html body #app #page .er156-card .er156-detail{min-width:0!important;gap:3px!important;font-size:10.6px!important;line-height:1.18!important;}
  html body #app #page .er156-card .er156-detail svg{width:11px!important;height:11px!important;flex:0 0 11px!important;}
  html body #app #page .er156-card .er156-time strong{font-size:11.4px!important;line-height:1.18!important;}
  html body #app #page .er156-card .er156-location{flex:1 1 auto!important;}
  html body #app #page .er156-card .er156-location span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;}
  html body #app #page .er156-card .er156-team{margin-top:4px!important;padding-top:4px!important;border-top:1px solid #284c3027!important;}
  html body #app #page .er156-card .er156-team-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:3px 7px!important;min-width:0!important;
  }
  html body #app #page .er156-card .er156-person{display:flex!important;gap:3px!important;align-items:center!important;min-width:0!important;}
  html body #app #page .er156-card .er156-avatar{
    width:18px!important;height:18px!important;flex:0 0 18px!important;
    font-size:7px!important;line-height:1!important;
  }
  html body #app #page .er156-card .er156-person-name{
    flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;
    font:650 10.2px/1.16 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    white-space:nowrap!important;display:block!important;
  }
  html body #app #page .er156-card .er156-person-hours{margin-left:auto!important;font-size:9.8px!important;line-height:1.1!important;white-space:nowrap!important;}
  html body #app #page .er156-card .er156-person-tick,
  html body #app #page .er156-card .er156-person-declined{display:inline-flex!important;vertical-align:middle!important;width:12px!important;height:12px!important;flex:0 0 12px!important;margin-left:2px!important;}
  html body #app #page .er156-card .er156-person-tick svg,
  html body #app #page .er156-card .er156-person-declined svg{height:9px!important;width:9px!important;}
  html body #app #page .er156-card .er175-team-more{font-size:9px!important;color:#4c6750!important;line-height:16px!important;white-space:nowrap!important;}
  html body #app #page .er156-card .er156-actions{margin-top:5px!important;padding:0!important;gap:5px!important;}
  html body #app #page .er156-card .er156-actions.er158-response-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html body #app #page .er156-card .er156-actions.er158-start-actions{display:flex!important;justify-content:flex-end!important;width:100%!important;}
  html body #app #page .er156-card .er156-actions .er156-action:is(.er158-start,.er158-decline,.er158-accept,.er158-publish){
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:auto!important;min-width:90px!important;min-height:29px!important;height:29px!important;
    padding:3px 11px!important;border-radius:8px!important;font-size:10.5px!important;line-height:1.1!important;
  }
  html body #app #page .er156-card .er156-actions.er158-response-actions .er156-action{width:100%!important;}
  html body #app #page .er156-card .er158-play-glyph{width:17px!important;height:17px!important;flex:0 0 17px!important;font-size:7px!important;}
  html body #app #page .er156-card.er156-status-draft{background:linear-gradient(110deg,#f4f5f6,#e8ebef)!important;border-color:#8b949b!important;}
  html body #app #page .er156-card.er159-solo-rejected{background:linear-gradient(110deg,#fff1f0,#fbe6e6)!important;border-color:#c75755!important;}
  /* Employee calendar: restore compact, square original strip rather than the later 64px raised tiles. */
  html body.ww-roster-active #app #page .ww521-roster-controls:not(.is-admin) .rst-days .rst-day{
    height:55px!important;min-height:55px!important;max-height:55px!important;
    padding:5px 1px!important;gap:0!important;border-radius:10px!important;
    background:#fffefa!important;border:1px solid #d8e1d6!important;
    box-shadow:none!important;transform:none!important;animation:none!important;
  }
  html body.ww-roster-active #app #page .ww521-roster-controls:not(.is-admin) .rst-days .rst-day.sel{
    background:#315d45!important;color:white!important;border-color:#315d45!important;
  }
  html body.ww-roster-active #app #page .ww521-roster-controls:not(.is-admin) .rst-days .rst-day.sel :is(.rd-dow,.rd-num){color:white!important;}
  html body.ww-roster-active #app #page .ww521-roster-controls:not(.is-admin) .rst-days .rst-day .rd-num{font-size:17px!important;line-height:1.1!important;margin-top:2px!important;}
  html body.ww-roster-active #app #page .ww521-roster-controls:not(.is-admin) .rst-days .rst-day .rd-dow{font-size:8.4px!important;}
  html body.ww-roster-active #app #page .ww521-roster-controls:not(.is-admin) .rst-days .rst-day :is(.rd-cnt,.rd-stats,.er1217-day-job-count){height:13px!important;min-height:13px!important;bottom:3px!important;font-size:8px!important;}
}
@media(max-width:355px){
 html body #app #page .er156-card .er156-tags{max-width:58%!important;}
 html body #app #page .er156-card .er156-chip{font-size:8.6px!important;padding:2px 4px!important;}
 html body #app #page .er156-card .er156-title{font-size:13.8px!important;}
 html body #app #page .er156-card .er156-person-name{font-size:9.3px!important;}
}
/* iOS notch and home indicator protection for ALL actual Add Shift subpages. */
@media(max-width:760px){
 html body[data-modal-type="shift"] #modalHost .shift-modal.er163-add-shift,
 html body[data-modal-type="shift"] #modalHost .shift-modal.er173-panel{
   display:flex!important;flex-direction:column!important;overflow:hidden!important;
   height:100dvh!important;max-height:100dvh!important;min-height:0!important;
 }
 html body[data-modal-type="shift"] #modalHost .shift-modal .modal-head{
   box-sizing:border-box!important;position:relative!important;z-index:4!important;flex:0 0 auto!important;
   padding-top:calc(10px + env(safe-area-inset-top,0px))!important;
   min-height:calc(60px + env(safe-area-inset-top,0px))!important;
 }
 html body[data-modal-type="shift"] #modalHost .shift-modal .modal-head :is(.er163-back,.modal-x,.modal-back,button){touch-action:manipulation!important;pointer-events:auto!important;flex-shrink:0!important;}
 html body[data-modal-type="shift"] #modalHost .shift-modal .modal-body{
   flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
   overscroll-behavior:contain!important;scroll-behavior:auto!important;overflow-anchor:none!important;
   -webkit-overflow-scrolling:touch!important;
 }
 html body[data-modal-type="shift"] #modalHost .shift-modal .modal-foot{
   flex:0 0 auto!important;box-sizing:border-box!important;position:relative!important;z-index:5!important;
   padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
   min-height:calc(60px + env(safe-area-inset-bottom,0px))!important;
 }
 html body[data-modal-type="shift"] #modalHost .er173-panel .er932-panel{padding:10px!important;gap:9px!important;}
 html body[data-modal-type="shift"] #modalHost .er173-staff .er932-staff-list{max-height:none!important;overflow:visible!important;gap:3px!important;margin:0!important;}
 html body[data-modal-type="shift"] #modalHost .er173-staff .er932-staff-row.er173-staff-row{min-height:52px!important;padding:6px 7px!important;gap:5px!important;}
 html body[data-modal-type="shift"] #modalHost .er173-staff .er1018-staff-select{gap:6px!important;min-width:0!important;}
 html body[data-modal-type="shift"] #modalHost .er173-staff .er932-staff-av{width:31px!important;height:31px!important;flex-basis:31px!important;}
 html body[data-modal-type="shift"] #modalHost .er173-staff .er932-staff-copy b{font-size:12.5px!important;}
 html body[data-modal-type="shift"] #modalHost .er173-staff .er173-availability{margin-left:auto!important;font-size:9px!important;flex-shrink:0!important;padding:5px 7px!important;}
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .er163-staff-shell{gap:5px!important;}
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .er163-staff-summary{min-width:0!important;}
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .er163-person{min-width:0!important;}
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .er163-on-site{align-items:center!important;min-height:35px!important;padding:7px 9px!important;}
 html body[data-modal-type="shift"] #modalHost .er164-approved-design :is(.er163-staff-grid,.er163-staff-summary,.er1367-main){overflow-anchor:none!important;}
 /* No collapsible Schedule & Publishing arrow: the settings are always visible. */
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .er163-publishing>summary{cursor:default!important;pointer-events:none!important;}
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .er163-publishing>summary :is(svg,.chevron,.er163-arrow,.arrow){display:none!important;}
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .er163-publishing>summary::after,
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .er163-publishing>summary::marker{content:none!important;display:none!important;}
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .er174-publishing-settings>section.er174-colour-row{
   grid-template-columns:90px minmax(0,1fr)!important;gap:6px!important;align-items:center!important;
 }
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .er174-colour-row .er932-colour-row{margin:0!important;min-width:0!important;}
 /* stable sticky footer buttons, no jumping on content scroll */
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .modal-foot{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:center!important;gap:5px!important;}
 html body[data-modal-type="shift"] #modalHost .er164-approved-design .modal-foot :is(.er932-foot-cancel,.er163-save-draft,.er163-publish-now){min-height:42px!important;height:42px!important;padding:6px 4px!important;font-size:11.5px!important;white-space:nowrap!important;}
 /* Subscreens introduced in V174 also obey top/bottom safe-area inset. */
 .er174-config-overlay{box-sizing:border-box!important;height:100dvh!important;padding:0!important;}
 .er174-config-sheet{height:100dvh!important;max-height:100dvh!important;min-height:0!important;}
 .er174-config-sheet header{box-sizing:border-box!important;height:auto!important;min-height:calc(60px + env(safe-area-inset-top,0px))!important;flex:0 0 auto!important;padding-top:calc(10px + env(safe-area-inset-top,0px))!important;}
 .er174-config-content{min-height:0!important;overscroll-behavior:contain!important;overflow-anchor:none!important;}
 .er174-config-sheet footer{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;flex:0 0 auto!important;}
}
/* Solid but restrained client colours instead of near-white pastel fills. */
html body[data-modal-type="shift"] #modalHost .er173-client-picker .er932-client-row.er173-client-row{
 background:color-mix(in srgb,var(--er173-accent,#476b54) 21%,#fff)!important;
 border:1px solid color-mix(in srgb,var(--er173-accent,#476b54) 30%,#fff)!important;
 transform:none!important;animation:none!important;
}
html body[data-modal-type="shift"] #modalHost .er173-client-picker .er932-client-row.er173-picked{
 background:color-mix(in srgb,var(--er173-accent,#476b54) 29%,#fff)!important;
 border-color:var(--er173-accent,#476b54)!important;
}
html body[data-modal-type="shift"] #modalHost .er173-client-picker .er173-client-icon{
 background:var(--er173-accent,#476b54)!important;color:#fff!important;
}
@media(prefers-reduced-motion:reduce){html body[data-modal-type="shift"] #modalHost .shift-modal *,html body #app #page .er156-card *{transition:none!important;animation:none!important;}}
/* Dashboard cards use precisely the same inner treatments as roster cards.
   The earlier roster-only styles otherwise leave dashboard avatars/chips as plain text. */
@media(max-width:1023px){
 html body #app #page .home-roster-list .er156-card .er156-avatar{
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 18px!important;width:18px!important;height:18px!important;
  border-radius:50%!important;background:var(--person-colour,#437755)!important;
  color:white!important;-webkit-text-fill-color:white!important;
  font:800 7px/1 system-ui,-apple-system,sans-serif!important;
 }
 html body #app #page .home-roster-list .er156-card .er156-chip{
  border:1px solid rgba(47,100,53,.40)!important;border-radius:8px!important;
  background:rgba(255,255,255,.72)!important;color:#28553b!important;
  align-items:center!important;justify-content:center!important;
 }
 html body #app #page .home-roster-list .er156-card .er156-person-tick{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:#23804d!important;border-radius:50%!important;color:white!important;
 }
 html body #app #page .home-roster-list .er156-card .er156-person-tick svg{stroke:white!important;}
 html body #app #page .home-roster-list .er156-card .er156-person-declined{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:#a95551!important;border-radius:50%!important;color:#fff!important;
 }
 /* Preserve working clock-in controls, but keep them a compact edge-aligned action. */
 html body.ww-roster-active #app #page .roster-mobile .er156-card.er156-employee .er156-actions.er158-start-actions,
 html body #app #page .home-roster-list .er156-card.er156-employee .er156-actions.er158-start-actions{
  display:flex!important;justify-content:flex-end!important;align-items:center!important;
  margin-top:4px!important;padding:0!important;gap:4px!important;
 }
 html body.ww-roster-active #app #page .roster-mobile .er156-card.er156-employee .er156-actions .er156-action.er158-start,
 html body #app #page .home-roster-list .er156-card.er156-employee .er156-actions .er156-action.er158-start{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:none!important;width:auto!important;max-width:100%!important;
  min-width:98px!important;max-height:28px!important;height:28px!important;min-height:28px!important;
  padding:3px 9px!important;gap:5px!important;border-radius:8px!important;
  background:#237b4d!important;color:white!important;box-shadow:none!important;
  font:700 10.4px/1.1 system-ui,-apple-system,sans-serif!important;
 }
 html body.ww-roster-active #app #page .roster-mobile .er156-card.er156-employee .er156-actions .er158-play-glyph,
 html body #app #page .home-roster-list .er156-card.er156-employee .er156-actions .er158-play-glyph{
  width:13px!important;height:13px!important;flex:0 0 13px!important;font-size:6px!important;
 }
}