/* ============================================================ RelationshipVIEW — Shared Design System (concept redesign) Link on every page. Light is default; [data-theme="dark"] on switches to dark. Do NOT restyle the main nav. ============================================================ */ :root, [data-theme="light"] { --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#eef2f7; --border:#e2e8f0; --divider:#eef2f6; --text:#0f1e34; --text-muted:#5a6b82; --text-faint:#93a1b5; --brand:#0d2240; --accent:#2f6df6; --accent-hover:#1d55d6; --accent-soft:#e7efff; --danger:#c0334a; --danger-soft:#fbe9ec; --danger-strong:#a3283c; --warn:#b06a12; --warn-soft:#fbf0dd; --success:#1f8a54; --success-soft:#e4f5ec; --purple:#6b3fd4; --purple-soft:#efe8fc; --shadow-sm:0 1px 2px rgba(15,30,52,.06); --shadow-md:0 6px 20px rgba(15,30,52,.09); --shadow-lg:0 18px 44px rgba(15,30,52,.16); } [data-theme="dark"] { --bg:#0a1420; --surface:#101c2c; --surface-2:#14243a; --surface-3:#1a2c44; --border:#213448; --divider:#1a2b3f; --text:#e8eef6; --text-muted:#9db0c6; --text-faint:#67788f; --brand:#0a1420; --accent:#4d8bff; --accent-hover:#6ea0ff; --accent-soft:#16294a; --danger:#ff6b81; --danger-soft:#2b1620; --danger-strong:#ff8497; --warn:#e0a24a; --warn-soft:#2a2013; --success:#4fc98a; --success-soft:#12281d; --purple:#a98bf0; --purple-soft:#1f1930; --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 6px 20px rgba(0,0,0,.4); --shadow-lg:0 18px 44px rgba(0,0,0,.5); } *,*::before,*::after{box-sizing:border-box} .rv-scope{font-family:'Inter',system-ui,sans-serif;color:var(--text);font-size:14px;line-height:1.5;background:var(--bg)} .tnum{font-variant-numeric:tabular-nums} .rv-scope button{cursor:pointer;border:none;background:none;color:inherit;font:inherit;transition:all .15s cubic-bezier(.16,1,.3,1)} .rv-scope :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* ---- Page shell (content area RIGHT of the main nav) ---- */ .rv-page{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;background:var(--bg)} .rv-head{padding:16px 24px 14px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:flex-start;gap:16px;flex:none} .rv-head h1{font-family:'Space Grotesk';font-size:22px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px} .rv-head p{font-size:12.5px;color:var(--text-muted);margin-top:3px;line-height:1.4;max-width:70ch} .rv-head-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none} .rv-sync{font-size:11px;color:var(--text-faint);display:flex;align-items:center;gap:6px} .rv-body{flex:1;min-height:0;overflow-y:auto;padding:20px 24px} /* ---- Buttons ---- */ .btn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;border-radius:9px;padding:8px 13px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);white-space:nowrap} .btn:hover{color:var(--text);border-color:var(--accent)} .btn svg{width:14px;height:14px} .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)} .btn-primary:hover{background:var(--accent-hover);color:#fff} .btn-brand{background:var(--brand);color:#fff;border-color:var(--brand)} [data-theme="light"] .btn-brand{background:#0d2240} .btn-brand:hover{filter:brightness(1.12);color:#fff} .btn-ai{background:linear-gradient(135deg,var(--purple),var(--accent));color:#fff;border:none;box-shadow:0 3px 12px rgba(107,63,212,.35)} .btn-ai:hover{filter:brightness(1.08);color:#fff} .btn-danger{color:var(--danger-strong);border-color:var(--border)} .btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)} .btn-success{color:var(--success);border-color:var(--border)} .btn-success:hover{background:var(--success);color:#fff;border-color:var(--success)} .iconbtn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--text-muted)} .iconbtn:hover{color:var(--text);border-color:var(--accent)} /* ---- Filter / control bar ---- */ .rv-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px} .searchbar{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 11px;min-width:240px;flex:1;max-width:360px} .searchbar input{background:none;border:none;color:var(--text);font-size:12.5px;width:100%;outline:none} .searchbar input::placeholder{color:var(--text-faint)} .searchbar .kbd{font-size:10px;color:var(--text-faint);border:1px solid var(--border);border-radius:5px;padding:1px 5px} .select{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 11px;font-size:12.5px;font-weight:500;color:var(--text-muted);cursor:pointer} .select:hover{border-color:var(--accent)} /* filter chip (active filter) */ .filter-chip-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px} .fc-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)} .filter-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#fff;background:var(--accent);padding:4px 8px 4px 10px;border-radius:20px;line-height:1.2} .filter-chip:hover{filter:brightness(1.08)} /* ---- KPI / stat tiles ---- */ .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px} .kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 16px;box-shadow:var(--shadow-sm)} .kpi .kv{font-family:'Space Grotesk';font-weight:700;font-size:26px;letter-spacing:-.02em} .kpi .kl{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:2px} .kpi .kd{font-size:11px;font-weight:600;margin-top:6px;display:inline-flex;align-items:center;gap:4px} .kpi .kd.up{color:var(--success)} .kpi .kd.down{color:var(--danger)} .kpi .kd.flat{color:var(--text-faint)} .kpi.accent .kv{color:var(--accent)} .kpi.purple .kv{color:var(--purple)} .kpi.success .kv{color:var(--success)} .kpi.warn .kv{color:var(--warn)} /* ---- Cards / panels ---- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden} .card-head{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--divider)} .card-head h2,.card-head h3{font-family:'Space Grotesk';font-size:13.5px;font-weight:600} .card-head .badge-count{font-size:10.5px;font-weight:700;background:var(--accent);color:#fff;border-radius:999px;padding:1px 7px} .card-head .link{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--accent)} .card-body{padding:16px} .card.ai{background:linear-gradient(135deg,var(--purple-soft),var(--accent-soft))} .card.ai .card-head h2,.card.ai .card-head h3{color:var(--purple)} /* empty state */ .empty-state{padding:28px 20px;text-align:center;color:var(--text-muted);font-size:13px} .empty-state .es-ico{color:var(--success);margin-bottom:8px} .empty-state b{color:var(--text)} .empty-state .es-sub{display:block;margin-top:5px;font-size:12px;color:var(--text-faint)} /* ---- Tables ---- */ .rv-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)} .rv-table{width:100%;border-collapse:collapse;font-size:12.5px} .rv-table thead th{position:sticky;top:0;background:var(--surface-2);z-index:1;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap} .rv-table thead th.sortable{cursor:pointer} .rv-table thead th.sortable:hover{color:var(--text)} .rv-table tbody td{padding:11px 14px;border-bottom:1px solid var(--divider);vertical-align:middle} .rv-table tbody tr:hover{background:var(--surface-2)} .rv-table tbody tr:last-child td{border-bottom:none} .rv-table .primary{font-weight:600;color:var(--text)} .rv-table .secondary{font-size:11px;color:var(--text-muted);margin-top:1px} .rv-table .num{font-variant-numeric:tabular-nums;text-align:right} .checkbox{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--border);cursor:pointer;accent-color:var(--accent)} /* bulk action bar */ .bulk-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:11px;margin-bottom:12px;font-size:12.5px} .bulk-bar .bb-count{font-weight:700;color:var(--accent)} [data-theme="dark"] .bulk-bar .bb-count{color:var(--accent-hover)} /* ---- Badges / chips ---- */ .badge{font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:7px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .badge.green,.badge.executed-approved,.badge.success{background:var(--success-soft);color:var(--success)} .badge.yellow,.badge.pending{background:var(--warn-soft);color:var(--warn)} .badge.gray,.badge.queued{background:var(--surface-3);color:var(--text-muted)} .badge.blue,.badge.accent{background:var(--accent-soft);color:var(--accent)} .badge.purple,.badge.ai{background:var(--purple-soft);color:var(--purple)} .badge.red,.badge.danger{background:var(--danger-soft);color:var(--danger-strong)} [data-theme="dark"] .badge.blue,[data-theme="dark"] .badge.accent{color:var(--accent-hover)} /* dot badge for status (color + label; never color alone) */ .status-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block} .status-dot.green{background:var(--success)} .status-dot.yellow{background:var(--warn)} .status-dot.gray{background:var(--text-faint)} .status-dot.red{background:var(--danger)} /* letter avatar */ .avatar{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff} .avatar.sm{width:26px;height:26px;border-radius:7px;font-size:11px} .avatar.lg{width:46px;height:46px;border-radius:12px;font-size:17px} /* ---- Confidence meter (0-100) ---- */ .meter{display:flex;align-items:center;gap:8px;min-width:120px} .meter .track{flex:1;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden} .meter .fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--warn),var(--accent),var(--success));transition:width .8s cubic-bezier(.16,1,.3,1)} .meter .mval{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:34px;text-align:right} /* ---- Kanban board (Opportunities) ---- */ .kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px} .kan-col{flex:1;min-width:220px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;max-height:100%} .kan-col-head{padding:12px 14px;border-bottom:1px solid var(--divider);display:flex;align-items:center;gap:8px} .kan-col-head .kt{font-family:'Space Grotesk';font-size:12.5px;font-weight:600} .kan-col-head .kn{font-size:10.5px;font-weight:700;background:var(--surface-3);color:var(--text-muted);border-radius:999px;padding:1px 7px} .kan-col-head .kval{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums} .kan-col.won .kt{color:var(--success)} .kan-col.lost .kt{color:var(--text-muted)} .kan-body{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:80px} .kan-empty{color:var(--text-faint);font-size:11.5px;text-align:center;padding:16px 8px} .kan-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 12px;box-shadow:var(--shadow-sm)} /* ---- Pipeline strip (Dashboard) ---- */ .pipeline{display:flex;align-items:stretch;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:20px} .pipe-stage{flex:1;padding:14px 16px;position:relative;border-right:1px solid var(--divider)} .pipe-stage:last-child{border-right:none} .pipe-stage .ps-name{font-size:11px;font-weight:600;color:var(--text-muted);display:flex;align-items:center;gap:6px} .pipe-stage .ps-count{font-family:'Space Grotesk';font-weight:700;font-size:22px;margin-top:4px;font-variant-numeric:tabular-nums} .pipe-stage .ps-val{font-size:11.5px;color:var(--text-faint);font-variant-numeric:tabular-nums} .pipe-stage.won .ps-count{color:var(--success)} .pipe-stage.lost .ps-count{color:var(--text-muted)} /* ---- Toast ---- */ .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--brand);color:#fff;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all .25s;z-index:50;display:flex;gap:9px;align-items:center;border:1px solid rgba(255,255,255,.1)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .toast .tico{color:var(--success)} /* skeleton loader */ .skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:6px} @keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}} @media(prefers-reduced-motion:reduce){.skel{animation:none}.meter .fill{transition:none}} /* responsive */ @media(max-width:1150px){.rv-body{padding:16px}.pipeline{flex-wrap:wrap}.pipe-stage{flex:1 1 33%}} @media(max-width:720px){.pipe-stage{flex:1 1 50%}.rv-head{flex-wrap:wrap}}