/* ================================================================
   CTG.EMP — DESIGN TOKENS
   Enterprise Management Platform · Cát Tường Group
   Fork từ CTG Command Center v2.2 · Emerald palette
   ================================================================ */

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

/* ================================================================
   DARK THEME (default cho C-level)
   ================================================================ */
:root, [data-theme="dark"] {
  /* Brand — Emerald */
  --teal: #10B981;
  --teal-glow: #34D399;
  --teal-dark: #047857;
  --teal-deep: #022C22;
  --teal-soft: rgba(16,185,129,.14);
  --orange: #F39200;
  --orange-glow: #FFB547;
  --amber: #F5B301;

  /* Surface — Dark scale */
  --bg-0: #05070C;
  --bg-1: #0A0F17;
  --bg-2: #111827;
  --bg-3: #182234;
  --bg-4: #1F2C42;
  --sidebar-bg-a: #0A121F;
  --sidebar-bg-b: #05070C;
  --topbar-bg: rgba(10,15,23,.85);
  --line:   #223349;
  --line-2: #2E4363;
  --line-3: #3B5578;

  /* Ink */
  --ink: #E7EEF7;
  --ink-2: #A6B5CC;
  --ink-3: #6F819C;
  --ink-4: #4C5D77;
  --ink-heading: #FFFFFF;

  /* Status */
  --lv0: #22C55E; --lv0-bg: rgba(34,197,94,.14);  --lv0-line: rgba(34,197,94,.45);
  --lv1: #FACC15; --lv1-bg: rgba(250,204,21,.12); --lv1-line: rgba(250,204,21,.45);
  --lv2: #F59E0B; --lv2-bg: rgba(245,158,11,.14); --lv2-line: rgba(245,158,11,.5);
  --lv3: #EF4444; --lv3-bg: rgba(239,68,68,.16);  --lv3-line: rgba(239,68,68,.55);
  --lv4: #A855F7; --lv4-bg: rgba(168,85,247,.16); --lv4-line: rgba(168,85,247,.55);

  --good: #22C55E;
  --warn: #F59E0B;
  --crit: #EF4444;
  --info: #38BDF8;
  --purple: #A855F7;

  /* Perspective colors (BSC 4 khía cạnh) */
  --p-fin:   #38BDF8;   /* Tài chính — blue */
  --p-cust:  #34D399;   /* Khách hàng — emerald */
  --p-proc:  #F59E0B;   /* Quy trình nội bộ — amber */
  --p-learn: #A855F7;   /* Học tập & phát triển — purple */

  /* Block colors (4 Khối) */
  --k-home:   #34D399;
  --k-qln:    #38BDF8;
  --k-xl:     #F59E0B;
  --k-invest: #A855F7;

  /* Backdrop */
  --backdrop-a: rgba(16,185,129,.06);
  --backdrop-b: rgba(243,146,0,.05);
  --grid-line: rgba(255,255,255,.015);
  --modal-scrim: rgba(0,0,0,.7);

  /* Effects */
  --r: 10px;
  --r-sm: 6px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
  --shadow-glow: 0 0 0 1px rgba(52,211,153,.4), 0 0 24px rgba(52,211,153,.25);

  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 60px;
  --breadcrumb-h: 42px;
  --orglevelbar-h: 38px;

  color-scheme: dark;
}

/* ================================================================
   LIGHT THEME (cho nhân viên)
   ================================================================ */
[data-theme="light"] {
  --teal: #059669;
  --teal-glow: #10B981;
  --teal-dark: #065F46;
  --teal-deep: #064E3B;
  --teal-soft: rgba(5,150,105,.10);
  --orange: #E07C00;
  --orange-glow: #F39200;
  --amber: #D97706;

  --bg-0: #F5F6FA;
  --bg-1: #FFFFFF;
  --bg-2: #FFFFFF;
  --bg-3: #F1F4F9;
  --bg-4: #EAEEF5;
  --sidebar-bg-a: #0A121F;
  --sidebar-bg-b: #05070C;
  --topbar-bg: rgba(255,255,255,.92);
  --line:   #E4E8EF;
  --line-2: #D3D9E3;
  --line-3: #B7C0CE;

  --ink: #1A2233;
  --ink-2: #445068;
  --ink-3: #6B7791;
  --ink-4: #97A2B6;
  --ink-heading: #0A121F;

  --lv0: #16A34A; --lv0-bg: rgba(22,163,74,.10);
  --lv1: #CA8A04; --lv1-bg: rgba(202,138,4,.10);
  --lv2: #D97706; --lv2-bg: rgba(217,119,6,.10);
  --lv3: #DC2626; --lv3-bg: rgba(220,38,38,.10);
  --lv4: #9333EA; --lv4-bg: rgba(147,51,234,.10);

  --good: #16A34A;
  --warn: #D97706;
  --crit: #DC2626;
  --info: #0284C7;
  --purple: #9333EA;

  --p-fin:   #0284C7;
  --p-cust:  #059669;
  --p-proc:  #D97706;
  --p-learn: #9333EA;

  --k-home:   #059669;
  --k-qln:    #0284C7;
  --k-xl:     #D97706;
  --k-invest: #9333EA;

  --backdrop-a: rgba(16,185,129,.04);
  --backdrop-b: rgba(243,146,0,.03);
  --grid-line: rgba(0,0,0,.03);
  --modal-scrim: rgba(15,23,42,.55);

  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.05);
  --shadow-lg: 0 20px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.08);
  --shadow-glow: 0 0 0 1px rgba(16,185,129,.35), 0 0 20px rgba(16,185,129,.15);

  color-scheme: light;
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .25s ease, color .25s ease;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink-heading);
  letter-spacing: -.005em;
  font-weight: 700;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: inherit; }
a { color: var(--teal-glow); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--teal-soft); color: var(--ink-heading); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.upper { text-transform: uppercase; letter-spacing: .06em; }
.tiny { font-size: 10.5px; }
.small { font-size: 12px; }
.muted { color: var(--ink-3); }
.ink-2 { color: var(--ink-2); }

/* ================================================================
   MOCK BANNER
   ================================================================ */
.mock-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(245,158,11,.08));
  border-bottom: 1px solid rgba(245,158,11,.5);
  color: #FDBA74;
  font-size: 11.5px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 500;
}
[data-theme="light"] .mock-banner { color: #B45309; background: linear-gradient(90deg, #FEF3C7, #FDE68A); }

/* ================================================================
   BACKDROP (dark ambient)
   ================================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 20% -10%, var(--backdrop-a), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, var(--backdrop-b), transparent 60%);
  z-index: 0;
}
[data-theme="light"] body::before { opacity: .6; }