/* Eat AI 後台的共用外殼樣式 —— 11 個 public/admin-*.html 與 React 審核站共用這一份。
 *
 * 深色模式的做法要先看懂，否則下一個人會以為它沒做完：
 * 這裡把 Tailwind 的整條色階（neutral / amber / rose / emerald / blue …）重新
 * 指向下面這些 CSS 變數（對接在 admin-shell.js 的 tailwind.config 裡），深色模式
 * 只翻變數的值。所以那 11 頁裡既有的 `bg-white`、`text-neutral-900`、
 * `bg-amber-50 text-amber-900` **一個 class 都不用加 `dark:`**，它們自動就對了。
 * 反過來說：**不要在頁面上寫死 `#fff` 或 `style="color:#333"`** —— 那種寫法
 * 繞過整套機制，而它只在深色模式下壞，你在淺色下驗不出來。
 *
 * 語意色的深色值是把色階「反過來讀」算出來的（50↔950），所以
 * 「淺琥珀底 + 深琥珀字」在深色下自動變成「深琥珀底 + 淺琥珀字」。
 * neutral 是例外，它手工訂了一份 —— 照反轉套的話 200（框線）會比卡片底色還深，
 * 於是深色模式下每一條框線都會消失。
 *
 * 要重新產生下面那一段變數：node scratch/uiwork/gen-tokens.mjs
 */

/* >>> tokens:start —— 由 scratch/uiwork/gen-tokens.mjs 產生，不要手改這一段 <<< */
:root {
    --c-neutral-50: 248 250 252;
    --c-neutral-100: 241 245 249;
    --c-neutral-200: 226 232 240;
    --c-neutral-300: 203 213 225;
    --c-neutral-400: 148 163 184;
    --c-neutral-500: 100 116 139;
    --c-neutral-600: 71 85 105;
    --c-neutral-700: 51 65 85;
    --c-neutral-800: 30 41 59;
    --c-neutral-900: 15 23 42;
    --c-neutral-950: 2 6 23;
    --c-amber-50: 255 251 235;
    --c-amber-100: 254 243 199;
    --c-amber-200: 253 230 138;
    --c-amber-300: 252 211 77;
    --c-amber-400: 251 191 36;
    --c-amber-500: 245 158 11;
    --c-amber-600: 217 119 6;
    --c-amber-700: 180 83 9;
    --c-amber-800: 146 64 14;
    --c-amber-900: 120 53 15;
    --c-amber-950: 69 26 3;
    --c-red-50: 254 242 242;
    --c-red-100: 254 226 226;
    --c-red-200: 254 202 202;
    --c-red-300: 252 165 165;
    --c-red-400: 248 113 113;
    --c-red-500: 239 68 68;
    --c-red-600: 220 38 38;
    --c-red-700: 185 28 28;
    --c-red-800: 153 27 27;
    --c-red-900: 127 29 29;
    --c-red-950: 69 10 10;
    --c-rose-50: 255 241 242;
    --c-rose-100: 255 228 230;
    --c-rose-200: 254 205 211;
    --c-rose-300: 253 164 175;
    --c-rose-400: 251 113 133;
    --c-rose-500: 244 63 94;
    --c-rose-600: 225 29 72;
    --c-rose-700: 190 18 60;
    --c-rose-800: 159 18 57;
    --c-rose-900: 136 19 55;
    --c-rose-950: 76 5 25;
    --c-emerald-50: 236 253 245;
    --c-emerald-100: 209 250 229;
    --c-emerald-200: 167 243 208;
    --c-emerald-300: 110 231 183;
    --c-emerald-400: 52 211 153;
    --c-emerald-500: 16 185 129;
    --c-emerald-600: 5 150 105;
    --c-emerald-700: 4 120 87;
    --c-emerald-800: 6 95 70;
    --c-emerald-900: 6 78 59;
    --c-emerald-950: 2 44 34;
    --c-blue-50: 239 246 255;
    --c-blue-100: 219 234 254;
    --c-blue-200: 191 219 254;
    --c-blue-300: 147 197 253;
    --c-blue-400: 96 165 250;
    --c-blue-500: 59 130 246;
    --c-blue-600: 37 99 235;
    --c-blue-700: 29 78 216;
    --c-blue-800: 30 64 175;
    --c-blue-900: 30 58 138;
    --c-blue-950: 23 37 84;
    --c-sky-50: 240 249 255;
    --c-sky-100: 224 242 254;
    --c-sky-200: 186 230 253;
    --c-sky-300: 125 211 252;
    --c-sky-400: 56 189 248;
    --c-sky-500: 14 165 233;
    --c-sky-600: 2 132 199;
    --c-sky-700: 3 105 161;
    --c-sky-800: 7 89 133;
    --c-sky-900: 12 74 110;
    --c-sky-950: 8 47 73;
    --c-indigo-50: 238 242 255;
    --c-indigo-100: 224 231 255;
    --c-indigo-200: 199 210 254;
    --c-indigo-300: 165 180 252;
    --c-indigo-400: 129 140 248;
    --c-indigo-500: 99 102 241;
    --c-indigo-600: 79 70 229;
    --c-indigo-700: 67 56 202;
    --c-indigo-800: 55 48 163;
    --c-indigo-900: 49 46 129;
    --c-indigo-950: 30 27 75;
    --c-purple-50: 250 245 255;
    --c-purple-100: 243 232 255;
    --c-purple-200: 233 213 255;
    --c-purple-300: 216 180 254;
    --c-purple-400: 192 132 252;
    --c-purple-500: 168 85 247;
    --c-purple-600: 147 51 234;
    --c-purple-700: 126 34 206;
    --c-purple-800: 107 33 168;
    --c-purple-900: 88 28 135;
    --c-purple-950: 59 7 100;
    --c-cyan-50: 236 254 255;
    --c-cyan-100: 207 250 254;
    --c-cyan-200: 165 243 252;
    --c-cyan-300: 103 232 249;
    --c-cyan-400: 34 211 238;
    --c-cyan-500: 6 182 212;
    --c-cyan-600: 8 145 178;
    --c-cyan-700: 14 116 144;
    --c-cyan-800: 21 94 117;
    --c-cyan-900: 22 78 99;
    --c-cyan-950: 8 51 68;
    --c-white: 255 255 255;
    --c-black: 0 0 0;
}

