/* =============================================================
   YOUR LIFE YOUR HOME — WARM SAGE ORGANIC PALETTE
   Quiet Luxury · Serenity · Earthy Warmth

   Palette (all greens are warm-toned, not cool/gray-green):
   --sage         #8C9E78  Warm dusty sage   (primary accent, buttons)
   --sage-dark    #5E6E4A  Warm olive depth  (hover, depth)
   --sage-deeper  #2E3D25  Deep sage espresso (header, rich depth)
   --sage-light   #B8C9A2  Pale warm sage    (light accents, chips)
   --sage-tint    #E8EFE0  Sage whisper      (section fills)
   --sage-mist    #F3F5EC  Warm near-white   (page accents)

   All warm creams, charcoal browns, and taupes are preserved.
   The green is deliberately warm-leaning (yellow-green, not blue-green)
   so it flows organically with the cream/taupe/charcoal palette.
   ============================================================= */

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --sage:         #8C9E78;
  --sage-dark:    #5E6E4A;
  --sage-deeper:  #2E3D25;
  --sage-light:   #B8C9A2;
  --sage-tint:    #E8EFE0;
  --sage-mist:    #F3F5EC;

  /* Override semantic tokens so any component using --esp gets warm sage */
  --esp:              #8C9E78;
  --esp-dark:         #5E6E4A;
  --btn-primary:      #8C9E78;
  --btn-primary-hover:#5E6E4A;
  --input-focus:      #8C9E78;
  --nav-active-bar:   #8C9E78;
  --header-bg:        linear-gradient(160deg, #364A2B 0%, #2A3C20 100%);

  /* Olive aliases (old templates reference these) */
  --olive-green:        #8C9E78;
  --olive-green-dark:   #5E6E4A;
  --olive-green-light:  #B8C9A2;
}


/* ══════════════════════════════════════════════════════════════
   SITE HEADER — deep warm sage, grounded and serene
   ══════════════════════════════════════════════════════════════ */
