/* ============================================================ Casefile · Cockpit bridge Maps Casefile's design system (cf-* tokens + classes) onto the BizBot Cockpit look, keeping Casefile's GOLD accent + navy identity. Scoped under `.cockpit`, app pages only. 1. /casefile-design.css 2. /css/casefile-cockpit.css + ============================================================ */ @import url('/css/bizbot-cockpit.css'); body.cockpit{ --bbc-accent:#C9A961; /* Casefile gold */ --bbc-accent-2:#0B2545; /* navy */ /* flip cf-* tokens to cockpit-dark (cards use cf-bg-elev/surface → re-theme for free) */ --cf-bg:#06080D; --cf-bg-elev:var(--bbc-card); --cf-surface:var(--bbc-card); --cf-paper:#06080D; --cf-ink:#E7EEF7; --cf-ink-2:#CDD6E2; --cf-ink-3:#8A98AC; --cf-ink-4:#536074; --cf-slate:#8A98AC; --cf-line:rgba(255,255,255,.07); --cf-line-2:rgba(255,255,255,.12); --cf-navy:#E7EEF7; /* navy used mostly as TEXT/titles → light; bg usages overridden below */ --cf-navy-mid:#2D5282; --cf-navy-light:#2D5282; --cf-accent:#7CB3EE; /* link/active accent → light blue on dark */ /* keep --cf-gold / --cf-gold-light / --cf-gold-ink / --cf-danger / --cf-success / --cf-warn */ /* per-page local var aliases (app pages use bare --navy/--gold/--parchment/--ink) */ --navy:#E7EEF7; /* navy used mostly as TEXT → light; finite bg usages overridden below */ --gold:#C9A961; --gold-lt:#DFC07A; --parchment:var(--bbc-card-2); --ink:#E7EEF7; --border:rgba(255,255,255,.07); --bg:#06080D; background:var(--bbc-bg); /* beat body.casefile-gradient */ } /* ── Nav / topbar / sidebar ──────────────────────────────── */ .cockpit .cf-nav,.cockpit .cf-topbar,.cockpit .topbar{ background:color-mix(in srgb,var(--bbc-surface) 80%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--bbc-border) } /* ── cf-* components (mostly token-driven → adapt) ───────── */ .cockpit .cf-card,.cockpit .cf-panel{background:var(--bbc-card);border-color:var(--bbc-border);box-shadow:var(--bb-elev-1)} .cockpit .cf-chip{background:var(--bbc-card-2);border-color:var(--bbc-border);color:var(--bbc-muted)} .cockpit .cf-btn-ghost,.cockpit .cf-btn-outline{color:var(--bbc-text);border:1px solid var(--bbc-border-2);background:transparent} .cockpit .cf-btn-ghost:hover,.cockpit .cf-btn-outline:hover{border-color:var(--bbc-accent-line);color:var(--bbc-accent-text)} .cockpit .cf-table th{color:var(--bbc-dim);font-family:var(--bbc-mono);font-size:10px;letter-spacing:.06em; text-transform:uppercase;border-bottom:1px solid var(--bbc-border)} .cockpit .cf-table td{border-bottom:1px solid var(--bbc-hair)} .cockpit .cf-table tr:hover td{background:rgba(255,255,255,.02)} /* gold-bg button keeps dark text */ .cockpit .cf-btn-gold,.cockpit .btn-go,.cockpit .tool-card.hero .tool-btn{color:var(--cf-gold-ink)} /* navy is now light → set a navy SURFACE explicitly on its (finite) bg usages */ .cockpit .cf-btn-navy,.cockpit .cf-chip--navy, .cockpit .tool-btn,.cockpit .btn.secondary,.cockpit .btn-copy,.cockpit .btn-sm, .cockpit .matter-item.active,.cockpit .trial-banner{background:#1E3A5F;color:#fff;border-color:transparent} /* sidebar nav uses element-selector `nav{background:var(--navy)}` → navy surface (bg only) */ .cockpit nav{background:#1E3A5F} /* navy badge (gold text on navy) */ .cockpit .matter-count{background:#1E3A5F} /* ── Dashboard + app bespoke cards (#fff) → dark ─────────── */ .cockpit .stat-card,.cockpit .tool-card,.cockpit .recent-card, .cockpit .card,.cockpit .panel,.cockpit .topbar,.cockpit .modal, .cockpit .case-card,.cockpit .note-card,.cockpit .doc-card,.cockpit .sidebar{ background:var(--bbc-card);border-color:var(--bbc-border);color:var(--bbc-text) } .cockpit .modal{background:var(--bbc-raised);border:1px solid var(--bbc-border-2)} .cockpit .sidebar{background:var(--bbc-surface)} .cockpit .tool-card:hover,.cockpit .case-card:hover{border-color:var(--bbc-accent-line);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.35)} /* extra white-card surfaces (#fff) */ .cockpit .output-body,.cockpit .letter,.cockpit .btn-sample, .cockpit .matter-item,.cockpit .progress-item,.cockpit .drop-zone{ background:var(--bbc-card);border-color:var(--bbc-border);color:var(--bbc-text) } .cockpit .matter-item:hover{background:var(--bbc-card-2)} /* gold-tint surfaces (rgba(184,150,12,..) olive-gold → accent-soft) */ .cockpit .disclaimer,.cockpit .comm-type,.cockpit .btn-save,.cockpit .plan-badge, .cockpit .summary-section,.cockpit .analysis-section,.cockpit .output-subject,.cockpit .pill{ background:var(--bbc-accent-soft);border-color:var(--bbc-accent-line);color:var(--bbc-text) } .cockpit .intake-pending{background:var(--bbc-accent-soft);border-color:var(--bbc-accent-line);color:var(--bbc-accent-text)} /* semantic status tints */ .cockpit .tag.high,.cockpit .btn.danger,.cockpit .btn-danger,.cockpit .progress-item.err, .cockpit .risk-flag{background:color-mix(in srgb,var(--bbc-red) 15%,transparent);color:#FF8A93;border-color:color-mix(in srgb,var(--bbc-red) 28%,transparent)} .cockpit .tag.medium,.cockpit .tag.med{background:color-mix(in srgb,var(--bbc-amber) 14%,transparent);color:var(--bbc-amber);border-color:color-mix(in srgb,var(--bbc-amber) 28%,transparent)} .cockpit .progress-item.ok,.cockpit .intake-signed{background:color-mix(in srgb,#16A34A 16%,transparent);color:#4ADE80;border-color:color-mix(in srgb,#16A34A 28%,transparent)} .cockpit .tag.low,.cockpit .intake-inquiry,.cockpit .type{background:color-mix(in srgb,var(--bbc-cyan) 14%,transparent);color:var(--bbc-cyan)} .cockpit .drop-zone.drag{background:var(--bbc-accent-soft);border-color:var(--bbc-accent-line)} /* gentle entrance */ .cockpit .main,.cockpit main,.cockpit .cf-main{animation:bbcDriftUp .35s ease both}