/* =====================================================================
   Responsive behaviour — target widths 1440 / 1280 / 1024 / 768 / 390 / 375
   (+ 320 reflow check, WCAG 1.4.10). Bootstrap tiers: lg 992, xl 1200.
   Layouts restructure — they are not just scaled down.
   ===================================================================== */

/* ≥1400: wide desktop — more breathing room */
@media (min-width: 1400px) {
  .rp-main { padding-inline: var(--rp-space-7); }
  .rp-bk-layout { grid-template-columns: minmax(0, 1fr) 24rem; }
}

/* 992–1199: small desktop / 1024 tablet landscape */
@media (max-width: 1199.98px) {
  .rp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-detail { grid-template-columns: minmax(0, 1fr) 17rem; }
}

/* <992: tablet portrait & phones — sidebar becomes off-canvas, summary moves to a bottom bar */
@media (max-width: 991.98px) {
  .rp-topbar { padding-inline: var(--rp-space-4); }
  .rp-main { padding: var(--rp-space-5) var(--rp-space-4) var(--rp-space-7); }
  .rp-sidebar.offcanvas-lg { --bs-offcanvas-width: min(20rem, 86vw); }

  .rp-detail { grid-template-columns: 1fr; }
  .rp-detail__aside { order: -1; }

  .rp-auth { grid-template-columns: 1fr; }
  .rp-auth__aside { display: none; }

  .rp-bk-layout { grid-template-columns: 1fr; }
  .rp-summary { position: static; }
  .rp-bk-layout > .rp-summary-col { display: none; }
  .rp-selection-bar { display: flex; }
  .rp-bk-main { padding-bottom: var(--rp-space-5); }
  /* Keep focused/scrolled-to controls clear of the sticky selection bar (WCAG 2.4.11). */
  :root:has(.rp-selection-bar:not([hidden])) { scroll-padding-bottom: 6rem; }
}

/* <768: phones — tables become record cards, forms go single column */
@media (max-width: 767.98px) {
  .rp-grid--2,
  .rp-grid--3 { grid-template-columns: 1fr; }
  .rp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rp-page-header { align-items: stretch; margin-bottom: var(--rp-space-5); }
  .rp-page-header__actions { width: 100%; }
  .rp-page-header__actions > .btn-primary { flex: 1 1 auto; }

  .rp-toolbar { padding: var(--rp-space-4); }
  .rp-card__header,
  .rp-card__body { padding-inline: var(--rp-space-4); }
  .rp-card { padding: var(--rp-space-4); }
  .rp-card.rp-card--flush { padding: 0; }
  .rp-dl { grid-template-columns: 1fr; gap: var(--rp-space-1); }
  .rp-dl dd { margin-bottom: var(--rp-space-3); }

  .rp-event-card { padding: var(--rp-space-4); }
  .rp-step { padding: var(--rp-space-4) var(--rp-space-4) var(--rp-space-5); }
  .rp-step__actions { flex-direction: column-reverse; }
  .rp-step__actions .btn { width: 100%; }
  .rp-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-slot__time { font-size: var(--rp-fs-base); }
  .rp-cal { max-width: none; }
  .rp-result__card { padding: var(--rp-space-6) var(--rp-space-4); }

  .rp-toast-region { right: var(--rp-space-3); left: var(--rp-space-3); bottom: calc(var(--rp-space-3) + 4.5rem); width: auto; }
  .rp-bars li { grid-template-columns: 1fr auto; }
  .rp-bars li .rp-meter__bar { grid-column: 1 / -1; order: 3; }
  .rp-codes { grid-template-columns: 1fr; }
}

/* ≤400: 390 / 375 / 320 */
@media (max-width: 400px) {
  .rp-grid--4 { grid-template-columns: 1fr; }
  .rp-event-facts { flex-direction: column; }
  .rp-bk-vendor__name { max-width: 11rem; }
  .rp-stepper .form-control { width: 4rem; }
  .rp-tracker { grid-template-columns: 1fr; }
  .rp-auth__panel { padding: var(--rp-space-6) var(--rp-space-4); }
}

@media (max-width: 340px) {
  .rp-slots { grid-template-columns: 1fr; }
}