/* ============================================================================
 * tenant-theme-demo.css — per-tenant theme DEMO (GAP-1230 phần b)
 * ----------------------------------------------------------------------------
 * Dùng chung cho 4 KC dashboard kits: kiteclass-{student,teacher,parent,pro-v2}.
 * Port pattern 3-GV demo-trio từ kiteclass-public/about.html + landing-personal:
 *   Cô Hà   · Toán   → xanh dương #2563EB (hsl 221 83% 53%)
 *   Thầy Nhì · Hóa   → xanh lá   #16A34A (hsl 142 76% 36%)
 *   Cô Khánh · Anh   → cam        #EA580C (hsl 21 90% 48%)
 *
 * Override token shared (--primary/--accent/--ring) ở format HSL khớp
 * _shared/colors_and_type.css. Selector áp trên CẢ html VÀ body để thắng mọi
 * kit dù kit định nghĩa token trên :root (teacher/pro-v2) hay .theme-kiteclass-*
 * (student/parent) — specificity (element+class) > (:root) và > (.theme-*).
 *
 * Boundary: theming theo giáo viên = tính năng per-tenant KiteClass (GAP-1230).
 * Production: theme THẬT từ `branding` package per ADR-009 (build-time per-tenant);
 *             switcher này CHỈ là affordance DEMO trong design kit, không inert
 *             (per design-source-implementation-parity.md §3.2 — click có hiệu ứng thật).
 * ==========================================================================*/

/* --- Theme token overrides (3 GV demo-trio) --- */
html.kc-demo-ha,    body.kc-demo-ha    { --primary: 221 83% 53%; --accent: 25 95% 53%; --ring: 221 83% 53%; }
html.kc-demo-nhi,   body.kc-demo-nhi   { --primary: 142 76% 36%; --accent: 38 92% 50%; --ring: 142 76% 36%; }
html.kc-demo-khanh, body.kc-demo-khanh { --primary: 21 90% 48%;  --accent: 221 83% 53%; --ring: 21 90% 48%; }

/* --- Floating switcher widget --- */
.kc-theme-demo {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #0b1220;
  color: #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .38);
  padding: 12px 14px;
  width: 218px;
  font-size: 12px;
  line-height: 1.4;
  user-select: none;
}
.kc-theme-demo__title {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .02em;
  color: #cbd5e1;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kc-theme-demo__title::before {
  content: '🎨';
  font-size: 13px;
}
.kc-theme-demo__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(148, 163, 184, .25);
}
.kc-theme-demo__mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  background: hsl(var(--primary));
}
.kc-theme-demo__name {
  font-weight: 800;
  font-size: 12px;
  color: #f1f5f9;
}
.kc-theme-demo__name small {
  display: block;
  font-weight: 600;
  font-size: 10px;
  color: #94a3b8;
}
.kc-theme-demo__row {
  display: flex;
  gap: 6px;
}
.kc-theme-demo__btn {
  flex: 1;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.kc-theme-demo__btn[aria-pressed="true"] {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.kc-theme-demo__btn--ha    { background: #2563EB; }
.kc-theme-demo__btn--nhi   { background: #16A34A; }
.kc-theme-demo__btn--khanh { background: #EA580C; }
.kc-theme-demo__note {
  margin-top: 8px;
  font-size: 10px;
  color: #64748b;
  line-height: 1.35;
}
@media (max-width: 480px) {
  .kc-theme-demo { width: 190px; right: 8px; bottom: 8px; padding: 10px 11px; }
}