/* ══════════════════════════════════════════════════════════
   CFO Pilot — 手機強化層 (Mobile hardening)
   v1 — 2026-06-22
   載入順序：必須在每頁的 inline <style> 之後（放在 </body> 前）
   目的：系統性修掉「表格文字溢出 / 內容超出視窗 / 字太大 / 表內按鈕過大」
   桌機 (≥769px) 完全不受影響——所有規則都在 max-width:768px 內，
   且 .cfo-mscroll 在桌機是 display:contents（對版面零影響）。
   ══════════════════════════════════════════════════════════ */

/* 表格捲動容器：桌機透明、不影響版面；手機才變成可橫向捲動 */
.cfo-mscroll { display: contents; }

@media (max-width: 768px) {

  /* ── 0. 全域防溢出：任何元素都不該撐爆視窗 ── */
  body { overflow-x: clip; }
  img, canvas, svg, video, iframe { max-width: 100%; }
  pre, code { overflow-x: auto; max-width: 100%; }
  /* 長英數字串（科目代碼、雜湊、Email）允許斷行，避免撐寬 */
  .cfo-break, td, .reso-content, .chip .v, .ad-tbl td { overflow-wrap: anywhere; }

  /* ── 1. 資料表一律可橫向捲動，絕不撐爆頁面 ── */
  /* 由 cfo-mobile.js 自動把每個 <table> 包進 .cfo-mscroll */
  .cfo-mscroll {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 細捲軸提示 */
    scrollbar-width: thin;
  }
  /* 容器內的表格維持正常 table 排版（修掉舊有 display:block 造成的欄位錯位），
     寬度自適應內容、至少撐滿容器 */
  .cfo-mscroll > table {
    display: table !important;
    width: auto !important;
    min-width: 100% !important;
    margin: 0 !important;
  }
  .cfo-mscroll > table > thead { display: table-header-group !important; }
  .cfo-mscroll > table > tbody { display: table-row-group !important; }
  .cfo-mscroll > table > tfoot { display: table-footer-group !important; }
  .cfo-mscroll > table > * > tr { display: table-row !important; }
  .cfo-mscroll > table > * > tr > th,
  .cfo-mscroll > table > * > tr > td { display: table-cell !important; }
  /* 表格 cell 在窄欄時給合理內距與不過小字級 */
  .cfo-mscroll > table th,
  .cfo-mscroll > table td { font-size: 12.5px; }
  /* 金額、狀態、操作欄維持單行（避免數字中斷、按鈕堆疊）→ 必要時整表橫向捲動 */
  .cfo-mscroll > table td.num, .cfo-mscroll > table th.num,
  .cfo-mscroll > table .amt, .cfo-mscroll > table td .btn,
  .cfo-mscroll > table td .st, .cfo-mscroll > table td button { white-space: nowrap; }

  /* ── 2. 表內按鈕別太大、別佔整列 ── */
  td .btn, td button, td a.btn, td .btn-sm,
  td .rm-vlink, td .relref, .ad-tbl td .btn, .ad-tbl td button {
    min-height: 30px !important;
    padding: 4px 9px !important;
    font-size: 12px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
  }
  /* 動作欄多顆按鈕：可換行、間距收斂 */
  td .row-actions, td .actions, .ad-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }

  /* ── 3. 標題字級收斂（避免「字太大爆炸」），不動 hero/登入頁 ── */
  h1 { font-size: clamp(20px, 5.4vw, 26px) !important; line-height: 1.2 !important; word-break: break-word; }
  h2 { font-size: clamp(17px, 4.6vw, 21px) !important; line-height: 1.25 !important; }
  .ad-page-title, .acct-head h1, .eq-page-title, .bi-page-title { font-size: clamp(19px, 5.2vw, 24px) !important; }
  /* 大數字（KPI / 統計）收斂，避免單行爆版 */
  .kpi .value, .stmt-kpi .v, .chip .v, .pv-num, .bi-stat-num,
  .ad-stat-num, .stat-num, [class*="-big-num"] {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    overflow-wrap: anywhere;
  }

  /* ── 4. 工具列 / 篩選列 / 面板頭：換行不擠、子項可縮 ── */
  .toolbar, .filter-toolbar, .panel-head, .inv-filter, .sv-head .actions,
  .ad-toolbar, .ad-filters, .bi-toolbar, .eq-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    row-gap: 8px !important;
    max-width: 100%;
  }
  .toolbar > *, .panel-head > *, .filter-toolbar > *, .inv-filter > *,
  .ad-toolbar > *, .ad-filters > * { min-width: 0; max-width: 100%; }

  /* ── 5. 常見「多欄並排格」在手機變單/雙欄，避免水平擠壓 ── */
  .ad-grid, .ad-cards, .card-grid, .stat-grid, .kpi-row,
  .two-col, .three-col, .grid-2, .grid-3, .split-cols {
    grid-template-columns: 1fr !important;
  }

  /* ── 6. 浮動 AI 助手面板不要超出畫面 ── */
  #ai-fab-panel, #bi-fab-panel, #eqai-panel, .cfo-fab-panel, .ai-fab-panel {
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
    bottom: 86px !important;
    max-height: 72vh !important;
  }
  /* iOS 聚焦 input 會自動放大（font-size <16px 觸發）→ 對話框被放大、版面跑掉。
     強制 AI 對話輸入框 ≥16px 即可阻止 iOS 自動縮放。 */
  #ai-msg, #aibatch-text, #ai-custom-prompt,
  #bi-fab-q, #eqai-q,
  .ai-fab-input input, .ai-fab-input textarea,
  .fab-input input, .fab-input textarea,
  #ai-fab-panel input, #ai-fab-panel textarea,
  #bi-fab-panel input, #bi-fab-panel textarea,
  #eqai-panel input, #eqai-panel textarea {
    font-size: 16px !important;
  }

  /* ── 7. Modal 一律貼齊視窗、可內捲 ── */
  .modal, .eq-modal-card, .ad-modal-card, .bi-modal-card, .cfo-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto;
  }
  .modal-overlay, .eq-modal, .ad-modal, .cfo-modal { padding: 10px !important; }
}