.site-header {
  background: linear-gradient(160deg, #364A2B 0%, #2A3C20 100%) !important;
  border-bottom: 1px solid rgba(46,61,37,0.5) !important;
  box-shadow: 0 2px 16px rgba(30,40,22,0.18) !important;
}

/* Keep brand logo soft cream */
.brand-logo { color: #F5F0EB !important; }
.brand-logo:hover { color: #ffffff !important; }

.main-nav ul li a {
  color: rgba(240,244,232,0.88) !important;
}
.main-nav ul li a:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

/* Mobile header */
@media (max-width: 768px) {
  .site-header {
    background: #2E3D25 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   PRIMARY BUTTONS — warm sage gradient
   ══════════════════════════════════════════════════════════════ */
.btn,
.btn-primary,
button[class*="btn-primary"],
.btn-premium,
input[type="submit"]:not(.crm-sf-submit) {
  background: linear-gradient(135deg, #8C9E78 0%, #5E6E4A 100%) !important;
  color: #F5F0EB !important;
}
.btn:hover,
.btn-primary:hover,
.btn-premium:hover,
input[type="submit"]:not(.crm-sf-submit):hover {
  background: linear-gradient(135deg, #5E6E4A 0%, #8C9E78 100%) !important;
  box-shadow: 0 4px 14px rgba(94,110,74,0.28) !important;
  color: #ffffff !important;
}

/* Financials / inline add buttons */
.btn-add { background: linear-gradient(135deg,#8C9E78,#5E6E4A) !important; }
.btn-add:hover { background: linear-gradient(135deg,#5E6E4A,#8C9E78) !important; }
.btn-coach { background: linear-gradient(135deg,#8C9E78,#5E6E4A) !important; }

/* Secondary — warm sage border only */
.btn-secondary,
button[class*="btn-secondary"] {
  color: #5E6E4A !important;
  border-color: rgba(140,158,120,0.4) !important;
}
.btn-secondary:hover {
  background: rgba(140,158,120,0.07) !important;
  border-color: #8C9E78 !important;
  color: #5E6E4A !important;
}

/* Gradient accent buttons */
.btn-ai,
[class*="ai-btn"],
[class*="btn-ai"] {
  background: linear-gradient(135deg, #8C9E78 0%, #B8C9A2 100%) !important;
  color: #2E3D25 !important;
}


/* ══════════════════════════════════════════════════════════════
   AGENT HORIZONTAL NAV — cream bg, warm sage accents
   ══════════════════════════════════════════════════════════════ */
.ylh-nav-title { color: #5E6E4A !important; }
.ylh-nav-title:hover { color: #5E6E4A !important; }

.ylh-nav-link,
.ylh-nav-button {
  color: #4A5A38 !important;
}
.ylh-nav-link:hover,
.ylh-nav-button:hover {
  background: rgba(140,158,120,0.08) !important;
  color: #4A5A38 !important;
  border-bottom-color: rgba(140,158,120,0.4) !important;
}
.ylh-nav-link.active,
.ylh-nav-button.active {
  background: rgba(140,158,120,0.1) !important;
  color: #3A4D2C !important;
  border-bottom-color: #8C9E78 !important;
  font-weight: 700 !important;
}

/* Dropdown */
.ylh-dropdown-item:hover {
  border-left-color: #B8C9A2 !important;
}
.ylh-dropdown-item.active {
  background: rgba(140,158,120,0.08) !important;
  border-left-color: #8C9E78 !important;
}


/* ══════════════════════════════════════════════════════════════
   LENDER / HOMEOWNER SIDEBAR — warm sage active states
   ══════════════════════════════════════════════════════════════ */
.dashboard-sidebar__title { color: #5E6E4A !important; }

.ylh-menu-button {
  color: #4A5A38 !important;
}
.ylh-menu-button:hover {
  background: rgba(140,158,120,0.06) !important;
  color: #4A5A38 !important;
  border-left-color: rgba(140,158,120,0.35) !important;
}
.ylh-menu-button.is-open {
  color: #5E6E4A !important;
  border-left-color: #8C9E78 !important;
  background: rgba(140,158,120,0.08) !important;
}

.ylh-submenu-link {
  color: #4A5A38 !important;
}
.ylh-submenu-link:hover {
  background: rgba(140,158,120,0.06) !important;
  color: #4A5A38 !important;
}
.ylh-submenu-link.active {
  background: rgba(140,158,120,0.12) !important;
  color: #5E6E4A !important;
  border-left-color: #8C9E78 !important;
}
.ylh-submenu-bullet { background: #B8C9A2 !important; }

/* Public-facing sidebar nav links */
.sidebar-nav-link { color: #4A5A38 !important; }
.sidebar-nav-link:hover { color: #4A5A38 !important; background: rgba(140,158,120,.06) !important; }
.sidebar-nav-link.active { color: #5E6E4A !important; background: rgba(140,158,120,.1) !important; border-left-color: #8C9E78 !important; }


/* ══════════════════════════════════════════════════════════════
   FORMS — warm sage focus rings
   ══════════════════════════════════════════════════════════════ */
input:focus,
select:focus,
textarea:focus,
.premium-input:focus,
.premium-select:focus {
  border-color: #8C9E78 !important;
  box-shadow: 0 0 0 3px rgba(140,158,120,0.14) !important;
}
*:focus-visible {
  outline: 2px solid rgba(140,158,120,0.5) !important;
  outline-offset: 2px !important;
}
button:focus, input:focus, select:focus, textarea:focus, a:focus {
  outline: 2px solid rgba(140,158,120,0.4) !important;
  outline-offset: 2px !important;
}


/* ══════════════════════════════════════════════════════════════
   PROGRESS & GOAL BARS
   ══════════════════════════════════════════════════════════════ */
.goal-bar-fill,
[class*="progress-fill"],
[class*="bar-fill"],
.progress-bar-fill {
  background: linear-gradient(90deg, #8C9E78, #B8C9A2) !important;
}
.progress-bar-container,
.goal-bar-bg,
[class*="progress-bg"] {
  background: rgba(140,158,120,0.12) !important;
}


/* ══════════════════════════════════════════════════════════════
   LINKS — warm sage
   ══════════════════════════════════════════════════════════════ */
a { color: #8C9E78 !important; }
a:hover { color: #5E6E4A !important; }


/* ══════════════════════════════════════════════════════════════
   FLASH / ALERT — success in warm sage
   ══════════════════════════════════════════════════════════════ */
.ylh-flash.success {
  background: rgba(140,158,120,0.1) !important;
  border-color: rgba(140,158,120,0.35) !important;
  color: #5E6E4A !important;
}
.ylh-flash.info {
  background: rgba(140,158,120,0.06) !important;
  border-color: rgba(140,158,120,0.3) !important;
  color: #5E6E4A !important;
}
.flash-success,
.alert-success {
  background: rgba(140,158,120,0.1) !important;
  border-color: rgba(140,158,120,0.3) !important;
  color: #5E6E4A !important;
}


/* ══════════════════════════════════════════════════════════════
   BADGES — active / success states
   ══════════════════════════════════════════════════════════════ */
.badge-active,
.badge-success,
.status-active,
.status-closed,
.tbl-act-green {
  color: #5E6E4A !important;
  background: rgba(140,158,120,0.12) !important;
  border-color: rgba(140,158,120,0.3) !important;
}


/* ══════════════════════════════════════════════════════════════
   ACTION / QUICK CARDS — warm sage hover
   ══════════════════════════════════════════════════════════════ */
.action-card:hover,
[class*="quick-action"]:hover {
  border-color: rgba(140,158,120,0.4) !important;
  box-shadow: 0 4px 16px rgba(140,158,120,0.1) !important;
}


/* ══════════════════════════════════════════════════════════════
   AGENT FINANCIALS overrides
   ══════════════════════════════════════════════════════════════ */
.fin-tab.active { color: #5E6E4A !important; border-bottom-color: #8C9E78 !important; }


/* ══════════════════════════════════════════════════════════════
   CRM BUTTONS — warm sage accent
   ══════════════════════════════════════════════════════════════ */
.crm-abtn,
.crm-act,
.crm-cbtn {
  border-color: rgba(140,158,120,0.4) !important;
  color: #5E6E4A !important;
}
.crm-abtn:hover,
.crm-act:hover {
  background: rgba(140,158,120,0.08) !important;
  color: #5E6E4A !important;
}


/* ══════════════════════════════════════════════════════════════
   TRANSACTION ACTION BUTTONS
   ══════════════════════════════════════════════════════════════ */
.tx-act,
.tx-btn,
.action-btn--primary {
  background: linear-gradient(135deg, #8C9E78 0%, #5E6E4A 100%) !important;
  color: #F5F0EB !important;
  border-color: transparent !important;
}
.action-btn--secondary {
  border-color: rgba(140,158,120,0.45) !important;
  color: #5E6E4A !important;
}
.action-btn--secondary:hover {
  background: rgba(140,158,120,0.08) !important;
  color: #5E6E4A !important;
}


/* ══════════════════════════════════════════════════════════════
   MISC OLIVE ALIASES
   ══════════════════════════════════════════════════════════════ */
.text-olive   { color: #8C9E78 !important; }
.bg-olive     { background: #8C9E78 !important; }
.border-olive { border-color: rgba(140,158,120,0.4) !important; }

/* Premium gradient — warm sage */
.premium-gradient,
[class*="premium-grad"] {
  background: linear-gradient(135deg, #8C9E78 0%, #B8C9A2 100%) !important;
}


/* ══════════════════════════════════════════════════════════════
   SCROLLBAR — warm sage thumb
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar-thumb { background: rgba(140,158,120,0.3); }
::-webkit-scrollbar-thumb:hover { background: rgba(140,158,120,0.5); }
* { scrollbar-color: rgba(140,158,120,0.3) transparent; }


/* ══════════════════════════════════════════════════════════════
   AGENT LAYOUT — active tab underline override
   ══════════════════════════════════════════════════════════════ */
[style*="border-bottom: 3px solid #6B5B4D"],
[style*="border-bottom:3px solid #6B5B4D"] {
  border-bottom-color: #8C9E78 !important;
}
[style*="color: #6B5B4D"],
[style*="color:#6B5B4D"] {
  color: #8C9E78 !important;
}
[style*="background: #6B5B4D"],
[style*="background:#6B5B4D"] {
  background: #8C9E78 !important;
}

.agent-sub-nav .active,
.agent-nav .active,
.fin-tab.active {
  border-bottom-color: #8C9E78 !important;
  color: #5E6E4A !important;
}


/* ══════════════════════════════════════════════════════════════
   PLATFORM-WIDE DESIGN TOKENS (ylh-* components)
   ══════════════════════════════════════════════════════════════ */
:root {
  --sage-rgb: 140, 158, 120;
}

/* ylh-hero sage gradient */
.ylh-hero {
  background: linear-gradient(135deg,
    rgba(140,158,120,0.1) 0%,
    rgba(248,244,236,0.6) 60%,
    rgba(255,255,255,0.4) 100%) !important;
  border-color: rgba(140,158,120,0.22) !important;
}
.ylh-hero__eyebrow { color: #8C9E78 !important; }

/* ylh-btn colors */
.ylh-btn-primary {
  background: #8C9E78 !important;
  box-shadow: 0 2px 8px rgba(140,158,120,0.28) !important;
}
.ylh-btn-primary:hover {
  background: #5E6E4A !important;
  box-shadow: 0 5px 14px rgba(140,158,120,0.32) !important;
}
.ylh-btn-ghost {
  background: rgba(140,158,120,0.1) !important;
  color: #5E6E4A !important;
  border-color: rgba(140,158,120,0.28) !important;
}
.ylh-btn-ghost:hover {
  background: rgba(140,158,120,0.18) !important;
}

/* ylh-ai-panel sage accent */
.ylh-ai-panel {
  background: linear-gradient(135deg,
    rgba(140,158,120,0.08) 0%,
    rgba(248,244,236,0.5) 100%) !important;
  border-color: rgba(140,158,120,0.28) !important;
  border-left-color: #8C9E78 !important;
}
.ylh-ai-panel__label { color: #8C9E78 !important; }

/* ylh-stat cards */
.ylh-stat { border-color: rgba(140,158,120,0.18) !important; }
.ylh-stat__value { color: #2E3D25 !important; }

/* ylh spinner */
.ylh-spin {
  border-color: rgba(140,158,120,0.2) !important;
  border-top-color: #8C9E78 !important;
}