html.dark {
    --c-neutral-50: 11 18 32;
    --c-neutral-100: 17 26 44;
    --c-neutral-200: 43 58 85;
    --c-neutral-300: 59 77 110;
    --c-neutral-400: 100 116 139;
    --c-neutral-500: 148 163 184;
    --c-neutral-600: 176 188 205;
    --c-neutral-700: 203 213 225;
    --c-neutral-800: 226 232 240;
    --c-neutral-900: 241 245 249;
    --c-neutral-950: 248 250 252;
    --c-amber-50: 39 24 24;
    --c-amber-100: 83 43 24;
    --c-amber-200: 126 58 18;
    --c-amber-300: 180 83 9;
    --c-amber-400: 217 119 6;
    --c-amber-500: 245 158 11;
    --c-amber-600: 251 191 36;
    --c-amber-700: 252 211 77;
    --c-amber-800: 253 230 138;
    --c-amber-900: 254 243 199;
    --c-amber-950: 255 251 235;
    --c-red-50: 39 17 28;
    --c-red-100: 88 27 34;
    --c-red-200: 132 26 29;
    --c-red-300: 185 28 28;
    --c-red-400: 220 38 38;
    --c-red-500: 239 68 68;
    --c-red-600: 248 113 113;
    --c-red-700: 252 165 165;
    --c-red-800: 254 202 202;
    --c-red-900: 254 226 226;
    --c-red-950: 254 242 242;
    --c-rose-50: 42 15 34;
    --c-rose-100: 94 20 50;
    --c-rose-200: 137 19 55;
    --c-rose-300: 190 18 60;
    --c-rose-400: 225 29 72;
    --c-rose-500: 244 63 94;
    --c-rose-600: 251 113 133;
    --c-rose-700: 253 164 175;
    --c-rose-800: 254 205 211;
    --c-rose-900: 255 228 230;
    --c-rose-950: 255 241 242;
    --c-emerald-50: 9 32 38;
    --c-emerald-100: 9 59 53;
    --c-emerald-200: 7 84 66;
    --c-emerald-300: 4 120 87;
    --c-emerald-400: 5 150 105;
    --c-emerald-500: 16 185 129;
    --c-emerald-600: 52 211 153;
    --c-emerald-700: 110 231 183;
    --c-emerald-800: 167 243 208;
    --c-emerald-900: 209 250 229;
    --c-emerald-950: 236 253 245;
    --c-blue-50: 19 29 61;
    --c-blue-100: 25 46 104;
    --c-blue-200: 28 58 155;
    --c-blue-300: 29 78 216;
    --c-blue-400: 37 99 235;
    --c-blue-500: 59 130 246;
    --c-blue-600: 96 165 250;
    --c-blue-700: 147 197 253;
    --c-blue-800: 191 219 254;
    --c-blue-900: 219 234 254;
    --c-blue-950: 239 246 255;
    --c-sky-50: 12 34 56;
    --c-sky-100: 13 56 86;
    --c-sky-200: 8 79 119;
    --c-sky-300: 3 105 161;
    --c-sky-400: 2 132 199;
    --c-sky-500: 14 165 233;
    --c-sky-600: 56 189 248;
    --c-sky-700: 125 211 252;
    --c-sky-800: 186 230 253;
    --c-sky-900: 224 242 254;
    --c-sky-950: 240 249 255;
    --c-indigo-50: 22 25 57;
    --c-indigo-100: 37 38 99;
    --c-indigo-200: 49 44 145;
    --c-indigo-300: 67 56 202;
    --c-indigo-400: 79 70 229;
    --c-indigo-500: 99 102 241;
    --c-indigo-600: 129 140 248;
    --c-indigo-700: 165 180 252;
    --c-indigo-800: 199 210 254;
    --c-indigo-900: 224 231 255;
    --c-indigo-950: 238 242 255;
    --c-purple-50: 35 16 68;
    --c-purple-100: 62 26 102;
    --c-purple-200: 93 32 149;
    --c-purple-300: 126 34 206;
    --c-purple-400: 147 51 234;
    --c-purple-500: 168 85 247;
    --c-purple-600: 192 132 252;
    --c-purple-700: 216 180 254;
    --c-purple-800: 233 213 255;
    --c-purple-900: 243 232 255;
    --c-purple-950: 250 245 255;
    --c-cyan-50: 12 36 54;
    --c-cyan-100: 20 59 79;
    --c-cyan-200: 20 83 106;
    --c-cyan-300: 14 116 144;
    --c-cyan-400: 8 145 178;
    --c-cyan-500: 6 182 212;
    --c-cyan-600: 34 211 238;
    --c-cyan-700: 103 232 249;
    --c-cyan-800: 165 243 252;
    --c-cyan-900: 207 250 254;
    --c-cyan-950: 236 254 255;
    --c-white: 24 34 54;
    --c-black: 255 255 255;
}
/* >>> tokens:end <<< */

