/* ═══════════════════════════════════════════════════════════════════
   VELTRIX OS — Theme & Design Tokens
   Edit this file only to change any color, font, or spacing
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND COLORS ─── */
  --brand-primary:    #534AB7;   /* VELTRIX Purple */
  --brand-primary-2:  #7B6FD4;   /* Lighter purple */
  --brand-accent:     #C86230;   /* CTA Orange accent */
  --brand-dark:       #1A1916;   /* Deep charcoal */
  --brand-gold:       #D4A847;   /* Accent gold */

  /* ─── BACKGROUND (Light Mode) ─── */
  --bg:               #F7F6F2;
  --bg-2:             #EEECEA;
  --surface:          #FFFFFF;
  --surface-2:        #F3F1ED;

  /* ─── BORDERS ─── */
  --border:           #E5E2DB;
  --border-2:         #D8D4CC;

  /* ─── TEXT ─── */
  --text:             #18170F;
  --text-2:           #5C5849;
  --text-3:           #A09A8F;

  /* ─── ACCENT BACKGROUNDS ─── */
  --acc-bg:           #FEF1E8;
  --acc-light:        #FEF8F4;

  /* ─── SEMANTIC COLORS ─── */
  --green:            #2A7A50;
  --green-bg:         #EAF5EE;
  --green-light:      #F3FAF5;
  --red:              #C13B2E;
  --red-bg:           #FDECEA;
  --red-light:        #FEF6F5;
  --amber:            #A06B10;
  --amber-bg:         #FEF6E0;
  --amber-light:      #FFFBF0;
  --blue:             #1A5FA0;
  --blue-bg:          #E8F0FA;
  --blue-light:       #F3F7FD;

  /* ─── RADIUS ─── */
  --r-sm:             6px;
  --r-md:             10px;
  --r-lg:             14px;
  --r-xl:             18px;

  /* ─── SHADOWS ─── */
  --sh-sm:            0 1px 2px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --sh-md:            0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --sh-lg:            0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);

  /* ─── LAYOUT ─── */
  --sidebar-w:        240px;
  --topbar-h:         56px;

  /* ─── FONTS ─── */
  --font-display:     'Sora', -apple-system, sans-serif;
  --font-body:        'DM Sans', -apple-system, sans-serif;
  --font-mono:        'JetBrains Mono', monospace;

  /* ─── TRANSITIONS ─── */
  --t-fast:           0.12s ease;
  --t-base:           0.2s ease;
  --t-slow:           0.4s ease;

  /* ─── ALIASES (compatibility) ─── */
  --text-1:           #18170F;     /* same as --text */
  --brand-bg:         #FEF1E8;     /* same as --acc-bg */
  --primary:          #1A5FA0;     /* same as --blue */
  --primary-bg:       #E8F0FA;
  --danger:           #C13B2E;     /* same as --red */
  --danger-bg:        #FDECEA;
  --warning:          #A06B10;     /* same as --amber */
  --warning-bg:       #FEF6E0;
  --success:          #2A7A50;     /* same as --green */
  --success-bg:       #EAF5EE;
  --muted:            #A09A8F;     /* same as --text-3 */
  --indigo:           #4F46E5;
  --indigo-bg:        #EEF2FF;
  --violet:           #7C3AED;
  --violet-bg:        #F5F3FF;

  /* ─── 2035 DESIGN TOKENS ─── */
  --transition-fast:   0.12s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.4s ease;
  --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-sm:         0 1px 3px rgba(0,0,0,.08);
  --shadow-md:         0 4px 12px rgba(0,0,0,.10);
  --shadow-lg:         0 8px 24px rgba(0,0,0,.12);
  --shadow-xl:         0 16px 48px rgba(0,0,0,.16);
  --shadow-brand:      0 4px 20px rgba(83,74,183,.28);

  --glass-bg:          rgba(255,255,255,.72);
  --glass-border:      rgba(255,255,255,.35);
  --glass-blur:        blur(16px);

  --info:              #1A5FA0;
  --info-bg:           #E8F0FA;

  --radius-sm:         6px;
  --radius-md:         10px;
  --radius-lg:         14px;
  --radius-xl:         18px;
  --radius-full:       9999px;

  /* Part 8 aliases */
  --brand:             var(--brand-primary);
  --surface-3:         var(--surface-2);

  /* ── Universal Compatibility Aliases ──────────────────────────────
     Many modules use non-standard variable names. These aliases map
     them to the correct VELTRIX OS tokens so every page looks right.
  ── */

  /* Text */
  --text-primary:      #18170F;   /* = --text */
  --text-secondary:    #5C5849;   /* = --text-2 */
  --text-muted:        #A09A8F;   /* = --text-3 */
  --text2:             #5C5849;
  --text3:             #A09A8F;
  --foreground:        #18170F;

  /* Surfaces / cards */
  --surface-1:         #FFFFFF;   /* = --surface */
  --card:              #FFFFFF;
  --card-bg:           #FFFFFF;
  --canvas:            #F7F6F2;   /* = --bg */
  --page-bg:           #F7F6F2;
  --body-bg:           #F7F6F2;

  /* Glass (light mode = slightly translucent white) */
  --glass:             rgba(255,255,255,0.85);
  --glass2:            rgba(255,255,255,0.65);
  --glass-bg:          rgba(255,255,255,0.72);
  --glass-border:      rgba(255,255,255,0.35);

  /* Borders */
  --bord-b:            #E5E2DB;
  --border-color:      #E5E2DB;

  /* Colors */
  --purple:            #534AB7;
  --violet-color:      #7C3AED;
  --cos-primary:       #534AB7;
  --cos-secondary:     #7B6FD4;
  --cos-dark:          #3D3590;
  --cos-cyan:          #1A5FA0;
  --cos-pink:          #ec4899;
  --cos-gradient:      linear-gradient(135deg,#534AB7,#7B6FD4);
  --ie-purple:         #534AB7;
  --oc-purple:         #534AB7;
  --oc-orange:         #C86230;
  --vrl-purple:        #534AB7;
  --ia-purple:         #534AB7;
  --clr:               #534AB7;
  --jd-orange:         #C86230;
  --burn-orange:       #C86230;
  --wa-dark:           #075e54;
  --wh-teal:           #128c7e;
  --vrl-yt:            #ff0000;
  --vrl-li:            #0077b5;
  --brand-b:           #1A5FA0;
  --brand-g:           #2A7A50;
  --brand-glow:        rgba(83,74,183,0.28);

  /* Radius compatibility */
  --radius:            10px;
  --r:                 10px;

  /* Orange accent (for cream+white+orange theme) */
  --accent:            #C86230;
  --accent-bg:         #FEF1E8;
  --orange:            #C86230;
  --orange-bg:         #FEF1E8;
}

