/* ============================================================ DESIGN TOKENS ------------------------------------------------------------ Every colour, size, radius and shadow in this file should come from here. Before these existed the file carried 167 distinct hex values, 36 font sizes, 13 radii and 20 shadows -- six ways to write "the border colour", eight ways to write "the blue". That inconsistency, not any individual page, is what made the app look unfinished. Rules: - Never write a raw hex in a component rule. Add a token, or use the nearest one. - Type and space come off the scales below. If a value is not on the scale, it is wrong, not special. - The legacy aliases at the bottom (--bg, --text, --accent...) exist because ~200 existing rules reference them. They are defined in terms of the ramps, so there is exactly one source of truth. Prefer the ramp names in new code. ============================================================ */ .access-tabs { display:flex; gap:var(--space-2); border-bottom:1px solid var(--line); } .access-tabs button { background:var(--surface-2); color:var(--ink-600); border:1px solid var(--line); padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm) var(--radius-sm) 0 0; } .access-tabs button.active { background:var(--brand-100); color:var(--brand-700); border-bottom-color:var(--brand-100); } .access-toolbar { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); background:var(--surface-3); border:1px solid var(--line); } /* The user/group access editor. Two columns that stop growing: stretched across a wide screen, the Read..Delete boxes sat half a metre from their labels (Graeme, 2026-09-30). Permissions on the left; Privileges and User's roles stacked on the right, as checklists rather than tables. */ .access-columns { display:grid; grid-template-columns:minmax(0,40rem) minmax(0,26rem); gap:var(--space-6); align-items:start; margin-top:var(--space-4); } .access-side { display:grid; gap:var(--space-6); align-content:start; } .access-panel { border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-1); overflow:hidden; } .access-panel > p { margin:0; padding:var(--space-3) var(--space-4); border-top:1px solid var(--line-soft); } .access-columns input[type=checkbox] { width:auto; margin:0; accent-color:var(--brand-600); } .access-grid { width:100%; border-collapse:collapse; } .access-grid th, .access-grid td { padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--line-soft); } .access-grid thead th { font-size:var(--text-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-500); background:var(--surface-2); } .access-grid thead th:not(:first-child), .access-grid td { width:5rem; text-align:center; } .access-grid tbody th { text-align:left; font-weight:500; color:var(--ink-800); } .access-grid tbody tr:last-child > * { border-bottom:0; } .access-grid tbody tr:hover > * { background:var(--surface-2); } .access-checklist { list-style:none; margin:0; padding:0; } .access-checklist li { border-bottom:1px solid var(--line-soft); } .access-checklist li:last-child { border-bottom:0; } .access-checklist label { display:flex; align-items:flex-start; gap:var(--space-3); margin:0; padding:var(--space-2) var(--space-4); font-weight:400; color:var(--ink-800); cursor:pointer; } .access-checklist input[type=checkbox] { margin-top:.2em; flex:0 0 auto; } .access-checklist small { display:block; font-size:var(--text-xs); color:var(--ink-500); } .access-checklist li:hover { background:var(--surface-2); } .access-grid thead th:first-child { text-align:left; } /* Maximizer's three-state box ("User and Group Security - advanced"): this principal's OWN setting -- Granted, Denied, Not set -- with the combined result as a hint: via-group = not set here but a group grants it; overridden = granted here but a denial (or missing Read) wins. */ .access-box { display:inline-flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; padding:0; margin:0; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface-1); color:var(--ink-400); font-size:var(--text-xs); font-weight:700; line-height:1; vertical-align:middle; box-shadow:none; } button.access-box { cursor:pointer; } button.access-box:hover:not(:disabled) { border-color:var(--brand-500); } button.access-box:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; } .access-box.allow { background:var(--brand-600); border-color:var(--brand-600); color:var(--on-accent); } .access-box.deny { background:var(--danger-bg); border-color:var(--danger); color:var(--danger); } .access-box.via-group { color:var(--brand-400); border-style:dashed; } .access-box.overridden { background:var(--surface-3); border-color:var(--line-strong); color:var(--ink-500); text-decoration:line-through; } .access-legend { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin:0; padding:var(--space-3) var(--space-4); border-top:1px solid var(--line-soft); } .access-legend > span { display:inline-flex; align-items:center; gap:var(--space-2); } .access-readonly { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-2) var(--space-4); color:var(--ink-800); } /* The read-only tick: a greyed disabled checkbox looks the same ticked or not. */ .access-mark { display:inline-flex; align-items:center; justify-content:center; width:1.25rem; height:1.25rem; flex:0 0 auto; border-radius:var(--radius-sm); font-size:var(--text-xs); font-weight:700; color:var(--ink-400); } .access-mark.on { background:var(--brand-100); color:var(--brand-700); } /* Sales team member: the person, then the right they hold on the team's deals. Wraps rather than squeezing the select on a phone. */ .team-member-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-1) 0; border-bottom:1px solid var(--line-soft); } .team-member-row select { width:auto; min-width:8rem; } /* minmax(0,…), not 1fr: a 1fr track grows to its table's minimum width, so the table widened the page instead of scrolling. */ @media (max-width: 1100px) { .access-columns { grid-template-columns:minmax(0,1fr); } } @media (max-width: 600px) { .access-grid thead th:not(:first-child), .access-grid td { width:auto; padding-inline:var(--space-1); } } /* "Copy access and settings from" -- Maximizer's copy user, above the tabs' content. */ /* A wrapping row, not a grid: a max-content track sized itself off the checkbox label and pushed the page 1,800px wide. */ .access-copy { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4); padding:var(--space-3); border:1px solid var(--line); border-top:0; background:var(--surface-2); } .access-copy > label { margin:0; flex:0 0 auto; } .access-copy > select { flex:0 1 22rem; width:auto; min-width:0; max-width:100%; } .access-copy .checkbox-row { display:inline-flex; align-items:center; gap:var(--space-2); width:auto; } .access-copy .checkbox-row input { width:auto; flex:0 0 auto; margin:0; } .access-copy p { flex:1 1 100%; min-width:0; margin:0; } :root { color-scheme: light; /* --- brand ------------------------------------------------ */ --brand-700: #4643a5; --brand-600: #5752c7; /* primary actions, links */ --brand-500: #6964dd; --brand-400: #8d89ea; --brand-300: #b1aef3; /* borders on selected/hovered brand fills */ --brand-200: #d3d1f9; --brand-100: #ecebfd; /* selected row / active nav fill */ --brand-50: #f7f6ff; /* hover fill */ /* --- print: paper is white whatever the screen theme, so these are never redefined for dark mode (QuotePrint). ---------------- */ --print-ink: #172033; --print-paper: #ffffff; /* --- ink (text) ------------------------------------------- */ --ink-900: #172033; /* page headings */ --ink-800: #202b3f; /* strong text, figures */ --ink-700: #344055; /* panel titles */ --ink-600: #4b5870; --ink-500: #637087; /* body */ --ink-400: #7e899b; /* muted / captions */ --ink-300: #a0a9b8; /* faint / meta */ /* --- surfaces & lines ------------------------------------- */ --canvas: #f7f8fb; /* page ground */ --surface-1: #ffffff; /* cards, panels */ --surface-2: #fafbfc; /* table heads, subtle fills */ --surface-3: #f1f3f7; /* filter bands, callouts */ --line: #e5e8ef; /* default border */ --line-strong: #ccd3df; /* form controls */ --line-soft: #f0f2f6; /* dividers inside a card */ /* --- semantic --------------------------------------------- */ --success: #1a7a3f; --success-bg: #e6f7ec; --danger: #c43d45; --danger-fg: #8c2626; --danger-bg: #fdeaea; --danger-line:#e5a3a3; --warning: #b45309; --warning-bg: #fff8e6; --warning-line:#e6d08a; /* Data colours: what a figure MEANS. Only ever on the datum itself (a number, a bar, a slice) -- never on chrome. */ --data-won: #2f9e63; --data-progress: #33bcd0; --data-lost: #e0393f; /* Pipeline stage colours. One set, read by both the tiles above the Opportunities list and the "Pipeline by stage" bars on Home -- which disagreed until 2026-09-14, the tiles using these hues and the bars a separate indigo ramp, so the same stage was two colours depending on the page. Crm.Core's PipelineStageTone decides which tone a stage gets; these say what each tone looks like. The -soft variants are the tile backgrounds. */ --stage-qualify: #4c8bf5; --stage-analysis: #8a68d8; --stage-proposal: #d98a35; --stage-review: #1a9f91; --stage-open: #4c8bf5; --stage-won: #168a58; --stage-lost: #d85d6d; --stage-qualify-soft: #f5f8ff; --stage-analysis-soft: #f9f7ff; --stage-proposal-soft: #fff9f1; --stage-review-soft: #f2fbfa; --stage-open-soft: #f5f8ff; --stage-won-soft: #f2fcf7; --stage-lost-soft: #fff6f7; /* Text/icons sitting ON a saturated fill. Stays white in both themes, because the fills it sits on stay dark in both. */ --on-accent: #ffffff; /* Tinted outlines for won / lost / at-risk chips and stage steps. Alpha rather than a flat tint so they hold on any surface. */ --success-line: #1a7a3f44; --danger-line-soft: #8c262644; --warning-line-soft: #d03b3b44; /* The one non-blue accent in the app (individual-contact badge, field-change timeline markers). Named so it stays the only one. */ --accent-purple: #7655a7; --accent-purple-strong: #5b3f8c; --accent-purple-bg: #f6f1fb; /* Module colours identify where you are. Each is paired with one very pale wash; saturated colour is reserved for icons and rails. */ --module-company: #0f9888; --module-company-soft: #e8f8f4; --module-person: #7959d6; --module-person-soft: #f1edff; --module-lead: #df6b45; --module-lead-soft: #fff0e9; --module-work: #c68b18; --module-work-soft: #fff7df; --module-activity: #198e5a; --module-activity-soft: #eaf8f0; --module-opportunity: #1689b3; --module-opportunity-soft: #e9f7fc; --module-case: #cd5573; --module-case-soft: #fff0f4; --module-quote: #4f8a1f; --module-quote-soft: #f1f9e8; --module-campaign: #dc7a28; --module-campaign-soft: #fff3e8; --module-report: #426fbd; --module-report-soft: #edf3fc; /* Form accents make editable CRM data easy to pick out without colouring the whole application chrome. */ --field-accent: #5752c7; --field-accent-soft: #efefff; --field-accent-hover: #dedcff; --field-label: #514f7c; --section-accent: var(--module-company); --section-accent-soft: var(--module-company-soft); /* Navigation rail: a cool indigo shell with brighter, purpose-built icon colours. These are intentionally separate from the module colours used on white content surfaces, where the same values would be loud. */ --nav-top: #191a37; --nav-mid: #302e69; --nav-bottom: #504b9c; --nav-icon-home: #b8c4ff; --nav-icon-company: #55e0cb; --nav-icon-person: #d3b1ff; --nav-icon-lead: #ff9b72; --nav-icon-work: #ffd166; --nav-icon-calendar: #6ed6ff; --nav-icon-activity: #69e6a6; --nav-icon-opportunity: #55ddef; --nav-icon-case: #ff86a8; --nav-icon-quote: #a3e36a; --nav-icon-campaign: #ffae61; --nav-icon-library: #f2ba5c; --nav-icon-report: #83b6ff; --nav-icon-inbox: #c9a8ff; --nav-icon-import: #5ce0a1; --nav-icon-setup: #d1c9dc; /* --- type scale (16px root: 11 12 13 14 15 16 18 22 28) ---- */ --text-2xs: .6875rem; --text-xs: .75rem; --text-sm: .8125rem; --text-md: .875rem; /* body default */ --text-lg: .9375rem; --text-xl: 1rem; --text-2xl: 1.125rem; --text-3xl: 1.375rem; --text-4xl: 1.75rem; /* The one monospace stack. Two rules (.merge-field code and .policy-grid textarea) already asked for --font-mono with a bare 'monospace' fallback and never got it, because nothing defined the token -- so they silently rendered in whatever the browser picked. Everything that shows a key, a code or a CIDR block reads from here. */ --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; /* --- space scale (4px base) -------------------------------- */ --space-0: .125rem; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; /* --- radius ------------------------------------------------ */ --radius-sm: 6px; --radius-md: 9px; --radius-lg: 14px; --radius-pill: 999px; --font-sans: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; /* --- elevation -------------------------------------------- Layered, not single. A tight "contact" shadow says the edge is touching the surface; a wider, softer one says it is above it. One blurry shadow gives neither and just looks smudged. --highlight-top is the other half: a 1px inset light line on the top edge, which is what actually reads as a raised object rather than a rectangle with a shadow under it. */ --shadow-sm: 0 1px 1px rgba(20, 35, 80, .04), 0 1px 2px rgba(20, 35, 80, .06); --shadow-md: 0 1px 2px rgba(20, 35, 80, .06), 0 2px 6px rgba(20, 35, 80, .06), 0 8px 16px -6px rgba(20, 35, 80, .08); --shadow-lg: 0 1px 3px rgba(20, 35, 80, .08), 0 8px 20px -4px rgba(20, 35, 80, .10), 0 24px 44px -12px rgba(20, 35, 80, .14); /* Hover/active lift, paired with a 1px translate. */ --shadow-raise: 0 1px 2px rgba(20, 35, 80, .07), 0 6px 12px -2px rgba(20, 35, 80, .10), 0 16px 28px -10px rgba(20, 35, 80, .12); --highlight-top: inset 0 1px 0 rgba(255, 255, 255, .75); --shadow-press: inset 0 2px 4px rgba(20, 35, 80, .16); /* --- legacy aliases (see header) --------------------------- */ --bg: var(--canvas); --surface: var(--surface-1); --border: var(--line); --text: var(--ink-800); --muted: var(--ink-400); --accent: var(--brand-600); --crm-primary: var(--brand-600); --error-bg: var(--danger-bg); --error-border: var(--danger-line); --error-text: var(--danger-fg); --warn-bg: var(--warning-bg); --warn-border: var(--warning-line); --warn-text: #6b5410; } .skip-to-content { position: fixed; left: .75rem; top: .5rem; z-index: 3000; transform: translateY(-180%); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--brand-600); color: var(--on-accent) !important; font-weight: 600; transition: transform .15s ease; } .skip-to-content:focus { transform: translateY(0); } /* Persisted appearance mode. The indigo-violet brand remains recognisable while neutral charcoal surfaces keep the dark workspace calm. */ html.theme-dark { color-scheme: dark; /* Redefine the RAMPS, not each component. Anything styled through a token is dark-mode correct for free; the per-component html.theme-dark rules further down are legacy and can go as their components move onto tokens. */ /* The brand ramp is NOT inverted. These steps are fills as often as they are text, and --on-accent (white) sits on them -- lightening them would put white text on pale blue. Only the two tint steps, which are backgrounds, move. Link text in dark is handled by the html.theme-dark a rule further down. */ /* --brand-700 is only ever TEXT (43 uses, no fills), usually on a --brand-50/100 tint, so unlike the fill steps it must lighten here: at #514db9 the active tab and selected-menu text vanished. */ --brand-700: #c3c0fa; --brand-600: #5d5bd4; --brand-500: #706de1; --brand-400: #9895ef; --brand-300: #5856a8; --brand-200: #413f7c; --brand-100: #302f59; --brand-50: #26263f; --ink-900: #f2f6ff; --ink-800: #e7eefb; --ink-700: #dbe4f4; --ink-600: #c4d1e6; --ink-500: #b3c0d6; --ink-400: #a8b6cc; --ink-300: #8f9cb3; --canvas: #11131e; --surface-1: #1a1d2b; --surface-2: #222638; --surface-3: #292d43; --field-accent: #9895ef; --field-accent-soft: #302f55; --field-accent-hover: #3c396b; --field-label: #b7b4ef; --section-accent: #54d6c4; --section-accent-soft: #173d45; --line: #383e58; --line-strong: #4a5270; --line-soft: #30354b; --success: #57c98d; --success-bg: #15271e; --danger: #f08a8f; --danger-fg: #f3a3a7; --danger-bg: #331d1e; --danger-line:#6d3538; --warning: #e0a85c; --warning-bg: #2c2416; --warning-line:#5c4a24; /* Keep module identity vivid without pale panels glaring in dark mode. */ --module-company: #54d6c4; --module-company-soft: #173d3b; --module-person: #b7a0ff; --module-person-soft: #352b50; --module-lead: #ffac87; --module-lead-soft: #472f2c; --module-work: #edc565; --module-work-soft: #40371e; --module-activity: #71d8a0; --module-activity-soft: #203d31; --module-opportunity: #72cee9; --module-opportunity-soft: #203b4b; --module-case: #f39ab4; --module-case-soft: #452a3b; --module-quote: #a9dc7a; --module-quote-soft: #2e3a24; --module-campaign: #ffbd79; --module-campaign-soft: #443423; --module-report: #9dbfff; --module-report-soft: #293850; /* Data colours lift slightly so they hold on a dark ground. */ --data-won: #4dc07f; --data-progress: #4fd3e6; --data-lost: #f0605f; /* The stage tints are backgrounds; left at their light values they were near-white panels on the dark canvas. */ --stage-qualify-soft: color-mix(in srgb, var(--stage-qualify) 16%, var(--surface-1)); --stage-analysis-soft: color-mix(in srgb, var(--stage-analysis) 16%, var(--surface-1)); --stage-proposal-soft: color-mix(in srgb, var(--stage-proposal) 16%, var(--surface-1)); --stage-review-soft: color-mix(in srgb, var(--stage-review) 16%, var(--surface-1)); --stage-open-soft: color-mix(in srgb, var(--stage-open) 16%, var(--surface-1)); --stage-won-soft: color-mix(in srgb, var(--stage-won) 16%, var(--surface-1)); --stage-lost-soft: color-mix(in srgb, var(--stage-lost) 16%, var(--surface-1)); --accent-purple-bg: color-mix(in srgb, var(--accent-purple) 18%, var(--surface-1)); --accent-purple-strong: #c7b0ee; /* Depth on a dark ground comes mostly from the highlight, not the shadow -- a black shadow on near-black reads as nothing. */ --shadow-sm: 0 1px 1px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .35); --shadow-md: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .38), 0 10px 20px -8px rgba(0, 0, 0, .45); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 24px -4px rgba(0, 0, 0, .45), 0 28px 48px -14px rgba(0, 0, 0, .55); --shadow-raise: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 16px -2px rgba(0, 0, 0, .45), 0 20px 32px -12px rgba(0, 0, 0, .5); --highlight-top: inset 0 1px 0 rgba(255, 255, 255, .07); --shadow-press: inset 0 2px 5px rgba(0, 0, 0, .5); --warn-text: #e2c98c; /* Legacy names still referenced by ~40 rules below. */ --crm-bg: var(--canvas); --crm-surface: var(--surface-1); --crm-surface-raised: var(--surface-2); --crm-text: var(--ink-800); --crm-muted: var(--ink-400); --crm-line: var(--line); } html.theme-dark body { background: var(--crm-bg); color: var(--crm-text); } html.theme-dark .app-shell, html.theme-dark .main-content { background: var(--crm-bg); color: var(--crm-text); } /* Keep keyboard focus visible across every control. Several compact toolbar buttons intentionally remove their default browser outline; this restores one consistent, high-contrast indicator. */ :where(a, button, input, select, textarea):focus-visible { outline:2px solid var(--crm-primary); outline-offset: 2px; } html.theme-dark .modal, html.theme-dark .report-builder, html.theme-dark .workqueue-card, html.theme-dark .dashboard-panel { background: var(--crm-surface); color: var(--crm-text); } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } html.theme-dark input, html.theme-dark textarea, html.theme-dark select { background: var(--crm-surface-raised); color: var(--crm-text); } html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: var(--crm-muted); } html.theme-dark .detail-section, html.theme-dark .record-summary { border-color: var(--crm-line); } /* A legacy classless anchor still needs an intentional CRM treatment. New navigation/actions should use the existing button, record-link, or panel-link pattern; prose links keep this compact, tinted fallback. Menus and the related-record rail have their own whole-row styling. */ a { color: var(--brand-600); } a:hover { color: var(--brand-700); } a:visited { color: var(--brand-600); } html.theme-dark a { color:var(--brand-400); } a:not([class]):not([role="menuitem"]):not(.record-rail a):not(.action-menu-panel a):not(.avatar-menu-popover a) { padding: .07em .25em; border-radius: var(--radius-sm); background: var(--brand-50); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-300); text-underline-offset: .18em; box-decoration-break: clone; } a:not([class]):not([role="menuitem"]):not(.record-rail a):not(.action-menu-panel a):not(.avatar-menu-popover a):hover { background: var(--brand-100); text-decoration-color: currentColor; } html.theme-dark a:not([class]):not([role="menuitem"]):not(.record-rail a):not(.action-menu-panel a):not(.avatar-menu-popover a) { background: var(--crm-surface-raised); text-decoration-color: var(--brand-400); } html.theme-dark .theme-toggle { color: var(--crm-text); } .theme-toggle { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--text-2xl); line-height: 1; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); } .theme-toggle:hover, .theme-toggle:focus-visible { background: rgba(255,255,255,.14); outline: 2px solid currentColor; outline-offset: 2px; } html.theme-dark .muted { color: var(--crm-muted) !important; } /* A #anchor jump (SectionJumpNav.razor) should glide, not snap -- respects the user's own OS/browser reduced-motion setting, which auto-disables smooth scrolling regardless of this rule. */ html { scroll-behavior: smooth; } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); } h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-4); } code { font-family: Consolas, "Courier New", monospace; font-size: .9em; } .muted { color: var(--muted); } /* Typography scale, added when MudText was removed. MudBlazor's Typo values were a visual scale rather than document structure -- Typo.h5 was used for currency figures and Typo.subtitle2 for uppercase section labels -- so these are classes, not headings. Promoting the ones that really are page titles to

/

is worth doing, but separately: real heading elements would immediately pick up rules like ".detail-form h2" and change layout, which is not this change's job. Sizes come off the type scale rather than copying MudBlazor's px. */ .text-h4 { font-size: var(--text-4xl); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; } .text-h5 { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; } .text-h6 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.3; } .text-subtitle1 { font-size: var(--text-xl); font-weight: 500; } .text-subtitle2 { font-size: var(--text-md); font-weight: 600; } .text-body2 { font-size: var(--text-md); } .text-caption { font-size: var(--text-xs); } .small { font-size: var(--text-md); } /* --- login ------------------------------------------------------- */ .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); width: 100%; max-width: 380px; box-shadow: var(--shadow-sm); } .login-card .workspace { margin: calc(-1 * var(--space-2)) 0 var(--space-5); color: var(--muted); } /* --- single sign-on ------------------------------------------------ */ .sso-button { display: block; width: 100%; margin-top: var(--space-5); text-align: center; } /* A rule with the word "or" sitting on it, so the two ways in read as alternatives rather than as steps. */ .sso-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0; color: var(--muted); font-size: var(--text-sm); } .sso-divider::before, .sso-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* --- two-step verification -------------------------------------- Both of these hold strings that get read off a screen and typed somewhere else, so they are set in a monospace face with generous letter-spacing: the whole job here is telling 5 from S and 8 from B at a glance. */ .setup-key { font-family: var(--font-mono); font-size: var(--text-2xl); letter-spacing: .08em; word-break: break-all; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); margin: var(--space-3) 0; text-align: center; } .recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); list-style: none; padding: var(--space-3); margin: var(--space-4) 0; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-lg); letter-spacing: .04em; text-align: center; } /* One column on a narrow screen: a ten-character code wrapping mid-string is worse than a longer list. */ @media (max-width: 30rem) { .recovery-codes { grid-template-columns: 1fr; } } label { display: block; margin: var(--space-4) 0 var(--space-1); font-weight: 600; font-size: var(--text-md); } input[type=text], input[type=email], input[type=password] { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-size: var(--text-md); font-family: inherit; background: var(--surface-1); /* The inverse of a button: a field is a hole, not a lump. A faint inset shadow at the top edge is what makes it read as recessed next to a raised control. */ box-shadow: inset 0 1px 2px rgba(20, 35, 80, .07); } /* Every other form control, app-wide. Until 2026-10-01 only text, email and password boxes had a house style; dropdowns, text areas and number, date and search inputs were browser defaults anywhere a page had not styled its own (list filters, admin screens), which is most of what made screens look unfinished next to each other. Same box as the text input above. The dropdown keeps the browser's own arrow on purpose: several page rules set the background shorthand, which would silently erase a drawn chevron and leave a select with no arrow at all. */ input:not([type]), input[type=search], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=tel], input[type=url], select, textarea { padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-size: var(--text-md); font-family: inherit; color: var(--ink-800); background-color: var(--surface-1); box-shadow: inset 0 1px 2px rgba(20, 35, 80, .07); transition: border-color .15s ease, box-shadow .15s ease; } input:not([type]), input[type=search], input[type=tel], input[type=url], textarea { width: 100%; } textarea { resize: vertical; line-height: 1.45; } select { cursor: pointer; max-width: 100%; } input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--field-accent); } /* A search box that draws its own frame (the app bar, list searches) holds a bare input: no second box inside it. */ .appbar-search input, .search-field input, .record-search-box input, .report-search input, .record-access-search input, .sales-mailbox-search input, html.theme-dark :is(.appbar-search, .search-field, .record-search-box, .report-search, .record-access-search, .sales-mailbox-search) input { box-shadow: none; background-color: transparent; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } input:disabled, select:disabled, textarea:disabled { background-color:var(--surface-2); color: var(--muted); cursor: not-allowed; } input[type=checkbox], input[type=radio] { accent-color: var(--brand-600); } /* A bare