/* ============================================================================ Easy — application shell & design tokens ---------------------------------------------------------------------------- Palette is Project Five's, taken from the real logo files in /branding (see docs/PROJECT-ROADMAP.md §1.1): --brand-red #CE152C sampled from the logo — primary / committing actions --brand-slate #596475 sampled from the logo — secondary text, muted chrome DELIBERATE DEVIATION: the dark app chrome (sidebar, wizard bar) uses charcoal #14181D, not the brand slate. Charcoal reads better as a dark UI surface than the lighter slate, and it matches the published wireframes. This is a recorded design choice, not drift — revisit only if the brand system later mandates the exact slate everywhere. The wireframes' accent #E5342A is superseded here by the exact logo red #CE152C. LIGHT AND DARK (owner decision 2026-09-29: dark mode is supported on every page). A colour is written once, as a token here; every rule below uses var(--token), so a theme is nothing but a second set of values. `ThemeColourGuardTests` fails on a colour literal anywhere else. The dark set is built from the same brand: the charcoal chrome becomes the page, the logo red stays the committing fill (white on it is 5.6:1) and a lighter red carries red TEXT, which the logo red cannot on charcoal. Documents stay paper-white in both (they are printed): see the --paper tokens. Which theme applies: the person's choice (Profile → Appearance, a cookie read by App.razor into ), else the operating system. So the dark values sit in two blocks with the same body, one per route in; `ThemeColourGuardTests` keeps them identical. Change a dark value? Change it in both. ========================================================================== */ :root { color-scheme: light; --brand-red: #CE152C; /* red TEXT and marks: links, active tabs, focus outlines */ --brand-red-hover: #AE1125; --brand-red-wash: rgba(206, 21, 44, 0.10); --brand-red-soft: rgba(206, 21, 44, 0.12); /* the 3px "picked" halo round a chosen card */ --brand-red-line: rgba(206, 21, 44, 0.24); /* a red hairline: danger badges, a hovered card */ --brand-fill: #CE152C; /* red FILL behind white text: the primary button, badges, steps */ --brand-fill-hover: #AE1125; --on-fill: #FFFFFF; /* text on any saturated fill (red, green, the charcoal chrome) */ --brand-slate: #596475; --focus-ring: rgba(206, 21, 44, 0.14); --chrome-dark: #14181D; /* wizard top bar (see note above) */ --chrome-dark-muted: #8A8F98; --chrome-dark-faint: #4A4E55; /* "Inverted" marks — a finished step, the chosen pill: charcoal on the light page, near-white on the dark one. */ --inverse-bg: #14181D; --inverse-ink: #FFFFFF; /* Left rail. Light values here; the dark theme below gives it the charcoal chrome. */ --sidebar-bg: var(--surface); --sidebar-border: var(--line); --sidebar-ink: var(--ink); /* active label / icon */ --sidebar-ink-muted: var(--ink-soft); /* resting label / icon */ --sidebar-hover-bg: var(--surface-sunk); --sidebar-hover-ink: var(--ink); --sidebar-active-ink: var(--brand-red); --sidebar-active-bg: var(--brand-red-wash); --sidebar-control-border: var(--line-strong); --ink: #1A1A1A; --ink-soft: #57595F; /* was #6B6B68 — one step darker so it stays clearly stronger than --ink-faint below */ /* Secondary text. Was #8A8F98 (3.1–3.25:1 on the white/off-white surfaces, under the 4.5:1 AA minimum for small text); #626977 clears it everywhere it is used — 5.4:1 on white, 5.1:1 on --surface-sunk and still 4.6:1 on the pink/green selected-row washes — and stays a step lighter than --ink. */ --ink-faint: #626977; --ink-ghost: #C8C8C6; /* the em dash standing in for a zero: deliberately quiet */ --ink-placeholder: #A1A5AA; --surface: #FFFFFF; --surface-sunk: #FAFAFA; --surface-raised: #FFFFFF; /* menus, popovers, dialogs: one step above a card in the dark theme */ --line: #E2E2E0; --line-soft: #F0F0EE; --line-strong: #D8D8D6; --line-hover: #BFC3C7; --hover-tint: rgba(20, 24, 29, 0.04); --scrim: rgba(20, 24, 29, 0.42); --toggle-knob: #FFFFFF; /* The dropdown caret, drawn in --ink-soft's family. A data URI cannot read a custom property, so each theme has its own. */ --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%236B6B68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ok: #1A8A5A; --ok-hover: #166B47; /* the green fill, hovered (white on it 6.5:1) */ --ok-ink: #166B47; --ok-wash: rgba(26, 138, 90, 0.10); --ok-line: rgba(26, 138, 90, 0.25); --warn: #8F6200; --warn-ink: #8F6200; --warn-wash: #FFF6E6; --warn-wash-hover: #FCEFD4; --warn-line: #F0DCA8; --warn-tint: rgba(154, 106, 0, 0.12); --danger-ink: #A31221; --danger-wash: rgba(206, 21, 44, 0.09); --danger-line: rgba(206, 21, 44, 0.22); --info-ink: #4B5668; --info-wash: rgba(89, 100, 117, 0.10); --info-line: rgba(89, 100, 117, 0.22); /* Top-of-page ribbons (support session, read-only, trial, two-factor): white on a dark band in both themes. */ --ribbon-bg: #14181F; --ribbon-warn: #8A5F00; --ribbon-info: #1F4E79; --ribbon-ink: #FFFFFF; --ribbon-line: rgba(255, 255, 255, 0.10); --ribbon-tag: rgba(255, 255, 255, 0.16); /* Paper: a document preview, a document-layout thumbnail. Printed things stay white in both themes. */ --paper: #FFFFFF; --paper-line: #CFD3DA; --paper-sunk: #F4F5F7; --paper-ink: #C3C9D1; --paper-rule: #E4E7EB; /* Chart marks. History is a mid grey that clears 3:1 on white and on the off-white page (3.4 / 3.2); "now" is ink. One pair, used by the sparklines and the financial-year strip, so "past grey, now black" means one thing. */ --chart-past: #858C99; --chart-now: var(--ink); /* Budget vs actual: two categorical hues (blue actual, orange budget), validated as a pair for colour-vision deficiency (worst ΔE 24.7) and ≥ 3:1 on white. Deliberately not the brand red, which reads as "loss". */ --chart-actual: #2A78D6; --chart-actual-soft: #A9C8EF; --chart-budget: #EB6834; --chart-hover: rgba(42, 120, 214, 0.06); /* Categorical series for the payroll analytics charts and the leave-type cards, in a fixed order. */ --series-1: #CE152C; --series-2: #2563EB; --series-3: #D97706; --series-3-ink: #B45309; --series-4: #1A8A5A; --series-5: #596475; --series-6: #7C3AED; --radius: 8px; --radius-sm: 7px; --radius-lg: 10px; --font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --type-page-title: 24px; --type-section-title: 16px; /* Primary reading and interaction text shares one size across navigation, forms and registers. */ --type-body: 14px; --type-label: 13px; --type-helper: 13px; --type-table: 14px; --type-table-head: 12px; --leading-body: 1.48; --leading-data: 1.4; --control-height: 38px; --control-height-sm: 30px; /* compact controls: buttons and inputs inside table rows */ --shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.12); } /* ── Dark theme ──────────────────────────────────────────────────────────────── Charcoal, not grey: the page is a step below the brand's #14181D chrome, cards a step above it, menus and dialogs one more. Hairlines carry the structure the light theme gives to shadows. Contrast (ThemeContrastTests): body ink 14.2:1 on a card, --ink-soft 8.7:1, --ink-faint 6.4:1, red text 5.5:1, white on the red fill 5.6:1. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --brand-red: #F4606E; --brand-red-hover: #FF8591; --brand-red-wash: rgba(244, 96, 110, 0.12); --brand-red-soft: rgba(244, 96, 110, 0.22); --brand-red-line: rgba(244, 96, 110, 0.42); --brand-fill: #CE152C; --brand-fill-hover: #B5122A; --on-fill: #FFFFFF; --brand-slate: #93A0B3; --focus-ring: rgba(244, 96, 110, 0.30); --chrome-dark: #0B0D10; --chrome-dark-muted: #9AA1AB; --chrome-dark-faint: #4A4E55; --inverse-bg: #E6E9ED; --inverse-ink: #14181D; --sidebar-bg: #14181D; --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-ink: #FFFFFF; --sidebar-ink-muted: #C7CBD1; --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-hover-ink: #FFFFFF; --sidebar-active-ink: #FF8791; --sidebar-active-bg: rgba(255, 135, 145, 0.14); --sidebar-control-border: rgba(255, 255, 255, 0.16); --ink: #E8EAED; --ink-soft: #B3BAC4; --ink-faint: #979FAB; --ink-ghost: #4E555F; --ink-placeholder: #6E7682; --surface: #181C22; --surface-sunk: #101317; --surface-raised: #1F242B; --line: #2C323B; --line-soft: #232830; --line-strong: #3A424C; --line-hover: #525B67; --hover-tint: rgba(255, 255, 255, 0.04); --scrim: rgba(4, 6, 8, 0.66); --toggle-knob: #FFFFFF; --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23A3AAB5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ok: #1A8A5A; --ok-hover: #157A50; --ok-ink: #5FD39A; --ok-wash: rgba(95, 211, 154, 0.12); --ok-line: rgba(95, 211, 154, 0.30); --warn: #F2B84B; --warn-ink: #F2B84B; --warn-wash: #2A2415; --warn-wash-hover: #342C18; --warn-line: #5C4A22; --warn-tint: rgba(242, 184, 75, 0.16); --danger-ink: #FF7A86; --danger-wash: rgba(255, 122, 134, 0.12); --danger-line: rgba(255, 122, 134, 0.36); --info-ink: #AEB8C8; --info-wash: rgba(174, 184, 200, 0.10); --info-line: rgba(174, 184, 200, 0.24); --ribbon-bg: #0B0D10; --ribbon-warn: #7A5300; --ribbon-info: #1F4E79; --ribbon-ink: #FFFFFF; --ribbon-line: rgba(255, 255, 255, 0.10); --ribbon-tag: rgba(255, 255, 255, 0.16); --paper: #FFFFFF; --paper-line: #CFD3DA; --paper-sunk: #F4F5F7; --paper-ink: #C3C9D1; --paper-rule: #E4E7EB; --chart-past: #6B7380; --chart-now: var(--ink); --chart-actual: #5C9EEB; --chart-actual-soft: #2B4868; --chart-budget: #F08050; --chart-hover: rgba(92, 158, 235, 0.10); --series-1: #F4606E; --series-2: #6EA8FF; --series-3: #F0A040; --series-3-ink: #F0A040; --series-4: #4CC38A; --series-5: #93A0B3; --series-6: #A98BFA; --shadow-drawer: -8px 0 28px rgba(0, 0, 0, 0.45); } } :root[data-theme="dark"] { color-scheme: dark; --brand-red: #F4606E; --brand-red-hover: #FF8591; --brand-red-wash: rgba(244, 96, 110, 0.12); --brand-red-soft: rgba(244, 96, 110, 0.22); --brand-red-line: rgba(244, 96, 110, 0.42); --brand-fill: #CE152C; --brand-fill-hover: #B5122A; --on-fill: #FFFFFF; --brand-slate: #93A0B3; --focus-ring: rgba(244, 96, 110, 0.30); --chrome-dark: #0B0D10; --chrome-dark-muted: #9AA1AB; --chrome-dark-faint: #4A4E55; --inverse-bg: #E6E9ED; --inverse-ink: #14181D; --sidebar-bg: #14181D; --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-ink: #FFFFFF; --sidebar-ink-muted: #C7CBD1; --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-hover-ink: #FFFFFF; --sidebar-active-ink: #FF8791; --sidebar-active-bg: rgba(255, 135, 145, 0.14); --sidebar-control-border: rgba(255, 255, 255, 0.16); --ink: #E8EAED; --ink-soft: #B3BAC4; --ink-faint: #979FAB; --ink-ghost: #4E555F; --ink-placeholder: #6E7682; --surface: #181C22; --surface-sunk: #101317; --surface-raised: #1F242B; --line: #2C323B; --line-soft: #232830; --line-strong: #3A424C; --line-hover: #525B67; --hover-tint: rgba(255, 255, 255, 0.04); --scrim: rgba(4, 6, 8, 0.66); --toggle-knob: #FFFFFF; --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23A3AAB5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ok: #1A8A5A; --ok-hover: #157A50; --ok-ink: #5FD39A; --ok-wash: rgba(95, 211, 154, 0.12); --ok-line: rgba(95, 211, 154, 0.30); --warn: #F2B84B; --warn-ink: #F2B84B; --warn-wash: #2A2415; --warn-wash-hover: #342C18; --warn-line: #5C4A22; --warn-tint: rgba(242, 184, 75, 0.16); --danger-ink: #FF7A86; --danger-wash: rgba(255, 122, 134, 0.12); --danger-line: rgba(255, 122, 134, 0.36); --info-ink: #AEB8C8; --info-wash: rgba(174, 184, 200, 0.10); --info-line: rgba(174, 184, 200, 0.24); --ribbon-bg: #0B0D10; --ribbon-warn: #7A5300; --ribbon-info: #1F4E79; --ribbon-ink: #FFFFFF; --ribbon-line: rgba(255, 255, 255, 0.10); --ribbon-tag: rgba(255, 255, 255, 0.16); --paper: #FFFFFF; --paper-line: #CFD3DA; --paper-sunk: #F4F5F7; --paper-ink: #C3C9D1; --paper-rule: #E4E7EB; --chart-past: #6B7380; --chart-now: var(--ink); --chart-actual: #5C9EEB; --chart-actual-soft: #2B4868; --chart-budget: #F08050; --chart-hover: rgba(92, 158, 235, 0.10); --series-1: #F4606E; --series-2: #6EA8FF; --series-3: #F0A040; --series-3-ink: #F0A040; --series-4: #4CC38A; --series-5: #93A0B3; --series-6: #A98BFA; --shadow-drawer: -8px 0 28px rgba(0, 0, 0, 0.45); } /* A logo drawn for one background: the page carries both and the other theme's is hidden (AuthBrand.razor). These only ever hide, so the element keeps whatever display its own rule gives it. */ :root[data-theme="light"] .theme-dark-only, :root[data-theme="dark"] .theme-light-only { display: none !important; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-dark-only { display: none !important; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-light-only { display: none !important; } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--surface-sunk); font-size: 14px; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } a { color: var(--brand-red); text-decoration: none; } a:hover { color: var(--brand-red-hover); } /* One visible keyboard focus ring for anything that does not draw its own (UI-22): the browser default is thin and blue-grey on the charcoal chrome. Components with their own focus look set it more specifically. */ :focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; } /* A link inside running text is underlined, so it is not told apart by colour alone (WCAG 1.4.1, UI-22); a link that stands on its own (a button, a nav item, a "Guide →" line) keeps the plain look. */ p a:not(.btn):not(.badge):not(.filter-chip), span > a.help-link, .invoice-audit-meta a, .record-audit-meta a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } h1, h2, h3 { font-weight: 700; margin: 0; } /* ── App shell ─────────────────────────────────────────────────────────────── */ /* 100dvh tracks the collapsing mobile address bar; 100vh is the pre-dvh fallback and is deliberately first so the later declaration wins wherever dvh is understood. */ .app-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; } /* Installed-PWA mode draws under the notch / home indicator; the shell chrome takes the insets as extra padding (see .app-topbar below and .app-nav in the drawer block). */ /* ── Navigation tree ──────────────────────────────────────────────────────── */ .app-nav { width: 232px; flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; padding: 12px 10px; gap: 3px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .app-nav-spacer { flex: 1; min-height: 12px; } /* ── Narrow-viewport navigation drawer ──────────────────────────────────────── Below 900px the 232px rail would leave ~143px of content at 375px, so it slides in over the page instead. Above the breakpoint the toggle and backdrop never render and the rail is docked exactly as before. This block must stay *after* the base .app-nav rule above: both selectors have equal specificity, so the media query only wins by coming later in the cascade. */ .nav-drawer-toggle { display: none; } .nav-drawer-backdrop { display: none; } @media (max-width: 900px) { .nav-drawer-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; margin-right: 4px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; } .nav-drawer-toggle:hover { background: var(--surface-sunk); color: var(--ink); } .nav-drawer-toggle:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; } .app-nav { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(280px, 86vw); transform: translateX(-100%); transition: transform 160ms ease; box-shadow: 0 0 0 1px var(--sidebar-border); /* Installed-PWA safe areas, now that the rail is no longer a flex child. */ padding-bottom: calc(12px + env(safe-area-inset-bottom)); padding-left: calc(10px + env(safe-area-inset-left)); } .app-shell.nav-drawer-open .app-nav { transform: translateX(0); } .nav-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: var(--scrim); touch-action: none; } } @media (prefers-reduced-motion: reduce) { .app-nav { transition: none; } } .app-nav-group { display: flex; flex-direction: column; } .app-nav-row { display: flex; align-items: center; border-radius: var(--radius); color: var(--sidebar-ink-muted); transition: background .16s ease, color .16s ease, box-shadow .16s ease; } .app-nav-row:hover { background: var(--sidebar-hover-bg); box-shadow: 0 1px 2px rgba(26, 26, 26, 0.025); } .app-nav-row.active { background: var(--sidebar-active-bg); } .app-nav-row.active .app-nav-label, .app-nav-row.active .app-nav-ic { color: var(--sidebar-active-ink); } .app-nav-group.current > .app-nav-row { box-shadow: inset 2px 0 0 var(--brand-red); } .app-nav-group.current > .app-nav-row .app-nav-ic { color: var(--sidebar-active-ink); } .app-nav-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 9px 8px; color: inherit; text-decoration: none; font-size: var(--type-body); font-weight: 600; line-height: 1.35; } .app-nav-link:hover { color: var(--sidebar-hover-ink); } .app-nav-ic { display: flex; flex-shrink: 0; color: var(--sidebar-ink-muted); } .app-nav-ic svg { width: 20px; height: 20px; } .app-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "Lite" marker on the Payroll rail entry while full Payroll isn't entitled. */ .app-nav-pill { flex-shrink: 0; margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 5px; border-radius: 999px; /* The text keeps full strength (opacity .7 dropped it to 3.4:1); only the outline is softened. */ color: var(--sidebar-ink-muted); border: 1px solid color-mix(in srgb, currentColor 55%, transparent); } .app-nav-chevron { flex-shrink: 0; width: 26px; height: 30px; margin-right: 2px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; color: var(--sidebar-ink-muted); border-radius: 7px; transition: transform .18s cubic-bezier(.2, .8, .2, 1), color .16s ease, background .16s ease; } .app-nav-chevron:hover { color: var(--sidebar-hover-ink); background: var(--sidebar-hover-bg); } .app-nav-chevron.open { transform: rotate(180deg); } /* Subtree open/close — animate the row track from 0fr→1fr so it slides, with the content fading in. The inner wrapper clips during the slide. */ .app-nav-sub { display: grid; grid-template-rows: 0fr; margin-bottom: 0; will-change: grid-template-rows; transition: grid-template-rows .2s cubic-bezier(.2, .8, .2, 1), margin-bottom .2s cubic-bezier(.2, .8, .2, 1); } .app-nav-sub.open { grid-template-rows: 1fr; margin-bottom: 6px; } .app-nav-sub-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding-left: 31px; opacity: 0; transition: opacity .14s ease; } .app-nav-sub.open .app-nav-sub-inner { opacity: 1; transition-delay: .04s; } .app-nav-subitem { padding: 7px 9px; font-size: var(--type-body); font-weight: 550; line-height: 1.4; color: var(--sidebar-ink-muted); text-decoration: none; border-radius: 7px; border-left: 2px solid transparent; transition: background .12s ease, color .12s ease; } .app-nav-subitem:hover { color: var(--sidebar-hover-ink); background: var(--sidebar-hover-bg); } .app-nav-subitem.active { color: var(--sidebar-active-ink); background: var(--sidebar-active-bg); border-left-color: var(--brand-red); } @media (prefers-reduced-motion: reduce) { .app-nav-sub, .app-nav-sub-inner, .app-nav-chevron, .app-nav-row, .app-nav-subitem { transition: none; } } /* ── Account access ───────────────────────────────────────────────────────── */ .auth-form { width: 100%; } .auth-form-heading { margin-bottom: 30px; } .auth-eyebrow { margin: 0 0 8px; color: var(--brand-red); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .auth-form-heading h1 { color: var(--ink); font-size: clamp(28px, 3vw, 38px); letter-spacing: -.05em; line-height: 1.08; } .auth-form-heading > p:last-child { margin: 13px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; } .auth-form-login .auth-form-heading { margin-bottom: 26px; padding-bottom: 25px; border-bottom: 1px solid var(--line); } .auth-login-brand { display: flex; min-height: 52px; align-items: center; gap: 16px; } .auth-login-brand img { display: block; width: 52px; height: 50px; object-fit: contain; } .auth-login-brand-rule { height: 40px; border-left: 1px solid var(--line); } .auth-brand-name { color: var(--ink); font-size: clamp(38px, 3.5vw, 49px); font-weight: 800; letter-spacing: -.05em; line-height: 1; } .auth-form-heading-featured { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .auth-page-intro { margin-top: 28px; } .auth-page-intro .auth-eyebrow { margin-bottom: 10px; } .auth-page-intro > p:last-child { margin: 11px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; } .auth-page-intro strong { overflow-wrap: anywhere; } .auth-form-section { margin: 25px 0 0; color: var(--brand-slate); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .auth-form-section:first-of-type { margin-top: 0; } .auth-form-register .auth-field { margin-top: 15px; } .auth-form-section + .auth-field { margin-top: 13px; } .auth-form-register .auth-field input { height: 46px; } .auth-form-register .auth-form-section:not(:first-of-type) { padding-top: 20px; border-top: 1px solid var(--line); } .auth-form-verify #code { font-size: 19px; letter-spacing: .12em; font-variant-numeric: tabular-nums; } .auth-recovery { margin-top: 24px; padding: 18px 0 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; } .auth-recovery summary { cursor: pointer; line-height: 1.5; } .auth-recovery summary span { color: var(--brand-red); font-weight: 700; } .auth-recovery summary:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 4px; } .auth-recovery form { padding: 2px 0 4px; } .auth-recovery .auth-secondary-action { margin-top: 18px; } .auth-form-verify .auth-switch { margin-top: 22px; } .auth-field { margin-top: 17px; } .auth-field label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 700; } .auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .auth-label-row a { font-size: 12px; font-weight: 650; } .auth-field input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 9px; outline: none; background: var(--surface); color: var(--ink); font: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .auth-field input::placeholder { color: var(--ink-placeholder); } .auth-hint { margin: 6px 2px 0; color: var(--ink-faint); font-size: 12px; } /* Sign-up: business or personal finances (Wave F). Two cards, the chosen one outlined in the brand red. */ .auth-kind { border: 0; padding: 0; margin: 17px 0 0; min-width: 0; } .auth-kind legend { padding: 0; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 700; } .auth-field .auth-kind-option { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-weight: 400; cursor: pointer; } .auth-field .auth-kind-option:has(input:checked) { border-color: var(--brand-red); } .auth-field .auth-kind-option input { width: auto; height: auto; margin: 3px 0 0; accent-color: var(--brand-red); } .auth-kind-option strong { display: block; font-size: 13.5px; } .auth-kind-option .auth-hint { display: block; margin: 2px 0 0; font-weight: 400; } .auth-field input:focus { border-color: var(--brand-red); box-shadow: 0 0 0 4px var(--brand-red-wash); } .auth-submit:focus-visible, .auth-secondary-action:focus-visible, .auth-external-action:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; } .auth-submit, .auth-secondary-action { display: flex; width: 100%; height: 48px; align-items: center; justify-content: center; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; } .auth-submit { margin-top: 25px; border: 1px solid var(--brand-fill); background: var(--brand-fill); color: var(--on-fill); box-shadow: 0 7px 14px rgba(206, 21, 44, .16); } .auth-submit:hover { border-color: var(--brand-fill-hover); background: var(--brand-fill-hover); } .auth-secondary-action { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); } .auth-secondary-action:hover { border-color: var(--line-hover); color: var(--ink); } .auth-external { display: flex; flex-direction: column; gap: 10px; } .auth-external form { margin: 0; } .auth-external-action { display: flex; width: 100%; height: 48px; align-items: center; justify-content: center; gap: 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; } .auth-external-action:hover { border-color: var(--line-hover); color: var(--ink); } .auth-form-login .auth-divider { margin: 21px 0; } .auth-form-login .auth-external { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); } .auth-form-login .auth-external-action { height: 46px; font-size: 13px; } .auth-login-register { margin: 25px 0 0; color: var(--ink-soft); font-size: 13px; text-align: center; } .auth-login-register a { margin-left: 4px; font-weight: 750; } .auth-provider-icon { width: 18px; height: 18px; flex-shrink: 0; } .auth-inline-link { margin: 0 0 18px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-sunk); font-size: 12px; line-height: 1.5; word-break: break-all; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 25px 0; color: var(--ink-faint); font-size: 12px; } .auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; } .auth-build-note, .auth-terms, .auth-switch { margin: 20px 0 0; color: var(--ink-faint); font-size: 12px; line-height: 1.55; } .auth-error { margin: 0 0 18px; padding: 11px 12px; border: 1px solid var(--danger-line); border-radius: 8px; background: var(--danger-wash); color: var(--danger-ink); font-size: 13px; line-height: 1.45; } .auth-note { margin: 0 0 18px; padding: 11px 12px; border: 1px solid var(--ok-line); border-radius: 8px; background: var(--ok-wash); color: var(--ok-ink); font-size: 13px; line-height: 1.45; } .auth-terms { margin-top: 16px; } .auth-switch { text-align: center; } .auth-switch a { font-weight: 700; } .ledger-eyebrow { margin-bottom: 3px; color: var(--brand-red); font-size: 11px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; } .ledger-inquiry-card { overflow-x: auto; } .ledger-row-link { color: inherit; text-decoration: none; } .ledger-row-link:hover { color: inherit; } .ledger-period-filter { min-width: 210px; } .ledger-balance-summary { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 0; margin-bottom: 14px; padding: 0; } .ledger-balance-summary > div { display: grid; gap: 3px; padding: 13px 16px; border-right: 1px solid var(--line); } .ledger-balance-summary > div:last-child { border-right: 0; } .ledger-balance-summary span { color: var(--ink-soft); font-size: var(--type-label); font-weight: 600; } .ledger-balance-summary strong { font-size: var(--type-section); font-variant-numeric: tabular-nums; } .ledger-transaction-card { padding: 0; } .ledger-transaction-table { min-width: 760px; } .ledger-running-balance { font-weight: 650; } .ledger-dimension { display: inline-block; margin-left: 6px; padding: 1px 5px; color: var(--ink-soft); font-size: 10.5px; line-height: 1.4; border: 1px solid var(--line-strong); border-radius: 4px; } @media (max-width: 640px) { .ledger-balance-summary { grid-template-columns: 1fr; } .ledger-balance-summary > div { border-right: 0; border-bottom: 1px solid var(--line); } .ledger-balance-summary > div:last-child { border-bottom: 0; } } .ledger-row-action { color: var(--brand-red); font-size: 12px; font-weight: 650; text-align: right; white-space: nowrap; } .ledger-source { font-size: 11px; } .app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .app-topbar { height: 52px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; /* Safe-area insets add to the 20px gutter rather than replacing it, so an installed PWA on a notched device keeps its normal spacing. */ padding: 0 20px; padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); gap: 14px; } .business-switcher { display: inline-flex; align-items: center; gap: 10px; min-width: 260px; max-width: 380px; padding: 8px 12px 8px 10px; border: 1px solid var(--line); border-radius: 14px; font-size: 13px; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-sunk) 100%); color: var(--ink); cursor: pointer; box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .business-switcher:hover { border-color: var(--brand-red-line); box-shadow: 0 4px 14px rgba(26, 26, 26, 0.06); transform: translateY(-1px); } .business-switcher:focus-within { border-color: var(--brand-red-line); box-shadow: 0 0 0 4px var(--brand-red-wash); } .business-switcher-badge { width: 30px; height: 30px; border-radius: 10px; background: var(--brand-red-wash); color: var(--brand-red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .business-switcher-body { display: flex; align-items: center; min-width: 0; flex: 1; } .business-switcher select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; background: transparent; font: inherit; font-weight: 700; color: inherit; cursor: pointer; outline: none; padding: 0; } .business-switcher-select { width: 100%; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .business-switcher-caret { color: var(--ink-faint); flex-shrink: 0; } /* Module title, promoted into the topbar next to the company switcher. Every page in a module shows the module name here; the active tab below names the page within it. */ .app-topbar-divider { width: 1px; height: 20px; background: var(--line); flex-shrink: 0; } .app-topbar-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; } .topbar-spacer { flex: 1; } /* Icon-button pair (approvals inbox, support access) between the spacer and the account menu — a small, always-present affordance with an optional count/status badge, rather than text that only appears once something is pending. */ .topbar-icon-btn { position: relative; width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--ink-soft); text-decoration: none; transition: background-color .12s ease, color .12s ease; } .topbar-icon-btn:hover { background: var(--surface-sunk); color: var(--ink); } .topbar-icon-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--brand-fill); color: var(--on-fill); font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--surface); } .topbar-icon-dot.warn { background: var(--warn-ink); } .topbar-icon-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-ink); box-shadow: 0 0 0 2px var(--surface); } .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-fill); color: var(--on-fill); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .account-menu { position: relative; } .account-menu summary { list-style: none; cursor: pointer; } .account-menu summary::-webkit-details-marker { display: none; } .account-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 224px; padding: 8px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 28px rgba(26,26,26,.14); } .account-menu-user { padding: 8px 10px 10px; font-size: 12px; color: var(--ink-faint); overflow-wrap: anywhere; border-bottom: 1px solid var(--line); } .account-menu-panel a, .account-menu-panel button { display: block; box-sizing: border-box; width: 100%; padding: 9px 10px; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; font-size: var(--type-body); text-decoration: none; border-radius: 7px; cursor: pointer; } .account-menu-panel a:hover, .account-menu-panel button:hover { background: var(--surface-sunk); } .account-menu-panel form { margin: 0; } /* Appearance (ThemeChoice) in the account menu: its label, then the three choices across the panel. The panel's own full-width button rule is undone for the segmented control. */ .account-menu-theme { display: grid; gap: 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 12px; color: var(--ink-faint); } .account-menu-theme .theme-choice { display: flex; } .account-menu-panel .theme-choice button { flex: 1 1 0; width: auto; padding: 6px 4px; border-radius: 0; text-align: center; font-size: var(--type-body); color: var(--ink-soft); background: var(--surface-raised); } .account-menu-panel .theme-choice button:hover { background: var(--surface-sunk); color: var(--ink); } .account-menu-panel .theme-choice button.active { background: var(--inverse-bg); color: var(--inverse-ink); } /* Profile → Appearance: the words on the left, the choice on the right; stacked on a phone. */ .theme-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .theme-card > div:first-child { flex: 1 1 260px; min-width: 0; } .seg button:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; } /* Company workspace switcher — a real popover keyed to the app's surfaces, replacing the native controls. The native element remains the form control and no-JS fallback; only its popup is replaced. */ select.app-select-open { border-color: var(--brand-red) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; } .app-select-pop { position: fixed; z-index: 1200; overflow-y: auto; overscroll-behavior: contain; padding: 4px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 10px 28px rgba(16, 20, 24, .17), 0 2px 7px rgba(16, 20, 24, .08); } .app-select-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 34px; padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font: inherit; font-size: var(--type-body); line-height: 1.35; text-align: left; cursor: pointer; } .app-select-option:hover, .app-select-option.active { background: var(--surface-sunk); } .app-select-option.selected { color: var(--brand-red); font-weight: 650; } .app-select-option:disabled { color: var(--ink-faint); cursor: not-allowed; opacity: .55; } .app-select-option:focus { outline: none; } .app-select-option-label { min-width: 0; overflow-wrap: anywhere; } .app-select-check { flex: 0 0 auto; color: var(--brand-red); font-weight: 800; } .app-select-group { padding: 8px 9px 4px; color: var(--ink-faint); font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } /* Expiry row on the quote form — checkbox + "valid for N days" on one line. */ .expiry-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .expiry-row input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--brand-red); } .expiry-row input[type="number"] { width: 64px; flex: 0 0 auto; text-align: center; } .expiry-row .faint { white-space: nowrap; } /* Reusable line-item editor (SalesLinesEditor) — quotes & invoices. */ .lines-editor-grid { border: 1px solid var(--line); border-radius: 8px; } .lines-editor .ler { display: grid; grid-template-columns: 34px minmax(180px,1.25fr) minmax(180px,1fr) 76px 104px 64px 96px 40px; gap: 8px; align-items: start; padding: 7px 10px; } .lines-editor.with-items .ler:not(.dims) { grid-template-columns: 30px minmax(140px,.9fr) minmax(150px,1.05fr) minmax(140px,.95fr) 64px 90px 60px 86px 34px; } /* Business not registered for VAT — the VAT column is dropped from the header and every row. */ .lines-editor.no-vat .ler:not(.dims) { grid-template-columns: 34px minmax(180px,1.25fr) minmax(180px,1fr) 76px 104px 96px 40px; } .lines-editor.no-vat.with-items .ler:not(.dims) { grid-template-columns: 30px minmax(140px,.9fr) minmax(150px,1.05fr) minmax(140px,.95fr) 64px 90px 86px 34px; } /* Keep plain-text cells (row #, line total) level with the first line of the inputs beside them. */ .lines-editor .ler:not(.head):not(.dims) > .num { padding-top: 7px; } .lines-editor.with-items .ler.dims { grid-template-columns: 30px 1fr; } .lines-editor .ler.head { background: var(--surface-sunk); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); padding-top: 9px; padding-bottom: 9px; border-radius: 7px 7px 0 0; } .lines-editor .ler:not(.head):not(.dims) { border-top: 1px solid var(--line); } .lines-editor .ler.dims { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 0 10px 8px; } .lines-editor .ler .field-input { padding: 6px 8px; font-size: 12.5px; } .lines-editor .ler:not(.head):not(.dims) input.field-input, .lines-editor .ler:not(.head):not(.dims) select.field-input, .lines-editor .ler:not(.head):not(.dims) .search-select .ss-input, .lines-editor .ler:not(.head):not(.dims) .line-control-static { min-height: var(--control-height); height: var(--control-height); padding-top: 0; padding-bottom: 0; } .lines-editor .ler:not(.head):not(.dims) .line-control-static { display: flex; align-items: center; } .lines-editor .ler:not(.head):not(.dims) textarea.field-input { min-height: var(--control-height); padding-top: 9px; padding-bottom: 9px; } .lines-editor .ler .num { text-align: right; } /* Tax-code pickers hold a single letter (S / Z / E / N) — keep them compact and centred. */ select.tax-code { padding-left: 6px; padding-right: 20px !important; background-position: right 6px center; text-align: center; } /* Multi-line description: starts one row tall, grows to fit as the user types (Enter = new line). */ textarea.autogrow { resize: none; overflow: hidden; min-height: calc(1.4em + 14px); line-height: 1.4; white-space: pre-wrap; font: inherit; field-sizing: content; } /* While empty, size to the single `rows` line — otherwise `field-sizing: content` grows the box to fit a wrapped placeholder in a narrow column. Content restores content-sizing. */ textarea.autogrow:placeholder-shown { field-sizing: fixed; } /* A one-line description sits in a row with 38px inputs: match them, then grow with the text. */ .field textarea.autogrow { min-height: var(--control-height); padding-block: 8px; } .line-del { border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 7px; min-height: var(--control-height); border-radius: 6px; opacity: .55; } .line-del:hover:not(:disabled) { opacity: 1; background: var(--danger-wash); } .line-del:disabled { opacity: .2; cursor: default; } /* Two panels side by side — a reference (document preview) beside the form built from it. Wraps to one column when there isn't room; the main panel keeps overflow visible so pickers can open. */ .split-panels { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px; } .split-panels > .split-side { flex: 1 1 280px; padding: 16px; } .split-panels > .split-main { flex: 2 1 420px; padding: 20px; overflow: visible; } /* The captured document beside the bill it becomes: an image scales down, a PDF gets a tall frame. */ .capture-preview { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; } .capture-preview-pdf { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-sunk); } /* A document being read: a banner on the review screen, a small spinner in the inbox status badge. */ .capture-working { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-sunk); } .capture-working-text { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: 13px; } .capture-working-text span { color: var(--ink-soft); } .capture-spinner { flex: none; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--brand-red); border-radius: 50%; animation: reconnect-spin 0.9s linear infinite; } .capture-spinner-sm { display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; } @media (prefers-reduced-motion: reduce) { .capture-spinner { animation: none; } } /* Only a way to lock the form while it fills in: a bare fieldset would draw a box and squeeze its contents. */ .capture-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } /* Fields stacked with a steady rhythm (no per-field margins). */ .form-stack { display: flex; flex-direction: column; gap: 14px; } /* Action bar under a form or grid: right-aligned like the invoice/bill forms, clear of the card above. */ .page-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .lines-editor-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; } .lines-editor-actions .add-line { border-style: dashed; } .lines-editor-actions .from-item { display: flex; align-items: center; gap: 8px; } .lines-editor-actions .from-item select { max-width: 220px; } .card > .section-title:first-child { padding-top: 0; border-top: none; margin-top: 0; margin-bottom: 12px; } /* Totals summary under a line-item editor. */ .doc-totals { margin: 16px 0 0; margin-left: auto; width: 280px; display: grid; gap: 6px; } .doc-totals > div { display: flex; justify-content: space-between; align-items: baseline; } .doc-totals .num { font-variant-numeric: tabular-nums; } .doc-totals .grand { border-top: 2px solid var(--brand-red); padding-top: 8px; font-weight: 800; font-size: 14px; } /* ── Line grids on a phone ───────────────────────────────────────────────────── Desktop lays line items out as a table: column headers above, one row per line. Below 900px each row becomes a small stacked form instead — every field carries its own label (data-label), wide fields (.cell-wide) take the full width, the row number and column headers go away, and the remove control (.cell-end) sits at the row's end. Opt in with .stack-sm on the grid container and data-label / .cell-wide / .cell-end on the cells; nothing changes above 900px. */ @media (max-width: 900px) { .stack-sm :is(.row, .ler).head { display: none; } .stack-sm :is(.row, .ler):has(> [data-label]):not(.head) { grid-template-columns: 1fr 1fr !important; /* beats the inline column templates on the desktop grid */ gap: 10px 12px; padding: 12px 14px; align-items: start; } .stack-sm :is(.row, .ler) > [data-label] { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; } .stack-sm :is(.row, .ler) > [data-label]::before { content: attr(data-label); font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; } .stack-sm :is(.row, .ler) > .cell-wide { grid-column: 1 / -1; } .stack-sm :is(.row, .ler) > .cell-end { grid-column: 1 / -1; justify-self: end; } .stack-sm :is(.row, .ler) > .cell-hide { display: none; } /* empty spacer cells that only exist to keep desktop columns aligned */ .stack-sm .ler:not(.head):not(.dims) > :first-child:not([data-label]) { display: none; } /* the row number */ .stack-sm .ler.dims { grid-template-columns: 1fr !important; } .stack-sm .ler.dims > :first-child { display: none; } /* The same stacked form for a : the column headers go, each row is a two-column grid of labelled cells (data-label), and a row with no labelled cell (a total, "none yet") is its label and figure on one line. .cell-wide / .cell-end / .cell-hide mean what they mean above. */ .data-table.stack-sm, .data-table.stack-sm tbody, .data-table.stack-sm tfoot { display: block; width: 100%; } .data-table.stack-sm thead { display: none; } .data-table.stack-sm tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); } .data-table.stack-sm tr:has(> [data-label]) { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 12px 14px; align-items: start; } .data-table.stack-sm tr > td, .data-table.stack-sm tr > th { padding: 0; border: 0; min-width: 0; background: none; } .data-table.stack-sm tr > [data-label] { display: flex; flex-direction: column; gap: 4px; text-align: left; } .data-table.stack-sm tr > [data-label]::before { content: attr(data-label); font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; } .data-table.stack-sm tr > .cell-wide { grid-column: 1 / -1; } .data-table.stack-sm tr > .cell-end { grid-column: 1 / -1; justify-self: end; } .data-table.stack-sm tr > .cell-hide { display: none; } .data-table.stack-sm tr.total { background: var(--surface-sunk); } } .dim-tag { font-size: 10.5px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 4px; margin-left: 6px; color: var(--ink-soft); white-space: nowrap; } .tax-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 4px; margin-left: 6px; color: var(--ink-soft); white-space: nowrap; } /* ── Worksheet layout with a left step rail (Payment runs; reused by Payroll) ─ */ /* minmax(0, 1fr), not 1fr: a bare 1fr won't shrink below its widest content, so a wide worksheet or table used to stretch the whole page past the viewport (the processing wizard, PAYE returns, the payslip register). */ .worksheet { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 900px) { .worksheet { grid-template-columns: minmax(0, 1fr); } } .step-rail { display: flex; flex-direction: column; gap: 2px; } .step-rail-node { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink-soft); width: 100%; position: relative; } .step-rail-node + .step-rail-node::before { content: ""; position: absolute; left: 23px; top: -2px; height: 12px; width: 2px; background: var(--line-strong); } .step-rail-node:hover { background: var(--surface-sunk); } .step-rail-node.active { background: var(--brand-red-wash); color: var(--ink); font-weight: 700; } .step-rail-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft); } .step-rail-node.current .step-rail-badge { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); } .step-rail-node.done .step-rail-badge { background: var(--inverse-bg); border-color: var(--inverse-bg); color: var(--inverse-ink); } .step-rail-node.blocked .step-rail-badge { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); } .step-rail-label { line-height: 1.25; } /* Payroll module landing — a contextual hero and one operational stepper. Navigation is the rail and the area tab bar; the page does not re-list it. The old two-card "setup vs cycle" split and fixed-width stage blocks are gone: the stepper is one responsive
    whose connector is a CSS line (no detached arrow elements). */ .payroll-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; margin-bottom: 16px; border: 1px solid var(--line); border-left: 3px solid var(--brand-red); border-radius: var(--radius); background: var(--surface); } .payroll-hero-copy { min-width: 0; } .payroll-hero-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; } .payroll-hero-status { margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); } .payroll-hero .btn { flex-shrink: 0; } .payroll-section-head { align-items: center; } .payroll-section-head h2 { margin: 0; font-size: 16px; line-height: 1.3; } .payroll-cycle-card { margin-bottom: 16px; padding: 16px 18px 18px; } .payroll-cycle { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--cycle-steps, 5), minmax(0, 1fr)); } .payroll-cycle::before { /* The line runs from the middle of the first badge to the middle of the last: half a column in from each edge. */ content: ""; position: absolute; left: calc(50% / var(--cycle-steps, 5)); right: calc(50% / var(--cycle-steps, 5)); top: 11px; height: 2px; background: var(--line-strong); } .payroll-cycle-step { position: relative; min-width: 0; text-align: center; padding: 0 8px; } .payroll-cycle-badge { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--surface); border: 2px solid var(--line-strong); color: var(--ink-soft); position: relative; z-index: 1; } .payroll-cycle-step.done .payroll-cycle-badge { background: var(--inverse-bg); border-color: var(--inverse-bg); color: var(--inverse-ink); } .payroll-cycle-step.current .payroll-cycle-badge { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); } .payroll-cycle-link { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; border-radius: var(--radius-sm); color: inherit; text-decoration: none; } .payroll-cycle-link:focus-visible { outline: 3px solid var(--brand-red-wash); outline-offset: 3px; } .payroll-cycle-link:hover .payroll-cycle-title { color: var(--brand-red); } .payroll-cycle-body { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; } .payroll-cycle-title-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } .payroll-cycle-title { font-size: 12.5px; font-weight: 700; } .payroll-cycle-copy { font-size: 11px; color: var(--ink-faint); line-height: 1.35; max-width: 180px; } .payroll-cycle-current { padding: 2px 6px; border-radius: 999px; background: var(--brand-red-wash); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-red); white-space: nowrap; } .payroll-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } /* ── Payroll dashboard: two columns at desktop width ────────────────────────── Main column = the operational surface (hero, KPIs, cycle, exceptions, trend). Side column = time-sensitive and historical context (deadlines, the current run's checklist, recent activity). Collapses to one column below 1200px so the sidebar's cards don't squeeze the tables beside them. */ .payroll-dash { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; } .payroll-dash-main { min-width: 0; } .payroll-dash-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; } @media (max-width: 1200px) { .payroll-dash { grid-template-columns: 1fr; } } /* Key deadlines: label + countdown badge, then why it matters and when. */ .payroll-deadline-list { list-style: none; margin: 0; padding: 0; } .payroll-deadline-list li { border-bottom: 1px solid var(--line-soft); } .payroll-deadline-list li:last-child { border-bottom: none; } .payroll-deadline-list a { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; color: inherit; text-decoration: none; } .payroll-deadline-list a:hover strong { color: var(--brand-red); } .payroll-deadline-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .payroll-deadline-head .badge { padding: 2px 8px; white-space: nowrap; } /* This run: a tick, a link into the workflow, and the evidence for the state. */ .payroll-checklist { list-style: none; margin: 0; padding: 0; } .payroll-checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; } .payroll-checklist li:last-child { border-bottom: none; } .payroll-checklist a { color: inherit; text-decoration: none; } .payroll-checklist a:hover { color: var(--brand-red); } .payroll-checklist .faint { display: block; font-size: 11.5px; } .payroll-check-mark { font-weight: 800; text-align: center; } .payroll-check-mark.done { color: var(--ok-ink); } .payroll-check-mark.todo { color: var(--warn-ink); } .payroll-check-mark.unknown { color: var(--ink-faint); } /* Recent activity: actor initials, what happened, and how long ago. */ .payroll-activity { list-style: none; margin: 0; padding: 0; } .payroll-activity li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; } .payroll-activity li:last-child { border-bottom: none; } .payroll-activity .faint { display: block; font-size: 11.5px; } .payroll-activity-actor { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-sunk); color: var(--ink-soft); font-size: 10.5px; font-weight: 800; } .payroll-panel { padding: 16px 18px; } .payroll-empty-state { display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--ink-soft); font-size: 12.5px; } /* Timesheets, one pay period at a time (TimesheetList.razor, owner review 2026-09-27): the period and its arrows, the four steps of the period, and the people list beside the open timesheet. */ .ts-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .ts-period-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ts-period-dates { font-size: 18px; margin: 0; } .ts-arrow { min-width: 36px; padding: 0 10px; font-size: 18px; line-height: 1; } .ts-period-actions { display: flex; flex-wrap: wrap; gap: 8px; } .ts-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ts-board { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; } .ts-people { padding: 0; overflow: hidden; } .ts-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); } .ts-filter { border: 1px solid transparent; background: transparent; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; } .ts-filter:hover { background: var(--surface-sunk); } .ts-filter.active { background: var(--brand-red-wash); color: var(--brand-red); font-weight: 600; } .ts-people-list { list-style: none; margin: 0; padding: 0; } .ts-people-list li + li { border-top: 1px solid var(--line-soft); } .ts-person { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 10px 12px; border: none; background: transparent; font: inherit; text-align: left; cursor: pointer; } .ts-person:hover { background: var(--surface-sunk); } .ts-person.selected { background: var(--brand-red-wash); box-shadow: inset 3px 0 0 var(--brand-red); } .ts-person-name { font-weight: 600; overflow-wrap: anywhere; } .ts-person .badge { justify-self: start; } .ts-people-empty { padding: 12px; margin: 0; } .ts-detail { min-width: 0; } .ts-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .ts-detail-head h2 { margin: 0; font-size: 18px; } .ts-detail-actions { gap: 8px; flex-wrap: wrap; } .ts-detail-empty { padding: 24px; } @media (max-width: 900px) { .ts-board { grid-template-columns: minmax(0, 1fr); } } .payroll-empty-state-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-wash); color: var(--ok-ink); font-size: 11px; font-weight: 800; } /* Exceptions panel: a grid-table pulled out to the panel's own edges, since the shared .grid-table row padding is sized for a full-width card and would double up with the panel's here. The column template lives here rather than inline on the rows so the narrow-width rule further down can restate it — an inline grid-template-columns can only be beaten with !important. */ .payroll-latest { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; } .payroll-latest:hover .payroll-latest-head strong { color: var(--brand-red); } .payroll-latest-head { display: flex; align-items: center; gap: 8px; } .payroll-latest-head strong { font-size: 13px; } .payroll-latest-breakdown { font-size: 12px; color: var(--ink-soft); } .payroll-trend-card { padding: 16px 18px 12px; margin-bottom: 16px; } .payroll-trend-card .chart-line { height: 160px; } .payroll-trend-card .row-inline { margin-top: 8px; } /* Payroll landing — the same FY-first, one-position-card rhythm as the main dashboard. The existing service owns all workflow states; these rules change only presentation. */ .payroll-year { margin-bottom: 12px; } .payroll-overview { padding: 0; overflow: hidden; } .payroll-overview-main { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 20px 24px 18px; } .payroll-overview-copy { min-width: 0; } .payroll-overview-title { margin: 9px 0 0; font-size: 17px; line-height: 1.3; font-weight: 650; } .payroll-overview-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-top: 3px; font-size: clamp(32px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; } .payroll-overview-value span { font-size: 13px; letter-spacing: 0; font-weight: 500; color: var(--ink-soft); } .payroll-overview-value.is-empty { font-size: 27px; letter-spacing: -.02em; } .payroll-overview-status { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); } .payroll-overview-attention { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 650; color: var(--warn-ink); text-decoration: none; } .payroll-overview-attention:hover { color: var(--brand-red); text-decoration: underline; } .payroll-overview-main .btn { flex: 0 0 auto; } .payroll-overview-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); } .payroll-overview-figure { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 14px 20px; } .payroll-overview-figure + .payroll-overview-figure { border-left: 1px solid var(--line); } .payroll-overview-figure strong { font-size: 21px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; } .payroll-overview-figure strong.is-empty { font-size: 15px; color: var(--ink-soft); } .payroll-overview-figure .dashboard-figure-link { margin-top: auto; } .payroll-quick-actions { margin: 14px 0 16px; } .payroll-operational-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; } .payroll-operation { min-width: 0; } .payroll-operation .payroll-section-head { margin-bottom: 13px; } .payroll-operation .payroll-section-head h2 { font-size: 14px; } .payroll-operation .payroll-calendar-strip { margin: 0 0 10px; } .payroll-operation-link { display: inline-block; margin-top: 10px; } .payroll-cycle-compact { list-style: none; padding: 0; margin: 0; } .payroll-cycle-compact li { border-top: 1px solid var(--line-soft); } .payroll-cycle-compact li:first-child { border-top: 0; } .payroll-cycle-compact a { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 0; color: inherit; text-decoration: none; border-radius: var(--radius-sm); } .payroll-cycle-compact a:hover strong { color: var(--brand-red); } .payroll-cycle-compact a:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; } .payroll-cycle-mark { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; background: var(--line); color: var(--surface); font-size: 10px; font-weight: 700; } .payroll-cycle-compact .done .payroll-cycle-mark { background: var(--chart-past); } .payroll-cycle-compact .current .payroll-cycle-mark { background: var(--ink); } .payroll-cycle-compact .current strong { color: var(--ink); } .payroll-cycle-compact strong { display: block; font-size: 12px; font-weight: 650; line-height: 1.35; } .payroll-cycle-compact small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--ink-soft); } .payroll-operation-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .payroll-operation-subhead h3 { margin: 0; font-size: 12px; } .payroll-operation-subhead .faint { font-size: 11px; } .payroll-operation .payroll-checklist li { font-size: 11.5px; } .payroll-lower { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; } .payroll-lower > .card { min-width: 0; } .payroll-home .payroll-trend-card { margin-top: 14px; } @media (max-width: 1050px) { .payroll-operational-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .payroll-operational-cards > :last-child { grid-column: 1 / -1; } } @media (max-width: 760px) { .payroll-overview-main { align-items: flex-start; flex-direction: column; padding: 18px 16px 16px; } .payroll-overview-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .payroll-overview-figure { padding: 12px 16px; } .payroll-overview-figure:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); } .payroll-operational-cards, .payroll-lower { grid-template-columns: minmax(0, 1fr); } .payroll-operational-cards > :last-child { grid-column: auto; } } @media (max-width: 420px) { .payroll-overview-figures { grid-template-columns: minmax(0, 1fr); } .payroll-overview-figure + .payroll-overview-figure { border-left: 0; border-top: 1px solid var(--line); } .payroll-overview-figure:last-child { grid-column: auto; } } /* Payroll → Configuration → Approvals & controls: one card per workflow rule — the rule in words, then who it applies to and what is waiting. */ .controls-card { padding: 18px; margin-bottom: 16px; } .controls-rule { margin: 0 0 10px; max-width: 70ch; font-size: 12.5px; color: var(--ink-soft); } .controls-line { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; font-size: 13px; } .controls-line > .faint { flex: 0 0 150px; } .controls-roles { flex-wrap: wrap; gap: 6px; } .controls-status { flex-wrap: wrap; align-items: center; gap: 8px; } .controls-empty { margin: 10px 0 0; font-size: 12.5px; } .controls-subtitle { margin: 16px 0 6px; } .controls-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .controls-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .controls-retention { align-items: end; gap: 12px; flex-wrap: wrap; } .controls-table-head { margin: 8px 0 10px; } .controls-table-title { margin: 0 0 2px; font-size: 16px; line-height: 1.3; } .controls-table-head .controls-rule { margin-bottom: 0; } /* Self-service → My timesheet, entry mode: the daily grid is a data-table whose cells hold inputs. */ .my-entry-grid td { padding: 8px 10px; } .my-entry-grid .field-input { min-width: 84px; } .my-entry-grid .my-entry-notes { min-width: 160px; } .my-entry-grid tr.is-weekend { background: var(--surface-sunk); } .my-entry-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; } /* Payroll → Configuration → Emails & notifications: the wording editor sits beside a live preview of the email. */ .wording-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } .wording-fields { gap: 4px; } .wording-fields code { font-size: 12px; } .wording-preview { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--surface); } .wording-preview-subject { font-weight: 600; font-size: 13.5px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .wording-preview-body { white-space: pre-wrap; font-size: 13px; overflow-wrap: anywhere; } .outbox-reason { font-size: 12px; margin-top: 2px; } .mail-resend-bad { color: var(--danger-ink); } /* The subject carries the reason and the resend note under it; without a floor it is squeezed to a few words a line on a phone, where the table scrolls sideways anyway. */ .mail-sent-subject { min-width: 240px; } /* A Sent subject that opens its record. Neutral and underlined, not red: a failed row's own red is the thing to notice. */ .mail-record-link { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; } .mail-record-link:hover, .mail-record-link:focus-visible { color: var(--brand-red); text-decoration-color: currentColor; } /* Mail: Waiting for you on top, Sent underneath, one scroll. */ .mail-jump { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .mail-jump-warn { color: var(--warn-ink); border-color: var(--warn-line); background: var(--warn-wash); } .mail-section + .mail-section { margin-top: 32px; } .mail-section { scroll-margin-top: 16px; } .mail-section:focus { outline: none; } /* A row's buttons sit beside it on a wide screen and fold into the row menu on a narrow one. */ /* Selectors are as specific as the generic .data-table td.table-actions > *:not(.btn) rule they have to beat. */ .mail-table td.mail-actions { text-align: right; white-space: nowrap; } .mail-table td.mail-actions > .mail-actions-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: 0; } .mail-table td.mail-actions > .mail-actions-menu { display: none; margin-left: 0; } .mail-row-error { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--danger-ink); } .reason-input { min-height: 72px; resize: vertical; height: auto; } .mail-decided > summary { cursor: pointer; font-size: 15px; font-weight: 700; margin-bottom: 12px; list-style-position: inside; } .mail-decided > summary .faint { font-size: 12.5px; font-weight: 400; } .mail-decided:not([open]) > summary { margin-bottom: 0; } .mail-decided td.document-ref { white-space: normal; } @media (max-width: 720px) { .mail-table td.mail-actions > .mail-actions-inline { display: none; } .mail-table td.mail-actions > .mail-actions-menu { display: inline-block; } /* Room for the row menu without sideways scrolling: drop the date column and let the item wrap. */ .mail-table .mail-since { display: none; } .mail-table td.document-ref { white-space: normal; min-width: 0; } } @media (max-width: 900px) { .wording-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .controls-line { flex-direction: column; align-items: flex-start; gap: 4px; } .controls-line > .faint { flex: none; } } @media (max-width: 760px) { .payroll-hero { flex-direction: column; align-items: stretch; } .payroll-hero .btn { align-self: flex-start; } .dash-kpis.payroll-kpis { grid-template-columns: 1fr; } .payroll-cycle { grid-template-columns: 1fr; gap: 12px; } .payroll-cycle::before { display: none; } .payroll-cycle-step { text-align: left; padding: 0; } .payroll-cycle-link { flex-direction: row; align-items: flex-start; gap: 12px; } .payroll-cycle-body { align-items: flex-start; } .payroll-cycle-title-row { justify-content: flex-start; } .payroll-cycle-copy { max-width: none; } .payroll-panels { grid-template-columns: 1fr; } } .worksheet-exceptions { margin-top: 10px; width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--warn-line); background: var(--warn-wash); color: var(--warn-ink); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 11.5px; font-weight: 700; } .worksheet-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .worksheet-summary { padding: 14px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 12px 24px; } .ws-metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ws-metric-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); } .ws-metric-value { font-size: 15px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-metric-value .badge { font-variant-numeric: normal; vertical-align: 1px; } .worksheet-panel { padding: 20px; } .worksheet-notes { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-soft); white-space: pre-wrap; font-family: inherit; } .worksheet-problems { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--warn-ink); } .worksheet-problems li { margin: 2px 0; } /* ── Payroll processing worksheet ─────────────────────────────────────────── */ .worksheet-progress { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); margin-bottom: 8px; padding-left: 12px; } .wf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; } /* A step can hold more than one stage (Period & hours; the Distribute panel under a locked run): rule them apart. */ .wf-section + .wf-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } /* Company setup inside the run checks (a section of the panel) or on its own (the post step). */ .wf-setup { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .wf-setup.boxed { margin: 0 0 14px; background: var(--surface-sunk); } .wf-kpi { padding: 14px 16px; display: flex; flex-direction: column; } @media (max-width: 900px) { .worksheet-progress { padding-left: 0; } } /* ── Pay run Review screen (Wave 3) ───────────────────────────────────────── */ .review-actions { display: flex; flex-direction: column; gap: 10px; } .review-action { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); } .review-action.current { border-color: var(--brand-red); } .review-action.done { background: var(--surface-sunk); } .review-action.todo { opacity: .7; } .review-action-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--inverse-bg); color: var(--inverse-ink); } .review-action.done .review-action-num { background: var(--ok-ink); } .review-action.todo .review-action-num { background: var(--line-strong); color: var(--ink); } .review-action-body { min-width: 0; } .review-action-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; } .review-reasons { display: flex; flex-wrap: wrap; gap: 4px; } .review-unchanged .btn { padding: 2px 6px; } .is-negative { color: var(--danger-ink); } .link-btn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; font: inherit; } .link-btn:hover { text-decoration: underline; } .payslip-editor .subhead { margin-top: 10px; } /* ── Leave entitlement rule cards ─────────────────────────────────────────── */ .rule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; } .rule-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--line-strong); } .rule-card.leave-annual { border-top-color: var(--series-2); } .rule-card.leave-sick { border-top-color: var(--series-3); } .rule-card.leave-other { border-top-color: var(--brand-slate); } .rule-card h3 { font-size: 14px; } .rule-type { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; } .rule-card.leave-annual .rule-type { color: var(--series-2); } .rule-card.leave-sick .rule-type { color: var(--series-3-ink); } .rule-card.leave-other .rule-type { color: var(--brand-slate); } .rule-entitlement { font-size: 26px; font-weight: 700; line-height: 1.1; } .rule-entitlement small { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-left: 5px; } .rule-facts { display: flex; flex-direction: column; gap: 5px; font-size: 12px; } .rule-fact { display: flex; justify-content: space-between; gap: 10px; } .rule-fact .yes { color: var(--ok-ink); font-weight: 700; } .rule-fact .no { color: var(--ink-faint); font-weight: 700; } .rule-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; } /* ── Modal (tabbed dialogs) ───────────────────────────────────────────────── */ /* z-index 60, above .record-modal-scrim/.item-modal-scrim's 50: a .modal-scrim dialog (quick-add, send, confirm) is always ABOUT whatever's underneath it, including when that's a large record-modal editor (e.g. ConfirmDialog's unsaved-changes prompt nested inside AssetModal) — same z-index + later-in-DOM meant the bigger modal painted over it. */ .modal-scrim { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; } .modal-panel { width: 560px; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column; background: var(--surface-raised); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.22); overflow: hidden; } .modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .modal-head h2 { font-size: 16px; } .modal-tabs { display: flex; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--surface-sunk); } .modal-tabs button { border: none; background: transparent; cursor: pointer; padding: 10px 2px; font: inherit; font-size: var(--type-body); font-weight: 600; color: var(--ink-faint); border-bottom: 2px solid transparent; } .modal-tabs button:hover { color: var(--ink); } .modal-tabs button.active { color: var(--ink); border-bottom-color: var(--brand-red); } .modal-body { padding: 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; } .modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; } .confirm-panel { width: 440px; } /* A dialog whose head, body and foot sit inside a
    (Add employee, the send dialogs) lays out like one without: the form is the column, so a long body scrolls between a head and a foot that stay in view instead of pushing the buttons out of the panel's clipped bottom. */ .modal-panel > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* A confirmation (ConfirmDialog, the unsaved-changes prompt) always answers the thing in front of the person, so it sits above every other modal and drawer. An editor's guard can render before the modal it protects (a quick-add, a drawer), and at the shared 60 the later modal painted over the prompt: navigation was held with no dialog to answer. */ .modal-scrim.confirm-scrim { z-index: 70; } .confirm-panel .modal-body { font-size: 13px; color: var(--ink-soft); line-height: 1.5; } /* Dialogs on a phone. A 560px panel inside a 20px scrim margin left a form a few fields tall with the page peeking round it; below 640px a dialog takes the whole screen (its body scrolls, its buttons stay at the bottom) and a confirmation, which is two lines and two buttons, becomes a sheet along the bottom edge within thumb reach. The !important beats the inline width a sets for the desktop. */ @media (max-width: 640px) { .modal-scrim { padding: 0; align-items: stretch; } .modal-panel { width: 100% !important; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; } .modal-panel > .modal-body, .modal-panel > form > .modal-body { flex: 1; } .modal-scrim.confirm-scrim { align-items: flex-end; } .modal-panel.confirm-panel { height: auto; border-radius: 12px 12px 0 0; } .modal-foot { flex-wrap: wrap; } .item-modal-scrim, .record-modal-scrim { padding: 0; } .item-modal, .record-modal { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; } } /* ── Analytics dashboard ──────────────────────────────────────────────────── */ .dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; } .dash-kpi { padding: 16px 18px; display: flex; flex-direction: column; } /* Phones: two to a row instead of one full-width card each — the timesheets page alone stacked five of them (about 700px of scrolling) before any content. The payroll dashboard's own three keep their one-per-row layout above. */ @media (max-width: 620px) { .dash-kpis:not(.payroll-kpis), .wf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dash-kpis:not(.payroll-kpis) .dash-kpi, .wf-kpis .wf-kpi { padding: 12px 14px; } } .dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 16px; } .chart-card { padding: 16px 18px; } .chart-card h2, .chart-card h3 { font-size: 13px; margin-bottom: 4px; } .chart-note { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 12px; } .chart-empty { padding: 26px 0; text-align: center; color: var(--ink-faint); font-size: 12.5px; } .chart-line { width: 100%; height: 180px; overflow: visible; } .chart-line .plot-line { fill: none; stroke: var(--brand-red); stroke-width: 2; } .chart-line .plot-area { fill: var(--brand-red-wash); } .chart-line .axis { stroke: var(--line-strong); stroke-width: 1; } .chart-line .gridline { stroke: var(--line-soft); stroke-width: 1; } .chart-line .dot { fill: var(--brand-red); } .chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 8px; } /* Stretched to the row's height, so a bar's percentage height has something to be a percentage of: with the row's align-items: flex-end the column was only as tall as its content and every bar fell to its 2px minimum. */ .chart-bar-col { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; } .chart-bar { width: 100%; max-width: 46px; border-radius: 4px 4px 0 0; background: var(--brand-red); min-height: 2px; } .chart-bar.stacked { display: flex; flex-direction: column-reverse; background: transparent; border-radius: 4px 4px 0 0; overflow: hidden; } .chart-bar-seg { width: 100%; } .chart-bar-label { font-size: 10.5px; color: var(--ink-faint); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 11.5px; } .chart-legend span.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; } .chart-pie-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .chart-pie { width: 156px; height: 156px; flex: 0 0 auto; } /* Pie slices take the categorical series in order (an SVG stroke attribute cannot read a custom property, a rule can). */ .chart-pie .series-1 { stroke: var(--series-1); } .chart-pie .series-2 { stroke: var(--series-2); } .chart-pie .series-3 { stroke: var(--series-3); } .chart-pie .series-4 { stroke: var(--series-4); } .chart-pie .series-5 { stroke: var(--series-5); } .chart-pie .series-6 { stroke: var(--series-6); } .chart-pie-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; } .chart-pie-legend .row-inline { justify-content: space-between; } /* ── Pay period setup wizard ──────────────────────────────────────────────── */ .freq-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .freq-choice { text-align: left; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 4px; } .freq-choice:hover { border-color: var(--brand-red); } .freq-choice.selected { border-color: var(--brand-red); background: var(--brand-red-wash); } .freq-choice strong { font-size: 13.5px; } .freq-choice span { font-size: 11.5px; color: var(--ink-soft); } /* ── Employee record identity header ───────────────────────────────────────── Initials chip beside the name, then a three-fact strip. Purely presentational: every value is already on the page (name, position, status, start date, readiness) except the next pay date, which has its own lean loader. */ .employee-identity { display: flex; align-items: center; gap: 12px; } .employee-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--brand-red-wash); color: var(--brand-red); font-size: 14px; font-weight: 800; letter-spacing: .02em; } .employee-identity h1 { margin: 0; } .employee-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 12px 18px; margin-bottom: 16px; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 10px; } .employee-fact { display: flex; flex-direction: column; gap: 2px; } .employee-fact-value { font-size: 13.5px; font-weight: 700; } /* Employee register: the staff number, dates and status are short, fixed-shape values that read worse broken across lines ("EMP-" / "0001"). Name, position and rate may wrap; the table sits in .table-scroll if it outgrows the viewport. */ .nowrap { white-space: nowrap; } /* ── Shared page primitives (payroll consistency pass) ──────────────────────── In-card tab bar (employee record), hub tiles (report hubs), readiness checklists (PAYE annual return) and the warning button variant. These replace the Bootstrap-shaped markup that had crept into some payroll pages — Bootstrap is NOT loaded, so those classes rendered unstyled. */ .btn-warn { background: var(--warn-wash); color: var(--warn-ink); border-color: var(--warn-line); font-weight: 700; } .btn-warn:hover:not(:disabled) { background: var(--warn-wash-hover); } .tabs { display: flex; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--surface-sunk); overflow-x: auto; scrollbar-width: none; } /* underlined record tabs scroll within their card on a phone */ .tabs .tab, button.tab { flex: 0 0 auto; white-space: nowrap; } .tabs .tab, button.tab { border: none; background: transparent; cursor: pointer; padding: 11px 2px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); border-bottom: 2px solid transparent; } .tabs .tab:hover, button.tab:hover { color: var(--ink); } .tabs .tab.active, button.tab.active { color: var(--ink); border-bottom-color: var(--brand-red); font-weight: 700; } .tab-content { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; } .tile { padding: 18px; display: block; color: inherit; } .tile:hover { border-color: var(--brand-red); color: inherit; } .tile-title { font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .tile-note { color: var(--ink-faint); font-size: 12.5px; } .checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); } .checklist li:last-child { border-bottom: none; } .checklist .mark { font-size: 13px; line-height: 1.35; font-weight: 700; } .checklist li.pass .mark { color: var(--ok-ink); } .checklist li.fail .mark { color: var(--brand-red); } .checklist li.pending .mark { color: var(--warn-ink); } .checklist .label { display: block; font-weight: 650; font-size: 12.5px; } .checklist .detail { display: block; color: var(--ink-faint); font-size: 11.5px; margin-top: 2px; line-height: 1.4; } .validation-message { color: var(--brand-red); font-size: 11.5px; font-weight: 600; } .invalid { border-color: var(--brand-red); } /* Section heading inside a tab or panel — separates a long form into readable groups. */ .section-title { margin: 6px 0 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); padding-top: 12px; border-top: 1px solid var(--line-soft); } .tab-content > .section-title:first-child { padding-top: 0; border-top: none; } /* File-picker drop zone (employee documents): a real
. */ /* UI-20 batch A: accounting, assets, audit, cashbook, planning */ /* Accounting → New revaluation: the closing-rate input keeps the 180px column the grid gave it. */ .fxr-col-rate { width: 180px; } /* Accounting → Period close: the controls and the cash-flow check share one column plan, so their figures line up. */ .pc-controls-table { table-layout: fixed; min-width: 760px; } .pc-col-amount { width: 140px; } .pc-col-result { width: 110px; } /* Accounting → Summary: a fixed amount column, the header-account indent (16px a level on top of the cell padding) and the heavier rule over each pane's closing line. */ .acs-col-amount { width: 150px; } .data-table td.acs-indent-1 { padding-left: 30px; } .data-table td.acs-indent-2 { padding-left: 46px; } .data-table td.acs-indent-3 { padding-left: 62px; } .data-table td.acs-indent-4 { padding-left: 78px; } .data-table td.acs-indent-5 { padding-left: 94px; } .data-table td.acs-indent-6 { padding-left: 110px; } .data-table tr.total.acs-grand > th, .data-table tr.total.acs-grand > td { border-top-width: 2px; } /* Cash receipt / payment detail: a line with a settlement note reads from the top of the row, as the grid did. */ .data-table.ctd-lines td { vertical-align: top; } /* Planning dashboard: the favourable / unfavourable colour still shows on the net-profit total line. */ .data-table tr.total > td.planning-pos { color: var(--ok-ink); } .data-table tr.total > td.planning-neg { color: var(--danger-ink); } /* Accounting → New journal entry: the line-entry table. Desktop keeps the grid's column plan and tighter cells; on a phone .stack-sm turns each line into a stacked form and these widths step aside. */ .gj-col-account { width: 33%; } .gj-col-amount { width: 124px; } .gj-col-actions { width: 76px; } .gj-totals-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .data-table.gj-lines tbody tr:hover { background: transparent; } @media (min-width: 901px) { .data-table.gj-lines th, .data-table.gj-lines td { padding: 7px 4px; } .data-table.gj-lines th:first-child, .data-table.gj-lines td:first-child { padding-left: 12px; } .data-table.gj-lines th:last-child, .data-table.gj-lines td:last-child { padding-right: 12px; } .data-table.gj-lines tr.gj-line:has(+ tr.gj-dims) > td { border-bottom: 0; } .data-table.gj-lines tr.gj-dims > td { padding: 0 12px 8px; } .data-table.gj-lines tr.gj-tools-row > td { padding: 0; border-bottom: 0; } } @media (max-width: 900px) { .gj-lines colgroup { display: none; } } /* UI-20 batch B: banking */ /* Bank & cash reports: one table per account, fixed columns so the accounts line up down the page. */ .bank-history-table { table-layout: fixed; min-width: 640px; } .bank-history-table .bank-history-col-md { width: 150px; } .bank-history-table .bank-history-col-sm { width: 100px; } .bank-history-caption { caption-side: top; padding: 10px 14px; text-align: left; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); } /* Reconcile: the match lists keep their column heads in view while each list scrolls on its own. */ .recon-match-list .data-table thead th { position: sticky; top: 0; z-index: 2; } /* Statement lines: a row can open an inline editor, so cells sit at the top and the Clear column keeps its room. */ .recon-lines-table td { vertical-align: top; } /* Cash coding and statement lines hold account pickers whose lists drop below the row; a scroller would clip them. */ .recon-table-card.recon-picker-table { overflow: visible; } .recon-lines-table .recon-lines-clear { width: 280px; min-width: 280px; } .data-table tr.bank-rules-inactive { opacity: .55; } .data-table tr.bank-import-duplicate { opacity: .5; } .bank-import-preview { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; } /* UI-20 batch C1: payroll set-up and employee pages */ /* Pay periods (PayPeriods.razor) and the set-up wizard's preview (PayPeriodSetupWizard.razor): a weekly calendar is 52+ rows, so each table scrolls in its own box; the period an operator acts on carries the "next" wash; dates stay on one line so a narrow screen scrolls the table sideways instead of wrapping every cell. */ .pp-period-preview { max-height: 460px; overflow: auto; } .pp-period-list { max-height: 620px; overflow: auto; } .pp-period-table th, .pp-period-table td { white-space: nowrap; } .pp-period-table tr.next > td { background: var(--ok-wash); } /* Pay periods → Schedule health: one finding per line, its severity badge beside the title and detail. */ .pp-health-list { list-style: none; margin: 0; padding: 0; } .pp-health-list > li { display: grid; grid-template-columns: 110px minmax(140px, 1fr); column-gap: 10px; align-items: start; padding: 10px 14px; font-size: 12.5px; border-top: 1px solid var(--line-soft); } .pp-health-list .badge { padding: 2px 8px; } /* UI-20 batch C2: payroll runs and records */ /* Pay run review checks: the mark and the fix link take only their own width, the check the rest, all top-aligned so a two-line reason reads beside its badge. */ .review-checks td { vertical-align: top; } .review-checks .review-check-mark, .review-checks .review-check-fix { width: 1%; white-space: nowrap; } /* The payslip editor's draft pay item: the "take-home" choice and the Add button share one line under the row. */ .pay-item-draft-actions > td > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } /* Line tables whose cells hold an account picker: the picker's list opens below its field and a scrolling box would clip it, so these size to fit and only scroll where they truly cannot (as .cols-pay-items). Fixed layout keeps the typed columns from collapsing to their inputs' minimum width. */ .ws-items-scroll.table-scroll, .payslip-record-lines-scroll.table-scroll { overflow: visible; } @media (max-width: 860px) { .ws-items-scroll.table-scroll, .payslip-record-lines-scroll.table-scroll { overflow-x: auto; } } .ws-items { table-layout: fixed; min-width: 720px; } .ws-items .ws-col-type { width: 130px; } .ws-items .ws-col-taxable { width: 110px; } .ws-items .ws-col-amount { width: 120px; } .ws-items .ws-col-remove { width: 48px; } .payslip-record-lines { table-layout: fixed; min-width: 560px; } .payslip-record-lines .payslip-record-col-amount { width: 140px; } .payslip-record-lines .payslip-record-col-account { width: 220px; } .payslip-record-lines .payslip-record-col-remove { width: 56px; } /* Payroll home, "Needs attention": always stacked in its narrow panel (who and how bad, what is wrong, the fix). */ .payroll-exception-list { list-style: none; margin: 2px -18px -6px; padding: 0; } .payroll-exception-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; row-gap: 5px; padding: 10px 18px; font-size: 12.5px; border-top: 1px solid var(--line-soft); } .payroll-exception-list > li > div { min-width: 0; } .payroll-exception-list > li > div:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; overflow-wrap: anywhere; } .payroll-exception-list > li > div:nth-child(3) { grid-column: 2; grid-row: 1; } .payroll-exception-list > li > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .payroll-exception-list > li > div:nth-child(4) { grid-column: 1 / -1; grid-row: 3; } .payroll-exception-list .badge { padding: 2px 8px; } .payroll-exception-list .pill { font-size: 11.5px; white-space: nowrap; } /* Full Payroll upgrade page, "What you get". */ .section-title.payroll-upgrade-benefits-title { border: none; padding-top: 0; } .payroll-upgrade-benefits { margin: 0; padding-left: 18px; line-height: 1.9; } /* Record a payslip (Lite): the section note and the net pay line under the totals. */ .payslip-record-optional { font-weight: normal; font-size: .85em; } .payslip-record-net { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px; } .payslip-record-net-figure { font-weight: 700; font-size: 1.15em; } /* UI-20 batch D: sales and purchases registers */ /* Payment run worksheet: the Pay and Cheque number cells hold a full-width input, which gives the column no width of its own, so those two columns keep the widths the old grid gave them. */ .data-table .payment-run-col-pay { width: 150px; } .data-table .payment-run-col-cheque { width: 170px; } /* UI-20 batch E: reports */ /* A financial report is one table whose sections share its columns. Every amount column (a comparison period, a dimension value) keeps the fixed width the old grid gave it, so the figures line up down the page and the account column takes what is left; a figure never wraps. */ .rpt-table th.num, .rpt-table td.num { white-space: nowrap; } .rpt-table col.rpt-col-amount { width: 150px; } .rpt-table col.rpt-col-code { width: 80px; } .rpt-table th.rpt-col-account { min-width: 200px; } /* The line that closes a statement (liabilities + equity, net profit, closing cash) sits under a heavier rule. */ .data-table tr.total.rpt-grand-total > td { border-top-width: 2px; } /* An account's depth in the header-account tree (and a cash-flow line under its section), 16px a level. */ .data-table.compact td.rpt-depth-1 { padding-left: 30px; } .data-table.compact td.rpt-depth-2 { padding-left: 46px; } .data-table.compact td.rpt-depth-3 { padding-left: 62px; } .data-table.compact td.rpt-depth-4 { padding-left: 78px; } .data-table.compact td.rpt-depth-5 { padding-left: 94px; } .data-table.compact td.rpt-depth-6 { padding-left: 110px; } /* The comparison-columns editor above a statement: a date (or two) per row, the name, and the move/remove buttons squeezed to their own width. */ .rpt-columns col.rpt-col-date { width: 170px; } .rpt-columns col.rpt-col-moves { width: 1%; } /* Owner money movements: a long description stops at one line instead of widening the table. */ .owner-report-movements td.owner-report-description { max-width: 320px; } /* UI-20 batch F: settings and shared */ /* Journal CSV import: each journal in the preview is its own small bordered table, all with the same columns. */ .csvj-journal-scroll { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; } .data-table.csvj-journal { table-layout: fixed; min-width: 720px; } .csvj-journal .csvj-col-code { width: 104px; } .csvj-journal .csvj-col-amount { width: 134px; } .csvj-journal .csvj-col-dims { width: 194px; } /* Dimensions: every dimension's value table lines up with the next one. */ .data-table.dim-values { table-layout: fixed; } .dim-values .dim-col-code { width: 124px; } .dim-values .dim-col-narrow { width: 104px; } /* Adjust opening balances: the account picker opens a list below its field, which a scroller would clip, so the lines only scroll where the table cannot fit. */ .oba-lines-scroll { width: 100%; max-width: 100%; min-width: 0; } .opening-adjust-grid .oba-col-amount { width: 144px; } .opening-adjust-grid .oba-col-action { width: 58px; } .data-table td.oba-tools-cell { padding: 6px 14px; } @media (max-width: 900px) { .oba-lines-scroll { overflow-x: auto; overscroll-behavior-inline: contain; } } /* Budget variance (Planning, Reports, a job): seven columns keep their width and scroll on a narrow screen. */ .data-table.planning-variance-table { min-width: 1040px; } .planning-variance-table th:first-child, .planning-variance-table td:first-child { min-width: 200px; } /* Cash receipt / payment form: the open documents to settle, and the coded lines. */ .data-table.cash-alloc { min-width: 640px; } .cash-alloc .cash-col-select { width: 40px; } .cash-alloc .cash-col-due { width: 130px; } .cash-alloc .cash-col-outstanding { width: 150px; } .cash-alloc .cash-col-apply { width: 160px; } .cash-alloc .cash-col-full { width: 90px; } .data-table.cash-lines { table-layout: fixed; } .cash-lines .cash-col-account { width: 254px; } .cash-lines .cash-col-qty { width: 104px; } .cash-lines .cash-col-vat { width: 86px; } .cash-lines .cash-col-amount { width: 164px; } .cash-lines .cash-col-remove { width: 58px; } .data-table.cash-lines > tbody > tr.cash-line > td { vertical-align: top; } .data-table.cash-lines > tbody > tr.cash-line > td.cash-qty-none { vertical-align: middle; } .field-input.cash-item-account { display: flex; align-items: center; background: var(--surface-sunk); color: var(--ink-soft); } .data-table td.cash-asset-cell { padding: 0 0 6px; } .card.cash-asset-card { padding: 12px; background: var(--surface-sunk); border: 1px solid var(--line); } .cash-lines-hint { font-weight: 400; text-transform: none; letter-spacing: 0; } @media (max-width: 900px) { .data-table.stack-sm colgroup { display: none; } } /* UI-20: document detail pages, timesheets, opening balances */ /* The posted-document reversal panel (ReversalPanel.razor): a card outlined in the brand red, no wider than its form. */ .card.reversal-panel, .card.confirm-panel { padding: 18px; margin-bottom: 16px; max-width: 560px; border: 1px solid var(--brand-red); } /* "Reduced the cost of: …" under a supplier credit note's lines. */ .doc-reduced-assets { padding: 10px 20px 14px; border-top: 1px solid var(--line); font-size: 12px; } /* The title line over a document's preview frame. */ .row-inline.doc-preview-head { justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); } /* Reclassify a posted document's line accounts: the picker column gets room, and its list must not be clipped. */ .reclassify-table td.cell-input { width: 45%; } /* A detail page's line list reads from the top of each row: a line can carry a second line (a link, a dimension). */ .data-table tr.va-top > td { vertical-align: top; } /* A tracked-stock line's account, fixed to Inventory on Hand: shown in the field's place, greyed. */ .line-control-locked { background: var(--surface-sunk); color: var(--ink-soft); } /* A small form set into an editor card (capitalise a bill line, a capture note), on the sunken surface. */ .card.inset-card { padding: 12px; background: var(--surface-sunk); border: 1px solid var(--line); } /* The Sales / Purchases reports landing: report cards in as many columns as fit. */ .reports-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } /* A pay run's record: ten columns, so the employee column keeps a floor and the table scrolls in its card instead. */ .payroll-record-table td:first-child { min-width: 170px; } /* "Registered in the asset register: …" under a bill's lines. */ .doc-registered-assets { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; } /* Timesheet daily rows (TimesheetEditor): wide enough for every field on a desktop, scrolling inside the card; a weekend row is shaded; on a phone the day's name moves beside its date because its own column is hidden there. */ /* Opening balances wizard (OpeningBalances.razor): the trial balance, open invoices / bills and assets. On a desktop the money columns keep a steady width; on a phone each row stacks into its name and labelled figures (.stack-sm), and the account code moves in front of the name because its own column is hidden there. */ .ob-tb-table .num, .ob-asset-table .num { width: 150px; } .ob-tb-table .ob-code-inline { display: none; margin-right: 8px; } .ob-open-table { table-layout: fixed; } .ob-open-table col.ob-col-party { width: 34%; } .ob-open-table col.ob-col-date { width: 150px; } .ob-open-table col.ob-col-amount { width: 130px; } .ob-open-table col.ob-col-remove { width: 52px; } @media (max-width: 900px) { .ob-tb-table .num, .ob-asset-table .num { width: auto; } .ob-tb-table .ob-code-inline { display: inline; } .ob-open-table { table-layout: auto; } } .ts-entry-table { min-width: 950px; } .ts-entry-table tr.ts-weekend > * { background: var(--surface-sunk); } .ts-entry-table .field-label { display: none; } .ts-entry-table .ts-day-inline { display: none; font-weight: 400; } @media (max-width: 900px) { .ts-entry-table { min-width: 0; } .ts-entry-table .ts-day-inline { display: inline; } .ts-entry-table tr.ts-weekend { background: var(--surface-sunk); } }