/*
 * 手機版顯示修正（會員管理 / 子帳號頁的查詢工具列）。
 *
 * public/assets/ 下的檔案是來源站台的原樣建置產物，帶有 Vite 雜湊檔名，
 * 不能改動；因此這裡用一份獨立的覆寫樣式，在主樣式之後載入。
 * 每一段都限定在特定元件、並且全部包在手機斷點的 media query 內，
 * 桌機版外觀完全不受影響。
 *
 * 1. .member-search  — 會員管理／子帳號頁的查詢工具列（max-width:720px）
 * 2. .credit-filters — 信用報表頁的篩選區（max-width:480px）
 */

@media (max-width: 720px) {
  /* 來源樣式在 480px 以下把七個控制項全部拉成整列直排，481–720px 之間又維持
     單行 flex 而塞不下並亂折行。改成固定三欄格線：勾選、輸入框、三個下拉、
     顯示筆數＋查詢，各自落在可預期的位置。 */
  .member-search {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 8px 6px;
  }

  .member-search > .member-include,
  .member-search > input:not([type="checkbox"]) {
    grid-column: 1 / -1;
  }

  /* label 變成格線項目後會被 blockify，checkbox 與文字需要自行對齊並留間距 */
  .member-search > .member-include {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .member-search > .member-include input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
  }

  /* 三個下拉並排一列，min-width:0 才不會被最長選項（手機號碼／層級1）撐爆格線 */
  .member-search > select {
    min-width: 0;
  }

  .member-search > .member-page-size {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
  }

  .member-search > .member-page-size select {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
  }

  .member-search > button[type="submit"] {
    grid-column: span 1;
    width: 100%;
    justify-content: center;
    padding: 0 8px;
  }

  /* 觸控尺寸；font-size 必須 >= 16px，否則 iOS Safari 在聚焦輸入框時會自動
     放大整頁，放大後版面就會停在被裁切的狀態。 */
  .member-search input:not([type="checkbox"]),
  .member-search select,
  .member-search > button[type="submit"] {
    height: 38px;
    font-size: 16px;
  }

  .member-search input:not([type="checkbox"]),
  .member-search select {
    width: 100%;
  }
}

/*
 * 信用報表頁篩選區（.credit-filters）。
 *
 * 來源樣式裡 480px 以下原本就有一組「把篩選列改成單欄直排」的規則
 * （.credit-filter-row{grid-template-columns:1fr} 等），但它們的選擇器沒有
 * .credit-page 前綴，權重輸給 720px 區塊裡的 .credit-page .credit-filter-row，
 * 所以在手機上完全沒有生效。結果篩選區在手機上仍維持固定 920px 寬
 * （304px 標籤欄 + 616px 欄位欄）並塞進一個橫向捲動容器裡：畫面上看不到
 * 「查詢日期」「快速選取日期」「會員帳號：」這些標籤，只剩下沒有標題的
 * 日期欄、快速日期按鈕和一個孤零零的輸入框，必須左右拖動才能操作。
 *
 * 帳務頁先前已經用「加上 .accounting-page 前綴」的方式修掉同樣的問題
 * （來源樣式 max-width:480px 區塊），這裡沿用同一個做法補上信用報表頁。
 */

@media (max-width: 480px) {
  /* 手機上不需要橫向捲動；overflow-x 與 overflow-y 必須一起設成 visible，
     只設 overflow-x 時瀏覽器會把它算回 auto（另一軸是 hidden）。 */
  .credit-page .credit-filter-scroll {
    overflow: visible;
  }

  .credit-page .credit-filters {
    width: 100%;
    min-width: 0;
  }

  /* 標籤改成排在欄位上方，而不是固定 304px 的左欄 */
  .credit-page .credit-filter-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    margin-bottom: 8px;
  }

  .credit-page .credit-filter-row > div {
    flex-wrap: wrap;
    min-width: 0;
  }

  /* 查詢日期：兩個日期欄各佔一整列。日期選擇器的浮層固定 268px 寬且
     靠自身左緣展開，欄位滿版時才不會超出畫面右側。 */
  .credit-page .credit-date-range {
    width: 100%;
    gap: 4px;
  }

  .credit-page .credit-date-range > span {
    display: none;
  }

  .credit-page .credit-date-range .datetime-picker {
    width: 100%;
    flex: 1 1 100%;
    flex-basis: 100%;
  }

  .credit-page .credit-date-range .datetime-input {
    height: 36px;
    padding: 2px 8px;
    font: 700 15px/30px Arial, sans-serif;
  }

  /* 快速選取日期：按鈕改為可換行。原本是相連的按鈕群（border-right:0），
     一換行接縫就會錯開，所以每顆按鈕補回完整邊框。 */
  .credit-page .credit-days {
    flex-wrap: wrap;
    gap: 4px !important;
  }

  .credit-page .credit-days button,
  .credit-page .credit-days button:last-child {
    height: 34px;
    border: 1px solid #bbb;
    border-radius: 3px;
  }

  .credit-page .credit-days button.is-selected,
  .credit-page .credit-days button.is-selected:last-child {
    margin-right: 0;
  }

  /* 會員帳號輸入框滿版；font-size 必須 >= 16px，否則 iOS Safari 聚焦時
     會自動放大整頁。 */
  .credit-page .credit-filter-row input[type="text"],
  .credit-page .credit-filter-row input:not([type]) {
    width: 100%;
    height: 36px;
    font-size: 16px;
  }

  /* 遊戲館清單與送出列原本是固定 738px／904px 寬 */
  .credit-page .credit-games,
  .credit-page .credit-filter-actions {
    width: 100%;
    margin-left: 0;
  }

  .credit-page .credit-venue {
    margin-left: 0;
  }
}