/* ════════════════════════════════════════════════════════════
   NSCA Platform — THEME (Enterprise Design System)
   Đồng bộ giao diện toàn hệ thống bằng cách override CSS tokens.
   - KHÔNG đổi cấu trúc / chức năng — chỉ skin lại màu, font, độ bo, bóng.
   - Sáng = nền ngả xanh doanh nghiệp (mặc định).
   - Tối  = navy sâu sang trọng (data-theme="dark").
   Cách hoạt động: file này nạp SAU <style> nội tuyến nên các biến :root
   ở đây thắng, mọi component dùng var(...) tự đổi theo.
   Phiên bản: 2026-06-27.1
   ════════════════════════════════════════════════════════════ */

/* ───────── LIGHT (mặc định · ngả xanh) ───────── */
:root{
  /* Neutrals — tông lạnh hơi xanh */
  --n0:#ffffff; --n50:#eef3fa; --n100:#e3ebf5; --n200:#cdd9e8; --n300:#a6b6cc;
  --n400:#7286a0; --n500:#4d5f78; --n600:#33455f; --n700:#22344c; --n800:#0e1a2e; --n900:#070f1c;
  /* Brand — xanh doanh nghiệp */
  --b50:#eaf1fe; --b100:#d3e1fd; --b200:#a9c6f8; --b300:#5e8ef3; --b400:#2f6bed; --b500:#1a51d1; --b600:#1640a8;
  /* Semantic */
  --ok:#0e9f6e; --ok2:#e6f6ef; --warn:#b06a00; --warn2:#fbf0dd; --err:#d92d43; --err2:#fceced; --info:#2f6bed; --info2:#e9f0fe;
  /* Surface / text / border */
  --surface:#ffffff; --surface-2:#eef3fa; --surface-3:#e2eaf4;
  --border:#dde6f1; --border-2:#c4d2e4;
  --text:#0e1a2e; --text-2:#33455f; --text-3:#536480; --text-4:#7c8ca6; --text-5:#a7b6cc;
  /* Sidebar / topbar — SÁNG: nền trắng tinh gọn (theo mockup enterprise) */
  --sb-bg:#ffffff; --sb-hover:#eef3fa; --sb-active:#eaf0fe; --sb-border:#e3e9f3;
  --sb-text:#5c6b85; --sb-text-a:#0e1a2e; --sb-accent:#2f6bed;
  /* Shadows — mềm, ngả xanh */
  --shadow:0 1px 3px rgba(18,38,76,.06), 0 4px 16px rgba(18,38,76,.06);
  --shadow-lg:0 8px 28px rgba(18,38,76,.14), 0 2px 8px rgba(18,38,76,.06);
  /* Fonts */
  --font-sans:'Inter','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  color-scheme:light;
}

/* ───────── DARK (sang trọng · navy sâu) ───────── */
:root[data-theme="dark"]{
  /* Neutral ramp đảo chiều: số nhỏ = tối, số lớn = sáng */
  --n0:#0f1726; --n50:#131d30; --n100:#18233a; --n200:#26324c; --n300:#3a4a66;
  --n400:#6c7c96; --n500:#8fa0bb; --n600:#aebccf; --n700:#c8d3e2; --n800:#e3e9f2; --n900:#f2f6fb;
  /* Brand — nền tối, chữ sáng */
  --b50:#15294a; --b100:#1c3358; --b200:#274a78; --b300:#4f86e0; --b400:#5b8af2; --b500:#8fb4ff; --b600:#b3ccff;
  /* Semantic — bg tối, màu sáng */
  --ok:#34d399; --ok2:#0f2a22; --warn:#fbbf24; --warn2:#2a2210; --err:#fb7185; --err2:#2a141a; --info:#7fb0ff; --info2:#13243e;
  /* Surface / text / border */
  --surface:#111a2b; --surface-2:#0a1120; --surface-3:#1b2740;
  --border:#22304a; --border-2:#33425f;
  --text:#e9eff8; --text-2:#bcc8db; --text-3:#8c9bb4; --text-4:#6a7a94; --text-5:#4f5e78;
  /* Sidebar / topbar */
  --sb-bg:#0c1424; --sb-hover:#18233a; --sb-active:#141f36; --sb-border:#23324c;
  --sb-text:#8ea0ba; --sb-text-a:#eef4fb; --sb-accent:#5b8af2;
  /* Shadows — sâu */
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ───────── Font + chuyển nền mượt ───────── */
body{ font-family:var(--font-sans); transition:background-color .2s ease, color .2s ease; }
.num,[class*="mono"]{ font-feature-settings:"tnum"; }

/* ───────── Nút chuyển Sáng/Tối trên topbar ───────── */
.tb-theme-btn{
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--sb-border);
  color:var(--sb-text); border-radius:8px; cursor:pointer;
  font-size:15px; line-height:1; margin-right:10px;
  transition:background .15s, color .15s, border-color .15s;
}
.tb-theme-btn:hover{ background:var(--sb-hover); color:var(--sb-text-a); border-color:var(--sb-accent); }

/* ───────── Polish nhẹ (không đổi layout) ───────── */
::-webkit-scrollbar-thumb{ background:var(--border-2); }
.reg-card{ transition:box-shadow .18s ease, transform .12s ease, border-color .18s ease; }

