/* Shared responsive layout safeguards.
   Keep visual tokens and application logic in each page; this file owns only
   sizing, wrapping, overflow containment and responsive shell behavior. */

html,
body {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
}

body[data-responsive-page] *,
body[data-responsive-page] *::before,
body[data-responsive-page] *::after {
  box-sizing: border-box;
}

body[data-responsive-page] {
  overflow-x: clip;
}

body[data-responsive-page] img,
body[data-responsive-page] svg,
body[data-responsive-page] canvas,
body[data-responsive-page] video {
  max-width: 100%;
}

/* Icons are not media. They are sized in em and are often the only thing inside
   a button that has no width of its own, and a percentage ceiling measured
   against a container the icon is itself sizing has nothing to resolve against
   -- so it resolves to zero. That collapsed the theme toggle to a 0px-wide
   sliver on every page that has one. */
body[data-responsive-page] svg.icon {
  max-width: none;
}

/* Nothing may insist on a width that pushes its container sideways.
   Pagination buttons are the exception: a page number is one or two characters
   and needs a floor rather than a ceiling, and this selector is specific enough
   to beat the component rule that gives them one — it squeezed them to 25px. */
body[data-responsive-page] input,
body[data-responsive-page] select,
body[data-responsive-page] textarea,
body[data-responsive-page] button:not(.pagination button):not(.staff-pagination button),
body[data-responsive-page] a {
  min-width: 0;
}

/* Public purchase, coupon and personal-code flows remain intentionally
   focused, but grow beyond the old phone-only 480px lock on larger screens. */
body[data-responsive-page="customer"] .shop {
  width: min(100%, 760px);
  max-width: none;
  padding-inline: clamp(12px, 3vw, 32px);
}

body[data-responsive-page="customer"] .app-card,
body[data-responsive-page="customer"] .ticket,
body[data-responsive-page="customer"] .item,
body[data-responsive-page="customer"] .code-item {
  min-width: 0;
}

/* Staff shop is a transaction flow, but its account/history content benefits
   from a wider fluid column on desktop and zoomed-out browser layouts. */
body[data-responsive-page="staff-shop"] .shop {
  width: min(100%, 860px);
  max-width: none;
  padding-inline: clamp(12px, 3vw, 28px);
}

body[data-responsive-page="staff-room"] .wrap {
  width: 100%;
  max-width: none;
  padding-inline: clamp(12px, 2.5vw, 32px);
}

body[data-responsive-page="staff-room"] .layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
}

body[data-responsive-page="staff-room"] .layout > *,
body[data-responsive-page="staff-room"] .topbar > *,
body[data-responsive-page="staff-shop"] #mainView,
body[data-responsive-page="staff-shop"] .step-card,
body[data-responsive-page="staff-shop"] .history-card {
  min-width: 0;
}

/* Admin: only the safeguards that cannot live in the component file.
   Sidebar width, content padding, page max-width, form columns, table
   scrolling and the modal box are all owned by admin-components.css now —
   restating them here is what made the effective value of a padding depend on
   which of four files loaded last. In particular the dashboard revenue table
   used to get "overflow-x: auto !important" from this file, which is why it
   showed a horizontal scrollbar no amount of column sizing could remove. */
body[data-responsive-page="admin"] .main > .page {
  min-width: 0;
}

body[data-responsive-page="admin"] .notify-panel {
  width: min(380px, calc(100vw - 24px));
  min-width: 0 !important;
}

/* Avatar workspace: preserve the desktop sidebar, allow every workspace pane
   to shrink, and collapse before the minimum usable panel width is reached. */
body[data-responsive-page="staff-avatar"] .page,
body[data-responsive-page="staff-avatar"] .main,
body[data-responsive-page="staff-avatar"] .hero,
body[data-responsive-page="staff-avatar"] .workspace,
body[data-responsive-page="staff-avatar"] .workspace > *,
body[data-responsive-page="staff-avatar"] .title-card > div:last-child {
  min-width: 0;
}

