/* ═══════════════════════════════════════════════════════════════════
   TAKUMI CRM v2 — Command Center design system
   Tokens + components for the rebuilt dashboard (crm-dashboard.js).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --cc-bg: #f6f7fb;
  --cc-card: #ffffff;
  --cc-border: #e9ebf2;
  --cc-ink: #16181d;
  --cc-ink-2: #5b6271;
  --cc-ink-3: #9aa1b0;
  --cc-brand: #6366f1;
  --cc-brand-soft: #eef2ff;
  --cc-green: #10b981;
  --cc-green-soft: #ecfdf5;
  --cc-red: #ef4444;
  --cc-red-soft: #fef2f2;
  --cc-amber: #f59e0b;
  --cc-amber-soft: #fffbeb;
  --cc-blue: #3b82f6;
  --cc-radius: 14px;
  --cc-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --cc-shadow-hover: 0 4px 14px rgba(16,24,40,.10);
}

.cc { max-width: 1280px; margin: 0 auto; color: var(--cc-ink);
      font-feature-settings: "tnum"; }
.cc * { box-sizing: border-box; }

/* ── Header ── */
.cc-head { display:flex; align-items:flex-end; justify-content:space-between;
           gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.cc-head h2 { margin:0; font-size:24px; font-weight:700; letter-spacing:-.02em; }
.cc-head .cc-sub { color:var(--cc-ink-3); font-size:13px; margin-top:3px; }
.cc-chips { display:flex; gap:8px; flex-wrap:wrap; }
.cc-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px;
           font-weight:600; padding:6px 12px; border-radius:999px;
           background:var(--cc-card); border:1px solid var(--cc-border);
           color:var(--cc-ink-2); box-shadow:var(--cc-shadow); }
