/* =============================================================
   YOUR LIFE YOUR HOME — LUXURY PALETTE SYSTEM
   Warm Taupe · Soft Cream · Misty Greige · Warm Gray · Espresso
   Applied: March 2026
   ============================================================= */

/*
  ══════════════════════════════════════════════════════════
  YOUR LIFE YOUR HOME — FINAL LUXURY PALETTE
  Golden · Flax · Rose · Sage · Firewood
  Redesigned for elegance + WCAG AA readability
  ══════════════════════════════════════════════════════════

  USAGE RULES (read before editing):
  • Firewood #443c36 — ALL body text, headings. 8.5:1 on white. ✓
  • Text-mid  #5c4e42 — Secondary text / subtitles. 6.2:1 on white. ✓
  • Text-muted #7a6855 — Captions, labels. 4.7:1 on white. ✓ (WCAG AA)
  • Golden #9f815a — Borders, icons, accent bars, BUTTON BACKGROUNDS only.
                     3.4:1 — NOT for body text.
  • Rose #c69270   — Decorative fills, accent cards, hover tints. NOT text.
  • Sage #8b6773   — Badge fills, subtle decorative accents. NOT text.
  • Flax #dbd4c2   — Card fills, sidebar bg, section dividers.
  • Page bg #faf8f4 — Near-white warm base. Firewood text = 8:1 ✓
  ══════════════════════════════════════════════════════════
*/

