/* ==========================================================================
   CRM <-> IOO comparison harness + "UPGRADED" component vocabulary.
   The "NOW" panes use the REAL app.css/.rc-* classes (linked from website-v2).
   The "UPGRADED" panes re-express IOO's vendor patterns (rich pop-out, stat-strip
   filters, health scoring, stage ladder, Pulse, paired conversation) on the REAL
   DataRipple theme.css tokens so the upgrade reads as native RippleCore CRM.
   All harness classes are .cmp-* ; all upgraded components are .u-* .
   ========================================================================== */

.cmp-root {
  /* upgraded semantic palette (harmonized with brand red #CC0C1F + navy #1B2433) */
  --u-green:#1a8a4d;  --u-green-bg:#e4f5ec;
  --u-amber:#b06f14;  --u-amber-bg:#faedda;
  --u-red:#c62828;    --u-red-bg:#fbe6e6;
  --u-blue:#2a63bb;   --u-blue-bg:#e6effa;
  --u-violet:#6b46c1; --u-violet-bg:#efeafc;
  --u-navy:#1b2433;
  --u-brand:#cc0c1f;
  --u-line:#dde4eb;
  --u-line-2:#eaeef3;
  --u-card-3:#eef2f7;
  --u-ink:#141a21; --u-ink-2:#47535f; --u-ink-3:#68737f;
  --u-shadow:0 1px 2px rgba(20,26,33,.05),0 6px 20px rgba(20,26,33,.06);
  --u-mono:"Ubuntu Mono","SF Mono","Cascadia Code",Consolas,monospace;
}

