/* Bueché-Labs Pipeline Dashboard — custom styles (loaded after tailwind.min.css) * * ═══════════════════════════════════════════════════════════════════════════ * DESIGN TOKEN SYSTEM * ═══════════════════════════════════════════════════════════════════════════ * All visual style flows from CSS custom properties below. Dark mode is a * single attribute swap on . To change brand colors * or theme accents, edit ONLY the :root block. Everything else cascades. * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ─── Brand palette (Bueché-Labs corporate colors) ─── */ --brand-orange: #BF5700; /* Burnt orange — primary action, KPI accents */ --brand-orange-soft: #E07A3D; /* Hover/secondary action */ --brand-orange-tint: #FBE8DA; /* Highlight backgrounds (light mode) */ --brand-purple: #5B2E91; /* Imperial purple — sophistication, badges */ --brand-purple-soft: #9B6DD1; /* Soft accents */ --brand-purple-tint: #ECE2F7; /* Highlight backgrounds (light mode) */ --brand-navy: #0D1B2A; /* Deep navy — sidebar bg (dark), card border accents */ --brand-navy-soft: #1B263B; /* Sidebar-mid (light variant) */ --brand-navy-tint: #DDE3EC; /* Light cool surface */ /* ─── Semantic palette (role-based, theme-aware) ─── */ --bg: #F4F6F9; /* Body / page background */ --surface-1: #FFFFFF; /* Card / tile background */ --surface-2: #F8FAFC; /* Recessed surfaces (filter bars, table headers) */ --surface-3: #EEF2F7; /* Pressed/active states */ --border-1: #E2E8F0; /* Default borders */ --border-2: #CBD5E1; /* Stronger borders */ --border-accent: var(--brand-orange); --text-primary: #0F172A; /* Body text, headlines */ --text-secondary: #475569; /* Subtitles, meta */ --text-tertiary: #94A3B8; /* Captions, hints */ --text-inverse: #FFFFFF; /* Text on dark surfaces */ --text-link: var(--brand-orange); /* ─── Stage progression palette (cold → engaged → action → won/lost) ─── */ --stage-cold: #4B6587; /* Slate-blue: not yet engaged */ --stage-cold-tint: #E1E7EF; --stage-engaged: var(--brand-purple); --stage-engaged-tint: var(--brand-purple-tint); --stage-meeting: #7C4FB3; /* Lighter purple */ --stage-action: var(--brand-orange); --stage-action-tint: var(--brand-orange-tint); --stage-won: #0F8B5C; /* Rich green — complements orange */ --stage-won-tint: #DCFCE7; --stage-lost: #6B5B53; /* Warm-gray, not punishing */ --stage-lost-tint: #E7E3DF; /* ─── Status semantic colors ─── */ --status-success: #0F8B5C; --status-warning: #D97706; --status-danger: #DC2626; --status-info: #2563EB; --status-success-tint: #DCFCE7; --status-warning-tint: #FEF3C7; --status-danger-tint: #FEE2E2; --status-info-tint: #DBEAFE; /* ─── Three-tier shadow system ─── */ --shadow-ambient: 0 1px 2px rgba(13, 27, 42, 0.04), 0 1px 3px rgba(13, 27, 42, 0.06); --shadow-focus: 0 4px 12px rgba(13, 27, 42, 0.08), 0 2px 4px rgba(13, 27, 42, 0.06); --shadow-prominent: 0 12px 32px rgba(13, 27, 42, 0.14), 0 4px 12px rgba(13, 27, 42, 0.08); --shadow-inset: inset 0 1px 2px rgba(13, 27, 42, 0.06); /* ─── Corner radius rhythm ─── */ --r-chip: 4px; --r-card: 8px; --r-section: 12px; --r-hero: 16px; --r-pill: 999px; /* ─── Spacing rhythm (8-point grid; multiples available as helpers) ─── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ─── Motion ─── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 120ms; --t-base: 180ms; --t-slow: 320ms; /* ─── Typography scale ─── */ --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-num: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ─── Legacy aliases (so untouched old rules don't break) ─── */ --bueche-navy: var(--brand-navy); --bueche-blue: var(--brand-navy-soft); --bueche-gold: var(--brand-orange); --bueche-bg: var(--bg); } /* ═══════════════════════════════════════════════════════════════════════════ * DARK MODE — single attribute swap on remaps the * semantic palette. Brand and stage colors stay perceptually consistent; * surfaces and text invert. * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg: #0A1320; --surface-1: #131F33; --surface-2: #0D1828; --surface-3: #1B263B; --border-1: #1F2D44; --border-2: #2A3A55; --text-primary: #E6EDF7; --text-secondary: #98A8C0; --text-tertiary: #5B6B85; --text-inverse: #0F172A; --brand-orange-tint: rgba(191, 87, 0, 0.16); --brand-purple-tint: rgba(91, 46, 145, 0.22); --brand-navy-tint: rgba(27, 38, 59, 0.6); --stage-cold-tint: rgba(75, 101, 135, 0.18); --stage-engaged-tint: rgba(91, 46, 145, 0.22); --stage-action-tint: rgba(191, 87, 0, 0.18); --stage-won-tint: rgba(15, 139, 92, 0.18); --stage-lost-tint: rgba(107, 91, 83, 0.18); --status-success-tint: rgba(15, 139, 92, 0.18); --status-warning-tint: rgba(217, 119, 6, 0.18); --status-danger-tint: rgba(220, 38, 38, 0.18); --status-info-tint: rgba(37, 99, 235, 0.18); --shadow-ambient: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-focus: 0 4px 14px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-prominent: 0 16px 40px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4); } /* Smooth transition when toggling theme */ body, .app-shell, .sidebar, .content-area, .kpi-tile, .overview-tile, .section-card, .funnel-stage, .opp-row, .deal-table th, .deal-table td, .breadcrumb { transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); } body { font-family: var(--font-body); background: var(--bg); color: var(--text-primary); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Tabular numerals everywhere — dollar amounts, dates, counts line up cleanly. */ .num, .kpi-tile .value, .kpi-tile .sub, .overview-tile-value, .overview-tile-sub, .mini-value, .funnel-stage-count, .funnel-stage-amount, .funnel-deal-amount, .deal-table td.numeric, .deal-table td.date, .opp-score, .nav-badge { font-family: var(--font-num); font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums lining-nums; } /* ─── App shell (sidebar + content) ──────────────────────────────────── */ .app-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; } .sidebar { background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-soft) 100%); color: var(--text-inverse); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; /* No outer scroll — nav scrolls internally so footer stays pinned. */ overflow: hidden; border-right: 1px solid rgba(191, 87, 0, 0.15); /* subtle orange accent edge */ } .sidebar-brand { padding: 20px 18px 18px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .sidebar-brand img.logo { width: 100%; max-width: 180px; height: auto; display: block; margin-bottom: 8px; } .sidebar-brand h1 { font-size: 14px; font-weight: 700; margin: 4px 0 2px 0; letter-spacing: 0; color: white; } .sidebar-brand .tagline { font-size: 10px; color: #94a3b8; font-style: italic; line-height: 1.4; margin: 0; } .sidebar-nav { flex: 1 1 auto; min-height: 0; /* allows the flex child to shrink so overflow-y kicks in */ overflow-y: auto; padding: 12px 0; } .nav-group { padding: 14px 18px 6px 18px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; font-weight: 700; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; color: #cbd5e1; text-decoration: none; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.1s; border-left: 3px solid transparent; } .nav-item:hover { background: rgba(255,255,255,0.06); color: white; } .nav-item.active { background: rgba(191, 87, 0, 0.18); color: var(--text-inverse); border-left-color: var(--brand-orange); box-shadow: inset 4px 0 0 var(--brand-orange); border-left-color: transparent; /* swap to box-shadow for sharper edge */ } .nav-item .nav-icon { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; } .nav-item .nav-label { flex: 1; white-space: nowrap; } .nav-item .nav-badge { font-size: 10px; font-weight: 700; background: var(--brand-orange); color: var(--text-inverse); padding: 1px 7px; border-radius: var(--r-pill); white-space: nowrap; } .nav-item .nav-badge.danger { background: #ef4444; color: white; } .nav-item .nav-badge.soon { background: rgba(255,255,255,0.1); color: #cbd5e1; } .sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11px; color: #94a3b8; flex-shrink: 0; } /* Marketing calendar — month grid */ .cal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .cal-toolbar .cal-title { font-size: 16px; font-weight: 700; color: #0f172a; flex: 1; } .cal-toolbar button { background: white; border: 1px solid #cbd5e1; border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: #0f172a; } .cal-toolbar button:hover { background: #f1f5f9; } .cal-toolbar button.primary { background: #1e3a8a; color: white; border-color: #1e3a8a; } .cal-toolbar button.primary:hover { background: #1e40af; } .cal-toolbar .view-toggle { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 4px; overflow: hidden; } .cal-toolbar .view-toggle button { border: none; border-radius: 0; border-right: 1px solid #cbd5e1; } .cal-toolbar .view-toggle button:last-child { border-right: none; } .cal-toolbar .view-toggle button.active { background: #1e3a8a; color: white; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #e2e8f0; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; } .cal-grid .cal-dow { background: #f8fafc; padding: 6px 8px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; } .cal-cell { background: white; min-height: 96px; padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; } .cal-cell.other-month { background: #f8fafc; color: #94a3b8; } .cal-cell.today { background: #fef9c3; } .cal-cell.today .cal-day-num { color: #92400e; font-weight: 800; } .cal-cell .cal-day-num { font-size: 12px; font-weight: 600; color: #475569; text-align: right; } .cal-cell .cal-chip { font-size: 11px; padding: 1px 6px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #dbeafe; color: #1e3a8a; border-left: 3px solid #2563eb; } .cal-chip.kind-conference { background: #ede9fe; color: #5b21b6; border-left-color: #7c3aed; } .cal-chip.kind-webinar { background: #cffafe; color: #0e7490; border-left-color: #06b6d4; } .cal-chip.kind-travel { background: #fef3c7; color: #92400e; border-left-color: #d97706; } .cal-chip.kind-deliverable{ background: #fee2e2; color: #991b1b; border-left-color: #dc2626; } .cal-chip.kind-meeting { background: #dcfce7; color: #166534; border-left-color: #16a34a; } .cal-chip.kind-followup { background: #fef9c3; color: #854d0e; border-left-color: #ca8a04; } .cal-chip.kind-other { background: #f1f5f9; color: #475569; border-left-color: #64748b; } .cal-chip.source-derived { opacity: 0.7; font-style: italic; } .cal-chip-more { font-size: 10px; color: #64748b; cursor: pointer; } .sidebar-footer .sync-line { display: flex; align-items: center; gap: 6px; } .sidebar-footer .btn-refresh, .sidebar-footer .btn-theme { margin-top: 6px; width: 100%; background: rgba(255,255,255,0.08); color: var(--text-inverse); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-card); padding: 7px 10px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .sidebar-footer .btn-refresh:hover, .sidebar-footer .btn-theme:hover { background: rgba(191, 87, 0, 0.22); border-color: var(--brand-orange); } .sidebar-footer .btn-theme { margin-top: 4px; font-size: 11px; background: transparent; } /* Content area (right of sidebar) */ .content-area { padding: var(--space-6) var(--space-8); max-width: 1400px; margin: 0; overflow-x: hidden; background: var(--bg); } .content-area h2.page-title { font-size: 26px; font-weight: 800; margin: 0 0 4px 0; letter-spacing: -0.02em; color: var(--text-primary); } .content-area .page-subtitle { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--space-6) 0; } /* Drill-down breadcrumb override for new layout */ .breadcrumb { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-card); padding: 10px 14px; font-size: 13px; margin-bottom: var(--space-5); color: var(--text-secondary); } .breadcrumb a { color: var(--brand-orange); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* Mobile: collapse sidebar */ @media (max-width: 900px) { .app-shell { grid-template-columns: 60px 1fr; } .sidebar-brand h1, .sidebar-brand .tagline, .sidebar-brand img.logo { display: none; } .sidebar-brand { padding: 12px 8px; } .sidebar-brand::before { content: 'BL'; font-size: 18px; font-weight: 700; color: var(--bueche-gold); display: block; text-align: center; } .nav-group { display: none; } .nav-item .nav-label { display: none; } .nav-item .nav-badge { display: none; } .nav-item { justify-content: center; padding: 12px 8px; } .sidebar-footer { display: none; } .content-area { padding: 18px; } } /* ─── Overview page tiles ────────────────────────────────────────────── */ .overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 1100px) { .overview-grid { grid-template-columns: repeat(3, 1fr); } } .overview-tile { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-section); padding: var(--space-5); cursor: pointer; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); text-align: left; display: block; width: 100%; box-shadow: var(--shadow-ambient); position: relative; overflow: hidden; } .overview-tile:hover { border-color: var(--brand-orange); box-shadow: var(--shadow-focus); transform: translateY(-3px); } .overview-tile:active { transform: translateY(0); box-shadow: var(--shadow-ambient); } .overview-tile-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .overview-tile-icon { font-size: 18px; } .overview-tile-title { font-weight: 700; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; flex: 1; } .overview-tile-arrow { color: var(--text-tertiary); font-size: 16px; transition: transform var(--t-base) var(--ease-out), color var(--t-base); } .overview-tile:hover .overview-tile-arrow { color: var(--brand-orange); transform: translateX(3px); } .overview-tile-value { font-size: 28px; font-weight: 700; margin-bottom: var(--space-1); color: var(--text-primary); letter-spacing: -0.01em; } .overview-tile-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .overview-tile-warn { color: var(--status-danger); font-weight: 600; } .card { background: var(--surface-1); border-radius: var(--r-section); box-shadow: var(--shadow-ambient); border: 1px solid var(--border-1); } .kpi-value { font-variant-numeric: tabular-nums; } [x-cloak] { display: none !important; } .pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Header band */ .dash-header { background: linear-gradient(135deg, #0a2a4a 0%, #1e4d80 100%); color: white; box-shadow: 0 4px 12px rgba(10, 42, 74, 0.25); } .dash-header .logo { height: 56px; width: auto; display: block; } .dash-header h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .dash-header .tagline { font-size: 12px; color: #cbd5e1; font-style: italic; margin-top: 2px; } /* KPI tiles — corporate-color accents, three-tier shadow, hover lift */ .kpi-tile { background: var(--surface-1); border-radius: var(--r-section); padding: var(--space-5); text-align: left; border: 1px solid var(--border-1); cursor: pointer; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); display: block; width: 100%; box-shadow: var(--shadow-ambient); position: relative; overflow: hidden; } /* Subtle 3px accent stripe along the top of each tile, color-coded by category */ .kpi-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-orange); opacity: 0.85; } .kpi-tile.federal::before { background: var(--brand-navy-soft); } .kpi-tile.pilot::before { background: var(--brand-orange); } .kpi-tile.engaged::before { background: var(--brand-purple); } .kpi-tile:hover { border-color: var(--brand-orange); box-shadow: var(--shadow-focus); transform: translateY(-2px); } .kpi-tile:active { transform: translateY(0); box-shadow: var(--shadow-ambient); } .kpi-tile .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-secondary); } .kpi-tile .value { font-size: 32px; font-weight: 700; margin-top: var(--space-1); letter-spacing: -0.01em; color: var(--text-primary); } .kpi-tile.federal .value { color: var(--brand-navy); } .kpi-tile.pilot .value { color: var(--brand-orange); } .kpi-tile.engaged .value { color: var(--brand-purple); } [data-theme="dark"] .kpi-tile.federal .value { color: var(--text-primary); } .kpi-tile .sub { font-size: 11px; color: var(--text-tertiary); margin-top: var(--space-1); } /* Section card */ .section-card { background: var(--surface-1); border-radius: var(--r-section); padding: var(--space-5); border: 1px solid var(--border-1); box-shadow: var(--shadow-ambient); } .section-card h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-secondary); margin: 0 0 var(--space-4) 0; } /* Pills */ .pill { display: inline-block; padding: 2px 10px; font-size: 11px; font-weight: 600; border-radius: var(--r-pill); letter-spacing: 0.02em; } .pill-federal { background: var(--brand-navy-tint); color: var(--brand-navy); } .pill-pilot { background: var(--brand-orange-tint); color: var(--brand-orange); } .pill-stage { background: var(--surface-3); color: var(--text-secondary); } .pill-terminal { background: var(--status-danger-tint); color: var(--status-danger); } [data-theme="dark"] .pill-federal { color: #C7D3E5; } [data-theme="dark"] .pill-pilot { color: var(--brand-orange-soft); } /* Deal table */ .deal-table { width: 100%; border-collapse: collapse; font-size: 13px; } .deal-table thead { background: #f8fafc; } .deal-table th { text-align: left; padding: 10px 12px; font-weight: 600; color: #475569; border-bottom: 2px solid #e2e8f0; cursor: pointer; user-select: none; } .deal-table th:hover { color: #0f172a; } .deal-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; } .deal-table tbody tr { cursor: pointer; transition: background 0.1s; } .deal-table tbody tr:hover { background: #eff6ff; } .deal-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } /* Inline per-deal product dropdown. Colored by product so the table reads at a glance — same color family as the product-mix charts. */ .product-select { font-size: 12px; font-weight: 600; border: 1px solid #cbd5e1; border-radius: 4px; padding: 4px 8px; background: white; cursor: pointer; min-width: 110px; } .product-select:hover { border-color: #94a3b8; } .product-select:focus { outline: 2px solid #3b82f6; outline-offset: 1px; } .product-select.product-stars { background: #e0e7ff; color: #1e3a8a; border-color: #c7d2fe; } .product-select.product-maxqai { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; } .product-select.product-dracanu { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; } .product-select.product-spine-sim { background: #cffafe; color: #0e7490; border-color: #a5f3fc; } .product-select.product-space-lease { background: #fef3c7; color: #78350f; border-color: #fde68a; } .product-select.product-mixed { background: #fce7f3; color: #831843; border-color: #fbcfe8; } .product-select.product-unclassified { background: #f1f5f9; color: #475569; border-color: #e2e8f0; } .product-override-mark { display: inline-block; margin-left: 4px; color: #c9a14a; font-size: 12px; font-weight: 700; } /* Needs-Classification queue pill — clickable. Amber when count > 0 to draw the eye; deeper amber when filter is active. */ .needs-classification-pill { display: inline-flex; align-items: center; gap: 6px; background: #fef3c7; color: #78350f; border: 1px solid #fde68a; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .needs-classification-pill:hover { background: #fde68a; border-color: #f59e0b; } .needs-classification-pill.active { background: #f59e0b; color: white; border-color: #d97706; } .deal-table td.date { color: #94a3b8; font-size: 12px; } /* Filter bar */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; } .filter-bar select, .filter-bar input[type="text"] { border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 10px; font-size: 13px; background: white; } .filter-bar input[type="text"] { flex: 1; min-width: 200px; } .filter-bar label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; } /* Status indicator */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .status-ok { background: #10b981; } .status-error { background: #ef4444; } .status-pending { background: #f59e0b; } /* Sync controls */ .sync-meta { text-align: right; font-size: 11px; color: #cbd5e1; } .btn-refresh { background: #1e3a8a; color: white; border: none; border-radius: 6px; padding: 4px 10px; font-size: 11px; cursor: pointer; margin-top: 4px; } .btn-refresh:hover { background: #1e40af; } .btn-refresh:disabled { opacity: 0.5; cursor: default; } /* Detail view */ .detail-header { background: white; border-radius: 12px; padding: 22px; border: 1px solid #e2e8f0; } .detail-header h2 { font-size: 24px; font-weight: 700; margin: 8px 0 0 0; } .detail-amount { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; color: #0a2a4a; } .contact-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; } .contact-card .name { font-weight: 600; } .contact-card .meta { font-size: 13px; color: #64748b; } .contact-card .email { color: #1d4ed8; font-size: 12px; word-break: break-all; } .note-entry { border-left: 3px solid #93c5fd; padding: 4px 12px 4px 14px; margin-bottom: 14px; } .note-entry .date { font-size: 11px; color: #94a3b8; } .note-entry .body { font-size: 13px; margin-top: 4px; line-height: 1.5; /* Notes are plaintext markers (rendered with x-text, never x-html) — preserve their line breaks instead of collapsing them. */ white-space: pre-wrap; word-break: break-word; } /* Breadcrumb */ .breadcrumb { background: white; border-bottom: 1px solid #e2e8f0; padding: 10px 0; font-size: 13px; } .breadcrumb a { color: #1d4ed8; } .breadcrumb a:hover { text-decoration: underline; } /* Footer */ .dash-footer { text-align: center; font-size: 11px; color: #94a3b8; padding: 24px 0; } /* Loading state */ .loading-block { text-align: center; padding: 48px 0; color: #94a3b8; font-style: italic; } /* Section head with meta */ .section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .section-head h2 { margin: 0; } .section-meta { font-size: 12px; color: #64748b; } /* Funnel chart card header — title on top, summary line below. Tighter than section-head so the chart canvas gets max vertical space. */ .funnel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 12px; } .funnel-head h2 { margin: 0; font-size: 16px; } .funnel-sub { font-size: 12px; color: #475569; white-space: nowrap; } .funnel-lost-inline { color: #b91c1c; } /* Mini KPI inside section */ .mini-kpi { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; } .mini-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; font-weight: 600; } .mini-value { font-size: 22px; font-weight: 700; color: #0a2a4a; font-variant-numeric: tabular-nums; margin-top: 2px; } .mini-sub { font-size: 11px; color: #94a3b8; font-weight: 500; margin-left: 4px; } /* Repo grid cards */ .repo-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; cursor: pointer; transition: all 0.15s ease; } .repo-card:hover { border-color: #1e4d80; box-shadow: 0 4px 12px rgba(30, 77, 128, 0.1); transform: translateY(-1px); } .repo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .repo-name { font-family: ui-monospace, SFMono-Regular, monospace; font-weight: 600; font-size: 13px; color: #0a2a4a; } .repo-prs { background: #fef3c7; color: #78350f; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; } .repo-desc { font-size: 12px; color: #64748b; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .repo-foot { font-size: 11px; color: #94a3b8; border-top: 1px solid #f1f5f9; padding-top: 6px; display: flex; flex-direction: column; gap: 2px; } .repo-when { font-weight: 500; color: #475569; } .repo-msg { font-style: italic; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* PR row */ .pr-row { display: grid; grid-template-columns: 50px 1fr auto auto 90px; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f1f5f9; font-size: 13px; } .pr-num { font-family: ui-monospace, monospace; color: #94a3b8; font-size: 12px; } .pr-title a { color: #0f172a; text-decoration: none; } .pr-title a:hover { color: #1d4ed8; text-decoration: underline; } .pr-draft { background: #f1f5f9; color: #64748b; padding: 1px 6px; border-radius: 4px; font-size: 10px; text-transform: uppercase; } .pr-author { color: #64748b; font-size: 12px; } .pr-when { color: #94a3b8; font-size: 11px; text-align: right; } /* Commit row */ .commit-row { display: grid; grid-template-columns: 70px 1fr auto 90px; gap: 12px; align-items: center; padding: 7px 4px; border-bottom: 1px solid #f1f5f9; font-size: 13px; } .commit-sha { font-family: ui-monospace, SFMono-Regular, monospace; color: #1d4ed8; font-size: 11px; text-decoration: none; } .commit-sha:hover { text-decoration: underline; } .commit-msg { color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .commit-author { color: #64748b; font-size: 12px; } .commit-when { color: #94a3b8; font-size: 11px; text-align: right; } /* Urgency tags */ .urgency-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-left: 6px; } .urgency-critical { background: #fee2e2; color: #991b1b; } .urgency-urgent { background: #fef3c7; color: #92400e; } .urgency-on_track { background: #d1fae5; color: #065f46; } .urgency-awaiting_decision { background: #e0e7ff; color: #3730a3; } .urgency-coming-soon { background: #f1f5f9; color: #64748b; } /* Federal pursuit rows */ .fed-row { display: grid; grid-template-columns: 4px 1fr auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background 0.1s; } .fed-row:hover { background: #f8fafc; } .fed-urgency { align-self: stretch; width: 4px; border-radius: 2px; background: #cbd5e1; } .fed-row.urgency-critical .fed-urgency { background: #ef4444; } .fed-row.urgency-urgent .fed-urgency { background: #f59e0b; } .fed-row.urgency-on_track .fed-urgency { background: #10b981; } .fed-row.urgency-no_deadline .fed-urgency { background: #cbd5e1; } .fed-row.urgency-awaiting_decision .fed-urgency { background: #6366f1; } .fed-main { min-width: 0; } .fed-name { font-weight: 600; color: #0f172a; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fed-meta { font-size: 12px; color: #64748b; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .fed-days { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; } .fed-overdue { color: #b91c1c; font-weight: 600; } .fed-awaiting { color: #4338ca; font-weight: 500; } .fed-no-deadline { color: #94a3b8; font-style: italic; } .fed-amount { font-weight: 700; font-variant-numeric: tabular-nums; color: #0a2a4a; white-space: nowrap; } /* Outreach funnel */ .funnel-grid { display: flex; flex-direction: column; gap: 4px; } .funnel-stage { position: relative; padding: 12px 16px; border-radius: var(--r-card); background: var(--surface-1); border: 1px solid var(--border-1); overflow: hidden; box-shadow: var(--shadow-ambient); } .funnel-stage-bar { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--stage-cold-tint), transparent); border-right: 3px solid var(--stage-cold); z-index: 0; transition: background var(--t-base) var(--ease-out); } .funnel-stage-body { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; } .funnel-stage-label { font-size: 13px; font-weight: 600; color: var(--text-primary); } .funnel-stage-count { font-size: 13px; font-weight: 700; color: var(--text-primary); } .funnel-stage-amount { font-weight: 500; color: var(--text-secondary); font-size: 12px; } /* ─── Stage progression color-grading ─── */ /* Match by data-tooltip-id (set via the AUTO + prefix pattern on the label) */ /* Cold tier */ .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.cold_touch_1"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.topic_identified"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.pre_release_tpoc"]) .funnel-stage-bar { background: linear-gradient(90deg, var(--stage-cold-tint), transparent); border-right-color: var(--stage-cold); } /* Engaged tier */ .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.engaged"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.meeting_scheduled"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.fit_confirmed"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.nda_executed"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.drafting"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.internal_qa"]) .funnel-stage-bar { background: linear-gradient(90deg, var(--stage-engaged-tint), transparent); border-right-color: var(--stage-engaged); } /* Action tier — orange, urgency mounting */ .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.sow_discussed"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.sow_sent"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.submitted"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.selected_for_award"]) .funnel-stage-bar { background: linear-gradient(90deg, var(--stage-action-tint), transparent); border-right-color: var(--stage-action); } /* Won tier */ .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.po_executed"]) .funnel-stage-bar, .funnel-stage:has(.funnel-stage-label[data-tooltip-id="stage.award_executed"]) .funnel-stage-bar, .funnel-stage.funnel-stage-won .funnel-stage-bar { background: linear-gradient(90deg, var(--stage-won-tint), transparent); border-right-color: var(--stage-won); } /* Click-to-expand on stages that have deals to drill into */ .funnel-stage.expandable { cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); } .funnel-stage.expandable:hover { background: var(--surface-2); border-color: var(--brand-orange); transform: translateX(2px); box-shadow: var(--shadow-focus); } .funnel-stage.expanded { border-color: var(--brand-orange); background: var(--brand-orange-tint); box-shadow: var(--shadow-focus); } /* Terminal-won stage (PO Executed, Award Executed) — explicit green wash */ .funnel-stage.funnel-stage-won { background: var(--stage-won-tint); border-color: var(--stage-won); } .funnel-stage.funnel-stage-won.expandable:hover { background: var(--stage-won-tint); filter: brightness(1.05); } .funnel-stage-toggle { display: inline-block; margin-left: 10px; color: #94a3b8; font-size: 11px; width: 10px; } /* Drill-down deal list under an expanded stage */ .funnel-stage-deals { background: #f8fafc; border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 6px 6px; margin: -4px 0 6px 24px; overflow: hidden; } .funnel-deal-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid #e2e8f0; font-size: 12px; color: #334155; text-decoration: none; transition: background 120ms; } .funnel-deal-row:hover { background: #f1f5f9; } .funnel-deal-row:last-child { border-bottom: none; } .funnel-deal-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #0f172a; } .funnel-deal-product { flex-shrink: 0; font-size: 11px; color: #64748b; background: #e2e8f0; padding: 1px 6px; border-radius: 3px; } .funnel-deal-amount { flex-shrink: 0; font-weight: 600; color: #475569; width: 70px; text-align: right; font-variant-numeric: tabular-nums; } .funnel-deal-modified { flex-shrink: 0; color: #94a3b8; font-size: 11px; width: 90px; text-align: right; font-variant-numeric: tabular-nums; } /* ═══════════════════ Work Effectiveness ═══════════════════ */ /* Commitment rows */ .commit-row { display: grid; grid-template-columns: 4px 1fr; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #f1f5f9; } .commit-pace-bar { background: #cbd5e1; border-radius: 2px; align-self: stretch; } .commit-pace-late .commit-pace-bar { background: #7f1d1d; } .commit-pace-critical .commit-pace-bar { background: #ef4444; } .commit-pace-at_risk .commit-pace-bar { background: #f59e0b; } .commit-pace-on_pace .commit-pace-bar { background: #10b981; } .commit-pace-submitted .commit-pace-bar { background: #0f766e; } /* teal — work done, awaiting agency */ .commit-pace-no_deadline .commit-pace-bar { background: #cbd5e1; } .commit-main { min-width: 0; } .commit-title { font-weight: 600; font-size: 14px; color: #0f172a; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .commit-title a { color: inherit; text-decoration: none; } .commit-title a:hover { color: #1d4ed8; text-decoration: underline; } .commit-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: #64748b; } .commit-status { font-style: italic; } .commit-activity { color: #94a3b8; font-size: 11px; } /* Pace pills */ .pill.pace-late { background: #7f1d1d; color: white; font-weight: 700; } .pill.pace-critical { background: #fee2e2; color: #991b1b; font-weight: 700; } .pill.pace-at_risk { background: #fef3c7; color: #92400e; font-weight: 600; } .pill.pace-on_pace { background: #d1fae5; color: #065f46; } .pill.pace-no_deadline { background: #f1f5f9; color: #64748b; } /* Priority alignment rows */ .prio-row { display: grid; grid-template-columns: 220px 1fr 180px; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid #f1f5f9; } .prio-name { min-width: 0; } .prio-name > span:first-child { font-weight: 600; font-size: 13px; color: #0f172a; display: block; } .prio-desc { font-size: 11px; color: #94a3b8; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prio-bars { position: relative; height: 22px; background: #f8fafc; border-radius: 4px; border: 1px solid #e2e8f0; } .prio-bar-target { position: absolute; top: 0; left: 0; height: 100%; background: repeating-linear-gradient( -45deg, rgba(100,116,139,0.15) 0, rgba(100,116,139,0.15) 4px, rgba(100,116,139,0.05) 4px, rgba(100,116,139,0.05) 8px ); border-right: 2px dashed #94a3b8; border-radius: 4px 0 0 4px; z-index: 1; } .prio-bar-actual { position: absolute; top: 4px; left: 0; height: 14px; background: #1e4d80; border-radius: 3px; z-index: 2; transition: width 0.3s; } .prio-bar-aligned { background: #10b981; } .prio-bar-under { background: #ef4444; } .prio-bar-over { background: #f59e0b; } .prio-numbers { display: flex; gap: 8px; align-items: center; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; } .prio-target { color: #94a3b8; } .prio-actual { font-weight: 600; } .prio-actual-aligned { color: #047857; } .prio-actual-under { color: #b91c1c; } .prio-actual-over { color: #b45309; } .prio-gap { font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 700; } .gap-under { background: #fee2e2; color: #991b1b; } .gap-over { background: #fef3c7; color: #92400e; } /* Outcome tiles */ .outcome-tile { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; text-align: center; } .outcome-value { font-size: 26px; font-weight: 700; color: #0a2a4a; font-variant-numeric: tabular-nums; line-height: 1; } .outcome-label { font-size: 11px; color: #475569; margin-top: 4px; line-height: 1.3; } /* Stalls */ .stall-row { display: grid; grid-template-columns: 60px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid #f1f5f9; font-size: 13px; } .stall-kind { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 4px; text-align: center; } .stall-category { background: #ede9fe; color: #5b21b6; } .stall-deal { background: #fce7f3; color: #9d174d; } .stall-label { color: #0f172a; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stall-detail { color: #64748b; font-size: 11px; font-style: italic; } .stall-when { color: #b91c1c; font-weight: 600; font-size: 11px; } /* Clickable mini-KPI buttons (replace plain mini-kpi) */ .mini-kpi-btn { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; cursor: pointer; text-align: left; transition: all 0.12s; } .mini-kpi-btn:hover { border-color: #1e4d80; background: white; box-shadow: 0 2px 8px rgba(30, 77, 128, 0.08); } .mini-kpi-btn.mini-kpi-active { background: linear-gradient(135deg, #0a2a4a, #1e4d80); border-color: #0a2a4a; } .mini-kpi-btn.mini-kpi-active .mini-label { color: rgba(255,255,255,0.7); } .mini-kpi-btn.mini-kpi-active .mini-value { color: white; } /* Category chips (clickable filter pills) */ .cat-chip { background: white; border: 1px solid #cbd5e1; border-radius: 999px; padding: 4px 12px; font-size: 11px; cursor: pointer; font-weight: 500; color: #475569; transition: all 0.1s; display: inline-flex; align-items: center; gap: 6px; } .cat-chip:hover { border-color: #1e4d80; color: #0a2a4a; } .cat-chip-active { background: #0a2a4a; border-color: #0a2a4a; color: white; } .cat-chip-count { background: rgba(0,0,0,0.06); padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700; } .cat-chip-active .cat-chip-count { background: rgba(255,255,255,0.2); } /* Time-of-day heatmap */ .heatmap { margin-top: 8px; } .heatmap-grid { display: grid; grid-template-columns: 40px repeat(24, 1fr); gap: 2px; font-size: 9px; } .heat-row-label { color: #64748b; font-size: 10px; font-weight: 600; padding: 4px 6px 4px 0; text-align: right; display: flex; align-items: center; justify-content: flex-end; } .heat-hour-label { color: #94a3b8; font-size: 9px; text-align: center; font-weight: 500; padding-bottom: 2px; } .heat-cell { aspect-ratio: 1; border-radius: 3px; cursor: pointer; transition: all 0.08s; border: 1px solid transparent; } .heat-cell:hover { border-color: #1e4d80; transform: scale(1.15); z-index: 2; } .heat-0 { background: #f1f5f9; } .heat-1 { background: #c7d2fe; } .heat-2 { background: #818cf8; } .heat-3 { background: #4f46e5; } .heat-4 { background: #312e81; } .heat-legend { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } /* Category pill on file rows */ .file-cat-pill { background: #eef2ff; color: #3730a3; font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; transition: all 0.1s; } .file-cat-pill:hover { background: #e0e7ff; } .file-extra { font-size: 11px; color: #64748b; margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .file-author { background: #fef3c7; color: #78350f; padding: 0 6px; border-radius: 4px; font-weight: 600; } .file-kind { font-style: italic; } .file-comment { color: #94a3b8; } .file-title-meta { color: #64748b; font-weight: 400; font-size: 12px; } /* Recent files list */ .file-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f1f5f9; } .file-row:hover { background: #f8fafc; } .file-main { min-width: 0; } .file-name { font-size: 13px; font-weight: 600; color: #0f172a; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-folder { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: #94a3b8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; } .file-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; white-space: nowrap; } .file-size { color: #475569; font-variant-numeric: tabular-nums; font-weight: 500; min-width: 50px; text-align: right; } .file-when { color: #94a3b8; min-width: 80px; text-align: right; } .file-ext-badge { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 9px; background: #f1f5f9; color: #475569; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; } /* Doc activity folders */ .folder-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 7px 4px; border-bottom: 1px solid #f1f5f9; font-size: 13px; } .folder-name { color: #0f172a; font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; } .folder-count { color: #1e4d80; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; } .folder-when { color: #94a3b8; font-size: 11px; text-align: right; white-space: nowrap; } /* Placeholder card */ .placeholder-card { background: linear-gradient(135deg, #f8fafc, #f1f5f9); border: 1px dashed #cbd5e1; } /* Opportunity inbox */ .opp-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: start; padding: 12px 4px; border-bottom: 1px solid #f1f5f9; } .opp-row:hover { background: #f8fafc; } .opp-score { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; color: white; } .opp-score-top { background: linear-gradient(135deg, #c9a14a, #d4af5c); box-shadow: 0 2px 6px rgba(201, 161, 74, 0.3); } .opp-score-high { background: linear-gradient(135deg, #1e4d80, #2b5fa0); } .opp-score-mid { background: linear-gradient(135deg, #64748b, #475569); } .opp-score-low { background: #cbd5e1; color: #64748b; } .opp-main { min-width: 0; } .opp-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; line-height: 1.3; } .opp-title a { color: #0f172a; text-decoration: none; } .opp-title a:hover { color: #1d4ed8; text-decoration: underline; } .opp-meta { font-size: 12px; color: #64748b; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; } .opp-close { font-weight: 600; color: #475569; } .opp-reasons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .opp-reason { background: #ecfdf5; color: #065f46; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 500; } .opp-source-pill { text-transform: uppercase; font-size: 9px; letter-spacing: 0.04em; } .opp-source-sbir_gov { background: #dbeafe; color: #1e3a8a; } .opp-source-sam_gov { background: #fef3c7; color: #78350f; } .opp-source-dsip { background: #f3e8ff; color: #5b21b6; } .opp-source-darpa { background: #ffedd5; color: #9a3412; } .opp-source-nspires { background: #ccfbf1; color: #134e4a; } /* ─── Source Health Banner ────────────────────────────────────────────────── */ .source-health-banner.sh-banner-healthy { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; } .source-health-banner.sh-banner-stale { background: #fefce8; border: 1px solid #fde68a; color: #854d0e; } .source-health-banner.sh-banner-failing { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; } .source-health-banner.sh-banner-empty { background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; } .source-health-chip.sh-healthy { background: #d1fae5; color: #065f46; } .source-health-chip.sh-stale { background: #fef3c7; color: #92400e; } .source-health-chip.sh-failing { background: #fee2e2; color: #991b1b; } .source-health-chip.sh-empty { background: #e2e8f0; color: #475569; } /* ─── Opportunity action chips (Pursue / Evaluate / Watch / Skip) ────────── */ .opp-action-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; margin-right: 8px; vertical-align: middle; } .opp-action-pursue { background: #d1fae5; color: #065f46; } .opp-action-evaluate { background: #fef3c7; color: #92400e; } .opp-action-watch { background: #e0e7ff; color: #3730a3; } .opp-action-skip { background: #e2e8f0; color: #475569; } /* "Already Pursuing" badge on opp rows */ .opp-pursuing-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; margin-right: 8px; background: #fef3c7; color: #78350f; border: 1px solid #fde68a; vertical-align: middle; } /* STTR badge — operational signal that this opp needs an RI partner. Visually distinct from the "Already Pursuing" amber: cooler tone, so the eye can quickly tell "still pursuable, but added time-budget" from "off the table". */ .opp-sttr-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; margin-right: 8px; background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; vertical-align: middle; letter-spacing: 0.2px; } /* Thesis-competitor badge — subtopic explicitly locks sTARS out by mandating the architectural alternative we compete against (regolith/softgoods/passive). Red because the CEO direction is "don't bid against our own thesis." */ .opp-thesis-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; margin-right: 8px; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; vertical-align: middle; letter-spacing: 0.2px; } /* Per-product fit chips — surface which products are compatible vs locked per opp. Compatible (green) when positive keywords match without a lock hit; locked (red) when an architectureLocks phrase matched. */ .opp-product-chip { display: inline-block; font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 3px; margin-right: 4px; vertical-align: middle; letter-spacing: 0.2px; } .opp-product-chip.compatible { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .opp-product-chip.locked { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; text-decoration: line-through; } /* Filter-bar checkbox styling (for hide-pursuing toggle) */ .filter-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #334155; padding: 6px 10px; background: white; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; user-select: none; } .filter-checkbox input[type="checkbox"] { margin: 0; cursor: pointer; } .filter-checkbox:hover { background: #f8fafc; } /* Section-meta inline action pills (small counters next to "Pursue · Evaluate · Watch" labels) */ .action-pill { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-right: 2px; } .action-pill.action-pursue { background: #d1fae5; color: #065f46; } .action-pill.action-evaluate { background: #fef3c7; color: #92400e; } .action-pill.action-watch { background: #e0e7ff; color: #3730a3; } /* Clickable mini-KPI tiles (filter shortcuts) */ .mini-kpi-pursue { border-left: 3px solid #10b981; } .mini-kpi-evaluate { border-left: 3px solid #f59e0b; } .mini-kpi-pursue:hover, .mini-kpi-evaluate:hover { background: #f8fafc; } /* Reason chips with positive/negative coloring */ .opp-reason-positive { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .opp-reason-negative { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .opp-reason-neutral { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; } .opp-actions { display: flex; flex-direction: column; gap: 4px; align-self: center; } .opp-btn { width: 32px; height: 28px; border: 1px solid #e2e8f0; background: white; border-radius: 6px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.1s; } .opp-btn:hover { transform: scale(1.05); } .opp-btn-track:hover { background: #fef3c7; border-color: #c9a14a; } .opp-btn-snooze:hover { background: #f1f5f9; border-color: #64748b; } .opp-btn-ignore:hover { background: #fee2e2; border-color: #ef4444; } /* ─── Tooltips (Tippy.js, BoB three-part WHAT/WHY/HOW theme) ─────────── */ /* Subtle visual cue that something is clickable for explanation */ [data-tooltip-id] { cursor: help; } /* Inline info icon — used ONLY on sortable column headers where bare-click sorts */ .tt-info-icon { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; font-size: 10px; font-weight: 600; border-radius: 50%; background: #e2e8f0; color: #475569; margin-left: 5px; cursor: help; vertical-align: 1px; user-select: none; transition: all 0.12s; } .tt-info-icon:hover { background: #cbd5e1; color: #1e293b; } /* Three-part tooltip template — theme-independent. We DON'T rely on Tippy's [data-theme] attribute. Instead, we detect any tippy-box that contains our .tt-title element and apply the BoB styling. That way the popup looks right regardless of whether the theme name made it through to the DOM. */ .tippy-box:has(.tt-title) { background: #ffffff !important; color: #1e293b !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06) !important; font-size: 12.5px; line-height: 1.5; } .tippy-box:has(.tt-title) > .tippy-content { padding: 12px 14px; background: #ffffff; color: #1e293b; border-radius: 8px; } .tippy-box:has(.tt-title) .tippy-arrow { color: #ffffff !important; } /* Fallback for browsers without :has() support (Firefox <121): apply the same styling via the bob-light theme attribute. Most users on Chrome/Safari get the :has() rules above. */ .tippy-box[data-theme~='bob-light'] { background: #ffffff; color: #1e293b; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06); font-size: 12.5px; line-height: 1.5; } .tippy-box[data-theme~='bob-light'] > .tippy-content { padding: 12px 14px; background: #ffffff; color: #1e293b; border-radius: 8px; } .tippy-box[data-theme~='bob-light'] .tippy-arrow { color: #ffffff; } .tt-title { font-size: 13px; font-weight: 700; color: #0f172a !important; border-bottom: 1px solid #e2e8f0; padding-bottom: 7px; margin-bottom: 9px; letter-spacing: -0.01em; } .tt-section { margin-bottom: 8px; } .tt-section:last-child { margin-bottom: 0; } .tt-label { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #475569 !important; margin-bottom: 3px; } .tt-body { font-size: 12.5px; color: #1e293b !important; line-height: 1.55; } .tt-loading { font-size: 12px; color: #64748b !important; font-style: italic; } .tt-missing .tt-title { color: #b91c1c !important; } .tt-missing code { background: #fef2f2; color: #991b1b; padding: 1px 5px; border-radius: 3px; font-size: 11px; } /* ─── Today's Focus hero ─────────────────────────────────────────────── */ .focus-hero { background: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%); border: 1px solid var(--border-1); border-radius: var(--r-hero); padding: var(--space-5); margin-bottom: var(--space-6); box-shadow: var(--shadow-ambient); position: relative; overflow: hidden; } .focus-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brand-orange) 0%, var(--brand-purple) 50%, var(--brand-navy) 100%); } .focus-hero-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); } .focus-hero-title { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-primary); background: linear-gradient(90deg, var(--brand-orange), var(--brand-purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .focus-hero-meta { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-num); } .focus-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } @media (min-width: 900px) { .focus-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 1300px) { .focus-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } } .focus-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--r-card); text-decoration: none; cursor: pointer; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); position: relative; overflow: hidden; } .focus-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-focus); border-color: var(--brand-orange); } .focus-card-icon { font-size: 24px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: var(--r-card); } .focus-card-body { flex: 1; min-width: 0; } .focus-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: 2px; } .focus-card-sub { font-size: 11px; color: var(--text-secondary); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .focus-card-prio { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; padding: 2px 6px; border-radius: var(--r-chip); white-space: nowrap; flex-shrink: 0; } /* Priority tier color-coding */ .focus-priority-urgent .focus-card-prio { background: var(--status-danger-tint); color: var(--status-danger); } .focus-priority-today .focus-card-prio { background: var(--brand-orange-tint); color: var(--brand-orange); } .focus-priority-this_week .focus-card-prio { background: var(--brand-purple-tint); color: var(--brand-purple); } .focus-priority-info .focus-card-prio { background: var(--surface-3); color: var(--text-tertiary); } /* Color accents — left edge stripe on each card matches its category */ .focus-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand-navy); } .focus-color-orange::before { background: var(--brand-orange); } .focus-color-purple::before { background: var(--brand-purple); } .focus-color-success::before { background: var(--status-success); } .focus-color-warning::before { background: var(--status-warning); } .focus-color-danger::before { background: var(--status-danger); } .focus-color-navy::before { background: var(--brand-navy); } /* Urgent cards pulse subtly to draw the eye */ .focus-priority-urgent { animation: focus-pulse 3s ease-in-out infinite; } @keyframes focus-pulse { 0%, 100% { box-shadow: var(--shadow-ambient); } 50% { box-shadow: 0 4px 16px rgba(220, 38, 38, 0.18), 0 2px 6px rgba(220, 38, 38, 0.12); } } /* ─── Card wrap + chevron + inline drill-down ───────────────────────────── Cards with a deals[] array can be toggled open to reveal an inline list of the actual deals/contacts the headline represents. The wrap lets us span the grid column for the expansion without breaking the grid flow. */ .focus-card-wrap { display: flex; flex-direction: column; gap: 0; min-width: 0; /* allow the grid cell to shrink below its content's min-content width */ } .focus-card-wrap.is-expanded { grid-column: 1 / -1; } .focus-card.has-deals { cursor: pointer; } .focus-card-chev { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; margin-right: 4px; transition: transform var(--t-fast) var(--ease-out); } .focus-card-wrap.is-expanded .focus-card-chev { transform: rotate(180deg); color: var(--brand-orange); } .focus-card-wrap.is-expanded .focus-card { border-color: var(--brand-orange); box-shadow: var(--shadow-focus); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .focus-card-expansion { background: var(--surface-2); border: 1px solid var(--brand-orange); border-top: none; border-radius: 0 0 var(--r-card) var(--r-card); padding: var(--space-2) 0; box-shadow: var(--shadow-ambient); max-height: 420px; overflow-y: auto; } .focus-exp-head { display: flex; justify-content: space-between; align-items: center; padding: 4px var(--space-4); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); border-bottom: 1px solid var(--border-1); margin-bottom: 4px; } .focus-exp-section-link { font-size: 10px; font-weight: 700; color: var(--brand-orange); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; } .focus-exp-section-link:hover { text-decoration: underline; } .focus-exp-list { display: flex; flex-direction: column; } .focus-exp-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-4); background: transparent; border: none; border-left: 3px solid transparent; text-align: left; cursor: pointer; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .focus-exp-row:hover { background: var(--surface-3); border-left-color: var(--brand-orange); } /* Triage rows are surfacing-only — resolved in BoB chat, not navigable. */ .focus-exp-row.is-static { cursor: default; } .focus-exp-row.is-static:hover { background: transparent; border-left-color: transparent; } .focus-exp-row + .focus-exp-row { border-top: 1px solid var(--border-1); } .focus-exp-row-main { flex: 1; min-width: 0; } .focus-exp-row-name { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; overflow-wrap: anywhere; /* wrap long deal names inside the card instead of bleeding */ } .focus-exp-row-meta { font-size: 11px; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; min-width: 0; } .focus-exp-contact { font-weight: 600; color: var(--text-primary); } .focus-exp-email { font-family: var(--font-mono); font-size: 10px; color: var(--brand-purple); word-break: break-all; } .focus-exp-extra { color: var(--text-tertiary); font-style: italic; } .focus-exp-row-days { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-tertiary); background: var(--surface-1); padding: 2px 8px; border-radius: var(--r-chip); flex-shrink: 0; } /* ─── Partners & Relationships section (migration 37) ─────────────────────── */ .partner-group { margin-bottom: var(--space-6); } .partner-count { color: var(--text-tertiary); font-weight: 500; font-size: 13px; margin-left: 6px; } .partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); } .partner-card { background: var(--surface-2); border: 1px solid var(--border-1); border-left: 3px solid var(--brand-navy); border-radius: var(--r-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .partner-card.is-clickable { cursor: pointer; transition: border-color .12s ease, transform .12s ease; } .partner-card.is-clickable:hover { border-left-color: var(--brand-purple, #7c5cff); transform: translateY(-1px); } .partner-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .partner-name { font-weight: 700; color: var(--text-primary); font-size: 14px; } .partner-type { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); white-space: nowrap; } .partner-chips { display: flex; gap: 6px; flex-wrap: wrap; } .partner-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-secondary); } .partner-badge-active { background: #16a34a22; color: #16a34a; } .partner-badge-prospective { background: #d9770622; color: #d97706; } .partner-badge-dormant, .partner-badge-past { background: var(--surface-3); color: var(--text-tertiary); } .partner-badge-blocked { background: #ef444422; color: #ef4444; } .partner-badge-customer { background: var(--brand-orange-tint); color: var(--brand-orange); text-decoration: none; cursor: pointer; } .partner-badge-customer:hover { background: var(--brand-orange-soft); } .partner-poc { font-size: 12px; color: var(--text-secondary); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .partner-poc-email { font-family: var(--font-mono); font-size: 10px; color: var(--brand-purple); } .partner-last { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); } .partner-notes { font-size: 12px; color: var(--text-secondary); line-height: 1.4; border-top: 1px solid var(--border-1); padding-top: var(--space-2); } .partner-empty { color: var(--text-tertiary); padding: var(--space-6); text-align: center; }