/* TBC v1.7.7.0 safe responsive layer */

/* Hidden overlays can never steal taps. */
.mobile-more-backdrop[hidden],
.pp-mobile-more-backdrop[hidden]{
  display:none!important;
  pointer-events:none!important;
}

/* Sectioned Operations More menu */
.mobile-more-grid.tbc-sectioned{
  display:block!important;
}

.mobile-more-section{
  display:block;
  margin:0 0 15px;
}

.mobile-more-section:last-child{
  margin-bottom:0;
}

.mobile-more-section-heading{
  margin:0 2px 8px;
  color:#50645b;
  font-size:9px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.mobile-more-section-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

.mobile-more-section-administration{
  padding-top:4px;
  border-top:1px solid #e6ded2;
}

@media(max-width:680px){
  html.tbc-phone-ui .sidebar,
  html.tbc-staff-phone .pp-sidebar{
    display:none!important;
  }

  html.tbc-phone-ui .shell,
  html.tbc-staff-phone .pp-shell{
    display:block!important;
    min-height:100dvh!important;
  }

  html.tbc-phone-ui .main,
  html.tbc-staff-phone .pp-main{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  html.tbc-phone-ui .tbc-install-chip{
    display:none!important;
  }

  .mobile-more-section-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:390px){
  .mobile-more-section-grid{
    grid-template-columns:1fr;
  }
}

@media(min-width:761px) and (max-width:1366px){
  html.tbc-staff-tablet .pp-sidebar{
    display:none!important;
  }

  html.tbc-staff-tablet .pp-shell{
    display:block!important;
    min-height:100dvh!important;
  }

  html.tbc-staff-tablet .pp-main{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  html.tbc-staff-tablet .pp-content{
    padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
  }

  html.tbc-staff-tablet .pp-mobile-nav{
    display:grid!important;
  }
}


/* v1.7.7.2 mobile top controls fit */
@media(max-width:680px){

  /* Keep contextual selectors within the shared phone header rail. */
  html.tbc-phone-ui .topbar .top-controls{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  html.tbc-phone-ui .topbar .top-controls>*{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  html.tbc-phone-ui .topbar .top-controls>:only-child{
    grid-column:1 / -1!important;
  }

  html.tbc-phone-ui .top-controls .control,
  html.tbc-phone-ui .top-controls select,
  html.tbc-phone-ui .top-controls input,
  html.tbc-phone-ui #branchSelect,
  html.tbc-phone-ui #dateSelect,
  html.tbc-phone-ui #monthSelect{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:44px!important;
    min-height:44px!important;
    padding:8px 10px!important;
    border-radius:11px!important;
    box-sizing:border-box!important;
    font-size:16px!important; /* avoids iOS input zoom */
    line-height:1.2!important;
  }

  /*
   * STAFF has a locked branch/date status block instead of selects.
   * Give it the same full-width second-row treatment.
   */
  html.tbc-phone-ui .topbar .staff-top-lock{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
  }

  html.tbc-phone-ui .staff-top-lock>span{
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
  }

  html.tbc-phone-ui .staff-top-lock strong{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

/* On narrower iPhones, stack controls rather than squeezing them. */
@media(max-width:430px){
  html.tbc-phone-ui .topbar .top-controls,
  html.tbc-phone-ui .topbar .staff-top-lock{
    grid-template-columns:1fr!important;
  }

  html.tbc-phone-ui .topbar .top-controls>:only-child{
    grid-column:auto!important;
  }
}


/* v1.7.7.3 iOS mobile date centering */
@media(max-width:680px){

  /* Date/month control itself should sit centered in the mobile control row. */
  html.tbc-phone-ui #dateSelect,
  html.tbc-phone-ui #monthSelect{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;

    text-align:center!important;
    text-align-last:center!important;

    padding-left:44px!important;
    padding-right:44px!important;

    -webkit-appearance:none!important;
    appearance:none!important;
  }

  /*
   * Safari/iOS renders type=date text inside its own WebKit pseudo-element,
   * so centering the input alone is not sufficient.
   */
  html.tbc-phone-ui #dateSelect::-webkit-date-and-time-value,
  html.tbc-phone-ui #monthSelect::-webkit-date-and-time-value{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
  }

  html.tbc-phone-ui #dateSelect::-webkit-datetime-edit,
  html.tbc-phone-ui #monthSelect::-webkit-datetime-edit{
    display:flex!important;
    width:100%!important;
    justify-content:center!important;
    align-items:center!important;
    padding:0!important;
    margin:0!important;
  }

  html.tbc-phone-ui #dateSelect::-webkit-datetime-edit-fields-wrapper,
  html.tbc-phone-ui #monthSelect::-webkit-datetime-edit-fields-wrapper{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    width:auto!important;
    margin:0 auto!important;
  }

  /* Keep the native picker target on the right without affecting text center. */
  html.tbc-phone-ui #dateSelect::-webkit-calendar-picker-indicator,
  html.tbc-phone-ui #monthSelect::-webkit-calendar-picker-indicator{
    position:absolute!important;
    right:12px!important;
    width:22px!important;
    height:22px!important;
    margin:0!important;
    opacity:.9!important;
  }

  /* One-control topbars should remain centered as a full-width control. */
  html.tbc-phone-ui .topbar .top-controls>:only-child{
    width:100%!important;
    justify-self:center!important;
    grid-column:1 / -1!important;
  }
}


/* v1.7.7.4 staff phone schedule alignment */
@media(max-width:680px){
  /* -------------------------------------------------------------
     My Schedule date + Today controls
     ------------------------------------------------------------- */

  html.tbc-staff-phone .my-schedule-head,
  html.tbc-staff-phone .pp-page-head:has([data-my-schedule-date]){
    display:block!important;
    margin-bottom:14px!important;
  }

  html.tbc-staff-phone .my-schedule-date-controls,
  html.tbc-staff-phone .pp-page-head:has([data-my-schedule-date]) .pp-controls{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) 104px!important;
    align-items:stretch!important;
    gap:7px!important;

    margin:12px 0 0!important;
    padding:6px!important;

    border-radius:15px!important;
    box-sizing:border-box!important;
  }

  html.tbc-staff-phone .my-schedule-date-controls .pp-input,
  html.tbc-staff-phone .pp-page-head:has([data-my-schedule-date]) .pp-input{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    height:48px!important;
    min-height:48px!important;

    margin:0!important;
    padding:0 12px!important;

    box-sizing:border-box!important;
    text-align:center!important;
    text-align-last:center!important;
    font-size:16px!important;
  }

  html.tbc-staff-phone .my-schedule-date-controls .pp-btn,
  html.tbc-staff-phone .pp-page-head:has([data-my-schedule-date]) .pp-controls .pp-btn{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:48px!important;
    min-height:48px!important;

    margin:0!important;
    padding:0 10px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    box-sizing:border-box!important;
    font-size:12px!important;
    line-height:1!important;
  }

  /* iOS date internals: keep text visually centered. */
  html.tbc-staff-phone [data-my-schedule-date]::-webkit-date-and-time-value{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
  }

  html.tbc-staff-phone [data-my-schedule-date]::-webkit-datetime-edit{
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
    padding:0!important;
  }

  html.tbc-staff-phone [data-my-schedule-date]::-webkit-datetime-edit-fields-wrapper{
    margin:0 auto!important;
  }

  /* -------------------------------------------------------------
     Day / Week / Month segmented control
     ------------------------------------------------------------- */

  html.tbc-staff-phone .my-schedule-view-tabs{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;

    margin:0 0 14px!important;
    padding:5px!important;
  }

  html.tbc-staff-phone .my-schedule-view-tabs .pp-btn{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    min-height:44px!important;
    height:44px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    margin:0!important;
    padding:0 6px!important;

    box-sizing:border-box!important;
    font-size:12px!important;
  }
}

