/* ─────────────────────────────────────────────────────────────────────────────
   redesign.css — App-wide visual refresh
   Loaded by every app page after style.css (all pages except the standalone
   login.html, which doesn't use the shared .nc-* component system). Overrides
   the shared .nc-* tokens/rules in place, so the whole app — sidebar, topbar,
   cards, tables, buttons, chips — shares one consistent look. The Dashboard-
   and Meetings-specific pieces (pipeline SVG, telemetry rows) live in
   index.html/app.js and leads.html/leads.js instead, since they don't apply
   anywhere else.
   ───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --nc-orange     : #FF5A1F;
  --nc-orange2    : #FF7B41;
  --nc-teal       : #0E9A63;
  --nc-teal-light : rgba(14,154,99,.12);
  --nc-dark2      : #6D82FF;

  --bg            : #F5F6F9;
  --surface       : #FFFFFF;
  --surface2      : #F3F4F8;
  --border        : #E6E8EE;
  --border2       : #EEF0F4;
  --border-strong : #D6D9E1;

  --ink           : #14161B;
  --ink2          : #3C4049;
  --ink3          : #6B7280;
  --ink4          : #9AA1AC;

  --green         : #0E9A63;
  --green-bg      : #E4F7EF;
  --amber         : #B4790E;
  --amber-bg      : #FFF3DC;
  --red           : #DC3B2C;
  --red-bg        : #FDEAE8;
  --blue          : #0A87A6;
  --blue-bg       : #E5F6FA;
  --cost          : #7C3AED;

  --shadow        : 0 1px 2px rgba(20,22,27,.04), 0 8px 24px rgba(20,22,27,.04);
  --shadow-lg     : 0 24px 64px rgba(20,22,27,.16);
  --radius        : 9px;
  --radius-lg     : 16px;
  --sidebar-w     : 240px;

  --font-display  : 'Space Grotesk', sans-serif;
  --font-mono     : 'JetBrains Mono', monospace;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background : var(--bg);
}

h1, h2,
.nc-topbar-title, .nc-page-title, .nc-card-title,
.nc-modal-title, .nc-stat-value {
  font-family: var(--font-display);
  letter-spacing: -.01em;
}

/* ── Sidebar "rail" ──────────────────────────────────────────────────────── */
.nc-sidebar { border-right-color: var(--border); }
.nc-sidebar-brand { padding: 16px 16px 18px; border-bottom-color: var(--border); }
.nc-brand-product {
  font-size: 15px; font-weight: 700;
  margin-left: auto;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink3);
}
.nc-sidebar-nav { padding: 16px 12px; }
.nc-nav-item {
  position: relative;
  border-radius: 9px;
  font-size: 13px;
  padding: 9px 10px;
  transition: background .12s, color .12s;
}
.nc-nav-item:hover { background: var(--surface2); color: var(--ink); }
.nc-nav-item.active {
  background: #FFEBE0;
  color: var(--nc-orange);
  font-weight: 600;
}
.nc-nav-item.active::before {
  content: "";
  position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 3px;
  background: var(--nc-orange);
  box-shadow: 0 0 8px rgba(255,90,31,.35);
}
.nc-nav-section-label { font-size: 10px; letter-spacing: .08em; }

/* ── Topbar + content background ────────────────────────────────────────── */
.nc-topbar { border-bottom-color: var(--border); }
.nc-topbar-title { font-size: 22px; font-weight: 700; }
.nc-topbar-sub { font-size: 13px; }
.nc-page {
  background-image: radial-gradient(circle, rgba(20,22,27,.045) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── Panels (cards) ──────────────────────────────────────────────────────── */
.nc-card {
  border-radius: var(--radius-lg);
  border-color: var(--border);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.nc-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,90,31,.55), transparent);
}
.nc-card-title { font-size: 14px; font-weight: 600; }
/* Stacked panels need breathing room by default — pages that already set
   their own margin inline (most of lead.js's cards) simply override this. */
.nc-page > .nc-card + .nc-card { margin-top: 20px; }

/* New eyebrow label used by the pipeline panel header */
.nc-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink4); display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
}
.nc-eyebrow .nc-dot-live {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3px var(--green-bg);
}

