/* =========================================================
   Outbound CRM - Design Tokens & Base (v4 · Themed)
   Light = brand cream + deep forest green
   Dark  = navy glass + emerald accents
   ========================================================= */

/* ---------- Brand constants (do not change per theme) ---------- */
:root {
  --emerald-300: #6EE7B7;
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  --forest-700: #0F5A30;   /* Outbound deep forest */
  --forest-800: #052210;
  --forest-500: #1F8A4C;

  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --purple-400: #A78BFA;
  --purple-500: #8B5CF6;
  --purple-600: #7C3AED;
  --pink-400: #F472B6;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --gold-500: #C8932B;       /* brand gold */
  --coral-500: #E1655A;      /* brand coral */
  --rose-500: #F43F5E;
  --red-500: #EF4444;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;

  /* Sizing */
  --sb-w: 248px;
  --tb-h: 64px;
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  /* Gradients (theme-stable) */
  --grad-emerald: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  --grad-purple:  linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%);
  --grad-amber:   linear-gradient(135deg, #F59E0B 0%, #F43F5E 100%);
  --grad-forest:  linear-gradient(135deg, #0F5A30 0%, #1F8A4C 100%);
  --grad-gold:    linear-gradient(135deg, #C8932B 0%, #E8CC6E 100%);

  /* Font */
  --font: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', monospace;
}

/* =========================================================
   THEME · DARK (default)
   ========================================================= */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Canvas + surfaces */
  --canvas:        #070A14;
  --surface:       rgba(17,24,39,0.72);      /* primary card */
  --surface-2:     rgba(31,41,55,0.72);      /* elevated card */
  --surface-solid: #111827;
  --surface-soft:  rgba(255,255,255,0.025);
  --surface-input: rgba(255,255,255,0.04);
  --surface-hover: rgba(255,255,255,0.05);
  --surface-active:rgba(16,185,129,0.06);
  --row-hover:     rgba(16,185,129,0.06);

  /* Borders */
  --line:    rgba(255,255,255,0.06);
  --line-2:  rgba(255,255,255,0.04);
  --line-3:  rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.16);

  /* Text */
  --text:    #F9FAFB;
  --text-2:  #E5E7EB;
  --muted:   #9CA3AF;
  --muted-2: #6B7280;
  --text-on-accent: #fff;

  /* Brand */
  --primary:    var(--emerald-500);
  --primary-2:  var(--emerald-400);
  --primary-3:  var(--emerald-300);
  --primary-tint:    rgba(16,185,129,0.10);
  --primary-tint-2:  rgba(16,185,129,0.16);
  --primary-border:  rgba(16,185,129,0.25);
  --primary-border-2:rgba(16,185,129,0.40);
  --grad-primary: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow:    0 8px 28px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.28);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.35);
  --shadow-pop:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02) inset;
  --shadow-card-hover: 0 14px 40px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.04) inset;
  --inner-highlight: inset 0 1px 0 rgba(255,255,255,0.06);

  /* Ambient */
  --mesh-bg:
    radial-gradient(ellipse 1100px 600px at 8% -10%, rgba(16,185,129,0.18), transparent 60%),
    radial-gradient(ellipse 900px 500px at 100% 0%,  rgba(139,92,246,0.16), transparent 60%),
    radial-gradient(ellipse 1000px 600px at 50% 120%,rgba(6,182,212,0.12),  transparent 60%);
  --dot-grid:      radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0);
  --dot-grid-opacity: 0.6;

  /* Chrome (sidebar / topbar / modal) */
  --sidebar-bg:   linear-gradient(180deg, rgba(17,24,39,0.85) 0%, rgba(11,16,32,0.85) 100%);
  --sidebar-glow: radial-gradient(ellipse 320px 200px at 50% -10%, rgba(16,185,129,0.22), transparent 70%),
                  radial-gradient(ellipse 320px 200px at 50% 110%, rgba(139,92,246,0.18), transparent 70%);
  --topbar-bg:    rgba(11,16,32,0.65);
  --pop-bg:       rgba(17,24,39,0.92);
  --modal-bg:     rgba(17,24,39,0.96);
  --modal-scrim:  rgba(7,10,20,0.65);
  --badge-ring:   #0B1020;

  /* Inputs */
  --input-bg:           rgba(255,255,255,0.03);
  --input-bg-hover:     rgba(255,255,255,0.05);
  --input-bg-focus:     rgba(16,185,129,0.04);
  --input-border:       rgba(255,255,255,0.08);
  --input-border-hover: rgba(255,255,255,0.14);
  --input-ring:         rgba(16,185,129,0.12);

  /* Keyboard */
  --kbd-bg:     rgba(255,255,255,0.05);
  --kbd-border: rgba(255,255,255,0.10);
  --kbd-fg:     rgba(255,255,255,0.65);

  /* Charts */
  --chart-grid: rgba(255,255,255,0.05);
  --chart-axis: #9CA3AF;

  /* Status surfaces (subtle for dark) */
  --warn-bg:   rgba(245,158,11,0.10);
  --warn-bd:   rgba(245,158,11,0.22);
  --warn-fg:   #FCD34D;
  --bad-bg:    rgba(239,68,68,0.12);
  --bad-bd:    rgba(239,68,68,0.22);
  --bad-fg:    #FCA5A5;
  --good-bg:   rgba(16,185,129,0.12);
  --good-bd:   rgba(16,185,129,0.22);
  --good-fg:   #6EE7B7;

  /* Stage chip backgrounds */
  --st-new-bg:        rgba(16,185,129,0.14); --st-new-fg:        #6EE7B7;
  --st-call-bg:       rgba(59,130,246,0.14); --st-call-fg:       #93C5FD;
  --st-notatt-bg:     rgba(245,158,11,0.14); --st-notatt-fg:     #FCD34D;
  --st-notint-bg:     rgba(148,163,184,0.14);--st-notint-fg:     #CBD5E1;
  --st-pendq-bg:      rgba(139,92,246,0.16); --st-pendq-fg:      #C4B5FD;
  --st-quoteg-bg:     rgba(20,184,166,0.16); --st-quoteg-fg:     #5EEAD4;
  --st-disc-bg:       rgba(34,197,94,0.16);  --st-disc-fg:       #86EFAC;
  --st-ctw-bg:        rgba(236,72,153,0.16); --st-ctw-fg:        #F9A8D4;
  --st-cnw-bg:        rgba(244,63,94,0.16);  --st-cnw-fg:        #FDA4AF;
  --st-nores-bg:      rgba(100,116,139,0.18);--st-nores-fg:      #CBD5E1;
  --st-boom-bg:       rgba(249,115,22,0.16); --st-boom-fg:       #FDBA74;
  --st-won-bg:        rgba(16,185,129,0.20); --st-won-fg:        #6EE7B7;
  --st-lost-bg:       rgba(239,68,68,0.18);  --st-lost-fg:       #FCA5A5;

  --src-insta-bg:    rgba(236,72,153,0.16); --src-insta-fg:    #F9A8D4;
  --src-fb-bg:       rgba(59,130,246,0.16); --src-fb-fg:       #93C5FD;
  --src-wa-bg:       rgba(34,197,94,0.16);  --src-wa-fg:       #86EFAC;
  --src-tt-bg:       rgba(255,255,255,0.08);--src-tt-fg:       #F9FAFB;
  --src-web-bg:      rgba(148,163,184,0.16);--src-web-fg:      #CBD5E1;
  --src-blog-bg:     rgba(245,158,11,0.16); --src-blog-fg:     #FCD34D;
  --src-agent-bg:    rgba(139,92,246,0.16); --src-agent-fg:    #C4B5FD;
  --src-ads-bg:      rgba(244,63,94,0.16);  --src-ads-fg:      #FDA4AF;
  --src-b2b-bg:      rgba(6,182,212,0.16);  --src-b2b-fg:      #67E8F9;
  --src-webcall-bg:  rgba(99,102,241,0.16); --src-webcall-fg:  #A5B4FC;

  /* Legacy aliases (used inline in some pages) */
  --bg:    var(--canvas);
  --card:  var(--surface);
  --green-700: var(--emerald-300);
  --green-600: var(--emerald-400);
  --green-500: var(--emerald-500);
  --green-tint:   var(--primary-tint);
  --green-border: var(--primary-border);
  --success: var(--emerald-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);
  --red: var(--red-500); --amber: var(--amber-500); --blue: var(--blue-500);
}