.cc-chip.hot { background:#fff7ed; border-color:#fed7aa; color:#c2410c; }

/* ── Cards ── */
.cc-card { background:var(--cc-card); border:1px solid var(--cc-border);
           border-radius:var(--cc-radius); box-shadow:var(--cc-shadow);
           padding:18px 20px; transition: box-shadow .15s ease; }
.cc-card:hover { box-shadow:var(--cc-shadow-hover); }
.cc-card h3 { margin:0 0 12px; font-size:13px; font-weight:700; color:var(--cc-ink-2);
              text-transform:uppercase; letter-spacing:.05em; display:flex;
              align-items:center; gap:7px; }
.cc-card h3 .cc-link { margin-left:auto; font-size:11px; font-weight:600;
              color:var(--cc-brand); cursor:pointer; text-transform:none; letter-spacing:0; }

/* ── Grids ── */
.cc-row { display:grid; gap:14px; margin-bottom:14px; }
.cc-row.hero  { grid-template-columns: 1.25fr 1fr; }
.cc-row.duo   { grid-template-columns: 1fr 1.3fr; }
.cc-row.kpis  { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 980px) { .cc-row.hero, .cc-row.duo { grid-template-columns: 1fr; } }

/* ── KPI tiles ── */
.cc-kpi { background:var(--cc-card); border:1px solid var(--cc-border);
          border-radius:var(--cc-radius); box-shadow:var(--cc-shadow);
          padding:14px 16px; position:relative; overflow:hidden; }
.cc-kpi .lbl { font-size:11px; font-weight:700; color:var(--cc-ink-3);
               text-transform:uppercase; letter-spacing:.05em; }
.cc-kpi .val { font-size:24px; font-weight:800; letter-spacing:-.02em; margin-top:4px; }
.cc-kpi .sub { font-size:11px; color:var(--cc-ink-3); margin-top:3px; }
.cc-delta { display:inline-flex; align-items:center; gap:3px; font-size:11px;
            font-weight:700; padding:2px 8px; border-radius:999px; margin-top:7px; }
.cc-delta.up   { color:#067647; background:var(--cc-green-soft); }
.cc-delta.down { color:#b42318; background:var(--cc-red-soft); }
.cc-delta.flat { color:var(--cc-ink-3); background:#f2f4f7; }
.cc-kpi svg.spark { position:absolute; right:10px; bottom:8px; opacity:.9; }

/* ── My Day list ── */
.cc-day-item { display:flex; align-items:center; gap:10px; padding:8px 10px;
               border-radius:9px; font-size:13px; cursor:pointer; }
.cc-day-item:hover { background:#f6f7fb; }
.cc-day-item .ico { width:26px; height:26px; border-radius:8px; display:flex;
               align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.cc-day-item .t { flex:1; min-width:0; }
.cc-day-item .t b { display:block; font-weight:600; color:var(--cc-ink);
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-day-item .t span { font-size:11px; color:var(--cc-ink-3); }
.cc-day-item .tag { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; }
.cc-empty { color:var(--cc-ink-3); font-size:13px; padding:14px 4px; text-align:center; }

/* ── AI verdict ── */
.cc-ai { background:linear-gradient(135deg,#1e1b4b 0%, #4338ca 100%);
         border:none; color:#eef2ff; }
.cc-ai h3 { color:#c7d2fe; }
.cc-ai .cc-ai-count { display:inline-flex; gap:14px; margin-bottom:10px; }
.cc-ai .cc-ai-count b { font-size:22px; font-weight:800; display:block; }
.cc-ai .cc-ai-count span { font-size:10px; text-transform:uppercase;
         letter-spacing:.06em; opacity:.75; }
.cc-ai-item { padding:9px 11px; border-radius:9px; background:rgba(255,255,255,.08);
         margin-bottom:7px; font-size:12.5px; line-height:1.45; cursor:pointer; }
.cc-ai-item:hover { background:rgba(255,255,255,.14); }
.cc-ai-item .sev { font-size:9px; font-weight:800; letter-spacing:.07em;
         padding:1px 7px; border-radius:999px; margin-right:7px; vertical-align:1px; }
.cc-ai-item .sev.critical { background:#fecaca; color:#7f1d1d; }
.cc-ai-item .sev.warn     { background:#fde68a; color:#78350f; }

/* ── Target rings ── */
.cc-rings { display:flex; gap:18px; flex-wrap:wrap; }
.cc-ring { text-align:center; width:124px; }
.cc-ring svg { transform:rotate(-90deg); }
.cc-ring .pc  { font-size:19px; font-weight:800; }
.cc-ring .who { font-size:12px; font-weight:700; margin-top:6px;
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-ring .meta{ font-size:10.5px; color:var(--cc-ink-3); margin-top:2px; line-height:1.45; }
.cc-pace { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; }
.cc-pace.ahead  { background:var(--cc-green-soft); color:#067647; }
.cc-pace.behind { background:var(--cc-red-soft); color:#b42318; }

/* ── Leaderboard ── */
.cc-lb-row { display:flex; align-items:center; gap:11px; padding:9px 10px;
             border-radius:10px; }
.cc-lb-row.me { background:var(--cc-brand-soft); }
.cc-lb-row .rk { width:26px; height:26px; border-radius:8px; background:#f2f4f7;
             font-size:12px; font-weight:800; display:flex; align-items:center;
             justify-content:center; color:var(--cc-ink-2); flex-shrink:0; }
.cc-lb-row:nth-child(1) .rk { background:#fef3c7; color:#92400e; }
.cc-lb-row .nm { flex:1; min-width:0; }
.cc-lb-row .nm b { display:block; font-size:13px; font-weight:700; }
.cc-lb-row .nm .bar { height:5px; border-radius:3px; background:#eef0f4;
             margin-top:5px; overflow:hidden; }
.cc-lb-row .nm .bar i { display:block; height:100%; border-radius:3px;
             background:linear-gradient(90deg,var(--cc-brand),#8b5cf6); }
.cc-lb-row .vals { text-align:right; font-size:12px; }
.cc-lb-row .vals b { display:block; font-size:13.5px; font-weight:800; color:var(--cc-green); }
.cc-lb-row .vals span { color:var(--cc-ink-3); font-size:10.5px; }
.cc-mv { font-size:10.5px; font-weight:800; width:34px; text-align:center; flex-shrink:0; }
.cc-mv.up   { color:#067647; } .cc-mv.down { color:#b42318; } .cc-mv.flat { color:var(--cc-ink-3); }

/* ── Heatmap ── */
.cc-heat { display:grid; grid-auto-flow:column; grid-template-rows:repeat(7, 13px);
           gap:3px; overflow-x:auto; padding-bottom:4px; }
.cc-heat i { width:13px; height:13px; border-radius:3px; background:#eef0f4; }
.cc-heat i.l1 { background:#c7d2fe; } .cc-heat i.l2 { background:#818cf8; }
.cc-heat i.l3 { background:#6366f1; } .cc-heat i.l4 { background:#4338ca; }

/* ── Bottleneck table ── */
.cc-bn-row { display:grid; grid-template-columns: 1fr 56px 110px 80px 110px;
             gap:8px; align-items:center; padding:8px 10px; font-size:12.5px;
             border-radius:9px; }
.cc-bn-row:hover { background:#f6f7fb; }
.cc-bn-row.hd { font-size:10px; font-weight:800; color:var(--cc-ink-3);
             text-transform:uppercase; letter-spacing:.05em; }
.cc-bn-risk { color:#b42318; font-weight:700; }

/* ── Skeleton loaders ── */
@keyframes cc-shimmer { 0% {background-position:-460px 0} 100% {background-position:460px 0} }
.cc-skel { border-radius:var(--cc-radius); background:#eef0f4 linear-gradient(90deg,
           #eef0f4 0px, #f8f9fc 60px, #eef0f4 120px); background-size:460px;
           animation:cc-shimmer 1.1s infinite linear; }

/* ── Count-up ── */
.cc-pop { animation: cc-pop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes cc-pop { 0% { transform:scale(.92); opacity:.4 } 100% { transform:scale(1); opacity:1 } }

/* ═══ Sales OS additions: command palette, entity cards, chips, bulk bar ═══ */

/* ── Command palette (Ctrl+K) ── */
.ck-bd { position:fixed; inset:0; background:rgba(13,16,28,.45); backdrop-filter:blur(3px);
         z-index:3000; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; }
.ck { width:min(640px, 92vw); background:var(--cc-card); border-radius:16px;
      box-shadow:0 24px 70px rgba(8,12,30,.35); overflow:hidden; animation:cc-pop .18s ease; }
.ck input { width:100%; border:none; outline:none; padding:18px 20px; font-size:16px;
      color:var(--cc-ink); background:transparent; box-sizing:border-box; }
.ck-hint { padding:0 20px 10px; font-size:11px; color:var(--cc-ink-3); display:flex; gap:14px; }
.ck-list { max-height:46vh; overflow-y:auto; border-top:1px solid var(--cc-border); padding:6px; }
.ck-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px;
      cursor:pointer; font-size:13.5px; }
.ck-item.sel, .ck-item:hover { background:var(--cc-brand-soft); }
.ck-item .ic { width:30px; height:30px; border-radius:9px; display:flex; align-items:center;
      justify-content:center; font-size:14px; flex-shrink:0; background:#f2f4f7; }
.ck-item .tx { flex:1; min-width:0; }
.ck-item .tx b { display:block; font-weight:650; color:var(--cc-ink); white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis; }
.ck-item .tx span { font-size:11.5px; color:var(--cc-ink-3); }
.ck-item .k { font-size:10px; color:var(--cc-ink-3); border:1px solid var(--cc-border);
      border-radius:5px; padding:1px 6px; }
.ck-group { font-size:10px; font-weight:800; color:var(--cc-ink-3); text-transform:uppercase;
      letter-spacing:.07em; padding:10px 14px 4px; }

/* ── Smart view chips (deals toolbar) ── */
.sv-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.sv-chip { padding:7px 14px; border-radius:999px; border:1px solid var(--cc-border);
      background:var(--cc-card); color:var(--cc-ink-2); font-size:12.5px; font-weight:600;
      cursor:pointer; transition:all .12s; }
.sv-chip:hover { border-color:var(--cc-brand); color:var(--cc-brand); }
.sv-chip.on { background:var(--cc-brand); border-color:var(--cc-brand); color:#fff; }

/* ── Pipeline summary strip ── */
.ps-strip { display:flex; gap:22px; flex-wrap:wrap; background:var(--cc-card);
      border:1px solid var(--cc-border); border-radius:var(--cc-radius);
      box-shadow:var(--cc-shadow); padding:13px 20px; margin-bottom:14px; }
.ps-strip .it b { display:block; font-size:18px; font-weight:800; letter-spacing:-.01em; }
.ps-strip .it span { font-size:10.5px; color:var(--cc-ink-3); text-transform:uppercase;
      letter-spacing:.05em; font-weight:700; }

/* ── Bulk action bar ── */
.bulk-bar { position:sticky; bottom:14px; z-index:50; display:flex; gap:10px; align-items:center;
      background:#16181d; color:#fff; border-radius:12px; padding:11px 16px;
      box-shadow:0 10px 30px rgba(8,12,30,.35); animation:cc-pop .2s ease; }
.bulk-bar b { font-size:13px; }
.bulk-bar select { padding:7px 10px; border-radius:7px; border:none; font-size:12.5px; }
.bulk-bar button { padding:8px 14px; border:none; border-radius:8px; cursor:pointer;
      font-size:12.5px; font-weight:700; }

/* ── Entity card grid (contacts & companies) ── */
.eg { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:14px; }
.eg-card { background:var(--cc-card); border:1px solid var(--cc-border);
      border-radius:var(--cc-radius); box-shadow:var(--cc-shadow); padding:16px;
      cursor:pointer; transition:all .14s; position:relative; }
.eg-card:hover { box-shadow:var(--cc-shadow-hover); transform:translateY(-2px); }
.eg-card .hd { display:flex; gap:11px; align-items:center; margin-bottom:10px; }
.eg-av { width:42px; height:42px; border-radius:12px; display:flex; align-items:center;
      justify-content:center; font-size:15px; font-weight:800; color:#fff; flex-shrink:0; }
.eg-card .nm { min-width:0; }
.eg-card .nm b { display:block; font-size:14.5px; font-weight:700; color:var(--cc-ink);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eg-card .nm span { font-size:11.5px; color:var(--cc-ink-3); white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis; display:block; }
.eg-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.eg-tag { font-size:10px; font-weight:700; padding:2.5px 9px; border-radius:999px; }
.eg-tag.green { background:var(--cc-green-soft); color:#067647; }
.eg-tag.amber { background:var(--cc-amber-soft); color:#92400e; }
.eg-tag.gray  { background:#f2f4f7; color:var(--cc-ink-3); }
.eg-tag.blue  { background:#eff6ff; color:#1d4ed8; }
.eg-stats { display:flex; gap:16px; font-size:11.5px; color:var(--cc-ink-2);
      border-top:1px solid #f3f4f7; padding-top:10px; }
.eg-stats b { color:var(--cc-ink); font-weight:750; }
.eg-actions { position:absolute; top:12px; right:12px; display:flex; gap:5px; opacity:0;
      transition:opacity .12s; }
.eg-card:hover .eg-actions { opacity:1; }
.eg-actions a, .eg-actions button { width:27px; height:27px; border-radius:8px; border:1px solid var(--cc-border);
      background:var(--cc-card); display:flex; align-items:center; justify-content:center;
      font-size:12px; cursor:pointer; text-decoration:none; }

/* ── Modern deals table (re-skin) ── */
.dt { width:100%; border-collapse:separate; border-spacing:0 7px; font-size:13px; }
.dt thead th { padding:4px 14px; text-align:left; font-size:10px; font-weight:800;
      color:var(--cc-ink-3); text-transform:uppercase; letter-spacing:.06em; }
.dt tbody tr { background:var(--cc-card); box-shadow:var(--cc-shadow); cursor:pointer;
      transition:box-shadow .12s; }
.dt tbody tr:hover { box-shadow:var(--cc-shadow-hover); }
.dt tbody td { padding:13px 14px; border-top:1px solid var(--cc-border);
      border-bottom:1px solid var(--cc-border); }
.dt tbody td:first-child { border-left:1px solid var(--cc-border);
      border-radius:12px 0 0 12px; }
.dt tbody td:last-child { border-right:1px solid var(--cc-border);
      border-radius:0 12px 12px 0; }

/* ═══════════════════════════════════════════════════════════════════
   CRM v2 — DEAL / LEAD DRAWER redesign (Command Center card system)
   Prefix: .ccd-  (cc drawer). Replaces the old inline-styled left panel.
   ═══════════════════════════════════════════════════════════════════ */

/* Drawer shell + header */
.ccd-drawer { position:fixed; right:0; top:0; bottom:0; width:min(92vw,1200px);
      background:var(--cc-bg); border-left:1px solid var(--cc-border); z-index:500;
      box-shadow:-8px 0 30px rgba(16,24,40,.14); display:flex; flex-direction:column; }
.ccd-head { display:flex; align-items:center; gap:14px; padding:15px 20px; flex-shrink:0;
      background:linear-gradient(180deg,#fbfbff,#fff); border-bottom:1px solid var(--cc-border); }
.ccd-head .ttl { font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--cc-ink);
      display:flex; align-items:center; gap:9px; margin:0; }
.ccd-head .sub { font-size:11.5px; color:var(--cc-ink-3); margin-top:3px; display:flex;
      gap:8px; align-items:center; flex-wrap:wrap; }
.ccd-head .acts { margin-left:auto; display:flex; gap:8px; align-items:center; }

.ccd-pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
      padding:3px 9px; border-radius:999px; }
.ccd-pill.open { background:var(--cc-green-soft); color:#047857; }
.ccd-pill.won  { background:var(--cc-green-soft); color:#047857; }
.ccd-pill.lost { background:var(--cc-red-soft); color:#b91c1c; }
.ccd-pill.hold { background:var(--cc-amber-soft); color:#92620c; }
.ccd-pill.lead { background:var(--cc-blue-soft,#eff6ff); color:#1d4ed8; }
.ccd-pill.id   { background:#f1f2f7; color:var(--cc-ink-2); font-variant-numeric:tabular-nums; }

.ccd-btn { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
      padding:8px 13px; border-radius:10px; border:1px solid var(--cc-border); background:#fff;
      color:var(--cc-ink-2); cursor:pointer; transition:.15s; white-space:nowrap; }
.ccd-btn:hover { border-color:#d3d6e0; box-shadow:var(--cc-shadow); transform:translateY(-1px); }
.ccd-btn.wa    { background:var(--cc-wa-soft,#e6f4ee); color:var(--cc-wa,#128c4b); border-color:#b7e0ca; }
.ccd-btn.ai    { background:var(--cc-brand-soft); color:var(--cc-brand); border-color:#c7d2fe; }
.ccd-btn.brand { background:var(--cc-brand); color:#fff; border-color:var(--cc-brand); }
.ccd-btn.icon  { padding:8px 10px; }
.ccd-x { border:none; background:none; font-size:23px; color:var(--cc-ink-3); cursor:pointer;
      padding:0 4px; line-height:1; }
.ccd-x:hover { color:var(--cc-ink); }

/* Body split */
.ccd-body { flex:1; display:grid; grid-template-columns:378px 1fr; overflow:hidden; min-height:0; }
.ccd-rail { border-right:1px solid var(--cc-border); overflow-y:auto; padding:15px;
      display:flex; flex-direction:column; gap:12px; background:var(--cc-bg);
      /* contain scroll so the hub page behind the drawer doesn't scroll too */
      overscroll-behavior:contain; min-height:0; }
/* Cards must keep their natural height — without this, the column flexbox shrinks
   them to fit and overflow:hidden clips the content (e.g. the hero's confidence). */
.ccd-rail > * { flex:0 0 auto; }
/* The whole drawer contains its overscroll, so scrolling any region inside it never
   chains to the hub page behind. One clean rule on the fixed root — no attribute
   substring selectors (those get evaluated against the CRM's very inline-style-heavy
   DOM on every recalc). */
.crm-profile-drawer, .ccd-drawer { overscroll-behavior:contain; }
.ccd-rail::-webkit-scrollbar { width:8px; }
.ccd-rail::-webkit-scrollbar-thumb { background:#d8dbe6; border-radius:8px; }

/* Card */
.ccd-card { background:var(--cc-card); border:1px solid var(--cc-border);
      border-radius:var(--cc-radius); box-shadow:var(--cc-shadow); overflow:hidden; }
.ccd-ch { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--cc-border); }
.ccd-ch .lbl { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--cc-ink-3); }
.ccd-ch .act { margin-left:auto; display:flex; gap:6px; }
.ccd-verified { font-size:10px; color:var(--cc-green); font-weight:700; display:inline-flex; align-items:center; gap:3px; }
.ccd-mini { font-size:11px; font-weight:600; padding:4px 9px; border-radius:8px; cursor:pointer;
      border:1px solid var(--cc-border); background:#fff; color:var(--cc-ink-2); }
.ccd-mini:hover { border-color:#d3d6e0; }
.ccd-mini.brand  { background:var(--cc-brand-soft); color:var(--cc-brand); border-color:#c7d2fe; }
.ccd-mini.danger { color:var(--cc-red); }

/* Hero (deal summary) */
.ccd-hero { padding:16px 14px; background:linear-gradient(135deg,#eef2ff,#f7f8ff); }
.ccd-hero .amt { font-size:29px; font-weight:800; letter-spacing:-.02em; color:var(--cc-ink); line-height:1.1; }
.ccd-hero .amt small { font-size:13px; font-weight:600; color:var(--cc-ink-3); }
.ccd-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.ccd-stat { background:rgba(255,255,255,.72); border:1px solid #e6e8f5; border-radius:10px; padding:9px 11px; }
.ccd-stat .k { font-size:10px; color:var(--cc-ink-3); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.ccd-stat .v { font-size:14px; font-weight:700; margin-top:3px; display:flex; align-items:center; gap:6px; color:var(--cc-ink); }
.ccd-stat select { border:none; background:none; font-size:13px; font-weight:700; color:var(--cc-ink); width:100%; cursor:pointer; padding:0; }

/* Reference card (linked contact/company) */
.ccd-ref { display:flex; gap:12px; padding:13px 14px; align-items:center; }
.ccd-av { width:42px; height:42px; border-radius:12px; flex-shrink:0; display:grid; place-items:center;
      font-size:15px; font-weight:700; color:#fff; }
.ccd-av.p { background:linear-gradient(135deg,#8b5cf6,#6366f1); }
.ccd-av.c { background:linear-gradient(135deg,#3b82f6,#0ea5e9); }
.ccd-ref-info { min-width:0; flex:1; }
.ccd-ref-info .nm { font-size:14px; font-weight:700; color:var(--cc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ccd-ref-info .rl { font-size:12px; color:var(--cc-ink-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ccd-ref-info .meta { display:flex; gap:12px; margin-top:7px; font-size:11.5px; color:var(--cc-ink-2); flex-wrap:wrap; }
.ccd-ref-info .meta a { color:var(--cc-ink-2); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.ccd-ref-info .meta a:hover { color:var(--cc-brand); }
.ccd-quick { display:flex; gap:6px; padding:0 14px 13px; }
.ccd-q { flex:1; text-align:center; font-size:11px; font-weight:600; padding:7px 4px; border-radius:9px;
      border:1px solid var(--cc-border); background:#fbfbfe; color:var(--cc-ink-2); cursor:pointer; transition:.15s; }
.ccd-q:hover { background:#fff; border-color:#d3d6e0; transform:translateY(-1px); box-shadow:var(--cc-shadow); }
.ccd-q.wa:hover { color:var(--cc-wa,#128c4b); }

/* Empty link prompt */
.ccd-empty { padding:16px 14px; text-align:center; }
.ccd-empty .ic { font-size:26px; opacity:.5; }
.ccd-empty .tx { font-size:12px; color:var(--cc-ink-3); margin:6px 0 11px; }

/* Lead source card */
.ccd-lead { padding:13px 14px; }
.ccd-lead .banner { display:flex; gap:9px; align-items:flex-start; background:var(--cc-amber-soft);
      border:1px solid #fde9c8; border-radius:10px; padding:10px 12px; font-size:12px; color:#92620c; margin-bottom:11px; }
.ccd-lead-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ccd-lf .k { font-size:10px; color:var(--cc-ink-3); font-weight:700; text-transform:uppercase; }
.ccd-lf .v { font-size:13px; font-weight:600; margin-top:2px; color:var(--cc-ink); word-break:break-word; }

/* Chips */
.ccd-chips { display:flex; flex-wrap:wrap; gap:7px; padding:12px 14px; }
.ccd-chip { display:inline-flex; align-items:center; gap:7px; background:#f4f5fa; border:1px solid var(--cc-border);
      border-radius:999px; padding:4px 10px 4px 5px; font-size:12px; font-weight:600; cursor:pointer; color:var(--cc-ink); }
.ccd-chip:hover { background:#eef0f8; }
.ccd-chip .ci { width:22px; height:22px; border-radius:50%; background:#c7cbe8; color:#4b4f76;
      display:grid; place-items:center; font-size:10px; }
.ccd-chip .role { font-size:10px; color:var(--cc-ink-3); font-weight:600; }
.ccd-chip.add { background:#fff; border-style:dashed; color:var(--cc-brand); }

/* Collapsible */
.ccd-collapse .ccd-ch { cursor:pointer; }
.ccd-collapse .chev { margin-left:auto; color:var(--cc-ink-3); transition:.2s; }
.ccd-collapse.open .chev { transform:rotate(90deg); }
.ccd-collapse .cbody { display:none; padding:12px 14px; }
.ccd-collapse.open .cbody { display:block; }
.ccd-desc { font-size:12.5px; color:var(--cc-ink-2); line-height:1.55; white-space:pre-wrap; word-break:break-word; }

/* Small input grid reused inside collapsibles (addresses) */
.ccd-fgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:11px; }
.ccd-fgrid input, .ccd-fgrid select { padding:7px 8px; border:1px solid var(--cc-border); border-radius:8px;
      box-sizing:border-box; font-size:12px; font-family:inherit; background:#fff; }
.ccd-fgrid input:focus, .ccd-fgrid select:focus { outline:none; border-color:var(--cc-brand);
      box-shadow:0 0 0 3px var(--cc-brand-soft); }

/* Rail action row */
.ccd-actions { display:flex; gap:8px; }
.ccd-actions .ccd-btn { flex:1; justify-content:center; }
.ccd-actions .ccd-btn.danger { color:var(--cc-red); border-color:#f3c9c9; background:var(--cc-red-soft); }

/* ═══════════════════════════════════════════════════════════════════
   CRM list pages — top nav + toolbars (Command Center)
   Fresh crmx-* classes so inline-free markup styles cleanly (no fights
   with the legacy .nav-tab / .crm-toolbar rules in hub-app.css).
   ═══════════════════════════════════════════════════════════════════ */
.crmx-top { background:var(--cc-card); border-bottom:1px solid var(--cc-border); box-shadow:var(--cc-shadow); }
.crmx-top .row1 { display:flex; align-items:center; gap:14px; padding:15px 24px 2px; }
.crmx-title { margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--cc-ink);
      display:flex; align-items:center; gap:9px; }
.crmx-tabs { display:flex; gap:2px; padding:4px 12px 0; flex-wrap:wrap; align-items:center; }
.crmx-tab { padding:11px 15px; border:none; background:none; cursor:pointer; font-size:13px; font-weight:600;
      color:var(--cc-ink-3); border-bottom:2.5px solid transparent; transition:.15s; border-radius:8px 8px 0 0; }
.crmx-tab:hover { color:var(--cc-ink); background:var(--cc-bg); }
.crmx-tab.on { color:var(--cc-brand); border-bottom-color:var(--cc-brand); }
.crmx-new { margin-left:auto; padding:9px 16px; background:var(--cc-brand); color:#fff; border:none;
      border-radius:10px; cursor:pointer; font-size:13px; font-weight:700; box-shadow:var(--cc-shadow); transition:.15s; }
.crmx-new:hover { background:#4f52d6; transform:translateY(-1px); box-shadow:var(--cc-shadow-hover); }

.crmx-toolbar { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.crmx-inp, .crmx-sel { padding:9px 12px; border:1px solid var(--cc-border); border-radius:10px; font-size:13px;
      background:var(--cc-card); color:var(--cc-ink); font-family:inherit; box-sizing:border-box; }
.crmx-inp { flex:1; min-width:200px; }
.crmx-inp:focus, .crmx-sel:focus { outline:none; border-color:var(--cc-brand); box-shadow:0 0 0 3px var(--cc-brand-soft); }
.crmx-sel { min-width:130px; cursor:pointer; }
.crmx-btn { padding:9px 14px; border:1px solid var(--cc-border); background:var(--cc-card); color:var(--cc-ink-2);
      border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; transition:.15s; }
.crmx-btn:hover { border-color:#d3d6e0; box-shadow:var(--cc-shadow); }
.crmx-btn.on { background:var(--cc-red-soft); border-color:#f6c9c9; color:var(--cc-red); }
.crmx-btn.auto { margin-left:auto; }
.crmx-seg { display:inline-flex; border:1px solid var(--cc-border); border-radius:10px; overflow:hidden; background:var(--cc-card); }
.crmx-seg button { padding:9px 14px; border:none; cursor:pointer; font-size:13px; font-weight:600; background:transparent; color:var(--cc-ink-3); }
.crmx-seg button.on { background:var(--cc-brand); color:#fff; }