/* ==========================================================================
   hermes.css — lớp vỏ dùng chung cho mọi trang của Hermes web UI.

   **Vì sao file này tồn tại.** Trước 2026-09-05 mỗi template mang một khối
   <style> riêng: 18 file, 87.000 ký tự CSS, và 13 file trong số đó chép NGUYÊN
   VĂN cùng một bảng màu. Design system đã có sẵn — nó chỉ đang nằm rải rác 13
   bản sao, nên đổi một màu là phải sửa 13 chỗ và chắc chắn sót. Đã sót thật:
   tools/palmtech_ticket_triage.py tự chế bảng màu tối THỨ BA (#1b1b1b), nên
   /palmtech-triage ở dark mode trông khác hẳn 13 trang kia.

   File này là một bản duy nhất, nằm trong /static nên trình duyệt cache được —
   khác hẳn CSS inline, thứ phải tải lại mỗi lần mở trang.

   **Quy tắc khi sửa.** Cái gì hai trang trở lên dùng thì để đây. Cái gì chỉ một
   trang dùng thì để trong {% block head %} của trang đó.
   ========================================================================== */

/* ── tokens ────────────────────────────────────────────────────────────────
   Ba lớp, thứ tự có chủ đích:
     1. :root        — sáng, mặc định, LUÔN khai báo đủ mọi biến.
     2. @media dark  — theo hệ điều hành, nhưng nhường cho lựa chọn tay.
     3. [data-theme] — người dùng bấm nút, thắng cả hai ở trên.
   Biến nào cũng phải có mặt ở lớp 1. Một biến chỉ định nghĩa bên trong @media
   là một biến biến mất khi người ta bật đèn. */
  /* Chu nam TREN nen --accent. O che do sang, accent la #2563eb dam nen chu
     trang dat 5.2:1; o che do toi accent la #60a5fa nhat, va chu trang chi con
     2.54:1 — duoi nguong AA cho ca chu to. Nen o che do toi chu tren accent
     phai la mau nen, khong phai mau trang. Mot token rieng, vi #fff o cho khac
     (chu tren --hot, tren --ok) van dung. */
:root {
  --bg:#f6f8fb; --fg:#16202c; --card:#fff; --line:#dbe3ec; --muted:#5b6b7d;
  --accent:#2563eb; --accentbg:#e7efff;
  --warn:#9a6700;  --warnbg:#fff8e6;
  --ok:#1a7f37;    --okbg:#e8f6ec;
  --hot:#b42318;   --hotbg:#fdeceb;
  --grey:#6b7785;  --greybg:#eef1f5;
  --on-accent:#fff;
  --shadow:0 1px 2px rgba(16,32,48,.06);
  color-scheme: light;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    --bg:#0f151c; --fg:#e6edf5; --card:#161e28; --line:#2a3644; --muted:#93a3b5;
    --accent:#60a5fa; --accentbg:#14243c;
    --warn:#e3b341;  --warnbg:#2a2413;
    --ok:#4ac26b;    --okbg:#12261a;
    --hot:#ff7b72;   --hotbg:#2b1614;
    --grey:#8b97a5;  --greybg:#1b232e;
    --on-accent:#0b1119;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
  --bg:#0f151c; --fg:#e6edf5; --card:#161e28; --line:#2a3644; --muted:#93a3b5;
  --accent:#60a5fa; --accentbg:#14243c;
  --warn:#e3b341;  --warnbg:#2a2413;
  --ok:#4ac26b;    --okbg:#12261a;
  --hot:#ff7b72;   --hotbg:#2b1614;
  --grey:#8b97a5;  --greybg:#1b232e;
  --on-accent:#0b1119;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* ── nền ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
.wrap{max-width:1100px;margin:0 auto;padding:24px 16px 64px}
h1{font-size:24px;margin:0 0 4px} h2{font-size:17px;margin:26px 0 8px}
h2 .n{color:var(--muted);font-weight:400}
.sub{color:var(--muted);font-size:14px;margin-bottom:18px}
a{color:var(--accent)}
code{font:13px ui-monospace,SFMono-Regular,Consolas,monospace}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px;margin-bottom:16px}
.hint,.alarm,.okmsg{border-radius:8px;padding:10px 12px;font-size:13px;
  margin-bottom:14px;border:1px solid}