/* ==========================================================================
   版面：側邊欄 ＋ 內容區
   尺寸取自 ui skill 的 Data-Dense Dashboard 那一組（sidebar 240 / header 56 /
   列高 36 / 小字 12）。密集是刻意的 —— 這是一個一次要看幾百筆資料的後台，
   把間距放寬會讓「這一頁有幾筆有問題」變成要捲三次才數得完。
   ========================================================================== */
:root {
  --admin-sidebar-w: 240px;
  --admin-topbar-h: 56px;
  --admin-row-h: 36px;
}

/* ─── 實心語意色：這幾個**不跟著色階翻轉** ───────────────────────────────
   翻轉那一套是為了「淺底深字」的提示區塊（`bg-rose-50 text-rose-900`）設計的，
   它對**實心**的按鈕與徽章是錯的：深色模式下 rose-600 會翻成淺粉紅，配上白字
   只有 2.7:1 —— 過不了無障礙那一關（要 4.5:1），而它偏偏用在「丟掉」「128 筆退件」
   這種最需要看清楚的地方。
   所以這幾個各自訂一組，兩種主題都自己挑一個對比夠的紅／琥珀。 */
:root {
  --solid-danger-bg: 225 29 72;    /* rose-600，配白字 5.1:1 */
  --solid-danger-fg: 255 255 255;
  --solid-warn-bg: 245 158 11;     /* amber-500 */
  --solid-warn-fg: 69 26 3;        /* 深棕，配琥珀 8.9:1 */
}
html.dark {
  --solid-danger-bg: 190 18 60;    /* rose-700，深色底上配白字 6.8:1 */
  --solid-danger-fg: 255 255 255;
  --solid-warn-bg: 217 119 6;      /* amber-600，深色底上不刺眼 */
  --solid-warn-fg: 255 251 235;    /* 配上面那個 4.6:1 */
}

