/* EarthRoster V1452.176 — do not alter business rules, employee actions or card theme.
   One shared compact card UI for mobile roster and employee/admin dashboards. */
@media (max-width: 1023px) {
  html body #app #page :is(.roster-mobile,.home-roster-list){
    display:flex!important;flex-flow:column nowrap!important;align-items:stretch!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    gap:5px!important;overflow:visible!important;overflow-anchor:none!important;
    scroll-behavior:auto!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list)>article.er156-card {
    display:block!important;position:relative!important;box-sizing:border-box!important;
    min-height:0!important;max-height:none!important;height:auto!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:6px 8px 6px 10px!important;
    border-width:1px!important;border-left-width:5px!important;border-right-width:5px!important;
    border-style:solid!important;border-color: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,.1),inset 0 0 0 1px #ffffff65!important;
    overflow:hidden!important;transform:none!important;animation:none!important;
    transition:none!important;contain:none!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card :is(.er156-heading,.er156-main,.er156-info,.er156-team,.er156-team-grid,.er156-person,.er156-actions){
    min-width:0!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;
    gap:4px!important;align-items:center!important;min-height:18px!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-title{
    display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    font:750 14px/1.15 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    letter-spacing:-.12px!important;margin:0!important;max-width:100%!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-tags{
    display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:flex-end!important;
    gap:3px!important;width:max-content!important;max-width:min(54vw,190px)!important;
    min-height:18px!important;height:auto!important;margin:0!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-chip{
    display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;
    min-height:18px!important;height:18px!important;padding:2px 4px!important;
    font:700 9px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    white-space:nowrap!important;max-width:100%!important;border-radius:7px!important;
    border:1px solid rgba(46,98,58,.34)!important;background:#ffffffbd!important;color:#28553b!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-chip svg{
    flex:0 0 10px!important;width:10px!important;height:10px!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-main{
    display:block!important;margin-top:3px!important;padding:0!important;height:auto!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-info{
    display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;
    gap:5px!important;white-space:nowrap!important;height:14px!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-detail{
    font:550 10px/1.1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    display:inline-flex!important;align-items:center!important;gap:3px!important;
    min-width:0!important;max-width:100%!important;white-space:nowrap!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-time strong{
    font:700 10px/1.1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    white-space:nowrap!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-location{
    overflow:hidden!important;text-overflow:ellipsis!important;display:inline-flex!important;
    flex:initial!important;min-width:0!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-location span{
    min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-team{
    margin-top:3px!important;padding-top:3px!important;border-top:1px solid rgba(40,76,48,.17)!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;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-person{
    display:flex!important;align-items:center!important;min-height:16px!important;height:16px!important;
    gap:3px!important;font-size:10px!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-avatar{
    display:flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 16px!important;width:16px!important;height:16px!important;
    border-radius:50%!important;background:var(--person-colour,#437755)!important;
    font:800 6.5px/1 system-ui,-apple-system,sans-serif!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-person-name{
    flex:1 1 auto!important;min-width:0!important;display:flex!important;align-items:center!important;
    gap:2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    font:650 10px/1.1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-person-hours{
    flex:0 0 auto!important;white-space:nowrap!important;font:700 9.5px/1 system-ui,-apple-system,sans-serif!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-actions{
    margin-top:3px!important;padding:0!important;min-height:0!important;gap:4px!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-actions.er158-start-actions{
    display:flex!important;justify-content:flex-end!important;align-items:center!important;height:26px!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-actions.er158-start-actions .er158-start{
    width:auto!important;min-width:102px!important;max-width:100%!important;height:26px!important;min-height:26px!important;
    padding:3px 9px!important;border-radius:8px!important;
    background:#246f45!important;color:white!important;font:700 10px/1 system-ui,-apple-system,sans-serif!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-actions.er158-response-actions{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-actions.er158-response-actions button{
    min-height:28px!important;height:28px!important;width:100%!important;
  }
  /* The client theme owns each edge's colour, including the same rounded profile. */
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card.er159-solo-rejected{
    border-color:#c75755!important;background:linear-gradient(110deg,#fff1f0,#fbe6e6)!important;
  }
  /* Restore the employee’s simple seven-day calendar, leaving admin untouched. */
  html body #app #page .ww521-roster-controls.is-employee{
    background:#fcfcf9!important;border-radius:16px!important;box-shadow:none!important;
  }
  html body #app #page .ww521-roster-controls.is-employee .rst-days{
    display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:4px!important;padding:0!important;margin:0!important;
  }
  html body #app #page .ww521-roster-controls.is-employee .rst-day{
    min-height:53px!important;height:53px!important;max-height:53px!important;
    width:100%!important;min-width:0!important;padding:4px 0!important;gap:2px!important;
    border-radius:10px!important;border:1px solid #dbe5d9!important;
    background:#ffffff!important;box-shadow:none!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    transform:none!important;transition:none!important;
  }
  html body #app #page .ww521-roster-controls.is-employee .rst-day.sel{
    background:#326c45!important;border-color:#326c45!important;color:#fff!important;
  }
  html body #app #page .ww521-roster-controls.is-employee .rst-day.sel :is(.rd-dow,.rd-num){color:#fff!important;}
  html body #app #page .ww521-roster-controls.is-employee .rd-dow{
    font:750 8px/1 system-ui,-apple-system,sans-serif!important;letter-spacing:.02em!important;
  }
  html body #app #page .ww521-roster-controls.is-employee .rd-num{
    font:750 17px/1.05 system-ui,-apple-system,sans-serif!important;
  }
  html body #app #page .ww521-roster-controls.is-employee .rd-cnt{
    width:14px!important;min-width:14px!important;height:14px!important;
    font-size:8px!important;line-height:14px!important;
  }
}
@media (max-width:355px) {
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-title{font-size:12.8px!important;}
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-chip{font-size:8.4px!important;padding:2px 3px!important;}
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-tags{max-width:59vw!important;}
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-detail{font-size:9.3px!important;}
  html body #app #page :is(.roster-mobile,.home-roster-list) .er156-card .er156-time strong{font-size:9.3px!important;}
}
/* All Add Shift modal and option screens must stay inside the visible iPhone viewport.
   Header and footer do not scroll away with page content. */
@media (max-width:760px) {
  html body[data-modal-type="shift"] #modalHost .shift-modal{
    display:flex!important;flex-direction:column!important;min-height:0!important;
    height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;
    padding:0!important;overscroll-behavior:none!important;
  }
  html body[data-modal-type="shift"] #modalHost .shift-modal .modal-head{
    position:relative!important;z-index:12!important;flex:0 0 auto!important;
    min-height:calc(54px + env(safe-area-inset-top,0px))!important;
    padding-top:calc(8px + env(safe-area-inset-top,0px))!important;
    box-sizing:border-box!important;transform:none!important;
  }
  html body[data-modal-type="shift"] #modalHost .shift-modal .modal-head :is(button,.modal-x,.er163-back){
    position:relative!important;z-index:14!important;min-width:40px!important;min-height:40px!important;
    pointer-events:auto!important;touch-action:manipulation!important;
  }
  html body[data-modal-type="shift"] #modalHost .shift-modal .modal-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;overflow-anchor:none!important;
    scroll-behavior:auto!important;-webkit-overflow-scrolling:touch!important;
  }
  html body[data-modal-type="shift"] #modalHost .shift-modal .modal-foot{
    position:relative!important;z-index:12!important;flex:0 0 auto!important;
    box-sizing:border-box!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    transform:none!important;
  }
  html body[data-modal-type="shift"] #modalHost .shift-modal .modal-foot button{
    position:relative!important;min-height:42px!important;touch-action:manipulation!important;
  }
  /* Small popup pickers remain anchored to their fields, never fullscreen. */
  html body .er174-time-pop{max-width:calc(100vw - 24px)!important;box-sizing:border-box!important;}
  html body .er174-config-overlay .er174-config-sheet,
  html body .er174-config-sheet{
    height:100dvh!important;max-height:100dvh!important;min-height:0!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important;
  }
  html body .er174-config-sheet header{
    position:relative!important;z-index:12!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 .er174-config-sheet .er174-config-content{
    flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;
    overscroll-behavior-y:contain!important;overflow-anchor:none!important;
  }
  html body .er174-config-sheet footer{
    flex:0 0 auto!important;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
  html body #er963NotesSheet.er175-checklist-page .er963-sheet-head{
    min-height:calc(60px + env(safe-area-inset-top,0px))!important;
    padding-top:calc(9px + env(safe-area-inset-top,0px))!important;
  }
  html body #er963NotesSheet.er175-checklist-page .er963-sheet-foot{
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
}
@media(max-width:1023px){
  /* Earlier roster-only specificity added another 10px of padding. Neutralise it
     so the SAME components have the SAME height on both dashboard and roster. */
  html body.ww-roster-active #app #page .roster-mobile > article.er156-card{
    padding:6px 8px 6px 10px!important;
  }
  /* Earlier calendar styles use content-box; padding was making a 53px control
     measure 74px on mobile. Restore the true compact sizing. */
  html body.ww-roster-active #app #page .ww521-roster-controls.is-employee .rst-days > .rst-day{
    box-sizing:border-box!important;min-height:54px!important;max-height:54px!important;height:54px!important;
    padding:3px 0!important;
  }
}
/* The long-standing er103 calendar layer contains !important 74px sizing.
   Important declarations inside that layer beat unlayered !important rules;
   amend the employee calendar in the SAME layer rather than fighting it. */
@layer er103 {
  @media (max-width:1023px) {
    #page .ww521-roster-controls.is-employee .rst-days > button.rst-day {
      box-sizing:border-box!important;
      display:grid!important;grid-template-columns:minmax(0,1fr)!important;
      grid-template-rows:10px 19px 12px 8px!important;
      min-height:57px!important;height:57px!important;max-height:57px!important;
      padding:3px 0!important;gap:0!important;
      align-content:center!important;align-items:center!important;
      border-radius:10px!important;box-shadow:none!important;
      transition:none!important;transform:none!important;
    }
    #page .ww521-roster-controls.is-employee .rst-days > button.rst-day .rd-num{
      font-size:17px!important;line-height:19px!important;
    }
  }
}
@media(max-width:760px){
  html body[data-modal-type="shift"] #modalHost .er173-panel .modal-head .er176-panel-back{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 40px!important;width:40px!important;min-height:40px!important;height:40px!important;
    margin:0 5px 0 0!important;padding:6px!important;
    border:1px solid rgba(255,255,255,.24)!important;border-radius:9px!important;
    color:#fff!important;background:rgba(255,255,255,.12)!important;
    pointer-events:auto!important;touch-action:manipulation!important;
  }
  html body[data-modal-type="shift"] #modalHost .er173-panel .modal-head .er176-panel-back svg{
    flex:0 0 21px!important;width:21px!important;height:21px!important;
  }
  html body[data-modal-type="shift"] #modalHost .er173-panel .modal-head h2{
    min-width:0!important;flex:1 1 auto!important;white-space:normal!important;
  }
}