/* ── Pipeline diagram + telemetry row ───────────────────────────────────── */
.nc-pipeline-wrap { padding: 6px 4px 4px; }
.nc-pipeline-svg { width: 100%; height: 150px; display: block; }
.nc-pipe-node-value { font-family: var(--font-display); font-weight: 700; fill: var(--ink); }
.nc-pipe-node-label { font-family: var(--font-mono); font-size: 11px; fill: var(--ink4); }
.nc-pipe-conv       { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink4); }
.nc-pipe-flow-line   { stroke: var(--border-strong); stroke-width: 2; fill: none; stroke-dasharray: 5 6; animation: nc-dash 1.6s linear infinite; }
@keyframes nc-dash { to { stroke-dashoffset: -22; } }

.nc-telemetry {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--border); padding: 14px 4px;
  margin-top: 8px;
}
.nc-telemetry-item { padding: 0 22px; border-right: 1px solid var(--border); }
.nc-telemetry-item:last-child { border-right: none; }
.nc-telemetry-item:first-child { padding-left: 0; }
.nc-telemetry-label { font-size: 10px; color: var(--ink4); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.nc-telemetry-value { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--ink); }
.nc-telemetry-value.accent { color: var(--blue); }
.nc-telemetry-value.brand  { color: var(--nc-orange); }

/* ── Status chips → dot + label ──────────────────────────────────────────── */
.nc-chip { background: transparent !important; padding: 0; gap: 7px; font-weight: 600; font-size: 12px; }
.nc-chip:not(.nc-chip-processing)::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor; flex-shrink: 0; display: inline-block;
}

/* ── Buttons / icon buttons ──────────────────────────────────────────────── */
.nc-btn { border-radius: 9px; font-size: 12.5px; font-weight: 600; }
.nc-btn-primary { box-shadow: 0 3px 10px rgba(255,90,31,.28); }
.nc-btn-primary:hover { background: var(--nc-orange2); }
.nc-btn-secondary { border-color: var(--border-strong); }
.nc-btn-secondary:hover { background: var(--surface2); border-color: var(--ink4); }
.nc-btn-icon {
  border-radius: 8px;
  border-color: var(--border-strong);
}
.nc-btn-icon.nc-btn-secondary { background: transparent; }
.nc-btn-icon.nc-btn-ghost:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }

/* ── Table ───────────────────────────────────────────────────────────────── */
.nc-table th {
  font-size: 10px; letter-spacing: .07em;
  padding: 11px 20px; background: var(--surface2);
  border-top: 1px solid var(--border); border-bottom-color: var(--border);
}
.nc-table td { padding: 13px 20px; border-bottom-color: var(--border); }
.nc-table tr:hover td { background: var(--surface2); }
.nc-table .nc-company { font-size: 13px; font-weight: 600; }
.nc-table .nc-meta { font-size: 11.5px; }
.nc-mono { font-family: var(--font-mono); }
.nc-idx { color: var(--ink4); font-family: var(--font-mono); font-size: 12px; }
.nc-cost { font-family: var(--font-mono); font-weight: 600; color: var(--cost); font-size: 12.5px; }
.nc-tokens { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink4); margin-top: 2px; }

/* ── Avatars ─────────────────────────────────────────────────────────────── */
.nc-avatar { font-family: var(--font-mono); font-size: 9.5px; }
.nc-avatar-popup { border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.nc-page-btn { border-radius: 8px; font-family: var(--font-mono); }
.nc-page-btn:hover:not([disabled]) { border-color: var(--nc-orange); }

/* ── Toolbar (filter + search) ──────────────────────────────────────────── */
.nc-filter-select { border-radius: 9px; font-weight: 600; }
.nc-search-input { border-radius: 9px; }
.nc-search-input:focus, .nc-filter-select:focus {
  border-color: var(--nc-orange);
  box-shadow: 0 0 0 3px rgba(255,90,31,.12);
}

/* ── Modals / toast — inherit new tokens automatically; light polish only ── */
.nc-modal { border-radius: var(--radius-lg); }
.nc-toast-success { background: var(--green); }
.nc-toast-error   { background: var(--red); }

@media (max-width: 900px) {
  .nc-pipeline-svg { height: 170px; }
  .nc-telemetry-item { padding: 0 14px; }
}