html { color-scheme: light; }
html.dark { color-scheme: dark; }

body.admin-body {
  margin: 0;
  background: rgb(var(--c-neutral-50));
  color: rgb(var(--c-neutral-900));
  min-height: 100vh;
}

.admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--admin-sidebar-w);
  display: flex;
  flex-direction: column;
  background: rgb(var(--c-white));
  border-right: 1px solid rgb(var(--c-neutral-200));
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-main {
  margin-left: var(--admin-sidebar-w);
  padding: 20px 24px 64px;
  max-width: 1400px;
}

/* 審查入庫（`/`）那個 React SPA：它沒有 .admin-main，內容整包在 #root 裡，
   所以版位由這一條讓開。**這是 React 那一端唯一為了側邊欄做的事** ——
   它的畫面、元件、狀態一行都沒動。 */
[data-admin-shell-only] body > #root {
  margin-left: var(--admin-sidebar-w);
  width: auto;
}

/* 手機：側邊欄收成抽屜，預設推到畫面外 */
@media (max-width: 1023px) {
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 0 0 100vmax rgb(var(--c-black) / 0);
  }
  html.nav-open .admin-sidebar {
    transform: translateX(0);
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45);
  }
  html.nav-open { overflow: hidden; }
  .admin-main { margin-left: 0; padding: 12px 16px 64px; }
  [data-admin-shell-only] body > #root { margin-left: 0; }
}

/* --------------------------------------------------------------- 側邊欄內容 */
.admin-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--admin-topbar-h);
  padding: 0 14px;
  border-bottom: 1px solid rgb(var(--c-neutral-200));
  font-weight: 600;
  letter-spacing: -0.01em;
  flex: none;
}
.admin-brand-dot {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: rgb(var(--c-neutral-900));
  color: rgb(var(--c-white));
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

.admin-nav { padding: 10px 8px; flex: 1; }
.admin-nav-group + .admin-nav-group { margin-top: 14px; }
.admin-nav-title {
  padding: 0 8px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgb(var(--c-neutral-500));
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13.5px;
  color: rgb(var(--c-neutral-700));
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.admin-nav-item:hover { background: rgb(var(--c-neutral-100)); color: rgb(var(--c-neutral-900)); }
.admin-nav-item .icon { color: rgb(var(--c-neutral-400)); flex: none; }
.admin-nav-item:hover .icon { color: rgb(var(--c-neutral-600)); }
.admin-nav-item.is-active {
  background: rgb(var(--c-neutral-900));
  color: rgb(var(--c-white));
  font-weight: 500;
}
.admin-nav-item.is-active .icon { color: rgb(var(--c-white)); }
.admin-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 待辦數字。**沒有數字時整顆不畫**（不是畫一個 0）—— 一排 0 會讓真正有東西
   的那一項失去對比，而那正是這顆徽章唯一的用途。 */
.admin-nav-badge {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  background: rgb(var(--c-neutral-200));
  color: rgb(var(--c-neutral-700));
}
.admin-nav-item.is-active .admin-nav-badge { background: rgb(var(--c-white) / .22); color: rgb(var(--c-white)); }
.admin-nav-badge.is-alert { background: rgb(var(--solid-danger-bg)); color: rgb(var(--solid-danger-fg)); }
.admin-nav-badge.is-warn { background: rgb(var(--solid-warn-bg)); color: rgb(var(--solid-warn-fg)); }

.admin-sidebar-foot {
  flex: none;
  border-top: 1px solid rgb(var(--c-neutral-200));
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --------------------------------------------------------------- 頂欄 */
.admin-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--admin-topbar-h);
  margin: -20px -24px 16px;
  padding: 0 24px;
  border-bottom: 1px solid rgb(var(--c-neutral-200));
  background: rgb(var(--c-white));
  position: sticky;
  top: 0;
  z-index: 30;
}
@media (max-width: 1023px) { .admin-topbar { margin: -12px -16px 12px; padding: 0 12px; } }

.admin-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgb(var(--c-neutral-500));
  min-width: 0;
}
.admin-crumb b { color: rgb(var(--c-neutral-900)); font-weight: 600; }
.admin-crumb .icon { flex: none; color: rgb(var(--c-neutral-300)); }

