/* suite-mobile.css — 啟原 Suite 手機適配(直向 portrait + 橫向 landscape 皆適配)。
   設計原則:保守、只補強、不破壞各站既有 RWD 與共用工具列(#qos-bar 的 🌓/A±)。
   ★ 不對 html/body 設 overflow-x:hidden(會切掉內容)。
   ★ 不放大共用工具列按鈕(會撐爆 #topbar 把工具列擠出畫面)。 */

/* 手機(直向窄屏 + 橫向手機,寬度斷點同時涵蓋) */
@media (max-width: 860px) {
  /* 麵包屑可截斷,讓 #topbar 內的 ☰ / 工具列 / 語言鈕都有空間,不被擠出視窗 */
  #crumb, .crumb, .breadcrumb {
    min-width: 0; flex: 0 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 共用工具列維持精簡(明確壓回 suite-ui 預設尺寸,避免被任何規則撐大)。
     margin-left:auto → 換行後 qos 靠右自成一列;不換行時也維持靠右。 */
  #qos-bar.qos-dock { margin-left: auto; flex: 0 0 auto; }
  #qos-bar.qos-dock button { min-width: 28px; height: 28px; padding: 0 5px; min-height: 0; }
  /* 頂列在窄屏改為「換行」呈現:工具太多時 qos-bar(🌓/A±)落到第二列且完整可見,
     不再需要橫向滑動(原本 overflow-x:auto 會把 qos 推到畫面外、預設看不到)。
     ★ 配合各站 app.css @media 把 #topbar 所在的 grid row 設為 auto,topbar 才能長高容納第二列。 */
  #topbar {
    flex-wrap: wrap;
    overflow-x: visible; overflow-y: visible;
    height: auto; min-height: var(--top-h, var(--topbar-h, 50px));
    row-gap: 4px; padding-top: 6px; padding-bottom: 6px;
    align-content: center;
  }
  #topbar::-webkit-scrollbar { height: 0; }
  /* 品牌字不垂直折行(原本 white-space:normal 會把「Project OS」拆兩行、撐破頂列高度並蓋住內容) */
  .brand { white-space: nowrap; flex: 0 0 auto; }
  /* 輸入元件不超出視窗 */
  input, select, textarea { max-width: 100%; box-sizing: border-box; }
  /* 表格容器平滑橫捲(內容多時左右滑,不爆版) */
  .tbl-scroll, .tbl-wrap, .gantt-scroll { -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* 個人花費頁輸入欄彈性成長 */
  #pi_vendor, #pi_amount, #pi_cat, #bk_acct { flex: 1 1 130px; }
}

/* 窄直向手機 */
@media (max-width: 560px) {
  .stat-row, .grid-2, .grid-3, .grid-4,
  .g-2, .g-3, .g-4, .g-6 { grid-template-columns: 1fr !important; }
  #crumb b, .crumb b { font-size: 13px; }

  /* 橫向按鈕/控制列在窄屏換行,避免被切掉(根因修正)。
     .tabs 維持 overflow-x:auto(可左右滑),不強制換行。 */
  .card-head, .flex, .page-head, .page-head .actions { flex-wrap: wrap; }
  .card-head .right { margin-left: 0; }
  /* 列內元素可縮,文字截斷而非撐爆 */
  .list-row, .list-row > * { min-width: 0; }
  /* 我新增的個人花費頁:統計卡與表單列換行 */
  #content .tbl-scroll { max-width: 100%; }
}

/* 橫向手機(矮螢幕):壓低頂列高度,留更多內容空間,避免被切 */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --top-h: 44px; --topbar-h: 44px; }
  #content, .page { padding-top: 10px; }
}