.hint {background:var(--warnbg);border-color:var(--warn)}
.alarm{background:var(--hotbg); border-color:var(--hot)}
.okmsg{background:var(--okbg);  border-color:var(--ok)}
button,.btn{font:inherit;font-size:13px;padding:4px 10px;border:1px solid var(--line);
  border-radius:7px;background:var(--bg);color:var(--fg);cursor:pointer;
  text-decoration:none;white-space:nowrap;display:inline-block}
button:hover,.btn:hover{border-color:var(--accent)}
.btn.on{border-color:var(--accent);color:var(--accent);background:var(--accentbg)}

/* Bảng rộng phải tự cuộn trong khung của nó. Không có lớp này thì trên điện
   thoại cả TRANG cuộn ngang, và thanh nav trôi mất khỏi màn hình. */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Ô focus phải nhìn thấy được: bàn phím là cách duy nhất dùng được Ctrl+K. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── dải freshness ────────────────────────────────────────────────────────
   Lấy từ /reboot-queue, nơi nó được nghĩ ra: dữ liệu cũ bao lâu, lấy từ đâu.
   Xem macro fresh_bar() trong templates/_macros.html. */
.fresh{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-size:13px;color:var(--muted);margin-bottom:16px}
.fresh .grow{flex:1 1 240px}
.fresh form{margin:0}
.fresh .stale{color:var(--warn);font-weight:600}
.fresh .unknown{color:var(--hot);font-weight:600}

/* ── chip trạng thái ──────────────────────────────────────────────────────
   Màu KHÔNG BAO GIỜ là tín hiệu duy nhất — mỗi chip mang chữ. Khoảng 8% nam
   giới mù màu đỏ-lục, và bảng của repo này phân loại bằng đỏ/vàng/xanh. */
.chip{display:inline-block;font-size:13px;border:1px solid var(--line);
  border-radius:20px;padding:1px 10px;white-space:nowrap}
.chip.ok  {border-color:var(--ok);  color:var(--ok);  background:var(--okbg)}
.chip.warn{border-color:var(--warn);color:var(--warn);background:var(--warnbg)}
.chip.hot {border-color:var(--hot); color:var(--hot); background:var(--hotbg)}
.chip.grey{border-color:var(--grey);color:var(--grey);background:var(--greybg)}

/* ── thanh nav ────────────────────────────────────────────────────────────
   Trước khi có nó, 5 trong 10 trang KHÔNG có đường vào nào từ trang chủ —
   /reboot-queue, /patch-queue, /palmtech-handover, /palmtech-triage,
   /palmtech-activity chỉ vào được bằng cách gõ tay URL. */
.hnav{position:sticky;top:0;z-index:40;background:var(--card);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.hnav-in{max-width:1100px;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;gap:6px;min-height:46px}
/* Tên sản phẩm + tên đội xếp chồng, cao bằng đúng một dòng nav: thanh này đã
   có 9 mục, "MSP VN · Hermes" nằm ngang sẽ đẩy chúng ra khỏi màn hình. */
.hnav a.brand{text-decoration:none;color:var(--fg);margin-right:6px;
  white-space:nowrap;display:flex;flex-direction:column;line-height:1.05;flex:none}
.hnav a.brand .bname{font-weight:700;font-size:15px}
.hnav a.brand .bteam{font-size:9px;font-weight:600;color:var(--muted);
  letter-spacing:.09em;text-transform:uppercase}
.hnav-links{display:flex;gap:2px;overflow-x:auto;flex:1;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hnav-links::-webkit-scrollbar{display:none}
.hnav-links a{font-size:13px;padding:5px 9px;border-radius:7px;
  text-decoration:none;color:var(--muted);white-space:nowrap}
.hnav-links a:hover{background:var(--bg);color:var(--fg)}
.hnav-links a[aria-current=page]{color:var(--accent);background:var(--accentbg);
  font-weight:600}
.hnav-tools{display:flex;gap:6px;align-items:center;margin-left:auto;
  padding-left:6px}
.hnav-tools button{font-size:12px;padding:3px 8px}
.hnav-tools kbd{font:11px ui-monospace,Consolas,monospace;border:1px solid var(--line);
  border-radius:4px;padding:0 4px;color:var(--muted)}
@media (max-width:620px){ .hnav-tools .k-hint{display:none} }

/* ── bộ chuyển dự án ──────────────────────────────────────────────────────
   Đứng cạnh tên sản phẩm chứ không nằm cuối thanh: nó quyết định phần còn lại
   của thanh nav có những gì, nên nó phải được đọc TRƯỚC. Tenant đang chọn được
   tô bằng chính màu của nó trong tenants.json, và mang cả chấm màu lẫn chữ —
   màu không bao giờ là tín hiệu duy nhất. */
.hnav-tenant{display:flex;align-items:center;gap:2px;border:1px solid var(--line);
  border-radius:8px;padding:2px;background:var(--bg);flex:none}
/* Chữ "Project" là thứ biến cụm này từ hai cái nhãn thành một lựa chọn. */
.hnav-tenant .tlab{font-size:9px;font-weight:600;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;padding:0 6px 0 5px}
.hnav-tenant a{display:flex;align-items:center;gap:5px;font-size:12px;
  padding:3px 8px;border-radius:6px;text-decoration:none;color:var(--muted);
  white-space:nowrap}
.hnav-tenant a:hover{color:var(--fg);background:var(--card)}
.hnav-tenant a.on{background:var(--card);color:var(--fg);font-weight:600;
  box-shadow:var(--shadow)}
/* Chấm của tenant KHÔNG được chọn là vòng rỗng, không phải màu của nó: hai
   chấm màu cạnh nhau là lý do người ta không biết mình đang đọc dự án nào. */
.hnav-tenant .dot{width:7px;height:7px;border-radius:50%;flex:none;
  background:transparent;border:1.5px solid var(--line);box-sizing:border-box}
.hnav-tenant a.on .dot{border-width:0}
/* Trên điện thoại chỉ còn chấm: hai chữ "Techlocity"/"PalmTech" chiếm mất chỗ
   của chính danh sách trang mà chúng lọc. Nhãn "Project" đi trước tiên — nó
   giải thích, và giải thích là thứ hy sinh được khi hết chỗ. */
@media (max-width:560px){ .hnav-tenant .tlab{display:none}
  .hnav-tenant a{font-size:0;padding:5px 6px}
  .hnav-tenant a.on{font-size:0} .hnav-tenant .dot{width:9px;height:9px} }

/* ── cổng chọn dự án ──────────────────────────────────────────────────── */
.tpick{max-width:560px;margin:12vh auto;padding:0 16px}
.tpick .opts{display:grid;gap:12px;margin-top:20px}
.tpick a.opt{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);
  text-decoration:none;color:var(--fg)}
.tpick a.opt:hover{border-color:var(--accent);background:var(--accentbg)}
.tpick a.opt .dot{width:12px;height:12px;border-radius:50%;flex:none}
.tpick a.opt b{font-size:16px}
.tpick a.opt small{display:block;color:var(--muted);font-size:13px;font-weight:400}

/* ── command palette (Ctrl+K) ─────────────────────────────────────────────
   Dùng <dialog> để trình duyệt lo phần focus trap và phím Esc — tự làm hai thứ
   đó bằng JS là tự chuốc lỗi accessibility. */
dialog.hpal{border:1px solid var(--line);border-radius:12px;padding:0;
  background:var(--card);color:var(--fg);width:min(560px,92vw);
  box-shadow:0 12px 40px rgba(0,0,0,.28);margin-top:12vh}
dialog.hpal::backdrop{background:rgba(8,14,20,.45)}
.hpal input{width:100%;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--fg);font:16px/1.5 inherit;
  padding:14px 16px;outline:none;border-radius:12px 12px 0 0}
