/* 手機版面（簽核相關頁面共用）：只在螢幕寬度小於 768px 時生效，桌機畫面不受影響 */
.nav-toggle { display: none; }

@media (max-width: 767px) {
  body { font-size: 16px; }

  header { padding: 10px 12px; font-size: 15px; gap: 8px; }
  header .title-wrap span { white-space: nowrap; }
  header .title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
  header .right { gap: 8px; flex-shrink: 0; }
  header .greeting { font-size: 12px; white-space: nowrap; }
  header .logout-link { font-size: 12px; padding: 3px 8px; white-space: nowrap; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    background: none; border: 1px solid rgba(255,255,255,0.6); border-radius: 4px;
    color: #fff; font-size: 20px; cursor: pointer;
  }

  .layout { flex-direction: column; }
  nav { display: none; width: 100%; padding: 4px 0; border-bottom: 1px solid #dfe6e9; }
  body.nav-open nav { display: block; }

  main { padding: 12px 10px; }
  .card { padding: 16px 14px; }

  /* 表格改成一張一張的卡片 */
  table.cardify thead { display: none; }
  table.cardify, table.cardify tbody, table.cardify tr, table.cardify td { display: block; width: 100%; }
  table.cardify tr { border: 1px solid #e3e6e8; border-radius: 8px; margin-bottom: 10px; padding: 8px 12px; background: #fff; }
  table.cardify td { border: none; padding: 4px 0; display: flex; gap: 10px; font-size: 15px; }
  table.cardify td[data-label]::before { content: attr(data-label); flex-shrink: 0; min-width: 4.5em; color: #7f8c8d; font-size: 14px; }
  table.cardify tr.data-row:hover td { background: none; }

  /* 案件明細 */
  .form-title { font-size: 20px; }
  .kv-grid { grid-template-columns: 1fr; gap: 10px; }
  .attachment-preview { gap: 10px; }

  .action-row form { display: block !important; }
  .action-row .approve-btn, .action-row .reject-btn, .action-row .del-btn {
    display: block; width: 100%; margin: 0 0 10px 0; padding: 14px; font-size: 17px; text-align: center;
  }
  #invoiceForm #invoiceInput { width: 100%; margin-bottom: 10px; }
  #invoiceForm .approve-btn { margin-left: 0 !important; padding: 12px !important; }

  /* 填單頁：品項明細改成每項一張可填寫的卡片，表頭只保留「急單」勾選 */
  #itemsTable, #itemsTable tbody, #itemsTable tr, #itemsTable td { display: block; width: 100% !important; }
  #itemsTable thead { display: block; }
  #itemsTable thead tr { display: flex; justify-content: flex-end; }
  #itemsTable thead th { display: none; }
  #itemsTable thead th:nth-child(5) { display: block; background: none; padding: 0 0 8px; }
  #itemsTable thead th:nth-child(5) span { display: none; }
  #itemsTable tbody tr { position: relative; border: 1px solid #e3e6e8; border-radius: 8px; padding: 8px 12px 10px; margin-bottom: 10px; }
  #itemsTable tbody td { border: none; padding: 3px 0; }
  #itemsTable tbody td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; color: #7f8c8d; margin-bottom: 2px; }
  #itemsTable tbody td:nth-child(1) { padding-right: 30px; }
  #itemsTable tbody td.remove { position: absolute; top: 4px; right: 4px; width: auto !important; padding: 0; }
  .title-row .form-title { font-size: 20px; }

  /* 說明小視窗：手機上固定在畫面中間顯示，不會超出畫面 */
  .help-icon .tooltip-text { position: fixed; top: 30%; bottom: auto; left: 50%; transform: translateX(-50%); width: calc(100vw - 32px); max-width: 340px; }
  .help-icon .tooltip-text::after { display: none; }

  /* 帳號管理 */
  table.cardify td:empty { display: none; }
  .card .card-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .card .card-head input { width: 100%; }
  table.cardify td.link-col { flex-wrap: wrap; }
  table.cardify td.link-col .copy-btn { margin-left: 0; white-space: nowrap; }
  table.cardify td.action-col { justify-content: flex-end; }

  /* 簽核流程管理 */
  .path-row { flex-direction: column; align-items: stretch !important; gap: 8px; }
  .path-seq { flex-wrap: wrap; white-space: nowrap; }
  .path-meta { justify-content: space-between; white-space: nowrap; }
  .path-count-wrap .tooltip-text { position: fixed; top: 30%; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 32px); max-width: 340px; }
  .card .card-head input { width: 100% !important; max-width: none; }

  .lightbox img { max-width: 96%; }
  .lightbox-close { top: 10px; right: 16px; }
}