/* ---- reset / page ---- */
body { margin:0; }
.cmp-root { background:#eef2f6; min-height:100vh; font-family:var(--font-body,"Ubuntu",system-ui,sans-serif); color:var(--fg-2,#18293b); }
.cmp-root *,.cmp-root *::before,.cmp-root *::after { box-sizing:border-box; }

/* ---- top bar (real navy shell chrome) ---- */
.cmp-top {
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:20px;
  height:58px; padding:0 20px; background:#1b2433; color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(11,18,32,.28);
}
.cmp-brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; }
.cmp-brand .dot { width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,#cc0c1f,#a80917); display:grid; place-items:center; color:#fff; font-size:13px; font-weight:800; box-shadow:0 2px 8px rgba(204,12,31,.5); }
.cmp-brand b { font-size:15px; }
.cmp-brand span { color:#9fb0c4; font-weight:500; font-size:12.5px; }
.cmp-title { font-size:13px; color:#c6d2e0; font-weight:500; }
.cmp-title b { color:#fff; font-weight:700; }

/* surface switcher (segmented) */
.cmp-switch { margin-left:auto; display:inline-flex; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:9px; padding:3px; gap:2px; }
.cmp-switch button { border:0; background:transparent; color:#c6d2e0; font:inherit; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:all .15s ease; }
.cmp-switch button svg { width:15px; height:15px; }
.cmp-switch button:hover { color:#fff; }
.cmp-switch button.on { background:#fff; color:#1b2433; box-shadow:0 1px 3px rgba(0,0,0,.25); }

/* legend */
.cmp-legend { display:inline-flex; align-items:center; gap:14px; font-size:11.5px; color:#9fb0c4; }
.cmp-legend i { display:inline-flex; align-items:center; gap:6px; font-style:normal; }
.cmp-legend .sw { width:11px; height:11px; border-radius:3px; }
.cmp-legend .sw.now { background:#7b8aa0; }
.cmp-legend .sw.next { background:#cc0c1f; }

/* ---- split stage: two independently-scrolling columns ---- */
.cmp-stage { display:grid; grid-template-columns:1fr 1fr; height:calc(100vh - 58px); }
.cmp-col { overflow-y:auto; overflow-x:hidden; position:relative; min-width:0; }
.cmp-col.now { background:#f3f5f8; border-right:2px solid #dbe2ea; }
.cmp-col.next { background:#eef2f6; }

.cmp-colhead { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; padding:9px 18px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(6px); }
.cmp-col.now  .cmp-colhead { background:rgba(243,245,248,.94); color:#5a6b7b; border-bottom:1px solid #dbe2ea; }
.cmp-col.next .cmp-colhead { background:rgba(238,242,246,.94); color:#cc0c1f; border-bottom:1px solid #e2c3c7; }
.cmp-colhead .tag { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:20px; font-size:10px; letter-spacing:.06em; }
.cmp-col.now  .cmp-colhead .tag { background:#e4e9f0; color:#5a6b7b; }
.cmp-col.next .cmp-colhead .tag { background:#cc0c1f; color:#fff; }
.cmp-colhead .note { margin-left:auto; font-weight:500; letter-spacing:.01em; text-transform:none; font-size:11px; opacity:.85; }

.cmp-panebody { padding:18px; }
.cmp-panebody.narrow { padding:16px 16px 60px; }

/* surface show/hide */
.cmp-surface { display:none; }
.cmp-surface.on { display:block; }

/* keep real CRM tables fully visible inside the narrow panes (defeat app.css mobile column-hiding) */
.cmp-panebody .rc-table th, .cmp-panebody .rc-table td { display:table-cell !important; }
.cmp-panebody .rc-table th, .cmp-panebody .rc-table td { padding:11px 12px !important; }

/* NOW list card header stacks at pane width (real .rc-contact-list-head over-flexes < 900px) */
.cmp-panebody .rc-contact-list-head { flex-direction:column; align-items:stretch; gap:12px; }
.cmp-panebody .rc-contact-actions { flex-wrap:wrap; gap:8px; align-items:center; }
.cmp-panebody .rc-contact-search { display:flex; align-items:center; gap:8px; flex:1 1 100%; min-width:0; }
.cmp-panebody .rc-contact-search > span { display:none; }
.cmp-panebody .rc-contact-search .rc-input { flex:1; min-width:0; }
.cmp-panebody .rc-card-sub { white-space:normal; }

/* NOW record grid: recompose to 2-col + rail-below so it reads at pane width */
.cmp-panebody .rc-record-grid { grid-template-columns:220px minmax(0,1fr) !important; grid-template-areas:"left tabs" "left center" "right right" !important; column-gap:18px !important; row-gap:12px !important; }
.cmp-panebody .rc-rec-left { grid-area:left; } .cmp-panebody .rc-rec-tabs { grid-area:tabs; }
.cmp-panebody .rc-rec-center { grid-area:center; } .cmp-panebody .rc-rec-right { grid-area:right; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cmp-panebody .rc-rec-right .rc-card { margin-bottom:0; }

/* =====================================================================
   UPGRADED COMPONENTS  (.u-*)
   ===================================================================== */
.u-wrap { font-size:13.5px; line-height:1.5; color:var(--u-ink); }
.u-num { font-family:var(--u-mono); font-variant-numeric:tabular-nums; }

/* CRM tab strip (reuse real look, kept for context) already from app.css */

/* page head for upgraded */
.u-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.u-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--u-ink-3); font-weight:700; }
.u-h1 { font-size:24px; font-weight:700; color:var(--fg-1,#0b1220); letter-spacing:-.01em; margin:3px 0 2px; }
.u-sub { font-size:13px; color:var(--u-ink-2); }
.u-head-r { display:flex; align-items:center; gap:8px; }

/* ---- STAT STRIP = one-click filters ---- */
.u-stats { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:#fff; border:1px solid var(--u-line); border-radius:12px; box-shadow:var(--u-shadow); margin-bottom:14px; overflow:hidden; }
.u-stat { position:relative; padding:12px 15px 11px; min-width:0; text-align:left; border:0; background:none; font:inherit; color:inherit; cursor:pointer; transition:background .16s ease; }
.u-stat + .u-stat { border-left:1px solid var(--u-line-2); }
.u-stat:hover { background:#f6f8fb; }
.u-stat .l { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--u-ink-3); white-space:nowrap; }
.u-stat .v { font-family:var(--u-mono); font-variant-numeric:tabular-nums; font-size:22px; font-weight:700; margin-top:4px; letter-spacing:-.01em; line-height:1.1; }
.u-stat .d { font-size:10.5px; color:var(--u-ink-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-stat.good .v { color:var(--u-green); } .u-stat.warn .v { color:var(--u-amber); } .u-stat.hot .v { color:var(--u-red); }
.u-stat::after { content:""; position:absolute; top:12px; right:11px; width:6px; height:6px; border-top:1.5px solid var(--u-ink-3); border-right:1.5px solid var(--u-ink-3); transform:rotate(45deg); opacity:0; transition:opacity .16s ease; }
.u-stat:hover::after { opacity:.7; }
.u-stat.on { background:#f6f8fb; box-shadow:inset 0 2px 0 var(--u-brand); }
.u-stat.on .l { color:var(--u-brand); }
.u-stat.on::after { opacity:1; top:13px; width:7px; height:7px; border:0; border-radius:50%; background:var(--u-brand); transform:none; }

/* ---- UPGRADED TABLE ---- */
.u-tablecard { background:#fff; border:1px solid var(--u-line); border-radius:12px; box-shadow:var(--u-shadow); overflow:hidden; }
.u-tabletools { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--u-line-2); }
.u-tabletools .srch { flex:1; max-width:260px; display:flex; align-items:center; gap:7px; background:var(--u-card-3); border:1px solid var(--u-line); border-radius:8px; padding:6px 10px; color:var(--u-ink-3); font-size:12.5px; }
.u-tabletools .srch svg { width:14px; height:14px; }
.u-tabletools .spacer { flex:1; }
.u-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--u-line); background:#fff; color:var(--u-ink-2); font:inherit; font-size:12px; font-weight:600; padding:7px 12px; border-radius:8px; cursor:pointer; }
.u-btn svg { width:14px; height:14px; }
.u-btn:hover { border-color:#c3ccd6; }
.u-btn.primary { background:var(--u-brand); border-color:var(--u-brand); color:#fff; }
.u-btn.primary:hover { background:#a80917; }

.u-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.u-table thead th { text-align:left; padding:9px 12px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--u-ink-3); background:#f6f8fb; border-bottom:1px solid var(--u-line); white-space:nowrap; }
.u-table thead th.sortable { cursor:pointer; }
.u-table thead th .sar { display:inline-block; margin-left:4px; color:var(--u-brand); }
.u-table tbody td { padding:9px 12px; border-bottom:1px solid var(--u-line-2); vertical-align:middle; }
.u-table tbody tr { cursor:pointer; position:relative; transition:background .12s ease; }
.u-table tbody tr:hover { background:#f6f9fc; }
.u-table tbody tr.risk td:first-child { box-shadow:inset 3px 0 0 var(--u-red); }
.u-table tbody tr.hidden { display:none; }

.u-name { display:flex; align-items:center; gap:9px; min-width:0; }
.u-av { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700; }
.u-av.sm { width:22px; height:22px; font-size:9.5px; }
.u-nm { display:block; font-weight:650; color:var(--u-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-nsub { display:block; font-size:11px; color:var(--u-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.u-bub { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; margin-left:2px; border-radius:8px; background:var(--u-brand); color:#fff; font-size:9.5px; font-weight:800; font-family:var(--u-mono); vertical-align:middle; }
.u-owner { display:inline-flex; align-items:center; gap:6px; color:var(--u-ink-2); font-size:12px; white-space:nowrap; }

/* chips + tones */
.u-chip { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:6px; font-size:10.5px; font-weight:650; white-space:nowrap; }
.u-chip.green { background:var(--u-green-bg); color:var(--u-green); }
.u-chip.amber { background:var(--u-amber-bg); color:var(--u-amber); }
.u-chip.red { background:var(--u-red-bg); color:var(--u-red); }
.u-chip.blue { background:var(--u-blue-bg); color:var(--u-blue); }
.u-chip.violet { background:var(--u-violet-bg); color:var(--u-violet); }
.u-chip.gray { background:var(--u-card-3); color:var(--u-ink-2); }
.u-tone { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:700; }
.u-tone::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.u-tone.ahead { background:var(--u-green-bg); color:var(--u-green); }
.u-tone.watch { background:var(--u-amber-bg); color:var(--u-amber); }
.u-tone.behind { background:var(--u-red-bg); color:var(--u-red); }

/* health micro-bar in cells */
.u-hcell { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.u-hscore { font-family:var(--u-mono); font-weight:700; font-size:12.5px; font-variant-numeric:tabular-nums; }
.u-hscore.ok { color:var(--u-green); } .u-hscore.warn { color:var(--u-amber); } .u-hscore.bad { color:var(--u-red); }
.u-hbar { display:inline-block; width:44px; height:6px; border-radius:999px; background:var(--u-card-3); overflow:hidden; }
.u-hbar i { display:block; height:100%; border-radius:999px; }
.u-hbar i.ok { background:var(--u-green); } .u-hbar i.warn { background:var(--u-amber); } .u-hbar i.bad { background:var(--u-red); }
.u-next { color:var(--u-ink-2); font-size:12px; }
.u-next.none { color:var(--u-red); font-weight:600; }
.u-ago { color:var(--u-ink-3); font-size:12px; }

/* per-row quick actions (reveal on hover) */
.u-rowacts { position:absolute; top:50%; right:10px; transform:translateY(-50%); display:none; gap:4px; background:#fff; padding:4px; border:1px solid var(--u-line); border-radius:9px; box-shadow:0 4px 14px rgba(20,26,33,.14); }
.u-table tbody tr:hover .u-rowacts { display:inline-flex; }
.u-qa { width:28px; height:28px; border-radius:7px; border:0; background:var(--u-card-3); color:var(--u-ink-2); display:grid; place-items:center; cursor:pointer; }
.u-qa svg { width:15px; height:15px; }
.u-qa:hover { background:var(--u-brand); color:#fff; }

/* ---- next-action banner ---- */
.u-na { display:flex; align-items:center; gap:11px; border-radius:11px; padding:11px 14px; margin-bottom:12px; font-size:13.5px; }
.u-na .ic { width:18px; height:18px; flex:none; }
.u-na .nal { font-size:10px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; opacity:.75; }
.u-na b { font-size:14px; }
.u-na.red { background:var(--u-red-bg); color:var(--u-red); }
.u-na.amber { background:var(--u-amber-bg); color:var(--u-amber); }
.u-na.blue { background:var(--u-blue-bg); color:var(--u-blue); }
.u-na.green { background:var(--u-green-bg); color:var(--u-green); }

/* ---- health readout block ---- */
.u-health { padding:11px 14px; border:1px solid var(--u-line); border-radius:11px; background:#f7f9fb; margin-bottom:12px; }
.u-h-top { display:flex; align-items:center; gap:10px; }
.u-h-score { font-family:var(--u-mono); font-weight:700; font-size:22px; letter-spacing:-.01em; }
.u-h-lab { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--u-ink-3); }
.u-h-bar { flex:1; height:7px; border-radius:999px; background:var(--u-card-3); overflow:hidden; }
.u-h-bar i { display:block; height:100%; border-radius:999px; }
.u-h-factors { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.u-h-f { font-size:11px; color:var(--u-ink-2); background:#fff; border:1px solid var(--u-line-2); border-radius:6px; padding:2px 8px; }
.u-h-f b { font-family:var(--u-mono); }
.u-h-f b.up { color:var(--u-green); } .u-h-f b.down { color:var(--u-red); }

/* ---- stage ladder ---- */
.u-ladder { display:flex; margin:6px 0 14px; }
.u-ladder .step { flex:1; text-align:center; position:relative; padding-top:19px; }
.u-ladder .step::before { content:""; position:absolute; top:7px; left:0; right:0; height:3px; background:var(--u-line); }
.u-ladder .step:first-child::before { left:50%; }
.u-ladder .step:last-child::before { right:50%; }
.u-ladder .dot { position:absolute; top:2px; left:50%; transform:translateX(-50%); width:13px; height:13px; border-radius:50%; background:#fff; border:3px solid var(--u-line); z-index:1; }
.u-ladder .step.done .dot { background:var(--u-green); border-color:var(--u-green); }
.u-ladder .step.done::before { background:var(--u-green); }
.u-ladder .step.now .dot { background:#fff; border-color:var(--u-brand); box-shadow:0 0 0 4px var(--u-red-bg); }
.u-ladder .sn { font-size:10.5px; color:var(--u-ink-3); font-weight:600; line-height:1.3; padding:0 2px; }
.u-ladder .step.now .sn { color:var(--u-brand); font-weight:700; }

/* ---- attribute grid ---- */
.u-attrs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--u-line-2); border:1px solid var(--u-line-2); border-radius:10px; overflow:hidden; margin-bottom:14px; }
.u-attr { background:#fff; padding:10px 13px; }
.u-attr .ak { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--u-ink-3); font-weight:650; }
.u-attr .av { font-size:13px; font-weight:600; margin-top:3px; color:var(--u-ink); }

/* ---- cards / section headers ---- */
.u-card { background:#fff; border:1px solid var(--u-line); border-radius:12px; box-shadow:var(--u-shadow); overflow:hidden; margin-bottom:14px; }
.u-card-h { display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid var(--u-line-2); }
.u-card-h .t { font-size:13px; font-weight:700; color:var(--u-ink); }
.u-card-h .ct { font-size:11px; color:var(--u-ink-3); font-weight:600; }
.u-card-h .r { margin-left:auto; }
.u-card-b { padding:13px 14px; }
.u-sec { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--u-ink-2); margin:16px 0 8px; }
.u-sec .ic { width:14px; height:14px; color:var(--u-ink-3); }

/* ---- connected timeline (spine) ---- */
.u-tl { list-style:none; margin:0; padding:0; position:relative; }
.u-tl::before { content:""; position:absolute; left:14px; top:6px; bottom:6px; width:2px; background:var(--u-line); }
.u-tl li { position:relative; display:flex; gap:12px; padding:0 0 15px 0; }
.u-tl .tic { position:relative; z-index:1; width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; background:#fff; border:2px solid var(--u-line); color:var(--u-ink-3); }
.u-tl .tic svg { width:15px; height:15px; }
.u-tl .tic.ok { border-color:var(--u-green); color:var(--u-green); background:var(--u-green-bg); }
.u-tl .tic.call { border-color:var(--u-blue); color:var(--u-blue); background:var(--u-blue-bg); }
.u-tl .tic.email { border-color:var(--u-violet); color:var(--u-violet); background:var(--u-violet-bg); }
.u-tl .tic.warn { border-color:var(--u-amber); color:var(--u-amber); background:var(--u-amber-bg); }
.u-tl .tic.deal { border-color:var(--u-brand); color:var(--u-brand); background:var(--u-red-bg); }
.u-tl .tb { flex:1; min-width:0; padding-top:2px; }
.u-tl .th { display:flex; align-items:baseline; gap:8px; }
.u-tl .tt { font-size:13px; font-weight:650; color:var(--u-ink); }
.u-tl .tm { margin-left:auto; font-size:11px; color:var(--u-ink-3); font-family:var(--u-mono); white-space:nowrap; }
.u-tl .tby { font-size:11px; color:var(--u-ink-3); margin-top:1px; }
.u-tl .tx { font-size:12.5px; line-height:1.5; color:var(--u-ink-2); margin-top:5px; }

/* ---- PULSE ---- */
.u-pulse { border:1px solid var(--u-line); border-radius:12px; background:#fff; padding:12px 13px; box-shadow:var(--u-shadow); }
.u-pulse-hd { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--u-violet); margin-bottom:8px; }
.u-pulse-hd svg { width:14px; height:14px; }
.u-pulse-hd .b { margin-left:auto; font-size:9px; font-weight:800; color:var(--u-ink-3); background:var(--u-card-3); border-radius:5px; padding:2px 6px; text-transform:none; letter-spacing:0; }
.u-pulse-h { font-size:13.5px; font-weight:800; line-height:1.35; margin-bottom:9px; color:var(--u-ink); }
.u-pulse-l { display:flex; gap:7px; font-size:12px; color:var(--u-ink-2); line-height:1.45; margin-bottom:6px; }
.u-pulse-l svg { width:13px; height:13px; color:var(--u-ink-3); flex:none; margin-top:2px; }
.u-pulse-l b { color:var(--u-ink); }
.u-pulse-acts { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px; }
.u-pulse-acts button { font-size:11px; font-weight:700; color:var(--u-ink-2); background:#fff; border:1px solid var(--u-line); border-radius:8px; padding:5px 9px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.u-pulse-acts button svg { width:12px; height:12px; }
.u-pulse-acts button:hover { border-color:var(--u-violet); color:var(--u-violet); }
.u-pulse-acts .soon { font-size:10px; color:var(--u-ink-3); font-style:italic; }

/* ---- conversation ---- */
.u-conv-body { display:flex; flex-direction:column; gap:2px; }
.u-msg { display:flex; gap:9px; padding:3px 0 11px; }
.u-msg .tx { flex:1; min-width:0; }
.u-msg .mh { display:flex; align-items:baseline; gap:7px; }
.u-msg .nm { font-size:12.5px; font-weight:800; color:var(--u-ink); }
.u-msg .ts { font-size:10px; color:var(--u-ink-3); font-family:var(--u-mono); }
.u-msg .src { display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; color:var(--u-ink-3); background:var(--u-card-3); border-radius:5px; padding:1px 6px; }
.u-msg .bd { font-size:12.5px; line-height:1.5; color:var(--u-ink-2); margin-top:3px; }
.u-at { color:var(--u-blue); background:var(--u-blue-bg); border-radius:4px; padding:0 3px; font-weight:700; }
.u-comp { margin-top:8px; border:1px solid var(--u-line); border-radius:11px; background:#fff; }
.u-comp textarea { width:100%; border:0; outline:0; background:transparent; resize:none; font:inherit; font-size:12.5px; padding:9px 11px 4px; min-height:38px; color:var(--u-ink); }
.u-comp .cbar { display:flex; align-items:center; gap:8px; padding:4px 8px 8px; }
.u-comp .cbar .mini { color:var(--u-ink-3); display:inline-flex; }
.u-comp .cbar .mini svg { width:16px; height:16px; }
.u-comp .post { margin-left:auto; font-size:12px; font-weight:800; color:#fff; background:var(--u-brand); border:0; border-radius:8px; padding:7px 14px; cursor:pointer; }

/* ---- linked project / deal chip (projects <-> CRM) ---- */
.u-deal { border:1px solid var(--u-line); border-left:3px solid var(--u-brand); border-radius:10px; background:linear-gradient(180deg,#fff,#fbfcfe); padding:12px 13px; }
.u-deal .dl { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--u-brand); margin-bottom:6px; }
.u-deal .dl svg { width:13px; height:13px; }
.u-deal .dn { font-size:14px; font-weight:700; color:var(--u-ink); }
.u-deal .drow { display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
.u-deal .dv { font-family:var(--u-mono); font-weight:700; font-size:14px; color:var(--u-ink); }
.u-deal .dgo { margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--u-brand); cursor:pointer; }
.u-deal .dgo svg { width:14px; height:14px; }
.u-deal .dmeta { display:flex; gap:14px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--u-line); }
.u-deal .dmeta .m { font-size:11px; color:var(--u-ink-3); }
.u-deal .dmeta .m b { display:block; font-size:12.5px; color:var(--u-ink); font-weight:650; margin-top:1px; }

/* record identity header (upgraded) */
.u-id { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.u-id .big { width:58px; height:58px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:20px; font-weight:700; }
.u-id .who { min-width:0; flex:1; }
.u-id .nm { font-size:20px; font-weight:700; color:var(--fg-1,#0b1220); letter-spacing:-.01em; }
.u-id .ti { font-size:12.5px; color:var(--u-ink-2); margin-top:1px; }
.u-id .idlinks { display:flex; align-items:center; gap:10px; margin-top:5px; font-size:12px; }
.u-id .idlinks a { color:var(--u-brand); text-decoration:none; font-weight:600; }
.u-id .idacts { display:flex; gap:7px; align-items:center; }

.u-rec-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }

/* =====================================================================
   PAIRED POP-OUT MODAL (rich record opens in place)
   ===================================================================== */
.u-modal { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(11,18,32,.55); opacity:0; pointer-events:none; transition:opacity .18s ease; }
.u-modal.show { opacity:1; pointer-events:auto; }
.u-modal-panel { background:#fff; border-radius:14px; width:min(1060px,96vw); max-height:90vh; display:flex; flex-direction:row; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.45); transform:translateY(12px) scale(.985); transition:transform .2s ease; position:relative; }
.u-modal.show .u-modal-panel { transform:none; }
.u-mo-x { position:absolute; top:12px; right:12px; z-index:6; width:30px; height:30px; border:0; border-radius:8px; background:#eef2f7; color:var(--u-ink-2); cursor:pointer; display:grid; place-items:center; }
.u-mo-x svg { width:16px; height:16px; }
.u-mo-left { flex:0 0 60%; min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--u-line); }
.u-mo-right { flex:1; min-width:0; display:flex; flex-direction:column; background:#f7f9fb; }
.u-mo-head { padding:16px 18px 12px; border-bottom:1px solid var(--u-line); }
.u-mo-body { padding:14px 18px 18px; overflow-y:auto; flex:1; }
.u-mo-chd { padding:13px 16px; border-bottom:1px solid var(--u-line); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--u-ink-3); }
.u-mo-cbody { padding:13px 16px; overflow-y:auto; flex:1; }
.u-mo-comp { padding:10px 16px 14px; border-top:1px solid var(--u-line); }

/* misc */
.u-muted { color:var(--u-ink-3); }
.u-hint { font-size:11.5px; color:var(--u-ink-3); background:#fff; border:1px dashed var(--u-line); border-radius:8px; padding:8px 11px; margin-bottom:12px; display:flex; gap:8px; align-items:flex-start; }
.u-hint svg { width:14px; height:14px; color:var(--u-brand); flex:none; margin-top:1px; }
.cmp-nowcallout { font-size:11.5px; color:#7a5; background:#fff; border:1px dashed #cdd8e8; border-radius:8px; padding:8px 11px; margin-bottom:12px; display:flex; gap:8px; align-items:flex-start; color:#8a6d3b; }
.cmp-nowcallout svg { width:14px; height:14px; color:#b06f14; flex:none; margin-top:1px; }

/* ---- NOW imports dropzone (faithful to the standalone Imports tab) ---- */
.cmp-dropzone { border:2px dashed var(--border,#cdd8e8); border-radius:12px; padding:44px 20px; text-align:center; background:var(--surface-1,rgba(11,18,32,.02)); }
.cmp-dropzone .big { font-size:16px; font-weight:700; color:var(--fg-1,#0b1220); }
.cmp-dropzone .sm { font-size:12px; margin-top:7px; color:var(--fg-3,#5a6b7b); }

/* =====================================================================
   UPGRADED · JOURNEY (IOO ladder timeline per deal)
   ===================================================================== */
.u-jrow { background:#fff; border:1px solid var(--u-line); border-radius:11px; box-shadow:var(--u-shadow); padding:12px 14px 13px; margin-bottom:10px; cursor:pointer; transition:box-shadow .14s ease, border-color .14s ease; }
.u-jrow:hover { border-color:#c7d1dd; box-shadow:0 3px 8px rgba(20,26,33,.09),0 12px 28px rgba(20,26,33,.10); }
.u-jrow.risk { border-left:3px solid var(--u-red); }
.u-jtop { display:flex; align-items:flex-start; gap:10px; margin-bottom:2px; }
.u-jtitle { font-weight:700; font-size:13.5px; color:var(--u-ink); line-height:1.3; }
.u-jsub { font-size:11.5px; color:var(--u-ink-3); margin-top:1px; }
.u-jmeta { margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
.u-jage { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.u-jage.ontrack { background:var(--u-green-bg); color:var(--u-green); }
.u-jage.aging { background:var(--u-amber-bg); color:var(--u-amber); }
.u-jage.overdue { background:var(--u-red-bg); color:var(--u-red); }
.u-jnext { font-size:11.5px; color:var(--u-ink-2); margin-top:7px; }
.u-jnext b { color:var(--u-ink); }
.u-jnext.none { color:var(--u-red); font-weight:600; }
/* SLA-tinted current node on the ladder */
.u-ladder .step.now.aging .dot { border-color:var(--u-amber); box-shadow:0 0 0 4px var(--u-amber-bg); }
.u-ladder .step.now.aging .sn { color:var(--u-amber); }
.u-ladder .step.now.overdue .dot { border-color:var(--u-red); box-shadow:0 0 0 4px var(--u-red-bg); }
.u-ladder .step.now.overdue .sn { color:var(--u-red); }
.u-jlegend { display:flex; flex-wrap:wrap; gap:14px; font-size:11px; color:var(--u-ink-3); margin:2px 2px 12px; }
.u-jlegend i { display:inline-flex; align-items:center; gap:6px; font-style:normal; }
.u-jlegend .d { width:9px; height:9px; border-radius:50%; }

/* =====================================================================
   UPGRADED · IMPORTS (pill + popup, replaces the standalone tab)
   ===================================================================== */
.u-import { background:#fff; border:1px solid var(--u-line); border-radius:12px; box-shadow:var(--u-shadow); overflow:hidden; }
.u-import-h { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--u-line-2); }
.u-import-h .ic { width:34px; height:34px; border-radius:8px; background:var(--u-violet-bg); color:var(--u-violet); display:grid; place-items:center; flex:none; }
.u-import-h .ic svg { width:18px; height:18px; }
.u-import-h .t { font-size:13.5px; font-weight:700; color:var(--u-ink); }
.u-import-h .s { font-size:11.5px; color:var(--u-ink-3); margin-top:1px; }
.u-import-b { padding:14px; }
.u-import-lab { font-size:11px; font-weight:700; color:var(--u-ink-2); margin-bottom:6px; }
.u-import-ta { width:100%; min-height:80px; border:1px solid var(--u-line); border-radius:9px; padding:9px 11px; font-size:12px; font-family:var(--u-mono); resize:vertical; color:var(--u-ink); background:#fff; }
.u-import-ta:focus { outline:none; border-color:var(--u-brand); }
.u-import-row { display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap; }
.u-import-hints { font-size:10.5px; color:var(--u-ink-3); flex:1; min-width:180px; }
.u-import-review { display:flex; gap:16px; margin-top:12px; padding:10px 13px; background:var(--u-card-3); border-radius:9px; font-size:12px; align-items:center; }
.u-import-review .r b { font-family:var(--u-mono); font-weight:700; font-size:14px; margin-right:4px; }
.u-import-review .r.new b { color:var(--u-green); } .u-import-review .r.match b { color:var(--u-blue); } .u-import-review .r.dupe b { color:var(--u-amber); }
.u-import-review .note { margin-left:auto; font-size:10.5px; color:var(--u-ink-3); font-style:italic; }
.u-pillrow { display:flex; align-items:center; gap:8px; padding:9px 12px; background:#fff; border:1px solid var(--u-line); border-radius:10px; box-shadow:var(--u-shadow); margin-bottom:12px; }
.u-pillrow .lbl { font-size:11.5px; color:var(--u-ink-3); }
.u-pillrow .spacer { flex:1; }
.u-btn.hot { border-color:var(--u-brand); color:var(--u-brand); box-shadow:0 0 0 3px var(--u-red-bg); }
.u-modal-panel.solo { flex-direction:column; width:min(600px,94vw); }
.u-modal-panel.solo .u-import { border:0; box-shadow:none; }

/* subtle scrollbars in panes */
.cmp-col::-webkit-scrollbar { width:10px; }
.cmp-col::-webkit-scrollbar-thumb { background:#c7d1dd; border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
.cmp-col::-webkit-scrollbar-track { background:transparent; }