/* Expenses — "Night Ledger": a ledger aesthetic (serif display, mono money columns, ruled sections, double-rule totals) on a neutral near-black ground, dark by default. Green is an accent only — never a surface tint. The light "Paper" theme is the same system with swapped tokens. Theming: everything colour-shaped lives in the [data-theme] blocks below; :root keeps only theme-invariant tokens. base.html stamps data-theme on from the `theme` cookie server-side, so pages never flash the wrong theme. */ /* Self-hosted display + figure faces (body text stays system-ui). */ @font-face { font-family: "Source Serif 4"; src: url("/static/fonts/source-serif-4-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/ibm-plex-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { --radius: 8px; --maxw: 760px; --serif: "Source Serif 4", Charter, "Bitstream Charter", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } [data-theme="dark"] { /* Native widgets (date picker, scrollbars, file input) follow the page theme. */ color-scheme: dark; --bg: #101216; /* neutral near-black ink — deliberately not green-tinted */ --surface: #171a20; /* raised row / boxed elements */ --surface-2: #1d212a; /* inputs */ --border: #2a2e35; /* hairline rule */ --rule-strong: #474d58; /* strong rule (topbar, grand totals, buttons) */ --text: #e9eaec; --muted: #949daa; /* Accent is split: --accent colours text, links and focus rings; --accent-fill colours solid surfaces (primary buttons, switches). */ --accent: #97c877; --accent-fill: #4a7c34; --accent-ink: #ffffff; /* text on top of --accent-fill */ --accent-soft: rgba(110, 168, 79, 0.22); --danger: #e5534b; --danger-text: #d4796a; --danger-soft: rgba(229, 83, 75, 0.16); --success: #5fb96b; --success-text: #97c877; --success-soft: rgba(95, 185, 107, 0.16); --warn: #b98a35; --warn-text: #d9b06b; --warn-soft: rgba(217, 176, 107, 0.14); --info: #5896e0; --info-text: #a9c8ec; --info-soft: rgba(88, 150, 224, 0.15); --violet: #966edc; --violet-text: #c9b3ee; --violet-soft: rgba(150, 110, 220, 0.16); --shadow: rgba(0, 0, 0, 0.45); --backdrop: rgba(0, 0, 0, 0.62); --crop-bg: #111; /* letterbox behind the crop stage */ } [data-theme="light"] { color-scheme: light; --bg: #f4f4f2; /* paper */ --surface: #ffffff; --surface-2: #eaebe8; --border: #d8dad6; --rule-strong: #aaafab; --text: #22252a; --muted: #6b7278; --accent: #3c6b2e; /* darker cut for AA on paper */ --accent-fill: #4a7c34; --accent-ink: #ffffff; --accent-soft: rgba(74, 124, 52, 0.16); --danger: #b3261e; --danger-text: #a1221b; --danger-soft: rgba(179, 38, 30, 0.1); --success: #2e7d32; --success-text: #2e6b2c; --success-soft: rgba(46, 125, 50, 0.12); --warn: #8a6414; --warn-text: #7a5408; --warn-soft: rgba(158, 111, 10, 0.12); --info: #265ea6; --info-text: #21528f; --info-soft: rgba(38, 94, 166, 0.1); --violet: #653eab; --violet-text: #593798; --violet-soft: rgba(101, 62, 171, 0.1); --shadow: rgba(15, 23, 42, 0.16); --backdrop: rgba(15, 17, 21, 0.4); --crop-bg: #cfd4db; } * { box-sizing: border-box; } /* Author display rules (e.g. .form{display:flex}) otherwise beat the UA [hidden] rule, leaving JS-toggled hidden sections visible. This restores it. */ [hidden] { display: none !important; } html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Layout */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 1.4rem 1rem 4rem; } .page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0.5rem 0 1.25rem; } /* Long page titles squeeze the back button into a two-line wrap on phones; let the heading wrap instead and keep the button on one line. */ .page-head h1 { margin: 0; min-width: 0; overflow-wrap: break-word; } .page-head .btn { flex: 0 0 auto; white-space: nowrap; margin-top: 0.4rem; } h1 { font-family: var(--serif); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.01em; margin: 0 0 0.25rem; line-height: 1.15; } h2 { font-size: 1.05rem; margin: 0 0 0.5rem; } .muted { color: var(--muted); } /* Small-caps kicker above page titles ("EXPENSE CLAIM · TAX YEAR 2026/27"). */ .kick { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.35rem; } /* Kicker and back control share one line: context left, way out right. */ .kick-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0.5rem 0 0.35rem; } .kick-row .kick, .kick-row .crumb { margin: 0; } /* Status line: a lit dot + small caps, with an optional plain-text aside. */ .status { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); } .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); } [data-theme="light"] .status .dot { box-shadow: none; } .status .aux { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; } .status.st-amber { color: var(--warn-text); } .status.st-amber .dot { background: var(--warn); box-shadow: none; } .status.st-red { color: var(--danger-text); } .status.st-red .dot { background: var(--danger); box-shadow: none; } .status.st-blue { color: var(--info-text); } .status.st-blue .dot { background: var(--info); box-shadow: none; } .status.st-violet { color: var(--violet-text); } .status.st-violet .dot { background: var(--violet); box-shadow: none; } .status.st-grey { color: var(--muted); } .status.st-grey .dot { background: var(--muted); box-shadow: none; } /* Statement figures ("£272.02 / GRAND TOTAL") ride beside the page title like a statement head, hairline separators between them. On narrow screens they wrap below the title, left-aligned. */ .stats { display: flex; flex-wrap: wrap; } .stat { padding-right: 1.4rem; } .stat + .stat { border-left: 1px solid var(--border); padding-left: 1.4rem; } .stat:last-child { padding-right: 0; } .stat .v { font-family: var(--serif); font-weight: 700; font-size: 1.55rem; line-height: 1.15; } .stat .k { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-top: 0.15rem; } @media (min-width: 700px) { /* The statement figures share the title's baseline. */ .page-head:has(.stats) { align-items: baseline; } .page-head .stat { text-align: right; } } @media (max-width: 699px) { .page-head .stats { width: 100%; margin-top: 0.9rem; } } /* Back control above the kicker ("‹ Your expenses"): positioned like a crumb, dressed like a quiet button so it reads as clickable. */ .crumb { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); font-size: 0.82rem; font-weight: 600; border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.7rem; margin-bottom: 0.8rem; } .crumb:hover { color: var(--text); border-color: var(--accent); text-decoration: none; } /* Top bar: a ruled ledger head with the two-tone serif brand. */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; background: var(--bg); border-bottom: 2px solid var(--rule-strong); } .brand { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--text); } .brand em { font-style: italic; color: var(--accent); } .nav { display: flex; align-items: baseline; gap: 1.1rem; } .nav a, .dropdown > summary { color: var(--muted); font-size: 0.9rem; } .nav a:hover, .dropdown > summary:hover { color: var(--text); text-decoration: none; } /* Current page: readable to AT via aria-current, visually via an accent underline. */ .nav a.active { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--accent-fill); } .dropdown[data-active] > summary { color: var(--text); font-weight: 600; } /* Admin dropdown (native
) */ .burger { display: none; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0 0.3rem; color: var(--text); background: none; border: none; } .dropdown { position: relative; } .dropdown > summary { list-style: none; cursor: pointer; } .dropdown > summary::-webkit-details-marker { display: none; } .dropdown > summary::after { content: " \25BE"; } .dropdown[open] > summary { color: var(--text); } .dropdown-menu { display: flex; flex-direction: column; gap: 0.6rem; } @media (min-width: 600px) { .dropdown[open] > .dropdown-menu { position: absolute; right: 0; top: 1.7rem; z-index: 20; white-space: nowrap; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 8px; padding: 0.7rem 0.9rem; } } @media (max-width: 599px) { .topbar { flex-wrap: wrap; align-items: center; } .burger { display: block; } .nav { display: none; flex-direction: column; align-items: flex-start; width: 100%; gap: 0.85rem; padding-top: 0.6rem; } .nav.open { display: flex; } } /* Copy button + truncating import address */ .import-addr { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .import-addr-link { min-width: 0; overflow: hidden; } .import-addr-link code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .copy-btn { flex: 0 0 auto; cursor: pointer; font-size: 0.8rem; border: 1.5px solid var(--rule-strong); background: transparent; color: var(--text); border-radius: 6px; padding: 0.35rem 0.6rem; } .copy-btn.copied { border-color: var(--success); color: var(--success-text); } .inline { display: inline; margin: 0; } /* Sections. The ledger look is card-less: sections sit on the ground, separated by their small-caps labels and rules. Boxed variants keep a real container where one is genuinely needed (login card, modal, attention rail). */ .card { background: transparent; border: 0; border-radius: 0; padding: 0.25rem 0 1.1rem; margin-bottom: 0.9rem; } .card.centered { max-width: 380px; margin: 3rem auto; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; } /* Rule-box: bordered with a deep-green spine. Used for the needs-attention rail and the incomplete-profile warning. */ .card.warn, .card.attention { background: var(--surface); border: 1px solid var(--rule-strong); border-left: 4px solid var(--accent-fill); border-radius: 6px; padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; } .card.attention { border-left-color: var(--warn); } /* Non-collapsible sections carry the same slab heading as
summaries. */ .card > h2 { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.4rem; margin-bottom: 0.8rem; } .card.centered > h2 { border-bottom: none; font-family: var(--serif); font-size: 1.4rem; letter-spacing: normal; text-transform: none; } .card.warn h2, .card.attention .card-head h2 { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; border: none; padding: 0; margin: 0 0 0.4rem; } .card.attention .card-head h2 { color: var(--warn-text); } .card.attention .card-head { margin-bottom: 0.2rem; } /* Forms */ .form { display: flex; flex-direction: column; gap: 0.95rem; } .form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } .form label.checkbox { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--text); font-size: 0.9rem; font-weight: 600; letter-spacing: normal; text-transform: none; } input[type="text"], input[type="email"], input[type="file"], input[type="date"], input[type="number"], textarea, select { width: 100%; padding: 0.62rem 0.7rem; background: var(--surface-2); color: var(--text); border: 1px solid var(--rule-strong); border-radius: 7px; font-size: 1rem; font-family: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; } input.money { font-family: var(--mono); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); border-color: var(--accent); } /* Keyboard focus everywhere else: one consistent high-contrast ring instead of the browser fallback outline. :focus-visible keeps it away from mouse clicks. */ a:focus-visible, button:focus-visible, summary:focus-visible, [type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } textarea { resize: vertical; } input:disabled { opacity: 0.55; cursor: not-allowed; } input[type="file"] { padding: 0.45rem; } input[type="file"]::file-selector-button { font: inherit; cursor: pointer; margin-right: 0.75rem; padding: 0.45rem 0.9rem; border-radius: 6px; border: 1px solid var(--accent-fill); background: var(--accent-fill); color: var(--accent-ink); font-weight: 600; } input[type="file"]::file-selector-button:hover { filter: brightness(1.08); } .row { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* Buttons: ink-bordered rectangles; the primary is a deep-green fill. Inline SVG icons ride along at text size. */ .btn, .linkbtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; cursor: pointer; font-size: 0.92rem; font-weight: 600; padding: 0.55rem 0.95rem; border-radius: 7px; border: 1.5px solid var(--rule-strong); background: transparent; color: var(--text); text-align: center; } .btn svg { flex: none; } .btn:hover { text-decoration: none; border-color: var(--accent); } .btn.primary { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-fill); } .btn.primary:hover { filter: brightness(1.08); } .btn.ghost { border-color: var(--border); } .btn.block { display: flex; width: 100%; } .stack { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; } .linkbtn { background: none; border: none; color: var(--muted); padding: 0; font-weight: 500; } .linkbtn:hover { color: var(--text); } /* Alerts */ .alert { padding: 0.6rem 0.8rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); } .alert.error { border-color: var(--danger); color: var(--danger-text); } .alert.success { border-color: var(--success); color: var(--success-text); } /* Signature */ .sig-preview { /* White background — the signature sits on the white spreadsheet in the PDF. */ background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; margin-bottom: 1rem; display: inline-block; } .sig-preview img { display: block; max-width: 100%; height: auto; max-height: 120px; } .sig-current { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; } .sig-current .sig-preview { margin-bottom: 0; } .sig-canvas-wrap { background: #fff; border-radius: 6px; border: 1px solid var(--rule-strong); } .sig-canvas { display: block; width: 100%; height: 180px; touch-action: none; border-radius: 6px; } .tabs { display: flex; gap: 0.5rem; margin-bottom: 0.85rem; } .tab { cursor: pointer; padding: 0.4rem 0.8rem; border-radius: 6px; border: 1.5px solid var(--rule-strong); background: transparent; color: var(--muted); font-weight: 600; font-size: 0.85rem; } .tab.active { color: var(--accent-ink); background: var(--accent-fill); border-color: var(--accent-fill); } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .addbar { margin-bottom: 1.1rem; } .small { font-size: 0.85rem; } .hint { display: block; margin-top: 0.25rem; font-size: 0.82rem; font-weight: 400; letter-spacing: normal; text-transform: none; } /* Ledger entry rows. The date sits in a mono gutter column (folded inline on phones); metadata reads as quiet dotted text; amounts are mono, right-aligned. */ .exp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } /* Baseline-aligned to the first text line; when a description or its metadata wraps, the checkbox, amount and delete control stay anchored to the top line rather than drifting to the middle of the taller row. */ .exp { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.65rem 0; border-top: 1px solid var(--border); } .exp .exp-check { align-self: flex-start; margin-top: 0.15rem; } .exp .linkbtn.danger { align-self: flex-start; margin-top: -0.45rem; } .exp:first-child { border-top: none; } .exp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; color: var(--text); } /* Rows that carry a date render as a true ledger line — date | description | notes | amount — with every cell sharing one text baseline. Descriptions never truncate: a long one wraps within its column and the row grows. Rows without a date (drafts, submissions) keep the simple column. */ .exp-main:has(.exp-date) { display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.8rem; align-items: baseline; } .exp-main:has(.exp-date) .exp-meta { justify-content: flex-end; text-align: right; } /* Phones: no room for a notes column, so the metadata drops to a second line — but the date stays a real gutter column, so wrapped description text and the metadata line stay indented under the description, never under the date. */ @media (max-width: 599px) { .exp-main:has(.exp-date) { grid-template-columns: auto 1fr; } .exp-main:has(.exp-date) .exp-date { grid-column: 1; grid-row: 1; } .exp-main:has(.exp-date) .exp-desc { grid-column: 2; grid-row: 1; } .exp-main:has(.exp-date) .exp-meta { grid-column: 2; grid-row: 2; justify-content: flex-start; text-align: left; } } .exp:hover { background: var(--surface); } .exp-main:hover { text-decoration: none; } .exp-main:hover .exp-desc { color: var(--accent); } .exp-date { font-family: var(--mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; } /* Descriptions wrap; they never truncate — the tail is the part that says what it was. */ .exp-desc { font-weight: 500; font-size: 0.95rem; overflow-wrap: anywhere; } .exp-meta { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: baseline; } /* Plain chips are quiet annotations, not pills. */ .chip { font-size: 0.78rem; color: var(--muted); background: none; border: none; border-radius: 0; padding: 0; } .exp-meta .chip + .chip::before { content: "· "; opacity: 0.6; } .exp-amount { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.92rem; white-space: nowrap; } .exp-amount s { font-weight: 400; margin-right: 0.25rem; color: var(--muted); } /* Status chips stay loud: small caps with a leading dot in the status colour. */ .chip-green, .chip-amber, .chip-red, .chip-blue, .chip-violet, .chip-grey { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; background: none; border: none; padding: 0; } .chip-green::before, .chip-amber::before, .chip-red::before, .chip-blue::before, .chip-violet::before, .chip-grey::before { content: "\25CF"; margin-right: 0.32em; font-size: 0.6em; vertical-align: 0.18em; } .chip-green { color: var(--success-text); } .chip-amber { color: var(--warn-text); } .chip-red { color: var(--danger-text); } .chip-blue { color: var(--info-text); } .chip-violet { color: var(--violet-text); } .chip-grey { color: var(--muted); } /* What the claim is waiting on — the bit that says which of the two it is. */ .exp-waiting { font-size: 0.78rem; color: var(--muted); } /* Padding + negative margin: a ~44px touch target without shifting the row layout. */ .linkbtn.danger { color: var(--danger-text); font-size: 1rem; padding: 0.6rem 0.7rem; margin: -0.6rem -0.5rem; border-radius: 7px; } .linkbtn.danger:hover { color: var(--danger-text); background: var(--danger-soft); } /* Flat, per the mock: the group's label does the work, not a box around it. */ fieldset { border: 0; border-radius: 0; padding: 0; margin: 0; } fieldset legend { padding: 0; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .cats .total-row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.2rem; } .cats .total-row strong { font-family: var(--mono); } .money { text-align: right; } .inline-card { margin-top: -0.5rem; } .receipt-current { margin: 0.3rem 0 0.6rem; } .crop-wrap { max-height: 320px; background: var(--crop-bg); border-radius: 7px; overflow: hidden; } .crop-wrap img { max-width: 100%; display: block; } @media (min-width: 600px) { .crop-wrap { max-height: 440px; } } /* Cropper.js handles. The library ships every handle at 5px except the south-east one at 20px, so seven of the eight corners are near-impossible to grab — especially on a phone, which is where most receipts are cropped. Restyled to a consistent size with a hit area much larger than the visible dot, so precision is not required to grab one. These selectors carry an extra class deliberately: the vendor stylesheet is loaded after this file, so matching its specificity would lose. */ /* Long-pressing to drag the crop box was raising Chrome's "save image" sheet on Android (the image is a data: URL, so it offers a .bin download). Suppress the callout and any text/image selection across the whole cropping surface. */ .crop-wrap { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .crop-wrap img { -webkit-user-drag: none; } .crop-wrap { --grip: 13px; } @media (pointer: coarse) { .crop-wrap { --grip: 18px; } } .crop-wrap .cropper-point { width: var(--grip); height: var(--grip); opacity: 1; background-color: var(--accent-fill); /* Fixed white/black: the handles sit on the photo, not on a themed surface. */ border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); } .crop-wrap .cropper-point.point-n { top: calc(var(--grip) / -2); margin-left: calc(var(--grip) / -2); } .crop-wrap .cropper-point.point-s { bottom: calc(var(--grip) / -2); margin-left: calc(var(--grip) / -2); } .crop-wrap .cropper-point.point-e { right: calc(var(--grip) / -2); margin-top: calc(var(--grip) / -2); } .crop-wrap .cropper-point.point-w { left: calc(var(--grip) / -2); margin-top: calc(var(--grip) / -2); } .crop-wrap .cropper-point.point-ne { top: calc(var(--grip) / -2); right: calc(var(--grip) / -2); } .crop-wrap .cropper-point.point-nw { top: calc(var(--grip) / -2); left: calc(var(--grip) / -2); } /* point-se also needs its size restated: the vendor re-sizes it inside width media queries, which outrank the shared rule above purely by source order. */ .crop-wrap .cropper-point.point-se { bottom: calc(var(--grip) / -2); right: calc(var(--grip) / -2); width: var(--grip); height: var(--grip); opacity: 1; } .crop-wrap .cropper-point.point-sw { bottom: calc(var(--grip) / -2); left: calc(var(--grip) / -2); } /* Invisible pad: a fingertip lands near the dot rather than on it. */ .crop-wrap .cropper-point::after { content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); } /* The vendor's own oversized pad on the SE corner, now redundant and asymmetric. */ .crop-wrap .cropper-point.point-se::before { display: none; } /* Edges are drag targets too — thicken them so they can be grabbed by touch. */ .crop-wrap .cropper-line { opacity: 0.25; } .crop-wrap .cropper-line.line-n, .crop-wrap .cropper-line.line-s { height: 8px; } .crop-wrap .cropper-line.line-e, .crop-wrap .cropper-line.line-w { width: 8px; } .crop-wrap .cropper-line.line-n { top: -4px; } .crop-wrap .cropper-line.line-s { bottom: -4px; } .crop-wrap .cropper-line.line-e { right: -4px; } .crop-wrap .cropper-line.line-w { left: -4px; } .crop-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; } /* Multiple receipts */ .receipt-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .receipt-row { display: flex; gap: 0.75rem; align-items: flex-start; border-top: 1px solid var(--border); padding-top: 0.75rem; } .receipt-row:first-child { border-top: none; padding-top: 0; } .receipt-thumb { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; /* Fixed white in both themes — receipts are white paper. */ background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); } .receipt-thumb img { width: 100%; height: 100%; object-fit: cover; } .pdf-tag { position: absolute; bottom: 2px; right: 2px; font-size: 0.6rem; font-weight: 700; color: #fff; background: rgba(0,0,0,0.7); padding: 0 0.25rem; border-radius: 3px; letter-spacing: 0.03em; } .receipt-meta { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; } .btn.small { padding: 0.34rem 0.7rem; font-size: 0.85rem; align-self: flex-start; } .add-receipt { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 0.5rem; } /* Repeating receipt rows */ .rcpt-row { border: 1px solid var(--border); border-radius: 7px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .rcpt-top { display: flex; align-items: center; gap: 0.5rem; } .rcpt-pick { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 1; } .rcpt-details { display: flex; flex-direction: column; gap: 0.5rem; } .rcpt-filename { margin: 0; word-break: break-all; } /* `capture` is ignored on desktop, where this button would just open a second file picker — so only offer it where a camera is actually plausible. */ .rcpt-camera { display: none; } @media (pointer: coarse) { .rcpt-camera { display: inline-flex; } } #receipt-add-row { margin-bottom: 0.5rem; } .ex-rcpt.removed { opacity: 0.45; } .ex-rcpt.removed .receipt-meta { text-decoration: line-through; } /* Submissions */ .exp-check { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; accent-color: var(--accent-fill); } /* Docked selection bar: mono summary left, action right, over a strong rule. */ .submit-bar { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; /* Safe-area inset: viewport-fit=cover means the bar can sit under an iPhone home indicator without it. */ padding: 0.8rem 0 calc(0.8rem + env(safe-area-inset-bottom)); border-top: 2px solid var(--rule-strong); background: var(--bg); } .submit-bar .sel-summary { font-family: var(--mono); font-size: 0.85rem; font-weight: 600; } .submit-bar .btn { flex: 0 0 auto; } /* Wide pages: a single roomier column first; home only splits into claims | submissions on genuinely wide screens, where each column still gets full ledger-line room. */ @media (min-width: 1100px) { .container.wide { max-width: 960px; } .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.2rem; align-items: start; } } @media (min-width: 1400px) { .container.wide { max-width: 1240px; } .home-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 2.8rem; align-items: start; } } /* Totals: a ledger foot — mono figures, double rule above the grand total. */ .totals { width: 100%; border-collapse: collapse; } .totals td { padding: 0.45rem 0; border-top: 1px solid var(--border); } .totals td:last-child { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } .totals tr:first-child td { border-top: none; } .totals tr.grand td { font-weight: 700; border-top: 3px double var(--rule-strong); padding-top: 0.6rem; } .totals tr.grand td:last-child { font-size: 1.05rem; color: var(--accent); } [data-theme="light"] .totals tr.grand td:last-child { color: var(--text); } /* Send-to-finance checklist: big serif numerals that become ticks. */ .steps { list-style: none; margin: 0.5rem 0 0; padding: 0; counter-reset: step; } .steps > li { counter-increment: step; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.75rem; padding: 1rem 0; border-top: 1px solid var(--border); } .steps > li:first-child { border-top: none; } .steps > li::before { content: counter(step) "."; font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--rule-strong); line-height: 1.05; } .steps > li.done::before { content: "\2713"; color: var(--accent); } .step-title { font-weight: 650; margin-bottom: 0.35rem; } .steps .row { gap: 0.5rem; } .step-hint { margin-top: 0.5rem; } .step-actions { grid-column: 2; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; } /* Desktop: actions ride in their own right-aligned column, like a ledger's action margin. */ @media (min-width: 700px) { .steps > li { grid-template-columns: 2.2rem 1fr auto; } .step-actions { grid-column: auto; justify-content: flex-end; } } /* Persistent completion note ("Downloaded just now") — feedback, never gating. */ .step-note { display: block; color: var(--accent); font-size: 0.8rem; font-weight: 600; margin-top: 0.25rem; } .step-note.st-part { color: var(--warn-text); } .step-note.st-rej { color: var(--danger-text); } /* The finalise and record-outcome forms live inside a step's body. */ .step-form { max-width: 30rem; margin-top: 0.5rem; gap: 0.8rem; } .preview-row { align-items: center; margin-bottom: 1rem; } .preview-row .hint { flex: 1 1 14rem; margin: 0; } .outcome-actions { display: flex; justify-content: flex-end; margin-top: 0.9rem; } .rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } @media (min-width: 600px) { .rate-grid { grid-template-columns: 1fr 1fr 1fr; } } /* Fixed white — it frames a white PDF page. */ .pdf-preview { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: 7px; background: #fff; } .allowance-line { border-top: 1px solid var(--border); padding-top: 0.6rem; margin: 0.6rem 0 0; font-style: italic; } .adj-form { margin-top: 0.5rem; } .apikey-new { display: inline-block; word-break: break-all; } /* Flash toast — a one-shot confirmation that a POST actually did something. */ .flash { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 4.25rem); display: flex; align-items: center; gap: 0.75rem; width: calc(100% - 2rem); max-width: 26rem; padding: 0.7rem 0.9rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule-strong); box-shadow: 0 8px 24px var(--shadow); opacity: 1; transition: opacity 0.35s ease, transform 0.35s ease; animation: flash-in 0.25s ease-out; } .flash.leaving { opacity: 0; transform: translateX(-50%) translateY(-0.5rem); } /* Once there is room, tuck it into the corner rather than over the page heading. */ @media (min-width: 700px) { .flash { left: auto; right: 1rem; transform: none; width: auto; min-width: 16rem; } .flash.leaving { transform: translateY(-0.5rem); } } .flash-text { flex: 1; font-size: 0.92rem; } .flash-close { flex: 0 0 auto; cursor: pointer; border: none; background: none; color: var(--muted); font-size: 0.9rem; padding: 0.1rem 0.2rem; } .flash-close:hover { color: var(--text); } .flash-success { border-color: var(--success); } .flash-success .flash-text { color: var(--success-text); } .flash-error { border-color: var(--danger); } .flash-error .flash-text { color: var(--danger-text); } @keyframes flash-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .flash { animation: none; transition: none; } } /* Confirmation modal (native ) */ .modal { border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--surface); color: var(--text); padding: 1.25rem; width: calc(100% - 2rem); max-width: 26rem; } .modal::backdrop { background: var(--backdrop); } .modal h3 { margin: 0 0 0.5rem; font-size: 1.05rem; } .modal p { margin: 0 0 1rem; } .modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; } .btn.danger-btn { border-color: var(--danger); color: var(--danger-text); } .btn.danger-btn:hover { background: var(--danger-soft); border-color: var(--danger); } /* Collapsible sections: small-caps slab labels over a rule, in place of card boxes. */ details.card > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.4rem; } details.card > summary::-webkit-details-marker { display: none; } details.card > summary h2 { margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text); } details.card > summary::after { content: "\25BE"; color: var(--muted); font-size: 0.8rem; transition: transform 0.15s ease; flex: 0 0 auto; } details.card[open] > summary::after { transform: rotate(180deg); } details.card > summary:hover::after { color: var(--text); } /* Select-all sits in the section header, a size down from the row checkboxes so the heading still reads as a heading rather than as another ledger line. */ details.card > summary > .select-all { width: 1rem; height: 1rem; flex: 0 0 auto; align-self: center; /* Pulls back most of the summary's 1rem gap: the box belongs to the heading. */ margin: 0 -0.45rem 0 0; accent-color: var(--accent-fill); cursor: pointer; } details.card > summary > .select-all:disabled { cursor: default; opacity: 0.4; } .summary-meta { color: var(--muted); font-size: 0.8rem; margin-left: auto; font-variant-numeric: tabular-nums; } details.card > :not(summary):first-of-type { margin-top: 0.6rem; } @media (prefers-reduced-motion: reduce) { details.card > summary::after { transition: none; } } /* Item amount: one field + a category, expandable to the full split. */ .cats-simple { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.6rem; align-items: end; } .cats-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .cats-foot { display: flex; justify-content: flex-end; margin-top: 0.7rem; } .cats-foot .linkbtn { font-size: 0.85rem; color: var(--accent); } .cats-foot .linkbtn:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; } /* Toggle switches — for the on/off settings (VATable, include-in-submission) where a bare checkbox reads as "tick this box" rather than as a state you are setting. */ input.switch { appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; cursor: pointer; margin: 0; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--rule-strong); transition: background 0.15s ease, border-color 0.15s ease; } input.switch::after { content: ""; position: absolute; top: 50%; left: 2px; transform: translateY(-50%); width: 1rem; height: 1rem; border-radius: 50%; background: var(--muted); transition: transform 0.15s ease, background 0.15s ease; } input.switch:checked { background: var(--accent-fill); border-color: var(--accent-fill); } input.switch:checked::after { transform: translateY(-50%) translateX(1.05rem); background: #fff; } input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input.switch:disabled { opacity: 0.5; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { input.switch, input.switch::after { transition: none; } } /* VATable + VAT amount on one line — deliberate: the common case is "on, auto", so this stays a single compact row (the amount hides when the switch is off). Aligned to the bottom so the switch lines up with the input itself, not the input plus its label. */ .vat-row { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: end; } .vat-row .checkbox { margin: 0; white-space: nowrap; padding-bottom: 0.72rem; } .vat-row .vat-amount { margin: 0; } /* Form action bar: saves left, destructive action pushed right on the same row; stacked full-width on phones. */ .form-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } .form-actions .btn { flex: 1 1 auto; } .form-actions .danger-btn { flex: 0 0 auto; margin-left: auto; } @media (max-width: 599px) { .form-actions { flex-direction: column; } .form-actions .danger-btn { margin-left: 0; } } .footer { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 1rem; } code { background: var(--surface-2); padding: 0.05rem 0.3rem; border-radius: 4px; font-family: var(--mono); font-size: 0.85em; }