/* StockTracker — monochrome workshop terminal. Near-black ground, bone-white ink, IBM Plex Mono for part data. The only emphasis device is inversion (white on black); the single functional exception is a muted red for errors and destructive actions. */ :root { --bg: #0A0A0B; --surface: #131315; --surface-2: #19191C; --surface-3: #202025; --line: #26262A; --line-soft: #1E1E21; --text: #F2F0E9; /* bone */ --text-soft: #C9C7BF; --dim: #908F87; --faint: #5C5B55; --danger: #E2554F; --sel-row: #1F1F24; --scroll-thumb: #2C2C31; /* Emphasis. Dark keeps the monochrome inversion (bone on near-black); the light themes below re-point these at a real accent hue. */ --accent: var(--text); --accent-ink: var(--bg); --accent-hover: #FFFFFF; --ok: #8FBE9A; /* "new" condition tint */ --used: #C9AE78; /* "used" condition tint */ --sb-w: 236px; --header-h: 64px; --radius: 8px; --font-ui: "Archivo", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "Consolas", monospace; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45); } /* ── Themes ────────────────────────────────────────────────────────────── Dark (:root, above) is the base — a monochrome workshop terminal. The three light themes each add a distinct accent hue over warmer neutrals. The active theme is set as data-theme on , persisted, and applied before first paint by the inline script in index.html / login.html. */ [data-theme="daylight"] { color-scheme: light; --bg: #F6F8FB; --surface: #FFFFFF; --surface-2: #EEF2F8; --surface-3: #E3EAF3; --line: #D7DEEA; --line-soft: #E9EEF5; --text: #1A2230; --text-soft: #3C455A; --dim: #5A6678; --faint: #98A1B0; --danger: #CE3A36; --sel-row: #E4EDFC; --scroll-thumb: #C2CBDA; --accent: #2F6FED; --accent-ink: #FFFFFF; --accent-hover: #1D5AD8; --ok: #1E8A4C; --used: #AF7318; } [data-theme="sand"] { color-scheme: light; --bg: #F7F3EA; --surface: #FFFDF7; --surface-2: #F1EADC; --surface-3: #E8E0CE; --line: #DFD4C2; --line-soft: #ECE4D5; --text: #2A2016; --text-soft: #574A38; --dim: #867356; --faint: #AD9C82; --danger: #BD392C; --sel-row: #F9E9D7; --scroll-thumb: #D2C3AA; --accent: #C2562B; --accent-ink: #FFFFFF; --accent-hover: #A5451D; --ok: #3E7D38; --used: #A8750E; } [data-theme="mint"] { color-scheme: light; --bg: #F0F6F3; --surface: #FFFFFF; --surface-2: #E6EFEA; --surface-3: #DAE7DF; --line: #CFDED5; --line-soft: #E2ECE6; --text: #12231A; --text-soft: #35463C; --dim: #586C60; --faint: #91A698; --danger: #C63E37; --sel-row: #DBEFE4; --scroll-thumb: #BED2C5; --accent: #0E8C6B; --accent-ink: #FFFFFF; --accent-hover: #0A7257; --ok: #1E874B; --used: #96780E; } .sidebar-collapsed { --sb-w: 64px; } * { box-sizing: border-box; } html { scroll-padding-top: calc(var(--header-h) + 56px); background: var(--bg); color-scheme: dark; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 15px; line-height: 1.45; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .sr-only { position: absolute; /* pin to the viewport origin: an sr-only span deep in a wide table would otherwise keep its static position and silently widen the page */ top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Inverted highlight: search hits flip to the accent colour. */ mark { background: var(--accent); color: var(--accent-ink); border-radius: 2px; padding: 0 1px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 5px; border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } /* ── Shell: sidebar + content column ─────────────────────────────────── */ .shell { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); /* Animate the content column in lockstep with the sidebar's width transition, so the header and the table slide together when the sidebar collapses. */ transition: grid-template-columns 0.15s ease; } /* ── Sidebar ─────────────────────────────────────────────────────────── */ .sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); padding: 14px 10px; overflow: hidden; transition: width 0.15s ease; z-index: 40; } .sidebar-top { padding: 2px 4px 14px; } .wordmark { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-height: 36px; } /* Brand wordmark image (expanded sidebar). Swap assets/logo.png to change it. */ .wordmark-logo { width: 100%; height: auto; display: block; border-radius: 6px; } /* Square placeholder shown only when the sidebar is collapsed to the icon rail. */ .wordmark-mark { display: none; width: 26px; height: 26px; flex: none; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px; } /* The collapsed icon-rail mark has hardcoded light bars; drive them from theme vars instead so it stays legible on light grounds too (the short back bar stays dimmer, as in the original). */ .wordmark-mark rect { fill: var(--text); } .wordmark-mark rect:first-of-type { fill: var(--dim); } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line-soft); padding-top: 12px; } .nav-link { display: flex; align-items: center; gap: 11px; width: 100%; color: var(--dim); text-decoration: none; font: inherit; font-weight: 600; font-size: 13.5px; padding: 9px 10px; border: 0; border-radius: var(--radius); background: transparent; cursor: pointer; white-space: nowrap; text-align: left; } .nav-icon { width: 19px; height: 19px; flex: none; } .nav-link:hover { color: var(--text); background: var(--surface-2); } .nav-link.active { color: var(--accent-ink); background: var(--accent); } .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line-soft); padding-top: 10px; } .user-chip { display: flex; align-items: center; gap: 11px; margin: 0 0 4px; padding: 5px 10px; color: var(--dim); font-size: 13px; font-weight: 600; white-space: nowrap; } .user-avatar { width: 19px; height: 19px; flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; font-size: 10px; font-weight: 700; color: var(--text); text-transform: uppercase; } /* ── Theme switcher (sidebar foot) ─────────────────────────────────────── Four two-tone swatches: each tile shows its theme's background + accent. Wraps to a 2×2 grid on the collapsed icon rail. */ .theme-switch { margin-top: 8px; border-top: 1px solid var(--line-soft); padding: 10px 8px 2px; } .theme-switch-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 0 2px 8px; } .theme-dots { display: flex; flex-wrap: wrap; gap: 7px; } .theme-dot { width: 26px; height: 26px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background-clip: padding-box; transition: transform 0.12s ease, box-shadow 0.12s ease; } .theme-dot:hover { transform: translateY(-1px); } .theme-dot.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); } /* Swatch art: bottom-left = theme ground, top-right = theme accent. */ .theme-dot[data-theme="dark"] { background: linear-gradient(135deg, #131315 50%, #F2F0E9 50%); } .theme-dot[data-theme="daylight"] { background: linear-gradient(135deg, #FFFFFF 50%, #2F6FED 50%); } .theme-dot[data-theme="sand"] { background: linear-gradient(135deg, #FFFDF7 50%, #C2562B 50%); } .theme-dot[data-theme="mint"] { background: linear-gradient(135deg, #FFFFFF 50%, #0E8C6B 50%); } /* ── Language switcher (sidebar foot) ───────────────────────────────────── NL/EN flag pair, styled like the theme switch. The buttons reuse .lang-btn from the selection bar. */ .lang-switch { margin-top: 4px; border-top: 1px solid var(--line-soft); padding: 10px 8px 2px; } .lang-switch-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 0 2px 8px; } .lang-flags { display: flex; gap: 7px; } .lang-btn .flag { display: block; line-height: 0; } /* Collapsed: icon rail. */ .sidebar-collapsed .nav-label, .sidebar-collapsed .wordmark-logo { display: none; } .sidebar-collapsed .wordmark-mark { display: block; } .sidebar-collapsed .sidebar { padding-left: 8px; padding-right: 8px; } .sidebar-collapsed .nav-link, .sidebar-collapsed .user-chip { justify-content: center; padding-left: 0; padding-right: 0; } .sidebar-collapsed .wordmark { justify-content: center; } .sidebar-collapsed .toggle-icon { transform: rotate(180deg); } .sidebar-collapsed .theme-switch { padding-left: 4px; padding-right: 4px; } .sidebar-collapsed .theme-switch-label { display: none; } .sidebar-collapsed .theme-dots { justify-content: center; gap: 6px; } .sidebar-collapsed .theme-dot { width: 19px; height: 19px; } .sidebar-collapsed .lang-switch { padding-left: 4px; padding-right: 4px; } .sidebar-collapsed .lang-switch-label { display: none; } .sidebar-collapsed .lang-flags { flex-direction: column; align-items: center; gap: 6px; } /* ── Role-based visibility (client = view-only, anonymous sections) ──── */ body.role-client .nav-link[data-route="files"], body.role-client .nav-link[data-route="suppliers"] { display: none; } body.role-client .group-file { display: none; } /* hide "file from " for clients */ body.role-client footer { display: none; } /* ── Header: page title + command-bar search ─────────────────────────── */ .content { min-width: 0; } .header { position: sticky; top: 0; z-index: 30; height: var(--header-h); padding: 0; background: var(--bg); border-bottom: 1px solid var(--line); } /* The bar spans the full width (so does its bottom border), but its contents are constrained to the same box as
, so the search bar lines up exactly with the table edges and reflows identically on sidebar collapse. */ .header-inner { display: flex; align-items: center; height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } .header-search { flex: 1; min-width: 0; } body[data-route="files"] .header-search, body[data-route="suppliers"] .header-search { display: none; } /* Clients don't get the item/supplier tally next to the search box. */ body.role-client #search-summary { display: none; } .search-box { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; transition: border-color 0.15s; } .search-box:focus-within { border-color: var(--dim); } .search-icon { width: 18px; height: 18px; margin-left: 14px; color: var(--faint); flex: none; } #stock-search { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-mono); font-size: 14.5px; padding: 9px 12px; color: var(--text); } #stock-search::placeholder { color: var(--faint); } #stock-search:focus { outline: none; } #stock-search::-webkit-search-cancel-button { -webkit-appearance: none; } #search-summary { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--dim); padding: 0 14px; white-space: nowrap; } .search-hint { margin: 0 2px 14px; font-size: 12.5px; color: var(--faint); } /* ── Client banner: freshness of the own-stock list ──────────────────── */ .stock-banner { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 14px; } .stock-banner-title { margin: 0; font-size: 14px; font-weight: 700; } .stock-banner-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); } kbd { font-family: var(--font-mono); font-size: 11px; color: var(--dim); background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; } /* ── Layout ──────────────────────────────────────────────────────────── */ main { max-width: 1280px; margin: 0 auto; padding: 20px 24px 120px; /* bottom space for the floating selection bar */ } footer { color: var(--faint); font-size: 12.5px; padding-top: 12px; } /* ── Stock groups ────────────────────────────────────────────────────── */ .stock-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 22px; /* clip (not hidden): hidden would make this a scroll container and kill the sticky group header */ overflow: clip; } .group-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: var(--header-h); background: var(--surface); z-index: 10; } .group-head h2:focus { outline: none; } .group-head h2:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .group-head h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .group-meta { color: var(--dim); font-size: 12.5px; margin-left: auto; white-space: nowrap; } /* Always a scroll guard: an extreme value in one row may make the table wider than the panel — scroll the table, never break the page. */ .table-scroll { overflow-x: auto; } .stock-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .stock-table th { text-align: left; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .stock-table th.col-qty, .stock-table th.col-price { text-align: right; } .stock-table td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .stock-table tbody tr:hover td { background: var(--surface-2); } .stock-table tbody tr.is-selected td { background: var(--sel-row); } .col-sel { width: 34px; text-align: center; } .col-sel input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; } .col-ref { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; width: 220px; } .alt-ref { font-size: 11.5px; color: var(--dim); font-weight: 400; /* alt refs can be long free text — wrap them instead of widening the table */ white-space: normal; overflow-wrap: anywhere; max-width: 260px; } .col-desc { color: var(--text-soft); /* part codes can be one long unbroken token — wrap them, don't widen the table */ overflow-wrap: anywhere; } .col-desc a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; } .col-desc a:hover { text-decoration-color: var(--dim); } .col-brand { width: 140px; color: var(--dim); } .col-qty { font-family: var(--font-mono); text-align: right; width: 70px; font-weight: 600; color: var(--text); } td.qty-zero { color: var(--faint); font-weight: 400; } .col-price { font-family: var(--font-mono); text-align: right; width: 120px; white-space: nowrap; color: var(--dim); } /* Client rows: link into the Parttracker shop instead of selection/prices. */ .col-shop { text-align: right; width: 100px; white-space: nowrap; } /* Client condition column: the badge stands on its own (no leading text). */ .col-cond { width: 190px; } .col-cond .badge { margin-left: 0; vertical-align: 0; } .shop-link { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent-ink); background: var(--accent); text-decoration: none; border: 1px solid var(--accent); border-radius: 5px; padding: 2px 9px; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; } .shop-link:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); filter: brightness(1.06); } .shop-link:active { transform: translateY(0) scale(0.97); box-shadow: none; } .badge { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; color: var(--dim); } /* Subtle, low-saturation condition tints — a hint of colour, still at home in the monochrome theme. */ .badge-new { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); } .badge-used { color: var(--used); border-color: color-mix(in srgb, var(--used) 42%, transparent); background: color-mix(in srgb, var(--used) 12%, transparent); } .badge-unknown { color: var(--faint); } /* Brand column filter: a compact dropdown living in the table header. */ .brand-filter { max-width: 100%; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--dim); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .brand-filter:hover { color: var(--text); border-color: var(--dim); } .brand-filter option { color: var(--text); background: var(--surface); font-weight: 500; } .show-all-row td { padding: 0; } .show-all { width: 100%; border: 0; background: var(--surface-2); font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--dim); padding: 10px; cursor: pointer; } .show-all:hover { color: var(--text); background: var(--surface-3); } .empty-state { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; padding: 56px 24px; color: var(--dim); } .empty-state strong { color: var(--text); } /* ── Buttons ─────────────────────────────────────────────────────────── */ .button-link, .btn-primary { display: inline-block; border: 0; background: var(--accent); color: var(--accent-ink); font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; text-decoration: none; border-radius: var(--radius); padding: 9px 16px; cursor: pointer; } .button-link:hover, .btn-primary:hover { background: var(--accent-hover); } /* ── Selection bar (admin: request selected items from suppliers) ────── */ body[data-route="files"] .selection-bar, body[data-route="suppliers"] .selection-bar { display: none; } .selection-bar { position: fixed; left: var(--sb-w); right: 0; bottom: 20px; display: flex; justify-content: center; pointer-events: none; z-index: 50; padding: 0 24px; transition: left 0.15s ease; /* slide with the sidebar collapse */ } .selection-inner { pointer-events: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; max-width: 920px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 14px; } .sel-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--dim); white-space: nowrap; padding-right: 4px; } .sel-count strong { color: var(--text); font-weight: 600; } /* Email-language flag toggle. */ .lang-select { display: inline-flex; gap: 4px; } .lang-btn { display: inline-flex; align-items: center; padding: 3px; background: transparent; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; opacity: 0.45; transition: opacity 0.15s ease, border-color 0.15s ease; } .lang-btn:hover { opacity: 1; } .lang-btn.active { opacity: 1; border-color: var(--dim); } .lang-btn svg { width: 22px; height: 15px; display: block; border-radius: 2px; } .sel-send { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--accent); color: var(--accent-ink); font-family: var(--font-ui); font-weight: 700; font-size: 13px; border-radius: var(--radius); padding: 8px 14px; cursor: pointer; } .sel-send:hover { background: var(--accent-hover); } .sel-send svg { width: 15px; height: 15px; } .sel-clear { border: 1px solid var(--line); background: transparent; color: var(--dim); font-family: var(--font-ui); font-weight: 600; font-size: 13px; border-radius: var(--radius); padding: 7px 12px; cursor: pointer; } .sel-clear:hover { color: var(--text); border-color: var(--dim); } /* ── Files screen ────────────────────────────────────────────────────── */ .files-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 24px; } .import-as { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .import-as > label { font-size: 13px; font-weight: 600; color: var(--dim); white-space: nowrap; } .import-as-controls { display: flex; gap: 8px; flex: 1; min-width: 0; } #import-supplier { flex: 0 0 auto; min-width: 220px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 10px; cursor: pointer; } #import-supplier:focus, #import-supplier-new:focus { outline: none; border-color: var(--dim); } #import-supplier-new { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 10px; } #import-supplier-new::placeholder { color: var(--faint); } #dropzone { border: 2px dashed var(--line); border-radius: 10px; background: var(--surface); text-align: center; padding: 48px 24px; cursor: pointer; color: var(--dim); transition: border-color 0.15s, background 0.15s; } #dropzone p { margin: 4px 0; } #dropzone strong { color: var(--text); font-size: 17px; } #dropzone:hover, #dropzone.dragging { border-color: var(--dim); background: var(--surface-2); } #dropzone.dragging { border-style: solid; } /* Children must not become drag targets, or the highlight flickers. */ #dropzone > * { pointer-events: none; } .drop-icon { width: 44px; height: 44px; color: var(--dim); margin-bottom: 6px; } .drop-sub { font-size: 13px; } #file-status { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } #file-status li { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--faint); border-radius: var(--radius); padding: 9px 12px; font-size: 13.5px; } #file-status li.status-ok { border-left-color: var(--accent); } #file-status li.status-error { border-left-color: var(--danger); } #file-status li.status-busy { border-left-color: var(--dim); } .status-note { color: var(--dim); font-size: 12.5px; margin-top: 2px; } .format-help { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; font-size: 13.5px; color: var(--dim); } .format-help strong { color: var(--text); } .format-help summary { cursor: pointer; font-weight: 600; color: var(--text); } .format-help ul { margin: 10px 0 4px; padding-left: 18px; } .format-help li { margin-bottom: 6px; } .format-help code, .publish-card code { font-family: var(--font-mono); font-size: 12px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 3px; padding: 1px 4px; } .page-hint { color: var(--faint); font-size: 12.5px; margin: 0 0 14px; } .page-hint a { color: var(--dim); } .page-hint a:hover { color: var(--text); } /* ── Suppliers screen ────────────────────────────────────────────────── */ .suppliers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .suppliers-grid .supplier-card { margin-bottom: 0; } .cards-empty { color: var(--dim); font-size: 13.5px; } .supplier-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; } .supplier-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .supplier-card h3 { margin: 0; font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .supplier-card dl { margin: 0; font-size: 13px; } .supplier-card dl div { display: flex; align-items: center; gap: 8px; padding: 2px 0; } .supplier-card dt { color: var(--faint); width: 70px; flex: none; } .supplier-card dd { margin: 0; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--dim); } .supplier-email { width: 100%; font-family: var(--font-mono); font-size: 12.5px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; } .supplier-email::placeholder { color: var(--faint); } .supplier-email:focus { outline: none; border-color: var(--dim); } /* Save-state note under the email input ("saved — visible to all admins…"). */ .email-note { display: block; margin-top: 4px; font-family: inherit; font-size: 11.5px; color: var(--faint); white-space: normal; } .email-note.is-error { color: var(--danger); } .email-note.hidden { display: none; } .remove-supplier { margin-top: 10px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; border-radius: var(--radius); padding: 5px 10px; cursor: pointer; } .remove-supplier:hover { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); } /* ── Publish panel ───────────────────────────────────────────────────── */ .publish-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px; } .publish-card h2 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .publish-card p { color: var(--dim); font-size: 13px; margin: 0 0 10px; } .publish-status { font-weight: 600; } .publish-status.publish-clean { color: var(--text); } .publish-status.publish-pending { color: var(--text); } .badge-pending { background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 3px; padding: 1px 6px; margin-left: auto; } .supplier-card.is-pending { border-left: 3px solid var(--accent); } /* ── Intro dialog ("how it works", clients) ──────────────────────────── */ .intro-dialog { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); width: calc(100% - 48px); max-width: 480px; max-height: calc(100vh - 64px); overflow-y: auto; padding: 26px 28px; } .intro-dialog::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); } .intro-dialog h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: -0.01em; } .intro-dialog p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text-soft); } .intro-dialog h3 { margin: 20px 0 8px; font-size: 15px; letter-spacing: -0.01em; } /* Condition legend: code badge + translated name, explanation underneath. */ .cond-legend { margin: 14px 0 0; } .cond-legend > div { padding: 9px 0; border-top: 1px solid var(--line); } .cond-legend dt { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; } .cond-legend dt .badge { margin-left: 0; flex: none; min-width: 44px; text-align: center; } .cond-legend dd { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--dim); } .intro-lang { margin: 16px 0 4px; } .intro-dialog .btn-primary { width: 100%; margin-top: 12px; } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 860px) { :root { --sb-w: 60px; } /* Small screens: the sidebar is always an icon rail. */ .nav-label, .wordmark-logo { display: none; } .wordmark-mark { display: block; } .sidebar { padding-left: 8px; padding-right: 8px; } .nav-link, .user-chip { justify-content: center; padding-left: 0; padding-right: 0; } .wordmark { justify-content: center; } .sidebar-toggle { display: none; } .page-title { display: none; } .header { padding: 0 14px; } .header-search { max-width: none; } main { padding: 16px 14px 120px; } .files-grid { grid-template-columns: 1fr; } .col-brand { width: auto; } .col-cond { width: auto; } .group-head { position: static; } .stock-table { min-width: 640px; } .selection-bar { padding: 0 12px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }