/* ============================================================
   revolv grade-the-deal — light "back office" theme
   Airy blue-grey canvas, white cards with soft shadows, blue primary,
   green success, orange alerts, Lato type, left icon sidebar.
   Loaded LAST on every page so it wins over styles.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

:root, [data-theme="dark"], [data-theme="light"] {
  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --radius: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --shadow-sm: 0 2px 6px rgba(48, 78, 125, 0.06);
  --shadow:    0 10px 30px rgba(48, 78, 125, 0.08);
  --shadow-lg: 0 18px 44px rgba(48, 78, 125, 0.12);

  --bg-0: #eef2f8;                    /* page canvas */
  --bg-1: #ffffff;                    /* cards */
  --bg-2: #f6f8fc;                    /* inputs / inner tiles */
  --bg-3: #eaf0f9;                    /* hover / chips */
  --line: #e6ebf3;
  --line-2: #d6deea;
  --text:   #2e3a4d;
  --text-2: #6b778a;
  --text-3: #9aa5b5;

  --accent:   #4a90e2;                /* primary blue */
  --accent-2: #6aa8f0;
  --accent-3: #7b8cf7;
  --grad:     linear-gradient(135deg, #5aa7f4 0%, #7b8cf7 100%);
  --good:   #5cb85c;
  --good-grad: linear-gradient(135deg, #7ac943 0%, #4fae3b 100%);
  --warn:   #f5a623;
  --warn-grad: linear-gradient(135deg, #ffc23d 0%, #f59f1a 100%);
  --bad:    #e5474b;

  --orb-1: transparent; --orb-2: transparent; --orb-3: transparent;
  --glass-stroke: #e6ebf3;
  --kpi-bg: #ffffff;
  --sidebar-w: 132px;
  color-scheme: light;
}

html, body { background: var(--bg-0) !important; color: var(--text); }
body { font-family: var(--font-sans) !important; letter-spacing: 0; font-feature-settings: normal; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.bg-orbs { display: none !important; }
#theme-toggle, .theme-toggle { display: none !important; }

/* ── Left sidebar (replaces the top bar) ─────────────────────── */
@media (min-width: 901px) {
  body { padding-left: var(--sidebar-w) !important; }
  header.topbar, header.header {
    position: fixed !important; inset: 0 auto 0 0; width: var(--sidebar-w); height: 100vh; z-index: 100;
    display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px;
    padding: 26px 0 18px !important; margin: 0 !important; background: #ffffff !important;
    border: 0 !important; border-right: 1px solid var(--line) !important; box-shadow: 4px 0 24px rgba(48,78,125,0.05) !important;
    backdrop-filter: none !important; overflow-y: auto;
  }
  header .brand, header .logo { flex-direction: column; align-items: center; gap: 6px !important; padding: 0 12px; }
  header .brand img, header .logo img { height: auto !important; width: 116px !important; max-width: 100%; }
  header .topnav {
    flex-direction: column; gap: 6px !important; padding: 0 !important; background: none !important; border-radius: 0 !important; width: 100%;
  }
  header .topnav a {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: clamp(10px, 1.9vh, 18px) 8px clamp(9px, 1.7vh, 16px) !important; margin: 0 !important; border-radius: 0 !important; text-align: center;
    font-size: 12.5px !important; line-height: 1.25; font-weight: 400 !important; color: var(--text-2) !important;
    background: none !important; box-shadow: none !important; transition: background .15s, color .15s;
  }
  header .topnav a::before {
    content: ''; width: 28px; height: 28px; flex: none; background-color: currentColor; opacity: .85;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  }
  header .topnav a:hover { color: var(--accent) !important; background: var(--bg-3) !important; }
  header .topnav a.active {
    color: #fff !important; background: var(--grad) !important; font-weight: 700 !important;
    margin-right: -8px !important; border-radius: 0 10px 10px 0 !important; box-shadow: 0 10px 24px rgba(90,140,240,0.35) !important;
  }
  header .topnav a.active::before { opacity: 1; }
  header .topright { margin-top: auto; margin-bottom: 64px; justify-content: center; flex-direction: column; gap: 10px !important; padding: 0 8px; } /* clears the crash-desk button */
  main, #app { max-width: 1360px; }
}
@media (max-width: 900px) {
  header.topbar, header.header { background: #fff !important; border-bottom: 1px solid var(--line) !important; box-shadow: var(--shadow-sm) !important; }
  header .topnav { background: var(--bg-3) !important; overflow-x: auto; }
  header .topnav a.active { background: var(--grad) !important; color: #fff !important; }
}

/* Sidebar icons (outline style, like the reference) */
.topnav a[data-route="investor"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16'/%3E%3Cpath d='M14 10h5a1 1 0 0 1 1 1v10'/%3E%3Cpath d='M2.5 21h19M7.5 8h3M7.5 12h3M7.5 16h3M16.5 14h1M16.5 17.5h1'/%3E%3C/svg%3E"); }
.topnav a[data-route="agent"]     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E"); }
.topnav a[data-route="net-sheet"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2.5' width='16' height='19' rx='2'/%3E%3Cpath d='M8 7h8M8 11h8M8 15h4'/%3E%3Ccircle cx='16' cy='16.5' r='2.5'/%3E%3C/svg%3E"); }
.topnav a[data-route="prospect"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E"); }
.topnav a[data-route="saved"]     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E"); }
.topnav a[data-route="lenders"]   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 4l9 5.5'/%3E%3Cpath d='M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20.5h18'/%3E%3C/svg%3E"); }
.topnav a[data-route="settings"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E"); }
.topnav a:not([data-route])        { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"); }

/* ── Pills / badges ───────────────────────────────────────────── */
.pill-beta { background: var(--bg-3) !important; color: var(--accent) !important; font-weight: 700; letter-spacing: .06em; }

/* ── Cards & surfaces: white, soft shadow, no glass ───────────── */
.card, .glass, .kpi, .score-card, .criteria-card, .path-card, .ns-card, .chart-card, .price-tile, .meta-tile,
.strategy-pill, .pricing-strategy, .compare-view, .tab-panel, .modal, .modal-card, .stat-tile {
  background: #ffffff !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--text);
}
.meta-tile { border-left: 3px solid var(--accent) !important; }
.price-card, .ns-net { background: #ffffff !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; }
.price-tile.recommended { border: 2px solid var(--accent) !important; background: linear-gradient(180deg, #f3f8ff, #ffffff) !important; }
.stat-tile:hover { box-shadow: var(--shadow-lg) !important; }

/* Hero bands → quiet page headers (date-header style) */
.cma-hero, .ns-hero, .audience-hero, .hero {
  background: transparent !important; border-bottom: 0 !important;
}
.cma-eyebrow, .ns-eyebrow, .eyebrow { color: var(--accent) !important; letter-spacing: .14em; }
.grad, .cma-title .grad, .ns-title .grad, .hero-title .grad, .audience-title .grad,
.price-tile.recommended .value, .ns-net .big .val {
  background: var(--grad) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}

/* ── Buttons (pill buttons like ADD NEW CLIENT / VERIFY CLIENT) ── */
.btn-primary {
  background: var(--good-grad) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  font-weight: 700 !important; letter-spacing: .03em; box-shadow: 0 8px 18px rgba(92,184,92,0.30) !important;
}
.btn-primary:hover { box-shadow: 0 10px 24px rgba(92,184,92,0.40) !important; filter: brightness(1.03); }
.btn-ghost {
  background: #ffffff !important; color: var(--accent) !important; border: 1.5px solid #c9dcf6 !important;
  border-radius: 999px !important; font-weight: 700 !important; box-shadow: var(--shadow-sm) !important;
}
.btn-ghost:hover { border-color: var(--accent) !important; background: #f3f8ff !important; }
.accuracy-cta { background: #ffffff !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; color: var(--text) !important; }
.accuracy-cta .acc-us { background: var(--grad) !important; color: #fff !important; }
.accuracy-cta .acc-action { color: #fff !important; background: var(--grad) !important; }
/* Quieter headings, like the reference's "Client activities" */
.cma-title, .ns-title, .audience-title, .hero-title { font-size: clamp(26px, 3vw, 36px) !important; font-weight: 700 !important; letter-spacing: -0.015em !important; line-height: 1.2 !important; }
.cma-lede, .ns-lede, .audience-lede, .lede { font-size: 15px !important; color: var(--text-2) !important; }
.accuracy-cta .acc-ico { background: var(--grad) !important; color: #fff !important; }

/* ── Inputs: rounded, light ───────────────────────────────────── */
input, select, textarea { color: var(--text); }
input[type="search"], input[type="text"], input[type="email"], input[type="number"], input[type="date"], input:not([type]), select, textarea,
#cma-address, #address-input, .ns-addr input, .f input, .f select {
  background: #ffffff !important; color: var(--text) !important; border: 1.5px solid var(--line-2) !important; box-shadow: none;
}
#cma-address, #address-input, .ns-addr input { border-radius: 999px !important; padding-left: 22px !important; box-shadow: var(--shadow-sm) !important; }
input:focus, select:focus, textarea:focus, #cma-address:focus, .ns-addr input:focus { border-color: var(--accent) !important; outline: none; box-shadow: 0 0 0 4px rgba(74,144,226,0.12) !important; }
::placeholder { color: var(--text-3) !important; }

/* Autocomplete dropdowns (inline-styled dark in the markup) */
#cma-suggestions, #ns-sug, .suggestions {
  background: #ffffff !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-lg) !important; backdrop-filter: none !important;
}
#cma-suggestions div, #ns-sug div, .suggestions div { color: var(--text) !important; border-color: var(--line) !important; }
#cma-suggestions div:hover, #ns-sug div:hover { background: #f3f8ff !important; }

/* ── Tables (client-activities style) ─────────────────────────── */
table th { color: var(--text-3) !important; font-weight: 400 !important; text-transform: none; letter-spacing: 0; }
table td { border-color: var(--line) !important; color: var(--text); }
tbody tr:hover td { background: #f8fbff; }
table.ns tr.sec td, .ns-card h3 { color: var(--accent) !important; }
table.ns tr.net td { color: var(--good) !important; }
.tag.estimate { background: #fff4e0 !important; color: #e08e0b !important; }
.tag.computed { background: #e9f6e9 !important; color: #3d9a3d !important; }
.credit { color: var(--good) !important; }

/* Type sub-nav chips → status-filter pills */
.type-subnav a { background: #fff !important; color: var(--text-2) !important; border: 1px solid var(--line-2) !important; font-weight: 400 !important; }
.type-subnav a:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
.type-subnav a.active { background: #6f86a8 !important; color: #fff !important; border-color: transparent !important; font-weight: 700 !important; }

/* Warnings → alert banner (orange "Alert from call center") */
.warn, .banner-warn { background: #ffffff !important; border: 1px solid #ffe2b3 !important; border-left: 4px solid var(--warn) !important; box-shadow: var(--shadow-sm) !important; color: var(--text) !important; }

/* Grid children may shrink (wide comp tables scroll inside their card instead of widening the page) */
#cma-results [style*="display: grid"] > *, #app [style*="display: grid"] > *, .ns-wrap > * { min-width: 0; }
#cma-results input, #cma-results select { max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 1180px) {
  #cma-results [style*="grid-template-columns: 320px 1fr"] { grid-template-columns: 1fr !important; }
}

/* Price-rail markers were white-on-dark */
.price-marker { border-bottom-color: var(--text) !important; }

/* Health dot */
.health-dot { box-shadow: 0 0 0 4px rgba(92,184,92,0.15) !important; }

/* Leaflet / charts sit on white */
.leaflet-container { border-radius: var(--radius); }

/* Crash-desk "Report a problem" button stays legible on light */
#crashdesk-root button { box-shadow: var(--shadow) !important; }

/* Print stays plain white */
@media print {
  html, body { background: #fff !important; }
  body { padding-left: 0 !important; }
  header.topbar, header.header { display: none !important; }
}

/* Net Sheet summary: let the four figures wrap instead of clipping */
.ns-net { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
.ns-net .val { font-size: 22px !important; color: var(--text); }
.ns-net .big { grid-column: span 2; }
.ns-net .big .val { font-size: 36px !important; }

/* Account item at the bottom of the sidebar + account menu */
.acct-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; padding: 10px 6px; border: 0; border-radius: 12px;
  background: transparent; color: var(--text-2); font-family: inherit; font-size: 12.5px; cursor: pointer; text-align: center; line-height: 1.2; }
.acct-btn:hover { background: var(--bg-3); color: var(--accent); }
.acct-btn small { font-size: 10.5px; color: var(--text-3); max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-av { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; font-size: 12px;
  display: inline-grid; place-items: center; flex: none; }
.acct-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; color: var(--text); font-family: inherit; cursor: pointer; }
.acct-item:hover { border-color: var(--accent); background: #f3f8ff; }
.acct-item .i { font-size: 20px; width: 28px; text-align: center; }
.acct-item b { display: block; font-size: 14px; }
.acct-item small { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; font-weight: 400; }
#crm-auth { width: 100%; }
@media (min-width: 901px) { header .topright { border-top: 1px solid var(--line); padding-top: 10px !important; } }

/* CMA "Prepared for" bar: purpose segments + CRM client */
.pf-segs { display: inline-flex; background: var(--bg-3); border-radius: 999px; padding: 3px; gap: 2px; }
.pf-seg { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.pf-seg.on { background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(90,140,240,.3); }
.pf-client { display: inline-flex; flex-direction: column; line-height: 1.2; font-size: 14px; }
.pf-client small { font-size: 11.5px; color: var(--text-3); }
.acct-item .i { min-width: 28px; }