/* Very narrow iPhones: stack date and Today rather than squeezing. */
@media(max-width:360px){

  html.tbc-staff-phone .my-schedule-date-controls,
  html.tbc-staff-phone .pp-page-head:has([data-my-schedule-date]) .pp-controls{
    grid-template-columns:1fr!important;
  }

}


/* v1.7.7.5 staff phone schedule controls */
@media(max-width:680px){
  /*
   * My Schedule:
   * stop trying to share one rounded control row between iOS date input
   * and Today. They become two clean, full-width controls.
   */
  html.tbc-staff-phone .my-schedule-date-controls,
  html.tbc-staff-phone .pp-page-head:has([data-my-schedule-date]) .pp-controls{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;

    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;

    margin:12px 0 0!important;
    padding:7px!important;

    align-items:stretch!important;
    justify-items:stretch!important;

    box-sizing:border-box!important;
    border-radius:15px!important;
  }

  html.tbc-staff-phone .my-schedule-date-controls .pp-input,
  html.tbc-staff-phone .pp-page-head:has([data-my-schedule-date]) .pp-input,
  html.tbc-staff-phone [data-my-schedule-date]{
    position:relative!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    height:50px!important;
    min-height:50px!important;

    margin:0!important;
    padding-left:42px!important;
    padding-right:42px!important;

    box-sizing:border-box!important;

    text-align:center!important;
    text-align-last:center!important;

    font-size:16px!important;
    line-height:1.2!important;
  }

  html.tbc-staff-phone .my-schedule-date-controls .pp-btn,
  html.tbc-staff-phone .pp-page-head:has([data-my-schedule-date]) .pp-controls .pp-btn{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    height:48px!important;
    min-height:48px!important;

    margin:0!important;
    padding:0 12px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    box-sizing:border-box!important;

    font-size:12px!important;
    line-height:1!important;
  }

  /* iOS/Safari date internals */
  html.tbc-staff-phone [data-my-schedule-date]::-webkit-date-and-time-value{
    display:block!important;
    width:100%!important;

    margin:0!important;
    padding:0!important;

    text-align:center!important;
  }

  html.tbc-staff-phone [data-my-schedule-date]::-webkit-datetime-edit{
    display:flex!important;
    width:100%!important;

    align-items:center!important;
    justify-content:center!important;

    margin:0!important;
    padding:0!important;
  }

  html.tbc-staff-phone [data-my-schedule-date]::-webkit-datetime-edit-fields-wrapper{
    display:flex!important;
    justify-content:center!important;

    width:auto!important;

    margin:0 auto!important;
    padding:0!important;
  }

  html.tbc-staff-phone [data-my-schedule-date]::-webkit-calendar-picker-indicator{
    position:absolute!important;
    right:12px!important;

    width:20px!important;
    height:20px!important;

    margin:0!important;
  }

  /*
   * Keep Day / Week / Month perfectly aligned after the control stack.
   */
  html.tbc-staff-phone .my-schedule-view-tabs{
    width:100%!important;

    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;

    gap:5px!important;

    margin:0 0 14px!important;
    padding:5px!important;

    box-sizing:border-box!important;
  }

  html.tbc-staff-phone .my-schedule-view-tabs .pp-btn{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:46px!important;
    min-height:46px!important;

    margin:0!important;
    padding:0 5px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    box-sizing:border-box!important;

    font-size:12px!important;
  }
}