/* Factory QR Traceability - operator UI * * Design follows the approved wireframes: flat surfaces, hairline rules, one * blueprint-blue accent for anything interactive, and semantic colour reserved * for state (deviation, hold, complete) so it still means something. * * No webfonts on purpose. The factory server may sit on a LAN with no route to * the internet, and a font that silently fails to load is a font you cannot * rely on. System stacks render immediately, everywhere. * * Theming: three states, same as the OS convention this mirrors. No stored * choice follows prefers-color-scheme automatically (the media-query block * below); an explicit choice - the topbar toggle, applied as data-theme on * and remembered in localStorage - wins over the OS either direction. * The dark values are written out twice on purpose (once guarded by the * media query for "no explicit choice", once under [data-theme="dark"] for * "explicit dark regardless of the OS") because CSS has no way to share a * declaration block across a media-query context and a plain selector - * touch one, touch the other. * * A handful of tokens below carry a "-fill" sibling (--ink-fill next to * --ink, --accent-fill next to --accent, and so on for warn/ok/danger). Each * base token plays two roles today: coloured TEXT on a light surface, and a * SOLID BUTTON/TOAST BACKGROUND with hardcoded white text on top. Those two * roles want opposite lightness in dark mode - text needs to brighten to * read on a dark page, but a fill still needs to stay dark enough for white * text to sit on it - so a single token cannot serve both once the palette * inverts. The -fill siblings equal their base token exactly in light mode * (zero visual change there) and diverge only in dark mode. */ :root { --ground: #eceef0; --surface: #ffffff; --fill: #f4f6f7; --fill-2: #e7eaec; --ink: #15191c; --ink-2: #3f484e; --muted: #6d777d; --faint: #99a3a9; --line: #d3d9dc; --line-2: #e6e9eb; --accent: #1f5f8b; --accent-ink: #17496b; --accent-soft: #e3edf4; --warn: #a8501b; --warn-soft: #f8ede4; --ok: #37674a; --ok-soft: #e6efe9; --danger: #96261f; --danger-soft: #f9e9e7; /* Solid-fill siblings - see the note above. Equal to their base token here, so adding them changes nothing in light mode. */ --ink-fill: #15191c; --ink-fill-text: #ffffff; --ink-fill-hover: #000000; --accent-fill: #1f5f8b; --warn-fill: #a8501b; --ok-fill: #37674a; --danger-fill: #96261f; --shadow-dialog: rgba(0, 0, 0, 0.2); --shadow-toast: rgba(0, 0, 0, 0.25); --shadow-dropdown: rgba(0, 0, 0, 0.12); --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace; --radius: 2px; color-scheme: light; } /* Cool-neutral dark palette, carrying the same hue bias the light mode uses (grounds and surfaces lean faintly blue rather than flattening to pure gray) so it reads as the same system, not a generic invert. Semantic colours (warn/ok/danger) and the accent are lightened just enough to stay legible as TEXT on the dark surfaces; their -fill siblings stay close to the light-mode values, which already sit dark enough for white text. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0f1215; --surface: #21262c; --fill: #1c2126; --fill-2: #171b1f; --ink: #eef1f3; --ink-2: #c7ccd1; --muted: #939aa1; --faint: #62696f; --line: #333a42; --line-2: #262d34; --accent: #6fb4de; --accent-ink: #3f82b4; --accent-soft: #202b36; --warn: #d98b52; --warn-soft: #35251a; --ok: #7fb894; --ok-soft: #1c2b21; --danger: #e08078; --danger-soft: #33211f; --ink-fill: #eef1f3; --ink-fill-text: #15191c; --ink-fill-hover: #d5dade; --accent-fill: #2f6f9c; --warn-fill: #a8501b; --ok-fill: #37674a; --danger-fill: #96261f; --shadow-dialog: rgba(0, 0, 0, 0.55); --shadow-toast: rgba(0, 0, 0, 0.55); --shadow-dropdown: rgba(0, 0, 0, 0.4); color-scheme: dark; } } :root[data-theme="dark"] { --ground: #0f1215; --surface: #21262c; --fill: #1c2126; --fill-2: #171b1f; --ink: #eef1f3; --ink-2: #c7ccd1; --muted: #939aa1; --faint: #62696f; --line: #333a42; --line-2: #262d34; --accent: #6fb4de; --accent-ink: #3f82b4; --accent-soft: #202b36; --warn: #d98b52; --warn-soft: #35251a; --ok: #7fb894; --ok-soft: #1c2b21; --danger: #e08078; --danger-soft: #33211f; --ink-fill: #eef1f3; --ink-fill-text: #15191c; --ink-fill-hover: #d5dade; --accent-fill: #2f6f9c; --warn-fill: #a8501b; --ok-fill: #37674a; --danger-fill: #96261f; --shadow-dialog: rgba(0, 0, 0, 0.55); --shadow-toast: rgba(0, 0, 0, 0.55); --shadow-dropdown: rgba(0, 0, 0, 0.4); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mono { font-family: var(--mono); } .num { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- layout --- */ .shell { min-height: 100%; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 52px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .topbar-left { display: flex; align-items: center; gap: 26px; min-width: 0; } .brand { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; } .brand span { color: var(--muted); font-weight: 400; margin-left: 8px; } .nav { display: flex; gap: 2px; } .nav button { border: 0; background: none; padding: 6px 12px; cursor: pointer; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; } .nav button:hover { color: var(--ink); } .nav button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); } .who { display: flex; align-items: center; gap: 10px; font-size: 13px; } .theme-toggle { width: 28px; padding: 0; } .page { flex: 1; padding: 20px; max-width: 1440px; width: 100%; margin: 0 auto; } .stack { display: flex; flex-direction: column; gap: 16px; } .row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .grow { flex: 1; min-width: 0; } .cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 300px; } @media (max-width: 1080px) { .cols { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------- pieces --- */ .card { background: var(--surface); border: 1px solid var(--line); } .card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); background: var(--fill); } .card > header h2 { margin: 0; font-size: 13.5px; font-weight: 600; } .card > .body { padding: 14px; } .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 600; } .value { font-size: 14px; font-weight: 600; } .value.big { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 800px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kpi { background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .kpi .value.big.warn { color: var(--warn); } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; border-radius: var(--radius); white-space: nowrap; } .btn:hover:not(:disabled) { border-color: var(--muted); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn.primary { background: var(--ink-fill); border-color: var(--ink-fill); color: var(--ink-fill-text); } .btn.primary:hover:not(:disabled) { background: var(--ink-fill-hover); } .btn.accent { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; } .btn.accent:hover:not(:disabled) { background: var(--accent-ink); } .btn.warn { background: var(--warn-fill); border-color: var(--warn-fill); color: #fff; } .btn.quiet { color: var(--muted); font-weight: 500; } .btn.big { height: 48px; padding: 0 22px; font-size: 15px; } .btn.sm { height: 28px; padding: 0 10px; font-size: 12px; } /* fields */ .field { display: flex; flex-direction: column; gap: 5px; } .input, .select, .textarea { height: 36px; padding: 0 11px; background: var(--surface); border: 1px solid var(--faint); border-radius: var(--radius); width: 100%; } .textarea { height: auto; min-height: 70px; padding: 9px 11px; resize: vertical; } .input.big { height: 48px; font-size: 16px; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .input:disabled { background: var(--fill); color: var(--muted); } /* chips */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; color: var(--muted); white-space: nowrap; } .chip.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); } .chip.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); } .chip.accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .chip.danger { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); } /* tables */ table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 600; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--fill); } table.data td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); } table.data tr:last-child td { border-bottom: 0; } table.data tr.flagged { background: var(--warn-soft); } table.data tr.clickable { cursor: pointer; } table.data tr.clickable:hover { background: var(--fill); } .audit-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); } .scroll-x { overflow-x: auto; } /* Dashboard tables use one row rhythm. Open/closed keep their first 12 rows * visible, then scroll inside the card; their headers remain in view. */ .dashboard-table { width: 100%; } .dashboard-table table.data { width: 100%; } .dashboard-table table.data td { height: 58px; box-sizing: border-box; } .bounded-table { max-height: var(--table-max-height, 731px); overflow: auto; scrollbar-gutter: stable; } .bounded-table table.data th { position: sticky; top: 0; z-index: 2; } .document-slot { min-width: 0; border: 1px solid var(--line); padding: 14px; } .document-slot h3 { margin: 0; font-size: 14px; } .document-slot input[type="file"] { width: 100%; min-width: 0; } .document-filename { overflow-wrap: anywhere; } /* route progress */ .progress { display: grid; gap: 0; } .progress .step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .progress .rail { display: flex; align-items: center; width: 100%; } .progress .rail i { flex: 1; height: 1px; background: var(--line); } .progress .rail i.blank { background: transparent; } .progress .dot { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--faint); } .progress .dot.done { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; } .progress .dot.current { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent); } .progress .nm { font-size: 12px; font-weight: 600; } .progress .lc { font-family: var(--mono); font-size: 10px; color: var(--faint); } /* dialog */ .scrim { position: fixed; inset: 0; background: rgba(16, 22, 26, 0.5); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto; } .dialog { width: 100%; max-width: 540px; background: var(--surface); border: 1px solid var(--ink); box-shadow: 0 12px 40px var(--shadow-dialog); } .dialog.deviation { border-color: var(--warn); } .dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); } .dialog.deviation > header { background: var(--warn-soft); border-color: var(--warn); } .dialog > header h2 { margin: 0; font-size: 15px; font-weight: 700; } .dialog.deviation > header h2 { color: var(--warn); } .dialog > .body { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .dialog > footer { padding: 13px 16px; border-top: 1px solid var(--line); background: var(--fill); display: flex; justify-content: flex-end; gap: 9px; } /* banners */ .banner { padding: 11px 13px; border: 1px solid var(--line); background: var(--fill); font-size: 13px; } .banner.warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); } .banner.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); } .banner.danger { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); } .banner.accent { border-color: var(--accent); background: var(--accent-soft); } /* toast */ .toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: 420px; } .toast { padding: 11px 14px; background: var(--ink-fill); color: var(--ink-fill-text); font-size: 13px; box-shadow: 0 6px 20px var(--shadow-toast); display: flex; gap: 10px; } .toast.warn { background: var(--warn-fill); color: #fff; } .toast.danger { background: var(--danger-fill); color: #fff; } .toast.ok { background: var(--ok-fill); color: #fff; } /* tabs */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); background: var(--fill); padding: 0 12px; } .tabs button { border: 0; background: none; cursor: pointer; padding: 10px 14px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); } /* login */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); padding: 32px; } /* misc */ .muted { color: var(--muted); } .small { font-size: 12px; } .empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13px; } .rail-item { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-bottom: 1px solid var(--line-2); } .rail-item:last-child { border-bottom: 0; } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .identity { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } @media (max-width: 900px) { .identity { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* QR panel on the lot card. The image is rendered server-side from the same * qr_service the traveler PDF uses, so what is on screen and what is on paper * can never disagree. */ .qr-panel { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); background: var(--fill); padding: 12px; } .qr-panel .qr { width: 96px; height: 96px; flex: none; /* Hardcoded white, deliberately not a token: a scanner needs dark modules on a light quiet zone to read reliably, in every theme the app has. */ background: #fff; border: 1px solid var(--line); padding: 4px; image-rendering: pixelated; /* keep the modules crisp when scaled */ } @media (max-width: 640px) { .qr-panel { flex-direction: column; } } /* Phone widths. Operators scan from a phone at the bench, so the top bar has * to survive 375px: the brand, the nav and the user chip all competed for the * same row and overlapped. Drop the decorative parts, keep the working ones. */ @media (max-width: 620px) { /* Three columns survive on a phone: which step, which station, what it was. Every timestamp is already in the movement table on the same screen. */ .detours table.data th.when, .detours table.data td.when, .detours table.data th.why, .detours table.data td.why { display: none; } .detours table.data th, .detours table.data td { padding: 8px 9px; } .detour-now { flex-wrap: wrap; } .topbar { height: auto; padding: 8px 12px; gap: 10px; flex-wrap: wrap; } .topbar-left { gap: 12px; flex: 1 1 100%; justify-content: space-between; } .brand span { display: none; } /* the [FACTORY NAME] placeholder */ .who { flex: 1 1 100%; justify-content: flex-end; gap: 8px; } .nav button { padding: 6px 8px; font-size: 13px; } .page { padding: 12px; } .scrim { padding: 12px; } .dialog > .body { padding: 12px; gap: 12px; } /* A four-step route strip at 375px squeezes labels to two characters. */ .progress .nm { font-size: 11px; } .progress .lc { font-size: 9px; } .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .identity { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Scan box suggestions. Positioned off the wrapping div (not the input * itself), so its width tracks the input without fighting the input's own * border and focus ring. */ .suggest-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px var(--shadow-dropdown); max-height: 320px; overflow-y: auto; } .suggest-item { padding: 8px 9px; cursor: pointer; border-radius: var(--radius); } .suggest-item:hover, .suggest-item.active { background: var(--accent-soft); } /* off-route stops --------------------------------------------------------- * The strip above draws the plan. These are the stops that are not on it, * numbered under the step the lot left from: 2.1 is the first place it went * after step 2, 2.2 the next. * * Deliberately a square, dashed, warn-coloured tag rather than the round solid * dot the strip uses. A sub-number must never read as one more step on the * rail, and shape carries that faster than colour does. Every value here is a * token, so both themes and the dark palette follow automatically. */ .detours { display: flex; flex-direction: column; gap: 7px; } .detour-pip, .step-pip { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 22px; padding: 0 6px; flex: none; border-radius: var(--radius); font-family: var(--mono); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .detour-pip { border: 1px dashed var(--warn); background: var(--warn-soft); color: var(--warn); } /* An on-route stop in the history table: same shape, no alarm. */ .step-pip { border: 1px solid var(--line); background: var(--fill); color: var(--muted); } /* Hold the step column to the width of the widest pip. */ table.data td.detour-cell { width: 1%; white-space: nowrap; } /* The dialog's one-line form of the same thing: the warn skin of .banner.warn * at roughly half the height, because the dialog's footer scrolls with its * body and every pixel pushes Confirm further away. */ .detour-now { display: flex; align-items: center; gap: 9px; padding: 7px 9px; font-size: 12px; border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn); } .detour-now .mono { color: inherit; font-weight: 600; } /* The step a lot left the route from. Not "current" - the lot is not standing * there - but not "pending" either, because it got that far. */ .progress .dot.left-from { border: 1px dashed var(--warn); background: var(--warn-soft); color: var(--warn); } /* history filters ------------------------------------------------------- * A wrapping row so the bar collapses to stacked controls on a terminal or a * phone rather than forcing the card to scroll sideways. */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); } .filters .input { flex: 1 1 220px; min-width: 0; } .filters .select { flex: 0 1 200px; } .filters label { flex: none; cursor: pointer; } /* Native checkbox semantics, with a visible on/off switch for admin controls. */ .control-switch { appearance: none; width: 40px; height: 22px; border: 1px solid currentColor; border-radius: 12px; background: transparent; color: inherit; position: relative; cursor: pointer; flex-shrink: 0; } .control-switch::before { content: ""; position: absolute; width: 14px; height: 14px; top: 3px; left: 3px; border-radius: 50%; background: currentColor; } .control-switch:checked { background: #276847; color: #fff; } .control-switch:checked::before { left: 21px; } .control-switch:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .control-switch:disabled { opacity: 0.5; cursor: wait; } /* The parts list remains in place beneath the document upload popup. */ .documents-dialog { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px var(--shadow-dialog); overflow: hidden; } .documents-dialog[open] { display: flex; flex-direction: column; } .documents-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } .documents-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--fill); flex-shrink: 0; } .documents-dialog > header h2 { margin: 0; font-size: 15px; overflow-wrap: anywhere; } .documents-dialog > header button { flex-shrink: 0; } .documents-dialog-content { overflow-y: auto; overscroll-behavior: contain; min-height: 0; } .document-panel > .body { padding: 16px; } /* part documents in the confirm dialog ----------------------------------- * One wrapping line, not a panel. The dialog's footer scrolls with its body, * so height spent here is height taken from the confirm button. */ .doc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); background: var(--fill); } .doc-links .label { margin-right: 2px; } .step-documents.compact { border: 1px solid var(--line); } .step-documents.compact > header { padding: 8px 10px; } .step-documents.compact > header h2 { margin: 0; font-size: 13px; font-weight: 600; } .step-document-options > summary { cursor: pointer; font-size: 12px; padding: 8px 0; } .step-documents.compact > .body { padding: 10px; gap: 8px; } .step-documents input[type="file"] { max-width: 100%; } .step-document-filename { overflow-wrap: anywhere; }