/* --------------------------------------------------------------- 頁首 */
.admin-page-head { margin-bottom: 14px; }
.admin-page-head h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: rgb(var(--c-neutral-900));
}
.admin-page-lede {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgb(var(--c-neutral-500));
  max-width: 72ch;
  line-height: 1.6;
}

/* 「這一頁在做什麼」—— 原本那幾段說明整段搬進來，一個字都不改，
   只是不再每次都佔掉畫面最上方四五行。第一次進這一頁時預設展開。 */
.admin-about {
  margin: 10px 0 16px;
  border: 1px solid rgb(var(--c-neutral-200));
  border-radius: 10px;
  background: rgb(var(--c-white));
}
.admin-about > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--c-neutral-600));
  border-radius: 10px;
}
.admin-about > summary::-webkit-details-marker { display: none; }
.admin-about > summary:hover { color: rgb(var(--c-neutral-900)); }
.admin-about > summary .icon { transition: transform .15s ease; color: rgb(var(--c-neutral-400)); }
.admin-about[open] > summary .icon { transform: rotate(90deg); }
.admin-about[open] > summary { border-bottom: 1px solid rgb(var(--c-neutral-200)); border-radius: 10px 10px 0 0; }
.admin-about-body {
  padding: 12px;
  font-size: 13px;
  line-height: 1.75;
  color: rgb(var(--c-neutral-600));
}
.admin-about-body b, .admin-about-body strong { color: rgb(var(--c-neutral-900)); font-weight: 600; }

/* --------------------------------------------------------------- 流程列
   「一件事要跨好幾頁才做得完」的解法：每一頁都說得出自己在流程的哪一段、
   上一步是誰、做完了要去哪。少了它，每一頁都是一座孤島。 */
.admin-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px 10px;
  border: 1px solid rgb(var(--c-neutral-200));
  border-radius: 10px;
  background: rgb(var(--c-white));
  font-size: 12.5px;
}
.admin-flow-lead {
  color: rgb(var(--c-neutral-400));
  font-size: 11.5px;
  margin-right: 4px;
  white-space: nowrap;
}
.admin-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  color: rgb(var(--c-neutral-500));
  text-decoration: none;
  white-space: nowrap;
}
a.admin-flow-step:hover { background: rgb(var(--c-neutral-100)); color: rgb(var(--c-neutral-900)); }
.admin-flow-step.is-here {
  background: rgb(var(--c-neutral-900));
  color: rgb(var(--c-white));
  font-weight: 500;
}
.admin-flow .icon { color: rgb(var(--c-neutral-300)); flex: none; }

/* --------------------------------------------------------------- 按鈕
   一頁只有一顆 .btn-primary。這條規則就是「進了一頁不知道先按哪顆」的解法：
   權重看得出來，畫面才回答得了「主要動作是什麼」。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
@media (pointer: coarse) { .btn { min-height: 44px; padding: 0 16px; } }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn .icon { flex: none; }

.btn-primary { background: rgb(var(--c-neutral-900)); color: rgb(var(--c-white)); }
.btn-primary:hover:not(:disabled) { background: rgb(var(--c-neutral-700)); }

.btn-secondary {
  background: rgb(var(--c-white));
  color: rgb(var(--c-neutral-800));
  border-color: rgb(var(--c-neutral-300));
}
.btn-secondary:hover:not(:disabled) { border-color: rgb(var(--c-neutral-900)); background: rgb(var(--c-neutral-50)); }

.btn-danger { background: rgb(var(--solid-danger-bg)); color: rgb(var(--solid-danger-fg)); }
.btn-danger:hover:not(:disabled) { background: rgb(var(--solid-danger-bg) / .85); }

.btn-ghost { background: transparent; color: rgb(var(--c-neutral-600)); }
.btn-ghost:hover:not(:disabled) { background: rgb(var(--c-neutral-100)); color: rgb(var(--c-neutral-900)); }

/* Tailwind 的 `.hidden` 與 `.btn` 同權重（都是單一 class），誰贏取決於樣式表的
   先後 —— 而 CDN 那份是執行期插進來的，順序不是我們能保證的東西。
   後台好幾顆按鈕是靠 `classList.toggle('hidden')` 收起來的（分類工作站的
   「儲存至系統資料庫」、營養素健檢的「一鍵退回全部」），賭輸的那一邊
   會讓那顆鍵在不該出現的時候露出來。所以這裡釘死。 */
