/* Horizon CRM — 手機版優化（≤ 768px）
 *
 * 設計原則：
 *  - 銷售漏斗（kanban）改縱向：5 條 column 在手機是 5 個堆疊區段，
 *    使用者直接滑動瀏覽不同階段，不需要左右捲動。
 *  - 客戶 / 案件列表：壓緊 padding、字級 -1，更多資訊在一屏可見。
 *  - Modal 在手機接近全螢幕（90vh），固定底部操作 button。
 *  - 觸控目標 ≥ 44px。
 *  - sidebar 不主導，topbar 漢堡叫出。
 *  - 設計微調 2026-05-16：客戶列表 ≤ 640px 改卡片版（純 CSS, 不動 jsx）、
 *    Dashboard 卡片排印精修（headline 更小、數字更大、留白更少）、
 *    客戶 detail 區段壓緊、視覺一致化（subtle ink-3 border / 8px radius /
 *    hover 才出陰影）。Pipeline 區塊保留給 pipeline-agent。
 */

/* Pipeline section reserved for pipeline-agent — DO NOT add .hz-pipe-* rules
 * outside the agreed kanban block above. */

/* ── 桌面預設 ─────────────────────────────────────────────────
 * 「移到 →」按鈕、mobile-only 提示只在手機顯示。 */
.hz-pipe-move-btn { display: none; }
.mobile-only { display: none !important; }

