/* 專案自訂樣式 —— Tabler 之上的最小覆寫。
   只做「字級下限」一件事，版面一律交給 Tabler 的預設，不覆寫 body/html 的高度或 display。 */

/* ═══════════════════════════════════════════════════════════════
   字級下限 12px
   ═══════════════════════════════════════════════════════════════

   Tabler 的預設對這個後台偏小，而且有兩個會「複利」的陷阱：

     small / .small   0.875em   ← em 相對「父層」，巢狀兩層 14→12.25→10.7px
     .badge           0.857em   ← 同上，放在 .small 的表格裡再縮一次
     h6               0.625rem  = 10px

   本專案大量使用 class="small"（98 處）與 text-muted（58 處），
   複利後最小掉到 10px 上下——那是報關人員整天要盯的單號與數字。

   對策：會複利的一律改用 rem（相對 root，不受巢狀影響），基準抬到 1rem。 */

:root {
  --tblr-body-font-size: 1rem; /* 14px → 16px */

  --tblr-font-size-h4: 1rem; /* 16px */
  --tblr-font-size-h5: 0.9375rem; /* 15px */
  --tblr-font-size-h6: 0.875rem; /* 14px，原 10px */
}

/* ⚠ 用 rem 不用 em —— em 會隨巢狀複利，那正是原本掉到 10px 的原因。 */
small,
.small {
  font-size: 0.875rem; /* 14px，固定值，巢狀幾層都一樣 */
}

.badge {
  --tblr-badge-font-size: 0.8125rem; /* 13px */
}

.table-sm,
.table-sm th,
.table-sm td,
.btn-sm,
.form-control-sm,
.form-select-sm {
  font-size: 0.8125rem; /* 13px，原 12px 剛好卡在下限 */
}

.btn-sm {
  --tblr-btn-font-size: 0.8125rem;
}

/* 表格內文與內文同級：數字與單號要看得清楚。 */
.table > :not(caption) > * > * {
  font-size: 0.9375rem; /* 15px */
}

/* ═══════════════════════════════════════════════════════════════
   頁尾：只壓高度，定位交給 Tabler
   ═══════════════════════════════════════════════════════════════

   _Layout 已改用 Tabler 的骨架（.page → .page-wrapper → .page-body ＋ .footer），
   貼底由 Tabler 的 .footer{margin-top:auto} 自己處理，
   本檔**不再覆寫任何版面屬性**（height／display／flex／position／overflow）。

   只調內距：預設 padding:2rem 0（約 96px）對這個後台太佔位，內容才是主角。

   ⚠ 但也不能壓太扁。先前壓到 8px 又同時掛了 footer-transparent（border-top:0），
   結果頁尾跟上方說明文字黏成一團——**分隔靠的是那條上緣線，不是空白**。
   20px 的原始要求做不到「既有分隔又不黏」，故取 32px：仍遠小於預設的 96px。

   ⚠ 選擇器含 .footer 這個 class 是必要的：
   `body > footer` 的特異性 (0,0,2) 輸給 Tabler 的 `.footer` (0,1,0)，
   padding 根本覆寫不掉——先前改了幾輪 height 都沒用，原因就是這個。 */

footer.footer {
  padding: 0.625rem 0; /* 上下各 10px；連同 12px 的字約 32px 高 */
  font-size: 0.75rem; /* 12px，字級下限 */
}

/* ═══════════════════════════════════════════════════════════════
   .alert 恢復為區塊排列
   ═══════════════════════════════════════════════════════════════

   Tabler 的 .alert 是 display:flex; flex-direction:row; gap:1rem，
   因為它的版型預期只有兩個子元素——一個 icon、一個內容容器：

       <div class="alert">
           <svg class="alert-icon" />
           <div><h4 class="alert-title">…</h4><div>…</div></div>
       </div>

   本專案的 alert 是「說明型」的：標題、兩三段說明、有時再一張表格，
   全都是 .alert 的直接子元素。碰上 flex-direction:row 之後，
   每一個子元素各自變成一欄——標題一欄、第一段一欄、第二段一欄、清單一欄，
   文字被切成四直行，閱讀順序整個斷掉（預委派匯出頁最明顯）。

   全專案 44 個 alert，用到 alert-icon／alert-title 版型的有 0 個，
   所以這裡直接改回區塊排列。真要用 icon 版型時，
   在該 alert 補一個 .d-flex（!important）即可蓋回來。 */

.alert {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   說明文字的行長上限
   ═══════════════════════════════════════════════════════════════

   內容區是 .container-xl（1320px）。表格需要這個寬度，但整段的說明文字不需要：
   14px 的字在 1320px 裡一行裝得下約 90 個中文字，眼睛換行時很容易掉行，
   而本系統的警告文字（品名過長、必填欄缺值、與菜鳥資料不符）
   偏偏都是三四行的長句——那正是報關人員上傳前唯一會看的東西。

   只縮文字、不縮容器：alert 的底色與邊框仍維持整寬，
   表格也不受影響（限定 > p，不會套到 table）。 */

.alert > p,
main > p {
  max-width: 42rem; /* 約 40 個中文字 */
}