.btn.hidden { display: none; }

.btn-sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
@media (pointer: coarse) { .btn-sm { min-height: 36px; } }

.btn-icon { padding: 0; width: 38px; }
@media (pointer: coarse) { .btn-icon { width: 44px; } }

/* --------------------------------------------------------------- 表單元件
   `<input>` / `<select>` / `<textarea>` 沒有明確指定顏色時，瀏覽器會畫自己那一套
   （白底黑字），而深色模式下那是一塊突然亮起來的白 —— 而且它只在深色下壞，
   淺色模式驗不出來。這一條用**元素選擇器**（優先權最低），所以任何一頁自己
   寫的 Tailwind class 照樣蓋得過它。 */
.admin-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background-color: rgb(var(--c-white));
  color: rgb(var(--c-neutral-900));
  border-color: rgb(var(--c-neutral-300));
}
.admin-body :where(input, select, textarea)::placeholder { color: rgb(var(--c-neutral-400)); }
/* 核取方塊與選項鈕排除在外：蓋掉它們的底色會讓那個勾／點整個不見。 */

/* 圖示不吃點擊。
   按鈕裡放了 SVG 之後，點在圖示上時 `event.target` 是那個 <svg> 而不是按鈕 ——
   而後台好幾頁是用事件委派讀 `event.target.dataset.action` 的，於是「按鈕只有
   點邊緣才有反應」。這一條把根因擋在一個地方，比每一頁各自改成 `closest()` 省事，
   而且新加的頁面自動就是對的。 */
.icon { pointer-events: none; }

/* 鍵盤焦點一定要看得見（ui skill 第 1 級）—— 不可以拿掉 */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--c-blue-500));
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------- 狀態徽章
   三態語意（ok / degraded / down）在健康檢查那一頁是契約，不要改語意。 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-ok       { background: rgb(var(--c-emerald-50)); color: rgb(var(--c-emerald-800)); border-color: rgb(var(--c-emerald-200)); }
.badge-degraded { background: rgb(var(--c-amber-50));   color: rgb(var(--c-amber-900));   border-color: rgb(var(--c-amber-200)); }
.badge-down     { background: rgb(var(--c-rose-50));    color: rgb(var(--c-rose-800));    border-color: rgb(var(--c-rose-300)); }
.badge-muted    { background: rgb(var(--c-neutral-100)); color: rgb(var(--c-neutral-600)); border-color: rgb(var(--c-neutral-200)); }
.badge-info     { background: rgb(var(--c-blue-50));    color: rgb(var(--c-blue-800));    border-color: rgb(var(--c-blue-200)); }

/* --------------------------------------------------------------- 卡片 / 表格 */
.admin-card {
  background: rgb(var(--c-white));
  border: 1px solid rgb(var(--c-neutral-200));
  border-radius: 12px;
  padding: 12px;
}
.admin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.admin-card-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.admin-card-head p { margin: 2px 0 0; font-size: 12.5px; color: rgb(var(--c-neutral-500)); }

/* 數字一律等寬，否則一欄金額對不齊，掃過去讀不出大小 */
.tnum, .admin-stat-value { font-variant-numeric: tabular-nums; }

