/* ════════════════════════════════════════════════════════════════════
   Premara Group CRM — Unified Theme  ·  Direction C1 (Navy / Emerald)
   ────────────────────────────────────────────────────────────────────
   SINGLE SOURCE OF TRUTH for color + type across every screen.

   Loaded AFTER each page's inline <style> (so it wins the cascade) and
   BEFORE mobile.css (so responsive layout still wins). Because almost
   every rule in the app reads from CSS custom properties, redefining the
   tokens below restyles the whole product consistently. The explicit
   overrides that follow exist only for values that were hardcoded or
   carried over from the app's original dark theme.

   To retheme later: change tokens in :root. Nothing else.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

/* ─────────────────────────────  TOKENS  ───────────────────────────── */
:root {
  /* Surfaces — cool neutral (replaces warm ivory) */
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface2: #f3f6f9;
  --border: #e2e8ef;
  --border2: #d0d9e3;

  /* Text — cool ink */
  --text: #0f1b2d;
  --text2: #45566b;
  --text3: #8493a6;

  /* Accent — emerald. These token NAMES stay "gold" so every existing
     rule that references --gold / --gold2 / --gold-bg becomes emerald
     with zero edits. */
  --gold: #1f8a6b;
  --gold2: #2aa07e;
  --gold-bg: rgba(31,138,107,0.10);

  /* Semantic palette (harmonized — fixes the per-page green drift) */
  --green: #1f8a6b;  --green-bg: rgba(31,138,107,0.10);
  --blue:  #2f6db0;  --blue-bg:  rgba(47,109,176,0.10);
  --red:   #b3473f;  --red-bg:   rgba(179,71,63,0.10);
  --purple:#6d4ed6;  --purple-bg:rgba(109,78,214,0.10);
  --amber: #b5822f;  --amber-bg: rgba(181,130,47,0.12);

  --radius: 6px;
  --radius-lg: 10px;

  /* Type — Archivo (display/headlines) · IBM Plex Sans (UI) · Mono (data) */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Sidebar chrome — deep navy */
  --side-bg: #0e1a2b;
  --side-border: #1c2c41;
  --side-logo: #ffffff;
  --side-text: #9fb1c6;
  --side-text-strong: #f0f5fb;
  --side-dim: #5d7a99;
  --side-hover: #16263b;
  --side-active-bg: rgba(31,138,107,0.16);
  --side-active-text: #4fd3a6;
}

/* ───────────────────────────  SIDEBAR CHROME  ──────────────────────────
   Inline pages force the sidebar dark with !important, so we must match
   with !important + equal-or-higher specificity (loaded later = wins). */
.sidebar { background: var(--side-bg) !important; border-right-color: var(--side-border) !important; }
.sidebar .logo { border-bottom-color: var(--side-border) !important; }
.sidebar .logo-mark { color: var(--side-logo) !important; font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: 0.01em !important; }
.sidebar .logo-sub { color: var(--side-dim) !important; }
.sidebar .nav-label { color: var(--side-dim) !important; }
.sidebar .nav-item { color: var(--side-text) !important; border-color: transparent !important; }
.sidebar .nav-item:hover { background: var(--side-hover) !important; color: var(--side-text-strong) !important; }
.sidebar .nav-item.active { background: var(--side-active-bg) !important; color: var(--side-active-text) !important; border-color: transparent !important; }
.sidebar .nav-item svg { opacity: 0.72; }
.sidebar .nav-item.active svg { opacity: 1; }
.sidebar-close { color: var(--side-dim); }
.sidebar-close:hover { color: var(--side-text-strong); background: rgba(255,255,255,0.06); }

/* ───────────────────────────  TYPOGRAPHY  ────────────────────────────── */
.topbar-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; }
.modal-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; }

