/*
 * 深色模式的配色層（管理台 16 頁 + 對外對話頁共用）。
 *
 * ⚠ 路徑刻意不在 /admin/ 底下：對外對話頁也要用它，而 /admin/** 整個需要登入。
 *
 * ── 為什麼是「對映層」而不是逐個加 dark: ────────────────────────────────
 * 管理台有 16 個手寫頁面，色彩 class 出現超過 1000 次，而且有相當一部分的 HTML
 * 是在 JS 裡用字串拼出來的（common.js 的導覽與確認框、settings.html 的整份表單）。
 * 逐個加 `dark:` 等於一千次編輯，而且下一個新頁面、下一段拼字串的 HTML 只要漏了
 * 就是一塊白色補丁——沒有 build step，不會有任何東西提醒你。
 *
 * 所以這裡改成：把管理台<b>實際用到的</b>那幾十個色票，在 .dark 之下重新定義一次。
 * 既有頁面一行都不用改，JS 拼出來的 HTML 也自動跟上。
 *
 * ⚠ 這不是要取代 `dark:`。tailwind.config 的 darkMode 已經設成 'class'
 *  （見 theme.js），所以要針對某個元素微調時，照樣寫 `dark:bg-slate-700` 就好，
 *   而且它會贏：Tailwind 產生的 `.dark .dark\:bg-*` 與這裡的 `.dark .bg-*`
 *   權重相同（0,2,0），CDN 的樣式是後注入的，同權重後者勝。
 *
 * ⚠ 權重是這份檔案能不能生效的關鍵。Tailwind Play CDN 把樣式注入在 <head> 最後，
 *   會排在這個 <link> 後面；靠 .dark 前綴讓每條規則變成兩個 class（0,2,0），
 *   才穩定贏過 Tailwind 的單一 class（0,1,0）。不要把 .dark 拿掉改用 :root。
 *
 * ── 沒有被改掉的東西 ──────────────────────────────────────────────
 * 實心的強調色（bg-sky-500、bg-red-600、bg-green-500…）與 text-white 維持原樣：
 * 它們本來就是配白字的飽和色，在深色底上一樣清楚，改了反而失去「這是主要動作」的訊號。
 */

/* ------------------------------------------------------------------ 調色盤 */

:root {
  color-scheme: light;
}

.dark {
  color-scheme: dark;

  --cs-bg: #0f172a;         /* 頁面底色（原 bg-slate-100） */
  --cs-surface: #1e293b;    /* 卡片（原 bg-white） */
  --cs-surface-2: #243044;  /* 卡片內的淡底、表頭、hover（原 bg-slate-50） */
  --cs-surface-3: #2c3a52;  /* 更強一階的底（原 bg-slate-200） */

  --cs-line: #2c3a50;       /* 一般分隔線（原 border-slate-200） */
  --cs-line-strong: #3b4a63;/* 輸入框、按鈕外框（原 border-slate-300） */

  --cs-t1: #e8eef7;         /* 標題（原 text-slate-800） */
  --cs-t2: #cbd5e1;         /* 內文（原 text-slate-700） */
  --cs-t3: #94a3b8;         /* 次要說明（原 text-slate-500） */
  --cs-t4: #7f8b9d;         /* 最淡的一階（原 text-slate-400） */
}

/* --------------------------------------------------------------- 底色（slate） */