/* ── 「移到階段」底部 sheet（mobile + 桌面 fallback 都共用） ── */
.hz-pipe-move-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 60;
  animation: hzPipeFade .15s ease-out;
}
.hz-pipe-move-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper, #FBF8F2);
  border-top: 1px solid var(--line-2, #E5DDC8);
  border-radius: 14px 14px 0 0;
  z-index: 61;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 28px rgba(32, 26, 18, 0.18);
  animation: hzPipeSlideUp .22s ease-out;
}
/* 桌面 fallback：放中央、像個 modal */
@media (min-width: 769px) {
  .hz-pipe-move-sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: 92vw;
    border-radius: 12px;
    border: 1px solid var(--line-2, #E5DDC8);
    animation: hzPipeFade .15s ease-out;
  }
}
.hz-pipe-move-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line-2, #E5DDC8);
}
.hz-pipe-move-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 18px;
  overflow-y: auto;
}
.hz-pipe-move-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2, #E5DDC8);
  background: var(--paper, #FBF8F2);
  border-radius: 10px;
  color: var(--ink, #201A12);
  text-align: left;
  font: inherit;
  cursor: pointer;
  min-height: 48px;
  transition: border-color .12s, background .12s;
}
.hz-pipe-move-item:hover:not(:disabled) {
  border-color: var(--ink-3, #8A7A63);
}
.hz-pipe-move-item.active,
.hz-pipe-move-item:disabled {
  background: var(--ink-6, #F0EBDD);
  color: var(--ink-3, #8A7A63);
  cursor: not-allowed;
}
@keyframes hzPipeSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes hzPipeFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 768px) {
  /* === 銷售漏斗 → 縱向 stack === */
  .hz-pipe-board {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 12px !important;
    overflow: visible !important;
  }
  .hz-pipe-lane {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    /* 手機版每條 lane 限制高度，多過則自捲；避免一個高熱度階段把
     * 整頁推到底，其他 4 條都要繞過去才看得到。 */
    max-height: 62vh;
  }
  .hz-pipe-lane .hz-pipe-lane-hd {
    position: sticky;
    top: 0;
    background: var(--paper, #FBF9F3);
    z-index: 1;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-2, #E5DDC8);
  }
  .hz-pipe-lane .hz-pipe-lane-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hz-pipe-card {
    padding: 12px 14px;
    font-size: 12.5px;
    /* 手機別讓 draggable 干擾捲動 / 觸控 — 改用「移到 →」按鈕 */
    cursor: default;
  }
  .hz-pipe-card .a {
    font-size: 12px;
  }
  /* 拖拉 lane 提示在縱向 layout 沒意義 */
  .hz-pipe-lane.over {
    background: rgba(63, 106, 94, 0.06);
  }
  /* 手機才秀「移到 →」按鈕 */
  .hz-pipe-move-btn {
    display: inline-flex !important;
    align-items: center;
    min-height: 30px;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    border-radius: 6px;
    border: 1px solid var(--line-2, #E5DDC8);
    background: var(--paper, #FBF8F2);
    color: var(--ink, #201A12);
  }
  .hz-pipe-move-btn:hover {
    border-color: var(--ink-3, #8A7A63);
  }
  /* mobile-only 反向開啟 */
  .mobile-only { display: inline !important; }

  /* === 客戶 / 案件 / 合約 列表 === */
  table.hz-table {
    font-size: 12.5px;
  }
  table.hz-table th, table.hz-table td {
    padding: 6px 8px;
  }
  /* 在窄螢幕，把較不重要的欄位隱掉，留住 主名稱 + 階段/負責人 */
  table.hz-table .hide-on-mobile {
    display: none;
  }

  /* === Modal — 接近全螢幕，固定底部 button === */
  .hz-modal {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 92vh !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 8vh 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .hz-modal-hd {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--line-2, #E5DDC8);
  }
  .hz-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px !important;
  }
  .hz-modal-ft {
    position: sticky;
    bottom: 0;
    background: var(--paper, #FBF9F3);
    padding: 12px 16px !important;
    border-top: 1px solid var(--line-2, #E5DDC8);
  }

  /* form-row 強制單欄 */
  .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .form-field {
    width: 100% !important;
  }

  /* === 觸控目標 ≥ 44px === */
  .btn, .nav-item, .hz-seg button, .hz-pipe-card {
    min-height: 36px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .btn.primary, .btn.btn-primary {
    min-height: 44px;
    font-size: 14px;
  }

  /* === Sidebar 改 drawer === */
  .hz-sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 80vw;
    max-width: 320px;
    background: var(--paper, #FBF9F3);
    z-index: 50;
    transition: left .2s ease-out;
    border-right: 1px solid var(--line-2, #E5DDC8);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
  }
  body.hz-sidebar-open .hz-sidebar {
    left: 0;
  }
  /* Bug fix 2026-05-17: backdrop z-index 不能高於 sidebar z-index 48
   * （定義在 horizon/horizon.css line 314 .A .side），否則 backdrop 的
   * `backdrop-filter: blur(2px)` 會反過來把 sidebar 文字糊掉。
   * horizon.css 已用 z-index 47，這裡保持一致，不再 override。 */
  body.hz-sidebar-open .hz-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 47;
  }

  /* Perf 2026-05-17: modal backdrop blur(8px) 在手機 GPU 太重，
   * 滑動 scroll 會卡。手機改半透明黑底 + 拿掉 blur，視覺差不多但流暢。 */
  .hz-modal-bg {
    backdrop-filter: none !important;
    background: rgba(32, 26, 18, 0.7) !important;
  }

  /* === Topbar 緊湊 === */
  .hz-topbar {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .hz-topbar .hz-search {
    flex: 1;
    min-width: 0;
  }

  /* === Dashboard 卡片改單欄 === */
  .hz-stats-grid, .hz-dashboard-cards {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* === Customer detail page 緊湊 === */
  .hz-customer-summary {
    padding: 12px 14px;
  }
  .section-title {
    margin-top: 18px;
    font-size: 13px;
  }

  /* === iOS Safari 16px input rule（避免 auto-zoom）=== */
  input.form-input, textarea.form-input, select.form-input {
    font-size: 16px !important;
  }

  /* === 隱掉桌面才有意義的元素 === */
  .desktop-only {
    display: none !important;
  }
}

/* ── 更窄螢幕（< 380px）的進一步壓縮 ─────────── */
@media (max-width: 380px) {
  .hz-page {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .page-title {
    font-size: 22px !important;
  }
  .hz-pipe-card {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * 設計微調 2026-05-16
 * ════════════════════════════════════════════════════════════════════ */

/* ── 客戶列表：table → 卡片（純 CSS, 不動 pages-2.jsx） ─────────
 * 真實 markup 是 <table class="table">，目標只想轉換「客戶列表」這張
 * 表，不要動到合約列表（pages-3.jsx 也用 .table），用 :has(.heat) 鎖定
 * 因為只有客戶列表才有 .heat 熱度指示。
 *
 * 結構轉換：thead 隱掉，每個 <tr> 變成獨立卡片，每個 <td> 變一行；
 * checkbox / heat dot / 公司名 / 階段 / 負責人 / 金額 / ⋯ 全在卡片內。
 */
@media (max-width: 640px) {
  table.table:has(.heat) {
    display: block;
    width: 100%;
    border-collapse: separate;
    background: transparent;
  }
  table.table:has(.heat) thead {
    display: none;
  }
  table.table:has(.heat) tbody {
    display: block;
    width: 100%;
  }
  table.table:has(.heat) tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
    padding: 10px 12px;
    background: var(--paper, #FBF8F2);
    border: 1px solid var(--ink-5, #E5DDC8);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
  }
  table.table:has(.heat) tbody tr:hover,
  table.table:has(.heat) tbody tr.sel {
    border-color: var(--ink-3, #8A7A63);
    box-shadow: 0 1px 6px rgba(32, 26, 18, 0.06);
  }
  table.table:has(.heat) tbody tr.sel td:first-child {
    box-shadow: none;  /* 取消桌面版的 inset accent bar */
  }
  table.table:has(.heat) tbody td {
    display: block;
    padding: 0;
    border: none;
    font-size: 12.5px;
    line-height: 1.45;
    min-width: 0;
  }
  /* 第 1 格 = checkbox：放左上角 */
  table.table:has(.heat) tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  /* 第 2 格 = 客戶名 + heat dot + cust-id：標題列 */
  table.table:has(.heat) tbody td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
  }
  table.table:has(.heat) tbody td:nth-child(2) .cust-name {
    font-size: 14px;
  }
  table.table:has(.heat) tbody td:nth-child(2) .cust-id {
    font-size: 11px;
    color: var(--ink-3, #8A7A63);
    margin-left: 6px;
    font-weight: 400;
  }
  /* 第 3 格 = star + ⋯ 動作按鈕：右上角靠右堆疊 */
  table.table:has(.heat) tbody td:last-child {
    grid-column: 3;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
  }
  /* 中間幾格（階段 / 金額 / 負責人 / 最後接觸…）排第二列，自動 wrap */
  table.table:has(.heat) tbody td:nth-child(n+3):not(:last-child) {
    grid-column: 1 / -1;
    grid-row: 2;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    color: var(--ink-3, #8A7A63);
    font-size: 11.5px;
  }
  /* 金額右對齊在卡片內看起來很怪，改回左 + 字色強調 */
  table.table:has(.heat) tbody td.amount {
    text-align: left !important;
    color: var(--ink, #201A12);
    font-weight: 500;
  }
  /* 階段 chip / 客戶熱度 chip 在卡片內不要 nowrap */
  table.table:has(.heat) tbody td .stage-chip,
  table.table:has(.heat) tbody td .chip {
    white-space: nowrap;
  }
  /* ⋯ row-menu popover 在 mobile 卡片內可能定位失準，補丁 */
  table.table:has(.heat) tbody .hz-row-menu {
    right: 8px !important;
    left: auto !important;
  }
}

/* ── Dashboard 卡片排印精修 ───────────────────────────────────
 * Spec：headline 更小、數字更大、留白更少。Dashboard 用 inline
 * `display:grid; gridTemplateColumns:'repeat(4, ...)'`，所以 grid 排列
 * 已由 pages-1.jsx 控制；這邊只精修每張 stat 卡的內部排印。 */
@media (max-width: 768px) {
  .stat {
    padding: 14px 14px !important;
    gap: 4px !important;
    border-radius: 8px;
    border: 1px solid var(--ink-5, #E5DDC8) !important;
    background: var(--paper, #FBF8F2) !important;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .stat:hover {
    border-color: var(--ink-3, #8A7A63) !important;
    box-shadow: 0 1px 6px rgba(32, 26, 18, 0.06);
  }
  .stat-label {
    font-size: 10px !important;
    letter-spacing: 0.08em;
  }
  .stat-value {
    font-size: 28px !important;
    line-height: 1 !important;
  }
  .stat-delta {
    font-size: 11px !important;
  }
  /* Dashboard 上層 inline grid（4 欄）在手機改 2 欄看，密度比較好 */
  .hz-page > div[style*="repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* Dashboard「主圖 + 旁欄」上下 stack，1.4fr 1fr 在手機沒意義 */
  .hz-page > div[style*="1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 380px) {
  .stat {
    padding: 12px !important;
  }
  .stat-value {
    font-size: 24px !important;
  }
  /* 真正窄的螢幕 1 欄反而比 2 欄看得清楚 */
  .hz-page > div[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * 設計微調 2026-05-17 — 全站 a11y + tap target 深度補強（Agent E）
 *
 * 設計哲學：horizon.css 已處理大量 mobile 基本盤（.A namespace），
 * 這裡只補 horizon.css 沒涵蓋的：
 *   1. tap target 區分：.btn.ghost (44) / .btn.primary (48) / .nav-item (48)
 *   2. 案件 / 客戶 / 任務 卡片整片 hit area ≥ 56px
 *   3. :focus-visible 全站統一 jade ring（鍵盤 user 看得到 focus）
 *   4. touch-action manipulation — 消除 iOS 雙擊 300ms zoom 延遲
 *   5. modal/sheet header 加 sticky top（horizon 只做 footer sticky）
 *   6. card hover 拋光 + active 觸控反饋
 * ════════════════════════════════════════════════════════════════════ */

/* ── 全站：鍵盤焦點環（不限 mobile，但統一在這裡定義） ────────────
 * 用 :focus-visible 避免滑鼠點擊時也跳出焦點環。tab 鍵 / 螢幕閱讀器
 * 才會觸發。jade #3F6A5E 是品牌主色，2px outline + 2px offset 是
 * WCAG 2.4.7 推薦規格。 */
:focus-visible {
  outline: 2px solid var(--jade, #3F6A5E);
  outline-offset: 2px;
  border-radius: 4px;
}
/* 表單 input/textarea/select 本身有 border，offset 0 才不會雙環 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-input:focus-visible {
  outline-offset: 0;
}
/* 取消 modal/sheet 卡片內元素的預設藍 outline（保留我們的 jade） */
button:focus:not(:focus-visible) {
  outline: none;
}

@media (max-width: 768px) {
  /* ── 1. Tap target 強化：按鈕分級 ─────────────────────────
   * horizon.css 已給 .A .btn min-height 44px。這邊明確區分：
   *   .btn.ghost — 次要動作，44px 足夠
   *   .btn.primary — 主要動作，48px 更友善（Material spec） */
  .btn.primary {
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .btn.ghost {
    min-height: 44px;
  }
  /* icon-only ghost button（如 topbar bell / 鉛筆按鈕）保持方形 hit box */
  .btn.ghost:has(> svg:only-child),
  .btn.ghost:empty {
    min-width: 44px;
    min-height: 44px;
  }

  /* ── 2. Sidebar nav item 整 row 點得到 ───────────────────
   * 既有 .nav-item 沒明確 min-height，手機開 drawer 時 thumb 容易滑過。 */
  .side .nav-item,
  .hz-sidebar .nav-item {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    touch-action: manipulation;
  }
  .side .brand,
  .hz-sidebar .brand {
    min-height: 56px;
  }
  .side .side-foot .btn,
  .hz-sidebar .side-foot .btn {
    min-height: 36px;
  }

  /* ── 3. 全站消除 iOS 雙擊 300ms 延遲 ─────────────────────
   * touch-action: manipulation 告訴瀏覽器「我不需要雙擊 zoom」。
   * 結果是 tap → click 從 350ms 降到 50ms。
   * @media (hover: none) 鎖定真正的觸控裝置（避免桌面 hybrid 機）。 */
  @media (hover: none) {
    .btn, .nav-item, .hz-pipe-card, .hz-pipe-move-item,
    .hz-pipe-move-btn, .hz-hamburger, .hz-cmd-item,
    .stat, .card[onclick], a, button,
    .hz-seg button, .hz-case-card, .hz-stage-pick-item,
    .nav-item, input[type="checkbox"], input[type="radio"] {
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(63, 106, 94, 0.12);
    }
  }

  /* ── 4. 案件卡片 hit area ≥ 56px ────────────────────────
   * .hz-case-card 是案件頁主要卡片，整片 clickable。手機上應該
   * 抓不到都很奇怪 — 56px 是 Material recommended large touch。 */
  .hz-case-card {
    min-height: 56px;
    padding: 14px 16px;
  }
  .hz-cases-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 任務列表卡片（pages-1 任務頁）— task row 通常是 .card 內含 checkbox。
   * 為任務 row 加 56px 最小高度。 */
  .hz-task-row,
  .task-card,
  .page .card[data-task] {
    min-height: 56px;
  }

  /* 客戶 detail / 案件 detail 內的卡片 — section card 不應該被壓到 < 48px */
  .page.hz-page .card {
    min-height: 48px;
  }

  /* ── 5. Modal header sticky（horizon 只做 footer） ───────
   * 編輯客戶 form 很長，body 捲動時 hd 跑掉，使用者忘記自己在改誰。 */
  .hz-modal-hd {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper, #FBF8F2);
  }
  /* sheet header 同邏輯 */
  .hz-sheet-hd {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper, #FBF8F2);
  }

  /* ── 6. Page-head sticky top:0 mobile（覆蓋 horizon top:70px） ────
   * horizon.css 把 page-head sticky top:70px 留給 topbar。
   * 但部分頁的 topbar 已 scroll-away（如客戶列表頁），page-head
   * 直接黏 top:0 更直覺。透過 [data-stick-top] 屬性開關，
   * 不破壞既有頁面行為。 */
  .page.hz-page > .page-head[data-stick-top="true"] {
    top: 0 !important;
  }

  /* ── 7. Modal close X 按鈕（若存在）— 確保 44x44 ───────── */
  .hz-modal-close,
  .hz-modal-hd .btn.ghost {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ── 8. Form input touch 流暢 + 防誤觸 hover ───────────── */
  input.form-input, textarea.form-input, select.form-input,
  .A input, .A textarea, .A select {
    touch-action: manipulation;
  }

  /* ── 9. Toast 可讀性 — 已 role=status 由 jsx 處理 ──────── */
  .hz-toast {
    /* 手機字稍大一點，提高 glance-ability */
    font-size: 13.5px;
    min-height: 44px;
  }

  /* ── 10. CmdK 命令面板 item 加大 touch area ──────────── */
  .hz-cmd-item {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .hz-cmd-input input {
    min-height: 44px;
    font-size: 16px;
  }

  /* ── 11. Pipeline lane card active 觸控反饋 ──────────── */
  .hz-pipe-card:active {
    background: rgba(63, 106, 94, 0.04);
  }
  .hz-pipe-move-item:active:not(:disabled) {
    background: rgba(63, 106, 94, 0.06);
  }

  /* ── 12. Stage pick sheet item ≥ 56px（變更階段 sheet） ─── */
  .hz-stage-pick-item {
    min-height: 56px;
    padding: 12px 14px;
  }
}

/* ── 高密度觸控環境（純觸控 + 無 hover）整站 polish ───────
 * 不限 768px，平板（hover: none 但寬螢幕）也吃這條。 */
@media (hover: none) and (pointer: coarse) {
  /* 取消 hover-only 樣式造成 sticky hover 殘留 */
  .nav-item:hover,
  .hz-cmd-item:hover,
  .hz-pipe-move-item:hover,
  .stat:hover,
  .card:hover {
    /* 留給觸控的 :active 接手 */
    background-color: revert;
    box-shadow: revert;
  }
  /* 點下去要有反饋 */
  .nav-item:active,
  .hz-cmd-item:active,
  .stat:active,
  .hz-case-card:active {
    background-color: rgba(63, 106, 94, 0.06);
  }
}

/* ── Reduced motion — a11y WCAG 2.3.3 ───────────────────
 * 使用者系統設定「減少動畫」時，關掉所有 transition / animation。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 客戶 detail 頁區段壓緊（小型字、少邊距） ────────────────── */
@media (max-width: 640px) {
  /* page 左右 padding 收進來，案件資訊更有呼吸感 */
  .page.hz-page {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* section-title h3 = Instrument Serif italic 22px → 手機壓 18px */
  .section-title h3 {
    font-size: 18px !important;
  }
  .section-title {
    margin: 20px 0 10px !important;
    gap: 8px;
  }
  .section-title .num {
    font-size: 11px !important;
  }
  /* 客戶 detail 內部的 .card 統一 padding 收進 */
  .page.hz-page .card {
    padding: 14px !important;
  }
  /* page-head 在客戶 detail 頁堆疊；inline style alignItems flex-start
   * 已經 ok，補一個 stack 邏輯避免金額卡片擠右邊 */
  .page.hz-page .page-head {
    flex-direction: column;
    gap: 12px;
  }
  /* 金額 big display 在手機字太大撐版，縮一下 */
  .page.hz-page .page-head .display {
    font-size: 28px !important;
  }
}

/* ── 視覺輕度刷新：.card 一律 8px radius、ink-3 hover、border 取代陰影 ── */
@media (max-width: 768px) {
  .card {
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .card:hover {
    box-shadow: 0 1px 6px rgba(32, 26, 18, 0.06);
  }
}

/* ════════════════════════════════════════════════════════════════════
 * 設定頁手機修正 2026-06-07
 * 桌面：200px 側欄 + 內容雙欄 grid（pages-3.jsx 行內 style）。
 * Bug：手機沒收合，position:sticky 的側欄分頁直接疊在右側個人檔案
 *      表單上（分頁文字壓住內容、無法閱讀）。
 * 修法：手機收成單欄，側欄分頁改成內容上方「可橫向捲動的 tab 條」。
 *      沿用既有「以行內 style 屬性選擇器精修 inline grid」慣例
 *      （參照本檔 .hz-page > div[style*="repeat(4"] 的做法）。
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hz-page > div[style*="200px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* 第一欄＝側欄分頁：取消 sticky，改成橫向捲動 tab 條置於內容上方 */
  .hz-page > div[style*="200px 1fr"] > div:first-child {
    position: static !important;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .hz-page > div[style*="200px 1fr"] > div:first-child::-webkit-scrollbar {
    display: none;
  }
  .hz-page > div[style*="200px 1fr"] > div:first-child .nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-bottom: 0 !important;
  }
  /* 內容欄解除 maxWidth:680，吃滿手機寬度 */
  .hz-page > div[style*="200px 1fr"] > div:last-child {
    max-width: 100% !important;
  }
}