/* ============================================================
   RegMaster · Shared MOBILE / RWD refinements   (mobile.css)
   ─────────────────────────────────────────────────
   Loaded LAST (after styles.css + admin-layout.css + any page
   <style>) so these mobile rules win on equal specificity.
   Desktop (>768px) is never touched — every rule is inside a
   max-width media query.

   What lives here (cross-cutting, all pages):
     1. Breadcrumb COLLAPSE on phones → "‹ 上一層 / 當前頁"
        (the #1 reported overflow). Complements the scroll-in-slot
        fallback already in admin-layout.css.
     2. Top-bar / header de-crowding so the 中/EN + avatar + 漢堡
        never push each other off-screen.
     3. Generic tab / sub-tab / toolbar rows scroll sideways inside
        their own slot instead of widening the page.
     4. A belt-and-suspenders no-sideways-scroll guard for the
        public-facing pages that don't load admin-layout.css.
   Root-cause per-page fixes (card view, builder stacking, grid
   stacking, table min-width) already live in their own files.
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   1 · BREADCRUMB COLLAPSE  (admin .head .crumbs + form-builder .top-bar .crumb)
   The trail "主辦後台 / 活動 / 長活動名 / 報名管理" is wider than an
   iPhone. On phones we hide the two top levels (首頁 + 活動列表) and
   keep only the parent context + current page, prefixed with a ‹
   back hint. Falls back to horizontal scroll if even that is long.
   Works on the dominant markup: <a>首頁</a><sep/><a>活動</a><sep/>
   <a id=crumbHub>名稱</a><sep/><b>當前</b> — degrades safely on the
   few pages with a shorter or <span>-rooted trail. ───────────── */
