/* PTI Procurement */ /* Subtle global scrollbar — applies to the whole page and any other default-styled scroll containers. Thin grey thumb on transparent track; deepens on hover. Matches the per-pane scrollbar styling on the invoice detail page (PDF preview + draft row table). Added 2026-05-14. */ html { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.13); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); background-clip: padding-box; } :root { --bg: #FAF8F3; /* warm near-white (was cool #FAFAF9) */ --surface: #FFFFFF; --surface-2: #F4F0E8; /* warm light surface (was cool #F4F4F2) */ --border: #EAE1D2; /* warm border (was cool #E5E5E3) */ --border-2: #DBCEB8; /* warm stronger border (was cool #D0D0CC) */ --text: #1F1610; /* warm near-black (was neutral #111111) */ --text-mute: #6B5E4E; /* warm mute (was cool #5A5A55) */ --text-soft: #8C7B66; /* warm soft (was cool #8E8E88) */ --accent: #A85A1C; /* PTI Orange — active states, primary actions */ --accent-deep: #8A4814; /* deeper PTI Orange for hover/pressed */ --link: #9E4E16; /* warm copper-brown for hyperlinks (was cool blue #2C5282) */ --good: #1D6F3F; --good-bg: #E7F2EC; --warn: #8A5A1F; --warn-bg: #F5EBDA; --bad: #9C2F2F; --bad-bg: #F5E0DD; --radius: 4px; --radius-lg: 6px; --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", "Cascadia Mono", Consolas, monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); /* Lit cream, not flat paper — a soft copper glow eases off the top into a gentle warm-cream gradient down the canvas. Painted on (not main.content) so it covers the FULL viewport. main.content is capped at 1400px and left-aligned, so when the gradient lived there it stopped dead at the cap and the flat --bg showed beyond it — a hard seam on wide displays ("fix the side slop, the glossy stops", Josh 2026-06-10). The sidebar paints its own gradient on top, so the canvas reads as one continuous lit surface. background-attachment:fixed pins the glow to the viewport (and the glow was already viewport-relative when it lived on main.content, so this only un-clips it — it doesn't move). (2026-06-10) */ background: radial-gradient(720px 380px at 16% -6%, rgba(214,138,68,.09), transparent 60%), linear-gradient(180deg, #FCFAF4 0%, #F7F1E6 54%, #F2EADB 100%); background-attachment: fixed; color: var(--text); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11"; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.011em; } /* Layout */ /* ─── App shell + sidebar — v5 light cream (2026-05-22) ──────────── The cold dark #14130F sidebar was disconnected from the warm cream palette of the rest of the app. Rebuilt: light cream background, muted warm-brown text, brand orange for active state. One palette across the whole UI. Per Josh: collapsible. Slides off entirely (transform: translateX) with a chevron toggle inside the sidebar and a reveal button pinned to top-left of main when hidden. */ .app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; /* 2026-06-10 (Josh) — the grid-template-columns transition is REMOVED. Animating grid tracks (220px↔0 with a minmax(0,1fr) sibling) is unreliable: in testing the collapse simply didn't take — the track stuck at 220px while the rest of the collapsed styling applied, so the sidebar stayed on screen overlapping centred content ("shit gets fucked up when you close the sidebar"). An instant track swap is the robust behaviour; the sidebar snaps cleanly open/closed every time. */ } main.content { min-width: 0; /* prevents wide table from blowing out the grid */ /* Clip stray horizontal overflow at the content box so the PAGE never grows a sideways scrollbar. The sidebar is position:sticky with only top:0 — it pins vertically but NOT horizontally, so any body-level horizontal scroll drags it out of view and exposes bare cream beside it ("the sidebar stops short and there's empty space", Josh 2026-07-08). Every legitimately-wide surface (Open Orders .oo-scroll, Purchase Log .pl-scroll, invoices .table-scroll, the doc viewer capped at 800px) already scrolls inside its OWN container, so nothing here relies on page-level horizontal scroll. `clip` (not hidden/auto) contains only the horizontal axis without creating a scroll container, so vertical page scroll, sticky table headers, and the fixed pop-out lightbox are all untouched. (2026-07-08) */ overflow-x: clip; /* Transparent — the lit-cream canvas now lives on (full-bleed) so the gradient no longer clips to this 1400px-capped box. Content cards (white) still float on the body surface, so data reads clean and never sits on copper. (2026-06-10) */ background: transparent; } /* Sidebar is always rendered — the hamburger collapse/expand feature was removed 2026-06-23 (Josh). Restore from git (the .nav-toggle + .nav-collapsed rules and the base.html toggle script) if a collapsible nav is ever wanted again. */ aside.nav { /* Lit cream, not flat cream: a soft copper glow warms the brand area at the top, easing into a gentle vertical gradient down the rail. Energy from light + depth, no flooding. (2026-06-09) */ background: radial-gradient(440px 240px at 28% 0%, rgba(214,138,68,.17), transparent 62%), linear-gradient(180deg, #FBF8F2 0%, #F4ECDD 60%, #EEE4D2 100%); color: #6B5E4E; padding: 22px 0 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid #EFE6D2; overflow: hidden; } aside.nav .brand { position: relative; padding: 20px 22px 20px; border-bottom: 1px solid #EFE6D2; } /* PTI wordmark — bumped to 168px once the "Procurement" subtitle (v23) and the collapse chevron (v24) were both retired and the wordmark owned the brand area on its own. Previous caps were 128 (shared with subtitle) and 150 (fought the chevron). */ /* The wordmark links home. The anchor hugs the logo (inline-block + negative margin cancels its own padding, so the wordmark sits in exactly the same spot as before) and fades in a soft warm backdrop on hover — our wordmark answer to X's circular icon highlight. Kept faint and slow so it reads as a quiet "this is clickable," not a tinted box. */ aside.nav .brand .brand-link { display: inline-block; padding: 8px 12px; margin: -8px -12px; border-radius: 14px; text-decoration: none; transition: background 0.18s ease; } /* `.is-hover` is the JS-driven twin of :hover. The logo is data-turbo-permanent (same node across navigations), so a class set on pointerenter rides through every Turbo swap and only clears on pointerleave — unlike :hover, which the browser drops for a frame mid-swap and flashed the backdrop off. See the pointer-binding script in base.html. */ aside.nav .brand .brand-link:hover, aside.nav .brand .brand-link.is-hover { /* A warm sand, kept a few shades deeper than the copper glow the brand area sits on (~#F5E5D4) so the backdrop actually reads — a lighter tint just disappeared into the glow. This is our answer to X's grey circle: clearly present on hover, still soft and on-palette. */ background: #EBD0AC; } aside.nav .brand .brand-logo { display: block; width: 168px; max-width: 100%; height: auto; } /* Legacy text label — no longer used but kept in case any page renders it. */ aside.nav .brand .pti { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #8C7B66; } /* "Procurement" subtitle — natural case, muted, no tracking. Was uppercase 11px tracked — classic admin-panel tell. (v6 bumped the top margin from 12 → 16 so the wordmark and subtitle each get their own beat.) */ aside.nav .brand .title { margin-top: 16px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #8C7B66; } /* v24 (2026-05-23) — `.nav-toggle`, `.nav-reveal`, and the `.app.nav-collapsed` companion rules all retired with the sidebar collapse/reveal feature. Restore from git (any commit before 2026-05-23) if responsive constraints change. */ aside.nav ul { list-style: none; margin: 16px 0 0; padding: 6px 0; flex: 1; overflow-y: auto; } aside.nav li { position: relative; margin: 1px 0; } aside.nav li a { display: flex; align-items: center; gap: 11px; padding: 11px 22px; color: #6E5C46; /* 2026-06-14 — bumped 13.5 → 15px per Josh (X-style, a touch larger and more confident). Icon size below tracks this. */ font-size: 15px; font-weight: 500; border-left: 3px solid transparent; text-decoration: none; } aside.nav li a:hover { color: #3D2817; background: #F5EFE0; text-decoration: none; } aside.nav li.active a { color: #8A4A16; background: #FFE6CF; font-weight: 600; } /* .nav-icon (reinstated 2026-06-14, scoped) — icons were retired in v7 as over-design across all 10 items. Brought back for the two ACTION items only (PO Generation, Upload) — the things you *do* rather than browse — so they read as buttons in the list. Inherits currentColor, so it tints copper on the active item and warms on hover with the label. flex-shrink:0 keeps it from squashing on the narrow layout. */ .nav-icon { flex-shrink: 0; width: 18px; height: 18px; opacity: 0.85; } aside.nav li.active a .nav-icon { opacity: 1; } /* "(Testing Phase)" suffix on Accuracy — was parenthetical body text. Now a small muted tag. The parens are stripped in base.html v5. */ .nav-suffix { font-size: 10px; font-weight: 500; color: #B8AEA0; letter-spacing: 0.02em; margin-left: 4px; } aside.nav li.active a .nav-suffix { color: #8A4814; opacity: 0.7; } /* Pending count chip — soft warm pill, auto-pushed right inside the nav-item flex. */ .nav-count { display: inline-flex; align-items: center; margin-left: auto; min-width: 22px; height: 18px; padding: 0 7px; justify-content: center; background: #FFE6CF; color: #8A4A16; font-size: 11px; font-weight: 600; border-radius: 999px; } aside.nav li.active a .nav-count { background: rgba(255, 255, 255, 0.6); color: #8A4A16; } /* Footer status — replaces the "LAST UPLOAD / INVOICES / AUTO-CLASSIFIED" K/V triplet with a quiet two-line summary. Less admin-panel; more ambient context. (v5.) */ .sys { padding: 14px 24px 0; margin-top: 12px; border-top: 1px solid #EFE6D2; font-size: 12px; color: #8C7B66; line-height: 1.55; } .sys .row { display: block; margin-bottom: 0; } .sys .row .k { color: #8C7B66; font-weight: 400; } .sys .row .v { color: #3D2817; font-weight: 500; font-variant-numeric: tabular-nums; } .sys .scrape-btn { display: block; width: 100%; margin-top: 10px; background: transparent; color: #6B5E4E; border: 1px solid #EFE6D2; padding: 6px; border-radius: var(--radius); font-size: 11px; cursor: pointer; font-family: inherit; letter-spacing: 0; } .sys .scrape-btn:hover { background: #FFF7EC; color: #8A4A16; border-color: #F5D7B8; } /* Auth placeholder — was inline-styled in base.html (which read as form-fill clutter). Now a class. Renders cleaner muted text without the "label / strong" pairing. */ .auth-block { padding: 14px 24px 4px; margin-top: 8px; border-top: 1px solid #EFE6D2; font-size: 11.5px; color: #8C7B66; line-height: 1.55; } .auth-block .auth-title { display: block; color: #3D2817; font-weight: 500; margin-bottom: 2px; } .auth-block a { color: #8A4A16; text-decoration: underline; } .auth-block a:hover { color: #8A4814; } main.content { padding: 28px 40px 60px; max-width: 1400px; } /* Page header 2026-05-22 — dropped the grey 1px rule + the 48px orange tick at the start. That treatment reads as starter-template (default AI landing-page formula: thin rule, brand-color accent at the left edge). Whitespace + the page title's type weight do the separation work now. */ .page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; padding-bottom: 14px; } .page-header h1 { font-size: 20px; font-weight: 600; } /* Shared "← Back" link — quiet by default, warms to the accent on hover, never underlines. Used across every document viewer (invoice, PO, contract, goods-receipt) so they read identically; pair it with [data-smart-back] for the history.back() behaviour wired in base.html. */ .page-back-link { font-size: 13px; color: var(--text-mute); text-decoration: none; white-space: nowrap; } .page-back-link:hover { color: var(--accent); text-decoration: none; } /* Inside a .page-header it parks top-right, opposite the title. */ .page-header .page-back-link { align-self: flex-start; margin-top: 6px; flex: 0 0 auto; } .page-header h1 .dim { color: var(--text-soft); font-weight: 400; margin-left: 4px; } .page-header .meta { font-size: 12px; color: var(--text-mute); } /* Card — flat, no shadow */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .card > .ms-scroll, .card > .pl-scroll { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } .card .card-h { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: baseline; } .card .card-h h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text); } .card .card-h .more { font-size: 11px; color: var(--text-soft); } .card .card-h .more a { color: var(--text-mute); } /* KPI row (overview only) */ .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 22px; } .kpi { padding: 14px 16px; border-right: 1px solid var(--border); } .kpi:last-child { border-right: none; } .kpi .label { font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; } .kpi .value { font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; } .kpi .value .unit { font-size: 12px; color: var(--text-mute); font-weight: 400; margin-left: 2px; } .kpi .sub { margin-top: 3px; font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; } .d.up { color: var(--bad); } .d.down { color: var(--good); } .d.nil { color: var(--text-soft); } @media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } } /* ─── In-site confirmation modal (2026-05-22 v8) ─────────────────── Generic modal vocabulary — used right now by the PO delete flow (po_list.html) but the class names are app-agnostic so other destructive actions can reuse them. Backdrop dims with a warm dark tint (rgba(31,22,16,…)) to match the cream palette rather than cold black. Card has a soft lift-shadow and gentle pop animation so it reads as a deliberate moment, not a flash. */ .modal-backdrop { position: fixed; inset: 0; background: rgba(31, 22, 16, 0.42); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: modal-fade-in 0.14s ease-out; } /* v13 — renamed from `.modal-card` → `.confirm-card`. A pre- existing `.modal-card` rule lower in this file (line ~3404, the inbox shortcuts dialog) was overriding mine with `width: 440px; padding: 0`, which is why my dimensions never took effect across v9 → v12 no matter what I tried. Class is now distinct so the cascade can't bite us. */ .confirm-card { background: #FFFFFF; border-radius: 14px; /* Roomier top/bottom so the title and buttons breathe against the box edges (sides unchanged). */ padding: 36px 20px 32px; width: 100%; max-width: 300px; box-shadow: 0 12px 36px rgba(31, 22, 16, 0.20), 0 2px 6px rgba(31, 22, 16, 0.08); animation: modal-pop 0.18s ease-out; } .modal-title { font-size: 18px; font-weight: 600; color: #1F1610; margin: 0 0 22px 0; letter-spacing: -0.008em; text-align: center; } .modal-body { font-size: 14px; color: #5A4D3A; line-height: 1.55; margin-bottom: 22px; } .modal-body p { margin: 0 0 10px 0; } .modal-body p:last-child { margin-bottom: 0; } .modal-warning { color: #9C2F2F; font-weight: 500; margin-top: 12px; } .modal-actions { display: flex; gap: 12px; /* v10 — centered (was flex-end). Pairs with the centered title so the modal reads as a balanced symmetric dialog. */ justify-content: center; } /* Modal buttons — paired set, identical dimensions, color is the only role signal (canon principle #5). Cancel is the safe pill; Delete is the destructive pink. */ .modal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; min-width: 90px; border-radius: 8px; font-size: 13.5px; font-weight: 500; border: 0; cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s; } .modal-btn:focus-visible { outline: 2px solid #C0712F; outline-offset: 2px; } .modal-btn-cancel { background: #F5EFE0; color: #5A4D3A; } .modal-btn-cancel:hover { background: #ECE3D0; color: #1F1610; } .modal-btn-destructive { background: #FCE8E8; color: #9C2F2F; font-weight: 600; } .modal-btn-destructive:hover { background: #F8D5D5; color: #7A1F1F; } /* A hair down so the trash reads as vertically centered against "Delete". */ .modal-btn-destructive svg { position: relative; top: 0.5px; } @keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Save-confirmation toast (PO created / saved to Drafts) — a quiet bottom-right card rather than a tinted full-width banner. White surface, copper check, slides up on appear and fades on dismiss. */ .po-toast { position: fixed; right: 24px; bottom: 24px; z-index: 1100; display: flex; align-items: center; gap: 11px; max-width: 380px; padding: 13px 14px 13px 15px; background: #FFFFFF; border: 1px solid #EFE3D0; border-radius: 12px; box-shadow: 0 10px 30px rgba(31, 22, 16, 0.16), 0 2px 6px rgba(31, 22, 16, 0.07); animation: po-toast-in 0.22s ease-out; } .po-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; } .po-toast-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #F1E2CF; color: #A85A1C; } /* Delete toast — soft red so it reads as a removal, not a success. */ .po-toast-check--danger { background: #FCE8E8; color: #9C2F2F; } .po-toast-text { font-size: 13.5px; color: #3A2E22; white-space: nowrap; } .po-toast-text strong { color: #1F1610; font-weight: 600; } .po-toast-link { flex: none; font-size: 12.5px; font-weight: 500; color: #6B5E4E; text-decoration: none; white-space: nowrap; } .po-toast-link:hover { color: #8A4A16; text-decoration: underline; } .po-toast-close { flex: none; margin-left: 2px; border: 0; background: transparent; color: #B8AC99; font-size: 14px; line-height: 1; cursor: pointer; padding: 4px; border-radius: 5px; } .po-toast-close:hover { color: #6B5E4E; background: #F5EFE3; } @keyframes po-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* "Editing draft" pill — shown next to a PO form's H1 when the page was opened via /po/{id}/edit, so it's clear you're revising an existing draft rather than starting a new PO. Copper-tinted, quiet. */ .edit-badge { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-left: 12px; padding: 4px 10px; border-radius: 999px; background: #F1E2CF; color: #8A4A16; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .edit-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #C0712F; } /* Tables */ /* 2026-05-22 v3 — Airbnb-tier rebuild. Earlier attempts shipped two conflicting thead rules (one principled at 12.5/500/warm-brown, one override at 13/600/dark-text on a grey-cream shelf). The override won and the page read as admin-panel. This block is now the single source of truth; the override below was deleted. Canon principle #9: Body data: 14px / weight 500 / #1F1610 (almost-black) Headers: 12.5px / weight 500 / #8C7B66 muted warm-brown, 0.02em letter-spacing, hairline #EFE6D2 underline Row pad: 17px vertical / 16px horizontal (breathing room) Dividers: 1px #F7F1E3 (warm, almost invisible) Hover: #FFFBF4 (subtle warm tint) Headers whisper; body speaks. */ table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data thead { background: transparent; } table.data th { text-align: left; padding: 16px 20px 12px; font-weight: 500; color: #8C7B66; font-size: 12.5px; text-transform: none; letter-spacing: 0.02em; white-space: nowrap; border-bottom: 1px solid #EFE6D2; } /* Sticky table headers (2026-06-05, Josh — NHL.com pattern) — the column labels stay pinned to the top of the viewport while the rows scroll under them, so you never lose the column mapping on long tables (invoices, POs, copper log…). An opaque fill hides the rows passing beneath; the divider is drawn with box-shadow rather than the cell's own border because border-collapse drops a border once the cell is stuck. z-index keeps the header above body rows but below the fixed top-corner chrome (hamburger / history-pager live at z 60). */ table.data thead th { position: sticky; top: 0; z-index: 5; /* Warm light-orange wash so the header band reads as distinct from the white rows scrolling beneath it (Josh, 2026-06-05). Opaque so rows don't bleed through; divider warmed to match the tint. */ background: #FFF4E9; box-shadow: 0 1px 0 #F2DCC2; color: #8A5A33; } table.data td { /* 22px vertical / 20px horizontal — Brian Chesky energy. The canon's 16-18px was a baseline; Airbnb-tier wants 22+ so each row reads as a discrete card-like band rather than a packed admin row. */ padding: 22px 20px; border-bottom: 1px solid #F7F1E3; vertical-align: middle; font-size: 14px; font-weight: 500; color: #1F1610; } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr { cursor: pointer; } table.data tbody tr:hover { background: #FFFBF4; } table.data .num { text-align: right; } /* Numeric cells — sans, tabular-nums for column alignment, slightly lighter weight so they don't shout. Monthly Summary (.ms) tables are dense and have their own size overrides further down. */ table.data tbody td.num { font-variant-numeric: tabular-nums; font-family: var(--font-sans); font-weight: 400; } table.data.ms tbody td.num { font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; font-family: var(--font-sans); } table.data.ms tbody td:first-child { font-family: var(--font-sans); font-size: 13px; } table.data .invoice-num { font-weight: 500; } /* Date cell — secondary info, slightly muted so it supports the primary identifier columns (PO Number, Supplier) rather than competing with them. Airbnb pattern: hierarchy through color modulation, not size. */ table.data td.cell-date { /* 2026-05-23 evening: Josh wanted the dates darker (was muted #6B5E4E, too faded against the rest of the table). Bumped to primary dark #1F1610 so the column reads as confident metadata, not background text. tabular-nums kept so the dates align in a clean column on the right. */ color: #1F1610; font-weight: 400; font-variant-numeric: tabular-nums; /* A date split across two lines ("Jun 8," / "2026") reads broken at any width — the column owns its width instead. (2026-06-09) */ white-space: nowrap; } /* Month divider bar — light orange instead of grey so the breaks between months are easy to see at a glance when the table is long. Same palette as the Uploaded / supplier-orange pills. */ table.data tr.month-row { background: #FFF1E5; border-top: 1px solid #F5D7B8; border-bottom: 1px solid #F5D7B8; } table.data tr.month-row td { padding: 6px 14px; font-size: 10.5px; font-weight: 700; color: #8A4A16; text-transform: uppercase; letter-spacing: 0.6px; } /* Status indicators — text + dot, not pills */ .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-mute); padding: 0; background: none; } .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-soft); display: inline-block; } .tag.high::before, .tag.approved::before { background: var(--good); } .tag.medium::before, .tag.pending::before { background: var(--warn); } .tag.low::before, .tag.flag::before, .tag.rejected::before { background: var(--bad); } /* 2026-05-22 — `.no-dot` suppresses the leading status dot entirely. Used on the "Uploaded" tag in the Purchase Orders table where the neutral grey dot read as a leftover artifact rather than a status indicator. */ .tag.no-dot::before { display: none; } .tag.no-dot { gap: 0; } .conf { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-soft); } .conf.high { background: var(--good); } .conf.medium { background: var(--warn); } .conf.low, .conf.flag { background: var(--bad); } /* Settlement-chain badges (inbox + purchase log). Added 2026-05-13. Forward = this Adjustment settles N Provisionals. Reverse = this Provisional is settled by M Adjustments. */ .chain-badge { display: inline-block; padding: 2px 6px; margin-right: 4px; border-radius: var(--radius); font-size: 11px; font-weight: 600; border: 1px solid var(--border-2); white-space: nowrap; } .chain-badge.forward { color: var(--accent); border-color: var(--accent); } .chain-badge.reverse { color: var(--text-mute); border-color: var(--border-2); } /* Chips / year picker — minimal */ .chips { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; } .chip { padding: 4px 10px; border-radius: var(--radius); border: 1px solid var(--border-2); font-size: 11.5px; color: var(--text-mute); cursor: pointer; background: var(--surface); } .chip:hover { border-color: var(--text); color: var(--text); text-decoration: none; } .chip.active { background: var(--accent); color: white; border-color: var(--accent); } .year-picker { display: flex; gap: 3px; } .year-picker .chip { padding: 3px 9px; font-size: 11.5px; } /* Buttons */ .btn { padding: 6px 12px; border-radius: var(--radius); font-size: 12px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); cursor: pointer; font-family: inherit; /* Keep button labels on a single line — the "← Back to list" link in narrow .page-header .meta cells was wrapping into 3 lines ("← Back to" / "list") when the parent flex item shrunk. */ white-space: nowrap; } .btn:hover { border-color: var(--text); } .btn.primary { background: var(--accent); color: white; border-color: var(--accent); } .btn.primary:hover { background: #000; border-color: #000; } .btn.danger { background: var(--surface); color: var(--bad); border-color: var(--bad); } /* In-row action buttons (2026-05-22) — refined text-style links for use inside table cells. The standard .btn is too loud when stacked three-wide in every row; .btn-text is borderless until hover, when it picks up a soft warm tint. Used for the View / Download / Delete column on the Purchase Orders page. */ .btn-text { display: inline-block; padding: 5px 10px; margin: 0 1px; font-size: 12px; font-weight: 500; color: #5A4A38; background: transparent; border: 1px solid transparent; border-radius: 6px; text-decoration: none; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.12s, color 0.12s; } .btn-text:hover { background: #FFF1E5; color: #8A4A16; /* Re-assert over the global `a:hover { text-decoration: underline }`, which out-specifies .btn-text's `none` on anchor-based actions (Edit / Download) — button-based ones were already immune. */ text-decoration: none; } .btn-text.danger { color: #9C2F2F; } .btn-text.danger:hover { background: #FCE8E8; color: #7A1414; } /* Detail sidecar delete — a quiet, self-sized outlined danger action so it reads as a deliberate button rather than a stray link in an empty card. */ .doc-delete-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: 12px; border-color: rgba(156, 47, 47, 0.28); } .doc-delete-btn svg { flex: none; width: 13px; height: 13px; } /* Actions column — right-aligned (2026-06-09). The trio of inline buttons became a single "⋯" kebab (see .row-actions), so the column now hugs the right edge the way action menus conventionally do, with the popover anchored under it. Was centered when it held three buttons. */ table.data th.actions-col, table.data td.actions-col { text-align: right; } /* 2026-05-22 — Service label (PO Library Service column). Replaces the previous .svc-tag pill. Pills were overused; the Service column is metadata and only needs to read as a quiet category, not a badge. Typography does the work: uppercase, tracked, warm-brown muted. Same vocabulary Linear/Stripe use for tags-as-text-only. */ /* 2026-05-22 v4 — Service column label. Was uppercase tracked warm-brown (badge-y, even after the .svc-tag pill retirement). Now matches the body-text vocabulary: natural case, 14px, the same near-black as the supplier column but weight 400 so the eye registers it as supporting metadata, not a primary identifier. Reads as one of the row, not a label-on-data. */ .svc-label { font-size: 14px; font-weight: 400; color: #1F1610; letter-spacing: 0; text-transform: none; } /* Material column — same vocabulary as the Service column above. Plain text in primary-dark, no chip. The broad category (Copper / Nylon / Reels) is metadata supporting the row, not a primary identifier — typography carries the signal. Added 2026-05-23 alongside the Material column in po_list.html. */ .mat-label { font-size: 14px; font-weight: 400; color: #1F1610; letter-spacing: 0; text-transform: none; } /* Ship-To column — same plain-text vocabulary as Material/Service. The destination (Sark / IWG / Owl / Nexans / PTI) is a supporting attribute of the order, not a primary identifier or status, so it reads as typography, no chip. Added 2026-06-10 with the Ship-To column in po_list.html. */ .ship-to-label { font-size: 14px; font-weight: 400; color: #1F1610; letter-spacing: 0; text-transform: none; } /* Invoice Type badge (2026-06-03) — Provisional vs Final (= Adjustment). The distinction matters because a Final invoice re-prices an already- delivered load, so its weight must not be counted as new copper. */ .inv-type { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: #F3EFE7; color: #6B5E4E; } .inv-type.prov { background: #EAF3ED; color: #1A5A30; } .inv-type.final { background: #FCE9D8; color: #8A4A16; } .inv-type.tolling { background: #ECEEF4; color: #3B4663; } /* ─── Upload page redesign (2026-05-22) ───────────────────────── The dropzone is now the page's hero. Numbered instructions and the surrounding card wrapper retired — the affordance IS the instruction. Document-type override demoted to a chip in the top-right of the dropzone (default = Auto-detect for the 99% case). Visual language: warm cream gradient idle, brand-orange dragover, 88px circular icon centerpiece, friendlier copy. References: Airbnb upload, Instagram new-post, Linear file picker. */ .upload-page { /* 2026-05-22 — bumped from 780 → 1080. At 780 the empty state felt intimate but the file-staged state wasted huge horizontal space on the right when 20+ files were queued. 1080 lets the file list breathe while still keeping the layout contained. */ /* Left-aligned (not margin:0 auto) so the page title sits at the same content-left edge as every other tab — Josh's "consistent title placement" pass, 2026-06-23. The dropzone keeps its 1080px cap. */ max-width: 1080px; } /* Upload uses a bespoke hero (H1 + routing chip on one row) rather than .page-header, so its title is sized/placed to match the canonical page title here: same 32px, and no top offset so it starts at the content's 28px top like every other tab. 2026-06-23. */ .upload-hero { margin: 0 0 28px 0; } .upload-hero h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.025em; color: #1F1610; margin: 0; line-height: 1.1; } .upload-subtitle { margin: 10px 0 0 0; font-size: 14.5px; color: #6B5E4E; line-height: 1.55; max-width: 560px; } .upload-subtitle-link { color: #8A4A16; text-decoration: none; font-weight: 500; border-bottom: 1px dotted #E0A878; } .upload-subtitle-link:hover { border-bottom-style: solid; color: #6B2B07; } /* Hero row — the subtitle (left) and routing override (right) on the same baseline. 2026-05-22 — gives the dropdown a visual anchor: it reads as "the subtitle states the default; the chip lets you override it." */ .upload-hero-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 0; } .upload-hero-row .upload-subtitle { margin: 0; } .upload-hero-row h1 { flex: 0 1 auto; } /* Routing override — "Route as [Detect automatically ▾]". Custom dropdown (button + popover) so the open list is themed; a native which looks like Windows 95. Click anywhere in the zone (it's a