.admin-stat {
  display: block;
  background: rgb(var(--c-white));
  border: 1px solid rgb(var(--c-neutral-200));
  border-radius: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
a.admin-stat:hover { border-color: rgb(var(--c-neutral-400)); background: rgb(var(--c-neutral-50)); }
.admin-stat-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--c-neutral-500)); }
.admin-stat-label .icon { color: rgb(var(--c-neutral-400)); }
.admin-stat-value { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; margin-top: 6px; line-height: 1.1; }
/* 這一格有時候放的不是數字而是一句話（「需要密碼」「讀不到」）——
   那時候 28px 的數字字級讀起來像在喊。字小一階、顏色降一階，
   它就退回它真正的角色：一句說明為什麼沒有數字的話。 */
.admin-stat-value.is-note { font-size: 17px; letter-spacing: 0; color: rgb(var(--c-neutral-500)); }
.admin-stat-foot { margin-top: 4px; font-size: 12px; color: rgb(var(--c-neutral-500)); display: flex; align-items: center; gap: 4px; }

/* 表格：列高 36、標題列黏住。橫向捲動限制在自己的容器裡，頁面本身不橫捲。 */
.admin-table-wrap { overflow-x: auto; border: 1px solid rgb(var(--c-neutral-200)); border-radius: 12px; background: rgb(var(--c-white)); }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* `:where()` 把權重歸零，所以欄位自己掛 `text-right`（數字欄）蓋得過它。
   寫成 `.admin-table th` 的話權重是 (0,1,1)，贏過 `.text-right` 的 (0,1,0) ——
   症狀是「金額欄的表頭靠左、數字靠右」，而每一頁都要用 `!` 去繞。 */
:where(.admin-table) th {
  position: sticky; top: 0; z-index: 1;
  background: rgb(var(--c-neutral-50));
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgb(var(--c-neutral-500));
  padding: 8px 12px;
  border-bottom: 1px solid rgb(var(--c-neutral-200));
  white-space: nowrap;
}
:where(.admin-table) td { padding: 0 12px; height: var(--admin-row-h); border-bottom: 1px solid rgb(var(--c-neutral-100)); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: rgb(var(--c-neutral-50)); }

/* --------------------------------------------------------------- 空狀態
   ui skill：空狀態要說一句話並給一個動作，不可以是一片空白。 */
.admin-empty {
  text-align: center;
  padding: 32px 16px;
  color: rgb(var(--c-neutral-500));
  font-size: 13.5px;
}
.admin-empty .icon { color: rgb(var(--c-neutral-300)); margin-bottom: 8px; }
.admin-empty-title { color: rgb(var(--c-neutral-700)); font-weight: 500; margin-bottom: 4px; }

/* --------------------------------------------------------------- 跨頁跳轉
   「這一筆」選單：一筆品項在哪一頁被看到都能跳去別頁處理它。 */
.admin-jump { position: relative; display: inline-block; }
.admin-jump-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  padding: 4px;
  background: rgb(var(--c-white));
  border: 1px solid rgb(var(--c-neutral-200));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(2 6 23 / .12);
  z-index: 50;
}
html.dark .admin-jump-menu { box-shadow: 0 8px 24px rgb(0 0 0 / .5); }
.admin-jump-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 13px;
  color: rgb(var(--c-neutral-700));
  text-decoration: none;
}
.admin-jump-menu a:hover { background: rgb(var(--c-neutral-100)); color: rgb(var(--c-neutral-900)); }
.admin-jump-menu .icon { color: rgb(var(--c-neutral-400)); flex: none; }

/* 被 ?focus= 帶過來的那一筆：捲過去並亮一下。
   亮完不留任何痕跡 —— 留著的話，使用者下一次進這一頁會以為那一列有什麼特別。 */
@keyframes adminFocusFlash {
  0%   { background-color: rgb(var(--c-amber-100)); }
  100% { background-color: transparent; }
}
.admin-focused {
  animation: adminFocusFlash 2.4s ease-out 1;
  scroll-margin-top: calc(var(--admin-topbar-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .admin-focused { outline: 2px solid rgb(var(--c-amber-500)); outline-offset: 2px; animation: none; }
}

/* --------------------------------------------------------------- 列印
   商家洞察那一頁要印成 PDF 拿去談合作，側邊欄與頂欄不能出現在紙上。 */
@media print {
  .admin-sidebar, .admin-topbar, .admin-flow, .admin-about, .no-print { display: none !important; }
  .admin-main { margin: 0; padding: 0; max-width: none; }
  body.admin-body { background: #fff; }
}