@media (max-width: 480px) {
  .head .crumbs,
  .top-bar .crumb {
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .head .crumbs::-webkit-scrollbar,
  .top-bar .crumb::-webkit-scrollbar { display: none; }

  /* hide the first two levels (首頁 + 活動列表) and their separators */
  .head .crumbs > a:nth-of-type(1),
  .head .crumbs > a:nth-of-type(2),
  .head .crumbs > .sep:nth-of-type(1),
  .head .crumbs > .sep:nth-of-type(2),
  .top-bar .crumb > a:nth-of-type(1),
  .top-bar .crumb > a:nth-of-type(2),
  .top-bar .crumb > .sep:nth-of-type(1),
  .top-bar .crumb > .sep:nth-of-type(2) { display: none; }

  /* ‹ back hint before the first still-visible crumb */
  .head .crumbs::before,
  .top-bar .crumb::before {
    content: '‹';
    font-weight: 700; color: var(--ink-3);
    margin-right: 6px; flex: 0 0 auto;
  }
  /* keep a trailing action icon in the edit-page crumb tappable, not squashed */
  .head .crumbs > a.btn-ic-h { flex: 0 0 auto; }
}

/* ─────────────────────────────────────────────────────────
   2 · HEADER / TOP-BAR DE-CROWDING
   The admin topbar packs 漢堡 + 麵包屑 + 頭像 + 中/EN onto one row.
   On narrow phones shrink the chrome so the breadcrumb keeps room
   and nothing gets clipped. (.admin-lang-toggle carries inline
   styles set in admin-nav.js, so !important is required to win.) */
@media (max-width: 480px) {
  .head .admin-lang-toggle {
    padding: 6px 8px !important;
    font-size: 11px !important;
    margin-left: 6px !important;
  }
  .head .me-h { padding: 4px; }
  .head .me-h span,
  .head .me-h small { display: none; }   /* avatar circle only */
  .head .actions { gap: 6px; }
}

/* ─────────────────────────────────────────────────────────
   3 · TAB / SUB-TAB / TOOLBAR ROWS — scroll, don't widen
   Page tab strips (基本 / 組別 / 收費 …, 報名統計 / 報名列表,
   分類統計 / 時間趨勢) and command bars overflow on phones. Let each
   scroll horizontally inside its own slot. The page never widens. */
@media (max-width: 600px) {
  .tabs, .tabs-bar, .subtabs, .tabbar, .ana-subtabs, .chart-toggle,
  .tabs-row, .seg, .pill-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .tabs-bar::-webkit-scrollbar,
  .subtabs::-webkit-scrollbar, .tabbar::-webkit-scrollbar,
  .ana-subtabs::-webkit-scrollbar, .chart-toggle::-webkit-scrollbar,
  .tabs-row::-webkit-scrollbar, .seg::-webkit-scrollbar,
  .pill-tabs::-webkit-scrollbar { display: none; }
  .tabs > *, .tabs-bar > *, .subtabs > *, .tabbar > *, .ana-subtabs > * {
    flex: 0 0 auto; white-space: nowrap;
  }
}

/* ─────────────────────────────────────────────────────────
   4 · INLINE FORM-GRID / WIDE-GRID STACKING
   Cards that lay out their fields in fixed multi-column grids (評分卡片的
   「滿分 / 可記錄次數」, 設定頁的雙欄 form-grid) get cut off on phones.
   Stack them to a single column. Genuinely wide visual grids (24-hour
   heatmap, panel grids) scroll inside their own box rather than widen the
   page (the column itself is already allowed to shrink via styles.css). */
@media (max-width: 600px) {
  /* hyphen (.row-2) = system.html; no-hyphen (.row2/.row3) = edit.html.
     edit.html only stacked .row2 — .row3 (1fr 1fr 1fr, e.g. 開始/結束日期時間)
     kept 3 tracks whose date inputs blew out to 483px on a 390 screen. */
  .rb-leaf-fields, .score-grid, .pn-grid, .fr-row, .form-grid,
  .row-2, .row-3, .row2, .row3, .datemode-grp, .kv { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .ana-heatmap, .heatmap, .ana-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────
   5 · PUBLIC-PAGE SAFETY NET
   The public pages (event detail / register / my) don't load
   admin-layout.css. Keep media fluid. NOTE: we deliberately do NOT set
   overflow-x on <html>/<body> — that disables iOS pinch-zoom. Overflow is
   prevented at the source (min-width:0 in styles.css) so the page fits and
   stays zoomable. */
@media (max-width: 768px) {
  img, svg, video, canvas, iframe, pre { max-width: 100%; height: auto; }
}

/* ─────────────────────────────────────────────────────────
   6 · PAGE-SPECIFIC OVERFLOW FIXES (kept here so all RWD lives in one file)
   • edit.html .save-bar uses margin:0 -32px to bleed into the desktop 32px
     gutter; on the 16px mobile gutter that pushes it 16px off-screen. Re-fit
     it to the mobile gutter and let its meta/buttons wrap.
   • announcements.html .editor-h .actions is a nowrap flex row (排程時間
     datetime input + 立即發送/排程 buttons) → 561px. Let it wrap; the
     datetime input goes full-width. */
@media (max-width: 768px) {
  .save-bar { margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 16px !important; padding-right: 16px !important; flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 600px) {
  .editor-h .actions { flex-wrap: wrap; }
  .editor-h .actions input[type="datetime-local"] { flex: 1 1 100%; max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────
   7 · registrations.html — real-data rows the stub audit didn't render
   (only appear when logged in with ≥1 registration), overflowing at the
   ~375–390 boundary. Three rows the user hit on a real iPhone:
   • .search-row 工具列：「共N筆 / 退費申請 / 匯出所有報名資料」— the long
     export button + inline margin-left:auto + missing min-width:0 tipped it
     over. Count on its own line; the two buttons share a row and may shrink.
   • .td-actions 卡片動作（檢視詳情 / 寄送信件 …）：.action-btn had
     flex:1 1 auto WITHOUT min-width:0, so it couldn't shrink below its label.
   • .heatmap 報名時段熱點（7×24）：grid cells force ≥18px tracks (~550px).
     Pin a legible min track and SCROLL inside the box (keeps 24 columns). */
@media (max-width: 600px) {
  .search-row { flex-wrap: wrap; gap: 8px; }
  .search-row > input { flex: 1 1 100%; max-width: none; }
  .search-row > #listCount { flex: 1 1 100%; margin: 0; }
  .search-row #refundReqBtn { margin-left: 0 !important; }
  .search-row .btn { flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: center;
    font-size: 13px; white-space: normal; }
  .reg-cards td.td-actions .action-btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
}
@media (max-width: 768px) {
  .chart-card, .chart-grid, .chart-box { min-width: 0; }
  .heatmap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
    grid-template-columns: 40px repeat(24, minmax(15px, 1fr)) !important;
  }
}

/* ─────────────────────────────────────────────────────────
   8 · my.html（我的報名）— filter pills + 報名卡片動作列
   • .tab-pills（全部/即將舉辦/待付款/已付款/已過期）原本不換行 → 已過期被切。
   • .reg-card .actions 在 ≤760 變 nowrap 橫列，末端的報名編號 .teamid 被切。 */
@media (max-width: 600px) {
  .tab-pills { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .reg-card .actions { flex-wrap: wrap; gap: 8px; }
  .reg-card .actions .btn { flex: 0 0 auto; }
  .reg-card .actions .teamid { flex: 1 1 100%; text-align: right; order: 99; margin-top: 2px; }
}