/* ============================================================
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.
============================================================ */
:root {
color-scheme: light;
/* --- brand ------------------------------------------------ */
--brand-700: #4643a5;
--brand-600: #5752c7; /* primary actions, links */
--brand-500: #6964dd;
--brand-400: #8d89ea;
--brand-100: #ecebfd; /* selected row / active nav fill */
--brand-50: #f7f6ff; /* hover fill */
/* --- 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;
/* Ordered pipeline ramp: one hue, deepening as a deal approaches close. */
--pipeline-stage-1: #a7a4f2;
--pipeline-stage-2: #8580e6;
--pipeline-stage-3: #6762d7;
--pipeline-stage-4: #4d49b4;
/* 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-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-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: .65rem 1rem; border-radius: .35rem; background: var(--brand-600); color: #fff !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: #514db9;
--brand-600: #5d5bd4;
--brand-500: #706de1;
--brand-400: #9895ef;
--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;
/* Data colours lift slightly so they hold on a dark ground. */
--data-won: #4dc07f;
--data-progress: #4fd3e6;
--data-lost: #f0605f;
/* 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);
/* --- MudBlazor -------------------------------------------------
MudBlazor has its OWN dark mode, switched by IsDarkMode on
MudThemeProvider -- a component parameter. MainLayout renders
statically (see App.razor), so nothing can set that flag without a
circuit, and the result was half a dark mode: our CSS went dark
while the app bar stayed white and the navigation drawer went LIGHTER.
MudBlazor styles everything from these custom properties, so
redefining them here puts its components under the same class
toggle as the rest of the app. One switch, one dark mode. */
--mud-palette-black: #05070d;
--mud-palette-white: var(--ink-900);
--mud-palette-background: var(--canvas);
--mud-palette-background-gray: var(--surface-2);
--mud-palette-surface: var(--surface-1);
--mud-palette-drawer-background: #191a37;
--mud-palette-drawer-text: var(--ink-700);
--mud-palette-drawer-icon: var(--ink-500);
--mud-palette-appbar-background: var(--surface-1);
--mud-palette-appbar-text: var(--ink-800);
--mud-palette-text-primary: var(--ink-800);
--mud-palette-text-secondary: var(--ink-400);
--mud-palette-text-disabled: var(--ink-300);
--mud-palette-action-default: var(--ink-400);
--mud-palette-action-default-hover: rgba(255, 255, 255, .06);
--mud-palette-action-disabled: var(--ink-300);
--mud-palette-action-disabled-background: var(--surface-3);
--mud-palette-divider: var(--line);
--mud-palette-divider-light: var(--line-soft);
--mud-palette-lines-default: var(--line);
--mud-palette-lines-inputs: var(--line-strong);
--mud-palette-table-lines: var(--line);
--mud-palette-table-striped: var(--surface-2);
--mud-palette-table-hover: var(--surface-3);
--mud-palette-primary: var(--brand-600);
--mud-palette-primary-text: var(--on-accent);
--mud-palette-primary-hover: rgba(93, 91, 212, .14);
--mud-palette-secondary: #3ecbb0;
--mud-palette-tertiary: #a78bfa;
--mud-palette-success: var(--success);
--mud-palette-error: var(--danger);
--mud-palette-warning: var(--warning);
--mud-palette-info: var(--brand-400);
}
html.theme-dark body { background: var(--crm-bg); color: var(--crm-text); }
html.theme-dark .mud-layout,
html.theme-dark .main-content,
html.theme-dark .mud-main-content { background: var(--crm-bg); color: var(--crm-text); }
/* Keep keyboard focus visible across native controls and MudBlazor links.
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, #5752c7);
outline-offset: 2px;
}
html.theme-dark .mud-paper,
html.theme-dark .mud-card,
html.theme-dark .mud-dialog,
html.theme-dark .mud-table-container,
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,
html.theme-dark .mud-input-slot { 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 .mud-table th,
html.theme-dark .mud-table td,
html.theme-dark .detail-section,
html.theme-dark .record-summary { border-color: var(--crm-line); }
html.theme-dark a { 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: 1.2rem; line-height: 1; padding: .45rem .65rem; border-radius: .35rem; }
.theme-toggle:hover, .theme-toggle:focus-visible { background: rgba(255,255,255,.14); outline: 2px solid currentColor; outline-offset: 2px; }
html.theme-dark .mud-typography-color-text-secondary,
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: 1.5rem; margin: 0 0 1rem; }
code { font-family: Consolas, "Courier New", monospace; font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
/* --- login ------------------------------------------------------- */
.login-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.login-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 2rem;
width: 100%;
max-width: 380px;
box-shadow: var(--shadow-sm);
}
.login-card .workspace {
margin: -.5rem 0 1.5rem;
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: 1rem 0 .25rem;
font-weight: 600;
font-size: .875rem;
}
input[type=text], input[type=email], input[type=password] {
width: 100%;
padding: var(--space-2) .625rem;
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);
}
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input:disabled { background:var(--surface-2); color: var(--muted); }
/* :not(.mud-button-root) matters. This is an element selector, so
without it every MudButton rendered as type=submit is repainted as a
filled primary button regardless of its Variant -- which is why the
app bar's "Sign out" (declared Variant.Text, Color.Inherit) came out
as a saturated blue block and was the loudest thing on every screen.
Component-library markup is not ours to restyle by element. */
button[type=submit]:not(.mud-button-root), .button {
display: inline-block;
margin-top: var(--space-5);
padding: var(--space-2) var(--space-4);
background: var(--accent);
color:var(--on-accent);
border: 0;
border-radius: var(--radius-md);
font-size: var(--text-md);
font-family: inherit;
cursor: pointer;
text-decoration: none;
/* A control should feel pressable: sitting slightly proud at rest,
lifting on hover, and sinking under the pointer. The inset
highlight on the top edge is what sells it -- without it this is
a coloured rectangle with a shadow. */
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.18);
transition: box-shadow .14s ease, transform .14s ease, background .14s ease;
}
button[type=submit]:not(.mud-button-root):hover:not(:disabled), .button:hover:not(:disabled) {
box-shadow: var(--shadow-raise), inset 0 1px 0 rgba(255,255,255,.18);
transform: translateY(-1px);
}
button[type=submit]:not(.mud-button-root):active:not(:disabled), .button:active:not(:disabled) {
box-shadow: var(--shadow-press);
transform: translateY(1px);
}
button[type=submit]:not(.mud-button-root):disabled, .button:disabled {
background: var(--ink-300); cursor: not-allowed; box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
button[type=submit]:not(.mud-button-root), .button, .sid-kpi { transition: none; }
button[type=submit]:not(.mud-button-root):hover, .button:hover,
.sid-kpi:hover { transform: none; }
}
button.link {
background: none;
border: 0;
color: var(--accent);
cursor: pointer;
font: inherit;
padding: 0;
text-decoration: underline;
}
.alert {
padding: .625rem .75rem;
border-radius: 4px;
margin-bottom: 1rem;
font-size: .9rem;
}
.alert.error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); }
.alert.warning { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); }
.alert.success { background:var(--success-bg); border:1px solid var(--success-line); color:var(--success); }
.alert.success a { color: inherit; font-weight: 600; }
.validation-message { color: var(--error-text); font-size: .8rem; display: block; margin-top: .25rem; }
/* --- app --------------------------------------------------------- */
.page { max-width: 900px; margin: 0 auto; padding: 0 1rem 3rem; }
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 1rem 0;
border-bottom: 1px solid var(--border);
margin-bottom: 2rem;
}
/* --- global search (top nav) -------------------------------------- */
.global-search { flex: 0 1 12rem; display: flex; }
.global-search input[type=search] {
width: 100%;
padding: .375rem .625rem;
border: 1px solid var(--border);
border-right: 0;
border-radius: 4px 0 0 4px;
font-size: .875rem;
font-family: inherit;
}
.global-search button {
padding: .375rem .625rem;
border: 1px solid var(--border);
border-radius: 0 4px 4px 0;
background: var(--surface);
color: var(--muted);
cursor: pointer;
font: inherit;
}
.global-search button:hover { color: var(--accent); border-color: var(--accent); }
/* --- MudBlazor app bar search --------------------------------------
Plain HTML, styled to sit inside the app bar -- see MainLayout.razor's
own comment on why this isn't a MudTextField. A light grey pill on a
white bar (Salesforce Lightning's own search-bar treatment), not the
translucent-on-colour style this had when the bar itself was solid
blue -- kept in sync with CrmTheme's AppbarBackground being white now. */
.appbar-search {
display: flex; align-items: center; gap: .375rem;
background:var(--surface-2); border-radius: 999px;
padding: .5rem 1rem; width: 22rem; max-width: 34vw;
}
.appbar-search-icon { color:var(--mud-palette-text-secondary, var(--ink-400)) !important; flex-shrink: 0; }
.appbar-search input[type=search] {
background: none; border: 0; outline: 0; color:var(--mud-palette-text-primary, var(--ink-900));
font: inherit; font-size: .875rem; width: 100%;
}
.appbar-search input[type=search]::placeholder { color:var(--mud-palette-text-secondary, var(--ink-400)); }
.appbar-search-kbd {
font-family: "IBM Plex Mono", monospace; font-size: .6875rem;
color:var(--mud-palette-text-secondary, var(--ink-400)); background:var(--surface-2);
border-radius: 4px; padding: .0625rem .3125rem; flex-shrink: 0;
}
/* --- page content area, inside MudMainContent -----------------------
padding-top deliberately omitted: MudMainContent already sets its own
top offset (via --mud-appbar-height) to clear the fixed MudAppBar --
a same-specificity rule here, loaded after MudBlazor's own
stylesheet, silently wins the cascade and overrides it, which is
exactly what put "Welcome, Graeme" invisibly behind the app bar the
first time this was tried (found live in the browser, not by
re-reading the CSS -- the accessibility tree had the heading, the
screenshot didn't). */
.main-content {
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 3rem;
padding-top: calc(var(--mud-appbar-height, 64px) + 1.5rem);
min-width: 0;
}
.mud-main-content { min-width: 0; }
.main-content .page { max-width: none; margin: 0; padding: 0; }
.clickable-row { cursor: pointer; }
.clickable-row:focus-visible { outline:2px solid var(--crm-primary,#5752c7); outline-offset: -2px; }
.calendar-more { border:0; background:transparent; cursor:pointer; padding:.15rem .25rem; text-align:left; }
.calendar-more:hover, .calendar-more:focus-visible { color:var(--crm-primary,var(--brand-500)); text-decoration:underline; }
.route-error { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:50vh; gap:.75rem; text-align:center; padding:2rem; }
.route-error p { color:var(--muted,var(--ink-500)); margin:0; }
.activity-subject-link { color: inherit; text-decoration: none; }
.activity-subject-link:hover, .activity-subject-link:focus-visible { color:var(--crm-primary, var(--brand-500)); text-decoration: underline; }
/* Softer shadows and a readable active link on the deep indigo drawer
rail. MudBlazor stays the component substrate (see CrmTheme.cs's own
comment); these are the finishing touches a theme/radius change alone
doesn't reach.
The pill override (.mud-button-filled { border-radius: 999px }) is
gone on purpose: fully round buttons next to 4-10px panels and inputs
read as two different products, and MudBlazor now takes --radius-md
from the theme like everything else. */
.mud-elevation-1 { box-shadow: var(--shadow-sm) !important; }
.mud-drawer .mud-nav-link.active,
.mud-drawer a.active {
background: linear-gradient(90deg, rgba(112,132,220,.32), rgba(112,132,220,.12)) !important;
color:var(--on-accent) !important;
}
.mud-drawer .mud-nav-link.active .mud-icon-root,
.mud-drawer a.active .mud-icon-root {
color:var(--on-accent) !important;
}
/* Cool indigo workspace rail, inspired by the supplied reference while
leaving the working canvas intentionally light. The gradient belongs
only to navigation; forms, record cards, tables and text inputs keep
--surface (#fff) so data entry remains crisp and high contrast. */
.mud-drawer {
background:
radial-gradient(circle at 0 0, rgba(154, 151, 255, .16), transparent 25rem),
linear-gradient(180deg, var(--nav-top) 0%, var(--nav-mid) 48%, var(--nav-bottom) 100%) !important;
}
.mud-drawer .mud-nav-link,
.mud-drawer .mud-navgroup .mud-nav-link,
.mud-drawer .mud-nav-link .mud-icon-root,
.mud-drawer .mud-navgroup .mud-icon-root {
color: rgba(247,249,255,.92) !important;
}
.mud-drawer .mud-nav-link:hover,
.mud-drawer .mud-navgroup .mud-nav-link:hover {
background: rgba(255,255,255,.09) !important;
color:var(--on-accent) !important;
}
.mud-drawer .mud-navgroup .mud-nav-link-text,
.mud-drawer .mud-nav-link-text { font-weight: 500; }
/* Small module colour cues make scanning the purple rail easier without
changing the calm data-entry surfaces in the rest of the CRM. */
.mud-drawer .nav-home .mud-icon-root { color: #b8ccff !important; }
.mud-drawer .nav-company .mud-icon-root { color: #65d7ca !important; }
.mud-drawer .nav-person .mud-icon-root { color: #c8b6ff !important; }
.mud-drawer .nav-lead .mud-icon-root { color: #ffb38a !important; }
.mud-drawer .nav-work .mud-icon-root { color: #ffd166 !important; }
.mud-drawer .nav-calendar .mud-icon-root { color: #8fd3ff !important; }
.mud-drawer .nav-activity .mud-icon-root { color: #7ee0a7 !important; }
.mud-drawer .nav-opportunity .mud-icon-root { color: #56d4e6 !important; }
.mud-drawer .nav-case .mud-icon-root { color: #f5a3b5 !important; }
.mud-drawer .nav-campaign .mud-icon-root { color: #ffbd7a !important; }
.mud-drawer .nav-library .mud-icon-root { color: #d7c6a2 !important; }
.mud-drawer .nav-report .mud-icon-root { color: #84d1f3 !important; }
.mud-drawer .nav-inbox .mud-icon-root { color: #c7b9ff !important; }
.mud-drawer .nav-import .mud-icon-root { color: #8fdea3 !important; }
.mud-drawer .nav-setup .mud-icon-root { color: #b7c5da !important; }
/* --- sidebar collapse-to-icons (NavMenu.razor) -----------------------
The drawer's own width is a MudBlazor default (240px, --mud-drawer-
width-left) set nowhere in our own code -- rather than fighting it
with a Blazor Width parameter that MainLayout would have to own and
somehow learn NavMenu's collapse state to set, :has() lets the
width live purely in CSS, reacting to a class NavMenu only ever
toggles on itself. */
.nav-collapse-toggle {
display: flex; align-items: center; justify-content: center;
width: 1.75rem; height: 1.75rem; margin: .5rem 0 .25rem auto;
background: none; border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
color: rgba(255,255,255,.7); cursor: pointer;
}
.nav-collapse-toggle:hover { background: rgba(255,255,255,.1); color:var(--on-accent); }
.nav-collapsed .nav-collapse-toggle { margin-right: 0; }
.mud-layout:has(.nav-collapsed) { --mud-drawer-width-left: 3.5rem !important; }
.mud-drawer:has(.nav-collapsed) { width: 3.5rem !important; min-width: 3.5rem !important; }
.mud-drawer-container:has(.nav-collapsed) .mud-drawer { width: 3.5rem !important; min-width: 3.5rem !important; }
/* MudMainContent normally gets its left offset from MudBlazor's drawer
width variable. Keep an explicit sibling rule as well: older MudBlazor
builds calculate the offset inline before the nested NavMenu class is
rendered, which leaves a 240px blank gutter beside the icon rail. */
.mud-drawer:has(.nav-collapsed) ~ .mud-main-content {
margin-left: 3.5rem !important;
width: calc(100% - 3.5rem) !important;
}
/* MudBlazor has used both a direct drawer sibling and a drawer container
wrapper across releases. Apply the same offset at the layout level so a
collapsed rail never leaves the former full-width gutter behind. */
.mud-layout:has(.nav-collapsed) .mud-main-content {
margin-left: 3.5rem !important;
width: calc(100% - 3.5rem) !important;
}
.mud-drawer-container:has(.nav-collapsed) ~ .mud-main-content {
margin-left: 3.5rem !important;
width: calc(100% - 3.5rem) !important;
}
.nav-collapsed .mud-nav-link-text,
.nav-collapsed .mud-navgroup-text { display: none; }
.nav-collapsed .mud-nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
.nav-collapsed .mud-nav-link-icon { margin-right: 0 !important; }
/* Icon rail only, same reasoning Zoho's own collapsed sidebar follows
-- a nested Admin submenu has nowhere legible to render at 56px
wide without a flyout, which is a bigger feature than the collapse
toggle itself. */
.nav-collapsed .mud-navgroup .mud-collapse-container { display: none !important; }
/* A white app bar needs a hairline to separate it from the page --
the colour bar it replaced didn't, its own solid fill did that job. */
.mud-appbar { border-bottom:1px solid var(--line); }
/* Keep the working canvas usable beside the compact rail on laptops and
split-screen browser windows. The wide desktop gutters are helpful at
full width, but become wasted horizontal space once the viewport is
narrow; the page itself already provides card-level spacing. */
@media (max-width: 1100px) {
.main-content {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media (max-width: 700px) {
.main-content {
padding-left: .625rem;
padding-right: .625rem;
}
}
/* Respect the operating system's accessibility preference. The CRM has
drag/drop cards, drawer transitions and button hover effects, but none
of those should override a user's reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
/* --- command palette (CommandPalette.razor) -------------------------
Plain markup, not a MudBlazor popover component -- see that
component's own top comment for why. Fixed positioning so it sits
above the app shell (drawer, app bar) regardless of which page
mounted it. */
.cmdk-overlay {
position: fixed; inset: 0; background: rgba(15,15,25,.45);
z-index: 2000; display: flex; align-items: flex-start; justify-content: center;
padding-top: 12vh;
}
.cmdk {
width: 34rem; max-width: 92vw; background:var(--mud-palette-surface, var(--surface-1));
border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.cmdk-input {
display: flex; align-items: center; gap: .625rem; padding: .875rem 1.125rem;
border-bottom:1px solid var(--mud-palette-lines-default, #e6e6ec);
}
.cmdk-input input {
border: 0; outline: 0; font: inherit; font-size: 1rem; flex: 1; background: none;
color:var(--mud-palette-text-primary, var(--ink-900));
}
.cmdk-input kbd {
font-family: "IBM Plex Mono", monospace; font-size: .75rem;
color: var(--mud-palette-text-secondary); background:var(--mud-palette-background, var(--surface-2));
border-radius: 4px; padding: .0625rem .375rem;
}
.cmdk-list { padding: .5rem; max-height: 22rem; overflow-y: auto; }
.cmdk-section {
font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--mud-palette-text-secondary); padding: .625rem .625rem .375rem;
}
.cmdk-item {
display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border-radius: 8px;
font-size: .875rem; cursor: pointer;
}
.cmdk-item.sel, .cmdk-item:hover { background: var(--mud-palette-action-default-hover); }
.cmdk-ic {
width: 1.75rem; height: 1.75rem; border-radius: 7px; flex-shrink: 0;
background:var(--mud-palette-background, var(--brand-50)); color: var(--mud-palette-primary);
display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700;
}
.cmdk-meta { margin-left: auto; color: var(--mud-palette-text-secondary); font-size: .75rem; }
.cmdk-empty { padding: .875rem .75rem; color: var(--mud-palette-text-secondary); font-size: .875rem; }
/* --- Opportunities: Table/Board view toggle + kanban board ---------- */
.view-toggle {
display: flex; border-radius: 999px; overflow: hidden;
border:1px solid var(--mud-palette-lines-default, #e0e0e6);
}
.view-toggle button {
font: inherit; font-size: .8125rem; font-weight: 600; padding: .375rem .875rem; border: 0; cursor: pointer;
display: flex; align-items: center; gap: .3125rem;
background:var(--mud-palette-surface, var(--surface-1)); color: var(--mud-palette-text-secondary);
}
.view-toggle button.active { background: var(--mud-palette-primary); color:var(--on-accent); }
.board-columns { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; align-items: flex-start; }
.board-column { width: 16rem; flex-shrink: 0; border-radius: 10px; transition: background-color .1s; }
.board-column-dragover { background: var(--mud-palette-primary-hover, rgba(31,95,169,.06)); outline: 2px dashed var(--mud-palette-primary); outline-offset: -2px; }
.board-col-head {
display: flex; flex-direction: column; gap: .1875rem;
padding: .5rem .75rem; border-radius: 8px; margin-bottom: .625rem; color:var(--on-accent);
}
.board-col-head .line1 { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.board-col-head .name { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.board-col-head .meta { font-size: .6875rem; font-weight: 600; opacity: .85; white-space: nowrap; }
.board-col-head .amt { font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.board-col-empty, .board-col-more {
font-size: .8125rem; color: var(--mud-palette-text-secondary); padding: .375rem .5rem;
}
.board-card {
background:var(--mud-palette-surface, var(--surface-1)); border-radius: 10px; border-top: 3px solid;
box-shadow: var(--shadow-sm), var(--highlight-top);
padding: .75rem .875rem; margin-bottom: .625rem; cursor: pointer;
transition: box-shadow .15s, transform .15s;
}
.board-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.board-card-dragging { opacity: .4; }
.board-card .title { font-size: .875rem; font-weight: 600; margin-bottom: .25rem; }
.board-card .company { font-size: .75rem; color: var(--mud-palette-text-secondary); margin-bottom: .5rem; }
.board-card .company:has(+ .contact) { margin-bottom: .125rem; }
.board-card .contact { font-size: .75rem; color: var(--mud-palette-primary); margin-bottom: .5rem; }
.board-card .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.board-card .money { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.board-card .amt { font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.board-card .closedate { font-size: .6875rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.board-card .closedate-overdue { color: var(--mud-palette-error); font-weight: 600; }
.board-card .owner {
width: 1.375rem; height: 1.375rem; border-radius: 50%; background:var(--mud-palette-background, var(--surface-3));
color: var(--mud-palette-primary); font-size: .625rem; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pipeline-tile { border-top: 3px solid var(--mud-palette-primary); }
.pipeline-tile.stage-qualify { border-top-color: #4c8bf5; background: #f5f8ff; }
.pipeline-tile.stage-analysis { border-top-color: #8a68d8; background: #f9f7ff; }
.pipeline-tile.stage-proposal { border-top-color: #d98a35; background: #fff9f1; }
.pipeline-tile.stage-review { border-top-color: #1a9f91; background: #f2fbfa; }
.pipeline-tile.stage-open { border-top-color: #4c8bf5; background: #f5f8ff; }
.pipeline-tile.stage-won { border-top-color: #168a58; background: #f2fcf7; }
.pipeline-tile.stage-lost { border-top-color: #d85d6d; background: #fff6f7; }
.pipeline-tile-active { border-color: var(--mud-palette-primary) !important; box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.record-cell { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.record-cell > div:last-child { min-width: 0; }
.record-heading { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.record-avatar {
width: 2rem; height: 2rem; flex: 0 0 2rem; display: grid; place-items: center;
border-radius: .625rem; font-size: .6875rem; font-weight: 750; letter-spacing: .025em;
}
.record-avatar-company { color: #08786e; background: #dff7f3; }
.record-avatar-person { color: #6842b7; background: #eee8ff; }
.record-avatar-large { width: 3.5rem; height: 3.5rem; flex-basis: 3.5rem; border-radius: .75rem; font-size: .95rem; }
.record-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.record-avatar-company img { object-fit: contain; padding: .22rem; background: #fff; }
.record-avatar-person.record-avatar-large { border-radius: 50%; }
.avatar-menu { position: relative; z-index: 4; flex: 0 0 auto; }
.avatar-menu-details { position: relative; }
.avatar-menu-trigger { display: block; cursor: pointer; list-style: none; border-radius: .8rem; outline-offset: 3px; }
.avatar-menu-trigger::-webkit-details-marker { display: none; }
.avatar-menu-trigger .record-avatar { box-shadow: 0 0 0 3px #fff, 0 1px 5px rgba(18, 40, 78, .18); transition: transform .15s ease, box-shadow .15s ease; }
.avatar-menu-trigger:hover .record-avatar, .avatar-menu-details[open] .record-avatar { transform: translateY(-1px); box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(18, 40, 78, .22); }
.avatar-menu-popover { position: absolute; top: calc(100% + .5rem); left: 0; width: 9.75rem; overflow: hidden; border: 1px solid #d7deea; border-radius: .55rem; background: #fff; box-shadow: 0 9px 20px rgba(20, 36, 66, .2); }
.avatar-menu-popover > a, .avatar-menu-action { display: flex; align-items: center; width: 100%; min-height: 2.5rem; padding: .55rem .75rem; border: 0; border-bottom: 1px solid #e5eaf2; background: #fff; color: #34425a; font: inherit; font-size: .8rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.avatar-menu-popover > a:hover, .avatar-menu-action:hover { background: #f5f7fb; color: #1d3152; }
.avatar-menu-remove { color: #b4232c; }
.avatar-menu-remove:hover { background: #fff3f3; color: #941d27; }
.avatar-upload-error { display: block; padding: .5rem .75rem; color: #b4232c; background: #fff5f5; font-size: .7rem; line-height: 1.3; }
.crm-empty-state { min-height: 15rem; display: grid; place-content: center; justify-items: center; gap: .5rem; text-align: center; }
.crm-empty-state .mud-icon-root { color: var(--section-accent); font-size: 2.25rem; padding: .75rem; border-radius: 50%; background: #e8f8f6; }
.hotlist-row-overdue { border-left: 3px solid var(--mud-palette-error); }
.hotlist-row:hover { background: var(--mud-palette-action-default-hover); }
.search-result-link {
display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
width: 100%; text-decoration: none; color: inherit;
}
.topbar .muted { margin-left: .5rem; font-size: .875rem; }
.facts {
display: grid;
grid-template-columns: 10rem 1fr;
gap: .5rem 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.25rem;
margin: 1.5rem 0;
}
.facts dt { font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 520px) {
.facts { grid-template-columns: 1fr; gap: 0 0; }
.facts dd { margin-bottom: .75rem; }
}
#blazor-error-ui {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background:var(--danger-bg);
border-top: 1px solid var(--error-border);
padding: .75rem 1rem;
z-index: 1000;
}
/* --- navigation --------------------------------------------------- */
.brand { display: flex; align-items: baseline; gap: 1.5rem; }
.brand nav { display: flex; gap: 1rem; }
.brand nav a { color: var(--accent); text-decoration: none; font-size: .9375rem; }
.brand nav a:hover { text-decoration: underline; }
.topbar .user { display: flex; align-items: center; gap: 1rem; }
/* --- home cards --------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.card {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.25rem;
text-decoration: none;
color: inherit;
}
.card:hover { border-color: var(--accent); }
.card h2 { margin: 0 0 .25rem; font-size: 1.0625rem; color: var(--accent); }
.card p { margin: 0; }
/* --- list views --------------------------------------------------- */
.list-header { display: flex; align-items: baseline; gap: .75rem; }
.list-header h1 { margin-bottom: .5rem; }
.searchbar { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.searchbar input[type=search] {
flex: 1;
max-width: 460px;
padding: .5rem .75rem;
border: 1px solid var(--border);
border-radius: 4px;
font-size: .9375rem;
font-family: inherit;
}
/* --- saved views (Favourite Lists) --------------------------------- */
[hidden] { display: none !important; }
.saved-views { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.saved-views select {
padding: .375rem .625rem;
border: 1px solid var(--border);
border-radius: 4px;
font-size: .875rem;
font-family: inherit;
background: var(--surface);
}
.saved-views input[type=text] {
padding: .375rem .625rem;
border: 1px solid var(--border);
border-radius: 4px;
font-size: .875rem;
font-family: inherit;
max-width: 220px;
}
.saved-views .button.small { margin-top: 0; }
/* Wide tables scroll inside their own container so the page never
scrolls sideways on a narrow screen. */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.table-scroll .column-layout-table { min-width: max-content; }
.table-scroll .column-layout-table table { width: max-content; min-width: 100%; table-layout: fixed; }
.table-scroll .column-layout-table th,
.table-scroll .column-layout-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Keeping both axes inside a viewport-height list makes the horizontal
scrollbar available immediately, not after hundreds of result rows. */
.company-list-scroll { max-height: calc(100vh - 13rem); overflow: auto; }
/* Column setup is a compact layout editor, not a stack of forms. */
.modal.column-setup-modal { width: min(54rem, calc(100vw - 2rem)); max-width: 54rem; }
.column-setup-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.column-setup-heading h2 { margin:0; }
.column-setup-heading p { margin:.25rem 0 0; }
.column-count { flex:0 0 auto; padding:.3rem .6rem; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:.8rem; }
.column-setup-labels, .column-setup-row { display:grid; grid-template-columns:minmax(0, 1fr) 8rem 5rem 2rem; gap:.75rem; align-items:center; }
.column-setup-labels { padding:0 .75rem .35rem; color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.column-setup-list { max-height:min(46vh, 32rem); overflow:auto; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.column-setup-row { min-height:3.3rem; padding:.5rem .75rem; border-bottom:1px solid var(--border); }
.column-setup-row:last-child { border-bottom:0; }
.column-setup-row:hover { background:var(--surface-2); }
.column-setup-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.column-width-input { display:flex; align-items:center; gap:.35rem; color:var(--muted); font-size:.8rem; }
.column-width-input input { width:5.1rem; margin:0; padding:.35rem .45rem; }
.column-order-actions { display:flex; gap:.2rem; }
.icon-action { width:2rem; height:2rem; border:1px solid var(--border); border-radius:5px; background:var(--surface); color:var(--ink-800); cursor:pointer; }
.icon-action:hover:not(:disabled) { border-color:var(--primary); color:var(--primary); background:var(--surface-2); }
.icon-action:disabled { opacity:.38; cursor:default; }
.remove-column { color:var(--danger); }
.column-add-section { margin-top:1rem; }
.column-add-section > label { display:block; margin-bottom:.45rem; }
.column-add-list { max-height:8.8rem; overflow:auto; display:flex; flex-wrap:wrap; gap:.4rem; padding:.15rem; }
.column-add-button { border:1px solid var(--border); background:var(--surface-2); color:var(--primary); padding:.35rem .55rem; border-radius:5px; font:inherit; font-size:.82rem; cursor:pointer; }
.column-add-button:hover { border-color:var(--primary); background:var(--surface); }
.column-setup-actions { margin-top:1rem; }
@media (max-width: 640px) {
.column-setup-labels { display:none; }
.column-setup-row { grid-template-columns:minmax(0,1fr) 7rem 4.5rem 2rem; gap:.4rem; padding:.5rem; }
.column-setup-heading { align-items:center; }
}
table.grid { border-collapse: collapse; width: 100%; font-size: .9375rem; }
table.grid th, table.grid td { padding: .5rem .75rem; text-align: left; white-space: nowrap; }
table.grid th {
background:var(--surface-2);
border-bottom: 1px solid var(--border);
font-size: .8125rem;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--muted);
position: sticky;
top: 0;
}
table.grid tbody tr + tr td { border-top:1px solid var(--line-soft); }
table.grid tbody tr:hover { background:var(--surface-2); }
table.grid .num { text-align: right; }
table.grid tr.inactive-row { color: var(--muted); }
table.grid tr.inactive-row td:first-child { font-style: italic; }
.row-actions { display: flex; gap: .5rem; white-space: nowrap; }
.member-checklist {
display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
gap: .375rem .75rem; margin: .5rem 0 1rem;
max-height: 10rem; overflow-y: auto;
border: 1px solid var(--border); border-radius: 4px; padding: .625rem .75rem;
}
.badge {
display: inline-block;
padding: .0625rem .375rem;
border-radius: 3px;
font-size: .75rem;
font-weight: 600;
background:var(--surface-2);
color: var(--muted);
}
.badge.contact { background:var(--brand-100); color:var(--brand-600); }
.badge.individual { background:var(--accent-purple-bg); color:var(--accent-purple-strong); }
.badge.warn { background: var(--warn-bg); color: var(--warn-text); margin-left: .375rem; }
.badge.success { background:var(--success-bg); color:var(--success); }
.opted-out { text-decoration: line-through; color: var(--muted); }
.empty {
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 6px;
padding: 2.5rem 1.5rem;
text-align: center;
}
.empty p { margin: 0 0 .375rem; }
.pager { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.pager button {
padding: .375rem .75rem;
border: 1px solid var(--border);
background: var(--surface);
border-radius: 4px;
cursor: pointer;
font: inherit;
}
.pager button:disabled { color: var(--muted); cursor: not-allowed; }
/* --- list header actions ------------------------------------------ */
.list-header { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.list-header .button.small { margin-left: auto; }
.button.small { padding: .375rem .75rem; font-size: .875rem; margin-top: 0; }
tr.row-link { cursor: pointer; }
/* --- detail pages --------------------------------------------------- */
.detail-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
padding-bottom: .9rem;
border-bottom:1px solid var(--line);
}
/* Keep record actions in view while a long edit form is being completed. */
.detail-header:has(~ .detail-grid) {
position: sticky;
top: 0;
z-index: 20;
padding: .75rem 0;
margin-top: -.75rem;
background: color-mix(in srgb, var(--surface-1) 94%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid transparent;
}
.detail-header:has(~ .detail-grid) .detail-actions { flex-wrap: wrap; }
.back-link { display: inline-block; margin-bottom: .5rem; color: var(--accent); text-decoration: none; font-size: .875rem; }
.back-link:hover { text-decoration: underline; }
.detail-header h1 { margin: 0 0 .2rem; font-size: clamp(1.45rem, 2.2vw, 2rem); letter-spacing: -.015em; }
.detail-actions { display: flex; align-items: center; gap: .75rem; }
.record-tabs { display: flex; gap: .25rem; margin: 0 0 1rem; padding: .35rem; border:1px solid var(--line); border-radius: 999px; background:var(--surface-3); width: fit-content; }
.record-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .625rem .125rem; color: var(--muted); cursor: pointer; font: inherit; font-size: .875rem; }
.record-tabs button:hover { color: var(--text); }
.record-tabs button { border-radius: 999px; padding: .45rem 1rem; margin: 0; }
.record-tabs button.active { border-bottom-color: transparent; background:var(--surface-1); color: var(--accent); font-weight: 600; box-shadow: var(--shadow-sm); }
.alert.inline { padding: .25rem .625rem; margin: 0; font-size: .8125rem; }
/* Zoho's own record shape (researched off the real frames): a narrow
"Related List" rail down the left, and ONE main column holding the
record's fields and every related section at full width.
This replaced a [form 2fr | panels 1fr] split, which was the real
"doesn't flow right" problem Graeme reported -- Notes, Documents,
Related Entries and Timeline were all crammed into a ~260px column,
stacked five deep, so each got a sliver of the page and the record
became an endless scroll. Same panels, same data; the layout is what
was wrong.
:has() rather than a modifier class so a NEW record -- which renders
no rail, because there are no related sections until it's saved --
falls back to a single full-width column automatically, with no
per-page flag to remember to pass. */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; align-items: start; }
/* Related sections live in a horizontal row, matching Overview and
Timeline, so record content always gets the full usable width. */
.detail-grid:has(.record-rail) { grid-template-columns:minmax(0, 1fr); }
@media (max-width: 860px) {
.detail-grid, .detail-grid:has(.record-rail) { grid-template-columns: 1fr; }
}
.detail-form {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.25rem 1.5rem 1.5rem;
align-content: start;
}
.detail-form h2 {
font-size: .9375rem;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--muted);
margin: 1.35rem -1.5rem .7rem;
padding: .65rem 1.5rem;
border-top: 1px solid var(--border);
border-bottom:1px solid var(--line-soft);
background:linear-gradient(90deg, var(--field-accent-soft), var(--surface-2) 72%);
color:var(--ink-800);
font-size: .8rem;
letter-spacing: .08em;
box-shadow:inset 4px 0 0 var(--section-accent);
}
.detail-form h2:first-child { margin-top: -.25rem; padding-top: .65rem; border-top: 0; }
.detail-form > label { display: block; margin: .95rem 0 .3rem; font-weight: 600; font-size: .8125rem; color: var(--muted); }
.detail-form input[type=text], .detail-form input:not([type]), .detail-form textarea, .detail-form select {
width: 100%;
padding: .5rem .625rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
font-size: .9375rem;
font-family: inherit;
background:var(--surface-1);
box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-900) 7%, transparent);
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.detail-form input[type=text]:hover, .detail-form input:not([type]):hover, .detail-form textarea:hover, .detail-form select:hover {
border-color: var(--field-accent);
background: var(--field-accent-soft);
}
.detail-form input:focus, .detail-form textarea:focus, .detail-form select:focus {
outline: none;
border-color:var(--field-accent);
background:var(--surface-1);
box-shadow: 0 0 0 3px var(--field-accent-hover), 0 2px 5px color-mix(in srgb, var(--field-accent) 20%, transparent);
}
.detail-form textarea { resize: vertical; }
/* Existing edit pages use label/input pairs. On wide screens, lay those
pairs out like Zoho: two balanced field groups per row. Explicit field
rows and editors remain full-width components. */
@media (min-width: 980px) {
.detail-form {
display: grid;
grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) minmax(7rem, 10rem) minmax(0, 1fr);
column-gap: 1.25rem;
align-items: center;
}
.detail-form > h2,
.detail-form > .field-row,
/* A form is a block of its own label/input pairs, so it must span
the card rather than being packed into one of the four columns.
Without this it became a ~100px-wide grid item: the Account page's
password fields and every button in them had been squeezed to a
stub for as long as this grid has existed, which is how a
six-digit code box ended up 41px wide. */
.detail-form > form,
.detail-form > textarea,
.detail-form > .contact-method-editor,
.detail-form > .address-editor,
.detail-form > .udf-fields-editor { grid-column: 1 / -1; }
.detail-form > label { margin: .45rem 0; text-align: right; }
.detail-form > label + input,
.detail-form > label + select { margin: .35rem 0; }
.detail-form > label + input + label { margin-left: 0; }
}
/* A card that holds a single column of prose, forms and lists
rather than label/input pairs. Without this it inherits the
four-column field grid above, which packs a paragraph into one
~100px column and a list of recovery codes into the next -- the
grid is right for an edit form and wrong for everything else. */
.detail-form.stacked { display: block; }
@media (max-width: 700px) {
.detail-form { padding: 1.25rem; }
.detail-form h2 { margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
}
/* RecordFieldGrid uses the same outer card class for the read-only view,
but its definition list owns its own two-column layout. Never apply the
edit form's four-column label/input grid to that view. */
.detail-form.record-view { display: block; }
.detail-form.record-view dl { margin: 0; }
/* Record edit forms use balanced field groups rather than the legacy
label/control grid. The latter is useful for compact admin forms but
squeezes long CRM controls (company pickers, names and addresses) into
narrow columns. Keep every grid track shrink-safe and let editors span
the card when they contain multiple controls. */
.detail-form.record-edit-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1.25rem;
row-gap: .15rem;
min-width: 0;
}
.record-edit-form > h2,
.record-edit-form > .field-row,
.record-edit-form > .form-field-full,
.record-edit-form > .contact-method-editor,
.record-edit-form > .address-editor,
.record-edit-form > .udf-fields-editor { grid-column: 1 / -1; }
.record-edit-form > h2 { min-width: 0; }
.record-edit-form .field-row,
.record-edit-form .form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
min-width: 0;
gap: 1rem 1.25rem;
margin: .25rem 0 1rem;
}
.record-edit-form .field-row.three,
.record-edit-form .form-grid.three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.record-edit-form .field-row > div,
.record-edit-form .form-field {
min-width: 0;
display: grid;
gap: .35rem;
align-content: start;
}
.record-edit-form .form-field-full { grid-column: 1 / -1; }
.record-edit-form .field-row label,
.record-edit-form .form-field > label {
margin: 0;
text-align: left;
font-size: .8125rem;
font-weight: 600;
color: var(--field-label);
letter-spacing: .01em;
}
.record-edit-form input:not([type="checkbox"]):not([type="radio"]),
.record-edit-form select,
.record-edit-form textarea,
.record-edit-form .company-picker,
.record-edit-form .locked-record-reference {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.record-edit-form .muted.small { margin: .15rem 0 0; line-height: 1.45; }
.record-edit-form .contact-method-editor,
.record-edit-form .address-editor,
.record-edit-form .udf-fields-editor { margin-top: .25rem; min-width: 0; }
.record-edit-form .udf-fields-editor {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:.45rem 1.1rem;
padding:.8rem 1rem 1rem;
border:1px solid color-mix(in srgb, var(--field-accent) 30%, var(--line));
border-radius:var(--radius-lg);
background:linear-gradient(135deg, var(--field-accent-soft), var(--surface-1) 48%);
}
.record-edit-form .udf-fields-editor > h2,
.record-edit-form .udf-fields-editor > .muted,
.record-edit-form .udf-fields-editor > p { grid-column:1 / -1; }
.record-edit-form .udf-fields-editor > h2 {
margin:-.8rem -1rem .3rem;
padding:.65rem 1rem;
box-shadow:inset 4px 0 0 var(--field-accent);
}
.record-edit-form .udf-fields-editor > label {
margin:.25rem 0 0;
color:var(--field-label);
font-size:.8125rem;
font-weight:600;
}
.record-edit-form .udf-fields-editor > label.checkbox-row { grid-column:span 1; }
.record-edit-form .udf-fields-editor > label + input,
.record-edit-form .udf-fields-editor > label + select,
.record-edit-form .udf-fields-editor > label + textarea { margin-top:-.25rem; }
.record-edit-form h2 + .contact-method-editor,
.record-edit-form h2 + .address-editor,
.record-edit-form h2 + .udf-fields-editor { margin-bottom: .5rem; }
@media (max-width: 900px) {
.detail-form.record-edit-form { grid-template-columns: 1fr; }
.record-edit-form .field-row,
.record-edit-form .field-row.three,
.record-edit-form .form-grid,
.record-edit-form .form-grid.three { grid-template-columns: 1fr; }
.record-edit-form .form-field-full { grid-column: auto; }
.record-edit-form .udf-fields-editor { grid-template-columns:1fr; }
}
/* The list table in the left column is wrapped in .table-scroll only so a
wide table can't bleed sideways into the side panel. The .detail-form card
already frames it, so drop the wrapper's own border/background here. */
.detail-form .table-scroll { border: 0; border-radius: 0; background: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .field-row, .field-row.three { grid-template-columns: 1fr; } }
.checkbox-row { display: flex; align-items: center; gap: .5rem; font-weight: 400; color: var(--text); }
.checkbox-row input { width: auto; }
/* The main column: the record's own fields, then every related section
under them, each at full width with real room to work in. */
.detail-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
/* Record-header facts, modelled on Zoho's compact Overview summary.
They deliberately complement rather than duplicate the complete grid below. */
.record-summary {
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.record-summary-field { min-width: 0; padding: .75rem .875rem; background: var(--surface); }
.record-summary-field span { display: block; margin-bottom: .2rem; color: var(--muted); font-size: .6875rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.record-summary-field strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 600; }
/* The older [form | narrow aside] shape, still used by the Activity and
Admin pages. Those asides hold a short helper panel (a picker, a
preview), not a stack of five related-record sections, so the split
that was wrong for a CRM record is right for them -- left as-is
rather than churned for consistency's sake. */
.detail-grid:has(.detail-side) { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.detail-side { display: flex; flex-direction: column; gap: 1.5rem; }
/* --- related-record tabs (SectionJumpNav.razor) -----------------------
The old sticky left rail squeezed the record content and hid useful
space. These sit across the top, styled as the same quiet pills as the
Overview / Timeline control. */
.record-rail {
display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
padding:.45rem;
background:var(--surface-3);
border:1px solid var(--line);
border-radius:var(--radius-lg);
min-width:0;
}
.record-rail h3 {
font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color:var(--field-label); margin:0 .2rem 0 .1rem;
}
.record-rail button,
.record-rail a {
display:inline-flex; align-items:center; width:auto; box-sizing:border-box; text-align:left !important;
padding:.38rem .72rem; border-radius:var(--radius-pill);
font-size: .8125rem; font-family: inherit; color: var(--text);
background:none; border:1px solid transparent; cursor:pointer; white-space:nowrap;
}
.record-rail a { text-decoration: none; }
.record-rail a:hover, .record-rail button:hover { background:var(--surface-1); border-color:var(--field-accent); color:var(--accent); box-shadow:var(--shadow-sm); }
.detail-grid:has(.record-rail) .detail-main { min-width:0; }
@media (max-width: 620px) {
.record-rail { flex-wrap:nowrap; overflow-x:auto; }
.record-rail h3 { position:sticky; left:0; background:var(--surface-3); padding-right:.25rem; }
}
/* --- timeline history -------------------------------------------------
A compact, date-grouped history rather than a generic notes list. The
time, marker and event text sit on fixed tracks, so a busy record can
still be scanned from top to bottom without the visual zig-zag. */
.timeline-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; }
.timeline-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.timeline-panel-head h2 { margin: 0; font-size: 1.05rem; }
.timeline-panel-actions { display: flex; align-items: center; gap: .6rem; }
.timeline-history { max-width: 56rem; }
.timeline-day + .timeline-day { margin-top: 1.75rem; }
.timeline-date { display: inline-block; padding: .3rem 1rem; border:1px solid var(--line); border-radius: 5px; background:var(--surface-2); color:var(--ink-500); font-weight: 600; font-size: .8125rem; }
.timeline-events { position: relative; margin-top: 1.25rem; }
.timeline-events::before { content: ""; position: absolute; left: 9.2rem; top: .5rem; bottom: .5rem; width: 1px; background:var(--line); }
.timeline-event { display: grid; grid-template-columns: 7.3rem 3.8rem minmax(0, 1fr); column-gap: .65rem; position: relative; min-height: 5rem; }
.timeline-event time { color:var(--ink-500); font-size: .875rem; text-align: right; padding-top: .65rem; font-variant-numeric: tabular-nums; }
.timeline-marker { z-index: 1; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border:1px solid var(--line); border-radius: 50%; background:var(--surface-1); color:var(--ink-500); }
.timeline-marker-note { color:var(--brand-600); background:var(--surface-3); }
.timeline-marker-activity { color:var(--warning); background:var(--warning-bg); }
.timeline-marker-document { color:var(--success); background:var(--success-bg); }
.timeline-marker-field_change { color:var(--accent-purple); background:var(--accent-purple-bg); }
.timeline-copy { padding: .55rem 0 1.25rem; }
.timeline-title { color: var(--text); font-weight: 600; font-size: .9375rem; }
.timeline-detail { margin-top: .25rem; color:var(--ink-600); white-space: pre-wrap; }
.timeline-meta { margin-top: .25rem; color:var(--ink-500); font-size: .8125rem; }
@media (max-width: 640px) {
.timeline-panel-head { align-items: flex-start; flex-direction: column; }
.timeline-panel-actions { width: 100%; justify-content: space-between; }
.timeline-events::before { left: 1.35rem; }
.timeline-event { grid-template-columns: 2.75rem minmax(0, 1fr); }
.timeline-event time { grid-column: 2; grid-row: 1; text-align: left; padding: 0; }
.timeline-marker { grid-column: 1; grid-row: 1 / span 2; }
.timeline-copy { grid-column: 2; grid-row: 2; padding-top: .25rem; }
}
/* A contact created from a company is intentionally not a free-form
company picker: show the inherited relationship plainly and reserve
white input fields for values the user is actually allowed to edit. */
.locked-record-reference { display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; padding: .5rem .75rem; border:1px solid var(--line-strong); border-radius: 6px; background:var(--surface-3); color:var(--ink-800); }
.locked-record-reference span { color:var(--ink-500); font-size: .8125rem; }
/* --- related-record sections (RelatedRecordsPanel.razor) -------------
Zoho's Deals / Cases / Activities blocks on a record. The count sits
in the heading (so you know what's there without reading the table)
and the "+ New" sits opposite it, the same pairing Zoho uses. */
.related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.related-head h2 { margin: 0; }
.related-count {
display: inline-block; margin-left: .375rem; padding: .0625rem .375rem;
background:var(--surface-3); color: var(--muted); border-radius: 999px;
font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.related-panel .related-grid { width: 100%; border-collapse: collapse; font-size: .875rem; }
.related-panel .related-grid th {
text-align: left; font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em;
color: var(--muted); font-weight: 700; padding: 0 .5rem .375rem; border-bottom: 1px solid var(--border);
}
.related-panel .related-grid td { padding: .5rem; border-bottom:1px solid var(--line-soft); }
.related-panel .related-grid tr:last-child td { border-bottom: 0; }
.related-panel .related-grid tbody tr:hover { background:var(--surface-2); }
.related-panel .overdue { color: var(--error-text); font-weight: 600; }
/* Status/stage chip inside a related table -- neutral by default, with
the same green/red this app already uses for won/closed everywhere
else rather than a chip palette of its own. */
.pill {
display: inline-block; padding: .0625rem .5rem; border-radius: 999px;
background:var(--surface-3); color: var(--muted); font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.pill-won { background:var(--success-bg); color:var(--success); }
.pill-lost { background: var(--error-bg); color: var(--error-text); }
/* --- contact method editor ----------------------------------------- */
.cm-editor { margin-top: .5rem; }
.cm-group { margin-bottom: 1rem; }
.cm-group h3 { font-size: .8125rem; font-weight: 600; color: var(--muted); margin: 0 0 .375rem; }
.cm-row { display: grid; grid-template-columns: 7rem 1fr auto auto auto; gap: .5rem; align-items: center; margin-bottom: .375rem; }
.cm-row input { padding: .375rem .5rem; border: 1px solid var(--border); border-radius: 4px; font-size: .875rem; }
.cm-primary { display: flex; align-items: center; gap: .25rem; font-size: .8125rem; color: var(--muted); white-space: nowrap; font-weight: 400; margin: 0; }
.cm-primary input { width: auto; }
.cm-remove {
background: none; border: 1px solid var(--border); border-radius: 4px;
width: 1.75rem; height: 1.75rem; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1;
}
.cm-remove:hover { border-color: var(--error-border); color: var(--error-text); }
.cm-add { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.cm-add-btn {
background: none; border: 1px dashed var(--border); border-radius: 4px;
padding: .375rem .75rem; font-size: .8125rem; color: var(--accent); cursor: pointer;
}
.cm-add-btn:hover { border-color: var(--accent); background:var(--brand-50); }
.cm-row .cm-ext { max-width: 5.5rem; }
/* --- address editor --------------------------------------------------
One block per address (Maximizer: "+ Add new address"), each with its
own type + primary marker -- addr-block reuses .field-row from the
surrounding form so its inputs line up with every other field. */
.addr-editor { margin-top: .5rem; }
.addr-block {
border: 1px solid var(--border); border-radius: 6px;
padding: .6rem .75rem; margin-bottom: .6rem;
}
.addr-block-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.addr-type {
padding: .3125rem .5rem; border: 1px solid var(--border); border-radius: 4px;
font-size: .8125rem; font-weight: 600; color: var(--text);
}
.addr-block .field-row { margin-top: 0; }
.addr-block label { margin: .5rem 0 .1875rem; }
.addr-block .field-row { gap: .65rem; }
.addr-block .field-row + .field-row { margin-top: .1rem; }
/* Keep the repeatable editors visually subordinate to the primary record
fields, as in Zoho's compact related-field blocks. */
.detail-form .addr-editor,
.detail-form .cm-editor { font-size: .875rem; }
.detail-form .addr-editor input,
.detail-form .addr-editor select,
.detail-form .cm-editor input,
.detail-form .cm-editor select { padding: .42rem .55rem; min-height: 2.25rem; }
/* --- company typeahead picker --------------------------------------- */
.company-picker { position: relative; }
.company-picker .chip {
display: inline-flex; align-items: center; gap: .375rem;
background:var(--brand-100); color:var(--brand-600); border-radius: 4px;
padding: .25rem .5rem; font-size: .875rem; margin-top: .25rem;
}
.company-picker .chip button {
background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0;
}
.typeahead {
position: absolute; z-index: 10; top: 100%; left: 0; right: 0;
background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
margin: .25rem 0 0; padding: .25rem 0; list-style: none;
max-height: 220px; overflow-y: auto;
box-shadow: var(--shadow-md);
}
.typeahead li { padding: .5rem .75rem; cursor: pointer; font-size: .9375rem; }
.typeahead li:hover { background:var(--surface-2); }
.typeahead li.typeahead-add { color: var(--accent); border-top: 1px solid var(--border); font-weight: 500; }
/* --- notes panel ----------------------------------------------------- */
.notes-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.25rem;
}
.notes-panel h2 { font-size: .9375rem; margin: 0 0 .75rem; }
.notes-panel textarea {
width: 100%; padding: .5rem .625rem; border: 1px solid var(--border);
border-radius: 4px; font-family: inherit; font-size: .875rem; resize: vertical;
}
/* Text inputs match the panel's textarea. MudBlazor's reset zeroes every
input border, and unlike .detail-form the panel had no rule restoring one,
so bare fields (e.g. the admin add/edit "Name" box) rendered with
no visible outline. */
.notes-panel input:not([type=checkbox]):not([type=radio]) {
width: 100%; padding: .5rem .625rem; border: 1px solid var(--border);
border-radius: 4px; font-family: inherit; font-size: .875rem;
}
.notes-panel .button { margin-top: .5rem; }
.macro-picker {
display: block; width: 100%; margin: 0 0 .5rem; padding: .375rem .625rem;
border: 1px solid var(--border); border-radius: 4px; font-size: .8125rem;
font-family: inherit; background: var(--surface); color: var(--muted);
}
.note-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }
.note-list li { border-top:1px solid var(--line-soft); padding-top: .875rem; }
.note-list li:first-child { border-top: none; padding-top: 0; }
.note-list li p { margin: 0 0 .25rem; font-size: .9375rem; white-space: pre-wrap; }
.note-list li.pinned { background:var(--warning-bg); margin: 0 -.5rem; padding: .875rem .5rem; border-radius: 4px; border-top: none; }
/* Internal notes: Zendesk's own convention is a warm, slightly urgent
tint that reads as "careful, this is staff-only" -- distinct from
pinned's neutral cream so the two never look like the same thing. */
.note-list li.note-internal { background:var(--warning-bg); margin: 0 -.5rem; padding: .875rem .5rem; border-radius: 4px; border-top: none; border-left:3px solid var(--warning); }
.note-internal-badge {
display: inline-block; font-size: .6875rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color:var(--warning); background:var(--warning-bg); border-radius: 3px;
padding: .0625rem .375rem; margin-bottom: .25rem;
}
/* Timeline -- one small uppercase kind badge per entry, same shape as
note-internal-badge above, three colours so a scan down the feed
tells notes/activities/documents apart without reading every line. */
.timeline-kind {
display: inline-block; font-size: .6875rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; border-radius: 3px; padding: .0625rem .375rem; margin-right: .375rem;
}
.timeline-kind-note { color:var(--brand-500); background:var(--brand-100); }
.timeline-kind-activity { color:var(--warning); background:var(--warning-bg); }
.timeline-kind-document { color:var(--success); background:var(--success-bg); }
/* --- documents --------------------------------------------------------- */
.documents-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.25rem;
margin-top: 1.25rem;
}
.documents-panel h2 { font-size: .9375rem; margin: 0 0 .75rem; }
.file-input { display: block; font-size: .8125rem; margin-bottom: .5rem; }
.document-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.document-list li { border-top:1px solid var(--line-soft); padding-top: .625rem; display: flex; flex-direction: column; gap: .125rem; }
.document-list li:first-child { border-top: none; padding-top: 0; }
.document-list a { font-size: .9375rem; font-weight: 600; }
.document-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.document-row .link-btn { margin-right: 0; }
.library-upload {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
padding: .875rem 1rem; margin: 1rem 0 1.25rem;
}
.library-upload input[type="text"], .library-upload input:not([type]) { max-width: 16rem; }
/* --- import wizard --------------------------------------------------- */
.import-steps { display: flex; gap: 1.5rem; margin: 1.5rem 0; border-bottom: 1px solid var(--border); padding-bottom: .75rem; }
.import-steps .step { color: var(--muted); font-size: .875rem; }
.import-steps .step.current { color: var(--accent); font-weight: 600; }
.import-steps .step.done { color: var(--text); }
.import-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.5rem;
max-width: 100%;
}
.import-panel label { display: block; margin: 1rem 0 .375rem; font-weight: 600; font-size: .875rem; }
.import-panel label:first-child { margin-top: 0; }
.import-panel select {
padding: .5rem .625rem; border: 1px solid var(--border); border-radius: 4px; font-size: .9375rem; font-family: inherit;
}
.import-panel input[type=file] { display: block; margin-top: .25rem; }
.import-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }
.import-progress { margin-top: 1rem; max-width: 34rem; }
.import-progress-label { margin-bottom: .35rem; font-weight: 600; }
.import-progress progress { width: 100%; height: .65rem; accent-color:var(--crm-primary, var(--brand-500)); }
.button.secondary { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); }
.mapping-table select { width: 100%; }
.mapping-table td { vertical-align: middle; }
.preview-summary { display: flex; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pill { padding: .25rem .625rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.pill.create { background:var(--success-bg); color:var(--success); }
.pill.update { background:var(--brand-100); color:var(--brand-600); }
.pill.invalid { background: var(--error-bg); color: var(--error-text); }
.preview-table { max-height: 420px; overflow-y: auto; margin-top: 1rem; }
tr.invalid-row { background: var(--error-bg); }
.result-list { list-style: none; padding: 0; display: flex; gap: 1.5rem; font-size: 1.0625rem; margin: 1rem 0 1.5rem; }
/* --- delete confirmation modal --------------------------------------- */
.button.danger { background: var(--surface); color: var(--error-text); border: 1px solid var(--error-border); }
.button.danger:hover:not(:disabled) { background: var(--error-bg); }
.button.danger:disabled { color: var(--muted); border-color: var(--border); }
.modal-backdrop {
position: fixed; inset: 0; background: rgba(20,22,26,.4);
display: flex; align-items: center; justify-content: center;
z-index: 100; padding: 1rem;
}
.modal {
background: var(--surface); border-radius: 8px; padding: 1.5rem;
max-width: 420px; width: 100%; box-shadow: var(--shadow-lg);
}
.modal h2 { margin: 0 0 .75rem; font-size: 1.125rem; }
.modal p { margin: 0 0 1.25rem; color: var(--muted); font-size: .9375rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .75rem; }
/* --- opportunities: pipeline summary bar ------------------------------ */
.pipeline-bar { display: flex; gap: .5rem; margin: 1rem 0 1.25rem; flex-wrap: wrap; align-items: stretch; }
.pipeline-stage {
display: flex; flex-direction: column; gap: .125rem;
background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
padding: .5rem .875rem; cursor: pointer; font: inherit; text-align: left;
min-width: 7.5rem;
}
.pipeline-stage:hover { border-color: var(--accent); }
.pipeline-stage.active { border-color: var(--accent); background:var(--brand-50); box-shadow: inset 0 0 0 1px var(--accent); }
.pipeline-stage.won { border-color:var(--success-line); }
.pipeline-stage.lost { border-color:var(--danger-line-soft); opacity: .75; }
.pipeline-stage-name { font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.pipeline-stage-count { font-size: 1.125rem; font-weight: 700; }
.pipeline-stage-amount { font-size: .8125rem; color: var(--muted); }
.pipeline-clear {
align-self: center; background: none; border: 0; color: var(--accent);
cursor: pointer; font-size: .875rem; text-decoration: underline;
}
.searchbar .checkbox-row.small { margin-left: 1rem; font-size: .875rem; }
.badge.won { background:var(--success-bg); color:var(--success); }
.badge.lost { background: var(--error-bg); color: var(--error-text); }
/* --- opportunity stage tracker ---------------------------------------- */
.stage-tracker { display: flex; gap: .5rem; margin: 0 0 1.5rem; flex-wrap: wrap; }
.stage-step {
background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
padding: .375rem .875rem; font-size: .8125rem; cursor: pointer; color: var(--muted);
}
.stage-step:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.stage-step.current { background: var(--accent); border-color: var(--accent); color:var(--on-accent); font-weight: 600; }
.stage-step.won.current { background:var(--success); border-color:var(--success); }
.stage-step.lost.current { background:var(--danger-fg); border-color:var(--danger-fg); }
.stage-step:disabled { cursor: default; }
/* A tracker built from rather than