/* =========================================================================
   TEMPERED EDGE - LEAD OPS CRM - v2 UPGRADE LAYER
   Drop-in. Append to the END of styles.css. Purely additive - no existing
   rule, id, class, or data-attribute is renamed or removed.
   Palette lock: graphite / bone / steel / ember (#d8a25a) + semantic
   green (#73d49c) / red (#ff766d) ONLY. Ember = active + key emphasis only.
   NOTE: one cyan (#00B8CC) remains hardcoded in app.js inline styles
   (business/logo/google-business links, 3 occurrences ~lines 392/403/405)
   and cannot be reached from CSS.
   ========================================================================= */

/* ---- 1. TOKENS: ember, hairline+elevation, spacing/radius, focus ---- */
:root {
  /* Ember - the tempered edge. Used sparingly: active states + key stat. */
  --ember: #d8a25a;
  --ember-hi: #e6b87a;
  --ember-12: rgba(216, 162, 90, 0.12);
  --ember-20: rgba(216, 162, 90, 0.20);
  --ember-35: rgba(216, 162, 90, 0.35);
  --ember-55: rgba(216, 162, 90, 0.55);

  /* Hairlines + elevation (softer than the flat 1px steel border) */
  --line-soft: rgba(107, 123, 140, 0.14);
  --line-strong: rgba(107, 123, 140, 0.32);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.28), 0 1px 1px rgba(0,0,0,0.20);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-ember: 0 0 0 1px var(--ember-35), 0 8px 24px -10px rgba(216,162,90,0.30);

  /* 8pt spacing + radius */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-sm: 6px; --r-md: 9px; --r-lg: 12px;

  --focus-ring: 0 0 0 2px var(--graphite), 0 0 0 4px var(--ember-55);
}

/* One consistent, keyboard-first ember focus ring (no layout shift).
   NOTE: no border-radius is set here - forcing a radius on :focus-visible
   would make square/full-width controls momentarily "pop" rounded on
   keyboard focus. The ring alone reads clearly on any shape. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- 2. SIDEBAR NAV: ember active edge-rail, calmer weight ---- */
.side-nav a {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;               /* drop the all-caps crunch */
  padding: 10px 12px 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.side-nav a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  height: 0; width: 2px;
  transform: translateY(-50%);
  background: var(--ember);
  border-radius: 2px;
  transition: height .16s ease;
}
.side-nav a:hover {
  border-color: transparent;
  background: rgba(255,255,255,0.03);
  color: var(--text);
}
.side-nav a.active {
  border-color: transparent;
  background: var(--ember-12);
  color: var(--bone);
}
.side-nav a.active::before { height: 60%; }

/* ---- 3. METRIC CARDS: hierarchy, ONE ember key-stat, hover lift ---- */
.metric-card {
  border-color: var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-6);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}
.metric-card span {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* stays bone by default - only .key goes ember */
}
.metric-card p {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
}
/* Tag ONE card: <article class="metric-card key">…#proposalValue or #overdueTasks */
.metric-card.key { border-color: var(--ember-20); box-shadow: var(--shadow-ember); }
.metric-card.key span { color: var(--ember); }