.dark .bg-white { background-color: var(--cs-surface); }
.dark .bg-slate-50 { background-color: var(--cs-surface-2); }
.dark .bg-slate-100 { background-color: var(--cs-bg); }
.dark .bg-slate-200 { background-color: var(--cs-surface-3); }
.dark .bg-slate-300 { background-color: #47566e; }
.dark .bg-slate-400 { background-color: #5c6b83; }
.dark .bg-slate-600 { background-color: #4b5b74; }
.dark .bg-slate-700 { background-color: #3f4f68; }
.dark .bg-slate-800 { background-color: #334155; }
/* 側邊欄。深色模式下它要比頁面「更深」，否則整片糊成一塊、失去區隔。 */
.dark .bg-slate-900 { background-color: #070c17; }

/* 半透明的那兩個（settings.html 用來標「危險」與「目前不生效」）。
   原本是極淡的色底，深色下要反過來變成極淡的亮色，不然整列看起來是黑的。 */
.dark .bg-slate-50\/60 { background-color: rgba(148, 163, 184, 0.07); }
.dark .bg-red-50\/40 { background-color: rgba(239, 68, 68, 0.09); }

/* 確認對話框的遮罩與外框（common.js 的 confirmAction）。
   ⚠ 遮罩在深色下要「更暗」而不是「更亮」：它的工作是把後面的頁面壓下去，
   而 slate-900/50 疊在本來就是 #0f172a 的頁面上幾乎看不出差別，
   於是對話框像是浮在一片沒有變化的畫面上，看不出後面已經不能點了。 */
.dark .bg-slate-900\/50 { background-color: rgba(0, 0, 0, 0.65); }
/* 淺色下是一圈幾乎看不見的深色描邊；深色下要反過來用亮色，否則等於沒有邊。 */
.dark .ring-slate-900\/5 { --tw-ring-color: rgba(148, 163, 184, 0.18); }

/* 對外對話頁的來源標籤。 */
.dark .bg-slate-200\/70 { background-color: rgba(148, 163, 184, 0.18); }

.dark .hover\:bg-slate-50:hover { background-color: var(--cs-surface-3); }
.dark .hover\:bg-slate-100:hover { background-color: var(--cs-surface-3); }
.dark .hover\:bg-slate-600:hover { background-color: #566782; }
.dark .hover\:bg-slate-700:hover { background-color: #4b5b74; }
.dark .hover\:bg-slate-800:hover { background-color: #3f4f68; }
.dark .disabled\:bg-slate-50:disabled { background-color: #16202f; }
.dark .disabled\:bg-slate-100:disabled { background-color: #16202f; }

/* 檔案上傳的那顆原生按鈕（upload.html）。 */
.dark .file\:bg-slate-800::file-selector-button { background-color: #334155; }
.dark .hover\:file\:bg-slate-700:hover::file-selector-button { background-color: #4b5b74; }

/* --------------------------------------------------------------- 文字（slate） */

.dark .text-slate-900 { color: #f8fafc; }
.dark .text-slate-800 { color: var(--cs-t1); }
.dark .text-slate-700 { color: var(--cs-t2); }
.dark .text-slate-600 { color: #aebbcb; }
.dark .text-slate-500 { color: var(--cs-t3); }
.dark .text-slate-400 { color: var(--cs-t4); }
/* ⚠ text-slate-300 刻意不動。它同時用在側邊欄的導覽項目（深底上的亮字，必須維持亮）
   與 settings.html 的極淡提示（淺底上的淡字，應該要更暗）。這兩者要的方向相反，
   而往深色調的那一邊會讓導覽整個讀不出來——那是功能問題，
   比提示稍微亮一點嚴重得多。 */

.dark .hover\:text-slate-900:hover { color: #f8fafc; }
.dark .hover\:text-slate-800:hover { color: var(--cs-t1); }
.dark .hover\:text-slate-700:hover { color: #e2e8f0; }
.dark .hover\:text-slate-600:hover { color: var(--cs-t2); }
.dark .disabled\:text-slate-500:disabled { color: #64748b; }

/* --------------------------------------------------------------- 框線（slate） */

.dark .border-slate-50 { border-color: #232f42; }
.dark .border-slate-100 { border-color: #263248; }
.dark .border-slate-200 { border-color: var(--cs-line); }
.dark .border-slate-300 { border-color: var(--cs-line-strong); }
.dark .border-slate-400 { border-color: #4c5c76; }
.dark .border-slate-800 { border-color: #1a2333; }
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #263248; }
.dark .decoration-slate-300 { text-decoration-color: #4c5c76; }

.dark .focus\:border-slate-400:focus { border-color: #64748b; }
.dark .ring-slate-400 { --tw-ring-color: #64748b; }
.dark .ring-slate-500 { --tw-ring-color: #7c8ba1; }
.dark .focus\:ring-slate-300:focus { --tw-ring-color: #55657d; }
.dark .focus\:ring-slate-400:focus { --tw-ring-color: #64748b; }
.dark .focus\:ring-slate-500:focus { --tw-ring-color: #7c8ba1; }
.dark .accent-slate-700 { accent-color: #94a3b8; }

/* --------------------------------------------------- 提示框與標籤（有顏色的那些）
 *
 * 淺色模式的做法是「極淡的色底 + 深色的同色系文字」。深色模式要整個反過來：
 * 半透明的色底 + 亮色的同色系文字。用 rgba 而不是實色，是因為同一個 bg-*-50
 * 會疊在卡片（#1e293b）與頁面（#0f172a）兩種底上，實色會在其中一種上看起來髒。
 */

/* 紅：錯誤、危險、刪除 */
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.13); }
.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.2); }
.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.2); }
.dark .border-red-200 { border-color: rgba(248, 113, 113, 0.32); }
.dark .border-red-300 { border-color: rgba(248, 113, 113, 0.45); }
.dark .text-red-500 { color: #f87171; }
.dark .text-red-600 { color: #f87171; }
.dark .text-red-700 { color: #fca5a5; }
.dark .text-red-800 { color: #fecaca; }
.dark .hover\:text-red-600:hover { color: #fca5a5; }
.dark .hover\:text-red-700:hover { color: #fca5a5; }
.dark .hover\:text-red-800:hover { color: #fecaca; }

/* 琥珀：警告、需要注意 */
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.13); }
.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2); }
.dark .border-amber-200 { border-color: rgba(251, 191, 36, 0.32); }
.dark .border-amber-300 { border-color: rgba(251, 191, 36, 0.45); }
.dark .ring-amber-300 { --tw-ring-color: rgba(251, 191, 36, 0.55); }
.dark .text-amber-600 { color: #fbbf24; }
.dark .text-amber-700 { color: #fcd34d; }
.dark .text-amber-800 { color: #fcd34d; }
.dark .text-amber-900 { color: #fde68a; }
.dark .hover\:text-amber-800:hover { color: #fde68a; }

/* 綠：成功、健康 */
.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.13); }
.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.2); }
.dark .border-green-200 { border-color: rgba(74, 222, 128, 0.32); }
.dark .text-green-600 { color: #4ade80; }
.dark .text-green-700 { color: #86efac; }
.dark .text-green-800 { color: #bbf7d0; }
.dark .hover\:text-green-800:hover { color: #bbf7d0; }

/* 天藍：資訊、待辦 */
.dark .bg-sky-50 { background-color: rgba(14, 165, 233, 0.13); }
.dark .bg-sky-100 { background-color: rgba(14, 165, 233, 0.2); }
.dark .border-sky-200 { border-color: rgba(56, 189, 248, 0.32); }
.dark .border-sky-300 { border-color: rgba(56, 189, 248, 0.45); }
.dark .text-sky-700 { color: #7dd3fc; }
.dark .text-sky-800 { color: #7dd3fc; }
.dark .text-sky-900 { color: #bae6fd; }

/* 橘、靛、藍：來源標籤那幾個 */
.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.2); }
.dark .border-orange-200 { border-color: rgba(251, 146, 60, 0.32); }
/* 600 是「大數字」用的（儀表板上「N 項需要處理」），要比 700 亮一階才看得清楚。 */
.dark .text-orange-600 { color: #fb923c; }
.dark .text-orange-700 { color: #fdba74; }
.dark .text-orange-800 { color: #fed7aa; }
.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.22); }
.dark .text-indigo-800 { color: #c7d2fe; }
.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.22); }
.dark .text-blue-700 { color: #93c5fd; }

/* --------------------------------------------------------------- 表單控制項
 *
 * 輸入框大多只寫了 border-*，底色靠瀏覽器預設（白）。color-scheme: dark 會讓
 * 原生控制項變深，但 Tailwind 的 preflight 把 input 的背景設成透明，
 * 於是它們會透出卡片色而看不出「這裡可以打字」。明確給一個比卡片深一階的底。
 *
 * 權重是 (0,1,1)，所以元素上如果自己寫了 bg-* class，仍然由上面的對映決定。
 */

.dark input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
.dark textarea,
.dark select {
  background-color: #16202f;
  color: var(--cs-t1);
}

.dark ::placeholder { color: #64748b; }

/* --------------------------------------------------------------- 架構說明頁
 *
 * SVG 的 fill/stroke 是 presentation attribute（權重 0），CSS 隨時蓋得過。
 * 模組方塊本來就是飽和色配白字，深色下不用動；只有那圈虛線的區塊框
 * 用了 slate-500 級的灰，在深色底上幾乎看不見。
 */

.dark .zone-label { fill: #9fb0c6; }
.dark .zone-line { stroke-opacity: 0.7; }