/* Dark mode: vá vài chỗ hardcode hay gặp ở shell để không bị chói */
:root[data-theme="dark"] .rcs-embedded{ background:#241a3d; color:#c4a8ff; border-color:#3a2d63; }
:root[data-theme="dark"] .rc-api.embedded,
:root[data-theme="dark"] .api-embed,
:root[data-theme="dark"] .rca-embed{ background:#241a3d; color:#c4a8ff; border-color:#3a2d63; }
:root[data-theme="dark"] .api-post{ background:#2a1d10; color:#f0a868; }
:root[data-theme="dark"] .rca-embed{ color:#fff; }
:root[data-theme="dark"] img[src*="logo"],
:root[data-theme="dark"] .invert-on-dark{ filter:none; }

/* ════════════════════════════════════════════════════════════
   SHELL RESTYLE — topbar + sidebar SÁNG theo mockup enterprise
   Re-point các màu hardcode (vốn giả định nền tối) sang biến token,
   nên tự đúng ở cả chế độ Sáng (nền trắng) lẫn Tối (navy).
   ════════════════════════════════════════════════════════════ */
/* Topbar */
.topbar{ background:var(--sb-bg); border-bottom:1px solid var(--sb-border); }
.tb-logo-name{ color:var(--sb-text-a); letter-spacing:-.01em; }
.tb-logo-ver{ color:var(--sb-text); }
.tb-mod{ color:var(--sb-text); }
.tb-mod:hover{ color:var(--sb-text-a); background:var(--sb-hover); }
.tb-mod.active{ color:var(--sb-accent); border-bottom-color:var(--sb-accent); }
.tb-mod-dot{ background:var(--sb-text); }
.tb-mod.active .tb-mod-dot{ background:var(--sb-accent); box-shadow:0 0 8px color-mix(in srgb,var(--sb-accent) 55%,transparent); }
.tb-mod-badge{ background:var(--err2); color:var(--err); border-color:color-mix(in srgb,var(--err) 28%,transparent); }
.tb-mod-badge.y{ background:var(--warn2); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 28%,transparent); }
.tb-add-mod{ color:var(--sb-text); border-left-color:var(--sb-border); }
.tb-add-mod:hover{ color:var(--sb-accent); }
.tb-right{ border-left-color:var(--sb-border); }
.tb-live{ color:var(--ok); background:var(--ok2); border-color:color-mix(in srgb,var(--ok) 25%,transparent); }
.tb-live-dot{ background:var(--ok); }
.tb-clock{ color:var(--sb-text); background:var(--sb-hover); border-color:var(--sb-border); }
.tb-user{ background:var(--sb-hover); border-color:var(--sb-border); }
.tb-user:hover{ background:var(--sb-active); }
.tb-user-name{ color:var(--sb-text-a); }
.tb-user-role{ color:var(--sb-text); }
.sb-toggle-btn:hover{ color:var(--sb-text-a); background:var(--sb-hover); }
.tb-more{ color:var(--sb-text); }
.tb-more:hover{ color:var(--sb-text-a); background:var(--sb-hover); }
.tb-more-menu{ background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-lg); }
.tb-more-item{ color:var(--text-2); }
.tb-more-item:hover{ background:var(--surface-2); color:var(--text); }
.tb-more-item.active{ background:var(--b50); color:var(--b500); }
/* User dropdown */
.tb-user-dropdown{ background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-lg); }
.tb-ud-header{ border-bottom-color:var(--border); }
.tb-ud-fullname{ color:var(--text); }
.tb-ud-email{ color:var(--text-4); }
.tb-ud-meta{ border-bottom-color:var(--border); }
.tb-ud-row{ color:var(--text-2); }
.tb-ud-row span:first-child{ color:var(--text-4); }
.tb-ud-btn{ color:var(--text-2); }
.tb-ud-btn:hover{ background:var(--surface-2); color:var(--text); }
.tb-ud-btn.danger{ color:var(--err); }
.tb-ud-btn.danger:hover{ background:var(--err2); color:var(--err); }
/* Sidebar */
.sidebar{ background:var(--sb-bg); border-right:1px solid var(--sb-border); }
.sb-label.sb-grp-head:hover{ color:var(--sb-text-a); }
.sb-admin-sec .sb-label{ color:var(--warn); }
.sb-item:hover{ background:var(--sb-hover); color:var(--sb-text-a); }
.sb-item.active{ background:var(--sb-active); color:var(--sb-text-a); }
.sb-badge.r{ background:var(--err2); color:var(--err); border-color:color-mix(in srgb,var(--err) 25%,transparent); }
.sb-badge.y{ background:var(--warn2); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 25%,transparent); }
.sb-badge.b{ background:var(--b50); color:var(--b500); border-color:var(--b100); }
.sb-badge.g{ background:var(--ok2); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 25%,transparent); }
.sb-api-info{ background:var(--b50); border-color:var(--b100); }
.sb-api-label{ color:var(--b500); }
.sb-api-url{ color:var(--text-4); }
/* Nút theme đặt cùng style cụm phải topbar */
.tb-theme-btn{ width:30px; height:30px; border-radius:6px; }

/* ───────── Responsive: lưới registry co theo bề ngang ───────── */
@media (max-width:1280px){ .registry-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:920px){ .registry-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .registry-grid{ grid-template-columns:1fr; }
  .tb-theme-btn{ margin-right:6px; }
}