/* ══════════════════════════════════════════════════════════
   逐頁微調 (Page-specific overrides)
   ══════════════════════════════════════════════════════════ */

/* ── admin.html：平台後台 shell ── */
@media (max-width: 880px) {
  /* grid 單欄的 auto track 會被最寬子項的 min-content 撐爆 → 直接改 block 堆疊 */
  .ad-layout { display: block !important; }
  .ad-subnav { position: static !important; height: auto !important; }
  .ad-main { max-width: 100% !important; padding: 16px 12px 48px !important; }
  .ad-main, .ad-section, .ad-page-head, .ad-toolbar,
  .ad-table-wrap, .ad-card, .ad-cardwrap, .ad-page-actions {
    min-width: 0 !important; max-width: 100% !important;
  }
  .ad-toolbar { flex-wrap: wrap !important; }
  /* 搜尋框/篩選器在窄屏直接整列、可縮 */
  .ad-toolbar > input, .ad-toolbar > select,
  .ad-toolbar > .lui-input, .ad-toolbar > .lui-select { flex: 1 1 100% !important; min-width: 0 !important; }
  .ad-page-head { flex-wrap: wrap !important; }
}

/* ── equity.html：決議/事件明細列（桌機 5 欄）在手機改 2 欄，避免擠壓 ── */
@media (max-width: 768px) {
  .line-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .line-row > :last-child { grid-column: 1 / -1; justify-self: end; }
}

/* 極窄機型再收一階 */
@media (max-width: 400px) {
  .cfo-mscroll > table th,
  .cfo-mscroll > table td { font-size: 12px; padding-left: 8px; padding-right: 8px; }
  h1 { font-size: clamp(18px, 5.4vw, 22px) !important; }
}