/* =============================================================================
   EngageVibe Brand Re-skin (Keen-safe)
   --------------------------------------------------------------------------
   This file is loaded AFTER plugins.bundle.css and style.bundle.css.
   Its ONLY job is to recolor + retype Keen with the EngageVibe brand.
   It MUST NOT change layout, display, flex, grid, overflow, or DOM-bound
   Keen behaviors. If a rule here would shift positions or break a sticky/
   drawer/menu component, it does not belong in this file.
   ============================================================================= */

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

:root {
  /* ---- EngageVibe palette (raw) ------------------------------------------- */
  --ev-navy-900: #0B1F3A;
  --ev-navy-700: #1E3A5F;
  --ev-navy-500: #3F6390;
  --ev-navy-100: #E6ECF4;
  --ev-navy-50:  #F3F6FB;

  --ev-orange-700: #D0591E;
  --ev-orange-600: #E8722C;
  --ev-orange-500: #F59556;
  --ev-orange-100: #FEECDB;
  --ev-orange-50:  #FFF6EE;

  --ev-green-800: #166B45;
  --ev-green-700: #1F8A5C;
  --ev-green-100: #DFF5E6;
  --ev-green-50:  #F0FAF3;

  --ev-cream:    #FBF8F3;
  --ev-offwhite: #F5F1EA;
  --ev-sand-200: #E6E0D4;

  --ev-danger: #C7443A;

  /* ---- Fonts -------------------------------------------------------------- */
  --ev-font-display: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --ev-font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --ev-font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---- Bootstrap variable overrides — Keen reads these too --------------- */
  --bs-primary: var(--ev-orange-600);
  --bs-primary-rgb: 232, 114, 44;
  --bs-primary-text-emphasis: var(--ev-orange-700);
  --bs-primary-bg-subtle: var(--ev-orange-100);
  --bs-primary-border-subtle: #FCC9A3;

  --bs-success: var(--ev-green-700);
  --bs-success-rgb: 31, 138, 92;
  --bs-success-text-emphasis: var(--ev-green-800);
  --bs-success-bg-subtle: var(--ev-green-100);

  --bs-danger: var(--ev-danger);
  --bs-danger-rgb: 199, 68, 58;

  --bs-warning: var(--ev-orange-600);
  --bs-warning-rgb: 232, 114, 44;

  --bs-info: var(--ev-navy-700);
  --bs-info-rgb: 30, 58, 95;

  --bs-body-font-family: var(--ev-font-body);
  --bs-body-color: var(--ev-navy-900);
  --bs-body-color-rgb: 11, 31, 58;
  --bs-emphasis-color: var(--ev-navy-900);

  --bs-link-color: var(--ev-navy-700);
  --bs-link-color-rgb: 30, 58, 95;
  --bs-link-hover-color: var(--ev-orange-700);
  --bs-link-hover-color-rgb: 208, 89, 30;
}

/* =============================================================================
   Typography — apply EV display font to headings, body font to text
   (Targeted overrides only — no layout side-effects.)
   ============================================================================= */

