/* 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%;
}

body[data-responsive-page] input,
body[data-responsive-page] select,
body[data-responsive-page] textarea,
body[data-responsive-page] 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: sidebar keeps its width; all route pages consume the remaining main
   column. Any wide table scrolls inside its wrapper, never on body. */
body[data-responsive-page="admin"] .admin-shell {
  width: 100%;
  grid-template-columns: 264px minmax(0, 1fr);
}

body[data-responsive-page="admin"] .main {
  width: 100%;
  min-width: 0;
  padding: clamp(20px, 2vw, 34px) clamp(16px, 2.2vw, 36px);
}

body[data-responsive-page="admin"] .main > .page,
body[data-responsive-page="admin"] .main > .page#page-usage,
body[data-responsive-page="admin"] #page-dashboard {
  width: 100%;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
}

body[data-responsive-page="admin"] .metric-grid,
body[data-responsive-page="admin"] .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

body[data-responsive-page="admin"] .fin-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

body[data-responsive-page="admin"] .fin-kpi-card {
  min-width: 0;
}

@media (min-width: 1360px) {
  body[data-responsive-page="admin"] #page-dashboard > .fin-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

body[data-responsive-page="admin"] .form-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

body[data-responsive-page="admin"] .form-row.two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

body[data-responsive-page="admin"] .table-wrap,
body[data-responsive-page="admin"] .history-table-wrap,
body[data-responsive-page="admin"] .staff-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

body[data-responsive-page="admin"] .table-wrap > table,
body[data-responsive-page="admin"] .history-table-wrap > table {
  max-width: none;
}

body[data-responsive-page="admin"] .revenue-breakdown-card .table-wrap {
  overflow-x: auto !important;
}

body[data-responsive-page="admin"] .modal-overlay {
  padding: clamp(12px, 3vw, 24px);
}

body[data-responsive-page="admin"] .modal {
  width: min(100%, 620px);
  max-height: min(88dvh, 900px);
}

body[data-responsive-page="admin"] .notify-panel {
  width: min(340px, 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: 1100px) {
  body[data-responsive-page="admin"] .admin-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-responsive-page="admin"] .main {
    padding: 72px clamp(12px, 2.5vw, 22px) 28px;
  }
}

@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;
  }

  body[data-responsive-page="admin"] .page-head,
  body[data-responsive-page="admin"] .dashboard-header {
    min-width: 0;
    padding-left: 48px;
  }

  body[data-responsive-page="admin"] .dashboard-actions,
  body[data-responsive-page="admin"] .page-actions,
  body[data-responsive-page="admin"] .toolbar,
  body[data-responsive-page="admin"] .top-actions,
  body[data-responsive-page="admin"] .mini-actions {
    width: 100%;
  }

  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;
  }
}