/* Serveris — Phase 1 styling. Plain CSS, no framework. Same colour family as the desktop launcher so the two surfaces feel like siblings, but laid out for full-page browser views (not modal cards). */ :root { --bg: #f1f5f9; --card: #ffffff; --ink: #1a1d24; --muted: #5b6478; --line: #e0e5ee; --primary: #2563eb; --primary-d: #1d4ed8; --danger: #dc2626; --warn: #d97706; --ok: #15803d; /* Neutral surface/line/ink scale — every formerly-hardcoded slate/ gray literal maps here so the dark theme below can flip the whole UI by overriding ONE block. Light values = original literals. */ --surface: #ffffff; /* cards, table rows, modals */ --surface-2: #f8fafc; /* table headers, subtle panels */ --surface-3: #f1f5f9; /* pills, hovers, ghost buttons */ --surface-4: #e2e8f0; /* pressed / hover-on-surface-3 */ --line-2: #e5e7eb; /* hairline borders */ --line-3: #cbd5e1; /* stronger borders, input edges */ --ink-2: #334155; /* secondary headings */ --ink-3: #475569; /* tertiary text on light pills */ } /* ===== Dark theme ===== Activated by . The toggle button in the topbar (base.html) persists the choice in localStorage and an inline script applies it before first paint (no flash). Semantic chips/banners (amber running-banner, green done-banner, state pills with their own bg+ink pairs) are intentionally left as-is — they carry their own contrast in both themes. */ html[data-theme="dark"] { --bg: #0f172a; --card: #1e293b; --ink: #e6eaf2; --muted: #94a3b8; --line: #2e3a4f; --primary: #60a5fa; --primary-d: #3b82f6; --danger: #f87171; --warn: #fbbf24; --ok: #4ade80; --surface: #1e293b; --surface-2: #233042; --surface-3: #2b3a50; --surface-4: #344862; --line-2: #2e3a4f; --line-3: #46566e; --ink-2: #cbd5e1; --ink-3: #a8b4c6; color-scheme: dark; /* native scrollbars, date pickers, etc. */ } /* Inputs keep readable text/edges on dark surfaces. */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--surface-2); color: var(--ink); border-color: var(--line-3); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: var(--ink); background: var(--bg); min-height: 100vh; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; } /* ===== Top bar (when authenticated) ===== */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .topbar-left { display: flex; align-items: center; gap: 26px; } .topbar-right { display: flex; align-items: center; gap: 10px; } .brand { font-weight: 700; font-size: 17px; color: var(--ink); } .brand:hover { text-decoration: none; color: var(--primary); } .navlinks { display: flex; gap: 18px; } .navlinks a { color: var(--muted); font-weight: 500; } .navlinks a:hover { color: var(--ink); text-decoration: none; } .who { color: var(--muted); font-size: 13px; display: inline-flex; gap: 8px; align-items: center; } /* ===== Live agent-status banner (filled by the JS poller in base.html) ===== */ .agent-status-bar { /* No padding/margin when empty. Children supply their own spacing. */ position: sticky; top: 0; z-index: 50; } .agent-status { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-size: 13px; border-bottom: 1px solid transparent; } .agent-status-running { background: #fef3c7; color: #78350f; border-bottom-color: #fbbf24; } .agent-status-done { background: #dcfce7; color: #14532d; border-bottom-color: #86efac; } /* Health: a run that is alive but no longer making progress. */ .agent-status-warn { background: #fef08a; color: #713f12; border-bottom-color: #eab308; } .agent-status-alert { background: #fee2e2; color: #7f1d1d; border-bottom-color: #ef4444; animation: agentAlertPulse 1.6s ease-in-out infinite; } @keyframes agentAlertPulse { 0%, 100% { background: #fee2e2; } 50% { background: #fecaca; } } .agent-warn-ico { font-size: 16px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .agent-status-alert { animation: none; } } .agent-status-text { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; /* allow truncation on long log lines */ } .agent-status-text .muted { color: inherit; opacity: 0.72; } .agent-status-text strong { font-weight: 700; } .agent-spin { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: agent-spin-rot 0.9s linear infinite; flex-shrink: 0; } @keyframes agent-spin-rot { to { transform: rotate(360deg); } } .agent-check { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: #166534; color: #ffffff; border-radius: 50%; font-weight: 800; flex-shrink: 0; } .agent-bar { width: 160px; height: 8px; background: rgba(0, 0, 0, 0.08); border-radius: 4px; overflow: hidden; flex-shrink: 0; } .agent-bar-fill { display: block; height: 100%; background: #b45309; transition: width 0.35s ease; } .agent-pct { font-weight: 700; min-width: 36px; text-align: right; flex-shrink: 0; } .agent-ingest-link { color: #14532d; text-decoration: underline; font-weight: 700; } .agent-ingest-link:hover { text-decoration: none; } .agent-dismiss { background: transparent; border: 0; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 6px; color: inherit; opacity: 0.6; } .agent-dismiss:hover { opacity: 1; } /* VQC Photo Server status widget — moved to the global topbar. Mirrors the launcher's "Photos on/off · Start · Stop" pattern. */ .photo-server-bar { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Tighter spacing when sitting inside the .topbar. The topbar is already 12 px tall padding-wise, so use smaller button sizes and clip the URL when it's too long to keep the bar one line. */ .topbar-photos { gap: 6px; } .topbar-photos .photo-pill { padding: 3px 10px; font-size: 11px; } .topbar-photos #photo-url { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .photo-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .photo-pill-on { background: #dcfce7; color: #166534; } .photo-pill-off { background: var(--surface-3); color: var(--ink-3); } .photo-pill .photo-dot { display: inline-block; width: 8px; height: 8px; background: currentColor; border-radius: 50%; animation: photo-pulse 1.4s ease-in-out infinite; } .photo-pill-off .photo-dot { background: #94a3b8; animation: none; } @keyframes photo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* Toolbar "first slot" — fixed-width wrapper around the first element in each toolbar row. Used on the Orders page so the Order Filling button (row 1) and the Order to Production button (row 2) start at the same X coordinate, making the two pipeline stages read as a parallel column. The contents (picker, "+ New order" button) sit at the left of the slot; the empty trailing space is padding that pushes the NEXT element to the right edge of the slot. */ .agent-first-slot { display: inline-flex; align-items: center; min-width: 280px; } /* Inline account picker — sits next to the Scan/Refresh buttons. */ .agent-picker-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .agent-picker-label > span { font-weight: 600; } .agent-picker { padding: 6px 8px; border: 1px solid var(--line-3); border-radius: 5px; font-size: 12px; background: var(--surface); color: var(--ink); cursor: pointer; max-width: 260px; } .agent-picker:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* Stop button on the running banner. Brick-red so it reads as destructive next to the yellow running state. Disabled state (set by JS once the click is in flight) shows the ellipsis "…". */ .agent-stop-btn { background: #b91c1c; color: #ffffff; border: 1px solid #7f1d1d; border-radius: 5px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: background 0.12s; } .agent-stop-btn:hover:not(:disabled) { background: #991b1b; } .agent-stop-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ===== Flash messages ===== */ .flashes { padding: 0 22px; margin-top: 10px; } .flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; font-size: 13px; } .flash-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; } .flash-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .flash-warning { background: #fef3c7; color: #78350f; border: 1px solid #fbbf24; } .flash-info { background: #dbeafe; color: #1e3a8a; border: 1px solid #93c5fd; } /* ===== Main canvas ===== */ .main { padding: 22px; max-width: 1280px; margin: 0 auto; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 22px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .card h1 { margin: 0 0 6px; font-size: 22px; } .card h2 { margin: 18px 0 6px; font-size: 16px; color: var(--ink); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } /* Stacked variant — title on its own top line, toolbar on the line below it. Used on the Offers page so the agent controls don't have to share a row with the heading. */ .card-header-stacked { flex-direction: column; align-items: stretch; gap: 12px; } .card-header-stacked > h1 { margin: 0; } /* Toolbar row underneath the title — holds the agent form + auto-scan pill + download link. flex-wrap so narrow screens wrap instead of overflowing. */ .agent-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .agent-form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; /* kill the user-agent

default margin */ } /* Paired Start/Stop control — kept as siblings so they sit immediately next to each other in the toolbar, with a small visual breather between them. Each button keeps its own full rounded outline + drop shadow (unlike the merged-pair variant). */ .btn-pair { display: inline-flex; gap: 8px; } .muted { color: var(--muted); } .small { font-size: 11.5px; } .center { text-align: center; } .mono { font-family: "Consolas", "Menlo", monospace; font-size: 12px; } .inline { display: inline-block; } /* ===== Auth (login) card ===== */ .auth-card { max-width: 380px; margin: 80px auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 30px 28px; box-shadow: 0 4px 12px rgba(15,23,42,0.06); } .auth-title { margin: 0; font-size: 26px; } .auth-sub { margin: 4px 0 22px; color: var(--muted); } /* ===== Forms ===== */ .field, .field-inline { display: block; margin: 12px 0; } .field > span { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 4px; } .field input, .field select, .field-inline input { width: 100%; padding: 9px 11px; border: 1px solid var(--line-3); border-radius: 6px; font-size: 14px; background: var(--surface); } .field input:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } .field-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .field-inline input { width: auto; } .err { color: var(--danger); font-size: 12px; margin-top: 4px; } .form-narrow { max-width: 460px; } .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; } /* ===== Buttons ===== Pronounced "3D" look — chunky drop shadow at rest, dramatic lift on hover, satisfying push-in on click. Mirrors the launcher's _RoundedBtn but pushed harder for a more tactile feel. * Rest: 3-layer shadow (close-tight + mid + ambient) so the button reads as visibly raised off the page. * Hover: lifts -3 px, shadow stretches to ~18 px below — like it physically pops toward the cursor. * Active: sinks +2 px with a tight + inset shadow combo so it looks pushed into the page. * Colored variants additionally get a top-edge inset highlight AND a bottom-edge inset shadow — the bevel/rim that sells the raised-physical-button illusion. */ .btn { display: inline-block; padding: 9px 16px; font-size: 13px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; cursor: pointer; text-decoration: none; font-family: inherit; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.20), 0 4px 6px rgba(15, 23, 42, 0.14), 0 8px 14px rgba(15, 23, 42, 0.08); transform: translateY(0); transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.10s ease-out, box-shadow 0.15s ease-out; } .btn:hover { box-shadow: 0 2px 3px rgba(15, 23, 42, 0.24), 0 8px 12px rgba(15, 23, 42, 0.20), 0 18px 28px rgba(15, 23, 42, 0.14); transform: translateY(-3px); } .btn:active { box-shadow: 0 1px 1px rgba(15, 23, 42, 0.30), inset 0 2px 3px rgba(15, 23, 42, 0.20); transform: translateY(2px); } .btn:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; } .btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); } .btn-block { width: 100%; margin-top: 6px; } .btn-sm { padding: 6px 11px; font-size: 12px; } .btn-primary { background: var(--primary); color: #ffffff; border-color: var(--primary-d); } .btn-primary:hover { background: var(--primary-d); text-decoration: none; } .btn-ghost { background: var(--surface-3); color: var(--ink); border-color: var(--line-3); } .btn-ghost:hover { background: var(--surface-4); color: var(--ink); text-decoration: none; } /* Green Start / red Stop for the Offers page auto-scan controls. */ .btn-success { background: #16a34a; color: #ffffff; border-color: #15803d; } .btn-success:hover { background: #15803d; text-decoration: none; } .btn-danger { background: #dc2626; color: #ffffff; border-color: #b91c1c; } .btn-danger:hover { background: #b91c1c; text-decoration: none; } /* Beveled bright/colored variants — top inset = glossy highlight, bottom inset = darker "rim" so the button looks like a physical key sticking up off the surface. Both lighten/deepen on hover in proportion to the drop-shadow change. */ .btn-primary, .btn-success, .btn-danger { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22), 0 4px 6px rgba(15, 23, 42, 0.18), 0 8px 14px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -2px 0 rgba(0, 0, 0, 0.18); } .btn-primary:hover, .btn-success:hover, .btn-danger:hover { box-shadow: 0 3px 4px rgba(15, 23, 42, 0.26), 0 10px 14px rgba(15, 23, 42, 0.22), 0 20px 30px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -2px 0 rgba(0, 0, 0, 0.20); } .btn-primary:active, .btn-success:active, .btn-danger:active { box-shadow: 0 1px 1px rgba(15, 23, 42, 0.32), inset 0 2px 4px rgba(0, 0, 0, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.10); } /* Narrow numeric input next to the auto-scan controls. */ .agent-interval { width: 70px; padding: 6px 8px; border: 1px solid var(--line-3); border-radius: 5px; font-size: 12px; background: var(--surface); text-align: right; } .agent-interval:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* Auto-scan countdown pill — renders next to the Start/Stop buttons. Three states (off / on / busy) so the operator can tell at a glance whether the loop is idle-counting-down or actively running a scan right now. ``min-width`` + ``justify-content: center`` reserve the same horizontal space whether the pill has long text, short text, or is hidden — so the buttons either side of it don't shuffle left/right as the countdown ticks. The JS toggles ``visibility: hidden`` (not ``display: none``) for the same reason: space stays reserved, only the ink disappears. */ .auto-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 260px; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: 999px; white-space: nowrap; } .auto-pill-on { background: #dcfce7; color: #166534; } .auto-pill-busy { background: #fef3c7; color: #92400e; } /* OFF: borderless white pill (matches launcher C_CARD). Text muted slate; dot is forced red so "scanner is idle" reads at a glance without parsing the label. */ .auto-pill-off { background: var(--surface); color: var(--ink-3); } .auto-pill-off .auto-dot { background: #dc2626; } .auto-jitter { font-size: 10px; font-weight: 500; opacity: 0.75; margin-left: 2px; } /* Order Filling Agent Log — one card per agent run, with a header strip + a tabular list of the orders processed in that run. Colour-coded result chips mirror the launcher's per-result palette (launcher.py:_RESULT_COLORS). */ .agent-run-card { border: 1px solid var(--line-2); border-radius: 8px; margin: 14px 0; background: var(--surface); overflow: hidden; } .agent-run-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); } .agent-run-table { margin: 0; border: 0; } .agent-run-table th { background: var(--surface-3); } .agent-run-table td, .agent-run-table th { border-color: var(--line-2); } /* Result chips — same palette as the launcher's popup. ADDED/CONFIRMED = green (#16A34A / #DCFCE7) FAILED/ERROR = red (#991B1B / #FEE2E2) ALREADY = blue (#1E40AF / #DBEAFE) MANUAL = amber (#92400E / #FEF3C7) neutral fallback for anything else (slate). */ .pill.res-added { background: #dcfce7; color: #166534; } .pill.res-failed { background: #fee2e2; color: #991b1b; } .pill.res-already { background: #dbeafe; color: #1e40af; } .pill.res-manual { background: #fef3c7; color: #92400e; } .pill.res-neutral { background: var(--surface-3); color: var(--ink-2); } /* Production-report top-of-page counter strip — one tile per summary bucket (total / ok / warning / failed / skipped). */ .prod-counters { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px 0; } .prod-counter { flex: 1 1 110px; text-align: center; padding: 12px 8px; border-radius: 8px; border: 1px solid transparent; background: var(--surface-2); } .prod-counter > strong { display: block; font-size: 22px; line-height: 1.2; } .prod-counter > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.78; margin-top: 2px; } .prod-counter-total { background: var(--surface-3); color: var(--ink-2); border-color: var(--line-2); } .prod-counter-ok { background: #dcfce7; color: #166534; border-color: #86efac; } .prod-counter-warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; } .prod-counter-failed { background: #fee2e2; color: #991b1b; border-color: #fca5a5; } .prod-counter-skipped { background: #dbeafe; color: #1e40af; border-color: #93c5fd; } /* Processing-report cards — one per problematic PO. Coloured left-edge accent + status badge, matches the launcher's popup (launcher.py:5286). Other states inherit the neutral block. */ .report-card { border: 1px solid var(--line-2); border-left-width: 5px; border-radius: 8px; margin: 10px 0; padding: 12px 14px 8px; background: var(--surface); } .report-card-err { border-left-color: #dc2626; } .report-card-warn { border-left-color: #d97706; } .report-card-skp { border-left-color: #94a3b8; } .report-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .report-card-head > strong { font-size: 14px; } .report-badge { display: inline-block; padding: 3px 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; border-radius: 999px; text-transform: uppercase; } .report-card-err .report-badge { background: #fee2e2; color: #991b1b; } .report-card-warn .report-badge { background: #fef3c7; color: #92400e; } .report-card-skp .report-badge { background: var(--surface-3); color: var(--ink-3); } .report-kv { display: grid; grid-template-columns: 80px 1fr; column-gap: 12px; row-gap: 3px; margin: 0; font-size: 12px; } .report-kv > dt { font-weight: 700; color: var(--ink); text-align: right; padding-right: 6px; } .report-kv > dd { margin: 0; } .report-err { color: #b91c1c; font-weight: 600; } .report-warn { color: #b45309; font-weight: 600; } /* "All clear" empty-state hero block. */ .report-all-clear { text-align: center; padding: 32px 12px 36px; border: 1px solid #86efac; background: #f0fdf4; border-radius: 8px; margin: 8px 0; } .report-all-clear h3 { margin: 0 0 8px; color: #166534; } .report-all-clear p { margin: 0; color: #14532d; line-height: 1.5; } /* Manual confirm queue — one card per pending PO, with a reason row + per-entry "Open on Xometry" / "Mark resolved" actions. Two flavors via the source-driven modifier classes below. */ .queue-card { border: 1px solid var(--line-2); border-left: 5px solid #f59e0b; border-radius: 8px; margin: 10px 0; padding: 12px 14px 10px; background: var(--surface); } .queue-card-safety { border-left-color: #f59e0b; } /* amber */ .queue-card-error { border-left-color: #dc2626; } /* red */ .queue-source { display: inline-block; margin-left: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; border-radius: 999px; } .queue-card-safety .queue-source { background: #fef3c7; color: #92400e; } .queue-card-error .queue-source { background: #fee2e2; color: #991b1b; } .queue-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .queue-po { font-size: 14px; } .queue-actions { display: inline-flex; gap: 6px; align-items: center; } /* Small numeric badge tacked onto a button — used for the manual-confirm pending count on the Orders page. */ .btn-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 10px; font-weight: 700; border-radius: 999px; background: rgba(255, 255, 255, 0.35); color: inherit; vertical-align: middle; } /* View tabs above the counter strip — switch between "Last run" and "All history" without leaving the page. Each tab is a link the user can right-click / bookmark; the active one gets the blue underline + bold text. */ .report-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); margin: 8px 0 0; } .report-tab { padding: 8px 14px; font-size: 13px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; /* overlap the strip's bottom border */ border-top-left-radius: 4px; border-top-right-radius: 4px; transition: background 0.12s, color 0.12s, border-color 0.12s; } .report-tab:hover { background: var(--surface-2); color: var(--ink); } .report-tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); background: var(--surface); } /* Print PO picker toolbar (Select-all toggle + Print Selected btn). */ .print-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin: 8px 0 8px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; } .print-pickall { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .print-pickall input[type="checkbox"] { transform: scale(1.15); } /* Production folder browser — breadcrumb + listing table. */ .folder-crumbs { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 4px; } .folder-crumbs a { color: var(--primary); text-decoration: none; padding: 2px 6px; border-radius: 4px; } .folder-crumbs a:hover { background: #eff6ff; } .folder-crumbs .crumb-sep { color: var(--muted); } .folder-crumbs > strong { padding: 2px 6px; } .folder-table .folder-link, .folder-table .file-link { color: var(--ink); text-decoration: none; } .folder-table .folder-link:hover, .folder-table .file-link:hover { text-decoration: underline; color: var(--primary); } /* PO-cell hover popover on /orders. Absolutely-positioned float that the JS in orders_list.html shows on mouseenter (after a small delay) with a fetched parts manifest. Styling matches the .parts-grid look from the detail page — same visual language. */ .po-popover { position: absolute; z-index: 1000; width: 360px; max-height: 380px; overflow: auto; background: var(--surface); border: 1px solid var(--line-3); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.10); pointer-events: none; opacity: 0; transform: translateY(-2px); transition: opacity 0.10s ease-out, transform 0.10s ease-out; } .po-popover.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .po-pop-header { padding: 8px 12px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); } .po-pop-body { padding: 8px; } .po-pop-loading { color: var(--muted); font-size: 12px; padding: 16px 12px; text-align: center; } .po-pop-empty { color: var(--muted); font-size: 12px; padding: 16px 12px; } .po-pop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .po-pop-card { border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; } .po-pop-thumb { width: 100%; aspect-ratio: 1 / 1; background: var(--surface-3); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line-2); } .po-pop-thumb > img { width: 100%; height: 100%; object-fit: contain; display: block; } .po-pop-name { font-size: 11px; font-weight: 600; padding: 4px 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .po-pop-card .small { padding: 0 6px 4px; } .po-pop-more { padding: 6px 10px 2px; text-align: center; } /* Parts gallery on /orders/ — grid of cards, each card has a square thumbnail + part metadata. Same visual idea as the launcher's _show_parts_preview_popup, but inline rather than a modal. */ .parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 16px; } .parts-card { border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; } .parts-thumb { width: 100%; aspect-ratio: 1 / 1; background: var(--surface-3); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line-2); } .parts-thumb > img { width: 100%; height: 100%; object-fit: contain; display: block; } .parts-meta { padding: 8px 10px 10px; } .parts-name { font-weight: 600; font-size: 12px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .parts-kv { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; font-size: 11px; margin: 0; } .parts-kv > dt { color: var(--muted); white-space: nowrap; } .parts-kv > dd { margin: 0; color: var(--ink); } .parts-kv > dd.mono, .parts-kv > .mono { font-family: ui-monospace, Consolas, monospace; } /* Fill-shipping form on /orders/ — compact, side-by-side fields. */ .ship-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 6px 0 12px; } .ship-form .field { display: flex; flex-direction: column; gap: 3px; min-width: 160px; } .ship-form .field > span { font-size: 12px; color: var(--muted); font-weight: 600; } .ship-form .field > input { padding: 7px 10px; border: 1px solid var(--line-3); border-radius: 5px; background: var(--surface); font-size: 13px; font-family: inherit; } .ship-form .field > input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } /* Downloaded-files block on /orders/ — tech PDF + CAD ZIP. Each item is a clickable filename + size hint, stacked vertically. */ .file-list { list-style: none; margin: 8px 0 12px 0; padding: 0; } .file-list > li { padding: 6px 10px; margin: 4px 0; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; display: flex; align-items: center; gap: 8px; } .file-list > li:hover { background: var(--surface-3); } .file-list > li a { font-weight: 600; color: var(--primary); text-decoration: none; } .file-list > li a:hover { text-decoration: underline; } .auto-dot { display: inline-block; width: 8px; height: 8px; background: currentColor; border-radius: 50%; animation: auto-pulse 1.4s ease-in-out infinite; } @keyframes auto-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ===== Pills + badges ===== */ .pill { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 700; border-radius: 999px; /* Pills should NEVER wrap mid-label — keeps "Instant job!", "Ready to pick up", etc. on one line. Narrow columns should widen to fit instead. */ white-space: nowrap; } .pill-ok { background: #dcfce7; color: #166534; } .pill-off { background: #fee2e2; color: #991b1b; } /* Bubble row badge — flags a critical-dimension row that an operator touched by hand, so it survives the next "Scan drawings" rescan. */ .pill-manual { background: #fef3c7; color: #92400e; font-size: 10px; margin-left: 4px; } /* Double-click-to-edit affordances on bubble value cells. The cell stays read-only-looking by default; a subtle dotted underline + "text" cursor hint that double-clicking activates an inline editor. See the inline