.hpal ul{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto}
.hpal li a{display:flex;justify-content:space-between;gap:12px;
  padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--fg);
  font-size:14px}
.hpal li a small{color:var(--muted);font-size:12px;text-align:right}
.hpal li[aria-selected=true] a{background:var(--accentbg);color:var(--accent)}
.hpal .empty{padding:14px 16px;color:var(--muted);font-size:13px}

/* ── chuyển trang ─────────────────────────────────────────────────────────
   Multi-page view transitions: một dòng, không thêm JS, không thành SPA. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none !important}
}

@media print{ .hnav,.hpal{display:none !important} }

/* ── thẻ thao tác (how-to) và khối checklist đã duyệt ──────────────────────
   Dùng ở /checklists và /checklists/how-to (templates/_howto.html). */
.howto{background:var(--card);border:1px solid var(--line);border-radius:8px;margin:8px 0}
.howto>summary{cursor:pointer;padding:9px 12px;display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;list-style:none}
.howto>summary::-webkit-details-marker{display:none}
.howto>summary::before{content:"▸";color:var(--muted)}
.howto[open]>summary::before{content:"▾"}
.howto-t{font-weight:600;flex:1;min-width:200px}
.howto-v{font-size:11px;border-radius:20px;padding:1px 9px;border:1px solid var(--line);
  color:var(--muted);white-space:nowrap}
.howto-v-unverified{color:var(--warn);border-color:var(--warn);background:var(--warnbg)}
.howto-v-microsoft,.howto-v-client_doc,.howto-v-technician{color:var(--ok);border-color:var(--ok);background:var(--okbg)}
.howto-b{padding:2px 14px 12px 34px;border-top:1px solid var(--line);font-size:14px}
.howto-b ol{margin:8px 0;padding-left:20px} .howto-b li{margin:5px 0}
.howto-w,.howto-n{color:var(--muted);font-size:13px;margin:8px 0}
.howto-l a{color:var(--accent)}
.howto-b figure{margin:10px 0} .howto-b img{max-width:100%;border:1px solid var(--line);border-radius:6px}
.howto-b figcaption{color:var(--muted);font-size:12px}
.howto-s{background:var(--greybg);border-radius:6px;padding:8px 12px;font-size:13px;color:var(--muted)}
.howto-s ul{margin:4px 0 0;padding-left:18px}
.ovl{border:1px solid var(--accent);border-radius:10px;padding:12px 14px;margin:12px 0;
  background:var(--accentbg)}
.ovl-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ovl-tag{font-size:11px;border:1px solid var(--accent);color:var(--accent);border-radius:20px;padding:0 8px}
.ovl-by,.ovl-srcs,.ovl-src{color:var(--muted);font-size:12px}
.ovl-sum{margin:8px 0;font-size:14px}
.ovl-also{margin:8px 0;font-size:13px;color:var(--muted)} .ovl-also a{color:var(--accent)}
.ovl-t{width:100%;border-collapse:collapse;font-size:13px;background:var(--card)}
.ovl-t th,.ovl-t td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.ovl-t th{color:var(--muted);font-weight:600}
.ovl-docs{font-size:13px;margin:8px 0} .ovl-docs a{color:var(--accent)}
.ovl-steps li{margin:7px 0}
.ovl-how{font-size:12px;margin-left:6px;padding:0 8px;border-radius:20px;text-decoration:none;
  background:var(--accent);color:var(--on-accent);white-space:nowrap}
.ovl-broken{font-size:12px;margin-left:6px;color:var(--hot);border:1px solid var(--hot);
  border-radius:20px;padding:0 8px;white-space:nowrap}
.ovl-pend{font-size:12px;color:var(--warn)}
.ovl-var{font-size:14px;margin:10px 0}
.ovl-see{color:var(--accent);font-size:13px}
.ovl-open{font-size:13px;margin:4px 0;padding-left:18px}