/* ============================================================
   中央獸醫臨床知識庫 — 後台樣式（設計 token + 元件）
   來源：docs/kb/prototype.html 的樣式，原型是動線與外觀的真相。
   ⚠ 全站字級下限 14px。禁用裸元素選擇器（* 與 body 的基礎重設除外）。
   ============================================================ */
/* ============================================================
   中央獸醫臨床知識庫 後台原型
   ⚠ 這是**獨立系統**的原型，與診所 ERP 不同專案、不同資料庫。
   ⚠ 畫面上所有臨床內容都是**測試資料**，不是正式臨床資料。
   沿用診所 ERP 的 token 系統，但主色改冷藍以區分兩套系統。
   全站字級下限 14px。零依賴，原生 JS。
   ============================================================ */
:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#EDF1F6; --surface-3:#E2E8F0;
  --ink:#152030; --ink-2:#3A4757; --muted:#647287;
  --line:#DCE3EC; --line-2:#C2CDDB;
  --accent:#1E5A96; --accent-ink:#12406C; --accent-soft:#DDE8F4; --accent-fg:#FFFFFF;
  --warn:#9A5B12; --warn-soft:#F8EEDF;
  --stop:#8E2F3A; --stop-soft:#F7E3E5;
  --ok:#256B4E; --ok-soft:#DEEDE6;
  --mark:#FBE8A6; --mark-ink:#4A3B08; --mark-line:#C9A227;
  --shadow:0 1px 2px rgba(21,32,48,.05),0 10px 30px -18px rgba(21,32,48,.35);
  --shadow-lg:0 24px 60px -20px rgba(21,32,48,.35),0 2px 8px rgba(21,32,48,.08);
  --sans:"PingFang TC","Hiragino Sans TC","Microsoft JhengHei","Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E141C; --surface:#161E29; --surface-2:#1D2734; --surface-3:#26323F;
    --ink:#E7EDF4; --ink-2:#C0CBD8; --muted:#8899AC;
    --line:#28323F; --line-2:#3A4757;
    --accent:#5FA0D8; --accent-ink:#96C4EA; --accent-soft:#1A2C3E; --accent-fg:#0B1520;
    --warn:#D9A05E; --warn-soft:#2E2519;
    --stop:#E08894; --stop-soft:#332023;
    --ok:#79C0A0; --ok-soft:#1A2A23;
    --mark:#4E4114; --mark-ink:#F6E3A4; --mark-line:#A98B2E;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -20px rgba(0,0,0,.85);
    --shadow-lg:0 28px 70px -24px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0E141C; --surface:#161E29; --surface-2:#1D2734; --surface-3:#26323F;
  --ink:#E7EDF4; --ink-2:#C0CBD8; --muted:#8899AC;
  --line:#28323F; --line-2:#3A4757;
  --accent:#5FA0D8; --accent-ink:#96C4EA; --accent-soft:#1A2C3E; --accent-fg:#0B1520;
  --warn:#D9A05E; --warn-soft:#2E2519;
  --stop:#E08894; --stop-soft:#332023;
  --ok:#79C0A0; --ok-soft:#1A2A23;
  --mark:#4E4114; --mark-ink:#F6E3A4; --mark-line:#A98B2E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -20px rgba(0,0,0,.85);
  --shadow-lg:0 28px 70px -24px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}

/* 測試資料橫幅 */


/* ── 應用外殼（登入、側欄收折、頂列）────────────────────────
   ⚠ 原型的 .side 是 sticky top:34px（讓開測試資料橫幅）。
     正式站沒有橫幅，改為 top:0。 */
.hidden{display:none !important}

#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);padding:16px}
.login-box{width:380px;max-width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:36px 32px;box-shadow:var(--shadow-lg)}
.login-title{font-size:20px;font-weight:700;letter-spacing:-.01em}
.login-sub{font-size:14px;color:var(--muted);margin:2px 0 24px}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-size:14px;color:var(--ink-2);margin-bottom:5px}
.login-field input{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:15px}
.login-field input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.login-err{font-size:14px;color:var(--stop);background:var(--stop-soft);border-radius:8px;
  padding:8px 10px;margin-bottom:12px}

/* ── 網路層驗證畫面 ────────────────────────────────────────
   ⚠ 沿用 .login-box，不另開一套容器：兩個畫面前後相接出現，
     框線位置或圓角不一樣會看起來像跳到了別的系統。 */
#verify-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);padding:16px}
.vfy-icon{font-size:26px;line-height:1;margin-bottom:8px}
.vfy-note{font-size:14px;color:var(--ink-2);line-height:1.8;margin:0 0 18px}
.vfy-calm{color:var(--muted)}
.vfy-wide{width:100%;justify-content:center}
/* ⚠ 字距會把最後一位數往右推，補一個同寬的 text-indent 拉回視覺中心 */
.vfy-code{width:100%;padding:12px 10px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:26px;
  text-align:center;letter-spacing:10px;text-indent:10px}
.vfy-code:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.vfy-code::placeholder{color:var(--line-2);letter-spacing:6px}
.vfy-meta{display:flex;align-items:center;gap:10px;margin:10px 0 16px;font-size:14px}
#vfy-left{flex:1;color:var(--muted)}
.vfy-link{background:none;border:0;padding:0;font:inherit;font-size:14px;
  color:var(--accent);cursor:pointer;text-decoration:underline}
.vfy-link[disabled]{color:var(--muted);cursor:default;text-decoration:none}
.vfy-back{display:block;margin:20px auto 0;color:var(--muted)}

.topbar{display:flex;align-items:center;gap:10px;padding:10px 0 16px;border-bottom:1px solid var(--line);
  margin-bottom:18px}
.topbar .who{margin-left:auto;font-size:14px;color:var(--muted)}

.side{top:0;min-height:100vh}

/* ── RWD ───────────────────────────────────────────────────
   ⚠ 收折策略沿用原型：≤900px 時側欄變成頂部橫向導覽（見 kb.css）。
   後台不做手機優先設計，這個斷點是給 iPad 直立用的。 */
@media (max-width:900px){
  .topbar{padding-top:4px}
}