/* Stat bars — shared component for Prospects + Deals metric headers. */
.stats-bar { display: flex; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.stat { padding: 10px 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
.stat-val {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text3); margin-top: 2px; }

/* "Possible Dupes" flag — on-brand emerald, value AND label, every screen.
   Buyer Database sets these via inline styles, so we need !important + the
   #id to win; Partners uses .stat.flag. Both covered. */
.stat.flag .stat-val,
.stat.flag .stat-label,
#stat-dupes,
#stat-dupes-wrap .stat-label { color: var(--gold) !important; }

/* ────────────────────────────  BUTTONS  ──────────────────────────────── */
.btn-primary { background: var(--gold); color: #ffffff; }
.btn-primary:hover { background: var(--gold2); color: #ffffff; }

/* Filter chips — standardize the corner radius to the Deals shape
   (var(--radius) ≈ 6px). Buyer Database (.filter-btn) and Inbox
   (.filter-tab) were full pills (20px); match Deals' .filter-preset-btn. */
.filter-btn, .filter-tab { border-radius: var(--radius); }

/* ───────────────────────────  SEARCH BOXES  ───────────────────────────
   One canonical look for every PRIMARY search (Buyer DB, Prospects, Deals,
   Inbox, Partners, Referrals). crm-search.js guarantees each has a left
   magnifier icon and a working clear ×. These rules win over each page's
   inline/legacy .search styles (theme loads after page <style>). */
.search-wrap { position: relative; display: inline-flex; align-items: center; width: 260px; flex: none; vertical-align: middle; }
.search-wrap > .search,
.search-wrap > input.search {
  width: 100% !important;
  height: 34px;
  box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 0 30px 0 33px !important;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 32px;
  outline: none;
  transition: border-color .15s;
}
.search-wrap > .search::placeholder { color: var(--text3); }
.search-wrap > .search:focus { border-color: var(--gold); box-shadow: none; }

/* Defensive: if the Deals search keeps its original inline-styled markup
   (not converted to .search-wrap), still give it the canonical metrics so
   it matches the other portals. Harmless once it IS converted. */
#deals-global-search {
  height: 34px !important;
  padding: 0 30px 0 32px !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border2) !important;
  box-sizing: border-box;
}
#deals-global-search::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }

/* Left magnifier icon (injected by crm-search.js as .search-icon). */
.search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text3); pointer-events: none; flex: none;
}

/* Clear (×) button — consistent everywhere, shown only when there's text. */
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  background: none; border: none; border-radius: 4px;
  color: var(--text3); font-size: 17px; line-height: 1; cursor: pointer;
  transition: color .12s, background .12s;
}
.search-clear:hover { color: var(--text); background: var(--surface); }
.search-clear.show { display: inline-flex; }

/* ─────────────────────  PARTNERS KANBAN CARDS  ────────────────────────
   Harden the card header so a long firm name can never collide with the
   type badge (Archivo is wider than the old serif). Name gets room to
   wrap to two lines and ellipsis past that; badge holds its size. */
.p-card > div:first-child { gap: 8px; }
.p-card-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-card > div:first-child > .badge { flex: 0 0 auto; align-self: flex-start; }

/* ────────────────────────────  BADGES  ────────────────────────────────
   Original badge text colors were light tints meant for a dark surface;
   on the light theme they wash out. Reset to readable, distinct tones.
   PE = emerald (accent) · Strategic = blue · Ind. Sponsor = amber. */
.badge-pe        { color: var(--gold);  background: var(--gold-bg);  border-color: rgba(31,138,107,0.22); }
.badge-strategic { color: var(--blue);  background: var(--blue-bg);  border-color: rgba(47,109,176,0.22); }
.badge-sponsor   { color: #9a7320;      background: var(--amber-bg); border-color: rgba(181,130,47,0.26); }
.badge-active    { color: var(--green); background: var(--green-bg); }
.badge-inactive  { color: var(--red);   background: var(--red-bg); }
.badge-saas      { color: var(--blue);  background: var(--blue-bg);  border-color: rgba(47,109,176,0.22); }
.badge-services  { color: var(--purple);background: var(--purple-bg);border-color: rgba(109,78,214,0.22); }
.badge-consumer  { color: var(--green); background: var(--green-bg); border-color: rgba(31,138,107,0.22); }
.badge-hold      { color: #9a7320;      background: var(--amber-bg); }

/* Category badges shared across Deals / Prospects / Partners — original
   text colors were light tints for a dark theme; darken for legibility. */
.badge-saas, .badge-wealth        { color: var(--blue); }
.badge-services, .badge-legal     { color: var(--purple); }
.badge-consumer, .badge-marketing { color: var(--green); }
.badge-realestate                 { color: #9a7320; }
.badge-other, .badge-closed       { color: var(--text3); }

/* ─────────────────────  COOL-THEME DECOR FIX-UPS  ─────────────────────
   A few decorative chips were hardcoded to warm greys; cool them. */
.stage-dot.empty { background: var(--border2); }
.stage-pip { background: var(--border2); }
.spinner { border-color: var(--border2); border-top-color: var(--gold); }