/* =========================================================
   THEME · LIGHT (Outbound brand cream)
   ========================================================= */
[data-theme="light"] {
  color-scheme: light;

  /* Canvas + surfaces */
  --canvas:        #F8F4EC;   /* warm sand cream */
  --surface:       rgba(255,255,255,0.86);
  --surface-2:     rgba(255,255,255,0.94);
  --surface-solid: #FFFFFF;
  --surface-soft:  rgba(15,90,48,0.03);
  --surface-input: rgba(255,255,255,0.88);
  --surface-hover: rgba(15,90,48,0.05);
  --surface-active:rgba(15,90,48,0.07);
  --row-hover:     rgba(15,90,48,0.05);

  /* Borders */
  --line:        rgba(15,42,29,0.10);
  --line-2:      rgba(15,42,29,0.06);
  --line-3:      rgba(15,42,29,0.14);
  --line-strong: rgba(15,42,29,0.22);

  /* Text */
  --text:    #1F2A1D;   /* charcoal */
  --text-2:  #2E3D2A;
  --muted:   #4A5547;
  --muted-2: #6B7770;
  --text-on-accent: #FFFFFF;

  /* Brand — lean on deep forest for buttons/links on cream */
  --primary:    var(--forest-700);
  --primary-2:  var(--forest-500);
  --primary-3:  var(--emerald-600);
  --primary-tint:    rgba(15,90,48,0.07);
  --primary-tint-2:  rgba(15,90,48,0.12);
  --primary-border:  rgba(15,90,48,0.22);
  --primary-border-2:rgba(15,90,48,0.40);
  --grad-primary: linear-gradient(135deg, #0F5A30 0%, #1F8A4C 100%);

  /* Shadows (soft, brand-tinted) */
  --shadow-xs: 0 1px 2px rgba(15,90,48,0.05);
  --shadow-sm: 0 2px 8px rgba(15,90,48,0.06);
  --shadow:    0 8px 28px rgba(15,90,48,0.08), 0 2px 6px rgba(15,90,48,0.05);
  --shadow-lg: 0 24px 60px rgba(15,90,48,0.16), 0 8px 20px rgba(15,90,48,0.08);
  --shadow-pop:0 30px 80px rgba(15,90,48,0.16), 0 0 0 1px rgba(15,42,29,0.04) inset;
  --shadow-card-hover: 0 14px 36px rgba(15,90,48,0.12), 0 0 0 1px rgba(15,42,29,0.04) inset;
  --inner-highlight: inset 0 1px 0 rgba(255,255,255,0.65);

  /* Ambient (lighter, brand-colored) */
  --mesh-bg:
    radial-gradient(ellipse 1100px 600px at 8% -10%, rgba(15,90,48,0.08),  transparent 60%),
    radial-gradient(ellipse 900px 500px at 100% 0%,  rgba(200,147,43,0.07), transparent 60%),
    radial-gradient(ellipse 1000px 600px at 50% 120%,rgba(6,182,212,0.05),  transparent 60%);
  --dot-grid:      radial-gradient(circle at 1px 1px, rgba(15,42,29,0.05) 1px, transparent 0);
  --dot-grid-opacity: 0.45;

  /* Chrome */
  --sidebar-bg:   linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,244,236,0.92) 100%);
  --sidebar-glow: radial-gradient(ellipse 320px 200px at 50% -10%, rgba(15,90,48,0.12),  transparent 70%),
                  radial-gradient(ellipse 320px 200px at 50% 110%, rgba(200,147,43,0.10), transparent 70%);
  --topbar-bg:    rgba(255,255,255,0.78);
  --pop-bg:       rgba(255,255,255,0.96);
  --modal-bg:     rgba(255,255,255,0.98);
  --modal-scrim:  rgba(15,42,29,0.30);
  --badge-ring:   #FFFFFF;

  /* Inputs */
  --input-bg:           rgba(255,255,255,0.85);
  --input-bg-hover:     #FFFFFF;
  --input-bg-focus:     #FFFFFF;
  --input-border:       rgba(15,42,29,0.12);
  --input-border-hover: rgba(15,42,29,0.22);
  --input-ring:         rgba(15,90,48,0.14);

  /* Keyboard */
  --kbd-bg:     rgba(15,42,29,0.05);
  --kbd-border: rgba(15,42,29,0.12);
  --kbd-fg:     #4A5547;

  /* Charts */
  --chart-grid: rgba(15,42,29,0.06);
  --chart-axis: #4A5547;

  /* Status surfaces */
  --warn-bg:   rgba(245,158,11,0.14);
  --warn-bd:   rgba(245,158,11,0.30);
  --warn-fg:   #92400E;
  --bad-bg:    rgba(239,68,68,0.10);
  --bad-bd:    rgba(239,68,68,0.30);
  --bad-fg:    #B91C1C;
  --good-bg:   rgba(15,90,48,0.10);
  --good-bd:   rgba(15,90,48,0.28);
  --good-fg:   #0F5A30;

  /* Stage chip backgrounds — readable on cream */
  --st-new-bg:        #E7F3EC; --st-new-fg:        #0F5A30;
  --st-call-bg:       #DBEAFE; --st-call-fg:       #1E3A8A;
  --st-notatt-bg:     #FEF3C7; --st-notatt-fg:     #92400E;
  --st-notint-bg:     #F1F5F9; --st-notint-fg:     #334155;
  --st-pendq-bg:      #EDE9FE; --st-pendq-fg:      #4C1D95;
  --st-quoteg-bg:     #CCFBF1; --st-quoteg-fg:     #0F766E;
  --st-disc-bg:       #DCFCE7; --st-disc-fg:       #166534;
  --st-ctw-bg:        #FCE7F3; --st-ctw-fg:        #831843;
  --st-cnw-bg:        #FFE4E6; --st-cnw-fg:        #9F1239;
  --st-nores-bg:      #F1F5F9; --st-nores-fg:      #475569;
  --st-boom-bg:       #FFEDD5; --st-boom-fg:       #9A3412;
  --st-won-bg:        #BBF7D0; --st-won-fg:        #14532D;
  --st-lost-bg:       #FEE2E2; --st-lost-fg:       #991B1B;

  --src-insta-bg:    #FCE7F3; --src-insta-fg:    #831843;
  --src-fb-bg:       #DBEAFE; --src-fb-fg:       #1E3A8A;
  --src-wa-bg:       #DCFCE7; --src-wa-fg:       #166534;
  --src-tt-bg:       #0F172A; --src-tt-fg:       #FFFFFF;
  --src-web-bg:      #F1F5F9; --src-web-fg:      #334155;
  --src-blog-bg:     #FEF3C7; --src-blog-fg:     #92400E;
  --src-agent-bg:    #EDE9FE; --src-agent-fg:    #4C1D95;
  --src-ads-bg:      #FDE2DD; --src-ads-fg:      #7A1D12;
  --src-b2b-bg:      #CCFBF1; --src-b2b-fg:      #0F766E;
  --src-webcall-bg:  #E0E7FF; --src-webcall-fg:  #3730A3;

  /* Legacy aliases */
  --bg:    var(--canvas);
  --card:  var(--surface);
  --green-700: var(--forest-700);
  --green-600: var(--forest-500);
  --green-500: var(--emerald-500);
  --green-tint:   var(--primary-tint);
  --green-border: var(--primary-border);
  --success: var(--emerald-600);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);
  --red: var(--red-500); --amber: var(--amber-500); --blue: var(--blue-500);
}

/* =========================================================
   Base reset
   ========================================================= */
* { box-sizing: border-box; }
*::selection { background: var(--primary-tint-2); color: var(--text); }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: -0.005em;
  min-height: 100vh;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Ambient mesh + dot grid (themed) */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: var(--mesh-bg);
  pointer-events: none;
  z-index: 0;
  transition: background 0.4s ease;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: var(--dot-grid);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  opacity: var(--dot-grid-opacity);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; color: var(--text); }

h1,h2,h3,h4 { margin: 0; font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 22px; line-height: 1.2; }
h3 { font-size: 16px; line-height: 1.3; }
h4 { font-size: 14px; line-height: 1.3; }
p { margin: 0; }

/* Scrollbars (themed) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-3);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--primary-border-2); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-color: var(--line-3) transparent; scrollbar-width: thin; }

.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

.grad-text {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.grad-text-purple {
  background: var(--grad-purple);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.grad-text-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}