/* ========================================================================= In2Logic — Extraction Workbench (look-and-feel mock) Light technical theme · engineering / CAD / PDM aesthetic ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---- Design tokens ---------------------------------------------------- */ :root { --bg: #EEF1F4; --surface: #FFFFFF; --surface-2: #F7F9FB; --surface-3: #EFF3F6; --border: #DCE2E8; --border-strong:#C4CDD6; --ink: #16202B; --ink-2: #4A5A6A; --ink-3: #7B8A98; --accent: #0B7FC7; --accent-ink: #0A6AA6; --accent-bg: #E7F2FB; --ok: #1E9E68; --ok-bg: #E4F4EC; --warn: #C9810A; --warn-bg: #FBF0DB; --bad: #CC3D3D; --bad-bg: #FBE7E7; --neutral:#7B8A98; --neutral-bg:#EAEEF2; /* One colour for everything AI — badges, pulses, and AI action buttons. Indigo, not blue: clearly distinct from --accent (a teal-blue) at a glance, and it was already the app's own latent "secondary" colour (dozens of var(--accent,#6366f1) fallbacks throughout the codebase never resolve because --accent is set — this makes that dormant identity the real, visible AI colour instead of dead CSS). --ai-light is the SAME hue lightened for readability on dark surfaces (hero, dark modals) — never a different hue, so light-context and dark-context AI markers still read as "the same colour", just adapted for contrast. */ --ai: #6366F1; --ai-ink: #4F46E5; --ai-bg: rgba(99,102,241,.12); --ai-border: rgba(99,102,241,.4); --ai-light: #A5B4FC; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --r: 6px; --r-sm: 4px; --shadow: 0 1px 2px rgba(16,32,43,.05), 0 1px 1px rgba(16,32,43,.03); --shadow-md: 0 4px 14px rgba(16,32,43,.08); --rail-w: 76px; --topbar-h: 56px; --grid: linear-gradient(rgba(11,127,199,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(11,127,199,.055) 1px, transparent 1px); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } /* Global link hover fallback — deliberately a bare element selector (not a:not(.btn)) so its low specificity always loses to any classed hover rule (.btn:hover, .rail__item:hover, etc: class beats element regardless of order). Anything more specific overrides this safely; anything untouched still gets a real, visible hover instead of "nothing happens". */ a { color: var(--accent); text-decoration: none; border-radius: 4px; transition: background-color .12s ease, color .12s ease; } a:hover { color: var(--accent-ink); background: var(--accent-bg); } /* Links on the dark Quality hero keep their own (light) ink — the global light hover background would hide that near-white text. Use a translucent-white hover instead. */ .q-hero-link:hover { background: rgba(255,255,255,.14); text-decoration: underline; } .mono { font-family: var(--mono); font-feature-settings: "tnum" 1; } /* ---- App shell -------------------------------------------------------- */ .app { display: grid; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: 100vh; height: 100vh; overflow: hidden; } /* Left icon rail */ .rail { background: #122231; display: flex; flex-direction: column; align-items: stretch; padding: 10px 0; gap: 2px; } .rail__logo { display: grid; place-items: center; height: 46px; margin-bottom: 10px; color: #fff; } .rail__logo svg { width: 26px; height: 26px; } .rail__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; margin: 0 8px; border-radius: var(--r-sm); color: #9FB2C2; font-size: 10.5px; font-weight: 500; letter-spacing: .01em; position: relative; cursor: pointer; transition: background .12s, color .12s; } .rail__item svg { width: 20px; height: 20px; stroke-width: 1.7; } .rail__item:hover { background: rgba(255,255,255,.06); color: #D6E2EC; } .rail__item.is-active { color: #fff; background: rgba(11,127,199,.22); } .rail__item.is-active::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } .rail__spacer { flex: 1; } /* Main column */ .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } /* Top bar */ .topbar { height: var(--topbar-h); flex: none; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 18px; padding: 0 18px; } .project { display: flex; align-items: center; gap: 9px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r); cursor: default; background: var(--surface-2); } .project__mark { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; } .project__name { font-weight: 600; font-size: 13px; } .project__sub { font-size: 11px; color: var(--ink-3); } /* The pill is a plain workspace label now — hide the dropdown chevron (the only svg in .project; the "IN" mark is a text div). */ .project svg { display: none; } .search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 7px 12px; position: relative; } /* Global search live-results dropdown */ .gsearch-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(15,30,55,.16); max-height: 380px; overflow-y: auto; padding: 4px; } .gsearch-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); } .gsearch-item:hover, .gsearch-item.is-active { background: var(--surface-2); } .gsearch-kind { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; color: var(--ink-3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } .gsearch-kind.is-asm { color: var(--accent); border-color: var(--accent); } .gsearch-nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gsearch-pn { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; } .gsearch-empty { padding: 12px; font-size: 12.5px; color: var(--ink-3); text-align: center; } .search:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-bg); } .search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; } .search input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: var(--ink); } .search kbd { font-family: var(--mono); font-size: 11px; color: var(--ink-3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: #fff; } .topbar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--ink-2); cursor: pointer; position: relative; } .iconbtn:hover { border-color: var(--border-strong); color: var(--ink); } .iconbtn svg { width: 17px; height: 17px; } .iconbtn .dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); border: 1.5px solid #fff; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#0B7FC7,#15A3D6); color:#fff; display:grid; place-items:center; font-weight:600; font-size:13px; } /* Content area */ .content { flex: 1; min-height: 0; overflow: auto; } .page { padding: 22px 26px 40px; } .page--flush { padding: 0; max-width: none; height: 100%; } /* ---- Generic bits ----------------------------------------------------- */ .page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .page-head__titles { flex: 1; min-width: 0; } .page-title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0; } .page-sub { color: var(--ink-3); font-size: 13px; margin: 3px 0 0; } .breadcrumb { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; } .breadcrumb svg { width: 13px; height: 13px; } /* ══ Button system — one rule per category, used everywhere, no exceptions. ══ Every clickable action in the app is one of these. If a new action doesn't fit a category below, it's a sign the action itself needs reconsidering, not a reason to invent a one-off style. .btn (base) — shape shared by every button below. .btn--secondary white/bordered — Cancel, Refresh, Close: neutral, no verdict implied. .btn--primary solid blue — the ONE main forward action in a dialog (Save, Import, Download). .btn--ai solid AI blue — triggers an AI call (Classify/Generate/Run/Use AI suggestions). Always paired with the sparkle icon. This blue (--ai) is reserved for AI — distinct from --accent — so it always means "AI". .btn--approve solid green — accepts/confirms a proposal (Approve, Confirm, Trust value). .btn--reject amber outline — overrides/reassigns without deleting anything (Override, Reassign). .btn--danger red outline — deletes or permanently discards (Delete, Ignore, Remove). .link text, no box — pure navigation to another view (Reuse graph, Open part, Show in tree, View all). Never a bordered box that only LOOKS like a button on hover — if it navigates, it reads as a link at rest, not after the fact. Icon-only actions use .icon-btn (defined separately) — never .btn--ghost, which is retired. ══ */ .btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; font-size: 13px; padding: 8px 13px; border-radius: var(--r); transition: .12s; } .btn:hover { border-color: var(--ink-3); } .btn svg { width: 20px; height: 20px; flex-shrink: 0; } .btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--ink); } .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; } .btn--ai { background: var(--ai); border-color: var(--ai); color: #fff; } .btn--ai:hover { background: var(--ai-ink); border-color: var(--ai-ink); color: #fff; } .btn--approve { background: var(--ok); border-color: var(--ok); color: #fff; } .btn--approve:hover { background: #178055; border-color: #178055; color: #fff; } .btn--reject { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); } .btn--reject:hover { background: var(--warn); color: #fff; } .btn--danger { background: transparent; border-color: var(--bad); color: var(--bad); } .btn--danger:hover { background: var(--bad); color: #fff; } /* Deprecated — do not use in new code. Kept only so any straggling reference still renders instead of breaking; every real usage has been converted to .btn--secondary, .btn--ai, or .link depending on what the button actually does (see rule above). */ .btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn--ghost:hover { background: var(--surface-3); } .btn--sm { padding: 5px 9px; font-size: 12px; } .btn:disabled, .btn[disabled] { opacity: .38; cursor: not-allowed; pointer-events: none; } /* Dark-hero neutral chip — navigation/info/cancel on a dark hero background (e.g. Model's hero, Quality's "not configured" gate panel), never an AI action or an approve/primary action. Those use .btn--ai / .btn--approve, which read the same on light and dark backgrounds because they're solid colour, not translucent-on-navy. */ .btn--hero-secondary { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.45; padding: 8px 13px; border-radius: var(--r); cursor: pointer; display: flex; align-items: center; gap: 6px; text-decoration: none; } .btn--hero-secondary:hover { background: rgba(255,255,255,.18); } /* Pure navigation — text at rest, everywhere. One hover treatment for every link in the app: a soft background chip fades in and the text darkens slightly — no underline anywhere (deliberately dropped; a growing/appearing underline still reads as "old web", the chip reads as an actual interactive surface). The negative margin cancels the added padding so the chip doesn't shift surrounding layout. Applies to .link (explicit navigation), .rowlink/.q-issue-fix/.q-gt-row (table + list row links), and any bare the global fallback below catches. */ .link, .rowlink, .q-issue-fix { transition: background-color .12s ease, color .12s ease; border-radius: 5px; } .link:hover, .rowlink:hover, .q-issue-fix:hover { background: var(--accent-bg); color: var(--accent-ink); } .link { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 1px 5px; margin: -1px -5px; } .link--sm { font-size: 12px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); } /* Opt-in height cap: standalone page sections that can get very tall add .card--capped so their body scrolls with the header pinned. NOT applied to cards inside an already-scrolling panel (e.g. the detail panel) — that would create a second scrollbar. */ .card--capped { max-height: 560px; overflow: auto; } .card--capped .card__head { position: sticky; top: 0; z-index: 3; background: var(--surface); } .card__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .card__title { font-size: 13px; font-weight: 600; } .card__title .count { color: var(--ink-3); font-weight: 500; } .card__body { padding: 16px; } .card__head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* Status chips */ .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px 3px 7px; border-radius: 100px; border: 1px solid transparent; white-space: nowrap; } .chip .dot { width: 7px; height: 7px; border-radius: 50%; } .chip--ok { background: var(--ok-bg); color: #157A4F; } .chip--ok .dot{ background: var(--ok); } .chip--warn { background: var(--warn-bg); color: #9C6406; } .chip--warn .dot{ background: var(--warn); } .chip--bad { background: var(--bad-bg); color: #A92F2F; } .chip--bad .dot{ background: var(--bad); } .chip--neutral { background: var(--neutral-bg); color: #5A6B7B; } .chip--neutral .dot{ background: var(--neutral); } .chip--accent { background: var(--accent-bg); color: var(--accent-ink); } .chip--accent .dot{ background: var(--accent); } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } .chip--warn .dot.spin { animation: pulse 1.1s ease-in-out infinite; } .tag { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--border); } /* Blueprint grid surface */ .blueprint { background-color: #FBFDFE; background-image: var(--grid); background-size: 22px 22px; } /* ---- Dashboard -------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 15px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; /* Flex column so the last line (delta) can pin to the bottom — with equal-height tiles that gives every tile the same bottom padding, whatever its content height. */ display: flex; flex-direction: column; } .stat__label { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; } .stat__label svg { width: 15px; height: 15px; color: var(--accent); } .stat__value { font-family: var(--mono); font-size: 28px; font-weight: 600; margin-top: 8px; letter-spacing: -.01em; } .stat__value small { font-size: 14px; color: var(--ink-3); font-weight: 500; } .stat__delta { font-size: 11.5px; margin-top: auto; padding-top: 4px; color: var(--ok); } .stat__delta.flat { color: var(--ink-3); } .stat__bar { height: 5px; border-radius: 3px; background: var(--surface-3); margin-top: 12px; overflow: hidden; } .stat__bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; } /* Equal-height cards per row so a short card (e.g. Make-vs-buy) matches its taller neighbour and the row gaps stay uniform instead of leaving a big trailing gap under the shorter one. */ .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; } .file-row { display: grid; grid-template-columns: 26px 1fr minmax(72px,auto) auto; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); } /* Overview "Recent sources" variant — icon · name · arrow (no progress/status column); the arrow sits in the last column, flush right. */ .file-row--simple { grid-template-columns: 26px 1fr auto; } .file-row:last-child { border-bottom: 0; } .file-row:hover { background: var(--surface-2); } .file-ic { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; } .file-ic svg { width: 15px; height: 15px; } .file-name { font-weight: 500; font-size: 13px; } .file-meta { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); } .mini-prog { width: 90px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; } .mini-prog > i { display: block; height: 100%; background: var(--warn); } /* Ingest queue icon action button */ .iq-icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--border); background: transparent; color: var(--ink-3); cursor: pointer; text-decoration: none; transition: border-color .1s, color .1s, background .1s; } .iq-icon-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .iq-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(11,127,199,.06); } .iq-icon-btn--warn { border-color: rgba(201,129,10,.35); color: var(--warn, #C9810A); } .iq-icon-btn--warn:hover { border-color: var(--warn, #C9810A); background: var(--warn-bg, rgba(201,129,10,.07)); } .attn-item { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .attn-item:last-child { border: 0; } .attn-ic { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; } .attn-ic svg { width: 16px; height: 16px; } .attn-ic--warn { background: var(--warn-bg); color: var(--warn); } .attn-ic--bad { background: var(--bad-bg); color: var(--bad); } .attn-body { font-size: 13px; } .attn-body .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; } .coverage-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; } .coverage-row .lbl { width: 92px; font-size: 12.5px; font-family: var(--mono); color: var(--ink-2); } .coverage-row .track { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; } .coverage-row .track > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; } .coverage-row .pct { width: 40px; text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); } /* Overview's make-vs-buy tile — a summary, not the ranked list (that lives on the Quality page's reuse graph, #bubble-chart). */ .mvb-summary { padding: 14px 16px; } .mvb-summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; } .mvb-summary-stat { display: flex; flex-direction: column; gap: 2px; } .mvb-summary-val { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.01em; } .mvb-summary-lbl { font-size: 11px; color: var(--ink-3); } .mvb-summary-foot { font-size: 12px; color: var(--ink-2); } .mvb-summary-foot a { color: var(--accent); font-weight: 600; } /* ---- Ingest ----------------------------------------------------------- */ .dropzone { border: 2px dashed var(--border-strong); border-radius: var(--r); padding: 44px 24px; text-align: center; cursor: pointer; transition: .15s; } .dropzone:hover { border-color: var(--accent); } .dropzone__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; margin: 0 auto 14px; } .dropzone__ic svg { width: 26px; height: 26px; } .dropzone h3 { margin: 0 0 5px; font-size: 16px; } .dropzone p { margin: 0; color: var(--ink-3); font-size: 13px; } .formats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; } /* ---- Tables ----------------------------------------------------------- */ .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .toolbar .sep { width: 1px; height: 22px; background: var(--border); } .filterbar { display: flex; gap: 6px; } .filter { font-size: 12.5px; padding: 6px 11px; border-radius: 100px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); } .filter:hover { border-color: var(--border-strong); } .filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); } /* Card clips at the viewport edge on narrow windows unless the table itself scrolls horizontally — without this wrapper, wide rows spilled outside the (shorter) card background instead of being contained. */ .table-scroll { overflow-x: auto; } table.data { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; } table.data th, table.data td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); } table.data thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; background: var(--surface); position: sticky; top: 0; user-select: none; } table.data thead th.sortable { cursor: pointer; } table.data thead th.sortable:hover { color: var(--ink); } table.data thead th .arrow { opacity: .35; font-size: 10px; } table.data thead th.sorted .arrow { opacity: 1; color: var(--accent); } table.data tbody tr:hover { background: var(--surface-2); } table.data td.num { font-family: var(--mono); } .colcheck { width: 38px; text-align: center !important; } .rowlink { font-weight: 500; color: var(--ink); } .rowlink:hover { color: var(--accent); } input[type=checkbox].ck { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .table-foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; font-size: 12.5px; color: var(--ink-3); } /* ---- Workbench (3-pane) ----------------------------------------------- */ .wb { --tree-w: 25%; display: grid; grid-template-columns: var(--tree-w) 5px 1fr 40%; grid-template-rows: 1fr; height: 100%; min-height: 0; } .wb__pane { display: flex; flex-direction: column; min-height: 0; background: var(--surface); } .wb__pane + .wb__pane { border-left: 1px solid var(--border); } .wb__resize { display: flex; align-items: center; justify-content: center; cursor: col-resize; background: var(--border); transition: background .15s; z-index: 1; width: 5px; min-width: 5px; } .wb__resize::after { content: ''; display: block; width: 1px; height: 32px; background: var(--ink-3); border-radius: 1px; opacity: .4; } .wb__resize:hover, .wb__resize.is-dragging { background: var(--accent); } .wb__resize:hover::after, .wb__resize.is-dragging::after { opacity: 1; background: white; } .wb__head { height: 42px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); } .wb__head .right { margin-left: auto; display: flex; gap: 4px; } .wb__scroll { flex: 1; overflow: auto; } /* Tree */ .tree { padding: 6px 0; font-size: 13px; } .tree__node { display: flex; align-items: center; gap: 7px; padding: 5px 12px; cursor: pointer; border-radius: 0; } .tree__node:hover { background: var(--surface-2); } .tree__node.is-sel { background: var(--accent-bg); color: var(--accent-ink); font-weight: 500; } .tree__node.is-sel::before { content:""; position:absolute; } .tree__node .caret { width: 14px; color: var(--ink-3); display: grid; place-items: center; } .tree__node .caret svg { width: 12px; height: 12px; transition: transform .12s; } .tree__node.collapsed .caret svg { transform: rotate(-90deg); } .tree__node .pic { width: 16px; height: 16px; color: var(--ink-3); } .tree__node.is-sel .pic { color: var(--accent); } .tree__node .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tree__node .pn { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .tree .lvl1 { padding-left: 12px; } .tree .lvl2 { padding-left: 30px; } .tree .lvl3 { padding-left: 48px; } /* CAD viewport */ .viewport { flex: 1; position: relative; display: grid; place-items: center; overflow: hidden; } .viewport__toolbar { position: absolute; top: 12px; left: 12px; display: flex; gap: 4px; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: var(--r); padding: 4px; box-shadow: var(--shadow); backdrop-filter: blur(4px); } .vt-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; } .vt-btn:hover { background: var(--surface-3); color: var(--ink); } .vt-btn.is-active { background: var(--accent-bg); color: var(--accent); } .vt-btn svg { width: 17px; height: 17px; } .viewcube { position: absolute; top: 12px; right: 12px; width: 58px; height: 58px; border: 1px solid var(--border); border-radius: var(--r); background: rgba(255,255,255,.92); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 10px; color: var(--ink-3); } .viewport__foot { position: absolute; bottom: 0; left: 0; right: 0; height: 32px; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: rgba(255,255,255,.92); border-top: 1px solid var(--border); font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); backdrop-filter: blur(4px); } .viewport__foot .sp { margin-left: auto; } /* Data panel (right) */ .dp { padding: 0; } .dp__overall { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .dp__ring { --p: 91; width: 46px; height: 46px; border-radius: 50%; flex: none; background: conic-gradient(var(--ok) calc(var(--p)*1%), var(--surface-3) 0); display: grid; place-items: center; } .dp__ring > span { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; } .dp__overall .t1 { font-size: 13px; font-weight: 600; } .dp__overall .t2 { font-size: 11.5px; color: var(--ink-3); } .dp__section { padding: 6px 0; border-bottom: 1px solid var(--border); } .dp__section h4 { margin: 0; padding: 11px 16px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; } .field { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 7px 16px; align-items: center; } .field:hover { background: var(--surface-2); } .field__k { font-size: 12px; color: var(--ink-3); } .field__v { font-family: var(--mono); font-size: 13px; font-weight: 500; text-align: right; } .field__c { grid-column: 2; justify-self: end; } .field__act { grid-column: 1 / -1; display: none; gap: 6px; padding-top: 4px; } .field:hover .field__act { display: flex; } .dp__foot { padding: 14px 16px; display: flex; gap: 8px; } .dp__foot .btn { flex: 1; justify-content: center; } /* ---- Part detail ------------------------------------------------------ */ .detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; } .prop-row { display: grid; grid-template-columns: 160px 1fr auto; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); align-items: center; } .prop-row:last-child { border: 0; } .prop-row .k { font-size: 12.5px; color: var(--ink-3); } .prop-row .v { font-family: var(--mono); font-size: 13px; } .prov-item { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .prov-item:last-child { border: 0; } .prov-ic { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2); display: grid; place-items: center; flex: none; } .prov-ic svg { width: 16px; height: 16px; } .prov-item .t1 { font-size: 13px; font-weight: 500; } .prov-item .t2 { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); margin-top: 2px; } .prov-item--active { background: var(--surface-2); cursor: default; pointer-events: none; } .thumb { aspect-ratio: 4/3; border-radius: var(--r); border: 1px solid var(--border); overflow: hidden; } /* ---- Preview thumbnail (bitmap extracted from the CAD file) ----------- */ .preview-img { display: block; object-fit: contain; background: #fff; } .thumb .preview-img { width: 100%; height: 100%; border-radius: inherit; } /* Workbench centre viewport: show the preview clear of the floating toolbar (top-left) and the info footer (bottom); cap size so it stays crisp. */ #vp-svg { position: absolute; inset: 0; display: grid; place-items: center; padding: 56px 28px 44px; } #vp-svg .preview-img { max-width: min(100%, 560px); max-height: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow); } /* Honest empty state — shown when the source file has no embedded thumbnail. */ .preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--ink-3); width: 100%; height: 100%; } .preview-empty svg { width: 42px; height: 42px; opacity: .45; } .preview-empty span { font-size: 13px; font-weight: 600; color: var(--ink-2); } .preview-empty small { font-size: 11.5px; color: var(--ink-3); max-width: 240px; } /* ---- Interactive drawing viewer (real extracted geometry, pan + zoom) --- */ .dgm-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; color: var(--ink-3); font-size: 12.5px; } .dgm-spin { width: 22px; height: 22px; border: 3px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: dgm-spin .8s linear infinite; } @keyframes dgm-spin { to { transform: rotate(360deg); } } .dgm { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; } .dgm__sheets { flex: none; display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); z-index: 2; } .dgm__tab { font: inherit; font-size: 11px; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px 9px; cursor: pointer; } .dgm__tab:hover { background: var(--surface-3); } .dgm__tab.is-active { color: var(--accent); background: var(--accent-bg); border-color: transparent; } .dgm__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; } .dgm__stage.is-dragging { cursor: grabbing; } .dgm__canvas { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; } .dgm__canvas svg { width: 100%; height: 100%; display: block; } /* Balloon overlay stacks on top of the geometry SVG, sharing its viewBox. */ .dgm__canvas .dgm__balloons { position: absolute; inset: 0; pointer-events: none; overflow: visible; } /* Exploded-view balloons (BOM callouts). vector-effect keeps strokes/markers a constant on-screen size through the canvas zoom transform. */ .dgm-bln { pointer-events: none; } .dgm-bln__hit { fill: transparent; pointer-events: all; cursor: default; } .dgm-bln.is-link .dgm-bln__hit { cursor: pointer; } .dgm-bln__dot { fill: #fff; stroke: #16213e; vector-effect: non-scaling-stroke; } .dgm-bln__txt { fill: #16213e; font-family: var(--mono, monospace); font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; } /* Leader lines + tips are shown for every balloon at rest (subtle grey) so the whole pos->part mapping is legible without hovering; hover/cross-highlight promotes one balloon to the accent colour. */ .dgm-bln__lead { stroke: #7b8a98; vector-effect: non-scaling-stroke; opacity: .55; } .dgm-bln__tip { fill: #7b8a98; opacity: .7; } .dgm-bln.is-hot .dgm-bln__lead { stroke: var(--accent, #2f6df6); opacity: 1; } .dgm-bln.is-hot .dgm-bln__tip { fill: var(--accent, #2f6df6); opacity: 1; } .dgm-bln.is-hot .dgm-bln__dot { fill: var(--accent, #2f6df6); stroke: var(--accent, #2f6df6); } .dgm-bln.is-hot .dgm-bln__txt { fill: #fff; } /* Raise the hovered balloon above its neighbours so its leader/label win. */ .dgm-bln.is-hot { pointer-events: all; } .dgm__tip { position: absolute; z-index: 4; max-width: 220px; pointer-events: none; background: rgba(22,33,62,.96); color: #fff; border-radius: var(--r-sm, 6px); padding: 7px 10px; box-shadow: var(--shadow, 0 4px 14px rgba(0,0,0,.2)); font-size: 12px; line-height: 1.35; } .dgm__tip[hidden] { display: none; } .dgm__tip-pos { display: inline-block; min-width: 18px; padding: 0 5px; margin-right: 6px; background: var(--accent, #2f6df6); border-radius: 999px; font-weight: 700; text-align: center; } .dgm__tip-no { font-family: var(--mono, monospace); font-weight: 600; } .dgm__tip-name { display: block; margin-top: 3px; color: #cdd6f4; } .dgm__tip-go { display: block; margin-top: 4px; color: #9ec1ff; font-size: 11px; } .dgm__hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 11px; color: var(--ink-3); background: rgba(255,255,255,.85); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; pointer-events: none; opacity: .9; } .dgm__ctrls { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 3px; background: rgba(255,255,255,.94); border: 1px solid var(--border); border-radius: var(--r); padding: 4px; box-shadow: var(--shadow); backdrop-filter: blur(4px); } .dgm__btn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-sm); cursor: pointer; font-size: 17px; line-height: 1; } .dgm__btn:hover { background: var(--surface-3); color: var(--ink); } .dgm__btn svg { width: 15px; height: 15px; } .dgm__pct { min-width: 40px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--ink-3); } /* Workbench centre viewport: let the diagram fill it, hide the decorative 3D chrome (orbit/viewcube imply features we don't have), keep clear of the foot. */ #vp-svg.dgm-has { padding: 0; } .viewport.has-dgm .viewport__toolbar, .viewport.has-dgm .viewcube { display: none; } #vp-svg .dgm__ctrls { bottom: 42px; } #vp-svg .dgm__hint { bottom: 40px; } /* Part-detail preview card hosts the same viewer. */ .thumb { position: relative; } .thumb.dgm-has { background: #fff; } .kv-inline { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; } .kv-inline .kv .k { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; } .kv-inline .kv .v { font-family: var(--mono); font-size: 14px; font-weight: 500; margin-top: 2px; } .muted { color: var(--ink-3); } .hr { height: 1px; background: var(--border); border: 0; margin: 18px 0; } /* ---- Tree cross-highlight (balloon hover -> matching node) ------------- */ .tree__node.is-hot { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); } .tree__node.is-hot .pic { color: var(--accent); } /* Prominent "open detail" link in the workbench viewport header. */ .vp-detail { margin-left: 10px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; } .vp-detail svg { width: 13px; height: 13px; } /* ---- Project pill quick-jump dropdown ---------------------------------- */ .project { position: relative; } .proj-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 320px; max-height: min(70vh, 520px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-md); overflow: hidden; } .proj-menu[hidden] { display: none; } .proj-menu__head { padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .proj-menu__head .t1 { font-size: 12px; font-weight: 700; } .proj-menu__head .t2 { font-size: 11px; color: var(--ink-3); font-family: var(--mono); margin-top: 1px; } .proj-menu__search { padding: 8px; border-bottom: 1px solid var(--border); } .proj-menu__search input { width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 9px; font: inherit; font-size: 13px; outline: none; } .proj-menu__search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .proj-menu__list { overflow: auto; padding: 4px; } .proj-menu__item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--r-sm); cursor: pointer; color: var(--ink); } .proj-menu__item:hover, .proj-menu__item.is-active { background: var(--surface-2); } .proj-menu__item svg { width: 15px; height: 15px; color: var(--accent); flex: none; } .proj-menu__item .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proj-menu__item .pn { margin-left: auto; padding-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .proj-menu__empty { padding: 16px; color: var(--ink-3); font-size: 12.5px; text-align: center; } /* ---- Edit-field modal (shared: part.html + workbench.html) ------------- */ .ed-modal { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.48); backdrop-filter: blur(2px); } .ed-modal.is-open { display: flex; } .ed-modal__box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 24px 24px 20px; width: 400px; max-width: calc(100vw - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.28); font-family: inherit; } .ed-modal__title { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ink); } .ed-modal__sub { margin: 0 0 12px; font-size: 12px; color: var(--ink-3); } .ed-modal__candidates { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .ed-modal__cand-hd { font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; width: 100%; margin-bottom: 2px; } .ed-modal__cand { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; cursor: pointer; background: var(--surface-2); color: var(--ink); font-family: inherit; text-align: left; transition: border-color .12s, background .12s; } .ed-modal__cand:hover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } .ed-modal__cand--rec { border-color: var(--ok, #10b981); background: #f0fdf4; } .ed-modal__cand--rec:hover { border-color: var(--ok, #10b981); background: #dcfce7; color: var(--ink); } .ed-modal__cand--rec small { color: var(--ok, #10b981); font-weight: 600; } .ed-modal__cand small { font-size: 10px; color: var(--ink-3); margin-bottom: 2px; } .ed-modal__input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--ink); background: var(--surface); outline: none; transition: border-color .15s; } .ed-modal__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .ed-modal__foot { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; } /* ---- Make-vs-buy badge (shared: Workbench tree, node inspector, Part Detail) --- */ .tree-mvb { font-size: 9.5px; padding: 1px 5px; border-radius: 3px; margin-left: 4px; font-weight: 600; flex-shrink: 0; } .tree-mvb--buy { background: rgba(34,197,94,.15); color: #15803d; } .tree-mvb--make { background: rgba(11,127,199,.12); color: #0B7FC7; } .tree-mvb--uncertain { background: rgba(245,158,11,.12); color: #b45309; } /* Assembly subtree make/buy rollup — a neutral count summary (not a single verdict), so no pill outline; the coloured numbers carry the meaning, the tooltip names the parts. */ .tree-mvb-roll { font-size: 9.5px; font-weight: 600; margin-left: 6px; flex-shrink: 0; color: var(--ink-3); white-space: nowrap; } /* ---- Reuse-count chip — a plain number, always shown, tooltip carries the words --- */ .tree-reuse { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 9px; margin-left: 4px; background: var(--surface-3); color: var(--ink-3); flex-shrink: 0; } /* ---- Duplicate chips (Phase 2) — same scale as .tree-mvb. Pending = warn tint ("⧉ duplicate?" linking to the part's resolve section); merged = accent tint ("⧉ N dwgs" on the canonical, tooltip lists the collapsed aliases). ---- */ .tree-dup { /* Same pill metrics as .ai-badge-pulse so the "variant?" chip and the "✦ AI n%" badge sit beside each other as a matched pair (equal height + shape). */ display: inline-flex; align-items: center; gap: 3px; font-family: inherit; font-size: 9.5px; padding: 1px 8px; border-radius: 20px; margin-left: 4px; font-weight: 600; line-height: 15px; flex-shrink: 0; text-decoration: none; border: 1px solid transparent; /* match .ai-badge-pulse box height */ } .tree-dup--pending { background: var(--warn-bg, rgba(201,129,10,.12)); color: var(--warn, #C9810A); } a.tree-dup--pending:hover { background: rgba(201,129,10,.22); color: var(--warn, #C9810A); } .tree-dup--merged { background: var(--accent-bg, #E7F2FB); color: var(--accent, #0B7FC7); } /* THE shared relation chip — "⧉