/* Responsive rules shared by the two Zenturio web applications. */

/* Wt centers dialogs itself. The legacy translate(0, 50%) moved their footer
   below short windows. Let long dialog bodies scroll while the footer stays visible. */
.Wt-dialog.dialog {
  transform: none;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  min-width: 0;
}

.Wt-dialog .dialog-layout {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
}

.Wt-dialog .body {
  min-height: 0;
  overflow: auto !important;
}

/* A booking form has the same width constraints with any user agent. */
.zenturio-booking .booking-container,
.zenturio-booking .booking-container-mobile {
  width: min(400px, calc(100vw - 16px));
  max-width: 100%;
  min-height: calc(100vh - 16px);
  min-height: calc(100dvh - 16px);
}

.zenturio-booking .booking-registration-edit {
  min-width: 0;
  width: 100%;
}

/* Keep text readable and inputs usable when landscape height is small. */
.zenturio-booking :is(.booking-text, .booking-text-mobile, .booking-text-important,
    .booking-text-important-mobile, .booking-summary-container, .booking-summary-container-mobile,
    .booking-notes, .booking-notes-mobile, .booking-top, .booking-top-mobile,
    .booking-calendar-month-name, .booking-calendar-day-name,
    .booking-register-error-message, .login-error-message, .counter-booking-complete-text,
    .booking-registration-complete-0, .booking-registration-complete-1, .booking-registration-complete-2) {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.zenturio-booking :is(.booking-input-ok, .booking-input-nok,
    .booking-input-ok-mobile, .booking-input-nok-mobile,
    .booking-registration-entry, .booking-registration-entry-mobile,
    .booking-registration-entry-focused, .booking-registration-entry-mobile-focused) {
  min-height: 44px;
  height: 44px;
  line-height: normal;
  font-size: 16px;
}

.zenturio-booking :is(.booking-push-button, .booking-push-button-mobile,
    .booking-push-button-disabled, .booking-push-button-disabled-mobile) {
  min-height: 44px;
  height: auto;
  max-height: none;
  align-items: center;
}

.zenturio-booking :is([class*="booking-step-active-"], [class*="booking-step-passive-"]) {
  width: 100px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  padding-left: 8px;
}

.zenturio-booking :is(.booking-push-button-label, .booking-push-button-mobile-label) {
  font-size: 16px;
  line-height: 1.3;
  white-space: normal;
}

.zenturio-booking :is(.booking-login-lost-password, .booking-login-lost-password-mobile) {
  min-height: 44px;
  height: auto;
  padding: 10px 0;
  font-size: 16px;
}

.zenturio-booking :is(.booking-accept-gtc, .booking-accept-gtc-mobile, .booking-gtc) {
  font-size: 14px;
  line-height: 1.5;
}

.zenturio-booking :is(.booking-calendar-day, .booking-calendar-day-current) {
  min-width: 40px;
  min-height: 40px;
  font-size: 16px;
  line-height: 40px;
}

.zenturio-booking .booking-notes {
  min-height: 66px;
}

/* Touch targets and dialog controls must not shrink with viewport height. */
:root {
  --ngt-push-button-small-height: max(44px, 5vh);
}

.Wt-dialog :is(input, select) {
  min-height: 32px;
  font-size: 16px;
}

.Wt-dialog .dialog-label {
  white-space: normal;
}

.bookings-area {
  height: auto;
  min-width: 0;
  overflow: auto !important;
  overscroll-behavior: contain;
}

.bookings-grid {
  display: grid;
  grid-auto-rows: 32px;
}

.bookings-area [data-object-name^="box-"] {
  min-width: 44px;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 30px;
}

.bookings-area .booking-field-time {
  height: 32px;
  padding: 0;
  line-height: 32px;
  font-size: 14px;
}

/* The customer team editor uses normal-flow cards, so every field wraps on a
   phone. The operator's compact table keeps its existing presentation. */
.team-player-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  min-width: 0;
}

.team-player-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--ngt-color);
  border-radius: 8px;
}

.team-player-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
  grid-column: span 2;
  order: 5;
}

.team-player-field > label { font-size: 14px; margin: 0; }
.team-player-field :is(input, select) { min-width: 0; min-height: 44px; font-size: 16px; width: 100%; }
.team-player-field input[type="checkbox"] { width: 44px; max-width: 44px; }
.team-player-field-0, .team-player-field-1, .team-player-field-2, .team-player-field-4 {
  grid-column: span 1;
  order: 0;
}
.team-player-field-3 { grid-column: 1 / -1; order: 1; }
.team-player-field-10 { display: none; }
.team-player-field .ngt-push-button-square { min-width: 44px; max-width: 100%; }