solution-erp/fe-user/src/index.css

@import "tailwindcss";

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");

@theme {
  /* Solutions brand palette (derived from logo #1F7DC1) — PRIMARY, unchanged */
  --color-brand-50:  #f0f7fc;
  --color-brand-100: #dbeaf7;
  --color-brand-200: #b8d5ef;
  --color-brand-300: #8bbae3;
  --color-brand-400: #5499d3;
  --color-brand-500: #2e85c7;
  --color-brand-600: #1f7dc1;  /* exact logo blue */
  --color-brand-700: #1b6aa3;
  --color-brand-800: #175685;
  --color-brand-900: #144868;

  /* Accent red from ® mark */
  --color-accent-500: #dc2626;
  --color-accent-600: #b91c1c;

  /* ───────────────────────────────────────────────────────────────────
     ACCENT PALETTE (anh chốt 2026-06-16 "nâng màu, giữ nền xanh brand").
     These ADD to the brand — primary stays brand-600. Used for KPI cards,
     status badges, multi-tone affordances. Each ships a 50/500/600/700 stop
     so `bg-{x}-50` chip + `text-{x}-700` label both clear WCAG-AA.
     ─────────────────────────────────────────────────────────────────── */
  /* teal — info / secondary metric */
  --color-teal-50:  #e9faf9;
  --color-teal-100: #ccf3f1;
  --color-teal-500: #0ea5a4;
  --color-teal-600: #0c8e8d;
  --color-teal-700: #0a7170;
  /* amber/cam — warning / pending */
  --color-amberx-50:  #fef6e7;
  --color-amberx-100: #fce8c2;
  --color-amberx-500: #f59e0b;
  --color-amberx-600: #d98306;
  --color-amberx-700: #b16708;
  /* violet/tím — neutral-highlight / value */
  --color-violet-50:  #f1effe;
  --color-violet-100: #e0dcfc;
  --color-violet-500: #7c6ff0;
  --color-violet-600: #6354e4;
  --color-violet-700: #5042c4;
  /* green/lục — success / done */
  --color-greenx-50:  #e8f8ee;
  --color-greenx-100: #c7eed5;
  --color-greenx-500: #16a34a;
  --color-greenx-600: #128a3f;
  --color-greenx-700: #0f7034;

  --font-sans: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html, body, #root {
  height: 100%;
}

body {
  margin: 0;
  background-color: #f8fafc;
  color: #0f172a;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Heading hierarchy with Be Vietnam Pro.
   2026-06-16: anh phản hồi "đơn điệu / có thấy khác gì đâu" → bump weight to
   700 + tighter tracking so headings read BOLD and high-contrast (was 600
   semibold = too quiet). Hierarchy now carried by both weight AND a darker
   ink (#0b1220 vs body #0f172a). */
h1, h2, h3, h4 {
  letter-spacing: -0.018em;
  color: #0b1220;
  font-weight: 700;
}
h1 { letter-spacing: -0.022em; }

/* Section / form labels — uppercase scan-pattern shared across the app.
   Use class="label-eyebrow" for the dense ERP label treatment. Brand-tinted
   (was plain slate) so eyebrows carry the identity colour at a glance. */
.label-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-brand-600);
}

/* ─────────────────────────────────────────────────────────────────────────
   REUSABLE VISUAL UTILITIES (anh chốt 2026-06-16). Component-classes so the
   whole app picks up the richer look without touching 65 leaf pages — any
   page can add class="card-accent" / "icon-chip" etc.
   ───────────────────────────────────────────────────────────────────────── */

/* Brand gradient surface — page/section headers, hero strips.
   xanh → xanh đậm theo hướng anh chốt. Text on top must be white. */
.app-gradient-brand {
  background-image: linear-gradient(120deg, var(--color-brand-600) 0%, var(--color-brand-700) 55%, var(--color-brand-800) 100%);
}

/* KPI / metric card — colored LEFT border + soft lift. Pair with a
   --accent custom property to recolour the rail per card, e.g.
   style={{ ['--accent' as any]: 'var(--color-teal-500)' }}. Defaults brand. */
.card-accent {
  position: relative;
  border-radius: 0.75rem;
  border: 1px solid #e9eef4;
  background: #fff;
  border-left: 3px solid var(--accent, var(--color-brand-500));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card-accent:hover {
  box-shadow: 0 4px 10px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.06);
  transform: translateY(-1px);
}

/* Icon chip — soft tinted square behind a lucide icon. Recolour via --chip-bg
   / --chip-fg, defaults brand. Used in KPI cards + section headers. */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.625rem;
  background: var(--chip-bg, var(--color-brand-50));
  color: var(--chip-fg, var(--color-brand-600));
}

/* Big stat number — tabular, tight, dark. */
.stat-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0b1220;
  line-height: 1.1;
}

@media (prefers-reduced-motion: reduce) {
  .card-accent { transition: none; }
  .card-accent:hover { transform: none; }
}

/* Tabular numbers in tables + stat cards for better alignment */
table, .tabular-nums {
  font-variant-numeric: tabular-nums;
}

input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: none;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}