/* ============================================================
   Sentosa B2B Marketplace - responsive layer
   Annex A S/No. 50 (Mandatory, Phase 1): the application must be web-responsive
   across iOS and Android smart devices, with complete access to the portal and
   its features. SDC's Reply No. 2, Q35 confirms responsive/mobile-first web is
   what is required; no native app and no PWA mandate.
   Reply No. 2, Q32: WCAG 2.1 Level AA applies to the responsive views too, so
   touch targets, focus order and text size must hold up at small widths.

   The portals are built with inline styles, which media queries cannot reach.
   React serialises grid templates predictably (repeat(3, 1fr) with a space),
   so the reflow rules below match on the style attribute. Bespoke layouts that
   cannot be matched generically carry their own class.
   Breakpoints: 1024 tablet landscape, 860 tablet portrait, 600 phone.
   ============================================================ */

/* ---------- 1024px and below: drop the widest desktop-only splits ---------- */
@media (max-width: 1024px) {
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns: 232px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Sticky side panels stop sticking once they are stacked */
  [style*="position: sticky"] { position: static !important; }

  /* 4-up KPI rows become 2-up */
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- 860px and below: tablet portrait ---------- */
@media (max-width: 860px) {
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Portal side rails become a horizontal strip above the working area */
  .sm-shell { flex-direction: column !important; height: auto !important; }
  .sm-shell > aside {
    width: 100% !important; height: auto !important;
    flex-direction: row !important; align-items: center;
    overflow-x: auto; overflow-y: hidden;
    border-bottom: 1px solid #2a2a2a;
  }
  .sm-shell > aside > div:first-child { border-bottom: 0 !important; flex: none; }
  .sm-shell > aside > nav {
    flex-direction: row !important; flex: 1;
    overflow-x: auto; padding: 10px 12px !important; gap: 6px !important;
  }
  .sm-shell > aside > nav button { white-space: nowrap; flex: none; }
  /* the account block at the foot of the rail is redundant on a strip */
  .sm-shell > aside > div:last-child { display: none !important; }
  .sm-work { overflow: visible !important; }
}

/* ---------- 600px and below: phone ---------- */
@media (max-width: 600px) {
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Screen padding tightens so content is not squeezed */
  [style*="padding: 32px"] { padding: 18px !important; }
  [style*="padding: 28px 24px"] { padding: 20px 16px !important; }
  [style*="padding: 40px 24px 44px"] { padding: 28px 16px 32px !important; }
  [style*="padding: 24px 24px 8px"] { padding: 16px 16px 8px !important; }

  h1 { font-size: 1.75rem !important; line-height: 1.18 !important; }
  h2 { font-size: 1.35rem !important; }
}

/* ---------- Buyer top bar ----------
   Stacks into three rows on small screens: identity and account, then search,
   then the section nav which scrolls horizontally. Explicit order values keep
   that arrangement stable regardless of DOM order. */
@media (max-width: 1100px) {
  .sm-topbar { height: auto !important; flex-wrap: wrap; gap: 12px !important;
    padding-top: 12px !important; padding-bottom: 12px !important; row-gap: 12px; }
  .sm-topbar > *:nth-child(1) { order: 1; }              /* brand lockup */
  .sm-topbar > *:nth-child(5) { order: 2; }              /* cart */
  .sm-topbar > *:nth-child(6) { order: 3; margin-left: auto; }  /* account */
  .sm-topbar > *:nth-child(4) { order: 4; }              /* language */
  .sm-topbar .sm-search { order: 5; flex-basis: 100% !important; max-width: none !important; }
  .sm-topbar nav { order: 6; flex-basis: 100% !important; margin-left: 0 !important;
    overflow-x: auto; gap: 2px !important; }
  .sm-topbar nav button { white-space: nowrap; flex: none; }
}
@media (max-width: 600px) {
  .sm-topbar .sm-account-name { display: none; }
  .sm-topbar > *:nth-child(4) { order: 3; }              /* language beside cart */
}

/* ---------- Bookings list ---------- */
/* Fixed tracks guarantee column alignment on desktop; on small screens the row
   becomes a stacked card and the header is hidden, since a header cannot label
   a stacked layout. */
@media (max-width: 1024px) {
  .sm-bookings-head { display: none !important; }
  .sm-bookings-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    row-gap: 10px !important; column-gap: 14px !important;
  }
  .sm-bookings-row > :nth-child(2) { grid-column: 1 / -1; }
  .sm-bookings-row > :nth-child(3) { grid-column: 1 / -1; }
  .sm-bookings-row > :nth-child(4) { text-align: left !important; }
  .sm-bookings-row > :nth-child(6) { display: none; }
}

/* ---------- Landing page ---------- */
@media (max-width: 860px) {
  .hero-stack { display: none; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .portals { grid-template-columns: minmax(0, 1fr) !important; }
  .split, .split.reverse { grid-template-columns: minmax(0, 1fr) !important; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer .inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .why-grid, .steps { grid-template-columns: minmax(0, 1fr) !important; }
  .footer .inner { grid-template-columns: minmax(0, 1fr) !important; }
  .topbar nav { display: none; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* ---------- Tables ---------- */
/* Every data table already sits in an overflow-x container; make the scroll
   affordance obvious and keep rows from collapsing illegibly. */
@media (max-width: 860px) {
  [style*="overflow-x: auto"] { -webkit-overflow-scrolling: touch; }
}

/* ---------- Modals ---------- */
@media (max-width: 600px) {
  [role="dialog"] { padding: 0 !important; align-items: stretch !important; }
  [role="dialog"] > div { max-width: none !important; border-radius: 0 !important; min-height: 100%; }
}

/* ---------- Touch targets ----------
   WCAG 2.2 raises target size to AA; 2.1 AA does not require it, but a 44px
   minimum is the practical bar for the phone views SDC will test. */
@media (pointer: coarse) {
  button, a[href], select, input[type="checkbox"] { min-height: 40px; }
  input[type="checkbox"] { min-width: 20px; width: 20px !important; height: 20px !important; }
}

/* ---------- Overflow safety ----------
   A 1fr track will not shrink below its content's min-content width, which is how
   a card ends up wider than the phone viewport. Allowing grid and flex children to
   shrink, and breaking long unbroken strings, keeps every screen within the viewport. */
@media (max-width: 1024px) {
  [style*="display: grid"] > *, [style*="display: flex"] > * { min-width: 0; }
  body { overflow-x: hidden; }
}