/* ========================================================================= DESIGN TOKENS ========================================================================= */ :root { /* surfaces */ --bg: #FFFFFF; --bg-cream: #FAF7F2; --bg-subtle: #F7F4EE; --bg-hover: #F1ECE1; --bg-elevated: #FFFFFF; /* text */ --fg: #0A0A0A; --fg-secondary: #3F3F46; --fg-muted: #71717A; --fg-subtle: #A1A1AA; /* borders */ --border: #E9E3D5; --border-soft: #F0EBDD; --border-strong: #D4CDBB; /* brand (default; overridden per org) */ --brand: #0A0A0A; --brand-fg: #FFFFFF; --brand-hover: #27272A; --brand-soft: #F4F4F5; /* semantic */ --success: #15803D; --success-soft: #DCFCE7; --danger: #B91C1C; --danger-soft: #FEE2E2; --warning: #B45309; --warning-soft: #FEF3C7; --info: #1D4ED8; --info-soft: #DBEAFE; /* layout */ --sidebar-w: 248px; --topbar-h: 56px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; /* typography */ /* Valley Sans is variable (wght 100-900) and has a true italic, so the italic-name flourish still works. It has NO naira glyph (U+20A6): DM Sans is pinned second ON PURPOSE so every N resolves there and not on whatever serif the system offers. Verified in a browser -- a serif naira beside a sans figure is the bug this line prevents. */ --font-display: 'Valley Sans', 'DM Sans', -apple-system, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Printed artefacts -- the document editor, certificates, handbooks -- are not app chrome and stay serif. See .doc-paper. */ --font-doc: 'Instrument Serif', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* shadows — subtle only */ --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04); --shadow: 0 4px 12px rgba(10, 10, 10, 0.06); --shadow-lg: 0 12px 40px rgba(10, 10, 10, 0.10); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Nothing may push the document wider than the screen. `clip` (not `hidden`) stops the page-level horizontal scroll without turning the root into a scroll container — so the sticky topbar and the fixed off-canvas sidebar keep working, and designated `.table-wrap` regions still scroll internally. */ html { overflow-x: clip; max-width: 100%; } body { overflow-x: clip; max-width: 100%; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; } input, textarea, select { font: inherit; color: inherit; } img { max-width: 100%; display: block; } svg { flex-shrink: 0; } /* ========================================================================= TYPOGRAPHY ========================================================================= */ .serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; } .mono { font-family: var(--font-mono); font-size: 0.92em; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.015em; } h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 17px; } h4 { font-size: 15px; } .text-xs { font-size: 11px; } .text-sm { font-size: 12px; } .text-base { font-size: 14px; } .text-lg { font-size: 16px; } .text-xl { font-size: 20px; } .text-2xl { font-size: 26px; } .text-3xl { font-size: 34px; } .text-4xl { font-size: 44px; } .text-5xl { font-size: 56px; } .muted { color: var(--fg-muted); } .subtle { color: var(--fg-subtle); } .secondary { color: var(--fg-secondary); } .text-center { text-align: center; } .text-right { text-align: right; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* ========================================================================= LAYOUT HELPERS ========================================================================= */ .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .hidden { display: none !important; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1; min-width: 0; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .w-full { width: 100%; } .h-full { height: 100%; } .min-w-0 { min-width: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rounded { border-radius: var(--radius); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: 999px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-6 { padding: 24px; } .p-8 { padding: 32px; } .px-2 { padding-left: 8px; padding-right: 8px; } .px-3 { padding-left: 12px; padding-right: 12px; } .px-4 { padding-left: 16px; padding-right: 16px; } .px-6 { padding-left: 24px; padding-right: 24px; } .py-1 { padding-top: 4px; padding-bottom: 4px; } .py-2 { padding-top: 8px; padding-bottom: 8px; } .py-3 { padding-top: 12px; padding-bottom: 12px; } .py-4 { padding-top: 16px; padding-bottom: 16px; } /* ========================================================================= BUTTONS ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; line-height: 1.2; border: 1px solid transparent; transition: background 120ms, border-color 120ms, color 120ms, transform 100ms; white-space: nowrap; user-select: none; } .btn:active { transform: translateY(0.5px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); } .btn-primary:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); } .btn-secondary { background: var(--bg); color: var(--fg); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--border-strong); } .btn-ghost { background: transparent; color: var(--fg-secondary); } .btn-ghost:hover:not(:disabled) { background: var(--bg-subtle); color: var(--fg); } .btn-danger { background: var(--bg); color: var(--danger); border-color: var(--border); } .btn-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); } .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--radius-sm); } .btn-lg { padding: 11px 18px; font-size: 14px; } .btn-icon { padding: 8px; } .btn-block { width: 100%; } /* ========================================================================= FORM FIELDS ========================================================================= */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field label { font-size: 12px; font-weight: 500; color: var(--fg-secondary); } .field .hint { font-size: 11px; color: var(--fg-muted); } .field .error { font-size: 11px; color: var(--danger); } .input, .select, .textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); font-size: 13px; color: var(--fg); transition: border-color 120ms, box-shadow 120ms; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(10,10,10,0.06); } .input::placeholder, .textarea::placeholder { color: var(--fg-subtle); } .textarea { min-height: 80px; resize: vertical; font-family: inherit; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; } .input-group { position: relative; } .input-group .input-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-muted); pointer-events: none; } .input-group .input { padding-left: 34px; } /* Password show/hide eye button */ .pw-field { position: relative; } .pw-field .input { padding-right: 40px; } .pw-field .pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 6px; color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center; line-height: 0; border-radius: 4px; } .pw-field .pw-toggle:hover { color: var(--fg); background: var(--bg-cream); } /* Checkbox / toggle */ .checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } /* .onbw-doc is a checkbox row at card size — it needs the same mark, not the browser's default blue, which is the one colour the app never uses. */ .checkbox input, .onbw-doc input { appearance: none; width: 16px; height: 16px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg); transition: 120ms; } .checkbox input:checked, .onbw-doc input:checked { background: var(--brand); border-color: var(--brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 12px; } /* Radio rendered as a pill (a small set of mutually exclusive actions, shown inline rather than as a stack). `.preset-radio` is the same idea at card size — it carries its own box inline, so it only needs the states. */ .radio-pill { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--bg); font-size: 13px; transition: 120ms; } .radio-pill:hover { border-color: var(--border-strong); background: var(--bg-cream); } .radio-pill input { accent-color: var(--brand); margin: 0; flex: none; } .radio-pill:has(input:checked) { border-color: var(--brand); background: var(--bg-cream); } .preset-radio:hover { background: var(--bg-cream) !important; } .preset-radio:has(input:checked) { border-color: var(--brand) !important; } .preset-radio:has(input:disabled) { opacity: .55; cursor: not-allowed; } .toggle { position: relative; display: inline-block; width: 32px; height: 18px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: 160ms; cursor: pointer; } .toggle-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 2px; top: 2px; background: white; border-radius: 50%; transition: 160ms; } .toggle input:checked + .toggle-slider { background: var(--brand); } .toggle input:checked + .toggle-slider::before { transform: translateX(14px); } /* ========================================================================= CARDS & CONTAINERS ========================================================================= */ .card { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-soft); } .card-body { padding: 20px; } .card-footer { padding: 14px 20px; border-top: 1px solid var(--border-soft); } /* ========================================================================= BADGES ========================================================================= */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.4; background: var(--bg-subtle); color: var(--fg-secondary); border: 1px solid var(--border-soft); } .badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; } .badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .badge-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; } .badge-info { background: var(--info-soft); color: var(--info); border-color: transparent; } .badge-neutral { background: var(--bg-subtle); color: var(--fg-muted); border-color: transparent; } /* `badge-muted` was already being written in 8 places across Events, Website, Certifications and Energy — for "Closed", "Archived", the states you want present but quiet — and had never existed, so all 8 silently rendered as a plain bordered badge. Defined here rather than edited out of the call sites, because the call sites were all asking for the same real thing: dimmer than neutral, and reading as switched-off rather than as a category. */ .badge-muted { background: transparent; color: var(--fg-muted); border-color: var(--border-soft); opacity: 0.85; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } /* The picture on an aisle, in the category editor — the same disc the shop homepage draws, at the size a form can afford, so what is chosen here is recognisably what appears there. `.is-empty` shows the initial letter, which is exactly what the storefront falls back to. */ .rt-cat-thumb { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-subtle, #f3f0ea); border: 1px solid var(--border-soft); font-family: var(--font-display, Georgia), serif; font-size: 24px; color: var(--fg-muted); } .rt-cat-thumb img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; } /* The product photo in its editor. Square rather than a disc — a category is a sign and a product is a pack, and the shapes should not be confused. */ .rt-prod-thumb { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-subtle, #f3f0ea); border: 1px solid var(--border-soft); font-family: var(--font-display, Georgia), serif; font-size: 30px; color: var(--fg-muted); } .rt-prod-thumb img { width: 100%; height: 100%; object-fit: contain; } .rt-prod-thumb:not(.is-empty) { color: transparent; } /* Purchase history: a
per visit, because the useful default is the list of visits and the useful second click is what was in one of them. Twelve visits fully expanded is a wall nobody reads. */ .rt-hist { border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; } .rt-hist-row + .rt-hist-row { border-top: 1px solid var(--border-soft); } .rt-hist-row > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; flex-wrap: wrap; } .rt-hist-row > summary::-webkit-details-marker { display: none; } .rt-hist-row > summary:hover { background: var(--bg-subtle, #f7f5f1); } .rt-hist-total { margin-left: auto; font-variant-numeric: tabular-nums; } .rt-hist-row[open] > summary { background: var(--bg-subtle, #f7f5f1); } .rt-hist-row table { margin: 0; } .rt-cat-thumb:not(.is-empty) { color: transparent; } /* Grid helpers */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } /* Four across for a row of stat tiles; two across before it drops to one, since four tiles side by side stop being readable well above the phone breakpoint. */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1000px) { .grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } } /* Stat card (used on project overview + elsewhere) */ .stat-card { background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 16px 18px; } .stat-label { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; } .stat-value { font-size: 22px; font-weight: 600; margin-top: 4px; font-family: 'DM Sans', system-ui; } /* Description list (used on overview detail panels) */ .dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; } .dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; } .dl dt { font-size: 12px; color: var(--fg-muted); margin: 0; } .dl dd { margin: 0; font-size: 14px; color: var(--fg-primary); } /* Clickable list rows. Seven modules each named their own row class and gave it `cursor:pointer` inline with no hover state, so a row that is a link looked exactly like one that isn't. One rule, no markup churn. */ .ev-row, .cert-row, .wp-row, .ml-msg, .hh-drill-row[data-drill], .act-table-row, .emp-row { transition: background 120ms; } .ev-row:hover, .cert-row:hover, .wp-row:hover, .ml-msg:hover, .act-table-row:hover, .emp-row:hover, .hh-drill-row[data-drill]:hover { background: var(--bg-cream); } .act-table-row, .emp-row { cursor: pointer; } a.ev-row { color: inherit; text-decoration: none; } /* The remove button stays visible — hover-to-reveal has no equivalent on a phone, and these chips are edited on site. */ .att-chip .att-del { color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; } .att-chip .att-del:hover { color: var(--danger); border-color: var(--danger); } /* Onboarding checklist row (home) */ .checklist-item { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .checklist-item:last-child { border-bottom: none; } /* Grouping header inside a table body (employees grouped by station). `tr.…` rather than `.…` on purpose: below 640px `.table-cards td` sets its own padding and text-align, and at equal specificity it would win on source order — this used to be an inline style, which always won. */ tr.emp-group-row > td { background: var(--bg-subtle); padding: 8px 14px; text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); } /* Simple list row (e.g. retention tranches) */ .list-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-soft); gap: 12px; } .list-row:last-child { border-bottom: none; } /* Plain styled link (distinct from .btn) */ .link { color: var(--brand, var(--fg-primary)); text-decoration: none; } .link:hover { text-decoration: underline; } /* Search highlight */ mark { background: #FFF3B0; color: inherit; padding: 0 2px; border-radius: 2px; } /* Chevron affordance on clickable list rows */ .chevron { color: var(--fg-muted); display: inline-flex; align-items: center; } /* Comms chat layout */ .chat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; min-height: calc(100vh - 220px); } @media (max-width: 720px) { .chat-layout { grid-template-columns: 1fr; } } .chat-sidebar { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg); overflow: hidden; display: flex; flex-direction: column; } .chat-sidebar-header { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; } .chat-channel-item { padding: 10px 16px; cursor: pointer; border-left: 3px solid transparent; display: flex; align-items: center; gap: 8px; } .chat-channel-item:hover { background: var(--bg-subtle); } .chat-channel-item.active { background: var(--bg-subtle); border-left-color: var(--brand); font-weight: 500; } .chat-channel-item .hash { color: var(--fg-muted); } .chat-main { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg); display: flex; flex-direction: column; overflow: hidden; } .chat-main-header { padding: 14px 20px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; } .chat-messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; } .chat-message { display: flex; gap: 10px; } .chat-message .avatar { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; } .chat-message-body { flex: 1; min-width: 0; } .chat-message-meta { font-size: 12px; color: var(--fg-muted); margin-bottom: 2px; } .chat-message-meta strong { color: var(--fg-primary); font-weight: 500; } .chat-message-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.5; } .chat-message-actions { opacity: 0; transition: opacity 0.1s; display: flex; gap: 4px; margin-top: 4px; } .chat-message:hover .chat-message-actions { opacity: 1; } .chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .reaction-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-subtle); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 8px; font-size: 12px; cursor: pointer; } .reaction-pill.mine { background: var(--brand); color: var(--brand-fg); border-color: transparent; } .chat-composer { border-top: 1px solid var(--border-soft); padding: 12px 16px; display: flex; gap: 8px; align-items: flex-end; } .chat-composer textarea { flex: 1; min-height: 36px; max-height: 160px; resize: none; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 8px 12px; font: inherit; font-size: 14px; background: var(--bg); color: var(--fg-primary); } /* Payslip editor — itemized allowance / deduction / loan rows. Classes (not inline styles) so the amount field can go responsive. */ .ps-item-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } .ps-item-label { flex: 1; min-width: 0; } .ps-item-amt { width: 130px; flex: none; } .ps-loan-name { flex: 1; min-width: 0; font-size: 13px; } .ps-ded-row { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 8px; margin-bottom: 6px; } .ps-ded-row .ps-item-row { margin-bottom: 0; } .ps-ded-reason { width: 100%; margin-top: 6px; font-size: 12px; } /* Responsive table → cards. Opt a table in with `.table-cards` (+ its wrapper `.table-cards-wrap`) and give each a data-label. Below 640px each row becomes a stacked label/value card instead of horizontally scrolling. */ @media (max-width: 640px) { .table-cards-wrap { overflow: visible; border: none; background: transparent; border-radius: 0; } .table-cards thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; --table-sticky-top: 0px; } .table-cards, .table-cards tbody { display: block; } .table-cards tbody tr { display: block; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg); padding: 4px 14px; margin-bottom: 10px; } .table-cards tbody tr:hover { background: var(--bg); } .table-cards tbody tr:last-child td { border-bottom: none; } /* override base rule scoping */ .table-cards td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; text-align: right; border-bottom: 1px solid var(--border-soft); white-space: normal; /* Long unbreakable values (emails, account numbers, codes) wrap to the next line instead of forcing the card — and the page — wider than the screen. */ overflow-wrap: anywhere; min-width: 0; } .table-cards td:last-child { border-bottom: none; } .table-cards td::before { content: attr(data-label); text-align: left; flex: 0 0 auto; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); } /* Cells with no label (chevron, action buttons) span full width, right-aligned. */ .table-cards td[data-label=""]::before, .table-cards td:not([data-label])::before { content: none; } .table-cards td[data-label=""] { justify-content: flex-end; padding-top: 4px; } /* When the stacked table sits directly inside a .card (no card-body padding), inset the item-cards so they float inside the section border. */ .card > .table-cards-wrap { padding: 12px 12px 2px; } /* Same inset when nested in a padding-0 card-body (e.g. the #/me cards). */ .card-body > .table-cards-wrap { padding: 4px 12px 10px; } } /* ========================================================================= TABLES ========================================================================= */ .table-wrap { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); /* `clip` — NOT `hidden`. Both round off the corners, but `hidden` makes this a scroll container, and a sticky inside a scroll container that never scrolls silently never sticks. `clip` is not a scroll container, so the page stays the scroller and the header can pin under the topbar. The `hidden` line stays first as the fallback for Safari < 16. */ overflow: hidden; overflow: clip; background: var(--bg); } .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: 12px 16px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--border-soft); } /* ⚠⚠ THE ALIGNMENT UTILITIES MUST BE REPEATED HERE, OR THEY DO NOTHING IN A TABLE. `.table th, .table td` is (0,0,1,1) and `.text-right` is (0,0,1,0), so the blanket `text-align: left` above WINS and every `` in the app renders left. Measured 2026-09-09 while looking at the new trial balance: 396 such cells across src/main.js, every one of them a money or count column whose author plainly meant right, and not one of them had ever been right-aligned. Nobody had noticed because a left-aligned number column looks like a design choice rather than a bug. Gate: scripts/table-align-audit.mjs. */ .table th.text-right, .table td.text-right { text-align: right; } .table th.text-center, .table td.text-center { text-align: center; } .table th { font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); background: var(--bg-subtle); white-space: nowrap; } /* Scroll past the head of a long table and the column names go with it — so halfway down a payroll run you are reading unlabelled numbers. Pin the header instead. It sticks to whatever scrolls it: the page by default, which is why the offset is the topbar's height — anything else and the header slides under the topbar and out of sight. A dialog body, the till ticket, any other scroller sets its own --table-sticky-top below. The box-shadow redraws the bottom rule: with border-collapse:collapse the borders belong to the TABLE, not the cell, so they scroll away and leave the pinned header floating with no edge under it. */ .table thead th { position: sticky; top: var(--table-sticky-top, var(--topbar-h)); z-index: 2; box-shadow: inset 0 -1px 0 var(--border-soft); } /* Where the header pins, for everything that is NOT the page. Sticky resolves against the nearest SCROLL CONTAINER — and `overflow: hidden` makes one even though it never scrolls. Inside such a box the topbar offset pins nothing; it shoves the header 56px down the table and hides the first rows. So every scroll container in this file resets the offset to 0: a real scroller (a dialog body, the till ticket) pins the header to its own top edge, and a merely-clipping box leaves the header exactly where it was. This list is EXHAUSTIVE, not curated — `scripts/sticky-header-audit.mjs` derives the scroll containers from this stylesheet and fails if one is missing. Add an `overflow` rule below, add it here too; the gate will say so. Selectors that could never hold a table are in the list anyway: proving that is a judgement call, and a judgement call is what the gate exists to avoid. */ .attach-chip span, .auth-hero, .avatar, .chat-main, .chat-messages, .chat-sidebar, .ck-stage, .combo-item-label, .combo-menu, .compose-dock-body, .compose-dock-title, .doc-body-input, .doc-paper, .emp-rail-list, .emp-rail-name, .emp-rail-sub, .fp-meter, .fp-stage, .ml-folderbar, .ml-scroll, .ml-split > .card, .modal, .modal-body, .notif-panel, .notif-panel-body, .pos-pay-layer, .pos-pay-scroll, .pos-cat-badge, .pos-cat-name, .pos-entry-cap, .pos-entry-val, .pos-kb, .pos-cust-meta, .pos-cust-name, .pos-foot-mid, .rt-auth-name, .pos-line-meta, .pos-line-name, .pos-pay-cust-meta, .pos-pay-cust-name, .pos-quick, .pos-results, .pos-root.pos-embedded, .pos-ticket, .pos-tile-name, .pos-tile-unit, .progress-bar, .rt-cat-thumb, .rt-hist, .rt-prod-thumb, .scrollable, .sidebar, .sidebar-logo, .sidebar-nav, .truncate, .wo-thumb, .wo-thumb-card, .ws-device, .ws-edit, .ws-frame-wrap, .ws-page-name, .ws-rail, .ws-root, .ws-sec-name, .ws-sec-sub, .ws-title, .cdock-body, .cdock-panel, .cdock-row-last, .cdock-row-name, .nav-children > .nav-children-in { --table-sticky-top: 0px; } /* A scrollport is inset by its own padding, so in a padded box the header pins 20px down and rows scroll past in the gap above it. Negate the padding and it pins flush to the top edge. .modal-body is the one that matters — dialogs and drawers are where this app puts its line-item tables. */ .modal-body { --table-sticky-top: -20px; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr { transition: background 100ms; } .table tbody tr:hover { background: var(--bg-subtle); } .table .row-actions { opacity: 0; transition: opacity 120ms; } .table tr:hover .row-actions { opacity: 1; } /* ========================================================================= THE TILL'S ON-SCREEN NUMBER PAD A till is usually a tablet or an all-in-one with no keyboard. When the scanner will not read a label the cashier types the number off the packet, and the OS keyboard covers half the screen to offer letters for a field that wants digits. ========================================================================= */ .pos-search { display: flex; gap: 8px; align-items: stretch; } .pos-search .input { flex: 1; } .pos-pad-toggle { flex: none; width: 52px; display: flex; align-items: center; justify-content: center; } .pos-pad-toggle[aria-pressed="true"] { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); } .pos-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; max-width: 420px; } .pos-pad-key { /* ★ 64px minimum. Below about 44px a finger misses, and a mis-tap at a till is a wrong barcode, not a typo somebody notices. */ min-height: 64px; font-size: 24px; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--fg); cursor: pointer; font-family: inherit; font-variant-numeric: tabular-nums; /* A cashier taps these hundreds of times an hour; a text selection dragged out of a digit key is pure nuisance. */ user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background 80ms, transform 60ms; } .pos-pad-key:active { background: var(--bg-hover); transform: scale(0.97); } .pos-pad-fn { font-size: 15px; font-weight: 600; color: var(--fg-secondary); } .pos-pad-enter { grid-column: 1 / -1; background: var(--brand); color: var(--brand-fg); border-color: var(--brand); font-size: 17px; } @media (max-width: 640px) { .pos-pad { max-width: none; } } /* ========================================================================= THE WHATSAPP INBOX Two panes, each scrolling inside itself, which is how every messenger on earth behaves. Before this the contact list grew the page: reading a thread meant scrolling past two hundred contacts to reach it, and the conversation moved under you while you did. ========================================================================= */ .wa-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: stretch; } /* One height for both panes, from the viewport rather than a guess: the topbar, the page header and a little breathing room. `min-height` keeps it usable on a short laptop window where the arithmetic would otherwise go negative. */ /* ⚠ `overflow: hidden` makes this a scroll container even though it never scrolls, so it must declare where a sticky table header pins. The audit caught this one the moment it was written, which is the whole point of it. */ .wa-pane { height: calc(100vh - 260px); min-height: 380px; display: flex; flex-direction: column; overflow: hidden; --table-sticky-top: 0px; } /* ⚠ Both of these are SCROLL CONTAINERS, so both must say where a sticky table header pins — see the --table-sticky-top block above. Neither holds a table today; the rule is applied anyway, because "it does not need it yet" is how the guest list came to render underneath its own header. */ .wa-scroll { flex: 1; min-height: 0; overflow-y: auto; --table-sticky-top: 0px; } .wa-thread-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; --table-sticky-top: 0px; } .wa-row:hover { background: var(--bg-hover) !important; } /* The unread count. Deliberately the same green WhatsApp uses, because this is the one piece of the screen a user reads without looking at it. */ .wa-pip { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--success); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; } @media (max-width: 900px) { /* One column on a phone: 320px of contacts beside a conversation leaves room for neither. The panes stack and take their own height back. */ .wa-grid { grid-template-columns: 1fr; } .wa-pane { height: auto; max-height: 60vh; } } /* ========================================================================= THE MESSENGER DOCK Comms, from anywhere. Fixed to the bottom-right, above everything except a dialog — a message is an interruption you choose to take, so it must never sit on top of one you did not. ========================================================================= */ .cdock { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } @media (max-width: 640px) { .cdock { right: 12px; bottom: 12px; left: 12px; align-items: stretch; } } .cdock-launch { position: relative; width: 52px; height: 52px; align-self: flex-end; border: 0; border-radius: 50%; cursor: pointer; background: var(--brand); color: var(--brand-fg); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; transition: transform 120ms; } .cdock-launch:hover { transform: translateY(-1px); } .cdock-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--bg); } .cdock-panel { width: 360px; max-width: calc(100vw - 24px); /* Tall enough to read a conversation, short enough to leave the work behind it visible — the dock is for a quick exchange, and #/comms is where a long thread belongs. */ height: min(520px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* "…is typing". A strip between the messages and the composer, so it never covers either and never shifts the thread when it appears. */ .cdock-typing { display: flex; align-items: center; gap: 7px; padding: 4px 14px 6px; font-size: 12px; color: var(--fg-muted); } .cdock-dots { display: inline-flex; gap: 3px; } .cdock-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-subtle); animation: cdock-blink 1.2s infinite ease-in-out; } .cdock-dots i:nth-child(2) { animation-delay: .18s; } .cdock-dots i:nth-child(3) { animation-delay: .36s; } @keyframes cdock-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } /* Somebody who has asked for less movement gets the words and not the dots. */ @media (prefers-reduced-motion: reduce) { .cdock-dots i { animation: none; opacity: .5; } } .cdock-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); } .cdock-icon, .cdock-back { border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--fg-muted); display: flex; } .cdock-icon:hover, .cdock-back:hover { background: var(--bg-subtle); color: var(--fg); } .cdock-body { flex: 1; overflow-y: auto; } .cdock-search { padding: 10px 12px 4px; } .cdock-row { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: none; cursor: pointer; font: inherit; border-bottom: 1px solid var(--border-soft); } .cdock-row:hover { background: var(--bg-subtle); } .cdock-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cdock-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .cdock-row-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cdock-row-time { font-size: 11px; color: var(--fg-subtle); flex: none; } .cdock-row-last { font-size: 12px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cdock-pip { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: var(--brand-fg); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .cdock-empty { padding: 28px 20px; text-align: center; color: var(--fg-muted); font-size: 13px; } .cdock-empty p { margin: 0 0 8px; } .cdock-msg { padding: 6px 14px; } .cdock-msg-who { font-size: 11px; color: var(--fg-subtle); margin-bottom: 2px; } .cdock-bubble { display: inline-block; padding: 8px 11px; border-radius: 12px; background: var(--bg-subtle); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; max-width: 88%; } /* Mine sit right and carry the brand, so a glance says who said what without reading a single name. */ .cdock-msg.is-mine { text-align: right; } .cdock-msg.is-mine .cdock-bubble { background: var(--brand); color: var(--brand-fg); text-align: left; } .cdock-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-soft); } .cdock-compose .input { flex: 1; } /* ========================================================================= AVATAR ========================================================================= */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-subtle); color: var(--fg-secondary); font-size: 11px; font-weight: 600; text-transform: uppercase; border: 1px solid var(--border-soft); overflow: hidden; flex-shrink: 0; } .avatar-sm { width: 24px; height: 24px; font-size: 10px; } .avatar-lg { width: 48px; height: 48px; font-size: 15px; } .avatar-xl { width: 64px; height: 64px; font-size: 20px; } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================= APP SHELL ========================================================================= */ #app { min-height: 100vh; background: var(--bg-cream); } .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } /* Sidebar */ .sidebar { background: var(--bg); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; } .sidebar-header { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; height: var(--topbar-h); position: relative; /* anchors the org-switcher dropdown (position:absolute) */ } .org-switcher { transition: background 120ms; } .org-switcher:hover { background: var(--bg-subtle); } /* The active branch sits directly under the organisation, because it is the same question one level down: which company, then which shop. Deliberately lighter than the org row — a branch is a scope inside an org, not a peer of it — and it carries its own position:relative so its menu anchors to itself rather than to the org header above. */ .branch-switcher { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; position: relative; transition: background 120ms; } .branch-switcher:hover { background: var(--bg-subtle); } .branch-icon { color: var(--fg-muted); display: flex; flex-shrink: 0; } .branch-name { font-size: 13px; font-weight: 500; min-width: 0; } .sidebar-logo { width: 28px; height: 28px; border-radius: 7px; background: var(--brand); color: var(--brand-fg); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 17px; overflow: hidden; } .sidebar-logo img { width: 100%; height: 100%; object-fit: cover; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 8px; } .nav-section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle); padding: 12px 10px 6px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--fg-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 100ms, color 100ms; margin-bottom: 1px; } .nav-item:hover { background: var(--bg-subtle); color: var(--fg); } /* ------------------------------------------------------------------------- SIDEBAR GROUPS HR and Finance are PARENTS, not links — each holds most of a module behind it, and a sub-module you have to know is there is a sub-module nobody opens. Every parent folds shut so the ones a person actually uses can all be on screen at once. ------------------------------------------------------------------------- */ .nav-group { margin-bottom: 2px; } .nav-parent { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: var(--radius-sm); color: var(--fg-secondary); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background 100ms, color 100ms; } .nav-parent:hover { background: var(--bg-subtle); color: var(--fg); } .nav-caret { display: flex; color: var(--fg-subtle); transform: rotate(90deg); transition: transform 140ms; } .nav-group.is-shut .nav-caret { transform: rotate(0deg); } /* The children. `grid-template-rows: 0fr → 1fr` animates a list whose height nobody can know in advance — a max-height guess is either a clipped group or a slow, empty-looking close. ⚠ IT NEEDS EXACTLY ONE CHILD. With the items as direct children, each becomes its own grid ROW and `0fr` collapses only the first of them — Pharmacy's thirteen entries stayed fully visible with the caret pointing shut. The inner wrapper is what makes the whole list one row. Seen in a render. */ .nav-children { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 160ms ease; } .nav-children > .nav-children-in { overflow: hidden; min-height: 0; } .nav-group.is-shut .nav-children { grid-template-rows: 0fr; } /* Indented, and quieter than its parent: a child is a destination, the parent is a heading you can fold. The rule down the left is what makes eight items read as one group rather than eight more entries in a long list. */ .nav-child { margin-left: 17px; padding-left: 13px; border-left: 1px solid var(--border-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-weight: 450; } .nav-child .nav-icon { width: 14px; height: 14px; } .nav-child.active { border-left-color: var(--fg); } .nav-item.active { background: var(--fg); color: var(--bg); } .nav-item.active .nav-icon { color: var(--bg); } .nav-icon { color: var(--fg-muted); width: 16px; height: 16px; } /* Unread counter on a nav item (WhatsApp, Mail). Pushed to the right edge by margin-left:auto so it sits flush regardless of how long the label is, and inverted on the active row where the background is the foreground colour. */ .nav-count { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--brand); color: var(--brand-fg); font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; } .nav-item.active .nav-count { background: var(--bg); color: var(--fg); } .nav-item.active .nav-icon { color: var(--bg); } .nav-item .nav-badge { margin-left: auto; font-size: 10px; padding: 1px 6px; background: var(--bg-subtle); border-radius: 999px; color: var(--fg-muted); } .sidebar-footer { padding: 12px; border-top: 1px solid var(--border-soft); } .user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius); cursor: pointer; transition: background 100ms; } .user-chip:hover { background: var(--bg-subtle); } /* Main */ .main { display: flex; flex-direction: column; min-width: 0; width: 100%; } .topbar { height: var(--topbar-h); background: var(--bg); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 16px; padding: 0 20px; position: sticky; top: 0; z-index: 10; } .topbar-title { font-size: 14px; font-weight: 600; color: var(--fg); } .topbar-search { flex: 1; max-width: 480px; position: relative; } .topbar-search .input { padding-left: 34px; background: var(--bg-cream); border-color: transparent; } .topbar-search .input:focus { background: var(--bg); border-color: var(--border); } .page { padding: 28px 32px 64px; max-width: 1280px; width: 100%; margin: 0 auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; } /* Both `

` and `
` are in use across the app. h1–h5 are margin-reset above, so those two already render identically — but `

` was NOT: it kept the browser's 1em bottom margin, making every header written with a

sit 13px taller than one written with a

. Pinning all four sides here means the markup variant can no longer show through. */ .page-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 0; } .page-subtitle { color: var(--fg-muted); font-size: 13px; margin: 3px 0 0; } /* ========================================================================= AUTH (login/signup) ========================================================================= */ .auth-layout { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); } .auth-panel { display: flex; flex-direction: column; padding: 32px 48px; max-width: 560px; margin: 0 auto; width: 100%; justify-content: center; } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; position: absolute; top: 28px; left: 48px; } .auth-brand-mark { width: 32px; height: 32px; background: var(--fg); color: var(--bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 19px; } .auth-brand-name { font-family: var(--font-display); font-size: 22px; font-style: italic; } .auth-heading { font-size: 36px; letter-spacing: -0.03em; font-weight: 500; margin-bottom: 8px; line-height: 1.1; } .auth-heading .serif { font-style: italic; font-weight: 400; } .auth-sub { color: var(--fg-muted); font-size: 14px; margin-bottom: 32px; } .auth-hero { background: var(--bg-cream); display: flex; flex-direction: column; justify-content: center; padding: 48px; position: relative; overflow: hidden; } .auth-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(180, 160, 120, 0.08), transparent 40%), radial-gradient(circle at 80% 70%, rgba(120, 140, 110, 0.08), transparent 40%); } .auth-hero-quote { font-family: var(--font-display); font-size: 38px; line-height: 1.15; letter-spacing: -0.02em; max-width: 440px; position: relative; } .auth-hero-quote em { font-style: italic; } .auth-hero-attribution { color: var(--fg-muted); font-size: 13px; margin-top: 24px; position: relative; } /* ========================================================================= MODAL / DRAWER ========================================================================= */ .overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.35); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; animation: fadeIn 160ms forwards; } @keyframes fadeIn { to { opacity: 1; } } .modal { background: var(--bg); border-radius: var(--radius-lg); max-width: 520px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); transform: translateY(8px); animation: slideUp 180ms forwards; } @keyframes slideUp { to { transform: translateY(0); } } .modal-header { padding: 18px 20px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 16px; font-weight: 600; } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .modal-footer { padding: 14px 20px; border-top: 1px solid var(--border-soft); display: flex; gap: 8px; justify-content: flex-end; } .modal-close { color: var(--fg-muted); padding: 4px; border-radius: 6px; } .modal-close:hover { background: var(--bg-subtle); color: var(--fg); } /* Construction 3-phase stepper */ .con-stepper { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; } .con-step { display: flex; align-items: center; gap: 8px; } .con-step-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--bg-subtle); color: var(--fg-muted); border: 1px solid var(--border-soft); flex: none; } .con-step-label { font-size: 13px; color: var(--fg-muted); font-weight: 500; } .con-step.current .con-step-dot { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); } .con-step.current .con-step-label { color: var(--fg); } .con-step.done .con-step-dot { background: var(--success, #15803d); color: #fff; border-color: transparent; } .con-step.done .con-step-label { color: var(--fg-secondary); } .con-step-bar { flex: 1 1 32px; min-width: 24px; height: 2px; background: var(--border-soft); border-radius: 2px; } .con-step-bar.done { background: var(--success, #15803d); } @media (max-width: 640px) { .con-step-label { display: none; } .con-step-bar { min-width: 16px; } } /* Bill of Quantities (construction) */ .boq-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); background: var(--bg-subtle); } .boq-typechips { display: flex; gap: 10px; flex-wrap: wrap; } .boq-typechip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg); } .boq-typechip > span { font-size: 16px; } /* Construction schedule filter bar (Program of Works) */ .con-sched-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* Unsaved-draft restore banner (dialog auto-save) */ .draft-restore-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 12px; background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--radius); } .draft-restore-text { font-size: 13px; color: var(--warning); font-weight: 500; } /* Drawer (right-side slide-in) */ /* A dialog that has to show a form and what it produces side by side. The only user today is the receipt editor: 520px cannot hold a settings column and a sheet of 80mm paper beside it, and a preview below the fold is a preview nobody looks at. ⚠ No `overflow` of its own — `.modal` already sets one and already declares --table-sticky-top; a second scroll container here is exactly what the sticky-header audit would (rightly) fail. */ .modal-wide { max-width: 980px; } /* The editor itself: settings left, paper right, stacking on a narrow screen. */ .rt-receipt-edit { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; } .rt-receipt-preview { position: sticky; top: 0; } .rt-receipt-preview iframe { /* White, bordered and the width of real paper — it should look like the thing that comes out of the printer, not like another form field. */ width: 100%; height: 460px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; } @media (max-width: 860px) { .rt-receipt-edit { grid-template-columns: 1fr; } .rt-receipt-preview { position: static; } } .drawer { background: var(--bg); width: 560px; max-width: 95vw; height: 100vh; margin-left: auto; margin-right: 0; display: flex; flex-direction: column; transform: translateX(100%); animation: slideLeft 200ms forwards; border-left: 1px solid var(--border); } @keyframes slideLeft { to { transform: translateX(0); } } .overlay.drawer-overlay { padding: 0; justify-content: flex-end; } .drawer .modal-body { flex: 1; } /* ========================================================================= DROPDOWN ========================================================================= */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 200px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; z-index: 50; animation: fadeIn 100ms; } .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--fg-secondary); cursor: pointer; width: 100%; text-align: left; } .dropdown-item:hover { background: var(--bg-subtle); color: var(--fg); } .dropdown-divider { height: 1px; background: var(--border-soft); margin: 4px 0; } /* ------------------------------------------------------------------------- COMBOBOX (comboboxHtml / wireCombobox in core/ui.js) Closed, the menu is just a hidden box in the form. OPEN, wireCombobox moves the node to and positions it against the input — because in flow it pushed the fields below it down (a grid cell grew and took the whole row with it), and absolute or fixed inside the dialog is clipped by .modal-body's scroll and by the transform on .modal. Only leaving the dialog escapes both. JS owns left/top/width/max-height; this owns everything else. ------------------------------------------------------------------------- */ .combo { position: relative; } .combo-menu { position: static; right: auto; min-width: 0; width: 100%; max-height: 232px; overflow-y: auto; margin-top: 4px; animation: none; } .combo-menu.is-floating { position: fixed; margin-top: 0; /* ⚠ .dropdown-menu sets `top: calc(100% + 4px)` and `right: 0`. Left standing, a flip-up menu would have BOTH top and bottom set — which does not move it, it SIZES it, to whatever is left between them: a 10px sliver with eight items inside. Measured, in scripts/combobox-money-test.mjs. JS sets exactly one of top/bottom, so both must start from auto. */ top: auto; right: auto; /* Above the dialog layer (100) and the confirm-on-top-of-a-dialog layer (150, 200). A menu that opens behind the thing it belongs to is worse than one that pushes. */ z-index: 300; } .combo-item { justify-content: flex-start; } .combo-item.active { background: var(--bg-subtle); color: var(--fg); } .combo-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combo-item-meta { margin-left: auto; flex: none; padding-left: 10px; color: var(--fg-muted); font-size: 12px; } .combo-empty { cursor: default; color: var(--fg-muted); } .combo-empty:hover { background: transparent; color: var(--fg-muted); } /* ========================================================================= TOAST ========================================================================= */ #toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg); pointer-events: auto; animation: toastIn 180ms; max-width: 360px; display: flex; align-items: center; gap: 8px; } @keyframes toastIn { from { transform: translateX(20px); opacity: 0; } } .toast-success { background: var(--success); } .toast-danger { background: var(--danger); } /* ========================================================================= EMPTY STATE ========================================================================= */ .empty { padding: 48px 24px; text-align: center; color: var(--fg-muted); } .empty-icon { width: 48px; height: 48px; margin: 0 auto 16px; background: var(--bg-subtle); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--fg-subtle); } .empty-title { color: var(--fg); font-weight: 500; margin-bottom: 4px; } /* ========================================================================= SPINNER ========================================================================= */ .spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--fg); border-radius: 50%; animation: spin 700ms linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .spinner-lg { width: 28px; height: 28px; border-width: 3px; } .spinner-sm { width: 12px; height: 12px; border-width: 2px; } .loading-center { display: flex; align-items: center; justify-content: center; padding: 60px; } /* Loading placeholder. Callers give it an inline height and nothing else, so the background and the shimmer have to live here — without them the eleven `
` in the app are blank space. */ .skeleton { background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--border-soft) 50%, var(--bg-subtle) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius); width: 100%; } @keyframes skeleton-shimmer { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: var(--bg-subtle); } } /* ========================================================================= TABS ========================================================================= */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-soft); margin-bottom: 20px; } /* On narrow screens the tab strip scrolls horizontally instead of bleeding off the edge (which html overflow-x:clip would otherwise cut off unreachably). */ @media (max-width: 720px) { .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; --table-sticky-top: 0px; } .tabs::-webkit-scrollbar { display: none; } .tab { white-space: nowrap; flex: 0 0 auto; } } /* Module name is shown by the page

; the topbar copy was a duplicate. */ .topbar-title { display: none; } /* Collapsible filter panel (employee directory). Desktop: filters sit inline in the toolbar. Mobile: they collapse behind a "Filters" button and drop down as a stacked panel so they never push the table off-screen. */ @media (min-width: 721px) { .filter-collapse { display: contents; } .filter-toggle { display: none !important; } } @media (max-width: 720px) { .filter-collapse { display: none; width: 100%; } .filter-collapse.open { display: flex; flex-direction: column; gap: 10px; width: 100%; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; margin-top: 2px; } .filter-collapse.open .select { max-width: none !important; width: 100%; } .filter-toggle { display: inline-flex; } } .tab { padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--fg-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 100ms, border-color 100ms; } .tab:hover { color: var(--fg); } .tab.active { color: var(--fg); border-bottom-color: var(--fg); } /* Most tabs are . Mail's folders are