/* ============================================================
   WTC CRM — Targets skin  (data-skin="targets")
   Dark BD engine. Inter everywhere, JetBrains Mono numerals.
   ============================================================ */

:root {
  /* Canvas + surfaces */
  --canvas:        #0A0F14;
  --surface:       #141A21;   /* cards, columns */
  --elevated:      #1E252E;   /* hover, elevated */
  --pressed:       #262F3A;   /* pressed */

  /* Hairlines */
  --line:          rgba(255,255,255,0.08);
  --line-soft:     rgba(255,255,255,0.04);
  --line-strong:   rgba(255,255,255,0.13);

  /* Text */
  --text:          #F4F6F7;
  --text-2:        #98A1AB;
  --text-3:        #6B7680;

  /* Accent — mountain blue */
  --accent:        #6CACE4;
  --accent-strong: #3E7FB8;
  --accent-14:     rgba(108,172,228,0.14);
  --accent-22:     rgba(108,172,228,0.22);
  --accent-glow:   rgba(108,172,228,0.30);

  /* Status */
  --green:         #45C16A;
  --green-14:      rgba(69,193,106,0.14);
  --red:           #E5564B;
  --red-14:        rgba(229,86,75,0.14);
  --amber:         #E0A23C;
  --amber-14:      rgba(224,162,60,0.14);

  /* Lane chips */
  --lane-event:        #6CACE4;   /* Experience / Events — blue */
  --lane-event-14:     rgba(108,172,228,0.14);
  --lane-travel:       #45C16A;   /* Travel — green */
  --lane-travel-14:    rgba(69,193,106,0.14);
  --lane-brand:        #E0A23C;   /* Brand — amber */
  --lane-brand-14:     rgba(224,162,60,0.14);
  --lane-agency:       #B69BE8;   /* Agency — violet (4th) */
  --lane-agency-14:    rgba(182,155,232,0.14);

  /* Stage dots */
  --stage-new:        #6B7680;   /* muted slate */
  --stage-contacted:  #9CC9EE;   /* light blue */
  --stage-in_convo:   #6CACE4;   /* accent blue */
  --stage-pitched:    #3E7FB8;   /* strong blue */
  --stage-won:        #45C16A;   /* green */
  --stage-lost:       #E5564B;   /* red */

  /* Radii + shadow */
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 2px 8px rgba(0,0,0,0.30);
  --shadow-pop:  0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px var(--line);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t: 160ms cubic-bezier(0.4, 0.1, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100%; }

/* Tabular numerals via mono — applied to .num */
.num { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }

::selection { background: var(--accent-22); color: #fff; }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.09);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); background-clip: padding-box; }

/* ---- Lane chip ---- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  letter-spacing: 0.01em; white-space: nowrap;
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; }
.chip--event  { color: #A9D2F2; background: var(--lane-event-14); }
.chip--travel { color: #8FE0A8; background: var(--lane-travel-14); }
.chip--brand  { color: #F0CB8A; background: var(--lane-brand-14); }
.chip--agency { color: #D2C0F2; background: var(--lane-agency-14); }
.chip--event  .chip-dot { background: var(--lane-event); }
.chip--travel .chip-dot { background: var(--lane-travel); }
.chip--brand  .chip-dot { background: var(--lane-brand); }
.chip--agency .chip-dot { background: var(--lane-agency); }

/* ---- Stage dot ---- */
.stagedot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ---- Generic hover lift (gated by reduced motion) ---- */
@media (prefers-reduced-motion: no-preference) {
  .lift { transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t); }
  .lift:hover { transform: translateY(-1px); }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--elevated);
  color: var(--text);
  font-family: var(--font); font-size: 13px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), transform var(--t), color var(--t);
}
.btn:hover { background: var(--pressed); border-color: var(--line-strong); }
.btn:active { transform: translateY(0.5px); }
.btn--primary { background: var(--accent); border-color: transparent; color: #07121C; font-weight: 650; }
.btn--primary:hover { background: #80BBEC; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--elevated); color: var(--text); }
.btn--danger { color: #F2A39C; }
.btn--danger:hover { background: var(--red-14); border-color: rgba(229,86,75,0.3); }
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; gap: 5px; }
.btn--icon { width: 34px; padding: 0; }
.btn:disabled { opacity: 0.45; cursor: default; }

/* ---- Inputs ---- */
.input {
  height: 36px; width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text); font-family: var(--font); font-size: 13.5px;
  padding: 0 12px;
  transition: border-color var(--t), background var(--t);
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--accent-strong); background: var(--elevated); }

/* ---- Delta pills ---- */
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 650;
         padding: 2px 7px; border-radius: 999px; }
.delta--up   { color: #7DD79A; background: var(--green-14); }
.delta--down { color: #F2A39C; background: var(--red-14); }
.delta--flat { color: var(--text-2); background: rgba(255,255,255,0.05); }

/* fade/scale entrance helpers (keyframes global; gated by reduced-motion kill-switch below) */
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

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