body[data-responsive-page="staff-avatar"] .main {
  width: 100%;
  padding: clamp(14px, 2vw, 28px);
}

body[data-responsive-page="staff-avatar"] .workspace {
  grid-template-columns: minmax(300px, .85fr) minmax(360px, 1.4fr) minmax(240px, .7fr);
}

body[data-responsive-page="review"] .preview-header,
body[data-responsive-page="review"] .grid {
  width: 100%;
  max-width: none;
}

body[data-responsive-page="review"] .grid > *,
body[data-responsive-page="review"] .phone {
  min-width: 0;
}

@media (max-width: 1180px) {
  body[data-responsive-page="staff-avatar"] .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-responsive-page="staff-avatar"] .summary {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }
}

@media (max-width: 860px) {
  body[data-responsive-page="staff-room"] .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-responsive-page="staff-room"] .topbar,
  body[data-responsive-page="staff-room"] .history-head {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-responsive-page="staff-room"] .staff-nav {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
  }
}

@media (max-width: 700px) {
  body[data-responsive-page] .tui-topbar {
    gap: 6px;
    padding-inline: max(10px, env(safe-area-inset-left));
  }

  body[data-responsive-page] .tui-topbar__brand {
    font-size: 16px;
  }

  body[data-responsive-page] .tui-topbar__link {
    min-height: 44px;
    padding-inline: 9px;
  }

  body[data-responsive-page="customer"] .shop,
  body[data-responsive-page="staff-shop"] .shop {
    width: 100%;
    padding-inline: 12px;
  }

  body[data-responsive-page="customer"] .app-card,
  body[data-responsive-page="customer"] .ticket-body,
  body[data-responsive-page="staff-shop"] .step-card,
  body[data-responsive-page="staff-shop"] .history-card {
    padding-inline: 14px;
  }

  /* Page header padding and full-width action rows come from
     admin-components.css; only the stretching of individual controls, which is
     a wrapping safeguard rather than a design decision, stays here. */
  body[data-responsive-page="admin"] .dashboard-actions > *,
  body[data-responsive-page="admin"] .page-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }

  body[data-responsive-page="admin"] .btn-row {
    flex-direction: column-reverse;
  }

  body[data-responsive-page="admin"] .btn-row > * {
    width: 100%;
    justify-content: center;
  }

  body[data-responsive-page="staff-avatar"] .page {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-responsive-page="staff-avatar"] .sidebar {
    width: 100%;
  }

  body[data-responsive-page="staff-avatar"] .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive-page="review"] {
    padding: 18px 12px 40px;
  }

  body[data-responsive-page="review"] .preview-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-responsive-page="review"] .flow-strip {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
}

@media (max-width: 430px) {
  body[data-responsive-page="customer"] .speed-row,
  body[data-responsive-page="customer"] .info-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-responsive-page="customer"] .chip-row,
  body[data-responsive-page="customer"] .qty-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive-page="staff-shop"] .room-mini {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
  }

  body[data-responsive-page="staff-shop"] .room-mini-meta {
    grid-column: 2;
    min-width: 0;
    text-align: left;
  }

  body[data-responsive-page="staff-room"] .wrap {
    padding-inline: 10px;
  }

  body[data-responsive-page="staff-room"] .staff-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-responsive-page="staff-room"] .nav-btn {
    justify-content: center;
  }

  body[data-responsive-page="staff-avatar"] .nav,
  body[data-responsive-page="staff-avatar"] .items {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-responsive-page="staff-avatar"] .preview-actions {
    flex-direction: column;
  }

  body[data-responsive-page="staff-avatar"] .preview-actions > * {
    width: 100%;
  }
}

@media (hover: none) and (pointer: coarse) {
  body[data-responsive-page] button,
  body[data-responsive-page] [role="button"],
  body[data-responsive-page] .btn,
  body[data-responsive-page] .tui-btn,
  body[data-responsive-page] .nav-btn {
    min-height: 44px;
  }
}