/* Bioform Backoffice — hand-maintained stylesheet (no build step). Palette mirrors the public site (assets/css/style.css in the bioform repo). Everything below is driven by the token layer in :root. A component rule may only reference a token — never a raw colour — so the dark theme at the foot of this file can re-point the whole interface by overriding the tokens once. `data-theme` is stamped on before first paint by the head script in layouts/app.blade.php; with no JavaScript the light theme stands. */ :root { /* How tall the sticky topbar is. Named because the sticky table pane below has to begin exactly where the bar ends. */ --topbar-h: 57px; color-scheme: light; /* ── Brand ───────────────────────────────────────────── The site's greens and gold. These stay constant across themes; the semantic tokens below are what the components actually use. */ --green: #3B5240; --green-deep: #2F4233; --green-mid: #4E6E55; --green-light: #E8EFE9; --gold: #C8A44A; --gold-light: #F5EDD8; --cream: #F7F4EF; --white: #FFFFFF; /* ── Surfaces ────────────────────────────────────────── Three steps, so a card reads as a sheet lifted off the page and a table header reads as a band inside the card. The canvas is a shade deeper than the old flat cream — that separation is what makes the panels legible without heavy borders. */ --bg: #F1EFE8; --surface: #FFFFFF; --surface-2: #F8F6F1; --surface-3: #EFEDE6; --border: #E2DFD7; --border-soft: #EDEAE3; --border-strong: #CBC7BB; /* ── Text ────────────────────────────────────────────── --ink-light is the caption/metadata colour and sits on both --surface and --bg, so it is kept at 4.5:1 against the lighter of the two. */ --ink: #1C1F1C; --ink-mid: #4B504C; --ink-light: #6F736C; /* ── Interactive brand ───────────────────────────────── Primary buttons, links, focus rings and selected states. Split from the raw brand greens so the dark theme can lift them without touching the sidebar or the document templates. */ --accent: #3B5240; --accent-hover: #2F4233; --accent-soft: #E8EFE9; --on-accent: #FFFFFF; --link: #2F4233; --heading: #2F4233; --focus: #4E6E55; /* ── Sidebar ─────────────────────────────────────────── Its own scale: the navigation is a dark console rail in both themes, so it cannot borrow the page's surface tokens. */ --nav-bg: #35493A; --nav-bg-2: #2A3B2E; --nav-border: rgba(255, 255, 255, .10); --nav-ink: #EAF0EB; --nav-ink-dim: rgba(234, 240, 235, .72); --nav-ink-faint: rgba(234, 240, 235, .48); --nav-hover: rgba(255, 255, 255, .07); --nav-active: rgba(255, 255, 255, .13); --nav-accent: var(--gold); /* Only needed where the rail and the canvas are close in tone — i.e. dark. */ --nav-edge: transparent; /* ── Status — reserved, always paired with a dot/icon + label ── */ --status-good: #2C7A41; --status-good-bg: #E5F1E8; --status-good-line: #B6D9C0; --status-info: #2A5C88; --status-info-bg: #E7EFF7; --status-info-line: #B7CEE3; --status-warn: #8A5E06; --status-warn-bg: #FAF1D9; --status-warn-line: #E4D3A2; --status-bad: #9E3236; --status-bad-bg: #F8E7E8; --status-bad-line: #E5BEC0; --status-neutral: #66695F; --status-neutral-bg: #EDEBE4; --status-neutral-line: #DAD6CB; /* ── Elevation ───────────────────────────────────────── Deliberately shallow: a back office is read all day, and deep shadows make dense tables feel noisy. Enough to separate, not to decorate. */ --shadow-sm: 0 1px 2px rgba(24, 28, 24, .05); --shadow-md: 0 2px 4px rgba(24, 28, 24, .05), 0 6px 16px rgba(24, 28, 24, .05); --shadow-lg: 0 12px 32px rgba(24, 28, 24, .14); /* A shape, not a colour: used as a mask so whatever paints through it comes from a theme token. Stroke weight and cap match the chevrons and draw, so an arrow in a field is the same family as an arrow in a table header. */ --chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5L8 10.5l4-4'/%3E%3C/svg%3E"); --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sidebar-w: 236px; --radius: 12px; --radius-sm: 8px; } * { box-sizing: border-box; margin: 0; padding: 0; } /* `hidden` has to win. The browser hides a [hidden] element with a rule of the lowest possible weight, so *any* component that sets its own `display` — and most of ours do — quietly overrules it: a warning chip toggled with `el.hidden = true` stayed on screen as an empty pill. This is a correctness invariant rather than a style preference, which is what the !important is for, and it saves every component from remembering its own override. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 14.5px; color: var(--ink); background: var(--bg); min-height: 100vh; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } /* One focus treatment for everything that takes focus. Keyboard-only, so it never fires on a mouse click. */ :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; } /* ── Shell ─────────────────────────────────────────────── */ .shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%); border-right: 1px solid var(--nav-edge); color: var(--nav-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sidebar .brand { padding: 20px 18px 16px; border-bottom: 1px solid var(--nav-border); } /* Two-tone wordmark on a white chip so the green half stays legible on the green sidebar */ .sidebar .brand .brand-logo { display: block; width: 130px; height: auto; background: var(--white); padding: 9px 13px; border-radius: var(--radius-sm); margin-bottom: 9px; } .sidebar .brand .sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.7px; font-weight: 600; color: var(--gold); margin-top: 2px; } .sidebar nav { padding: 10px 10px 16px; flex: 1; overflow-y: auto; scrollbar-width: thin; } /* Section label. The hairline above it turns three lists of links into three named areas of the system — the first thing to look for on an admin panel. */ .sidebar nav .group { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; color: var(--nav-ink-faint); padding: 8px 12px 7px; margin-top: 12px; border-top: 1px solid var(--nav-border); } .sidebar nav .group:first-child { margin-top: 4px; border-top: 0; } .sidebar nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.3; color: var(--nav-ink-dim); margin-bottom: 2px; transition: background .13s ease, color .13s ease; } .sidebar nav a svg { width: 17px; height: 17px; opacity: .72; flex-shrink: 0; } .sidebar nav a .nav-label { flex: 1; min-width: 0; } /* The queue count. Tinted by how loudly it reads, on a dark ground of its own so the numbers stay legible against the rail — and rendered only when there is something to count, so an empty queue is silent. */ .nav-count { flex-shrink: 0; min-width: 20px; padding: 1px 6px; border-radius: 20px; font-size: 11px; font-weight: 600; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .13); color: var(--nav-ink); } .nav-count-info { background: #2A4A68; color: #CFE4F6; } .nav-count-warn { background: #5A4514; color: #F3DFA6; } .nav-count-bad { background: #5E2426; color: #F5C9CA; } .sidebar nav a:hover { background: var(--nav-hover); color: var(--nav-ink); } .sidebar nav a:hover svg { opacity: .95; } .sidebar nav a.active { background: var(--nav-active); color: var(--white); font-weight: 500; } /* Gold rail on the open section — the one unambiguous "you are here" marker, readable even at a glance from across the desk. */ .sidebar nav a.active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--nav-accent); } .sidebar nav a.active svg { opacity: 1; color: var(--nav-accent); } .sidebar nav a:focus-visible { outline-color: var(--gold); outline-offset: -2px; } .sidebar .foot { padding: 13px 18px; border-top: 1px solid var(--nav-border); font-size: 11.5px; letter-spacing: .02em; color: var(--nav-ink-faint); } /* ── Topbar + main ─────────────────────────────────────── */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px; /* Stated rather than left to whatever the controls inside happen to measure, because the sticky table pane below has to start exactly where this ends (see "Sticky list headers"). Two places needing one number is how the header ends up four pixels under the bar. */ min-height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 30; } .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .topbar-brand { display: none; height: 24px; width: auto; } .topbar .crumbs { font-size: 13px; color: var(--ink-light); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hamburger — only shown once the sidebar collapses into a drawer. */ .nav-toggle { display: none; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-mid); cursor: pointer; flex-shrink: 0; } .nav-toggle:hover { border-color: var(--border-strong); background: var(--surface-2); } .nav-toggle svg { width: 20px; height: 20px; } .nav-backdrop { display: none; } .topbar .crumbs b { color: var(--ink); font-weight: 600; } .topbar .user { display: flex; align-items: center; gap: 10px; font-size: 13.5px; } /* Hairline between the workspace controls (language, connectivity) and who is signed in — two different kinds of thing, so they stop reading as one row. */ .topbar-divider { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; margin: 0 2px; } .topbar .user-name { color: var(--ink-mid); font-weight: 500; } .topbar .avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, var(--green-mid), var(--green-deep)); color: var(--white); display: grid; place-items: center; font-weight: 600; font-size: 11.5px; letter-spacing: .02em; flex-shrink: 0; } /* Quieter than the old filled gold pill: the role qualifies the name, it is not the loudest thing on the screen. */ .role-badge { font-size: 10.5px; text-transform: uppercase; letter-spacing: .9px; background: var(--surface-2); color: var(--ink-mid); border: 1px solid var(--border); padding: 3px 9px; border-radius: 20px; font-weight: 600; white-space: nowrap; } /* Tinted only in the users table, where roles are read as a column. */ .role-badge.role-admin { background: var(--status-warn-bg); color: var(--status-warn); border-color: var(--status-warn-line); } .role-badge.role-sales { background: var(--status-good-bg); color: var(--status-good); border-color: var(--status-good-line); } .role-badge.role-viewer { background: var(--status-neutral-bg); color: var(--status-neutral); border-color: var(--status-neutral-line); } .mailbox-link { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--ink-light); } .mailbox-link:hover { background: var(--surface-2); color: var(--ink-mid); } .mailbox-link svg { width: 18px; height: 18px; } .mailbox-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--surface); } .mailbox-dot-connected { background: var(--status-good); } .mailbox-dot-error { background: var(--status-bad); } .mailbox-dot-disconnected, .mailbox-dot-none { background: var(--status-neutral); } /* Light/dark switch. Icon-only in the topbar; the label lives in sr-only text. */ .theme-toggle { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-light); cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { color: var(--ink-mid); border-color: var(--border-strong); background: var(--surface-2); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } /* The email-conversation summary bar on enquiry/customer pages. */ .thread-strip { margin-bottom: 18px; } .thread-strip .card-body { padding: 12px 16px; align-items: center; } /* Correspondence popup (enquiry page). Progressive enhancement: with no JS the renders inline as a normal card so the reply form still works; with JS (html.js) it becomes a real modal opened by the "Correspondence" button. The dialog also carries the .card class, so its .card-head/.card-body padding comes from the shared card rules. */ .corr-trigger, .corr-close, .corr-jump { display: none; } .js .corr-trigger, .js .corr-close, .js .corr-jump { display: inline-flex; } dialog.corr-modal { display: block; position: static; inset: auto; margin: 0 0 18px; width: 100%; max-width: none; max-height: none; overflow: visible; padding: 0; color: inherit; } .js dialog.corr-modal:not([open]) { display: none; } /* Pin to the viewport centre with `inset: 0` + `margin: auto`, which centres a fixed box both ways whatever its intrinsic height — the reset at the top of this file zeroes every margin and takes the UA stylesheet's own `margin: auto` centring with it, so it has to be said again here. Not a translate, though that also centres: a transformed element becomes the containing block for `position: fixed` descendants, and the Google Drive picker is a fixed overlay this popup has to be able to host (see the lift in partials/drive-picker). Centred this way it can. */ .js dialog.corr-modal[open] { position: fixed; inset: 0; margin: auto; width: calc(100% - 32px); max-width: 620px; max-height: 88vh; overflow: auto; box-shadow: var(--shadow-lg); } /* The picker, once lifted in: it is a viewport overlay, not part of the popup's scroll, and it must sit above the sticky head. */ dialog.corr-modal .picker-dialog-bg { z-index: 5; } dialog.corr-modal .picker-dialog { z-index: 6; } dialog.corr-modal::backdrop { background: rgba(14, 20, 16, .5); } /* Keep the title and close button in view while the body scrolls. */ dialog.corr-modal .corr-head { position: sticky; top: 0; z-index: 1; background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; } /* A record scrolled to from the thread strip stops clear of that sticky head (docs/DESIGN.md §2a). Without it the browser puts the record's top edge at the scroller's top, which is underneath the head — so the operator who clicked "last sent" lands halfway down the message instead of on its subject line. `scroll-margin-top` is the whole fix, and it is the browser's own answer to a sticky header rather than arithmetic in a script. */ dialog.corr-modal .corr-record { scroll-margin-top: 56px; } /* The conversation inside the popup: one entry per message, newest first, each accented by direction — inbound blue, outbound green — so the two sides read apart at a glance. The newest message each way carries the filled accent that the standalone "last received"/"last sent" cards used to have; older ones keep the accent as a hairline so the thread still reads as two-sided without every row shouting. That highlight is reinforcement, not the only signal: each entry says Received or Sent in words, and the order says which is newest. */ /* `minmax(0, 1fr)`, not the default `auto`: an auto track is floored at the item's min-content, and one entry's chip + subject + timestamp on one line is wider than a phone. The floor made the whole popup scroll sideways instead of letting the subject truncate the way it is written to. */ .corr-conversation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .corr-record { border: 1px solid var(--border); border-left: 2px solid var(--border); border-radius: 10px; padding: 12px 14px; } .corr-record--latest { border-left-width: 4px; } /* Folded once there is a digest above them: the direction, subject and time stay out where they can be scanned, and only the message body — the part the summary has already accounted for — costs a click. */ details.corr-record > summary { cursor: pointer; list-style: none; } details.corr-record > summary::-webkit-details-marker { display: none; } /* The caret sits at the end of the row, not on the subject — a subject that truncates would clip it away exactly when the row is busiest. */ details.corr-record > summary::after { content: '▸'; font-size: 10px; color: var(--ink-mid); } details.corr-record[open] > summary::after { content: '▾'; } .corr-record--in { border-left-color: var(--status-info); } .corr-record--out { border-left-color: var(--status-good); } .corr-record--in.corr-record--latest { background: var(--status-info-bg); } .corr-record--out.corr-record--latest { background: var(--status-good-bg); } .corr-record-top { display: flex; align-items: baseline; gap: 10px; } /* The subject takes the room left over and truncates rather than wrapping, so the row stays one line and the time stays where the eye looks for it. */ .corr-record-top .corr-subject { flex: 1 1 auto; min-width: 0; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .corr-record-top .corr-when { flex: 0 0 auto; } .corr-dir { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: var(--surface); } .corr-dir--in { color: var(--status-info); border: 1px solid var(--status-info); } .corr-dir--out { color: var(--status-good); border: 1px solid var(--status-good); } .corr-who { margin-top: 8px; } .corr-subject { font-weight: 600; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; } /* The message in full. It is plain text, so its own line breaks are kept; a long email scrolls inside its record rather than pushing the reply form off-screen. */ .corr-body { margin: 5px 0 0; color: var(--ink-mid); line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; max-height: 320px; overflow-y: auto; } /* The digest at the top of the popup (docs/DESIGN.md §2a): a few lines saying where the conversation stands, so the question most operators open the popup with is answered before any scrolling. Hidden without JS — it is fetched after the modal opens, and the inline fallback has nothing to fetch with. */ .corr-summary { display: none; } .js .corr-summary { display: block; border-bottom: 1px solid var(--border); background: var(--surface-2); } .corr-summary-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .corr-summary-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; color: var(--ink); border: 1px solid var(--border); background: var(--surface); } .corr-summary-state { margin: 8px 0 0; } .corr-summary-lines { margin: 8px 0 0; padding-left: 18px; } .corr-summary-lines li { color: var(--ink-mid); line-height: 1.55; margin-top: 4px; overflow-wrap: anywhere; } .corr-summary-lines li:first-child { margin-top: 0; } .corr-summary-retry { margin-top: 10px; } /* The draft reply's label, sitting between the "Message" caption and the box it has written into (§2a). It is deliberately the same badge the digest wears: both are the same model's reading of the same thread, and giving the draft a louder chrome of its own would make it look like a decision rather than a starting point. Hidden — via [hidden] — until a draft actually arrives, and hidden again the moment the operator types, at which point the text is theirs. */ .corr-suggested { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; } .corr-suggested[hidden] { display: none; } /* Document preview popup, opened from a "Documents" cell on the stock tables. Unlike the correspondence popup there is nothing to fall back to — the frame needs JS to be pointed anywhere — so it stays a plain : hidden until opened, and the cell remains a link to the batch screen without JS. */ dialog.doc-modal { padding: 0; border: 0; color: inherit; max-width: none; max-height: none; overflow: hidden; box-shadow: var(--shadow-lg); } /* Centred by hand, not by the browser: the reset at the top of this file zeroes every margin, which takes the UA stylesheet's `margin: auto` — the whole of a modal dialog's centring — with it and pins the popup to the top-left corner. Pinning to the viewport centre with a transform restores it regardless of the dialog's own size, the same way the correspondence popup does it. Sized rather than grown: the head and foot keep their height and the body takes the rest, so the frame fills whatever is left instead of the popup growing past the viewport and clipping its own footer. */ dialog.doc-modal[open] { display: flex; flex-direction: column; position: fixed; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, calc(100vw - 32px)); height: min(860px, calc(100vh - 48px)); } dialog.doc-modal::backdrop { background: rgba(14, 20, 16, .5); } :root[data-theme="dark"] dialog.doc-modal::backdrop { background: rgba(0, 0, 0, .6); } .doc-modal-head, .doc-modal .card-foot { flex: 0 0 auto; } .doc-modal-head { gap: 12px; } /* The document list beside the file itself; on a narrow screen it stacks above, where it reads as a row of tabs. */ .doc-modal-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(180px, 240px) 1fr; } /* One document is no choice at all, so the rail is dropped — and the column it left behind has to go with it, or the file renders in a 240px gutter with the rest of the popup empty beside it. */ .doc-modal--single .doc-modal-body { grid-template-columns: 1fr; } .doc-picks { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-right: 1px solid var(--border); background: var(--surface-2); overflow-y: auto; min-height: 0; } .doc-pick { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--ink-mid); font: inherit; font-size: 13px; cursor: pointer; } .doc-pick:hover { background: var(--surface); border-color: var(--border); } .doc-pick.active { background: var(--surface); border-color: var(--border-strong); color: var(--ink); font-weight: 600; } .doc-pick-name { overflow-wrap: anywhere; } .doc-stage { display: grid; place-items: stretch; min-width: 0; min-height: 0; background: var(--surface-2); } .doc-frame { display: block; width: 100%; height: 100%; border: 0; } .doc-frame-empty { place-self: center; padding: 40px 20px; text-align: center; } /* Narrow screens: the rail becomes a strip of tabs above the file, scrolling sideways rather than stacking — a column of documents there would eat the height the document itself needs, and a wrapped one cuts off mid-item. */ @media (max-width: 720px) { dialog.doc-modal[open] { width: calc(100vw - 16px); height: calc(100vh - 24px); } .doc-modal-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .doc-modal-head [data-preview-subject] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .doc-picks { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 10px; border-right: 0; border-bottom: 1px solid var(--border); } .doc-pick { flex: 0 0 auto; max-width: 62vw; } .doc-pick-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The size and the legacy-copy badge are detail for the desktop list; in a tab strip they only cost the name its room. */ .doc-pick .small { display: none; } } /* Fill the whole main column — no fixed cap — so wide screens don't leave a band of dead space on the right. Side padding grows a little on very large viewports for breathing room. */ .content { padding: 24px 28px 48px; width: 100%; } @media (min-width: 1700px) { .content { padding-left: 40px; padding-right: 40px; } } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .page-head h1 { font-family: var(--font-display); font-size: 29px; font-weight: 600; color: var(--heading); line-height: 1.1; } .page-head .lede { color: var(--ink-light); font-size: 13.5px; margin-top: 5px; max-width: 92ch; } /* Top-align the actions with the heading so they share the reference's row instead of dropping to a line of their own. Kept a single class so the responsive .page-head rules below still win when the header stacks. */ .page-head--top { align-items: flex-start; } /* ── Buttons, inputs ───────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; font: 500 13.5px var(--font-body); padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .13s ease, border-color .13s ease, color .13s ease; } .btn:disabled { opacity: .45; cursor: default; pointer-events: none; } .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-hover); } .btn-gold { background: var(--gold); color: #2E2504; } .btn-gold:hover { background: #B8942F; } .btn-outline { background: var(--surface); border-color: var(--border); color: var(--ink-mid); } .btn-outline:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--ink); } .btn-danger-ghost { background: none; color: var(--status-bad); border-color: transparent; } .btn-danger-ghost:hover { background: var(--status-bad-bg); } .btn-ghost { background: none; color: var(--ink-light); border-color: transparent; } .btn-ghost:hover { color: var(--ink-mid); background: var(--surface-2); } /* An action in a list row: the same button, square, with a glyph instead of words. Square rather than merely narrow so a row of them reads as one set of controls, and the same 32px box whichever tone it wears — a table where the green button is wider than the grey one looks like the green one matters more, which is a claim the screen has no business making. The accessible name lives in aria-label on every one of them; the tooltip repeats it for the mouse. Nothing here is icon-only to a screen reader. */ .btn-icon { padding: 0; width: 32px; height: 32px; justify-content: center; gap: 0; } .btn-icon .icon { display: block; } /* The cell they sit in, right-aligned with the "open" button that ends every row. Deliberately on one line: they are one set of controls, and a set that wrapped to two rows would read as two groups and make every row in the table a different height. A narrow screen scrolls the table instead, which is what .table-wrap is already for and what every other wide column here does. Not `.row-actions`, which is taken: that is the dashboard's triage cluster, and it wraps on purpose. Two things with one name is how a rule starts applying where nobody meant it to. */ .table-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; } /* The per-action forms are layout-transparent, so the buttons inside them line up as siblings rather than as three separate blocks. */ .table-actions form { display: contents; } table.data td.right:has(.table-actions) { white-space: nowrap; } /* A line's concession, said either way: two boxes, and whichever is filled disables the other (docs/DESIGN.md §3). Narrow, because they sit in a table column that also has to fit a quantity and a price. */ .disc-cell { display: inline-flex; align-items: stretch; gap: 4px; } .disc-cell .input-suffix { flex: 1; min-width: 0; } .disc-cell input { width: 100%; min-width: 62px; padding-right: 24px; } .disc-cell input:disabled { opacity: .45; } /* Compact action clusters (e.g. dashboard flagged-contact triage) */ .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* A disclosure whose summary is styled as a button — hide the native marker */ .link-existing > summary { list-style: none; } .link-existing > summary::-webkit-details-marker { display: none; } .link-existing[open] > summary { margin-bottom: 2px; } label.field { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-mid); } label.field span { display: block; margin-bottom: 5px; } /* Every text-like control, listed once. `datetime-local` was missing, so the two fields that use it — mark-as-shipped and the by-hand send — rendered as raw browser chrome beside styled neighbours. `url`, `tel` and `search` are here for the same reason before somebody reaches for them. */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=url], input[type=tel], input[type=search], select, textarea { width: 100%; font: 400 14px var(--font-body); color: var(--ink); padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } input::placeholder, textarea::placeholder { color: var(--ink-light); opacity: 1; } input:hover, select:hover, textarea:hover { border-color: var(--border-strong); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); } /* The browser's own calendar/clock button. Left native — it opens the picker the operating system already knows how to draw — but toned down so it reads as part of the field rather than sitting on top of it, and inverted in dark mode, where the glyph is a fixed dark bitmap that otherwise disappears. */ input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; transition: opacity .13s ease; } input[type=date]:hover::-webkit-calendar-picker-indicator, input[type=datetime-local]:hover::-webkit-calendar-picker-indicator, input[type=time]:hover::-webkit-calendar-picker-indicator { opacity: 1; } :root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type=datetime-local]::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1); } .input-suffix { position: relative; } .input-suffix .suffix { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-light); font-size: 12.5px; } .password-field { position: relative; } .password-field input { padding-right: 42px; } .password-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink-light); border-radius: 6px; } .password-toggle:hover { color: var(--ink-mid); } .password-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; } .password-toggle svg { width: 18px; height: 18px; } .password-toggle .icon-hide { display: none; } .password-field.is-visible .password-toggle .icon-show { display: none; } .password-field.is-visible .password-toggle .icon-hide { display: block; } /* ── Searchable select (combobox) ──────────────────────── */ .combo { position: relative; } /* Native , which is what shows when the combobox enhancer has not run — a lot needs the room, a unit does not, and at 120px the Unit column was taking 148px to say "kg" while the Item column cut a lot code in half. Both unit controls take the same floor, so the two kinds of row still match. */ .lines .line-unit, .lines .line-qty-unit { min-width: 92px; } /* The line's number, as the printed document leads with it. Narrow, quiet and tabular, because it is a landmark rather than a figure to read: it exists so "the third line" means the same thing on the screen and on the paper. */ .lines th.line-no, .lines td.line-no { width: 1%; padding-right: 4px; text-align: right; color: var(--ink-light); font-variant-numeric: tabular-nums; } .lines select { min-width: 120px; } /* Field widths live here rather than inline, so a narrower screen can trim them (an inline width would beat any media query). */ .lines .line-qty { width: 80px; } .lines .line-price { width: 100px; } .lines .line-disc { width: 64px; } /* The two unit controls need no width of their own. A catalogue row's unit and a typed row's are the same question asked of two kinds of line, so they are the same control — both onto its own submit guard, and the field would otherwise lose its mark the moment the script ran. Decorative: the `required` attribute is what tells a screen reader, so the asterisk is not announced twice. */ label.field:has(> input[required], > select[required], > textarea[required], > select[data-required]) > span::after, label.field:has(> .combo > select[data-required]) > span::after, .field-group:has(input[required], select[required], textarea[required]) > .field-caption::after { content: ' *'; color: var(--status-bad); font-weight: 600; } /* A line's fields are labelled by their column, so the column carries the mark. Written on the header rather than derived, because which of them is required depends on which tab is showing and a `:has()` across a whole table would answer for the wrong one. */ table.data th.is-required::after { content: ' *'; color: var(--status-bad); } /* The whole page's validation messages, listed at the top of it (§5b). Styled as a flash because that is where the operator's eye already goes after a bounce, and each entry is a button that puts the cursor in the field. */ .validation-summary ul { margin: 6px 0 0; padding-left: 18px; } .validation-summary li { margin: 3px 0; } .validation-summary-title { margin: 0; font-weight: 600; } .validation-summary-jump { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .validation-summary-jump:hover .validation-summary-field, .validation-summary-jump:focus-visible .validation-summary-field { text-decoration: underline; } .validation-summary-field { font-weight: 600; } .validation-summary-field::after { content: ' — '; font-weight: 400; } /* One sent message in an enquiry's conversation. */ .convo-msg { border-left: 3px solid var(--accent-soft); padding: 2px 0 2px 12px; } /* Login-screen notices (lockout / session-expired) — set apart from the red field errors so a temporary lockout doesn't read as "wrong password". */ .auth-alert { border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px; margin: 0; } .auth-alert-warn { background: var(--status-warn-bg); color: var(--status-warn); border: 1px solid var(--status-warn-line); } .auth-alert-info { background: var(--status-info-bg); color: var(--status-info); border: 1px solid var(--status-info-line); } /* "or" divider between password and Google sign-in */ .auth-or { display: flex; align-items: center; gap: 10px; color: var(--ink-light); font-size: 12px; } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* Sign-in-with-Google button: icon + label, centred like the primary button */ .btn-google { justify-content: center; gap: 9px; } .btn-google svg { width: 18px; height: 18px; } /* Small helper text under a field label */ .field-hint { color: var(--ink-light); font-size: 12px; margin-top: 4px; } /* Amount + currency pair sharing one label */ .field-pair { display: flex; gap: 8px; } .field-pair > input { flex: 1; min-width: 0; } .field-pair > select { width: auto; min-width: 104px; flex-shrink: 0; } /* A row of labelled fields. Top-aligned on purpose: every field is the same label + input stack, so the inputs line up — and a validation message under one field grows downward without pushing its neighbours out of line. */ .form-row { display: flex; flex-wrap: wrap; gap: 12px 12px; align-items: flex-start; } /* Document action bar (preview / save / send-with-CC). Bottom-aligned so the buttons sit on the input's baseline; the CC label floats above its input and the validation message hangs below, out of the flex flow, so an error never shoves the buttons out of line. */ .doc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .doc-actions .field { margin: 0; position: relative; } .doc-actions .field .field-error { position: absolute; top: 100%; left: 0; margin-top: 3px; white-space: nowrap; } /* Language switcher (topbar + login screen) */ .lang-switch { display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; background: var(--surface-2); } .lang-switch button { border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--ink-light); padding: 3px 8px; border-radius: 6px; cursor: pointer; } .lang-switch button:hover { color: var(--ink-mid); } .lang-switch button.active { background: var(--accent); color: var(--on-accent); } .lang-switch-auth { margin-top: 14px; justify-content: center; display: flex; } .lang-switch-auth button { font-size: 12.5px; font-weight: 500; letter-spacing: 0; } /* ── Dark theme ──────────────────────────────────────────── Applied only when — set by the head script from the saved preference, falling back to the operating system's. Nothing below restyles a component: it re-points the tokens the components already use. The greens lift (a #3B5240 button is unreadable on a dark canvas) while the sidebar deepens, so the rail stays the darkest surface in both themes. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #121613; --surface: #1A201C; --surface-2: #212823; --surface-3: #29312B; --border: #303A33; --border-soft: #262E28; --border-strong: #46524A; --ink: #E7EDE7; --ink-mid: #B1BAB2; --ink-light: #8B948B; /* Dark inverts the primary control: a #3B5240 fill disappears against this canvas, so the accent becomes a light green carrying dark type — the button stays the brightest thing on the screen either way. */ --accent: #8FBF9C; --accent-hover: #A3CDAE; --accent-soft: #24352A; --on-accent: #101A13; --link: #A5C7AF; --heading: #CBE0D1; --focus: #7FA98B; --nav-bg: #1E2721; --nav-bg-2: #171E19; --nav-border: rgba(255, 255, 255, .07); --nav-hover: rgba(255, 255, 255, .05); --nav-active: rgba(255, 255, 255, .09); --nav-edge: var(--border); --status-good: #6FC189; --status-good-bg: #16301F; --status-good-line: #2A5638; --status-info: #7EB3E0; --status-info-bg: #14283A; --status-info-line: #2A4A68; --status-warn: #DCB259; --status-warn-bg: #35290F; --status-warn-line: #5C4820; --status-bad: #E58F92; --status-bad-bg: #38191B; --status-bad-line: #61302F; --status-neutral: #9BA298; --status-neutral-bg: #262C26; --status-neutral-line: #3A423B; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .34); --shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .34); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5); } /* The wordmark's dark half needs the white chip it is drawn for, on both the sidebar rail and the login card. */ :root[data-theme="dark"] .auth-card .brand-logo { background: var(--white); padding: 10px 16px; border-radius: 10px; } :root[data-theme="dark"] .btn-gold { color: #241D03; } :root[data-theme="dark"] .corr-dir { background: var(--surface-2); } :root[data-theme="dark"] dialog.corr-modal::backdrop { background: rgba(0, 0, 0, .6); } :root[data-theme="dark"] .corr-summary-badge { background: var(--surface-2); } /* ── Responsive: tablet ────────────────────────────────── */ @media (max-width: 1040px) { .content { padding: 22px 20px 44px; } .topbar { padding: 12px 20px; } } /* ── Responsive: sidebar becomes an off-canvas drawer ──── */ @media (max-width: 860px) { /* Drawer: hidden off the left edge, slides in over the content. */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: min(82vw, 300px); transform: translateX(-100%); transition: transform .25s ease; z-index: 50; box-shadow: 4px 0 24px rgba(0, 0, 0, .18); } body.nav-open .sidebar { transform: translateX(0); } .nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(14, 20, 16, .5); z-index: 40; } .nav-toggle { display: inline-grid; } .topbar-brand { display: block; } .topbar .crumbs { display: none; } .topbar { padding: 11px 16px; gap: 10px; } .content { padding: 18px 16px 40px; } /* Trim the user cluster to the essentials; keep language + sign out. */ .topbar .user { gap: 8px; } .topbar .user > span:not(.avatar) { display: none; } .topbar .user .btn { white-space: nowrap; } .topbar-divider { display: none; } .page-head h1 { font-size: 25px; } .page-head .btn { flex-shrink: 0; } /* Full-width filter controls stack cleanly on narrow screens. */ .filters { gap: 8px; } .filters input, .filters select { width: 100%; min-width: 0; flex: 1 1 100%; } /* Totals/line-editor blocks span the full width instead of floating right. */ .totals { width: 100%; margin-left: 0; } } /* ── Responsive: phones ────────────────────────────────── */ @media (max-width: 520px) { body { font-size: 14px; } /* A conversation entry's header carries three things — direction, subject, when — and on a phone the timestamp squeezes the subject down to "Q3 r…". The subject is what a folded row is read for, so it takes a line of its own here and wraps, while the chip, the time and the caret share the one above it. */ .corr-record-top { flex-wrap: wrap; } .corr-record-top .corr-when { margin-left: auto; order: 1; } details.corr-record > summary::after { order: 2; } .corr-record-top .corr-subject { order: 3; flex: 1 0 100%; white-space: normal; overflow: visible; } /* Too tight to sit beside the language switch — the page heading carries identity here. */ .topbar-brand { display: none; } .page-head { align-items: stretch; } .page-head .btn { width: 100%; justify-content: center; } .card-foot.row { flex-wrap: wrap; gap: 10px; } /* Comfortable touch targets on small screens. */ .btn { padding: 10px 16px; } .btn-sm { padding: 8px 12px; } /* …except the ones that are a glyph in a square. This rule used to reach them too — same specificity, later in the file — so a 32px-wide button got 16px of padding each side and squeezed its icon to nothing: an action row of blank boxes. They grow instead, which is what "comfortable touch target" meant for them in the first place. */ .btn-icon { padding: 0; width: 40px; height: 40px; } .btn-icon .icon { width: 17px; height: 17px; flex: none; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=url], input[type=tel], input[type=search], select, textarea { padding: 11px 12px; font-size: 16px; } /* 16px avoids iOS zoom-on-focus */ .password-field input { padding-right: 44px; } .lang-switch { padding: 3px; } .lang-switch button { padding: 5px 9px; } /* The taller touch targets above make the bar itself taller. */ :root { --topbar-h: 61px; } } /* ── Responsive: quote line-items become stacked cards ─── */ /* Narrower desks: the line table is still the widest thing in the app, so it trims the filenames before it gives up fitting on the screen. */ @media (max-width: 1200px) { .lines th, .lines td { padding: 8px 7px; } .docs-cell label span { max-width: 130px; } } /* The editor's line table is unusable as a horizontal scroll on a phone, so below 680px each row becomes a self-contained card: product and total span the full width, qty/price/disc share a three-up row, and the header is replaced by per-field labels. Pure CSS — the recalc/reindex JS keys off classes, not table structure, so it keeps working unchanged. */ @media (max-width: 680px) { table.data.lines, .lines thead, .lines tbody { display: block; } .lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .lines tr.line-row { display: grid; /* minmax(0, …) rather than a bare 1fr: a grid track's default minimum is its content, so the qty box and its unit picker sitting side by side made the card wider than the phone and put a scrollbar under every line. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; background: var(--surface); } .lines td { display: block; padding: 0; border: 0; text-align: left !important; } /* The card itself is the separation here — the row tints and the left accent would only muddy it, so the focused line is marked on the card's border instead. Matching the desktop selectors weight for weight, or those win. */ table.data.lines tbody tr td, table.data.lines tbody tr:nth-child(even) td, table.data.lines tbody tr:hover td, table.data.lines tbody tr:focus-within td { background: none; } table.data.lines tbody td:first-child, table.data.lines tbody tr:focus-within td:first-child { box-shadow: none; } .lines tr.line-row:focus-within { border-color: var(--focus); } .lines td[data-label]::before { content: attr(data-label); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-light); margin-bottom: 3px; white-space: nowrap; } .lines td:first-child, .lines td.line-total, .lines td.docs-col-cell { grid-column: 1 / -1; } /* Room to read the whole filename here: the card is as wide as the phone, and the desktop cap would truncate these to nothing. */ .lines td.docs-col-cell .docs-cell label span { max-width: none; white-space: normal; overflow: visible; } .lines td.docs-col-cell .docs-cell label { padding-left: 0; } /* The card layout stretches every field to the card's width; a checkbox is not a field in that sense, and stretched it shoves its own name off-screen. */ .lines td.docs-col-cell input[type="checkbox"] { width: auto !important; flex: 0 0 auto; } /* `min-width: 0` as well as the width: a renders as a grey box that reads as a disabled text field, and hides what an operator most needs to see about a certificate: its number, who issued it, and whether it has run out. These are ordinary checkboxes wearing something legible. */ .chip-picker { display: flex; flex-wrap: wrap; gap: 6px; } .chip-option { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; line-height: 1.2; } .chip-option:hover { border-color: var(--accent); } .chip-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 500; } .chip-option input { margin: 0; } .cert-picker { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .cert-option { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 8px; border-radius: 6px; } .cert-option:hover { background: var(--surface-2); } .cert-option:has(input:checked) { background: var(--accent-soft); } .cert-option input { margin: 0; flex: none; } .cert-option .cert-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .cert-option .cert-body b { font-size: 13px; } .cert-picker .cert-empty { padding: 6px 8px; } /* --- Receipts chart (dashboard) ------------------------------------------- A twelve-month diverging bar chart, drawn in CSS because the dashboard is server-rendered and a charting library would be the only JS on the page. Sign is carried by *position* — received above the baseline, refunded below — so the colours are reinforcement rather than the encoding. They are a blue/red pair rather than this app's green/red status tones for one reason: green against red is the pair a red-green colourblind reader cannot separate (ΔE 3 against a floor of 8), while blue against red clears it at 13. The 2px gap between a bar and the baseline is the surface showing through, so two bars never touch and read as one shape. */ .receipts-chart { margin: 10px 0 0; } .receipts-plot { display: flex; align-items: stretch; gap: 3px; height: 120px; padding-top: 4px; } .receipts-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: var(--radius-sm); } .receipts-col:hover { background: var(--surface-2); } /* The two halves share the height evenly, so the baseline sits in the middle whether or not anything was refunded — a line that moved with the data would make two months incomparable. */ .receipts-half { flex: 1 1 50%; display: flex; min-height: 0; } .receipts-half.up { align-items: flex-end; border-bottom: 1px solid var(--border-strong); } .receipts-half.down { align-items: flex-start; } .receipts-plot .bar { display: block; width: 100%; border-radius: 3px 3px 0 0; } .receipts-plot .bar.in { background: var(--status-info); margin-bottom: 2px; } .receipts-plot .bar.out { background: var(--status-bad); border-radius: 0 0 3px 3px; margin-top: 2px; } .receipts-label { text-align: center; font-size: 10.5px; color: var(--ink-light); padding-top: 4px; overflow: hidden; white-space: nowrap; } /* Caption and legend on one row that wraps as whole items, so the key never splits across lines mid-phrase the way inline text does. */ .receipts-chart figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; } .receipts-key { white-space: nowrap; } .receipts-key .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: baseline; } .receipts-key .swatch.in { background: var(--status-info); } .receipts-key .swatch.out { background: var(--status-bad); } .receipts-table { margin-top: 8px; } .receipts-table summary { cursor: pointer; } .receipts-table table { margin-top: 6px; } .receipts-table .nowrap { white-space: nowrap; } @media (max-width: 600px) { .receipts-plot { height: 96px; } .receipts-label { font-size: 9.5px; } } /* Month against month, on the revenue panel. The arrow and the sign carry the direction; the colour only reinforces it, for the same reason the chart above puts refunds below the line rather than trusting red to say so. */ .delta-chip { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; } .delta-chip.up { color: var(--status-good); } .delta-chip.down { color: var(--status-bad); } /* What the shelf is made of (§3): our own production against bought-in stock, as a proportion, because that is the one thing a pair of money figures cannot say. Two hues that separate for a red-green reader — the same blue the receipts chart uses, against the app's amber — rather than a good/bad pair, since neither half of a shelf is the bad one. */ .shelf-split { margin-top: 4px; } .shelf-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); } .shelf-bar .seg { display: block; height: 100%; } .shelf-bar .seg.own { background: var(--status-info); } .shelf-bar .seg.supplied { background: var(--status-warn); } .shelf-key { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; margin-top: 6px; } .shelf-key .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: baseline; } .shelf-key .swatch.own { background: var(--status-info); } .shelf-key .swatch.supplied { background: var(--status-warn); } /* What went out as a gift rather than a sale (docs/DESIGN.md §4b). Green, and not the warn amber the supplied half wears: giving samples away is how a customer decides, not a problem to notice. */ .shelf-bar .seg.given { background: var(--status-good); } .shelf-key .swatch.given { background: var(--status-good); } .shelf-cur { font-weight: 600; color: var(--ink-mid); } .shelf-promised { margin-left: auto; } /* ── Document lines: what the catalogue can still deliver ───────────── */ /* The availability note under a catalogue row's quantity (docs/DESIGN.md §6b). Quiet by default — it is an aid while typing, not a complaint — and loud only when the row asks for more than there is, which is the one state the issue step will refuse. On the row's sub-line, with its other facts. It used to sit under the quantity box, which made that one cell two lines tall while every other cell in the row was one — so the field it was helping with no longer lined up with the price beside it. It is a reading rather than a field, and it belongs with the readings. */ table.data.lines .line-stock { font-size: 11.5px; line-height: 1.3; color: var(--ink-light); } table.data.lines .line-stock:empty { display: none; } table.data.lines .line-stock.is-short { color: var(--status-bad); font-weight: 600; } /* A row that oversells its lot, so the eye finds it before the totals do — the priced row and the sub-line under it, because they are one line. */ table.data.lines .line-row:has(+ .line-sub .line-stock.is-short) > td, table.data.lines .line-sub:has(.line-stock.is-short) > td { background: var(--status-bad-bg); } /* ── A bought-in lot: a quantity, or ordered on demand ──────────────── */ /* One question, two answers, and only ever one of them on screen (docs/DESIGN.md §6b). The number hides when the lot is marked orderable — by :has(), so nothing has to load and a no-JS session behaves the same. The value stays in the markup, so changing your mind back costs no retyping. */ /* One question, two answers, on one line — the line every field beside it puts its control on. Stacked, this field ran three rows deep and read as a paragraph that had wandered into a form row. */ .supply-qty .supply-qty-answers { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .supply-qty .supply-qty-number { display: flex; align-items: center; gap: 8px; min-width: 0; } .supply-qty .supply-qty-number input { min-width: 90px; } .supply-qty:has(.on-demand:checked) .supply-qty-number { display: none; } .supply-qty .supply-qty-switch { display: inline-flex; align-items: center; gap: 7px; margin: 0; height: 36px; font-size: 13px; white-space: nowrap; cursor: pointer; } .supply-qty .on-demand { accent-color: var(--focus); margin: 0; flex-shrink: 0; } /* Marked orderable, the switch is the answer rather than an afterthought. */ .supply-qty:has(.on-demand:checked) .supply-qty-switch { font-weight: 500; color: var(--heading); } /* What ticking it means arrives when it is ticked. Before that the field says what the box does in one line; the consequence — sellable in any quantity, never low on stock — is only worth reading once the choice is made, and showing it always was what made this field four lines tall. */ .supply-qty .supply-qty-hint, .supply-qty .supply-qty-consequence { margin: 4px 0 0; } .supply-qty .supply-qty-consequence { display: none; } .supply-qty:has(.on-demand:checked) .supply-qty-hint { display: none; } .supply-qty:has(.on-demand:checked) .supply-qty-consequence { display: block; } /* ── The thread strip's dates open what they name ───────────────────── */ /* "Last sent 12 Aug 14:20" is half an answer; the other half is what was said, which is one click away (docs/DESIGN.md §2a). Styled as the bold value it replaced, plus the underline that says it goes somewhere — a date that only changed colour on hover would be a control nobody knew was there. */ .thread-strip-open { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; } .thread-strip-open:hover { color: var(--accent); text-decoration-color: var(--accent); } .thread-strip-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; } /* ── A figure and its unit, in a numeric cell ───────────────────────── */ /* Every numeric cell in a list is the same shape: the number, and under it the unit it is in. It was three shapes before — an input with the unit trailing it, a plain string with the unit inside it, and a bare number — and the trailing ones had no room, so the unit wrapped to a line of its own anyway. The result was a row where the price sat high, the sold quantity floated in the middle and the status chip lined up with neither. Stacked rather than side by side, because these columns are narrow: eleven of them on the stock table, and "EUR / kg" beside a 92px box does not fit in any of the three languages. Stacking is the shape that fits, so it is the shape every cell takes rather than the one some fall into. The unit line is always rendered, even empty, so a cell with nothing to say is still the same height as its neighbours — which is the whole of what makes a column scan. */ table.data .figure { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; } table.data .figure-val { display: flex; align-items: center; justify-content: flex-end; } /* Where a table has editable figures, the value line is as tall as the box it might hold — otherwise a plain number sits six pixels above the input beside it, and the two unit labels underneath end up on different lines. Scoped with :has() so a read-only table (a viewer's) does not reserve room for a control it never draws. */ table.data:has(.figure input) .figure-val { min-height: 31px; } table.data .figure-unit { display: block; min-height: 13px; line-height: 13px; font-size: 11px; color: var(--ink-light); white-space: nowrap; } /* Inputs do not inherit font settings from the table, so the digits inside one are proportional while the digits beside it are not — which is a column that almost lines up, the most distracting kind. */ table.data .figure input, table.data .stock-input, table.data .me-num { font-variant-numeric: tabular-nums; } /* ── What a lot has already been sold ───────────────────────────────── */ /* The Sold column, and the same figure rolled up onto the product line above it (docs/DESIGN.md §6b). Given the tone of a held quantity — the amber the "low" chip wears — so a lot with something spoken for is visible while running an eye down the column, without a second chip competing with the real one. What is left is the subtraction of the two columns and is named in the title. */ .stock-sold { cursor: help; } table.data .stock-sold .figure-val { font-weight: 600; color: var(--status-warn); } /* ── How the year converted ─────────────────────────────────────────── */ /* One number against one whole, three times over (docs/DESIGN.md §7.3). A meter rather than a chart: there is no series here and nothing to compare across time, only "how much of that became this". */ .rate-row + .rate-row { margin-top: 12px; } .rate-bar { height: 8px; margin: 5px 0 3px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .rate-bar span { display: block; height: 100%; background: var(--status-info); } /* An account nobody has ever signed into (docs/DESIGN.md §5) — an invitation that never landed, which is a thing to act on rather than an empty cell to scroll past. Amber rather than red: nothing is broken, somebody just has not arrived yet. */ .never-signed-in { color: var(--status-warn); font-weight: 600; } /* ── Price list picker (docs/DESIGN.md §4j) ───────────────────────────────── A product and the scale it is sold on, as one block. The scale is indented under the product rather than laid out in columns beside it, because that is what the document does — and an editor arranged unlike the paper it produces is an editor you have to translate in your head. */ .pl-line { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 14px 10px; margin: 0 0 12px; background: var(--surface); } .pl-line:last-child { margin-bottom: 0; } .pl-scale { border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 10px; } .pl-scale-head { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; } .pl-band { align-items: flex-end; margin-bottom: 6px; } .pl-band:last-of-type { margin-bottom: 8px; }