:root {
  /* ── Brand palette ── */
  --golden:       #9f815a;  /* Golden    — accents, borders, button bg    */
  --golden-dark:  #8a6e4a;  /* Golden dk — button hover                   */
  --golden-deep:  #6d5438;  /* Golden deep — high-contrast accent text    */
  --rose:         #c69270;  /* Rose      — warm fills, card accents        */
  --rose-dark:    #a87558;  /* Rose dark — decorative shadows              */
  --sage:         #8b6773;  /* Sage/mauve — badge fills, tag accents       */
  --flax:         #dbd4c2;  /* Flax      — soft fills, dividers            */
  --flax-light:   #f0ebe0;  /* Flax lt   — section fills                  */
  --firewood:     #443c36;  /* Firewood  — primary text + dark bg          */
  --firewood-dk:  #3a332d;  /* Firewood dk — header, deep shadows         */

  /* ── Readable text scale ── */
  --text-primary: #443c36;  /* 8.5:1 on white ✓ */
  --text-mid:     #5c4e42;  /* 6.2:1 on white ✓ */
  --text-muted:   #7a6855;  /* 4.7:1 on white ✓ */
  --text-faint:   #9a8878;  /* 3.2:1 — labels/placeholders only */

  /* ── Semantic aliases (keep templates working) ── */
  --esp:               #9f815a;
  --esp-dark:          #8a6e4a;
  --esp-deeper:        #443c36;
  --taupe:             #c69270;
  --cream:             #dbd4c2;
  --cream-light:       #f0ebe0;
  --greige:            #e8e2d6;
  --stone:             #c8b89a;
  --wgray:             #7a6855;
  --olive-green:       #9f815a;
  --olive-green-dark:  #8a6e4a;
  --olive-green-light: #c8a87a;
  --taupe-beige:       #c69270;
  --warm-cream:        #dbd4c2;
  --beige-light:       #e8e2d6;
  --charcoal-brown:    #443c36;
  --warm-gray:         #7a6855;
  --light-cream:       #f0ebe0;

  /* ── Component tokens ── */
  --nav-bg:             linear-gradient(135deg, #f5f0e6 0%, #ede7d8 100%);
  --nav-border:         rgba(159,129,90,0.2);
  --nav-active-bar:     #9f815a;
  --card-bg:            #ffffff;
  --card-border:        rgba(159,129,90,0.16);
  --btn-primary:        #443c36;
  --btn-primary-hover:  #3a332d;
  --input-border:       rgba(159,129,90,0.32);
  --input-focus:        #9f815a;
  --badge-bg:           rgba(159,129,90,0.1);
  --flash-success-bg:   rgba(159,129,90,0.1);
  --flash-error-bg:     rgba(160,65,61,0.1);
  --header-bg:          linear-gradient(160deg, #443c36 0%, #3a332d 100%);
}


/* ── GLOBAL BODY & BACKGROUND ── */
body {
  background-color: #faf8f4 !important;
  color: #443c36 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}


/* ══════════════════════════════════════════════════════════════
   SITE HEADER — top bar (Home · Dashboard · Sign Out)
   ══════════════════════════════════════════════════════════════ */
.site-header {
  background: linear-gradient(160deg, #443c36 0%, #3a332d 100%) !important;
  border-bottom: 1px solid rgba(68,60,54,0.5) !important;
  box-shadow: 0 2px 14px rgba(58,51,45,0.22) !important;
}

.brand-logo {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #f0ebe0 !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.03em !important;
  opacity: 0.95 !important;
  text-decoration: none !important;
}
.brand-logo:hover { opacity: 1 !important; color: #fff !important; }

.main-nav ul li a {
  color: rgba(245,240,235,0.85) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.45rem 0.9rem !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.main-nav ul li a:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}


/* ══════════════════════════════════════════════════════════════
   FLASH MESSAGES
   ══════════════════════════════════════════════════════════════ */
.ylh-flash {
  border-radius: 10px !important;
  padding: 0.85rem 1.2rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin: 0.5rem 1.5rem !important;
  border: 1px solid transparent !important;
}
.ylh-flash.success {
  background: rgba(159,129,90,0.1) !important;
  border-color: rgba(194,177,161,0.5) !important;
  color: #5c4e42 !important;
}
.ylh-flash.error {
  background: rgba(160,65,61,0.08) !important;
  border-color: rgba(160,65,61,0.25) !important;
  color: #8B3532 !important;
}
.ylh-flash.warning {
  background: rgba(184,134,11,0.08) !important;
  border-color: rgba(184,134,11,0.25) !important;
  color: #7a5800 !important;
}
.ylh-flash.info {
  background: rgba(159,129,90,0.07) !important;
  border-color: rgba(181,168,153,0.4) !important;
  color: #5c4e42 !important;
}


/* ══════════════════════════════════════════════════════════════
   CARDS — universal card component
   Only targets explicit .card / .card-premium — does NOT wildcard
   all [class*="card"] so custom dark/colored cards keep their backgrounds
   ══════════════════════════════════════════════════════════════ */
.card,
.card-premium,
.feature-card {
  background: #FFFFFF;
  border: 1px solid rgba(211,198,184,0.45) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(159,129,90,0.06) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.card:hover,
.card-premium:hover,
.feature-card:hover {
  box-shadow: 0 5px 16px rgba(159,129,90,0.1) !important;
  transform: translateY(-1px) !important;
}


/* ══════════════════════════════════════════════════════════════
   BUTTONS — primary / secondary / ghost
   ══════════════════════════════════════════════════════════════ */
.btn,
.btn-primary,
button[class*="btn-primary"],
.btn-premium,
input[type="submit"]:not(.crm-sf-submit) {
  background: #9f815a !important;
  color: #f0ebe0 !important;
  border: none !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
  cursor: pointer !important;
}
.btn:hover,
.btn-primary:hover,
.btn-premium:hover,
input[type="submit"]:not(.crm-sf-submit):hover {
  background: #8a6e4a !important;
  box-shadow: 0 4px 14px rgba(159,129,90,0.28) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.btn:active,
.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.btn-secondary,
button[class*="btn-secondary"] {
  background: transparent !important;
  color: #5c4e42 !important;
  border: 1.5px solid rgba(159,129,90,0.5) !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.btn-secondary:hover {
  background: rgba(159,129,90,0.06) !important;
  border-color: #9f815a !important;
  color: #5c4e42 !important;
}

/* AI/Gradient buttons */
.btn-ai,
[class*="ai-btn"],
[class*="btn-ai"] {
  background: linear-gradient(135deg, #9f815a 0%, #8B7B6B 100%) !important;
  color: #fff !important;
  border: none !important;
}


/* ══════════════════════════════════════════════════════════════
   FORMS — inputs, selects, textareas
   ══════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea,
.premium-input,
.premium-select,
.premium-textarea {
  border: 1.5px solid rgba(181,168,153,0.5) !important;
  border-radius: 9px !important;
  background: #FDFAF7 !important;
  color: #443c36 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  font-family: inherit !important;
}
input:focus,
select:focus,
textarea:focus,
.premium-input:focus,
.premium-select:focus {
  border-color: #9f815a !important;
  box-shadow: 0 0 0 3px rgba(159,129,90,0.12) !important;
  background: #fff !important;
  outline: none !important;
}
input::placeholder,
textarea::placeholder {
  color: #7a6855 !important;
  opacity: 0.8 !important;
}

label,
.form-label,
.premium-label {
  color: #443c36 !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}


/* ══════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════ */
table {
  border-collapse: collapse !important;
}
thead th {
  background: rgba(233,228,216,0.6) !important;
  color: #7a6855 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.65rem 0.9rem !important;
  border-bottom: 1px solid rgba(211,198,184,0.5) !important;
}
tbody tr {
  border-bottom: 1px solid rgba(211,198,184,0.2) !important;
  transition: background 0.15s ease !important;
}
tbody tr:hover { background: rgba(233,228,216,0.3) !important; }
tbody td {
  padding: 0.8rem 0.9rem !important;
  color: #443c36 !important;
  font-size: 0.865rem !important;
}
tbody tr:last-child { border-bottom: none !important; }


/* ══════════════════════════════════════════════════════════════
   BADGES / STATUS PILLS
   ══════════════════════════════════════════════════════════════ */
.badge,
[class*="badge"],
[class*="status-"] {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border-radius: 20px !important;
  padding: 0.22rem 0.6rem !important;
}


/* ══════════════════════════════════════════════════════════════
   AGENT HORIZONTAL NAV
   ══════════════════════════════════════════════════════════════ */
.ylh-horizontal-nav {
  background: linear-gradient(135deg, #F0EBE4 0%, #dbd4c2 100%) !important;
  border-bottom: 1.5px solid rgba(211,198,184,0.55) !important;
  box-shadow: 0 2px 10px rgba(159,129,90,0.07) !important;
}

.ylh-nav-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #443c36 !important;
  font-weight: 400 !important;
  letter-spacing: 0.025em !important;
}
.ylh-nav-title:hover { color: #3a332d !important; }

.ylh-nav-link,
.ylh-nav-button {
  color: #5c4e42 !important;
  font-weight: 500 !important;
  letter-spacing: 0.055em !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.22s ease !important;
}
.ylh-nav-link:hover,
.ylh-nav-button:hover {
  background: rgba(159,129,90,0.08) !important;
  color: #443c36 !important;
  border-bottom-color: rgba(194,177,161,0.6) !important;
}
.ylh-nav-link.active,
.ylh-nav-button.active {
  background: rgba(159,129,90,0.1) !important;
  color: #443c36 !important;
  border-bottom-color: #c8a87a !important;
  font-weight: 600 !important;
}

/* Dropdown menu */
.ylh-dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid rgba(211,198,184,0.55) !important;
  box-shadow: 0 10px 30px rgba(159,129,90,0.12) !important;
  border-radius: 0 0 12px 12px !important;
}
.ylh-dropdown-item {
  color: #443c36 !important;
  border-left: 3px solid transparent !important;
  font-size: 0.85rem !important;
  transition: all 0.18s ease !important;
}
.ylh-dropdown-item:hover {
  background: #faf8f4 !important;
  border-left-color: #c8a87a !important;
  padding-left: 1.75rem !important;
}
.ylh-dropdown-item.active {
  background: rgba(194,177,161,0.12) !important;
  border-left-color: #9f815a !important;
  font-weight: 600 !important;
}

/* Admin & Upgrade pill buttons in nav */
.ylh-nav-link[style*="667eea"],
.ylh-nav-link[href*="admin"] {
  background: linear-gradient(135deg, rgba(159,129,90,0.12) 0%, rgba(90,74,60,0.08) 100%) !important;
  border-radius: 6px !important;
  border-bottom: 3px solid #9a8878 !important;
  color: #443c36 !important;
}
.ylh-nav-link[style*="b8973a"],
.ylh-nav-link[href*="subscription"] {
  background: linear-gradient(135deg, rgba(194,177,161,0.2) 0%, rgba(194,177,161,0.1) 100%) !important;
  border-radius: 6px !important;
  border-bottom: 3px solid #c8a87a !important;
  color: #5c4e42 !important;
}


/* ══════════════════════════════════════════════════════════════
   LENDER SIDEBAR
   ══════════════════════════════════════════════════════════════ */
.dashboard-container {
  background: #faf8f4 !important;
}

.dashboard-sidebar {
  background: linear-gradient(180deg, #F0EBE4 0%, #EDE8DF 100%) !important;
  border-right: 1px solid rgba(211,198,184,0.45) !important;
  box-shadow: 2px 0 12px rgba(159,129,90,0.05) !important;
}

.dashboard-sidebar__header {
  padding: 1.5rem 1.4rem 1rem !important;
  border-bottom: 1px solid rgba(211,198,184,0.4) !important;
}

.dashboard-sidebar__title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #443c36 !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 0.2rem !important;
}

.dashboard-sidebar__subtitle {
  color: #7a6855 !important;
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.ylh-menu-button {
  background: none !important;
  border: none !important;
  color: #5c4e42 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 0.85rem 1.4rem !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-left: 3px solid transparent !important;
}
.ylh-menu-button:hover {
  background: rgba(159,129,90,0.06) !important;
  color: #443c36 !important;
  border-left-color: rgba(194,177,161,0.5) !important;
}
.ylh-menu-button.is-open {
  color: #443c36 !important;
  border-left-color: #c8a87a !important;
  background: rgba(159,129,90,0.07) !important;
}

.ylh-submenu {
  background: rgba(255,255,255,0.4) !important;
  border-left: none !important;
}

.ylh-submenu-link {
  color: #5c4e42 !important;
  font-size: 0.83rem !important;
  padding: 0.6rem 1.4rem 0.6rem 2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
  border-left: 3px solid transparent !important;
}
.ylh-submenu-link:hover {
  background: rgba(159,129,90,0.07) !important;
  color: #443c36 !important;
  padding-left: 2.25rem !important;
}
.ylh-submenu-link.active {
  background: rgba(194,177,161,0.15) !important;
  color: #443c36 !important;
  font-weight: 600 !important;
  border-left-color: #c8a87a !important;
}

.ylh-submenu-bullet {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #c8a87a !important;
  flex-shrink: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   DASHBOARD MAIN CONTENT AREA
   ══════════════════════════════════════════════════════════════ */
.dashboard-main {
  background: #faf8f4 !important;
}

.dashboard-main__header {
  background: transparent !important;
}

.dashboard-main__header h1,
.dashboard-main__header .dashboard-tagline + h1 {
  color: #443c36 !important;
}

/* Stat cards / KPI cards */
.stat-card,
.kpi-card,
.stats-card,
[class*="stat-card"],
[class*="kpi-"] {
  background: #fff !important;
  border: 1px solid rgba(211,198,184,0.4) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(159,129,90,0.06) !important;
}

.card-value,
[class*="card-value"] {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #443c36 !important;
}

.card-label,
.card-title,
[class*="card-label"] {
  color: #7a6855 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}


/* ══════════════════════════════════════════════════════════════
   AI PANELS — Financials Hub, Concierge, Marketing Hub, etc.
   ══════════════════════════════════════════════════════════════ */
[class*="ai-panel"],
[class*="ai-coach"],
[class*="ai-section"],
.ai-response-panel,
.concierge-panel {
  background: linear-gradient(135deg, #FDFAF7 0%, #f0ebe0 100%) !important;
  border: 1px solid rgba(211,198,184,0.45) !important;
  border-radius: 14px !important;
}


/* ══════════════════════════════════════════════════════════════
   MODALS — all popups
   ══════════════════════════════════════════════════════════════ */
.fin-modal,
[class*="modal-content"],
[id*="modal"] > div {
  background: #FDFAF7 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(211,198,184,0.3) !important;
}

.fin-modal-overlay,
[id*="modal-overlay"],
[class*="modal-overlay"] {
  background: rgba(61,46,36,0.42) !important;
  backdrop-filter: blur(4px) !important;
}


/* ══════════════════════════════════════════════════════════════
   SECTION DIVIDERS & BORDERS
   ══════════════════════════════════════════════════════════════ */
hr,
.divider,
[class*="divider"] {
  border-color: rgba(211,198,184,0.45) !important;
}

.border,
[class*="border-"] {
  border-color: rgba(211,198,184,0.45) !important;
}


/* ══════════════════════════════════════════════════════════════
   HOMEOWNER OVERVIEW — team/transaction panels
   ══════════════════════════════════════════════════════════════ */
.hw-team-card,
.hw-tx-card,
[class*="homeowner-card"] {
  background: #fff !important;
  border: 1px solid rgba(211,198,184,0.4) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 12px rgba(159,129,90,0.07) !important;
}


/* ══════════════════════════════════════════════════════════════
   PROGRESS / GOAL BARS
   ══════════════════════════════════════════════════════════════ */
.goal-bar-bg,
[class*="progress-bg"],
[class*="bar-bg"] {
  background: rgba(211,198,184,0.3) !important;
}
.goal-bar-fill,
[class*="progress-fill"],
[class*="bar-fill"] {
  background: linear-gradient(90deg, #9f815a, #c8a87a) !important;
}
.goal-bar-fill.danger {
  background: linear-gradient(90deg, #A0413D, #e08280) !important;
}


/* ══════════════════════════════════════════════════════════════
   TRANSACTION STAGE BADGES
   ══════════════════════════════════════════════════════════════ */
.stage-badge,
[class*="stage-"] {
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 0.25rem 0.65rem !important;
}


/* ══════════════════════════════════════════════════════════════
   QUICK-ACTION / SHORTCUT CARDS (agent dashboard)
   ══════════════════════════════════════════════════════════════ */
.action-card,
[class*="action-card"],
[class*="quick-action"] {
  background: #fff !important;
  border: 1px solid rgba(211,198,184,0.4) !important;
  border-radius: 12px !important;
  transition: all 0.22s ease !important;
}
.action-card:hover {
  background: #faf8f4 !important;
  border-color: rgba(194,177,161,0.6) !important;
  box-shadow: 0 4px 16px rgba(159,129,90,0.1) !important;
  transform: translateY(-2px) !important;
}


/* ══════════════════════════════════════════════════════════════
   AGENT FINANCIALS — override the inline palette vars
   ══════════════════════════════════════════════════════════════ */
/* These map the financials page's :root vars to the new palette */
.fin-header h1                { color: #443c36 !important; }
.fin-card                     { background: #fff !important; border-color: rgba(211,198,184,0.4) !important; }
.fin-tab                      { color: #7a6855 !important; }
.fin-tab:hover                { color: #443c36 !important; }
.fin-tab.active               { color: #5c4e42 !important; border-bottom-color: #c8a87a !important; }
.fin-tabs                     { border-bottom-color: rgba(211,198,184,0.5) !important; }
.btn-add                      { background: #9f815a !important; }
.btn-add:hover                { background: #8a6e4a !important; }
.fin-table th                 { color: #7a6855 !important; border-bottom-color: rgba(211,198,184,0.5) !important; }
.fin-table tr:hover td        { background: rgba(233,228,216,0.35) !important; }
.ai-coach-panel               { background: linear-gradient(135deg, #fff 0%, #f0ebe0 100%) !important; border-color: rgba(211,198,184,0.4) !important; }
.btn-coach                    { background: linear-gradient(135deg, #9f815a, #8a6e4a) !important; }
.goal-card                    { background: #faf8f4 !important; border-color: rgba(211,198,184,0.35) !important; }
.year-select select           { background: #FDFAF7 !important; border-color: rgba(181,168,153,0.5) !important; color: #443c36 !important; }
.chart-card                   { background: #fff !important; border-color: rgba(211,198,184,0.4) !important; }
.tbl-act-green                { color: #4A7C59 !important; border-color: rgba(74,124,89,0.35) !important; }
.tbl-act-red                  { color: #A0413D !important; border-color: rgba(160,65,61,0.3) !important; }


/* ══════════════════════════════════════════════════════════════
   MARKETING HUB — panels
   ══════════════════════════════════════════════════════════════ */
[class*="ai-panel"],
[class*="marketing-panel"] {
  background: #faf8f4 !important;
  border-color: rgba(211,198,184,0.4) !important;
}


/* ══════════════════════════════════════════════════════════════
   LENDER DASHBOARD — override inline rgba(107,106,69,...) refs
   ══════════════════════════════════════════════════════════════ */
/* Catch any element that still uses the old olive-green variable */
[style*="rgba(107, 106, 69"],
[style*="rgba(107,106,69"] {
  /* Cannot override inline styles with pure CSS — handled in template updates */
}


/* ══════════════════════════════════════════════════════════════
   SCROLLBAR — subtle, refined
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(181,168,153,0.45); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(159,129,90,0.5); }

* { scrollbar-width: thin; scrollbar-color: rgba(181,168,153,0.4) transparent; }


/* ══════════════════════════════════════════════════════════════
   FOCUS STATES — accessible, elegant
   ══════════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid rgba(159,129,90,0.5) !important;
  outline-offset: 2px !important;
}
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
  outline: 2px solid rgba(159,129,90,0.4) !important;
  outline-offset: 2px !important;
}


/* ══════════════════════════════════════════════════════════════
   LINK COLORS
   Body text links: #5c4e42 (6.2:1 on white — WCAG AA ✓)
   Button-style <a> tags keep white/light text via overrides below.
   ══════════════════════════════════════════════════════════════ */
a { color: #5c4e42 !important; }
a:hover { color: #9f815a !important; }

/* ── Button-style anchors must keep light text ── */
a.btn,
a.btn-primary,
a.btn-premium,
a[class*="btn-primary"],
a[class*="btn-premium"],
.empty-state a,
a.stg-pill,
a.stg-pill--on,
a.ylh-btn-primary,
a.btn-ai,
a[class*="cta-btn"],
a[class*="-cta"] {
  color: #f0ebe0 !important;
}
a.btn:hover,
a.btn-primary:hover,
.empty-state a:hover {
  color: #fff !important;
}

/* ── Secondary button anchors keep on-brand text ── */
a.btn-secondary,
a[class*="btn-secondary"] {
  color: #5c4e42 !important;
}


/* ══════════════════════════════════════════════════════════════
   SECTION & PAGE HEADERS
   ══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  color: #443c36 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}
p, span, li {
  color: #443c36;
}
.subtext,
.subtitle,
.muted,
[class*="-sub"],
[class*="muted"] {
  color: #7a6855 !important;
}


/* ══════════════════════════════════════════════════════════════
   MOBILE NAV — mobile dropdown sheet
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ylh-dropdown-menu {
    background: linear-gradient(135deg, #FFFFFF 0%, #f0ebe0 100%) !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .ylh-dropdown.active::before {
    background: rgba(61,46,36,0.38) !important;
    backdrop-filter: blur(4px) !important;
  }
  .site-header {
    background: linear-gradient(135deg, #9f815a 0%, #8a6e4a 100%) !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   CRM PAGE — preserve compact style, update colors
   ══════════════════════════════════════════════════════════════ */
.crm-topbar,
.crm-bar {
  background: linear-gradient(135deg, #F0EBE4 0%, #dbd4c2 100%) !important;
  border-color: rgba(211,198,184,0.5) !important;
}
.crm-abtn,
.crm-act,
.crm-cbtn {
  border-color: rgba(159,129,90,0.4) !important;
  color: #5c4e42 !important;
}
.crm-abtn:hover,
.crm-act:hover {
  background: rgba(159,129,90,0.08) !important;
  color: #443c36 !important;
}


/* ══════════════════════════════════════════════════════════════
   TRANSACTION PAGES
   ══════════════════════════════════════════════════════════════ */
.tx-act,
.tx-btn {
  border-color: rgba(159,129,90,0.4) !important;
  color: #5c4e42 !important;
}


/* ══════════════════════════════════════════════════════════════
   MISC OVERRIDES — catch remaining old olive refs
   ══════════════════════════════════════════════════════════════ */
[class*="olive"],
[class*="ylh-olive"] {
  color: #9f815a !important;
}
.text-olive { color: #9f815a !important; }
.bg-olive   { background: #9f815a !important; }
.border-olive { border-color: rgba(159,129,90,0.4) !important; }

/* Ensure premium/AI gradients look right */
.premium-gradient,
[class*="premium-grad"] {
  background: linear-gradient(135deg, #9f815a 0%, #c8a87a 100%) !important;
}

/* Contest page */
[class*="contest-"] {
  border-color: rgba(211,198,184,0.4) !important;
}

/* Login / Auth pages */
.auth-card,
.login-card,
[class*="auth-"] {
  background: #FDFAF7 !important;
  border: 1px solid rgba(211,198,184,0.35) !important;
  border-radius: 18px !important;
}

/* Public landing page */
.hero-section,
[class*="hero-"] {
  background: linear-gradient(160deg, #f0ebe0 0%, #dbd4c2 100%) !important;
}

/* =============================================================
   COMPACT LAYOUT — Reduce bulk, less scrolling, denser view
   Applied: March 2026
   ============================================================= */

/* ── Page & container padding ── */
.dashboard-container,
.page-container,
.content-wrapper,
main.dashboard-main,
.main-content {
  padding: 1rem 1.25rem !important;
}

/* ── Section / panel spacing ── */
.section,
.section-alt,
.dashboard-section,
.panel,
.widget,
.card-section {
  padding: 0.75rem 0 !important;
  margin-bottom: 0.75rem !important;
}

/* ── Cards: much tighter ── */
.card,
.card-premium,
.metric-card,
.stat-card,
.summary-card,
.dashboard-card,
.info-card,
.feature-card,
.action-card,
a.action-card {
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* ── Card headers & bodies ── */
.card-header,
.card-title {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8rem !important;
  margin-bottom: 0.35rem !important;
}
/* .lux-card-title is intentionally excluded from compact size overrides */

.card-body,
.card-content {
  padding: 0.5rem 0 !important;
}

/* ── Grid gaps ── */
.dashboard-grid,
.dashboard-cards,
.stats-grid,
.metrics-grid,
.cards-grid,
.grid,
[class*="-grid"],
[class*="-cards"] {
  gap: 0.6rem !important;
}

/* ── Stat / metric number display ── */
.metric-value,
.stat-number,
.stat-value,
.kpi-value,
.dashboard-stat h2,
.dashboard-stat .value {
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.metric-label,
.stat-label,
.kpi-label {
  font-size: 0.7rem !important;
  margin-top: 0.1rem !important;
}

/* ── Section / page headings ── */
.dashboard-main__header,
.page-header,
.section-header,
.content-header {
  padding: 0.5rem 0 !important;
  margin-bottom: 0.6rem !important;
}

.dashboard-main__header h1,
.page-header h1,
.section-header h1,
h1.page-title {
  font-size: 1.25rem !important;
  margin: 0 !important;
}

.dashboard-main__header p,
.page-header p,
.section-header p {
  font-size: 0.78rem !important;
  margin: 0.1rem 0 0 !important;
}

/* ── Tables — tighter rows ── */
.table th,
table th {
  padding: 0.4rem 0.65rem !important;
  font-size: 0.7rem !important;
}

.table td,
table td {
  padding: 0.35rem 0.65rem !important;
  font-size: 0.78rem !important;
}

/* ── Forms — less vertical space ── */
.form-group,
.fmg,
.field-group {
  margin-bottom: 0.5rem !important;
}

.form-group label,
.fmg label,
label {
  font-size: 0.72rem !important;
  margin-bottom: 0.2rem !important;
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
input[type="password"],
select,
textarea {
  padding: 0.35rem 0.6rem !important;
  font-size: 0.8rem !important;
}

/* ── Morning briefing / AI panels — no giant blank space ── */
.briefing-card,
.morning-briefing,
.ai-briefing,
[class*="briefing"],
.ai-panel,
.ai-card {
  padding: 0.75rem 1rem !important;
  min-height: unset !important;
}

/* ── Lender sidebar ── */
.lender-sidebar {
  padding: 0.75rem 0 !important;
}

.sidebar-section {
  padding: 0 0.5rem 0.5rem !important;
}

.sidebar-section-title {
  font-size: 0.6rem !important;
  padding: 0.35rem 0.75rem !important;
  margin-bottom: 0.15rem !important;
}

.sidebar-nav-link {
  padding: 0.35rem 0.75rem !important;
  font-size: 0.75rem !important;
}

/* ── Page-level wrapper padding ── */
.page-wrapper,
.app-wrapper,
.content-area,
.main-area {
  padding: 0.75rem 1rem !important;
}

/* ── Containers on public/landing pages — keep some breathing room ── */
.container {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* ── Reduce vertical rhythm in list items / timeline ── */
.timeline-item,
.list-item,
.activity-item,
.log-item {
  padding: 0.35rem 0.5rem !important;
  margin-bottom: 0.25rem !important;
}

/* ── Modals / overlays — compact header ── */
.modal-header,
.modal-title {
  padding: 0.6rem 1rem !important;
  font-size: 0.9rem !important;
}

.modal-body {
  padding: 0.75rem 1rem !important;
}

.modal-footer {
  padding: 0.5rem 1rem !important;
}

/* =============================================================
   UNIVERSAL PAGE LAYOUT OVERHAUL — March 2026
   Consistent, compact, full-width, beautiful on every page
   ============================================================= */

/* ── 1. OUTER WRAPPERS — kill all excess padding ── */
.agent-content-wrapper,
.dashboard-container,
.dashboard-main,
.homeowner-content-wrapper,
.homeowner-page-content,
.vendors-container,
.marketing-hub-container,
.comms-container,
.power-tools-container,
.crm-container,
.contests-wrap,
.ref-page,
[id="txpage"],
[id="crm"],
[id="inv-wrap"],
[id="fin"],
[id="clients-page"] {
  padding: 0.75rem 1rem !important;
  max-width: 100% !important;
}

/* ── PAGE HEADER ACTION PILLS — override all global button resets ── */
.ylh-page-hd__actions button,
.ylh-page-hd__actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .25rem !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 1.35rem !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(143,168,138,.3) !important;
  font-size: .67rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #5C7050 !important;
  text-decoration: none !important;
  background: #fff !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(44,58,40,.05) !important;
  width: auto !important;
  margin: 0 !important;
  word-wrap: normal !important;
  line-height: 1 !important;
  transition: all .18s !important;
}
.ylh-page-hd__actions button:hover,
.ylh-page-hd__actions a:hover {
  background: rgba(143,168,138,.1) !important;
  border-color: #c69270 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(44,58,40,.09) !important;
  color: #443c36 !important;
}
.ylh-page-hd__actions .stg-pill--on,
.ylh-page-hd__actions button.stg-pill--on,
.ylh-page-hd__actions .ylh-btn-primary {
  background: linear-gradient(135deg, #c69270 0%, #9f815a 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(107,168,138,.3) !important;
}
.ylh-page-hd__actions .stg-pill--on:hover,
.ylh-page-hd__actions button.stg-pill--on:hover {
  background: linear-gradient(135deg, #9f815a 0%, #c69270 100%) !important;
  color: #fff !important;
}

/* ── 2. PAGE HEADER — unified, centered across all pages ── */
.ylh-page-hd,
.ylh-hero,
.crm-hero,
.ref-hero,
.page-hero,
.dashboard-hero,
.section-hero {
  text-align: center !important;
  padding: 1.75rem 0 1.25rem !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid rgba(143,168,138,.15) !important;
  display: block !important;
}

/* Remove flex split — hero__text is now just a block wrapper */
.ylh-hero__text {
  display: block !important;
  text-align: center !important;
}

.ylh-page-hd__label,
.ylh-hero__eyebrow,
.ref-hero__eyebrow,
.page-eyebrow,
.section-eyebrow {
  display: none !important;
  display: block !important;
  margin-bottom: .3rem !important;
}

.ylh-page-hd__title,
.ylh-hero__title,
.ref-hero__title,
.crm-hero h1,
.page-hero h1,
.dashboard-header h1,
.dashboard-main__header h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2.4rem !important;
  font-weight: 600 !important;
  color: #1E2A1A !important;
  margin: 0 0 .35rem !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
}

.ylh-page-hd__sub,
.ylh-hero__subtitle,
.crm-hero p,
.page-hero p,
.dashboard-header p,
.dashboard-main__header p {
  font-size: .875rem !important;
  color: #6A7D64 !important;
  margin: 0 auto !important;
  max-width: 560px !important;
}

.ylh-page-hd__actions,
.ylh-hero__actions,
.page-hero__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: .625rem !important;
  margin-top: .875rem !important;
}

/* ── 3. STATS / METRICS STRIPS — 3-4 col, tight ── */
.stats-strip,
.metrics-strip,
.kpi-strip,
.crm-stats,
.stats-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}

.metrics-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}

.metric-card,
.stat-card,
.kpi-strip__item {
  padding: 0.65rem 0.85rem !important;
  border-radius: 10px !important;
  min-height: unset !important;
}

.metric-value,
.stat-value {
  font-size: 1.6rem !important;
  line-height: 1 !important;
  margin-bottom: 0.1rem !important;
}

.metric-label,
.stat-label {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.05rem !important;
}

.metric-subtext,
.stat-subtext {
  font-size: 0.65rem !important;
}

/* ── 4. RESPONSIVE CONTENT GRID — 2 col on desktop ── */
.responsive-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.6rem !important;
  margin-bottom: 0.75rem !important;
}

@media (min-width: 768px) {
  .responsive-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .responsive-grid.three-col {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .responsive-grid.sidebar-layout {
    grid-template-columns: 1fr 280px !important;
  }
}

/* ── 5. ACTION CARDS — compact, not giant blocks ── */
.action-card,
a.action-card {
  padding: 0.6rem 0.85rem !important;
  min-height: unset !important;
  gap: 0.65rem !important;
  border-radius: 10px !important;
}

.action-icon {
  width: 34px !important;
  height: 34px !important;
  font-size: 1rem !important;
  border-radius: 8px !important;
  flex-shrink: 0;
}

.action-title {
  font-size: 0.82rem !important;
  margin-bottom: 0.1rem !important;
}

.action-desc {
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

/* ── 6. LOAN / LIST ITEMS — slim rows ── */
.loan-item,
.loan-row,
.pipeline-item {
  padding: 0.5rem 0.75rem !important;
  margin-bottom: 0.35rem !important;
  border-radius: 8px !important;
}

.loan-name {
  font-size: 0.85rem !important;
  margin-bottom: 0.15rem !important;
}

.loan-details {
  font-size: 0.72rem !important;
}

/* ── 7. EMPTY STATES — less dramatic white space ── */
.empty-state {
  padding: 2rem 1.5rem !important;
  border-radius: 12px !important;
}

.empty-state h3 {
  font-size: 1rem !important;
}

.empty-state p {
  font-size: 0.8rem !important;
}

/* ── 8. CARD STRUCTURE — universal ── */
.card,
.lux-card,
.info-card,
.feature-card {
  border-radius: 10px !important;
  box-shadow: 0 1px 8px rgba(61,46,36,.06) !important;
}

.card h2,
.card-title {
  font-size: 0.9rem !important;
  margin-bottom: 0.5rem !important;
}
/* .lux-card-title intentionally excluded — dashboard controls its own size */

/* ── 9. MORNING BRIEFING — max height so it never dominates ── */
.briefing-card {
  margin-bottom: 0.6rem !important;
}

.briefing-card-inner {
  padding: 0.75rem 1rem !important;
}

/* #briefing-text font-size and max-height are controlled by dashboard.html —
   do NOT override here. The quote must be 2.2rem per design spec. */
#briefing-text {
  overflow: visible !important;
  max-height: none !important;
}

.briefing-label {
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.3rem !important;
}

.briefing-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
}

.briefing-actions {
  margin-top: 0.5rem !important;
  gap: 0.4rem !important;
}

/* ── 10. CATEGORY SECTIONS (vendors, etc.) ── */
.category-section {
  margin-bottom: 1rem !important;
}

.category-header {
  font-size: 0.78rem !important;
  letter-spacing: 0.07em !important;
  margin-bottom: 0.4rem !important;
  padding-bottom: 0.3rem !important;
}

.vendors-grid,
.tools-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 0.5rem !important;
}

/* ── 11. SECTION HEADERS with action buttons ── */
.section-heading,
.section-top,
.content-row-header,
.txgrid-header,
.fin-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-bottom: 0.6rem !important;
  flex-wrap: wrap !important;
}

.section-heading h2,
.section-top h2,
.card h2 {
  font-size: 0.88rem !important;
  margin: 0 !important;
}

/* ── 12. TABS ── */
.tab-nav,
.tabs,
.fin-tabs {
  gap: 0.25rem !important;
  margin-bottom: 0.6rem !important;
  padding: 0.2rem !important;
}

.tab-btn,
.tab-link,
.fin-tab {
  padding: 0.3rem 0.75rem !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
}

/* ── 13. SUMMARY CARDS TOP-OF-PAGE (financials, etc.) ── */
.fin-cards,
.summary-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}

.fin-card,
.summary-item {
  padding: 0.65rem 0.9rem !important;
  border-radius: 10px !important;
}

/* ── 14. LENDER SIDEBAR REFINEMENT ── */
.lender-sidebar,
.dashboard-sidebar {
  padding: 0.5rem 0 !important;
  min-width: 200px !important;
}

/* ── MOBILE RESPONSIVE — everything stacks cleanly ── */
@media (max-width: 768px) {
  .agent-content-wrapper,
  .dashboard-container,
  .homeowner-content-wrapper {
    padding: 0.5rem 0.75rem !important;
  }

  .metrics-grid,
  .fin-cards,
  .stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .responsive-grid,
  .vendors-grid,
  .tools-grid {
    grid-template-columns: 1fr !important;
  }

  .ylh-page-hd__title,
  .ylh-hero__title,
  .ref-hero__title,
  .crm-hero h1,
  .dashboard-header h1 {
    font-size: 1.5rem !important;
  }

  /* #briefing-text max-height intentionally removed — quote must not be clipped */
}

@media (max-width: 480px) {
  .metrics-grid,
  .fin-cards,
  .stats-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  .action-card,
  a.action-card {
    padding: 0.5rem 0.65rem !important;
  }
}