/* ═══ DARK MODE ═══ */
[data-theme="dark"] {
  --bg:               #0F0E0B;
  --bg-2:             #171612;
  --surface:          #1C1B17;
  --surface-2:        #232219;

  --border:           #2C2B24;
  --border-2:         #3A382F;

  --text:             #F2EFE6;
  --text-2:           #A8A398;
  --text-3:           #6A6660;

  --brand-primary:    #6B5FCC;
  --brand-primary-2:  #8B7FE0;
  --acc-bg:           #281808;
  --acc-light:        #1E1208;

  --green:            #3DA068;
  --green-bg:         #0A2018;
  --green-light:      #0D2A1D;
  --red:              #E05040;
  --red-bg:           #280C0A;
  --red-light:        #200A08;
  --amber:            #D49020;
  --amber-bg:         #281A04;
  --amber-light:      #1E1404;
  --blue:             #4A8AD0;
  --blue-bg:          #0A1A28;
  --blue-light:       #0C1E30;

  --sh-sm:            0 1px 2px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
  --sh-md:            0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3);
  --sh-lg:            0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);

  /* dark mode aliases */
  --text-1:           #F2EFE6;
  --brand-bg:         #281808;
  --primary:          #4A8AD0;
  --primary-bg:       #0A1A28;
  --danger:           #E05040;
  --danger-bg:        #280C0A;
  --warning:          #D49020;
  --warning-bg:       #281A04;
  --success:          #3DA068;
  --success-bg:       #0A2018;
  --muted:            #6A6660;
  --indigo:           #818CF8;
  --indigo-bg:        #1E1B40;
  --violet:           #A78BFA;
  --violet-bg:        #1E1A30;

  /* dark mode 2035 overrides */
  --glass-bg:          rgba(20,20,18,.78);
  --glass-border:      rgba(255,255,255,.08);
  --shadow-brand:      0 4px 20px rgba(83,74,183,.45);
  --info:              #4A8AD0;
  --info-bg:           #0A1A28;

  /* Dark mode compatibility aliases */
  --text-primary:      #F2EFE6;
  --text-secondary:    #A8A398;
  --text-muted:        #6A6660;
  --text2:             #A8A398;
  --text3:             #6A6660;
  --foreground:        #F2EFE6;
  --surface-1:         #1C1B17;
  --card:              #1C1B17;
  --card-bg:           #1C1B17;
  --canvas:            #0F0E0B;
  --page-bg:           #0F0E0B;
  --body-bg:           #0F0E0B;
  --glass:             rgba(28,27,23,0.85);
  --glass2:            rgba(28,27,23,0.65);
  --border-color:      #2C2B24;
  --bord-b:            #2C2B24;
  --accent:            #D4834A;
  --accent-bg:         #281808;
  --orange:            #D4834A;
  --orange-bg:         #281808;
  --surface-3:         #2A2920;
}

