/* --------------------------------------------------------------------------- AAI Business Portal — design tokens and shell. The palette lives here as custom properties so it is changed in exactly one place. Semantics come from docs/UI-STYLE.md. --------------------------------------------------------------------------- */ :root { color-scheme: light; /* Surfaces */ --aai-page-bg: #f4f5f7; --aai-surface: #ffffff; /* Zebra striping, card headers — a whisper away from --aai-surface. */ --aai-surface-alt: #fafbfc; --aai-border: #d9dce1; --aai-border-strong: #b6bcc4; --aai-radius: 4px; --aai-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); /* Text */ --aai-text: #1f2733; --aai-text-muted: #5b6672; --aai-text-inverse: #ffffff; /* Primary — Save, Finalize, table headers. --aai-primary is a FILL and always carries --aai-text-inverse on top of it. --aai-accent is the same idea used as ink: link hovers, focus rings, tab labels. They are one colour in light mode and must diverge in dark, where a fill dark enough for white text is far too dark to read as text itself. */ --aai-primary: #1d3f73; --aai-primary-hover: #16325c; --aai-primary-soft: #e8eef7; --aai-accent: #1d3f73; /* Secondary — Print, PDF, Email, Duplicate */ --aai-secondary-bg: #fdf3d8; --aai-secondary-hover: #f8e9c2; --aai-secondary-border: #8a6d1f; --aai-secondary-text: #5c4712; /* Destructive — Delete, Void. Used as ink, so it lightens in dark mode; --aai-status-overdue is the matching fill and does not. */ --aai-danger: #b42318; --aai-danger-soft: #fdeceb; /* Status semantics — all fills, all carrying white text. */ --aai-status-draft: #6b7280; --aai-status-unpaid: #b45309; --aai-status-partial: #1d4ed8; --aai-status-paid: #15803d; --aai-status-overdue: #b42318; --aai-status-void: #4b5563; --aai-status-trash: #767d87; --aai-content-max: 1280px; } /* --- Dark theme ----------------------------------------------------------- Applied by wwwroot/js/theme.js, which sets data-theme on before the body paints. "Auto" resolves to light or dark there rather than through a media query here, so one code path produces the palette and the explicit choice cannot be silently overridden by the OS. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --aai-page-bg: #12161c; --aai-surface: #1a1f27; --aai-surface-alt: #212832; --aai-border: #2f3843; --aai-border-strong: #47525f; --aai-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --aai-text: #e6e9ee; --aai-text-muted: #a2adba; --aai-primary: #2f5590; --aai-primary-hover: #3a68ac; --aai-primary-soft: #22314a; --aai-accent: #86b4f2; --aai-secondary-bg: #3d3316; --aai-secondary-hover: #4a3e1b; --aai-secondary-border: #b99a3e; --aai-secondary-text: #f0dca6; --aai-danger: #ff8b80; --aai-danger-soft: #3a1d1a; /* Nudged lighter so a filled badge separates from the dark surface behind it, while keeping white text above 4.5:1. */ --aai-status-draft: #6f7681; --aai-status-unpaid: #b8590c; --aai-status-partial: #2c5ce0; --aai-status-paid: #17853f; --aai-status-overdue: #c0271b; --aai-status-void: #565f6b; --aai-status-trash: #6b737d; } body { background-color: var(--aai-page-bg); color: var(--aai-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; } .aai-shell { max-width: var(--aai-content-max); margin: 0 auto; padding: 1.5rem 1rem 3rem; } /* --- Top navigation ------------------------------------------------------ */ .aai-nav { background: var(--aai-primary); color: var(--aai-text-inverse); box-shadow: var(--aai-shadow); } .aai-nav-inner { max-width: var(--aai-content-max); margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; gap: 1.25rem; min-height: 52px; flex-wrap: wrap; } .aai-brand { font-weight: 600; letter-spacing: 0.02em; color: var(--aai-text-inverse); text-decoration: none; white-space: nowrap; } .aai-nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .aai-nav-links a, .aai-nav-links span { display: block; padding: 0.4rem 0.7rem; border-radius: var(--aai-radius); color: rgba(255, 255, 255, 0.86); text-decoration: none; font-size: 0.92rem; white-space: nowrap; } .aai-nav-links a:hover { background: rgba(255, 255, 255, 0.12); color: var(--aai-text-inverse); } .aai-nav-links a.active { background: rgba(255, 255, 255, 0.18); color: var(--aai-text-inverse); font-weight: 600; } /* Modules that do not exist yet. Visible so the shell reads as complete, but inert so nothing links to a 404. */ .aai-nav-links span.pending { color: rgba(255, 255, 255, 0.45); cursor: not-allowed; } .aai-nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; } .aai-company-name { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); white-space: nowrap; } /* --- Cards --------------------------------------------------------------- */ .aai-card { background: var(--aai-surface); border: 1px solid var(--aai-border); border-radius: var(--aai-radius); box-shadow: var(--aai-shadow); padding: 1.25rem; margin-bottom: 1.25rem; } .aai-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -1.25rem -1.25rem 1rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--aai-border); background: var(--aai-surface-alt); border-radius: var(--aai-radius) var(--aai-radius) 0 0; } .aai-card-header h2 { font-size: 1rem; font-weight: 600; margin: 0; } /* --- Page heading -------------------------------------------------------- */ .aai-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .aai-page-head h1 { font-size: 1.5rem; font-weight: 600; margin: 0; } /* --- Buttons ------------------------------------------------------------- */ .btn-aai-primary { background: var(--aai-primary); border: 1px solid var(--aai-primary); color: var(--aai-text-inverse); } .btn-aai-primary:hover, .btn-aai-primary:focus { background: var(--aai-primary-hover); border-color: var(--aai-primary-hover); color: var(--aai-text-inverse); } .btn-aai-secondary { background: var(--aai-secondary-bg); border: 1px solid var(--aai-secondary-border); color: var(--aai-secondary-text); } .btn-aai-secondary:hover, .btn-aai-secondary:focus { background: var(--aai-secondary-hover); color: var(--aai-secondary-text); } .btn-aai-danger { background: transparent; border: 1px solid var(--aai-danger); color: var(--aai-danger); } .btn-aai-danger:hover, .btn-aai-danger:focus { background: var(--aai-danger-soft); color: var(--aai-danger); } /* --- Status badges. Text always present; colour is never the only signal. -- */ .aai-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--aai-text-inverse); white-space: nowrap; } .aai-badge-draft { background: var(--aai-status-draft); } .aai-badge-unpaid { background: var(--aai-status-unpaid); } .aai-badge-partial { background: var(--aai-status-partial); } .aai-badge-paid { background: var(--aai-status-paid); } .aai-badge-overdue { background: var(--aai-status-overdue); } .aai-badge-void { background: var(--aai-status-void); text-decoration: line-through; } .aai-badge-trash { background: var(--aai-status-trash); } /* --- Data tables --------------------------------------------------------- */ .aai-table { width: 100%; border-collapse: collapse; background: var(--aai-surface); } .aai-table thead th { background: var(--aai-primary); color: var(--aai-text-inverse); font-weight: 600; font-size: 0.85rem; text-align: left; padding: 0.6rem 0.75rem; } .aai-table tbody td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--aai-border); } .aai-table tbody tr:nth-child(even) { background: var(--aai-surface-alt); } .aai-numeric { text-align: right; font-variant-numeric: tabular-nums; } /* Wide tables scroll inside their own container; the page never scrolls sideways. */ .aai-table-scroll { overflow-x: auto; } /* --- Dashboard tiles ----------------------------------------------------- */ .aai-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; } .aai-tile { background: var(--aai-surface); border: 1px solid var(--aai-border); border-radius: var(--aai-radius); box-shadow: var(--aai-shadow); padding: 1rem; } .aai-tile-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--aai-text-muted); margin-bottom: 0.4rem; } .aai-tile-value { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; } .aai-tile-value.is-negative { color: var(--aai-danger); } .aai-tile-value.is-alert { color: var(--aai-danger); } .aai-tile-empty { color: var(--aai-text-muted); font-size: 0.95rem; } .aai-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .aai-module-card { display: block; background: var(--aai-surface); border: 1px solid var(--aai-border); border-radius: var(--aai-radius); box-shadow: var(--aai-shadow); padding: 1rem; text-decoration: none; color: var(--aai-text); } .aai-module-card:hover { border-color: var(--aai-accent); color: var(--aai-text); } .aai-module-card.pending { opacity: 0.55; cursor: not-allowed; } .aai-module-title { font-weight: 600; margin-bottom: 0.25rem; } .aai-module-desc { font-size: 0.85rem; color: var(--aai-text-muted); } /* --- Forms --------------------------------------------------------------- */ .aai-required::after { content: " *"; color: var(--aai-danger); } .aai-field-hint { font-size: 0.83rem; color: var(--aai-text-muted); } .aai-form-actions { display: flex; gap: 0.5rem; align-items: center; padding-top: 0.5rem; border-top: 1px solid var(--aai-border); margin-top: 1rem; } /* --- Auth pages ---------------------------------------------------------- */ .aai-auth-shell { max-width: 420px; margin: 4rem auto; padding: 0 1rem; } /* --- Status tab strip ---------------------------------------------------- */ .aai-tab-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; } .aai-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--aai-border); background: var(--aai-surface); color: var(--aai-text-muted); text-decoration: none; font-size: 0.9rem; } .aai-tab:hover { border-color: var(--aai-accent); color: var(--aai-accent); } .aai-tab.active { background: var(--aai-primary); border-color: var(--aai-primary); color: var(--aai-text-inverse); font-weight: 600; } .aai-tab-count { display: inline-block; min-width: 1.5rem; text-align: center; padding: 0 0.35rem; border-radius: 999px; background: var(--aai-primary-soft); color: var(--aai-accent); font-size: 0.8rem; font-weight: 600; } .aai-tab.active .aai-tab-count { background: rgba(255, 255, 255, 0.22); color: var(--aai-text-inverse); } /* --- Document view / print ----------------------------------------------- */ .aai-doc-head, .aai-doc-parties, .aai-doc-footer { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; } .aai-doc-standing-footer { margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--aai-border); color: var(--aai-text-muted); font-size: 0.85rem; text-align: center; white-space: pre-line; } .aai-doc-company { font-size: 1.1rem; font-weight: 600; } /* --- Document background (watermark / letterhead) ------------------------ Behind the content, clipped to the document card so it matches the paper edge rather than the browser window. The three custom properties are set inline per document from the company profile; everything else is here. -------------------------------------------------------------------------- */ /* --- The document as a sheet of paper ------------------------------------ Drawn at the real page size from /branding/document.css, so the preview is the printed page rather than a browser-width approximation of it. Falls back to Letter if that stylesheet has not loaded. min-height, not height: a long invoice has to grow rather than clip. It then stops matching the printed pagination, which the HTML view cannot reproduce — the PDF is the authority for anything longer than a page. -------------------------------------------------------------------------- */ .aai-document { width: var(--aai-page-width, 8.5in); min-height: var(--aai-page-height, 11in); max-width: 100%; margin-inline: auto; padding: 15mm; /* The document is a picture of a sheet of paper, and paper is white whatever the screen is set to. Re-declaring the tokens here rather than restyling each part means everything inside — table, badges, totals, watermark — inherits the light palette without knowing anything about themes. Deliberately the same values as :root. They are not "light mode" values, they are what the PDF prints, and this is the preview of the PDF. */ --aai-surface: #ffffff; --aai-surface-alt: #fafbfc; --aai-border: #d9dce1; --aai-border-strong: #b6bcc4; --aai-text: #1f2733; --aai-text-muted: #5b6672; --aai-primary: #1d3f73; --aai-primary-hover: #16325c; --aai-primary-soft: #e8eef7; --aai-accent: #1d3f73; --aai-danger: #b42318; --aai-danger-soft: #fdeceb; --aai-status-draft: #6b7280; --aai-status-unpaid: #b45309; --aai-status-partial: #1d4ed8; --aai-status-paid: #15803d; --aai-status-overdue: #b42318; --aai-status-void: #4b5563; --aai-status-trash: #767d87; /* Native controls and scrollbars inside the sheet follow it rather than the app. */ color-scheme: light; color: var(--aai-text); } /* The sheet stops being a useful metaphor once it is wider than the screen. */ @media (max-width: 900px) { .aai-document { width: 100%; min-height: 0; padding: 1.25rem; } } .aai-document.has-background { position: relative; overflow: hidden; } .aai-doc-background { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .aai-doc-background img { /* object-fit: contain across the full box is exactly what preserveAspectRatio="xMidYMid meet" does in the PDF wrapper. Capping the size instead only ever scales an image DOWN, so anything smaller than the sheet stayed at its natural size on screen while the PDF blew it up to fit — the same watermark at two different sizes depending where you looked at it. */ width: 100%; height: 100%; object-fit: contain; opacity: var(--aai-doc-bg-opacity, 0.1); transform: rotate(var(--aai-doc-bg-rotate, 0deg)) scale(var(--aai-doc-bg-scale, 1)); transform-origin: center; } /* Everything that is not the background needs to sit above it. A bare z-index on the background is not enough: the content has no stacking context of its own, so it would paint underneath. */ .aai-document.has-background > *:not(.aai-doc-background) { position: relative; z-index: 1; } /* The watermark was being hidden by the things drawn on top of it rather than by anything wrong with the watermark itself. .aai-table carries an opaque surface fill, and the zebra striping another, so the wash appeared only in the gaps around the items table — "behind the text" and nowhere else. Inside a document with a background, those fills come off. The header bar keeps its brand fill: it is a deliberate block of colour and the PDF draws it the same way, so the two match. */ .aai-document.has-background .aai-table, .aai-document.has-background .aai-table tbody tr, .aai-document.has-background .aai-table tbody tr:nth-child(even), .aai-document.has-background .aai-card, .aai-document.has-background .aai-card-header { background: transparent; } /* Preserves the newlines in snapshotted address text without any HTML in the data. */ .aai-doc-block { white-space: pre-line; margin-bottom: 0.5rem; } .aai-doc-brand { text-align: right; } .aai-doc-logo { max-height: 80px; max-width: 220px; } .aai-doc-type { font-size: 1.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aai-text-muted); font-weight: 600; } .aai-doc-meta table, .aai-doc-totals table { border-collapse: collapse; } .aai-doc-meta th, .aai-doc-totals th { text-align: left; font-weight: 500; color: var(--aai-text-muted); padding: 0.25rem 1.25rem 0.25rem 0; } .aai-doc-meta td, .aai-doc-totals td { padding: 0.25rem 0; font-variant-numeric: tabular-nums; } .aai-doc-totals { min-width: 280px; } .aai-doc-total-row th, .aai-doc-total-row td { border-top: 1px solid var(--aai-border-strong); font-weight: 700; color: var(--aai-text); } .aai-balance-row th, .aai-balance-row td { background: var(--aai-primary-soft); font-weight: 700; } .aai-doc-notes { flex: 1; } /* --- Accessibility ------------------------------------------------------- */ .aai-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .aai-skip-link { position: absolute; left: -9999px; } .aai-skip-link:focus { left: 0.5rem; top: 0.5rem; z-index: 1000; background: var(--aai-surface); padding: 0.5rem 0.75rem; border-radius: var(--aai-radius); } /* --- Tablet -------------------------------------------------------------- */ @media (max-width: 900px) { .aai-nav-inner { gap: 0.5rem; } .aai-filter-row { flex-direction: column; align-items: stretch; } } /* --- Layout utilities ---------------------------------------------------- These exist because the Content-Security-Policy is style-src 'self' with no 'unsafe-inline', which blocks style="" attributes just as firmly as it blocks inline scripts. Every one of these started life as an inline style that the browser was quietly dropping — including the pre-line rule on customer addresses, which made multi-line addresses render as one run-on line. A new rule belongs here, not on the element. -------------------------------------------------------------------------- */ .aai-narrow { max-width: 560px; } .aai-narrow-sm { max-width: 460px; } .aai-input-md { max-width: 320px; } /* Honours the newlines in a stored address or template body. */ .aai-pre-line { white-space: pre-line; } .aai-col-wide { min-width: 260px; } .aai-w-40 { width: 40px; } .aai-w-80 { width: 80px; } .aai-w-90 { width: 90px; } .aai-w-100 { width: 100px; } .aai-w-120 { width: 120px; } .aai-logo-preview { max-height: 90px; max-width: 100%; } .aai-background-preview { max-height: 150px; max-width: 100%; border: 1px solid var(--aai-border); } /* --- Role badges --------------------------------------------------------- */ .aai-badge-admin { background: var(--aai-status-partial); } .aai-badge-manager { background: var(--aai-status-paid); } .aai-badge-viewer { background: var(--aai-status-draft); } .aai-badge-suspended { background: var(--aai-status-void); } /* --- Theme selector ------------------------------------------------------ */ .aai-theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: 2rem; height: 2rem; padding: 0; border-radius: var(--aai-radius); border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: var(--aai-text-inverse); cursor: pointer; } .aai-theme-btn:hover, .aai-theme-btn:focus-visible { background: rgba(255, 255, 255, 0.24); color: var(--aai-text-inverse); } /* The signed-out pages have no navigation bar to hang the control on, so it floats. */ .aai-theme-floating { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 1030; } .aai-theme-floating .aai-theme-btn { border-color: var(--aai-border-strong); background: var(--aai-surface); color: var(--aai-text); box-shadow: var(--aai-shadow); } .aai-theme-floating .aai-theme-btn:hover, .aai-theme-floating .aai-theme-btn:focus-visible { background: var(--aai-surface-alt); color: var(--aai-text); } /* Exactly one icon shows: the one matching the *chosen* mode, so "Auto" stays visibly Auto rather than masquerading as whatever the OS resolved it to. */ .aai-theme-icon { display: none; width: 1.05rem; height: 1.05rem; } :root[data-theme-choice="auto"] .aai-theme-icon-auto, :root[data-theme-choice="light"] .aai-theme-icon-light, :root[data-theme-choice="dark"] .aai-theme-icon-dark, :root:not([data-theme-choice]) .aai-theme-icon-auto { display: block; } .aai-theme-option { display: flex; align-items: center; gap: 0.5rem; } .aai-theme-option .aai-theme-check { margin-left: auto; opacity: 0; } .aai-theme-option.is-selected .aai-theme-check { opacity: 1; } .aai-theme-option .aai-theme-icon { display: block; flex: none; } /* --- Print --------------------------------------------------------------- */ @page { /* Letter is the default paper. The size is a company setting, so the document view overrides this with an inline @page rule when A4 is chosen — a static stylesheet cannot read a database. */ size: letter; margin: 15mm; } @media print { /* On paper the sheet IS the page, so the simulated one would double the margins. */ .aai-document { width: auto; min-height: 0; padding: 0; } .aai-nav, .aai-form-actions, .aai-no-print, .alert { display: none !important; } /* Browsers drop backgrounds and dim images when printing unless told not to. A watermark that vanishes on paper is worse than no watermark, because it looks correct on screen right up to the moment it matters. */ .aai-doc-background img { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Fixed rather than absolute so the watermark repeats on every printed sheet. An absolutely positioned element is laid out once, inside the first page's worth of the card, and a two-page invoice prints the second page bare. */ .aai-doc-background { position: fixed; inset: 0; } /* Same reason as on screen, and again !important because the print block already forces these to white further down. */ .aai-document.has-background .aai-table, .aai-document.has-background .aai-table tbody tr, .aai-document.has-background .aai-table tbody tr:nth-child(even) { background: transparent !important; } body { background: #fff; color: #000; font-size: 11pt; } .aai-shell { max-width: none; padding: 0; } .aai-card { border: none; box-shadow: none; padding: 0; margin: 0; } .aai-document { max-width: none; } /* Table headers lose their fill so they do not eat a print cartridge. */ .aai-table thead th { background: #fff !important; color: #000 !important; border-bottom: 1px solid #000; } .aai-table tbody tr:nth-child(even) { background: #fff; } .aai-badge { color: #000 !important; background: #fff !important; border: 1px solid #000; } .aai-balance-row th, .aai-balance-row td { background: #fff !important; border-top: 2px solid #000; } /* A line item or the totals block split across a page break is unreadable. */ .aai-doc-items tr, .aai-doc-totals, .aai-doc-footer { page-break-inside: avoid; } .aai-table-scroll { overflow-x: visible; } a { text-decoration: none; color: #000; } }