/* V1098 Tablet UI + touch scroll tuning
   Goal: larger readable controls, stable tablet fit, native finger scrolling. */

html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

body,
main,
.page-shell,
.menu-page-shell,
#orderTakerSpaRoot {
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* Avoid grid/flex children forcing the page wider than the tablet viewport. */
main *,
.page-shell *,
.menu-page-shell *,
#orderTakerSpaRoot * {
  min-width: 0;
}

/* Staff picker: make it easy to use with a finger and keep scrolling inside it. */
.staff-dropdown-panel {
  width: min(520px, calc(100vw - 28px)) !important;
  max-height: min(68vh, 620px) !important;
  overflow: hidden !important;
  grid-template-rows: auto minmax(0, 1fr);
  touch-action: pan-y !important;
  overscroll-behavior: contain;
}

.staff-dropdown-panel .staff-search-combo,
.staff-dropdown-panel .staff-search-combo input {
  width: 100%;
}

.staff-dropdown-panel .staff-member-list {
  max-height: min(54vh, 500px) !important;
  min-height: 180px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-right: 6px;
}

.staff-member-button {
  min-height: 54px !important;
  padding: 10px 14px !important;
  font-size: 1rem !important;
}

/* Tablet sizing only: improve readability/touch targets without blowing up desktop. */
@media (min-width: 700px) and (max-width: 1400px) {
  html {
    font-size: 17px;
  }

  body {
    line-height: 1.42;
  }

  button,
  .primary-button,
  .secondary-button,
  .staff-inline-button,
  .staff-payment-button {
    min-height: 50px;
    font-size: 0.98rem;
    padding-left: 16px;
    padding-right: 16px;
  }

  input,
  select,
  textarea {
    min-height: 50px;
    font-size: 1rem !important;
  }

  .staff-discount-compact .staff-compact-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(310px, auto) !important;
    gap: 10px;
  }

  .staff-payment-choice {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 9px;
  }

  .staff-payment-button {
    min-height: 52px !important;
    font-size: 0.95rem !important;
  }

  .staff-inline-button {
    min-width: 108px;
    min-height: 52px !important;
    font-size: 1rem !important;
  }

  .staff-dropdown-panel {
    right: 8px !important;
    left: auto !important;
  }

  .staff-dropdown-panel .staff-search-combo input {
    min-height: 52px;
    font-size: 1rem !important;
  }
}

/* Narrow portrait tablets: keep payment controls inside viewport instead of jumping sideways. */
@media (min-width: 700px) and (max-width: 980px) {
  .staff-discount-compact .staff-compact-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .staff-discount-compact .staff-payment-choice {
    grid-column: 1 / -1;
    width: 100%;
  }

  .staff-dropdown-panel {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: 66vh !important;
  }
}