/* CRM3 — Futuristic Features CSS */
.crm3-emotion-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  animation: crm3FadeIn 0.3s ease;
}
@keyframes crm3FadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.crm3-prob-ring {
  transition: stroke-dasharray 1s ease;
}
.crm3-kanban-ghost {
  opacity: 0.4;
  background: rgba(83,74,183,0.1) !important;
  border: 2px dashed #534AB7 !important;
}
.crm3-pulse {
  animation: crm3PulseAnim 2s infinite;
}
@keyframes crm3PulseAnim {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
@media (max-width: 768px) {
  #crm3-reengage-output {
    width: 95% !important;
    max-height: 80vh !important;
  }
}
/* END CRM3 CSS */

/* CRM4 — Visibility & Layout Fixes */
.crm4-view-toggle {
  display: flex;
  gap: 4px;
  align-items: center;
}
.crm4-aging-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.crm4-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.crm2-kanban-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: box-shadow var(--t-fast);
}
.crm2-kanban-card:hover {
  box-shadow: var(--sh-sm);
}
.crm2-sr-container {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
@media (max-width: 600px) {
  .crm2-action-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  .crm2-sr-container {
    width: 100%;
  }
  .crm4-view-toggle {
    width: 100%;
    justify-content: flex-end;
  }
  #crm4-list-btn,
  #crm4-kanban-btn {
    flex: 1;
    justify-content: center;
  }
}
/* END CRM4 CSS */

/* Kanban view */
#crm2-kanban-view { display: block !important; min-height: 200px; overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════
   VELTRIX UI POLISH — Global polish layer v2.0
   ══════════════════════════════════════════════════════════════════ */

/* ── PAGE TRANSITION ── */
.content {
  animation: vxPageEnter 0.28s ease both;
}
@keyframes vxPageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CARD HOVER EFFECTS ── */
.card,
.metric-card,
.stat-card,
.feat-card,
.plugin-card,
.biz-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover,
.metric-card:hover,
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* ── EMPTY STATE ── */
.vx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 10px;
}
.vx-empty-icon { font-size: 48px; opacity: .7; }
.vx-empty-title { font-size: 15px; font-weight: 600; color: var(--text-2,#5C5849); }
.vx-empty-sub   { font-size: 13px; color: var(--text-3,#A09A8F); }
.vx-empty-cta   { margin-top: 6px; }

/* ── TOAST / SNACKBAR ── */
.vx-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface, #1C1B17);
  border: 1px solid var(--border, #2C2B24);
  color: var(--text, #F2EFE6);
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  display: none;
  max-width: 340px;
  animation: toastIn 0.2s ease;
}
.vx-toast.show { display: flex; align-items: center; gap: 8px; }
.vx-toast.ok   { border-color: rgba(42,122,80,.4); }
.vx-toast.err  { border-color: rgba(193,59,46,.4); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  .vx-toast { bottom: 76px; right: 12px; left: 12px; max-width: unset; }
}

/* ── SKELETON LOADING ── */
.vx-skeleton {
  background: linear-gradient(90deg, var(--surface,#1C1B17) 25%, var(--surface-2,#232219) 50%, var(--surface,#1C1B17) 75%);
  background-size: 200% 100%;
  animation: vxSkeletonShimmer 1.4s infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
}
@keyframes vxSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── BUTTON CONSISTENCY ── */
.btn-primary {
  background: var(--brand-primary, #534AB7) !important;
  color: #fff !important;
  border-color: var(--brand-primary, #534AB7) !important;
  border-radius: 8px;
}
.btn-primary:hover {
  background: var(--brand-primary-2, #7B6FD4) !important;
  border-color: var(--brand-primary-2, #7B6FD4) !important;
}
.btn-secondary {
  background: transparent !important;
  color: var(--brand-primary, #534AB7) !important;
  border: 1px solid var(--brand-primary, #534AB7) !important;
  border-radius: 8px;
}
.btn-danger,
.btn-destructive {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
  border-radius: 8px;
}
.btn-accent {
  background: #C86230 !important;
  color: #fff !important;
  border-color: #C86230 !important;
  border-radius: 8px;
}
.btn { border-radius: 8px; padding: 8px 16px; min-height: 36px; }
.btn-sm { padding: 5px 12px; min-height: 30px; border-radius: 6px; }

/* ── SIDEBAR ACTIVE STATE ── */
.sb-item.active {
  background: rgba(83,74,183,.12);
  color: #534AB7;
}
.sb-item.active .sb-icon { color: #534AB7; }

/* ── CONSISTENT FORM FOCUS ── */
.form-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-primary, #534AB7) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(83,74,183,.15);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border, #2C2B24); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3, #6A6660); }

/* ── LINK DEFAULT ── */
.sb-item { text-decoration: none; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 7px; font-size: 13px; color: var(--text-2); transition: background .12s, color .12s; cursor: pointer; }
.sb-item:hover { background: var(--surface-2); color: var(--text); }
.sb-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }