/*
 * Cloud-marketplace RWD hardening (loaded last, overrides the others).
 *
 * Bug seen in review at ~921px: the fixed sidebar only collapses at <=720px, so
 * between 721–1024px it still eats 250px while the main column is narrow, and the
 * page title competes with .top-actions (租戶選單／登出／語言／設定) on one row.
 * Because CJK text has a 1-glyph min-content width, flexbox happily shrank the
 * <h1> to one character per line ("預/約/、/貼/文…") and the page overflowed
 * horizontally.
 *
 * Fix, in three parts:
 *   1. The title always keeps a sensible minimum width and the header can wrap,
 *      so a CJK heading can never be squeezed into a vertical column (all widths).
 *   2. At <=1024px the sidebar collapses and the bottom mobile-nav takes over, so
 *      the main content reclaims the full width.
 *   3. A global horizontal-overflow guard so no view produces a sideways scroll.
 */

/* 1. Header can wrap; the title keeps a floor width and never shrinks per-glyph. */
.topbar { flex-wrap: wrap; gap: 14px 20px; }
.topbar > div:first-child { min-width: min(100%, 320px); flex: 1 1 auto; }
.topbar h1 { max-width: 100%; overflow-wrap: anywhere; }
.top-actions { flex-wrap: wrap; }

/* 3. Nothing should ever cause a horizontal scrollbar. */
html, body { max-width: 100%; overflow-x: hidden; }

/* 2. Tablet / narrow desktop: collapse the fixed sidebar, use the bottom nav. */
@media (max-width: 1024px) {
  .sidebar { display: none; }
  main { margin-left: 0; padding: 28px clamp(16px, 4vw, 40px) 112px; max-width: 100%; }

  /* Title and actions each take their own full row — the title is never crushed. */
  .topbar > div:first-child { flex-basis: 100%; }
  .topbar h1 { font-size: clamp(22px, 4.4vw, 30px); }
  .top-actions { flex: 1 1 100%; }

  /* The bottom mobile-nav is display:none by default; switch it on here too. */
  .mobile-nav {
    position: fixed; display: grid; grid-template-columns: repeat(5, 1fr);
    left: 0; right: 0; bottom: 0;
    padding: 9px 10px max(9px, env(safe-area-inset-bottom));
    background: #0d1512e8; border-top: 1px solid var(--line);
    backdrop-filter: blur(16px); z-index: 20;
  }
  .mobile-nav button {
    position: relative; border: 0; background: transparent;
    color: var(--muted); padding: 10px 4px;
  }
  .mobile-nav button.active { color: var(--gold); }
}