/* ---- 4. STAGE-HEALTH BARS: ember→bone gradient ---- */
.bar {
  background: rgba(255,255,255,0.03);
  border-color: var(--line-soft);
  border-radius: 999px;
  height: 10px;
}
.bar span {
  background: linear-gradient(90deg, var(--ember) 0%, var(--ember-hi) 100%);
  border-radius: 999px;
  box-shadow: 0 0 8px -2px var(--ember-35);
  transition: width .3s cubic-bezier(.2,.7,.2,1);
}
.stage-row { gap: var(--sp-3); grid-template-columns: 140px 1fr 34px; }
.stage-row strong {
  font-family: var(--font-display);
  font-weight: 600; font-size: 13px; color: var(--text);
}
.stage-row small { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ---- 5. CARDS / TAGS / PILLS: soft radius, ember hover, semantic tints ---- */
.lead-card, .record-row, .task-row {
  border-color: var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.lead-card:hover, .record-row:hover, .task-row:hover {
  transform: translateY(-1px);
  border-color: var(--ember-35);      /* replaces the jarring full-bone swap */
  box-shadow: var(--shadow-2);
}
.record-row.active {
  border-color: var(--ember-55);
  background: var(--ember-12);
}
.lead-card strong, .record-row strong, .task-row strong {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tag, .count-pill {
  border-color: var(--line-strong);
  border-radius: 999px;
  padding: 4px 9px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.tag.overdue, .task-row .overdue, .record-row .overdue {
  color: var(--red);
  border-color: rgba(255,118,109,0.45);
  background: rgba(255,118,109,0.10);
}
.tag.good, .good {
  color: var(--green);
  border-color: rgba(115,212,156,0.45);
  background: rgba(115,212,156,0.10);
}
.column { border-color: var(--line-soft); border-radius: var(--r-lg); }
.column-header { border-bottom: 1px solid var(--line-soft); padding-bottom: var(--sp-3); }
.column-header h2 { font-weight: 600; letter-spacing: -0.01em; }

/* ---- 6. BUTTONS / INPUTS / SYNC-PILL ---- */
.button, .icon-button {
  border-radius: var(--r-sm);
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
.button:active { transform: translateY(1px); }
.primary { background: var(--ember); color: var(--ink); }
.primary:hover { background: var(--ember-hi); }
.secondary:hover, .icon-button:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.03); }

.search, .field input, .field select,
label input, label select, label textarea, .prompt-output {
  border-color: var(--line-soft);
  border-radius: var(--r-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.search:focus, .field input:focus, .field select:focus,
label input:focus, label select:focus, label textarea:focus, .prompt-output:focus {
  outline: none;
  border-color: var(--ember-55);
  box-shadow: 0 0 0 3px var(--ember-12);
}
.sync-pill { border-radius: 999px; letter-spacing: 0.05em; }
/* .online / .error keep their green/red semantics from the base sheet */

/* ---- 7. PIPELINE STAGE COLOR-RAILS (fixed 8-stage DOM order) ----
   stages[] verified in app.js (exactly 8, this order):
   1 New Lead - 2 Audit Requested - 3 Audit Booked - 4 Audit Completed
   5 Map Sent - 6 Proposal Sent - 7 Won - 8 Lost
   .pipeline is grid-template-columns: repeat(4, minmax(260px,1fr)) with
   overflow-x:auto, so items 5-8 wrap to a 2nd grid row - but :nth-child
   follows DOM order, not visual rows, so the map below is correct. */
.pipeline .column { position: relative; border-left: 3px solid var(--steel); }
.pipeline .column:nth-child(4),
.pipeline .column:nth-child(5),
.pipeline .column:nth-child(6) { border-left-color: var(--ember); }        /* mid-funnel money */
.pipeline .column:nth-child(6) .count-pill { border-color: var(--ember-55); color: var(--ember); }
.pipeline .column:nth-child(7) { border-left-color: var(--green); }        /* Won  */
.pipeline .column:nth-child(7) .count-pill { border-color: rgba(115,212,156,.5); color: var(--green); }
.pipeline .column:nth-child(8) { border-left-color: var(--red); opacity: .82; } /* Lost */

/* ---- 8. PANELS / BRAND MARK / MODALS + re-skin the cyan flash ---- */
.panel, .sidebar-card, .detail-block, .settings-grid article, .nested-panel {
  border-color: var(--line-soft);
  border-radius: var(--r-lg);
}
.panel { box-shadow: var(--shadow-1); }
.panel-header { border-bottom: 1px solid var(--line-soft); padding-bottom: var(--sp-4); }
/* Eyebrows/labels stay BONE (var(--accent)) - they appear on 12+ headers
   across the app, so tinting them ember would violate the sparing-ember
   rule. Base sheet already sets them to var(--accent); we only firm up
   the letter-spacing here and leave the color to the base rule. */
.eyebrow, .label { letter-spacing: 0.08em; }

/* .brand-mark keeps the real T+E logo SVG (bone + ember edge) on a transparent frame - not re-skinned. */
.modal-card { border-color: var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }

/* Re-point the existing flash off the off-brand cyan → ember (class/name unchanged) */
@keyframes highlightFlash {
  0%   { box-shadow: 0 0 0 2px rgba(216,162,90,0); }
  30%  { box-shadow: 0 0 0 3px var(--ember-55); }
  100% { box-shadow: 0 0 0 2px rgba(216,162,90,0); }
}

/* ---- 9. STICKY HEADERS + DENSER ROWS (single-column scroll panels only) ----
   Applied to Records + Tasks, NOT the wrapping pipeline grid. */
.records-layout .panel, #tasksView .panel { max-height: calc(100vh - 140px); overflow: auto; }
.records-layout .panel .panel-header, #tasksView .panel .panel-header {
  position: sticky; top: 0; z-index: 3;
  margin: -22px -22px 16px; padding: 18px 22px;
  background: linear-gradient(var(--panel) 80%, rgba(35,45,51,0));
  backdrop-filter: blur(3px);
}
.record-list, .task-list { gap: 6px; }
.record-row, .task-row { padding: 10px 12px; gap: 4px; background: var(--panel); }
.record-row strong, .task-row strong { font-size: 14px; line-height: 1.2; }
.record-row span, .task-row span { font-size: 12.5px; color: var(--muted); }
.record-row small, .task-row small { font-size: 11.5px; }
.record-row:nth-child(even), .task-row:nth-child(even) { background: rgba(255,255,255,0.015); }
/* keep .record-row.active tint winning over the zebra */
.record-row.active { background: var(--ember-12); }

/* ---- 10. QUICK-FILTER BAR (needs the HTML + JS snippets below) ---- */
.view-filter { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
.view-filter .search { max-width: 340px; min-height: 38px; }
.view-filter kbd {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  color: var(--muted); border: 1px solid var(--line-strong);
  padding: 3px 6px; border-radius: 4px;
}
.is-filtered-out { display: none !important; }

/* ---- 11. DEFENSIVE LEAD-BOARD STYLING (no-op until app.js emits these) ---- */
#coldLeadList, #prospectDealList { display: grid; gap: 10px; }
.prospect-row {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 12px 14px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.prospect-row:hover { transform: translateY(-1px); border-color: var(--ember-35); box-shadow: var(--shadow-2); }
.prospect-row strong { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.fit-badge {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fit-badge.high { color: var(--ember); border-color: var(--ember-55); background: var(--ember-12); }
.fit-badge.med  { color: var(--bone);  border-color: var(--line-strong); }
.fit-badge.low  { color: var(--muted); }

/* ---- 12. WARM-SIGNAL DASHBOARD: notifications feed + funnel snapshot ---- */
.notif-feed { display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.notif-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.notif-row.read { opacity: .62; }
.notif-dot {
  width: 8px; height: 8px; margin-top: 5px;
  border-radius: 999px; background: var(--muted);
}
.notif-row.sev-urgent  .notif-dot { background: var(--red); box-shadow: 0 0 8px -1px var(--red); }
.notif-row.sev-warning .notif-dot { background: var(--ember); }
.notif-row.sev-success .notif-dot { background: var(--green); }
.notif-row.sev-info    .notif-dot { background: var(--steel); }
.notif-row.sev-urgent { border-color: rgba(255,118,109,0.32); }
.notif-body { display: grid; gap: 2px; min-width: 0; }
.notif-body strong { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }
.notif-body span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.notif-meta { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }

.funnel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.funnel-stat {
  padding: var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  text-align: left;
}
.funnel-stat span {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--bone);
}
.funnel-stat p { margin: 2px 0 0; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--muted); }
.funnel-stat.key { border-color: var(--ember-20); box-shadow: var(--shadow-ember); }
.funnel-stat.key span { color: var(--ember); }

/* Webhook freshness chips (Warm Signals panel): last accepted event per provider */
.webhook-freshness { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.webhook-freshness:empty { display: none; }
.wf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}
.wf-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--muted); }
.wf-chip.wf-ok  .wf-dot { background: var(--green); }
.wf-chip.wf-idle .wf-dot { background: var(--steel); }
.wf-chip.wf-err { color: var(--red); border-color: rgba(255,118,109,0.45); background: rgba(255,118,109,0.10); }
.wf-chip.wf-err .wf-dot { background: var(--red); }