body,
.text-body, .form-control, .form-select, .input-group-text,
.dropdown-menu, .menu, .menu-link, .menu-title,
.btn, .nav-link, .breadcrumb, .badge {
  font-family: var(--ev-font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .card-label,
.page-title h1, .page-title .h1,
.fs-2hx, .fs-3x, .fs-2x {
  font-family: var(--ev-font-display);
  letter-spacing: -0.015em;
}

.text-monospace, .ki-outline, code, pre, kbd {
  /* Keen icons live on .ki-outline via @font-face; do NOT change that.
     Only the textual code/kbd elements get the mono brand font. */
}
code, pre, kbd, samp, .text-monospace {
  font-family: var(--ev-font-mono);
}

/* =============================================================================
   Brand color repaint — primary buttons, badges, accents
   Keen compiles its own primary color; these rules paint over it.
   ============================================================================= */

/* ---- Primary button ---- */
.btn-primary {
  background-color: var(--ev-orange-600) !important;
  border-color: var(--ev-orange-600) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary {
  background-color: var(--ev-orange-700) !important;
  border-color: var(--ev-orange-700) !important;
  color: #fff !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--ev-orange-500) !important;
  border-color: var(--ev-orange-500) !important;
  opacity: 0.65;
}

/* Keen-specific primary button variants */
.btn-light-primary {
  background-color: var(--ev-orange-100) !important;
  color: var(--ev-orange-700) !important;
  border-color: transparent !important;
}
.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-primary:active,
.btn-active-light-primary:hover,
.btn-active-light-primary.active,
.btn-active-color-primary:hover {
  background-color: var(--ev-orange-600) !important;
  color: #fff !important;
}

/* Outline primary */
.btn-outline-primary,
.btn-flush.btn-outline-primary {
  color: var(--ev-orange-600) !important;
  border-color: var(--ev-orange-600) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--ev-orange-600) !important;
  color: #fff !important;
}

/* ---- Success button (EV green) ---- */
.btn-success {
  background-color: var(--ev-green-700) !important;
  border-color: var(--ev-green-700) !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: var(--ev-green-800) !important;
  border-color: var(--ev-green-800) !important;
}
.btn-light-success {
  background-color: var(--ev-green-100) !important;
  color: var(--ev-green-700) !important;
}

/* ---- Text helpers ---- */
.text-primary,
.text-primary i {
  color: var(--ev-orange-600) !important;
}
.text-hover-primary:hover,
.text-hover-primary:hover i,
a.text-hover-primary:hover,
a.text-hover-primary:hover i {
  color: var(--ev-orange-700) !important;
}
.text-success { color: var(--ev-green-700) !important; }
.text-danger  { color: var(--ev-danger) !important; }

/* ---- Badges ---- */
.badge-light-primary {
  background-color: var(--ev-orange-100) !important;
  color: var(--ev-orange-700) !important;
}
.badge-light-success {
  background-color: var(--ev-green-100) !important;
  color: var(--ev-green-700) !important;
}
.badge-light-danger {
  background-color: rgba(199, 68, 58, 0.10) !important;
  color: var(--ev-danger) !important;
}
.badge-light-warning {
  background-color: var(--ev-orange-100) !important;
  color: var(--ev-orange-700) !important;
}
.bg-light-primary { background-color: var(--ev-orange-100) !important; }
.bg-light-success { background-color: var(--ev-green-100) !important; }

/* ---- Solid backgrounds (used by chips/illustrations) ---- */
.bg-primary  { background-color: var(--ev-orange-600) !important; color: #fff !important; }
.bg-success  { background-color: var(--ev-green-700) !important; color: #fff !important; }
.text-inverse-primary { color: #fff !important; }
.text-inverse-success { color: #fff !important; }

/* ---- Form focus ring — orange instead of Keen blue ---- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--ev-orange-500) !important;
  box-shadow: 0 0 0 0.2rem rgba(232, 114, 44, 0.18) !important;
}
.form-check-input:checked {
  background-color: var(--ev-orange-600) !important;
  border-color: var(--ev-orange-600) !important;
}

/* ---- Sidebar active state (Keen menu) — soft navy-tinted neutral ---- */
.menu-state-bg-light-primary .menu-item .menu-link.active,
.menu-state-bg-light-primary .menu-item.show > .menu-link,
.menu .menu-item .menu-link.active {
  background-color: var(--ev-navy-100) !important;
  color: var(--ev-navy-900) !important;
}
.menu .menu-item .menu-link.active .menu-icon i,
.menu .menu-item .menu-link.active .menu-title {
  color: var(--ev-navy-900) !important;
}

/* ---- Header / branding accents ---- */
.fs-4.fw-bold.text-primary,
.app-sidebar-header .text-primary {
  color: var(--ev-orange-600) !important;
}

/* ---- Alerts ---- */
.alert-primary {
  background-color: var(--ev-orange-50) !important;
  border-color: var(--ev-orange-200, #FEDCC0) !important;
  color: var(--ev-orange-800, #A84613) !important;
}
.alert-success {
  background-color: var(--ev-green-50) !important;
  border-color: var(--ev-green-200, #BCEBCE) !important;
  color: var(--ev-green-800) !important;
}

/* ---- Progress / bullets ---- */
.bg-success-rgb-progress { background: var(--ev-green-700) !important; }
.bullet.bg-success { background-color: var(--ev-green-700) !important; }
.bullet.bg-primary { background-color: var(--ev-orange-600) !important; }
.bullet.bg-warning { background-color: var(--ev-orange-500) !important; }

/* ---- Tabs / nav-pills active ---- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--ev-orange-600) !important;
  color: #fff !important;
}
.nav-link.active .nav-text { color: var(--ev-orange-700) !important; }

/* ---- Bullet underline on Keen "stats widget 2" tabs ---- */
.nav-pills-custom .nav-link.active .bullet-custom,
.nav-pills .nav-link.active .bullet-custom {
  background-color: var(--ev-orange-600) !important;
}

/* ---- Symbol label primary tone ---- */
.symbol-label.bg-primary,
.symbol-label.bg-light-primary {
  background-color: var(--ev-orange-600) !important;
  color: #fff !important;
}

/* =============================================================================
   That's it — no display/position/overflow/flex changes.
   Keen DOM and JS run untouched; only colors and fonts shift.
   ============================================================================= */