/* ════════════════════════════════════════════════
   global.css  ─  ISMS 全域變數、Reset 與版面元件
   ════════════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
:root {
  /* 品牌色 */
  --clr-primary:       #05427e;
  --clr-primary-dark:  #03305c;
  --clr-primary-light: #0a5da6;
  --clr-accent:        #1d4ed8;

  /* 中性色 */
  --clr-bg:            #f4f6f9;
  --clr-surface:       #ffffff;
  --clr-border:        #e9ecf0;
  --clr-border-light:  #f1f5f9;

  /* 文字色 */
  --clr-text:          #1e293b;
  --clr-text-sec:      #64748b;
  --clr-text-muted:    #94a3b8;

  /* 語意色 */
  --clr-danger:        #dc2626;
  --clr-danger-bg:     #fee2e2;
  --clr-warning:       #d97706;
  --clr-warning-bg:    #fef3c7;
  --clr-success:       #16a34a;
  --clr-success-bg:    #dcfce7;
  --clr-info:          #0284c7;
  --clr-info-bg:       #e0f2fe;

  /* 語意色的框線階（.alert-banner 這類「底色＋框線＋文字」三件組要用）
     2026-08-10 補：原本這三個值寫死在 .alert-banner 各行。 */
  --clr-danger-border:  #fca5a5;
  --clr-warning-border: #fcd34d;
  --clr-success-border: #86efac;
  --clr-info-border:    #93c5fd;

  /* 語意色的 hover 深色階
     2026-08-10 補：原本 .btn-primary:hover / .btn-danger:hover 只能各自寫死 hex，
     因為沒有對應 token。值沿用既有寫死的顏色，外觀不變。 */
  --clr-accent-hover:  #1b45c0;
  --clr-danger-hover:  #b91c1c;
  --clr-warning-hover: #b45309;
  --clr-success-hover: #15803d;

  /* 淺藍裝飾色（選單 hover、頁籤、資訊框、focus ring）
     2026-08-10 補：#eff6ff／#dbeafe／#bfdbfe 這三個值原本被重複寫死至少 6 處
     （.nav-item、.rules-tab、.info-callout、.stat-card 的 icon 底色等），
     它們是 --clr-accent 的淺階，收成 token 後才有辦法一次改。 */
  --clr-accent-bg:        #eff6ff;
  --clr-accent-bg-strong: #dbeafe;
  --clr-accent-border:    #bfdbfe;
  --clr-accent-ring:      rgba(29, 78, 216, .1);

  /* 表格列 hover（原本 .data-table tbody tr:hover 寫死） */
  /* ── 通報平台的品牌色（Z3-26）──────────────────────────────
     這幾個**不是本站的色票**，是各平台自己的商標色，所以不跟著主題變。
     收成 token 的理由是「同一組色不要有兩份」——
     原本 MonitoringEngineCenterView 與 NotificationChannelsView 各寫一份，
     改一邊另一邊就對不上。 */
  --brand-discord:  #5865F2;
  --brand-slack:    #4A154B;
  --brand-telegram: #2AABEE;
  --brand-line:     #06C755;
  --brand-email:    #EA4335;

  /* Z3-108（2026-08-21）：這裡原本有 --brand-*-bg／--brand-*-fg 兩組（Z3-97 的淡底藥丸用的）。
     藥丸已改成小圖示，那十個 token 沒有任何地方在用，**整組移除**——
     留著沒人用的 token，下一個人會以為那是現行做法而拿去用。
     要找回來看 git（Z3-97 的 commit）。
     ⚠️ --brand-discord／slack／telegram／line／email（品牌色本身）**還在用**，
        UI.channelIcon() 就是拿它們上色。 */

  --clr-row-hover:     #f8fafc;

  /* 捲軸拉桿（原本 .sidebar-body 的 scrollbar-color 寫死；值不變） */
  --clr-scrollbar:     #e2e8f0;

  /* 版面尺寸 */
  --header-h:    60px;
  --sidebar-w:   268px;

  /* 字型 */
  --font: 'Inter', 'PingFang TC', 'Microsoft JhengHei', Arial, sans-serif;

  /* 陰影 */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, .05);
  --shadow-md:      0 4px 18px rgba(0, 0, 0, .09);
  --shadow-header:  0 2px 10px rgba(5, 66, 126, .35);

  /* 圓角 */
  /* 圓角。⚠️ **這一組是「照實際畫面盤點出來的」，不是先訂規格再套**
     （使用者 2026-08-20 在「改規格配合現況／改畫面配合規格」兩案中選了前者，
     理由是後者會讓全站圓角出現肉眼可見的微調）。

     所以 `--r-sm/md/lg` 這三個原有的值**一個都不能動**——
     動了它們，所有已經在用的地方會跟著變，那就不是「畫面不變」了。
     底下四個是補上的，值就是畫面上本來在用的數字：

       --r-xs   4px  ＝ `<code>` 小方塊（27 處）
       --r-card 8px  ＝ **全站用最多的（49 處）**：卡片、說明框、按鈕群
       --r-pill 10px ＝ 行內小藥丸（14 處）
       --r-full 999px＝ 完整膠囊（等級藥丸、狀態徽章）

     加新圓角之前先看這裡有沒有可以用的，不要再長出第八個數字。 */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-card: 8px;
  --r-md: 9px;
  --r-pill: 10px;
  --r-lg: 12px;
  --r-full: 999px;

  /* 動畫 */
  --tr:         .2s ease;
  --tr-sidebar: .28s cubic-bezier(.4, 0, .2, 1);

  /* ── 以下是「不寫的話由瀏覽器／作業系統決定顏色」的項目 ──
     2026-08-11 補。這一類問題 grep 色碼抓不到（因為根本沒寫顏色），
     必須靠清單逐項釘死，check-frontend.sh 第 6 項會檢查這裡有沒有漏。 */

  /* 原生控制項著色（checkbox / radio / range / progress）
     不設的話預設 auto，同一份程式碼在不同瀏覽器會出現不同顏色。

     用 --clr-accent 而不是 --clr-primary：本系統的兩個藍是分工的——
     --clr-primary（深藍）是**框架**（標題列漸層、側邊欄品牌），
     --clr-accent（亮藍）是**可互動的東西**（.btn-primary、.rules-tab.active）。
     勾選框與圓鈕是互動控制項，屬後者。
     2026-08-11 初版誤選 --clr-primary，理由是「跟標題列同色」——
     但標題列是框架，那個對齊基準本身就選錯了（使用者當天指出）。 */
  accent-color: var(--clr-accent);

  /* 原生 UI 的明暗基調。不設的話會跟著使用者作業系統走，
     深色模式下 <select> 展開的選項清單、日期選擇器會變成黑底白字。
     本系統只有淺色版面，釘死 light。 */
  color-scheme: light;
}

/* ════════════════════════════════════════════════
   RESET
   ════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--clr-bg);
  color: var(--clr-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a      { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; }
img    { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* 瀏覽器自動填入的欄位：Chrome / Edge 會強制塗上淡黃色底，
   而且 background 蓋不掉，只有夠大的 inset box-shadow 壓得住。
   2026-08-11 補：不處理的話登入頁一存過密碼就變黃底，demo 第一眼就看到。 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--clr-surface) inset;
          box-shadow: 0 0 0 1000px var(--clr-surface) inset;
  -webkit-text-fill-color: var(--clr-text);
  caret-color: var(--clr-text);
  transition: background-color 9999s ease-in-out 0s;
}

/* ════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════ */
.app-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  z-index: 900;
  box-shadow: var(--shadow-header);
}

.hamburger-btn {
  background: none; border: none;
  padding: 7px; border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 5px;
  transition: background var(--tr);
}
.hamburger-btn:hover { background: rgba(255, 255, 255, .18); }
.hamburger-btn span {
  display: block; width: 20px; height: 2px;
  background: #fff; border-radius: 2px;
}

.header-brand      { display: flex; align-items: center; gap: 10px; }
.header-brand-icon {
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, .18); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.header-brand-icon svg { display: block; }
.header-brand-title {
  color: #fff; font-size: 15px; font-weight: 600;
  letter-spacing: .3px; white-space: nowrap;
}
.header-spacer { flex: 1; }
.header-user   { display: flex; align-items: center; gap: 10px; }
.header-username {
  color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 500;
  white-space: nowrap; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis;
}
.btn-logout {
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; padding: 6px 13px; border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background var(--tr); white-space: nowrap;
}
.btn-logout:hover { background: rgba(255, 255, 255, .28); }

/* ════════════════════════════════════════════════
   SIDEBAR OVERLAY
   ════════════════════════════════════════════════ */
.sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 66, 126, .08);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
  backdrop-filter: blur(1px);
}
.sidebar-overlay.active { opacity: 1; pointer-events: auto; }

/* ════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════ */
.sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100vh;
  background: var(--clr-surface);
  z-index: 1100;
  transform: translateX(-100%);
  transition: transform var(--tr-sidebar);
  display: flex; flex-direction: column;
  box-shadow: 4px 0 28px rgba(0, 0, 0, .13);
  overflow: hidden;
}
.sidebar.open { transform: translateX(0); }

.sidebar-brand {
  height: var(--header-h); flex-shrink: 0;
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);
  display: flex; align-items: center; gap: 11px;
  padding: 0 18px;
}
.sidebar-brand-icon {
  width: 34px; height: 34px;
  background: rgba(255, 255, 255, .2); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-brand-text-title { color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.sidebar-brand-text-sub   { color: rgba(255, 255, 255, .6); font-size: 10.5px; }

.sidebar-body {
  flex: 1; overflow-y: auto; padding: 14px 10px 16px;
  scrollbar-width: thin; scrollbar-color: var(--clr-scrollbar) transparent;
}
/* 分組標題：目前選單以可摺疊按鈕本身當標題，不再另外重複一行灰字。
   保留樣式以備他處使用；若使用，顏色與字級已調整為清晰可讀。 */
.nav-group-label {
  padding: 12px 10px 4px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .5px;
  color: #475569;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  color: #1f2937; font-size: 15px; font-weight: 600;
  transition: background var(--tr), color var(--tr);
  margin-bottom: 3px;
}
.nav-item:hover  { background: var(--clr-accent-bg); color: var(--clr-primary); }
/* 選中態的字重跟 .rules-tab.active 一致（皆 600）。
   2026-08-11 前這裡是 700：未選中已經是 600，選中再跳一級會讓整行字寬變化、
   切換時看起來會抖一下；底色與藍字已足以區分。
   依使用者 2026-08-11 定的標準——「統一樣式」包含大小、圓角、字體、加粗。 */
.nav-item.active { background: var(--clr-accent-bg-strong); color: var(--clr-accent); font-weight: 600; }
.nav-parent {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}
.nav-parent .nav-caret {
  margin-left: auto;
  color: #475569;
  font-size: 13px;
  transition: transform .2s ease;
}
.nav-parent.open .nav-caret { transform: rotate(0deg); }
.nav-parent:not(.open) .nav-caret { transform: rotate(-90deg); }

.nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .24s ease;
  margin: 0 0 4px;
}
.nav-submenu.open {
  /* 2026-08-14：「系統管理」多了巢狀的「監控與風險規則」四項＋一行標題，共九列。
     520px 放不下會被裁掉——overflow:hidden 不會出現捲軸，是直接看不見。 */
  max-height: 760px;
  overflow-y: auto;
}

/* 2026-08-20：巢狀分組的樣式全部移除。
   老師 V1.3 要的是「側邊選單一個項目、內容用頁籤切」，
   不是在選單裡再放一層小標題，所以這幾條沒有地方在用了。
   留著不用的樣式，下次會有人以為那是可以用的做法。 */

.nav-subitem {
  margin-left: 14px;
  padding-left: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: #334155;
  border-left: 2px solid #cbd5e1;
  border-radius: 0 8px 8px 0;
}
.nav-subitem.active {
  border-left-color: var(--clr-accent);
  border-left-width: 3px;
}

.nav-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--clr-border-light); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-text-sec);
  transition: background var(--tr), color var(--tr);
}
.nav-item:hover  .nav-icon,
.nav-item.active .nav-icon { background: var(--clr-accent-border); color: var(--clr-accent); }

.sidebar-footer {
  padding: 11px 18px; border-top: 1px solid var(--clr-border-light);
  font-size: 11.5px; color: var(--clr-text-muted); flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   MAIN LAYOUT
   ════════════════════════════════════════════════ */
.main-content   {
  padding-top: var(--header-h);
  min-height: 100vh;
  transition: margin-left var(--tr-sidebar);
}
.page-container { padding: 26px 30px; max-width: 1400px; margin: 0 auto; }

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--clr-text-muted); margin-bottom: 10px;
}
.breadcrumb a       { color: var(--clr-primary); font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep     { color: #cbd5e1; }

/* ── Page Header ── */
.page-head  { margin-bottom: 26px; }

/* 標題列右側的「整頁動作」按鈕（2026-08-21）
   ────────────────────────────────────────────────
   為什麼要有這一組：

   全站的慣例是把動作按鈕放在 .toolbar 最右邊（＋新增資產、重新載入…），
   多數頁面的篩選器只有兩三個，那樣放沒問題。

   但「資產監控設定」有七個篩選元件（搜尋、資產、監控、類型、每頁筆數、
   狀態、覆寫狀態）＋清除篩選，整排塞不下就會換行，
   動作按鈕被擠到第二行右邊，跟「顯示 22 / 22 筆」黏在一起——
   使用者 2026-08-21 回報「跟上面的分類器有點格格不入」。

   癥結是**動作與篩選混在同一個容器**：一個是「做事情」、一個是「找東西」，
   擠在一起就分不出來。篩選器多到換行時特別明顯。

   ⇒ 篩選器多的頁面，把整頁動作移到標題列右側。
      這裡刻意做成共用樣式而不是只在那一頁寫 style，
      免得下一頁遇到同樣情形又各寫一份（見上面 .list-chin 的教訓）。

   用法：
     <div class="page-head page-head--with-actions">
       <div>…麵包屑／標題／說明…</div>
       <div class="page-head-actions"> …按鈕… </div>
     </div>
*/
.page-head--with-actions {
  display: flex;
  /* 按鈕跟**說明文字那一行**齊底，不是跟標題齊中（2026-08-21 第三版）。

     前兩版的思路都是「讓按鈕中線對齊標題中線」，實測也真的對齊了
     （按鈕中線 134、標題中線 127），但使用者連續兩次回報還是太上。

     原因是左邊是三行（麵包屑／標題／說明）、右邊只有一行按鈕：
     就算跟中間那一行對齊，按鈕上方還是留著一大塊空白，
     視覺重心整個偏上。齊底之後按鈕會落在說明那一行的高度，
     跟下面的統計卡片距離縮短，才是使用者要的「往下移一點」。

     用 flex-end 而不是再算一次 padding：說明文字長度會變、
     哪天多一行就又要重算，齊底不會有這個問題。 */
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* 高度不用自己算，靠父層的 align-items: flex-end 齊底（見上面的說明）。
     ⚠️ 不要再加 padding-top 回來——那是前兩版的做法，已經被否掉兩次。 */
  padding-top: 0;
}

/* ── Z3-28 的「下巴」已經撤掉（2026-08-19）──────────────────────
   過濾列原本做成一塊白底、貼在頁籤下方的 .list-chin。使用者看過實機後三度回饋：
   「下巴不要白底」→「還是擠到上面的頁籤了」→「還是恢復沒有下巴?」
   ⇒ 白底拿掉之後它就只是一般的工具列，**整組撤回 .toolbar**。

   ⚠️ 撤掉的不只是外觀，還修好一個副作用：`.toolbar .toolbar-reload` 這條
      共用樣式（重新載入的圖示）**只在 .toolbar 底下生效**，
      自訂 class 會讓那顆按鈕長得跟全站不一樣——正是他一直在講的那件事。
   ⇒ 教訓：清單頁的工具列一律用 .toolbar，不要為單一頁另立 class。
      連同 .page-head--attached 也一併刪除，那是白底時代吃掉標題下邊距用的。 */

/* ── 欄位標題過濾（Z3-28「丙」）已於 Z0-32 全數移除 ─────────────────────
   老師 2026-08-20：「（欄位標題的下拉）這種以前我們都是認為排序」——
   標題上掛選單在本系統會被讀成排序，而不是過濾；他要求「一個系統要統整一致風格」。
   ⇒ 通知方式頁的過濾改回工具列的一排 .form-select（全站其他清單頁的做法），
      .th-filter* 這一組只有那一頁在用，一併刪除，不留無人使用的樣式。 */
.page-title { font-size: 22px; font-weight: 700; color: var(--clr-text); }
.page-desc  { font-size: 13px; color: var(--clr-text-sec); margin-top: 4px; }

/* ── Alert Banner ── */
.alert-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 15px; border-radius: var(--r-md);
  font-size: 13px; margin-bottom: 20px; line-height: 1.5;
}
/* 2026-08-10：四個狀態全部改用 token。
   原本 .warning 走的是另一組橘（#fff7ed/#fed7aa/#c2410c），與 .badge-warning 用的
   --clr-warning 系（琥珀）不同色系，同一個「警告」在畫面上會有兩種長相；
   統一以 --clr-warning 系為準。另補上原本缺的 .info（--clr-info 早就存在卻沒人用）。 */
.alert-banner.warning { background: var(--clr-warning-bg); border: 1px solid var(--clr-warning-border); color: var(--clr-warning); }
.alert-banner.danger  { background: var(--clr-danger-bg);  border: 1px solid var(--clr-danger-border);  color: var(--clr-danger); }
.alert-banner.success { background: var(--clr-success-bg); border: 1px solid var(--clr-success-border); color: var(--clr-success); }
.alert-banner.info    { background: var(--clr-info-bg);    border: 1px solid var(--clr-info-border);    color: var(--clr-info); }
.alert-banner a       { color: inherit; font-weight: 600; }

@media (min-width: 992px) {
  .sidebar {
    transform: translateX(0);
    z-index: 800;
  }

  body.sidebar-open .main-content {
    margin-left: var(--sidebar-w);
  }

  body:not(.sidebar-open) .main-content {
    margin-left: 0;
  }

  body:not(.sidebar-open) .sidebar {
    transform: translateX(-100%);
  }

  .sidebar-overlay {
    display: none;
  }
}

/* ════════════════════════════════════════════════
   第三層頁籤那一條列（`.tabs-bar--sub`）
   ════════════════════════════════════════════════

   🔴 用在「監控與風險規則 → 監控引擎」那一頁：
      同一條列上左邊是第三層頁籤（底線式 `.sub-tabs`），
      右邊是「通報系統測試」按鈕。

   問題：`.sub-tabs` 自己帶 `margin-top:26px`（第三層頁籤的標準上留白），
   而 `.tabs-bar` 是 `align-items:flex-start`（靠上對齊）。
   結果頁籤往下掉 26px、按鈕留在原地，看起來像**按鈕自己佔一行**。

   ⚠️ 「兩顆按鈕自己佔一整列」正是 2026-08-14 老師抱怨過、
      2026-08-21 修掉的問題，不能因為換頁籤樣式又退回去。

   做法：把那 26px 從「頁籤」搬到「整條列」，
   兩個一起下移就對齊了，第三層與第二層之間的距離也不變。

   ⚠️ 用修飾類別而不是直接改 `.tabs-bar`：那個類別全站好幾頁在用。
   ⚠️ 底線要跟按鈕齊底，所以這裡是 `flex-end` 不是 `flex-start`。 */
.tabs-bar--sub {
  margin-top: 26px;
  align-items: flex-end;
}

/* 留白已經搬到外層了，裡面就不要再留一次（會變成 52px）。 */
.tabs-bar--sub > .sub-tabs {
  margin-top: 0;
  margin-bottom: 0;
}

/* ════════════════════════════════════════════════
   頁碼可以手打（`PageJump`）
   ════════════════════════════════════════════════

   老師 2026-08-21 要求：分頁要能直接輸入頁碼，並擋掉 0 與負數。
   事件紀錄有 39,458 頁，要看第 20,000 頁的話按「下一頁」要按兩萬次。

   ⚠️ 輸入框要跟原本那個「1 / 39458」長得幾乎一樣，
      不要因為變成輸入框就把整條分頁列撐高——那會讓每一頁的底部
      高度都變一點點，看起來像版面跑掉了。 */
.page-jump {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  position: relative;
}

.page-jump-input {
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 1px 4px;
  min-width: 2.4em;
  border: 1px solid var(--clr-border, #e5e7eb);
  border-radius: 4px;
  background: #fff;
  color: inherit;
}

.page-jump-input:focus {
  outline: none;
  border-color: var(--clr-accent, #1d4ed8);
  box-shadow: 0 0 0 2px rgba(29, 78, 216, .12);
}

.page-jump-total {
  font-variant-numeric: tabular-nums;
  color: var(--clr-text-sec, #64748b);
  white-space: nowrap;
}

/* 提示訊息浮在輸入框上方，不佔位置——佔位置的話每次出現訊息
   整條分頁列都會跳一下。 */
/* 只有一頁時把輸入框藏起來，只留純文字「1 / 1」。
 *
 * 理由：輸入框是在邀請使用者做一件事。只有一頁時那件事做不了，
 * 打什麼進去都會被擋下來——那是把「沒有功能」偽裝成「有功能」。
 *
 * ⚠️ 用 display:none 而不是把整個 .page-jump 拿掉，
 *    是因為總頁數會變（篩選條件一改就從 1 頁變 40,375 頁）。
 *    拿掉再長回來會讓整條分頁列閃一下。
 */
.page-jump--single .page-jump-input { display: none; }
.page-jump--single .page-jump-total { margin-left: 0; }

.page-jump-hint {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 5px;
  background: #7f1d1d;
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
  pointer-events: none;
  z-index: 20;
}