/* Supplier fulfilment page. Ink, paper, and three status tones. Light and dark from the system, with a manual override stamped on . */ @font-face { font-family: "Perfectly Nineties"; src: url("../landing/lp/fonts/PerfectlyNineties-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { --bg: #ffffff; --surface-1: #ffffff; --surface-2: #f7f7f8; --surface-3: #efeff1; --border: #e1e1e5; --ring: #c8c8ce; --text: #0a0a0a; --muted: rgba(10, 10, 10, 0.74); --faint: rgba(10, 10, 10, 0.48); --pos-bg: #e6f5ec; --pos: #17693f; --warn-bg: #fff1e3; --warn: #9c4a0c; --neg-bg: #fdeae7; --neg: #9a2a1c; --focus: rgba(10, 10, 10, 0.16); --shadow: 0 12px 32px rgba(10, 10, 10, 0.10), 0 1px 2px rgba(10, 10, 10, 0.04); --r: 4px; --t: 120ms cubic-bezier(0.2, 0.7, 0.2, 1); --body: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --display: "Perfectly Nineties", "Iowan Old Style", Georgia, serif; --fs: 1; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #161719; --surface-1: #1a1b1e; --surface-2: #1e1f23; --surface-3: #25262b; --border: #2c2d32; --ring: #3b3c43; --text: #f4f4f5; --muted: rgba(244, 244, 245, 0.80); --faint: rgba(244, 244, 245, 0.52); --pos-bg: rgba(72, 190, 126, 0.13); --pos: #83dfab; --warn-bg: rgba(238, 146, 78, 0.14); --warn: #f6b98b; --neg-bg: rgba(240, 104, 88, 0.14); --neg: #f8a69c; --focus: rgba(244, 244, 245, 0.18); --shadow: 0 16px 40px rgba(0, 0, 0, 0.55); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #161719; --surface-1: #1a1b1e; --surface-2: #1e1f23; --surface-3: #25262b; --border: #2c2d32; --ring: #3b3c43; --text: #f4f4f5; --muted: rgba(244, 244, 245, 0.80); --faint: rgba(244, 244, 245, 0.52); --pos-bg: rgba(72, 190, 126, 0.13); --pos: #83dfab; --warn-bg: rgba(238, 146, 78, 0.14); --warn: #f6b98b; --neg-bg: rgba(240, 104, 88, 0.14); --neg: #f8a69c; --focus: rgba(244, 244, 245, 0.18); --shadow: 0 16px 40px rgba(0, 0, 0, 0.55); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); } body { font-family: var(--body); font-size: calc(13.5px * var(--fs)); line-height: 1.45; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } svg { display: block; } .sp-ico { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } [hidden] { display: none !important; } /* ---------- Buttons and fields ---------- */ .sp-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--ring); border-radius: var(--r); background: var(--bg); color: var(--text); font-size: calc(13px * var(--fs)); font-weight: 500; white-space: nowrap; transition: background-color var(--t), border-color var(--t), color var(--t), box-shadow var(--t); } .sp-btn:hover { background: var(--surface-2); border-color: var(--text); } .sp-btn:focus-visible { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--focus); } .sp-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sp-btn--ink { background: var(--text); color: var(--bg); border-color: var(--text); } .sp-btn--ink:hover { background: var(--text); color: var(--bg); opacity: 0.92; } .sp-btn--sq { width: 32px; padding: 0; justify-content: center; } .sp-btn.is-on { background: var(--text); color: var(--bg); border-color: var(--text); } .sp-input { height: 32px; padding: 0 10px; border: 1px solid var(--ring); border-radius: var(--r); background: var(--bg); color: var(--text); transition: border-color var(--t), box-shadow var(--t); } .sp-input:hover { border-color: var(--text); } .sp-input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--focus); } .sp-input::placeholder { color: var(--faint); } .sp-seg { display: inline-flex; border: 1px solid var(--ring); border-radius: var(--r); overflow: hidden; } .sp-seg > button { height: 30px; padding: 0 11px; border: 0; border-right: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: calc(12.5px * var(--fs)); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } .sp-seg > button:last-child { border-right: 0; } .sp-seg > button:hover { background: var(--surface-2); } .sp-seg > button.is-on { background: var(--text); color: var(--bg); } .sp-seg > button .n { font-family: var(--mono); font-size: calc(11.5px * var(--fs)); opacity: 0.85; } .sp-seg > button.is-on .n { opacity: 0.85; } .sp-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r); font-family: var(--mono); font-size: calc(11.5px * var(--fs)); white-space: nowrap; } .sp-chip--pos { background: var(--pos-bg); color: var(--pos); } .sp-chip--warn { background: var(--warn-bg); color: var(--warn); } .sp-chip--neg { background: var(--neg-bg); color: var(--neg); } .sp-chip--mute { background: var(--surface-3); color: var(--muted); } .sp-kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); } /* ---------- Header ---------- */ .sp-head { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); } .sp-head__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px 10px; } .sp-title { margin: 0; font-family: var(--display); font-size: calc(26px * var(--fs)); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; } .sp-meta { margin: 3px 0 0; font-family: var(--mono); font-size: calc(12px * var(--fs)); color: var(--muted); } .sp-progress { display: flex; align-items: center; gap: 14px; } .sp-progress__num { font-family: var(--display); font-size: calc(24px * var(--fs)); line-height: 1; } .sp-progress__num small { font-family: var(--mono); font-size: calc(12px * var(--fs)); color: var(--muted); margin-left: 4px; } .sp-progress__bar { width: 160px; height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; } .sp-progress__bar > i { display: block; height: 100%; background: var(--pos); width: 0; transition: width 240ms ease; } .sp-head__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 20px 10px; } .sp-head__tools .sp-gap { width: 1px; height: 22px; background: var(--border); margin: 0 4px; } .sp-search { position: relative; min-width: 220px; flex: 1 1 260px; max-width: 360px; } .sp-search .sp-ico { position: absolute; left: 10px; top: 9px; color: var(--muted); pointer-events: none; } .sp-search input { width: 100%; padding-left: 30px; } .sp-search kbd { position: absolute; right: 8px; top: 7px; } .sp-tools-right { margin-left: auto; display: flex; align-items: center; gap: 6px; } /* ---------- Bulk bar ---------- */ .sp-bulk { display: flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .sp-bulk__count { font-weight: 500; margin-right: 6px; } /* ---------- List ---------- */ .sp-list { padding-bottom: 96px; } .sp-cols { position: sticky; top: var(--head-h, 108px); z-index: 10; background: var(--surface-2); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: calc(11px * var(--fs)); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .sp-grid { display: grid; grid-template-columns: 32px 56px minmax(0, 1fr) 64px 200px 168px 230px 48px 36px; align-items: center; } .sp-cols .sp-grid > div { padding: 7px 10px; border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-cols .sp-grid > div:last-child { border-right: 0; } .sp-group { position: sticky; top: calc(var(--head-h, 108px) + 32px); z-index: 9; display: flex; align-items: center; gap: 10px; padding: 8px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); } .sp-group img { width: 28px; height: 28px; border-radius: 3px; object-fit: cover; border: 1px solid var(--border); } .sp-group__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .sp-group__vars { color: var(--muted); font-family: var(--mono); font-size: calc(12px * var(--fs)); } .sp-group__count { margin-left: auto; font-family: var(--mono); font-size: calc(12px * var(--fs)); color: var(--muted); white-space: nowrap; } .sp-row { border-bottom: 1px solid var(--border); background: var(--bg); transition: background-color var(--t); } .sp-row:hover { background: var(--surface-2); } /* Late / due soon / done are read from the ship column's own wording and tone, and from the dimmed cells on a done row. No edge bars. */ .sp-row.is-done .sp-cell--product, .sp-row.is-done .sp-cell--buyer, .sp-row.is-done .sp-cell--ship { opacity: 0.62; } .sp-row.is-changed .sp-cell--done::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); } .sp-row.is-selected { background: var(--surface-3); } .sp-row > .sp-grid > div { padding: 10px 10px; min-width: 0; border-right: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; } .sp-row > .sp-grid > div:last-child { border-right: 0; } .sp-list.is-compact .sp-row > .sp-grid > div { padding: 6px 10px; } .sp-cell--select { justify-content: center; padding-left: 8px !important; padding-right: 8px !important; } .sp-check { width: 18px; height: 18px; margin: 0; accent-color: var(--text); cursor: pointer; } .sp-thumb { width: 44px; height: 44px; border-radius: 3px; object-fit: cover; border: 1px solid var(--border); background: var(--surface-3); } .sp-list.is-compact .sp-thumb { width: 34px; height: 34px; } .sp-cell--product { flex-direction: column; align-items: flex-start !important; gap: 3px; } .sp-product__title { width: 100%; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; } .sp-product__sku { font-family: var(--mono); font-size: calc(12px * var(--fs)); color: var(--muted); } .sp-var { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); font-family: var(--mono); font-size: calc(11.5px * var(--fs)); color: var(--text); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .sp-var--pers { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); } .sp-order { font-family: var(--mono); font-size: calc(12px * var(--fs)); color: var(--muted); } .sp-cell--qty { justify-content: center; font-family: var(--display); font-size: calc(22px * var(--fs)); } .sp-cell--qty.is-multi { color: var(--warn); } .sp-cell--buyer { flex-direction: column; align-items: flex-start !important; gap: 2px; } .sp-buyer__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .sp-buyer__where { font-family: var(--mono); font-size: calc(12px * var(--fs)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .sp-cell--ship { flex-direction: column; align-items: flex-start !important; gap: 2px; font-family: var(--mono); font-size: calc(12px * var(--fs)); } .sp-ship__when { color: var(--text); } .sp-ship__rel { color: var(--muted); } .sp-row.is-late .sp-ship__rel { color: var(--neg); } .sp-row.is-soon .sp-ship__rel { color: var(--warn); } .sp-cell--track input { width: 100%; height: 30px; font-family: var(--mono); font-size: calc(12.5px * var(--fs)); } .sp-cell--track input.is-missing { border-color: var(--neg); box-shadow: 0 0 0 3px var(--neg-bg); } .sp-cell--done { position: relative; justify-content: center; } .sp-done { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ring); border-radius: var(--r); background: var(--bg); color: transparent; transition: background-color var(--t), border-color var(--t), color var(--t); } .sp-done:hover { border-color: var(--text); } .sp-done.is-on { background: var(--pos); border-color: var(--pos); color: #fff; } :root[data-theme="dark"] .sp-done.is-on, @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp-done.is-on { color: #0f1a14; } } .sp-cell--more { justify-content: center; } .sp-more { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--muted); } .sp-more:hover { border-color: var(--border); background: var(--surface-2); color: var(--text); } .sp-row.is-open .sp-more svg { transform: rotate(180deg); } /* ---------- Expanded panel ---------- */ .sp-panel { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-top: 1px solid var(--border); background: var(--surface-2); } .sp-panel > section { padding: 12px 16px; border-right: 1px solid var(--border); min-width: 0; } .sp-panel > section:last-child { border-right: 0; } .sp-panel h4 { margin: 0 0 8px; font-family: var(--mono); font-size: calc(11px * var(--fs)); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sp-field { display: grid; grid-template-columns: 96px minmax(0, 1fr) 26px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); } .sp-field:last-child { border-bottom: 0; } .sp-field > label { font-family: var(--mono); font-size: calc(11.5px * var(--fs)); color: var(--muted); } .sp-field > span { font-size: calc(13.5px * var(--fs)); overflow-wrap: anywhere; } .sp-field > span.mono { font-size: calc(12.5px * var(--fs)); } .sp-copy { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--muted); } .sp-copy:hover { border-color: var(--border); background: var(--bg); color: var(--text); } .sp-copy.is-copied { color: var(--pos); border-color: var(--pos); } .sp-panel textarea { width: 100%; min-height: 84px; padding: 8px 10px; border: 1px solid var(--ring); border-radius: var(--r); background: var(--bg); color: var(--text); resize: vertical; font-size: calc(13px * var(--fs)); } .sp-panel textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--focus); } .sp-note { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(13px * var(--fs)); } .sp-note--pers { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); } .sp-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--ring); text-underline-offset: 3px; } .sp-link:hover { text-decoration-color: var(--text); } .sp-panel img.big { width: 100%; max-width: 220px; border-radius: var(--r); border: 1px solid var(--border); } /* ---------- Empty, loading, sentinel ---------- */ .sp-empty { padding: 48px 20px; text-align: center; color: var(--muted); font-family: var(--mono); font-size: calc(12.5px * var(--fs)); } .sp-sentinel { height: 1px; } .sp-loading { padding: 60px 20px; text-align: center; color: var(--muted); font-family: var(--mono); } .sp-error { max-width: 520px; margin: 80px auto; padding: 24px; border: 1px solid var(--border); border-radius: var(--r); } .sp-error h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 24px; } /* ---------- Save bar ---------- */ .sp-save { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(8px); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border: 1px solid var(--ring); border-radius: var(--r); background: var(--surface-1); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t); } .sp-save.is-in { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .sp-save__text { font-weight: 500; margin-right: 6px; } .sp-save__text small { font-family: var(--mono); font-weight: 400; color: var(--muted); margin-left: 6px; } /* ---------- Dialog ---------- */ .sp-dialog { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; } .sp-dialog__scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.32); } .sp-dialog__box { position: relative; width: min(560px, 100%); border: 1px solid var(--ring); border-radius: var(--r); background: var(--surface-1); box-shadow: var(--shadow); } .sp-dialog__head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; display: flex; align-items: center; justify-content: space-between; } .sp-dialog__body { padding: 14px 16px; } .sp-dialog__body p { margin: 0 0 10px; color: var(--muted); } .sp-dialog__body textarea { width: 100%; min-height: 180px; padding: 8px 10px; border: 1px solid var(--ring); border-radius: var(--r); background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 12.5px; } .sp-dialog__foot { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--border); } .sp-dialog__result { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .sp-grid { grid-template-columns: 32px 48px minmax(0, 1fr) 56px 160px 150px 200px 44px 32px; } } @media (max-width: 960px) { .sp-cols { display: none; } .sp-grid { grid-template-columns: 32px 48px minmax(0, 1fr) 48px 44px 32px; } .sp-cell--buyer, .sp-cell--ship, .sp-cell--track { display: none !important; } .sp-row.is-open .sp-panel { grid-template-columns: 1fr; } .sp-row.is-open .sp-panel > section { border-right: 0; border-bottom: 1px solid var(--border); } .sp-progress__bar { display: none; } } @media print { .sp-head, .sp-save, .sp-bulk, .sp-cell--select, .sp-cell--more, .sp-cell--done { display: none !important; } .sp-row { break-inside: avoid; } } /* Filter selects: fixed widths (they are enhanced before their options exist) and "All …" is a value, not a placeholder */ .eto-sel[data-for="sp-country"] { width: 150px !important; } .eto-sel[data-for="sp-product"] { width: 240px !important; } .eto-sel[data-for="sp-sort"] { width: 210px !important; } .eto-sel__label.is-placeholder { color: var(--text) !important; } .eto-sel__trigger { height: 32px; font-family: var(--body); } .sp-grid { grid-template-columns: 32px 56px minmax(0, 1fr) 64px 200px 168px 230px 60px 36px; } @media (max-width: 1180px) { .sp-grid { grid-template-columns: 32px 48px minmax(0, 1fr) 56px 160px 150px 200px 56px 32px; } } /* Sort direction: one arrow lit for ascending, the other for descending */ .sp-dir svg path { opacity: 1; } .sp-dir { position: relative; } .sp-dir::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 14px; background: var(--border); transform: translate(-50%, -50%); } .sp-dir.is-desc { background: var(--text); color: var(--bg); border-color: var(--text); } .sp-value { color: var(--text); } .eto-sel[data-for="sp-sort"] { width: 150px !important; }