/* ====================================================================
 * stm-ui-tokens.css — ĐỒNG BỘ TỪ @stmjsc/ui@1.0.6 (styles.css).
 * KHÔNG sửa tay. Chạy tools/sync-tokens.sh để cập nhật khi bump design system.
 * ==================================================================== */
/*
 * @stmjsc/ui — design tokens + base layer.
 * Import MỘT LẦN ở app root (Next.js: app/layout.tsx): import "@stmjsc/ui/styles.css"
 * Kèm preset Tailwind: presets: [require("@stmjsc/ui/preset")]
 *
 * Quy ước quan trọng:
 * - File này là PLAIN CSS (không @layer/@tailwind/@apply) để consumer import trực tiếp
 *   từ node_modules mà không cần Tailwind xử lý — app vẫn giữ globals.css riêng
 *   chứa @tailwind base/components/utilities như mặc định.
 * - Font: app tự khai báo Inter (subsets latin + vietnamese) và JetBrains Mono,
 *   gán vào --font-sans / --font-mono. Package chỉ dùng biến.
 * - --border/--input ở dark mode NHÚNG alpha trong biến → KHÔNG dùng opacity
 *   modifier trên các token này (border-border/50 sẽ sai).
 */

:root {
  /* Light theme — clean medical white, forest green accents */
  --background: 150 20% 98%;
  --foreground: 156 55% 8%;

  --card: 0 0% 100%;
  --card-foreground: 156 55% 8%;

  --popover: 0 0% 100%;
  --popover-foreground: 156 55% 8%;

  --primary: 158 85% 27%;
  --primary-foreground: 0 0% 100%;

  --secondary: 150 20% 94%;
  --secondary-foreground: 156 55% 20%;

  --muted: 150 15% 92%;
  --muted-foreground: 156 15% 40%;

  --accent: 150 25% 93%;
  --accent-foreground: 156 55% 12%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 150 18% 88%;
  --input: 150 18% 85%;
  --ring: 158 85% 27%;

  --radius: 0.625rem;

  /* Status tokens (semantic — thay cho hex hardcode) */
  --success: 135 59% 49%; /* #34c759 */
  --success-foreground: 0 0% 100%;
  --warning: 39 100% 56%; /* #ffb020 */
  --warning-foreground: 156 55% 8%;
  --info: 220 100% 68%; /* #5b93ff */
  --info-foreground: 0 0% 100%;
  --status-purple: 271 91% 65%; /* #a855f7 */
  --status-teal: 168 89% 42%; /* #0cc8a8 */

  /* Header — luôn tối ở mọi theme (chốt #082B1E, thống nhất 3 sắc lệch của bản prototype) */
  --header-background: 158 69% 10%;
  --header-foreground: 0 0% 100%;
  --header-muted: 163 13% 48%; /* muted-sage #6B8C80 */
  --header-border: 0 0% 100% / 0.08;

  /* Sidebar — theme-aware (trắng ở light) */
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 161 22% 29%;
  --sidebar-primary: 161 85% 26%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 159 48% 92%;
  --sidebar-accent-foreground: 161 85% 26%;
  --sidebar-border: 150 18% 91%;
  --sidebar-ring: 161 85% 26%;
}

.dark {
  /* Dark medical theme — forest-dark */
  --background: 153 60% 6%;
  --foreground: 0 0% 96%;

  --card: 150 36% 10%;
  --card-foreground: 0 0% 96%;

  --popover: 150 36% 10%;
  --popover-foreground: 0 0% 96%;

  --primary: 162 55% 42%;
  --primary-foreground: 0 0% 100%;

  --secondary: 150 30% 12%;
  --secondary-foreground: 0 0% 80%;

  --muted: 150 25% 12%;
  --muted-foreground: 0 0% 55%;

  --accent: 150 25% 12%;
  --accent-foreground: 0 0% 90%;

  --destructive: 0 78% 55%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 0% 100% / 0.10;
  --input: 0 0% 100% / 0.18;
  --ring: 162 65% 40%;

  /* Status — biến thể dark (sáng hơn, dùng làm text trên nền tint) */
  --success: 142 69% 58%; /* #4ade80 */
  --success-foreground: 153 60% 6%;
  --warning: 45 96% 56%; /* #fbbf24 */
  --warning-foreground: 153 60% 6%;
  --info: 213 94% 78%; /* #93c5fd */
  --info-foreground: 153 60% 6%;
  --status-purple: 271 91% 71%;
  --status-teal: 168 76% 52%;

  /* Sidebar dark — #071A10 */
  --sidebar-background: 148 58% 6%;
  --sidebar-foreground: 0 0% 85%;
  --sidebar-primary: 162 100% 55%;
  --sidebar-primary-foreground: 153 60% 6%;
  --sidebar-accent: 162 100% 55% / 0.09;
  --sidebar-accent-foreground: 0 0% 95%;
  --sidebar-border: 0 0% 100% / 0.06;
  --sidebar-ring: 162 100% 55%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.2);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground) / 0.3);
}

/* Focus ring "mảnh" — chữ ký của design system STM */
*:focus-visible {
  outline: 1px solid hsl(var(--ring) / 0.35);
  outline-offset: 2px;
}

.text-balance {
  text-wrap: balance;
}

.bg-destructive\/8 {
  background-color: hsl(var(--destructive) / 0.08);
}

.hover\:bg-white\/8:hover {
  background-color: rgb(255 255 255 / 0.08);
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Force dark sidebar (mobile off-canvas) */
.sidebar-force-dark {
  --sidebar-background: 150 58% 6%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 162 100% 55%;
  --sidebar-primary-foreground: 156 55% 8%;
  --sidebar-accent: 156 50% 12%;
  --sidebar-accent-foreground: 156 10% 95%;
  --sidebar-border: 156 40% 14%;
  --sidebar-ring: 162 100% 55%;
}

.transition-sidebar {
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}

/* Letter avatar — màu từ tên qua --av-r/g/b (đặt bởi <LetterAvatar/>) */
.letter-avatar {
  background-color: rgb(var(--av-r) var(--av-g) var(--av-b) / 0.28) !important;
}