/* ---------- Shared responsive rules ---------- */

/* All three layouts load this file after the page's own stylesheet, so it can adapt the
   components the pages have in common (tables, filter bars, form controls, modals, buttons).
   Page-specific layout changes stay in the page's stylesheet.

   One set of breakpoints for the whole system:
     phones          < 576px
     tablets         576px - 991px
     desktop         992px - 1439px   (css/shared/app-shell.css: sidebar)
     large desktop  >= 1440px          (app-shell.css: content stops at 1400px)

   Stacking order (z-index) used across the system; keep new layers in it:
     1    sticky table headers, inside their .table-wrap
     50   the menu bar on phones and tablets (app-shell.css)
     100  modal overlays (and the modal inside them)
   Every dropdown is a native <select>: the browser draws its list above everything,
   so no dropdown layer is needed. */

/* ---------- Responsive images ---------- */

img {
  max-width: 100%;
}

/* ---------- Scrolling tables ---------- */

/* Tables keep a readable minimum width (set per table in the page CSS) and scroll sideways
   inside their own box; the page itself never scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Shrinkable form fields ---------- */

/* Fields side by side may shrink: a long option in a select must not push the row wider than its box. */
.field-row > .field {
  min-width: 0;
}

.field__select {
  max-width: 100%;
}

/* A placeholder longer than its field ends in "..." instead of being cut mid-word. */
.field__input,
.filter-search {
  text-overflow: ellipsis;
}

/* ---------- Desktop search and filter controls ---------- */

@media (min-width: 992px) {
  /* The date range follows the filters (no wide gap on big screens); it wraps under them when there's no room. */
  .filter-bar {
    justify-content: flex-start;
  }

  /* A select is as wide as its longest option; one very long room or name shouldn't make a huge filter. */
  .filter-chip {
    max-width: 300px;
  }

  /* Lines up with the 38px dropdowns beside it. */
  .date-input {
    height: 38px;
  }
}

/* ---------- Phone and tablet controls ---------- */

@media (max-width: 991.98px) {
  /* 16px text in fields: phones (iPhone Safari) zoom the whole page in when a smaller field is tapped.
     (The :not() parts lift these above the pages' own class rules, e.g. .filter-chip.) */
  input:not([type="checkbox"]):not([type="radio"]),
  select:not([multiple]),
  textarea:not([hidden]) {
    font-size: 16px;
  }

  /* Filter bars: two filters per row (a lone last one uses the whole row), the date range under them. */
  .filter-bar {
    flex-direction: column;
    flex-wrap: nowrap; /* a wrapping column measures its rows before it knows their width (too tall) */
    align-items: stretch;
    justify-content: flex-start;
  }

  .filter-bar__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .filter-bar__chips > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .filter-search,
  .filter-chip {
    width: 100%;
    min-width: 0;
    height: 44px;
  }

  .filter-bar__date-range {
    flex-wrap: wrap;
  }

  .date-input {
    flex: 1 1 140px;
    width: auto;
    min-width: 0;
    height: 44px;
  }

  /* Things you tap: at least 40px. */
  .btn-view,
  .btn-edit,
  .btn-status,
  .btn-assign,
  .btn-respond,
  .btn-resend,
  .btn-return,
  .btn-add,
  .subnav__tab,
  .section-tabs__tab {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Padding, not flex: a <summary> keeps its open/close arrow only as a list item. */
  .approval-history__summary {
    padding: 14px 0;
  }

  .modal__close,
  .calendar__nav,
  .booking-calendar__nav {
    min-width: 40px;
    min-height: 40px;
  }

  .quantity-row__input {
    height: 40px;
  }

  /* Show/hide password: a 40px button inside the field. */
  .field__toggle,
  .pw-toggle {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .field__toggle {
    right: 4px;
  }
}

/* ---------- iPhone and iPad date and time fields ---------- */

/* Safari on iOS only: date and time fields otherwise keep their own width
   (and an empty one collapses), so they could stick out of the layout. */
@supports (-webkit-touch-callout: none) {
  input[type="date"],
  input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    min-height: 44px;
  }

  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
  }
}

/* ---------- Phone layout: titles, filters, modals and forms ---------- */

@media (max-width: 575.98px) {
  .page-header__title {
    font-size: 1.35rem;
  }

  /* "Date Range" on its own line, then [from] to [to]. */
  .filter-bar__date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 8px;
  }

  .filter-bar__date-label {
    grid-column: 1 / -1;
  }

  /* Modals: use the width of the phone, buttons share the row (or wrap). */
  .modal-overlay {
    padding: 12px;
  }

  .modal {
    margin-top: 4px;
    padding: 20px 16px;
  }

  .modal__actions {
    flex-wrap: wrap;
  }

  .modal__actions > * {
    flex: 1 1 auto;
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
  }

  /* Fields that sit side by side on larger screens: one per row. */
  .field-row {
    flex-direction: column;
    gap: 16px;
  }

  /* Selects: a little less side padding (the arrow keeps its room), so longer names still fit. */
  .field__select {
    padding-left: 12px;
    padding-right: 32px;
    background-position: right 12px center;
  }

  .detail-row {
    flex-direction: column;
    gap: 12px;
  }

  /* Buttons under a table use the full width; a record count gets its own line above them. */
  .table-actions {
    flex-wrap: wrap;
  }

  .table-actions > :not(.table-actions__count) {
    flex: 1 1 auto;
    text-align: center;
  }

  .table-actions__count {
    flex-basis: 100%;
  }
}

/* ---------- Small phone date range ---------- */

/* At 320px, two date fields side by side would cut the date short, so they stack. */
@media (max-width: 359.98px) {
  .filter-bar__date-range {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-bar__date-sep {
    justify-self: center;
  }
}