/* ───────────────────────────────────────────────────────────────
 * responsive.css — 全域 RWD 規則
 *
 * 斷點策略（標準三段）：
 *   - Mobile     : ≤ 640px
 *   - Tablet     : 641 – 1024px
 *   - Desktop    : ≥ 1025px（不寫 media query，沿用既有設計）
 *
 * 涵蓋範圍：
 *   1. 後台 layout（sidebar / topbar / content）
 *   2. 前台 layout（header / main / footer）
 *   3. 通用元件：table（卡片化）/ form / card / chip / button / page-header
 *   4. 頁面佈局：detail-layout / cart-layout / checkout-layout / product grid
 *   5. modal / tabs / sticky 行為
 *
 * 注意：所有規則均以 var(--token) 為基礎，與既有設計系統一致。
 * ─────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
 * Tablet：641 – 1024px
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── 後台：sidebar 縮窄 ── */
  .app-shell {
    grid-template-columns: 200px 1fr;
  }
  .app-sidebar__item { padding: var(--spacing-2) var(--spacing-4); }
  .app-sidebar__logo { padding: 0 var(--spacing-4) var(--spacing-4); }
  .app-sidebar__section { padding: var(--spacing-3) var(--spacing-4) var(--spacing-1); }

  /* ── 後台 content padding ── */
  .app-content { padding: var(--spacing-4); }

  /* ── 前台 header / main ── */
  .shop-header__bar { padding: var(--spacing-3) var(--spacing-4); gap: var(--spacing-4); }
  .shop-main { padding: var(--spacing-4) var(--spacing-4) var(--spacing-8); }
  .shop-header__nav { gap: var(--spacing-3); }
  .shop-header__search { flex: 0 1 240px; }

  /* ── 前台 footer 縮為兩欄 ── */
  .shop-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--spacing-5); }

  /* ── 通用佈局：兩欄 grid 縮為 1 欄或保留比例 ── */
  .detail-layout { grid-template-columns: 1fr 280px; gap: var(--spacing-3); }
  .cart-layout,
  .checkout-layout { grid-template-columns: 1fr 320px; gap: var(--spacing-4); }

  /* ── 商品 grid：4 欄 → 3 欄 ── */
  .product-grid,
  .products-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── KPI grid：4 → 2 ── */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════
 * Mobile：≤ 640px
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ─────────────────────────────────────────────────────────────
   * 0. 防止水平 overflow（救援）
   * 任何元素超過 viewport 寬度都被 clip，避免整個 layout 被推開
   * ───────────────────────────────────────────────────────────── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  .app-shell, .app-content, .shop-main, main {
    max-width: 100vw;
    min-width: 0;
  }

  /* 強制收緊任何 inline width 的 input/select */
  .toolbar input,
  .toolbar select,
  .toolbar__filters input,
  .toolbar__filters select,
  input[style*="width:"],
  select[style*="width:"] {
    width: 100% !important;
    max-width: 100% !important;
  }


  /* ─────────────────────────────────────────────────────────────
   * 1. 後台 layout（漢堡選單）
   * ─────────────────────────────────────────────────────────────
   * 桌面：grid sidebar 240px + content
   * 手機：sidebar 變側滑 overlay，topbar 顯示漢堡按鈕
   */

  /* shell：改為 flex 直向，明確擺脫 grid sidebar 殘留 */
  .app-shell {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
    min-height: 100vh;
  }

  /* sidebar：position fixed，預設藏在左側 */
  .app-sidebar {
    grid-area: unset;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80vw;
    max-width: 280px;
    background: var(--color-surface);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  }
  .app-sidebar.is-open { transform: translateX(0); }

  /* sidebar overlay 遮罩 */
  .app-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
  }
  .app-sidebar-overlay.is-open { display: block; }

  /* topbar：顯示漢堡按鈕 */
  .app-topbar { padding: 0 var(--spacing-3); }
  .app-topbar__menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--color-text);
  }
  .app-topbar__title { font-size: var(--font-size-sm); }

  /* topbar 右側：藏掉「查看店面」「店長名字」這類次要元素 */
  .app-topbar__right .btn-ghost:not(.app-topbar__logout) { display: none; }
  .app-topbar__user span:not(.app-topbar__avatar) { display: none; }

  /* content padding 縮小 */
  .app-content { padding: var(--spacing-3); }


  /* ─────────────────────────────────────────────────────────────
   * 2. 前台 header（漢堡 + 摺疊 nav）
   * ───────────────────────────────────────────────────────────── */

  .shop-header__bar {
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
  }

  /* 手機版漢堡按鈕（預設藏起，js 點開 nav） */
  .shop-header__menu-btn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent; border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--color-text);
  }

  .shop-header__logo { flex: 1; font-size: var(--font-size-base); }
  .shop-header__logo img { height: 28px !important; }
  .shop-header__logo-mark { width: 28px; height: 28px; }

  /* nav 收進可折疊區，預設隱藏 */
  .shop-header__nav {
    order: 99;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    display: none;
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-2);
  }
  .shop-header__nav.is-open { display: flex; }
  .shop-header__nav a {
    padding: var(--spacing-3) var(--spacing-2);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-base);
  }
  .shop-header__nav a:last-child { border-bottom: none; }

  /* search 移到下一行 */
  .shop-header__search {
    order: 98;
    flex-basis: 100%;
    flex: 1 0 100%;
  }
  .shop-header__search input { height: 38px; }

  .shop-header__icons { gap: var(--spacing-1); }
  .shop-header__icon-link { width: 36px; height: 36px; }

  /* main padding 縮小 */
  .shop-main { padding: var(--spacing-3) var(--spacing-3) var(--spacing-8); }

  /* footer：堆疊單欄 */
  .shop-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
    padding: 0 var(--spacing-3);
  }
  .shop-footer__bottom { padding: var(--spacing-4) var(--spacing-3) 0; }


  /* ─────────────────────────────────────────────────────────────
   * 3. 通用元件：page-header / card / chip
   * ───────────────────────────────────────────────────────────── */

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);
  }
  .page-header__title { font-size: var(--font-size-lg); }
  .page-header__actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }
  .page-header__actions .btn { flex: 1; min-width: 0; }

  .card { padding: var(--spacing-3); }
  .card h3 { font-size: var(--font-size-base); }

  /* tabs 變橫向捲動 */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tabs__item { white-space: nowrap; flex-shrink: 0; }


  /* ─────────────────────────────────────────────────────────────
   * 4. 表格卡片化（核心！）
   *
   * 機制：HTML 維持原 <table>，CSS 在手機把每個 <tr> 變卡片，
   *      每個 <td> 變成一行「label：value」。
   *      <td> 的 data-label 由 responsive.js 自動從 <th> 補上。
   *
   * 例外（不要卡片化）：
   *   - .table--keep        ：強制保留原樣（如極窄表格）
   *   - .table-wrap         ：外層仍允許橫向捲動 fallback
   * ───────────────────────────────────────────────────────────── */

  .table-wrap {
    overflow-x: visible; /* 卡片化後不需要橫向捲 */
  }

  /* 桌面 thead 藏起 */
  .table:not(.table--keep) thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
  }

  .table:not(.table--keep) {
    border: none;
  }

  .table:not(.table--keep) tbody tr {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  }
  .table:not(.table--keep) tbody tr:hover { background: var(--color-surface); }
  .table:not(.table--keep) tbody tr:last-child { margin-bottom: 0; }

  .table:not(.table--keep) tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    border-bottom: 1px dashed var(--color-border);
    text-align: right;
    font-size: var(--font-size-sm);
  }
  .table:not(.table--keep) tbody td:last-child { border-bottom: none; }

  .table:not(.table--keep) tbody td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-align: left;
    flex-shrink: 0;
    min-width: 64px;
  }

  /* 沒有 data-label（例如「操作」欄）時，::before 不顯示 */
  .table:not(.table--keep) tbody td:not([data-label])::before,
  .table:not(.table--keep) tbody td[data-label=""]::before {
    content: "";
    display: none;
  }
  /* 操作欄（無 label）改為左對齊，並讓按鈕能換行 */
  .table:not(.table--keep) tbody td:not([data-label]),
  .table:not(.table--keep) tbody td[data-label=""] {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .table:not(.table--keep) tbody td:not([data-label]) .btn,
  .table:not(.table--keep) tbody td[data-label=""] .btn {
    width: 100%;
    margin-top: var(--spacing-1);
  }

  /* 空狀態列保留原樣 */
  .table:not(.table--keep) tbody tr.empty-row,
  .table:not(.table--keep) tbody td .empty-state {
    text-align: center;
  }


  /* ─────────────────────────────────────────────────────────────
   * 5. 表單：multi-column 全部變單欄
   * ───────────────────────────────────────────────────────────── */

  .form-grid,
  .form-grid--2,
  .form-grid--3,
  [class^="form-grid"] {
    grid-template-columns: 1fr !important;
  }

  .form-row,
  .form-row--2col {
    flex-direction: column;
    align-items: stretch;
  }

  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="datetime-local"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px; /* 避免 iOS Safari 自動 zoom */
  }


  /* ─────────────────────────────────────────────────────────────
   * 6. 頁面佈局：兩欄 grid 統一變單欄
   * ───────────────────────────────────────────────────────────── */

  .detail-layout,
  .cart-layout,
  .checkout-layout,
  .member-layout {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-3) !important;
  }

  /* 取消 sticky 摘要區（手機螢幕小，sticky 反而擋住內容） */
  .cart-summary,
  .checkout-summary,
  .detail-aside {
    position: static !important;
    top: auto !important;
  }


  /* ─────────────────────────────────────────────────────────────
   * 7. 商品 grid / KPI grid
   * ───────────────────────────────────────────────────────────── */

  .product-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-3) !important;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-2) !important;
  }
  .kpi-card { padding: var(--spacing-3); }
  .kpi-card__value { font-size: var(--font-size-lg); }


  /* ─────────────────────────────────────────────────────────────
   * 8. 結帳步驟條
   * ───────────────────────────────────────────────────────────── */

  .checkout-steps {
    padding: var(--spacing-3);
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .step { font-size: var(--font-size-xs); white-space: nowrap; }
  .step__num { width: 24px; height: 24px; font-size: var(--font-size-xs); }
  .step__sep { margin: 0 var(--spacing-2); }


  /* ─────────────────────────────────────────────────────────────
   * 9. 商品詳情：圖 / 文 兩欄變單欄
   * ───────────────────────────────────────────────────────────── */

  .product-detail,
  .product-detail-layout {
    grid-template-columns: 1fr !important;
  }


  /* ─────────────────────────────────────────────────────────────
   * 10. modal / drawer：手機全螢幕
   * ───────────────────────────────────────────────────────────── */

  .modal,
  .modal__content,
  .drawer {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    min-height: 100vh;
    border-radius: 0 !important;
    margin: 0 !important;
  }


  /* ─────────────────────────────────────────────────────────────
   * 11. 按鈕 / chip 微調
   * ───────────────────────────────────────────────────────────── */

  .btn { font-size: var(--font-size-sm); }
  .btn-sm { padding: var(--spacing-1) var(--spacing-2); }


  /* ─────────────────────────────────────────────────────────────
   * 12. flash 訊息
   * ───────────────────────────────────────────────────────────── */

  .flash { padding: var(--spacing-3); font-size: var(--font-size-sm); }


  /* ─────────────────────────────────────────────────────────────
   * 13. grid 統計卡 / toolbar / stat-card
   * ───────────────────────────────────────────────────────────── */

  .grid.grid-2,
  .grid.grid-3,
  .grid.grid-4,
  .grid.grid-5,
  .grid.grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-2) !important;
  }
  .stat-card { padding: var(--spacing-3); }
  .stat-card__value { font-size: var(--font-size-lg); }
  .stat-card__label { font-size: var(--font-size-xs); }

  .toolbar,
  .toolbar__filters {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-2);
  }
  .toolbar input,
  .toolbar .input,
  .toolbar select,
  .toolbar .select {
    width: 100% !important;
  }


  /* ─────────────────────────────────────────────────────────────
   * 14. 後台登入頁 / 平台登入頁置中卡片
   * ───────────────────────────────────────────────────────────── */

  .login-shell,
  .auth-shell {
    padding: var(--spacing-3);
    min-height: 100vh;
  }
  .login-card,
  .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--spacing-4);
  }


  /* ─────────────────────────────────────────────────────────────
   * 15. 商品詳情：圖庫 / 規格 / 加入購物車區
   * ───────────────────────────────────────────────────────────── */

  .product-gallery { grid-template-columns: 1fr !important; }
  .product-gallery__thumbs {
    flex-direction: row !important;
    overflow-x: auto;
  }
  .product-info { padding-top: var(--spacing-3); }


  /* ─────────────────────────────────────────────────────────────
   * 16. 店面客製：iframe 預覽從 side-by-side → 上下堆疊
   * ───────────────────────────────────────────────────────────── */

  .design-layout {
    grid-template-columns: 1fr !important;
  }
  .design-preview {
    height: 480px;
  }


  /* ─────────────────────────────────────────────────────────────
   * 17. 設定頁 / dashboard 雙欄
   * ───────────────────────────────────────────────────────────── */

  .settings-layout,
  .dashboard-row,
  .payment-shipping-layout,
  .analytics-layout {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-3) !important;
  }

  /* settings-nav（左側 tab）→ 改成橫向 tabs */
  .settings-nav {
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--spacing-1) !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-2);
    margin-bottom: var(--spacing-3);
  }
  .settings-nav__item {
    flex-shrink: 0;
    white-space: nowrap;
  }


  /* ─────────────────────────────────────────────────────────────
   * 18. checkbox-row 在手機上保持橫向
   * ───────────────────────────────────────────────────────────── */

  .checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
  }
}


/* ════════════════════════════════════════════════════════════════
 * 桌面：≥ 1025px
 * 預設藏起手機/平板專屬元素
 * ════════════════════════════════════════════════════════════════ */
.app-topbar__menu-btn,
.shop-header__menu-btn,
.app-sidebar-overlay {
  display: none;
}