/* ============================================================
* Inter Variable — self-hosted (FEAT-065, made GDPR/airgap safe 2026-06-16)
*
* Both files live under wwwroot/fonts/inter/ so no third-party DNS lookup
* happens at page load. Source: rsms.me/inter/font-files/ (Inter v4 builds).
*
* font-display: swap renders the OS fallback (Segoe UI) for ~100ms while
* Inter downloads on the first ever visit; subsequent visits are cached
* and Inter renders immediately. The variable axis carries every weight
* 100-900 so a single woff2 covers thin labels through bold display.
* ============================================================ */
@font-face {
font-family: 'Inter Variable';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter/InterVariable.woff2') format('woff2-variations'),
url('../fonts/inter/InterVariable.woff2') format('woff2');
}
@font-face {
font-family: 'Inter Variable';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter/InterVariable-Italic.woff2') format('woff2-variations'),
url('../fonts/inter/InterVariable-Italic.woff2') format('woff2');
}
/**
* Contact Central V2 - Design System 2026
* Version: 1.1.0
*
* Design Specification: docs/design/DESIGN-001-Redesign.md
*
* 2026 Design Trends Applied:
* - Softer Dark Mode: Mid-tone backgrounds (#0f172a, #1e293b) instead of pure black
* - Typography-First: Variable fonts, clear hierarchy, reduced icon dependency
* - Bento Grid: Modular, asymmetric layouts
* - Purposeful Micro-interactions: Motion as guidance, not decoration
* - Accessibility-First: WCAG AA compliant, motion controls, cognitive support
* - Labels-Left Forms: Form labels positioned left of inputs (stacked on mobile)
*
* Note: Liquid Glass effects available but NOT used on sidebar (too grey).
* Sidebar uses solid dark background with subtle purple gradient overlay.
*/
/* ===========================================
CSS CUSTOM PROPERTIES
=========================================== */
:root {
/* ============================================================
FEAT-065 — Reduced palette (Solvia warm brand)
4 hues + Mustard warning + warm-functional greys + black/white
============================================================ */
/* Primary — Solvia warm brand (Apricot → Terracotta) */
--ds-primary-50: #fef5ee;
--ds-primary-100: #fde4cd;
--ds-primary-200: #fbcfa6;
--ds-primary-300: #fdaf7b; /* Solvia Apricot */
--ds-primary-400: #e88c4d;
--ds-primary-500: #d97843;
--ds-primary-600: #be7b72; /* Solvia Terracotta — THE brand color */
--ds-primary-700: #9a5e56;
--ds-primary-800: #79473f;
--ds-primary-900: #5a332c;
/* --ds-secondary-* DROPPED (coral retired by FEAT-065) */
/* --ds-accent-* DROPPED (teal retired by FEAT-065) */
/* Semantic — Success: Sage */
--ds-success: #7a8b6e;
--ds-success-light: #f1f3ec;
--ds-success-dark: #4f5d44;
/* Semantic — Warning: Mustard (distinct from brand-orange family) */
--ds-warning: #c08930;
--ds-warning-light: #f7f0d6;
--ds-warning-dark: #7d5a1c;
/* Semantic — Danger: Wine (renamed from --ds-error in FEAT-065) */
--ds-danger: #923d3a;
--ds-danger-light: #f7e9e8;
--ds-danger-dark: #6b2825;
/* --ds-error-* back-compat aliases dropped (FEAT-065 P5 — consumers swept to --ds-danger-*) */
/* --ds-info-* DROPPED — Info-Blau retired; use --ds-primary-* for active/info states */
/* Neutrals — warm-functional stone (overrides FEAT-064 §6 cool-slate decision) */
--ds-neutral-0: #ffffff;
--ds-neutral-50: #f6f5f2;
--ds-neutral-100: #efedea;
--ds-neutral-200: #e6e4df;
--ds-neutral-300: #d4d1ca;
--ds-neutral-400: #b3afa6;
--ds-neutral-500: #8a877e;
--ds-neutral-600: #6a675f;
--ds-neutral-700: #4f4d46;
--ds-neutral-800: #3a3934;
--ds-neutral-900: #1a1916;
/* Dark Mode Surfaces (warm-stone equivalents, ready for future activation) */
--ds-dark-bg: #1a1916;
--ds-dark-surface: #25231f;
--ds-dark-elevated: #3a3934;
--ds-dark-border: rgba(212, 209, 202, 0.2);
/* ============================================================
FEAT-065 hotfix — Bootstrap CSS-var overrides
Bootstrap 5.3 loads BEFORE this file (App.razor) and ships its
own --bs-primary blue and --bs-info cyan defaults, which leak
through every .text-primary / .bg-primary / .btn-primary utility.
We override them at our level so the entire utility surface
follows the Solvia palette without touching the vendor file.
============================================================ */
--bs-primary: #be7b72;
--bs-primary-rgb: 190, 123, 114;
--bs-primary-text-emphasis: #79473f;
--bs-primary-bg-subtle: #fef5ee;
--bs-primary-border-subtle: #fde4cd;
--bs-link-color: #be7b72;
--bs-link-color-rgb: 190, 123, 114;
--bs-link-hover-color: #9a5e56;
--bs-link-hover-color-rgb: 154, 94, 86;
--bs-success: #7a8b6e;
--bs-success-rgb: 122, 139, 110;
--bs-success-text-emphasis: #4f5d44;
--bs-success-bg-subtle: #f1f3ec;
--bs-success-border-subtle: #dee3d2;
--bs-warning: #c08930;
--bs-warning-rgb: 192, 137, 48;
--bs-warning-text-emphasis: #7d5a1c;
--bs-warning-bg-subtle: #f7f0d6;
--bs-danger: #923d3a;
--bs-danger-rgb: 146, 61, 58;
--bs-danger-text-emphasis: #6b2825;
--bs-danger-bg-subtle: #f7e9e8;
--bs-danger-border-subtle: #eecbc9;
/* No info-blue in Solvia palette — point Bootstrap's info family at primary */
--bs-info: #be7b72;
--bs-info-rgb: 190, 123, 114;
--bs-info-text-emphasis: #79473f;
--bs-info-bg-subtle: #fef5ee;
--bs-info-border-subtle: #fde4cd;
/* Body + surfaces follow warm-stone neutrals */
--bs-body-color: #1a1916;
--bs-body-color-rgb: 26, 25, 22;
--bs-secondary-color: rgba(26, 25, 22, 0.65);
--bs-tertiary-color: rgba(26, 25, 22, 0.45);
--bs-body-bg: #ffffff;
--bs-secondary-bg: #efedea;
--bs-tertiary-bg: #f6f5f2;
--bs-border-color: #e6e4df;
/* --- Typography --- */
/* Font Families */
--ds-font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--ds-font-feature-sans: "cv11", "ss01", "ss03"; /* Inter humanist tweaks: single-storey a, alt 1, alt g */
--ds-font-display: var(--ds-font-sans); /* FEAT-065: Inter only — Plus Jakarta Sans dropped */
/* R-014368: ONE typeface. --ds-font-mono used to name a second family
('JetBrains Mono', 'Fira Code', 'Consolas', monospace) which was loaded from
fonts.bunny.net — a third-party request on every page load, while Inter is served
from our own wwwroot. Dropping it removes the last external font dependency:
one less thing to fail when a browser blocks third-party origins, and the app
stays whole without internet access.
The name is kept and re-pointed rather than deleted, so the 8 rules that spell
their family as --ds-font-mono keep working. Do not add new references. */
--ds-font-mono: var(--ds-font-sans);
/* Bootstrap's .font-monospace utility reads this variable and applies it with
!important. 23 places across 11 razor files use that class for keys, ids,
mailboxes and table names. Re-pointing the variable neutralises all of them at
once — no specificity fight, no markup churn. */
--bs-font-monospace: var(--ds-font-sans);
/* ===========================================================
CANONICAL TYPE SCALE — FEAT-064 decision #7 (Major Third, Compact-Dense)
Six roles. Absolute px on purpose. Use THESE for anything new.
===========================================================
Measured on cc-prod 2026-08-25: the stylesheet was rendering 45 distinct font
sizes, eleven of them crowded between 10.5px and 12.6px. Nobody chose values like
8.26px, 9.63px or 11.38px — they are rem literals multiplied by a 14px root.
Two structural causes, both fixed by using these tokens:
1. ROOT SIZE. This app sets the root to 14px, not the 16px a rem value is usually
read against. Every rem literal therefore lands 12.5% below its apparent value:
0.8125rem reads as "13px" and renders 11.375px.
2. FLUID vs FIXED. The --ds-text-* scale below is clamp()-based and viewport
dependent: --ds-text-sm alone ranges 11.375px…12.25px as the window resizes,
while the control tokens are a fixed 13px. Those two can never line up — the
mismatch is by construction, not by carelessness. Fluid type also fights the
Compact-Dense identity: a dense CRM wants a stable rhythm, not text that
breathes with the window.
A concrete symptom: the country suggestion list rendered 11.375px/450 next to its
own input at 13px/400 — smaller AND bolder, which reads as "wrong" without being
nameable. Reported by the customer, invisible in the source.
R-014251: the --ds-text-* names below are no longer a second scale — they now
resolve to these six steps. (The earlier note here claimed ~240 referencing rules;
measured, it is 51. The 240 was the count of hard-coded rem literals, a different
and still-open number.) */
--ds-type-h1: 24px; /* weight 700 */
--ds-type-h2: 20px; /* weight 700 */
--ds-type-h3: 16px; /* weight 600 */
--ds-type-body: 14px; /* weight 400 — matches the root, the workhorse size */
--ds-type-small: 13px; /* weight 400 — form controls, table cells, dropdown items */
--ds-type-meta: 12px; /* weight 500 — badges, captions, hints */
/* Siebte Stufe (R-014251, Entscheid Christian 29.08.2026): Schaufenster-Text.
Nicht Teil der sechs Arbeitsstufen und bewusst so — sie gilt fuer Seiten mit
genau EINER dominanten Aussage: Markenschriftzug der Anmeldung, 404, Einrichtung.
Ein Wert an einer Stelle, statt 42/42/56 verstreut im Markup. Wer sie fuer
Fliesstext benutzt, hat sie missverstanden. */
--ds-type-display: 42px;
/* Font Sizes — LEGACY NAMES, CANONICAL VALUES (R-014251, Batch B2).
51 rules still spell their size as --ds-text-*. Rather than edit 51 call sites,
the names now RESOLVE to the six canonical steps above. One edit, one place to
revert, and the fluid-vs-fixed contradiction is gone everywhere at once:
the scale was clamp()-based and therefore window-width dependent, while control
and button sizes were fixed — the two could never meet. That mismatch is what the
customer saw as a dropdown whose text did not match the field above it.
Mapping is by RENDERED size at this app's 14px root, not by the name:
xs 9.63–10.5px -> meta 12px (nothing should render below 12)
sm 11.38–12.25 -> small 13px (the reported dropdown)
base 13.13–14 -> body 14px
lg 14.88–15.75 -> h3 16px
xl 16.63–17.5 -> h3 16px (lg and xl collapse — six steps means fewer)
2xl 19.25–21 -> h2 20px
3xl 22.75–26.25 -> h1 24px
Renaming the 51 call sites to --ds-type-* is cosmetic and can follow at leisure.
Do not add new references to these names. */
--ds-text-xs: var(--ds-type-meta);
--ds-text-sm: var(--ds-type-small);
--ds-text-base: var(--ds-type-body);
--ds-text-lg: var(--ds-type-h3);
--ds-text-xl: var(--ds-type-h3);
--ds-text-2xl: var(--ds-type-h2);
--ds-text-3xl: var(--ds-type-h1);
/* Line Heights */
--ds-leading-none: 1;
--ds-leading-tight: 1.25;
--ds-leading-snug: 1.375;
--ds-leading-normal: 1.5;
--ds-leading-relaxed: 1.625;
--ds-leading-loose: 2;
/* Font Weights */
--ds-font-light: 300;
--ds-font-normal: 400;
--ds-font-medium: 500;
--ds-font-semibold: 600;
--ds-font-bold: 700;
/* Letter Spacing */
--ds-tracking-tighter: -0.05em;
--ds-tracking-tight: -0.025em;
--ds-tracking-normal: 0;
--ds-tracking-wide: 0.025em;
--ds-tracking-wider: 0.05em;
--ds-tracking-widest: 0.1em;
/* --- Spacing Scale --- */
--ds-space-0: 0;
--ds-space-px: 1px;
--ds-space-0-5: 0.125rem;
--ds-space-1: 0.25rem;
--ds-space-1-5: 0.375rem;
--ds-space-2: 0.5rem;
--ds-space-2-5: 0.625rem;
--ds-space-3: 0.75rem;
--ds-space-3-5: 0.875rem;
--ds-space-4: 1rem;
--ds-space-5: 1.25rem;
--ds-space-6: 1.5rem;
--ds-space-7: 1.75rem;
--ds-space-8: 2rem;
--ds-space-9: 2.25rem;
--ds-space-10: 2.5rem;
--ds-space-12: 3rem;
--ds-space-14: 3.5rem;
--ds-space-16: 4rem;
--ds-space-20: 5rem;
--ds-space-24: 6rem;
--ds-space-32: 8rem;
/* --- Border Radius --- */
--ds-radius-none: 0;
--ds-radius-sm: 0.25rem;
--ds-radius-md: 0.5rem;
--ds-radius-lg: 0.75rem;
--ds-radius-xl: 1rem;
--ds-radius-2xl: 1.5rem;
--ds-radius-3xl: 2rem;
--ds-radius-full: 9999px;
/* --- Shadows --- */
--ds-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--ds-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--ds-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--ds-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--ds-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
/* --ds-glow-* DROPPED (FEAT-065 — Liquid Glass retired) */
/* --- Transitions --- */
--ds-duration-instant: 50ms;
--ds-duration-fast: 100ms;
--ds-duration-normal: 200ms;
--ds-duration-slow: 300ms;
--ds-duration-slower: 500ms;
--ds-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ds-ease-in: cubic-bezier(0.4, 0, 1, 1);
--ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
--ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ds-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ds-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* --- Z-Index Scale --- */
--ds-z-dropdown: 1000;
--ds-z-sticky: 1020;
--ds-z-fixed: 1030;
--ds-z-modal-backdrop: 1040;
--ds-z-modal: 1050;
--ds-z-popover: 1060;
--ds-z-tooltip: 1070;
--ds-z-toast: 1080;
/* --- Breakpoints (for reference in JS) --- */
--ds-bp-sm: 768px;
--ds-bp-md: 768px;
--ds-bp-lg: 1024px;
--ds-bp-xl: 1280px;
--ds-bp-2xl: 1536px;
/* --ds-glass-* DROPPED (FEAT-065 — Liquid Glass retired) */
/* --- Layout --- */
--ds-sidebar-width: 280px;
--ds-sidebar-collapsed: 72px;
--ds-header-height: 64px;
--ds-content-max-width: 1400px;
}
/* LIQUID GLASS EFFECTS section dropped (FEAT-065).
Components that referenced .glass / .glass-card / .glass-dark are migrated to .ds-card in P5. */
/* ===========================================
TYPOGRAPHY
=========================================== */
.ds-text-display {
font-family: var(--ds-font-display);
font-weight: var(--ds-font-bold);
line-height: var(--ds-leading-tight);
letter-spacing: var(--ds-tracking-tight);
}
.ds-text-heading {
font-family: var(--ds-font-sans);
font-weight: var(--ds-font-semibold);
line-height: var(--ds-leading-snug);
letter-spacing: var(--ds-tracking-tight);
}
.ds-text-body {
font-family: var(--ds-font-sans);
font-weight: var(--ds-font-normal);
line-height: var(--ds-leading-relaxed);
}
.ds-text-label {
font-family: var(--ds-font-sans);
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-medium);
letter-spacing: var(--ds-tracking-wide);
text-transform: uppercase;
}
.ds-text-mono {
font-family: var(--ds-font-mono);
font-size: 0.9em;
}
/* Type scale — die Klassen .ds-h1..h6 standen hier und wurden am 29.08.2026
entfernt (R-014251). Sie bildeten eine ZWEITE Ueberschriften-Skala neben den
kanonischen --ds-type-* und waren die einzigen Verweise auf die beiden
fliessenden Token --ds-text-4xl/5xl. Basis-Token-Grep ueber .razor/.cs/.cshtml/
.html/.js/.ts: null Treffer, keine dynamisch zusammengesetzten Klassennamen —
erst damit war das Entfernen nach der Projektregel zulaessig.
Fuer Ueberschriften gelten --ds-type-h1..h3 und --ds-type-display. */
/* ===========================================
BUTTONS
=========================================== */
.ds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-2);
padding: var(--ds-space-2-5) var(--ds-space-5);
font-family: var(--ds-font-sans);
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-medium);
line-height: var(--ds-leading-tight);
border-radius: var(--ds-radius-lg);
border: none;
cursor: pointer;
transition: all var(--ds-duration-normal) var(--ds-ease-default);
text-decoration: none;
white-space: nowrap;
user-select: none;
}
.ds-btn:focus-visible {
outline: 2px solid var(--ds-primary-500);
outline-offset: 2px;
}
.ds-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Primary */
.ds-btn-primary {
background: linear-gradient(135deg, var(--ds-primary-600) 0%, var(--ds-primary-700) 100%);
color: white;
box-shadow: 0 2px 8px rgba(190, 123, 114, 0.25);
}
.ds-btn-primary:hover:not(:disabled) {
background: linear-gradient(135deg, var(--ds-primary-500) 0%, var(--ds-primary-600) 100%);
box-shadow: 0 4px 16px rgba(190, 123, 114, 0.35);
transform: translateY(-1px);
}
.ds-btn-primary:active:not(:disabled) {
transform: translateY(0);
}
/* Secondary */
.ds-btn-secondary {
background: var(--ds-neutral-100);
color: var(--ds-neutral-700);
border: 1px solid var(--ds-neutral-200);
}
.ds-btn-secondary:hover:not(:disabled) {
background: var(--ds-neutral-200);
border-color: var(--ds-neutral-300);
}
/* Ghost */
.ds-btn-ghost {
background: transparent;
color: var(--ds-neutral-600);
}
.ds-btn-ghost:hover:not(:disabled) {
background: var(--ds-neutral-100);
color: var(--ds-neutral-900);
}
/* .ds-btn-glass dropped (FEAT-065 — Liquid Glass retired; consumers migrated to .ds-btn-secondary) */
/* Sizes */
.ds-btn-sm {
padding: var(--ds-space-1-5) var(--ds-space-3);
font-size: var(--ds-text-xs);
border-radius: var(--ds-radius-md);
}
.ds-btn-lg {
padding: var(--ds-space-3-5) var(--ds-space-7);
font-size: var(--ds-text-base);
border-radius: var(--ds-radius-xl);
}
/* Icon Button */
.ds-btn-icon {
padding: var(--ds-space-2-5);
aspect-ratio: 1;
}
.ds-btn-icon.ds-btn-sm { padding: var(--ds-space-1-5); }
.ds-btn-icon.ds-btn-lg { padding: var(--ds-space-3-5); }
/* Danger */
.ds-btn-danger {
background: #923d3a;
color: white;
}
.ds-btn-danger:hover:not(:disabled) {
background: #b02a2d;
}
/* Outline variants */
.ds-btn-outline-primary {
background: transparent;
color: var(--ds-primary-600);
border: 1px solid var(--ds-primary-600);
}
.ds-btn-outline-primary:hover:not(:disabled) {
background: var(--ds-primary-600);
color: white;
}
.ds-btn-outline-secondary {
background: transparent;
color: var(--ds-neutral-600);
border: 1px solid var(--ds-neutral-300);
}
.ds-btn-outline-secondary:hover:not(:disabled) {
background: var(--ds-neutral-100);
color: var(--ds-neutral-800);
border-color: var(--ds-neutral-400);
}
.ds-btn-outline-danger {
background: transparent;
color: #923d3a;
border: 1px solid #923d3a;
}
.ds-btn-outline-danger:hover:not(:disabled) {
background: #923d3a;
color: white;
}
.ds-btn-outline-success {
background: transparent;
color: #107c10;
border: 1px solid #107c10;
}
.ds-btn-outline-success:hover:not(:disabled) {
background: #107c10;
color: white;
}
.ds-btn-outline-warning {
background: transparent;
color: #f7630c;
border: 1px solid #f7630c;
}
.ds-btn-outline-warning:hover:not(:disabled) {
background: #f7630c;
color: white;
}
.ds-btn-success {
background: #107c10;
color: white;
}
.ds-btn-success:hover:not(:disabled) { background: #0e6b0e; }
.ds-btn-warning {
background: #f7630c;
color: white;
}
.ds-btn-warning:hover:not(:disabled) { background: #d9560b; }
.ds-btn-info {
background: #be7b72;
color: white;
}
.ds-btn-info:hover:not(:disabled) { background: #006cbe; }
.ds-btn-light {
background: var(--ds-neutral-100);
color: var(--ds-neutral-700);
}
.ds-btn-light:hover:not(:disabled) { background: var(--ds-neutral-200); }
.ds-btn-dark {
background: var(--ds-neutral-800);
color: white;
}
.ds-btn-dark:hover:not(:disabled) { background: var(--ds-neutral-900); }
/* Link style */
.ds-btn-link {
background: transparent;
color: var(--ds-neutral-500);
padding-left: 0;
padding-right: 0;
}
.ds-btn-link:hover:not(:disabled) {
color: var(--ds-primary-600);
text-decoration: none;
}
/* ===========================================
INPUTS
=========================================== */
.ds-input {
width: 100%;
padding: var(--ds-space-2-5) var(--ds-space-4);
font-family: var(--ds-font-sans);
font-size: var(--ds-text-sm);
line-height: var(--ds-leading-normal);
color: var(--ds-neutral-900);
background: var(--ds-neutral-0);
border: 1px solid var(--ds-neutral-300);
border-radius: var(--ds-radius-lg);
transition: all var(--ds-duration-fast) var(--ds-ease-default);
}
.ds-input::placeholder {
color: var(--ds-neutral-400);
}
.ds-input:hover:not(:disabled) {
border-color: var(--ds-neutral-400);
}
.ds-input:focus {
outline: none;
border-color: var(--ds-primary-500);
box-shadow: 0 0 0 3px var(--ds-primary-100);
}
.ds-input:disabled {
background: var(--ds-neutral-100);
cursor: not-allowed;
}
/* .ds-input-glass dropped (FEAT-065 — Liquid Glass retired; consumers migrated to .ds-input) */
/* Input with icon */
.ds-input-group {
position: relative;
display: flex;
align-items: center;
}
.ds-input-icon {
position: absolute;
left: var(--ds-space-3);
color: var(--ds-neutral-400);
pointer-events: none;
}
.ds-input-group .ds-input {
padding-left: var(--ds-space-10);
}
/* ===========================================
CARDS
=========================================== */
.ds-card {
background: var(--ds-neutral-0);
border-radius: var(--ds-radius-xl);
border: 1px solid var(--ds-neutral-200);
box-shadow: var(--ds-shadow-sm);
overflow: hidden;
}
.ds-card-glass {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: var(--ds-shadow-md);
}
.ds-card-header {
padding: var(--ds-space-5) var(--ds-space-6);
border-bottom: 1px solid var(--ds-neutral-100);
}
.ds-card-body {
padding: var(--ds-space-6);
}
.ds-card-footer {
padding: var(--ds-space-4) var(--ds-space-6);
background: var(--ds-neutral-50);
border-top: 1px solid var(--ds-neutral-100);
}
/* Interactive Card */
.ds-card-interactive {
cursor: pointer;
transition: all var(--ds-duration-normal) var(--ds-ease-default);
}
@media (hover: hover) {
.ds-card-interactive:hover {
transform: translateY(-2px);
box-shadow: var(--ds-shadow-lg);
border-color: var(--ds-neutral-300);
}
}
/* ===========================================
BENTO GRID
=========================================== */
.ds-bento {
display: grid;
gap: var(--ds-space-4);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.ds-bento-item {
min-height: 200px;
}
.ds-bento-item-lg {
grid-column: span 2;
}
.ds-bento-item-tall {
grid-row: span 2;
}
@media (max-width: 768px) {
.ds-bento-item-lg,
.ds-bento-item-tall {
grid-column: span 1;
grid-row: span 1;
}
}
/* ===========================================
BADGES & TAGS
=========================================== */
.ds-badge {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
padding: var(--ds-space-1) var(--ds-space-2-5);
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-medium);
line-height: var(--ds-leading-none);
border-radius: var(--ds-radius-full);
white-space: nowrap;
}
.ds-badge-primary {
background: var(--ds-primary-100);
color: var(--ds-primary-700);
}
.ds-badge-success {
background: var(--ds-success-light);
color: var(--ds-success-dark);
}
.ds-badge-warning {
background: var(--ds-warning-light);
color: var(--ds-warning-dark);
}
.ds-badge-error {
background: var(--ds-danger-light);
color: var(--ds-danger-dark);
}
.ds-badge-neutral {
background: var(--ds-neutral-100);
color: var(--ds-neutral-600);
}
/* Quality score pill (R-014995) — a dot plus the bare number, no percent sign, so the contact
list's Quality column stays narrow. The tier class replaces the former inline
background-color; thresholds live in ContactList.GetQualityTier (>=90 / >=70 / >=50 / >=25). */
.ds-quality {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
padding: var(--ds-space-1) var(--ds-space-1-5);
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-semibold);
line-height: var(--ds-leading-none);
border-radius: var(--ds-radius-full);
color: var(--ds-neutral-0);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ds-quality .bi {
font-size: 0.6em;
line-height: 1;
}
.ds-quality-excellent {
background: var(--ds-success);
}
.ds-quality-good {
background: var(--ds-primary-700);
}
.ds-quality-fair {
background: var(--ds-warning);
}
.ds-quality-poor {
background: var(--ds-primary-400);
}
.ds-quality-critical {
background: var(--ds-danger);
}
/* Pill badge with dot */
.ds-badge-dot::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ===========================================
AVATARS
=========================================== */
.ds-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ds-radius-full);
font-weight: var(--ds-font-semibold);
color: white;
background: linear-gradient(135deg, var(--ds-primary-500) 0%, var(--ds-primary-700) 100%);
flex-shrink: 0;
overflow: hidden;
}
.ds-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ds-avatar-xs { width: 24px; height: 24px; font-size: var(--ds-type-meta); }
.ds-avatar-sm { width: 32px; height: 32px; font-size: var(--ds-type-meta); }
.ds-avatar-md { width: 40px; height: 40px; font-size: var(--ds-type-body); }
.ds-avatar-lg { width: 48px; height: 48px; font-size: var(--ds-type-h3); }
.ds-avatar-xl { width: 64px; height: 64px; font-size: var(--ds-type-h2); }
.ds-avatar-2xl { width: 96px; height: 96px; font-size: 28px; }
/* Avatar group */
.ds-avatar-group {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.ds-avatar-group .ds-avatar {
margin-left: -8px;
border: 2px solid var(--ds-neutral-0);
box-shadow: var(--ds-shadow-sm);
}
.ds-avatar-group .ds-avatar:last-child {
margin-left: 0;
}
/* ===========================================
TABLES
=========================================== */
.ds-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.ds-table th,
.ds-table td {
padding: var(--ds-space-3) var(--ds-space-4);
text-align: left;
border-bottom: 1px solid var(--ds-neutral-100);
}
.ds-table th {
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-semibold);
text-transform: uppercase;
letter-spacing: var(--ds-tracking-wider);
color: var(--ds-neutral-500);
background: var(--ds-neutral-50);
}
.ds-table tbody tr {
transition: background var(--ds-duration-fast) var(--ds-ease-default);
}
.ds-table tbody tr:hover {
background: var(--ds-neutral-50);
}
/* ===========================================
ALERTS
=========================================== */
.ds-alert {
display: flex;
gap: var(--ds-space-3);
padding: var(--ds-space-4);
border-radius: var(--ds-radius-lg);
border: 1px solid transparent;
}
.ds-alert-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
}
.ds-alert-content {
flex: 1;
min-width: 0;
}
.ds-alert-title {
font-weight: var(--ds-font-semibold);
margin-bottom: var(--ds-space-1);
}
.ds-alert-success {
background: var(--ds-success-light);
border-color: var(--ds-success);
color: var(--ds-success-dark);
}
.ds-alert-warning {
background: var(--ds-warning-light);
border-color: var(--ds-warning);
color: var(--ds-warning-dark);
}
.ds-alert-error {
background: var(--ds-danger-light);
border-color: var(--ds-danger);
color: var(--ds-danger-dark);
}
.ds-alert-info {
background: var(--ds-primary-50);
border-color: var(--ds-primary-600);
color: var(--ds-primary-700);
}
/* License Banner (FEAT-018) */
.license-banner {
text-align: center;
font-size: var(--ds-type-small);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.license-banner-warning {
background: #fff3cd;
color: #664d03;
}
.license-banner-grace {
background: #ffe0b2;
color: #7a4100;
}
.license-banner-expired {
background: #f8d7da;
color: #842029;
}
.license-banner-unlicensed {
background: #e9ecef;
color: #495057;
}
.btn-close-sm {
font-size: var(--ds-type-meta);
padding: 0.25rem;
}
.module-locked-overlay {
opacity: 0.7;
pointer-events: none;
user-select: none;
}
/* ===========================================
SIDEBAR NAVIGATION
=========================================== */
.ds-sidebar {
width: var(--ds-sidebar-width);
height: 100vh;
display: flex;
flex-direction: column;
background: var(--ds-dark-bg);
background-image: linear-gradient(135deg, rgba(190, 123, 114, 0.1) 0%, transparent 50%);
border-right: 1px solid var(--ds-dark-border);
color: var(--ds-neutral-300);
transition: width var(--ds-duration-slow) var(--ds-ease-default);
overflow: hidden;
}
.ds-sidebar.collapsed {
width: var(--ds-sidebar-collapsed);
}
/* Sidebar Brand */
.ds-sidebar-brand {
display: flex;
align-items: center;
gap: var(--ds-space-3);
padding: var(--ds-space-5);
border-bottom: 1px solid var(--ds-dark-border);
}
.ds-sidebar-brand-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
}
.ds-sidebar-brand-text {
font-size: var(--ds-text-lg);
font-weight: var(--ds-font-bold);
color: white;
white-space: nowrap;
overflow: hidden;
}
/* Sidebar Navigation */
.ds-sidebar-nav {
flex: 1;
padding: var(--ds-space-3);
overflow-y: auto;
overflow-x: hidden;
}
.ds-sidebar-section {
margin-bottom: var(--ds-space-6);
}
.ds-sidebar-section-label {
padding: var(--ds-space-2) var(--ds-space-3);
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-semibold);
text-transform: uppercase;
letter-spacing: var(--ds-tracking-wider);
color: var(--ds-neutral-500);
white-space: nowrap;
}
.ds-sidebar-item {
display: flex;
align-items: center;
gap: var(--ds-space-3);
padding: var(--ds-space-2-5) var(--ds-space-3);
margin-bottom: var(--ds-space-1);
border-radius: var(--ds-radius-lg);
color: var(--ds-neutral-400);
text-decoration: none;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
cursor: pointer;
}
.ds-sidebar-item:hover {
background: var(--ds-dark-elevated);
color: white;
}
.ds-sidebar-item.active {
background: linear-gradient(135deg, var(--ds-primary-600) 0%, var(--ds-primary-700) 100%);
color: white;
box-shadow: 0 2px 8px rgba(190, 123, 114, 0.3);
}
.ds-sidebar-item-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ds-sidebar-item-text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-medium);
}
.ds-sidebar-item-badge {
padding: var(--ds-space-0-5) var(--ds-space-2);
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-semibold);
background: var(--ds-primary-600);
color: white;
border-radius: var(--ds-radius-full);
}
/* Nested Items */
.ds-sidebar-subnav {
margin-left: var(--ds-space-8);
margin-top: var(--ds-space-1);
}
.ds-sidebar-subnav .ds-sidebar-item {
padding: var(--ds-space-2) var(--ds-space-3);
font-size: var(--ds-text-sm);
}
/* Sidebar Footer */
.ds-sidebar-footer {
padding: var(--ds-space-4);
border-top: 1px solid var(--ds-dark-border);
}
.ds-sidebar-user {
display: flex;
align-items: center;
gap: var(--ds-space-3);
padding: var(--ds-space-2);
border-radius: var(--ds-radius-lg);
transition: background var(--ds-duration-fast) var(--ds-ease-default);
cursor: pointer;
}
.ds-sidebar-user:hover {
background: var(--ds-dark-elevated);
}
.ds-sidebar-user-info {
flex: 1;
min-width: 0;
}
.ds-sidebar-user-name {
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-medium);
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-sidebar-user-role {
font-size: var(--ds-text-xs);
color: var(--ds-neutral-500);
}
/* Collapsed State */
.ds-sidebar.collapsed .ds-sidebar-brand-text,
.ds-sidebar.collapsed .ds-sidebar-section-label,
.ds-sidebar.collapsed .ds-sidebar-item-text,
.ds-sidebar.collapsed .ds-sidebar-item-badge,
.ds-sidebar.collapsed .ds-sidebar-user-info {
display: none;
}
.ds-sidebar.collapsed .ds-sidebar-brand,
.ds-sidebar.collapsed .ds-sidebar-item,
.ds-sidebar.collapsed .ds-sidebar-user {
justify-content: center;
}
.ds-sidebar.collapsed .ds-sidebar-item {
padding: var(--ds-space-3);
}
.ds-sidebar.collapsed .ds-sidebar-subnav {
margin-left: 0;
}
/* ===========================================
MODALS
=========================================== */
.ds-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: var(--ds-z-modal-backdrop);
display: flex;
align-items: center;
justify-content: center;
padding: var(--ds-space-4);
}
.ds-modal {
background: var(--ds-neutral-0);
border-radius: var(--ds-radius-2xl);
box-shadow: var(--ds-shadow-2xl);
max-width: 500px;
width: 100%;
max-height: calc(100vh - var(--ds-space-8));
overflow: hidden;
z-index: var(--ds-z-modal);
}
.ds-modal-glass {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
}
.ds-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ds-space-5) var(--ds-space-6);
border-bottom: 1px solid var(--ds-neutral-100);
}
.ds-modal-title {
font-size: var(--ds-text-lg);
font-weight: var(--ds-font-semibold);
color: var(--ds-neutral-900);
}
.ds-modal-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ds-radius-md);
color: var(--ds-neutral-400);
cursor: pointer;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
}
.ds-modal-close:hover {
background: var(--ds-neutral-100);
color: var(--ds-neutral-600);
}
.ds-modal-body {
padding: var(--ds-space-6);
overflow-y: auto;
}
.ds-modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--ds-space-3);
padding: var(--ds-space-4) var(--ds-space-6);
border-top: 1px solid var(--ds-neutral-100);
background: var(--ds-neutral-50);
}
/* ===========================================
LOADERS & SPINNERS
=========================================== */
.ds-spinner {
width: 24px;
height: 24px;
border: 2px solid var(--ds-neutral-200);
border-top-color: var(--ds-primary-600);
border-radius: 50%;
animation: ds-spin 0.8s linear infinite;
}
.ds-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.ds-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes ds-spin {
to { transform: rotate(360deg); }
}
/* Skeleton loader */
.ds-skeleton {
background: linear-gradient(
90deg,
var(--ds-neutral-200) 25%,
var(--ds-neutral-100) 50%,
var(--ds-neutral-200) 75%
);
background-size: 200% 100%;
animation: ds-shimmer 1.5s infinite;
border-radius: var(--ds-radius-md);
}
@keyframes ds-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ===========================================
TOOLTIPS
=========================================== */
.ds-tooltip {
position: relative;
}
.ds-tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: var(--ds-space-1-5) var(--ds-space-3);
font-size: var(--ds-text-xs);
font-weight: var(--ds-font-medium);
color: white;
background: var(--ds-neutral-900);
border-radius: var(--ds-radius-md);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
z-index: var(--ds-z-tooltip);
}
.ds-tooltip:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* ===========================================
UTILITY CLASSES
=========================================== */
/* Flex utilities */
.ds-flex { display: flex; }
.ds-flex-col { flex-direction: column; }
.ds-flex-wrap { flex-wrap: wrap; }
.ds-items-center { align-items: center; }
.ds-items-start { align-items: flex-start; }
.ds-items-end { align-items: flex-end; }
.ds-justify-center { justify-content: center; }
.ds-justify-between { justify-content: space-between; }
.ds-justify-end { justify-content: flex-end; }
.ds-gap-1 { gap: var(--ds-space-1); }
.ds-gap-2 { gap: var(--ds-space-2); }
.ds-gap-3 { gap: var(--ds-space-3); }
.ds-gap-4 { gap: var(--ds-space-4); }
.ds-gap-6 { gap: var(--ds-space-6); }
.ds-gap-8 { gap: var(--ds-space-8); }
/* ===========================================
FORM LAYOUT - Labels Left of Inputs
=========================================== */
.ds-form-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--ds-space-2) var(--ds-space-4);
align-items: center;
margin-bottom: var(--ds-space-3);
}
.ds-form-row label,
.ds-form-row .ds-form-label {
font-size: var(--ds-text-sm);
font-weight: var(--ds-font-medium);
color: var(--ds-neutral-600);
text-align: right;
white-space: nowrap;
}
.ds-form-row .ds-input,
.ds-form-row input,
.ds-form-row select,
.ds-form-row textarea {
width: 100%;
}
/* Wider label variant */
.ds-form-row-wide {
grid-template-columns: 160px 1fr;
}
/* Narrow label variant */
.ds-form-row-narrow {
grid-template-columns: 90px 1fr;
}
/* Full-width input (label above) - use sparingly */
.ds-form-row-stacked {
grid-template-columns: 1fr;
}
.ds-form-row-stacked label,
.ds-form-row-stacked .ds-form-label {
text-align: left;
margin-bottom: var(--ds-space-1);
}
/* Form group for multiple rows */
.ds-form-group {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
}
/* Multi-column form layout */
.ds-form-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--ds-space-6);
}
/* Responsive: Stack labels above inputs on mobile */
@media (max-width: 767.98px) {
.ds-form-row {
grid-template-columns: 1fr;
}
.ds-form-row label,
.ds-form-row .ds-form-label {
text-align: left;
margin-bottom: var(--ds-space-1);
}
.ds-form-row-wide,
.ds-form-row-narrow {
grid-template-columns: 1fr;
}
}
/* Text utilities */
.ds-text-center { text-align: center; }
.ds-text-right { text-align: right; }
.ds-text-muted { color: var(--ds-neutral-500); }
.ds-text-primary { color: var(--ds-primary-600); }
.ds-text-success { color: var(--ds-success); }
.ds-text-warning { color: var(--ds-warning-dark); }
.ds-text-error { color: var(--ds-danger); }
/* Background utilities */
.ds-bg-primary { background-color: var(--ds-primary-600); }
.ds-bg-primary-light { background-color: var(--ds-primary-100); }
.ds-bg-muted { background-color: var(--ds-neutral-100); }
/* Spacing utilities */
.ds-p-0 { padding: 0; }
.ds-p-2 { padding: var(--ds-space-2); }
.ds-p-4 { padding: var(--ds-space-4); }
.ds-p-6 { padding: var(--ds-space-6); }
.ds-p-8 { padding: var(--ds-space-8); }
.ds-m-0 { margin: 0; }
.ds-mb-2 { margin-bottom: var(--ds-space-2); }
.ds-mb-4 { margin-bottom: var(--ds-space-4); }
.ds-mb-6 { margin-bottom: var(--ds-space-6); }
.ds-mb-8 { margin-bottom: var(--ds-space-8); }
.ds-mt-auto { margin-top: auto; }
/* Border utilities */
.ds-rounded { border-radius: var(--ds-radius-md); }
.ds-rounded-lg { border-radius: var(--ds-radius-lg); }
.ds-rounded-xl { border-radius: var(--ds-radius-xl); }
.ds-rounded-full { border-radius: var(--ds-radius-full); }
.ds-border { border: 1px solid var(--ds-neutral-200); }
/* Shadow utilities */
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-shadow-md { box-shadow: var(--ds-shadow-md); }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }
.ds-shadow-xl { box-shadow: var(--ds-shadow-xl); }
/* ===========================================
ACCESSIBILITY
=========================================== */
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.ds-skeleton {
animation: none;
background: var(--ds-neutral-200);
}
}
/* Focus visible for keyboard navigation */
:focus-visible {
outline: 2px solid var(--ds-primary-500);
outline-offset: 2px;
}
/* Skip link */
.ds-skip-link {
position: absolute;
top: -40px;
left: 0;
padding: var(--ds-space-2) var(--ds-space-4);
background: var(--ds-primary-600);
color: white;
z-index: var(--ds-z-toast);
transition: top var(--ds-duration-fast) var(--ds-ease-default);
}
.ds-skip-link:focus {
top: 0;
}
/* Screen reader only */
.ds-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;
}
/* ===========================================
DARK MODE
=========================================== */
[data-theme="dark"],
.dark {
--ds-neutral-0: #0f172a;
--ds-neutral-50: #1e293b;
--ds-neutral-100: #334155;
--ds-neutral-200: #475569;
--ds-neutral-300: #64748b;
--ds-neutral-400: #94a3b8;
--ds-neutral-500: #cbd5e1;
--ds-neutral-600: #e2e8f0;
--ds-neutral-700: #f1f5f9;
--ds-neutral-800: #f8fafc;
--ds-neutral-900: #ffffff;
color-scheme: dark;
}
[data-theme="dark"] .ds-card,
.dark .ds-card {
background: var(--ds-dark-surface);
border-color: var(--ds-dark-border);
}
[data-theme="dark"] .ds-input,
.dark .ds-input {
background: var(--ds-dark-surface);
border-color: var(--ds-dark-border);
color: var(--ds-neutral-900);
}
[data-theme="dark"] .ds-btn-secondary,
.dark .ds-btn-secondary {
background: var(--ds-dark-surface);
border-color: var(--ds-dark-border);
color: var(--ds-neutral-300);
}
/* ===========================================
PAGE HEADERS
=========================================== */
.ds-page-header {
background: linear-gradient(135deg, var(--ds-primary-600) 0%, var(--ds-primary-800) 100%);
color: white;
margin: calc(var(--ds-space-4) * -1);
margin-bottom: var(--ds-space-6);
padding: var(--ds-space-6);
border-radius: 0 0 var(--ds-radius-2xl) var(--ds-radius-2xl);
}
.ds-page-header .ds-avatar {
background: rgba(255, 255, 255, 0.2);
}
.ds-page-header .ds-text-muted {
color: rgba(255, 255, 255, 0.8);
}
.ds-page-header .ds-mb-0,
.ds-page-header h1,
.ds-page-header h2,
.ds-page-header h3 {
color: white;
}
.ds-page-subtitle {
color: rgba(255, 255, 255, 0.8);
font-size: var(--ds-text-sm);
}
@media (max-width: 767.98px) {
.ds-page-header {
margin: -1rem;
margin-bottom: var(--ds-space-4);
padding: var(--ds-space-4);
}
}
/* ===========================================
BUTTON GROUPS
=========================================== */
.ds-btn-group {
display: flex;
border-radius: var(--ds-radius-lg);
overflow: hidden;
}
.ds-btn-group .ds-btn {
border-radius: 0;
}
.ds-btn-group .ds-btn:first-child {
border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg);
}
.ds-btn-group .ds-btn:last-child {
border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0;
}
/* ===========================================
STAT CARDS
=========================================== */
.ds-stat-card {
text-decoration: none;
border-left: 4px solid var(--ds-primary-600);
}
.ds-stat-icon {
width: 64px;
height: 64px;
border-radius: var(--ds-radius-xl);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-h1);
flex-shrink: 0;
}
.ds-stat-icon-primary {
background: linear-gradient(135deg, var(--ds-primary-100) 0%, var(--ds-primary-200) 100%);
color: var(--ds-primary-600);
}
.ds-stat-icon-secondary {
background: linear-gradient(135deg, var(--ds-primary-100) 0%, var(--ds-primary-200) 100%);
color: var(--ds-warning);
}
.ds-stat-icon-neutral {
background: var(--ds-neutral-100);
color: var(--ds-neutral-600);
}
.ds-stat-secondary {
color: var(--ds-warning);
}
/* ===========================================
ACTIVITY LIST
=========================================== */
.ds-activity-list {
display: flex;
flex-direction: column;
}
.ds-activity-item {
display: flex;
align-items: flex-start;
gap: var(--ds-space-3);
padding: var(--ds-space-4) var(--ds-space-6);
border-bottom: 1px solid var(--ds-neutral-100);
transition: background var(--ds-duration-fast) var(--ds-ease-default);
}
.ds-activity-item:hover {
background: var(--ds-neutral-50);
}
.ds-activity-item:last-child {
border-bottom: none;
}
.ds-activity-icon {
width: 40px;
height: 40px;
border-radius: var(--ds-radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ds-activity-icon.created {
background: var(--ds-success-light);
color: var(--ds-success-dark);
}
.ds-activity-icon.updated {
background: var(--ds-primary-50);
color: var(--ds-primary-700);
}
.ds-activity-icon.deleted {
background: var(--ds-danger-light);
color: var(--ds-danger-dark);
}
.ds-activity-icon.login {
background: var(--ds-primary-100);
color: var(--ds-primary-600);
}
.ds-activity-icon.other {
background: var(--ds-neutral-100);
color: var(--ds-neutral-600);
}
.ds-activity-content {
flex: 1;
min-width: 0;
}
.ds-activity-title {
font-weight: var(--ds-font-medium);
color: var(--ds-neutral-900);
}
.ds-activity-time {
font-size: var(--ds-text-xs);
color: var(--ds-neutral-400);
white-space: nowrap;
margin-left: var(--ds-space-2);
}
.ds-activity-user {
font-size: var(--ds-text-sm);
color: var(--ds-neutral-500);
display: block;
margin-top: var(--ds-space-1);
}
/* ===========================================
EMPTY STATES
=========================================== */
.ds-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--ds-space-8);
color: var(--ds-neutral-400);
}
.ds-empty-state i {
font-size: 2.5rem;
margin-bottom: var(--ds-space-3);
opacity: 0.5;
}
.ds-empty-state p {
margin: 0;
}
/* ===========================================
FEAT-077 P3 — Field-change provenance timeline
(reuses .ds-badge / .ds-skeleton / .ds-empty-state / .ds-alert; only the
skeleton row height + the event/field layout are net-new, all token-based)
=========================================== */
.provenance-skeleton {
height: var(--ds-space-8);
}
.provenance-event {
padding: var(--ds-space-2) 0;
border-bottom: 1px solid var(--ds-neutral-100);
}
.provenance-event:last-child {
border-bottom: 0;
}
.provenance-fields {
margin: 0;
padding-left: var(--ds-space-1);
}
/* FEAT-080 Run Explorer — truncate long target refs in the items table */
.wr-target-ref {
max-width: 14rem;
}
/* ===========================================
RECENT ITEMS
=========================================== */
.ds-recent-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ds-space-6);
}
.ds-recent-list {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
}
.ds-recent-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--ds-space-2) var(--ds-space-3);
border-radius: var(--ds-radius-md);
text-decoration: none;
color: var(--ds-neutral-900);
transition: background var(--ds-duration-fast) var(--ds-ease-default);
}
.ds-recent-item:hover {
background: var(--ds-neutral-100);
}
.ds-recent-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-recent-time {
font-size: var(--ds-text-xs);
color: var(--ds-neutral-400);
margin-left: var(--ds-space-2);
white-space: nowrap;
}
@media (max-width: 768px) {
.ds-recent-grid {
grid-template-columns: 1fr;
}
}
/* ===========================================
TABS
=========================================== */
.ds-tabs {
display: flex;
border-bottom: 1px solid var(--ds-neutral-200);
margin-bottom: var(--ds-space-4);
}
.ds-tab {
padding: var(--ds-space-3) var(--ds-space-4);
color: var(--ds-neutral-600);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
cursor: pointer;
background: none;
border-left: none;
border-right: none;
border-top: none;
}
.ds-tab:hover {
color: var(--ds-primary-600);
}
.ds-tab.active {
color: var(--ds-primary-600);
border-bottom-color: var(--ds-primary-600);
font-weight: var(--ds-font-semibold);
}
/* ===========================================
SORTABLE TABLE HEADERS
=========================================== */
.sortable-header {
cursor: pointer;
user-select: none;
font-weight: var(--ds-font-semibold);
font-size: var(--ds-text-xs);
text-transform: uppercase;
letter-spacing: var(--ds-tracking-wider);
color: var(--ds-neutral-600);
padding: var(--ds-space-3);
transition: color var(--ds-duration-fast) var(--ds-ease-default);
}
.sortable-header:hover {
color: var(--ds-primary-600);
}
/* ===========================================
COMPACT FORMS (Label-Left)
=========================================== */
.compact-form {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
}
/* R-014999 (2026-09-17) — 122px -> 150px. The longest German labels in daily use
("Investitionsvolumen", "Regionale Praeferenz") did not fit on one line at 122px, so
wrapping them was correct but still broke a single long word across two lines. 150px lets
those fit, which removes most wraps outright; the label rule below handles the rest with
real hyphenation. The 28px come out of the input column, which had room to spare. */
.compact-form .form-row {
display: grid;
grid-template-columns: 150px 1fr;
align-items: center;
gap: var(--ds-space-2);
}
/* R-014999 (2026-09-17) — labels WRAP, they are never truncated.
These labels carry user-defined custom-field names of arbitrary length, so no
fixed column width is ever wide enough; the previous nowrap + ellipsis cut them
off at 122px. That was not cosmetic: two different fields both rendered as
"Investitionsvolu..." and became indistinguishable, because what tells them
apart sits at the END of the name — exactly what the ellipsis ate. A tooltip is
no substitute (there is no hover on touch), and widening the column only moves
the guess. Wrapping costs height on the few long labels and nothing anywhere
else; align-items:center keeps a two-line label centred against its input.
overflow-wrap:anywhere covers a long name without spaces, which would otherwise
overflow the column instead of wrapping. */
.compact-form .form-row label {
font-size: var(--ds-type-small);
color: var(--ds-neutral-500);
text-align: right;
padding-right: var(--ds-space-1);
/* A word too long for the column is hyphenated at a syllable instead of chopped mid-word:
"Investitions-/volumen", not "Investitionsvolume/n". This only works because the page now
declares its real language (App.razor) — hyphenation rules are per language, and the old
hardcoded lang="en" would have applied English rules to German words. -webkit- covers
older Safari, which supported the property only prefixed. overflow-wrap stays as the last
resort for a string with no syllable break at all, e.g. a pasted identifier. */
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: anywhere;
line-height: 1.25;
}
.compact-form.readonly .form-row span {
font-weight: 500;
}
/* B-200 (2026-06-07) — Action-icon rows (Email/Phone fields in
ContactPersonal/CompanyCard) rendered taller than bare inputs AND
overflowed the right card border. Two underlying defects to fix:
1. HEIGHT BUG. PhoneInput renders inside
. The .input-group-sm rule
sets height: 28px on the inner input, BUT only height — not
min-height. The .form-control rule sets min-height: 36px which then
wins. Result: input snaps back to 36px in any .input-group-sm
context. Same trap for any compact-form-rendered input that isn't
explicitly tagged .form-control-sm.
2. WIDTH BUG. The wrapping
had
no shrink hint, so .form-control demanded 100% width while the
action-icon was added next to it — total exceeded the 1fr column
and clipped past the .card right edge.
Fix below: force every input/select/button/group inside .compact-form
to sm sizing (height + min-height + padding + font-size), AND make
the action-icon flex wrapper shrinkable so the icon always has room.
Scope is limited to .compact-form so other surfaces aren't affected. */
.compact-form .form-control,
.compact-form .form-select,
.compact-form .ds-input,
.compact-form .ds-select,
.compact-form .input-group > .form-control,
.compact-form .input-group > .form-select,
.compact-form .input-group > .btn {
height: var(--ds-control-h-sm);
min-height: var(--ds-control-h-sm);
padding: 0 var(--ds-control-px-sm);
font-size: var(--ds-control-fs-sm);
line-height: calc(var(--ds-control-h-sm) - 2px);
}
/* R-013745 — Multi-value BadgeSelect fields lost their badges behind the next rows.
BadgeSelectInput renders as
,
so inside .compact-form it inherited the fixed height above. Its own rule further down
asks for height: auto, but loses on specificity (0,2,0 beats 0,1,0). The badges wrap as
intended, the box cannot grow with them, and the surplus badges spill BELOW the control —
where the following form rows, being later in document order, paint straight over them.
With one badge nothing is visible; the defect only appears from the second row of badges,
which is why it surfaced on a contact carrying several projects.
Same carve-out as the textareas below: keep the sm height as a floor, let the control
grow. align-content keeps wrapped badge rows packed to the top instead of spread apart. */
.compact-form .badge-select-input {
height: auto;
min-height: var(--ds-control-h-sm);
padding: 2px var(--ds-control-px-sm);
line-height: 1.5;
align-content: flex-start;
}
/* Textareas inside compact-form: still allow multi-line growth, just
start at the sm baseline. */
.compact-form textarea.form-control,
.compact-form textarea.ds-input {
height: auto;
min-height: calc(var(--ds-control-h-sm) * 2);
padding: 6px var(--ds-control-px-sm);
line-height: 1.5;
}
/* Action-icon row containers (Email/Phone fields wrap input+icon in
). Allow shrinking so
input + icon fit within the form-row's 1fr column. The wrapper height
is NOT pinned — it auto-sizes to the (now 28px) flex children, so
icons and inputs sit on the same baseline naturally. */
.compact-form .form-row > .d-flex {
min-width: 0;
max-width: 100%;
}
.compact-form .form-row > .d-flex > .form-control,
.compact-form .form-row > .d-flex > .form-control-sm,
.compact-form .form-row > .d-flex > .flex-grow-1 {
flex: 1 1 0%;
min-width: 0;
}
.compact-form .form-row > .d-flex > a.ds-btn,
.compact-form .form-row > .d-flex > a.ds-btn-sm {
flex: 0 0 auto;
}
/* FEAT-064 v2: rogue 28px / 0.8rem override removed.
.form-control-sm / .form-select-sm are now canonical 28px globally
via the IDENTITY OVERRIDE LAYER at the end of this file. */
@media (max-width: 767.98px) {
.compact-form .form-row {
grid-template-columns: 1fr;
}
.compact-form .form-row label {
text-align: left;
margin-bottom: var(--ds-space-1);
}
}
/* ===========================================
CULTURE DATE INPUT
=========================================== */
.culture-date-input {
position: relative;
}
.culture-date-picker-overlay {
position: absolute;
top: 0;
right: 0;
width: 2rem;
height: 100%;
opacity: 0;
cursor: pointer;
border: none;
padding: 0;
}
.culture-date-picker-overlay::-webkit-calendar-picker-indicator {
width: 100%;
height: 100%;
cursor: pointer;
}
/* ===========================================
ADDITIONAL MARGIN UTILITIES
=========================================== */
.ds-mt-0 { margin-top: 0; }
.ds-mt-2 { margin-top: var(--ds-space-2); }
.ds-mt-4 { margin-top: var(--ds-space-4); }
.ds-mt-6 { margin-top: var(--ds-space-6); }
.ds-mb-0 { margin-bottom: 0; }
.ds-mb-1 { margin-bottom: var(--ds-space-1); }
.ds-mb-3 { margin-bottom: var(--ds-space-3); }
.ds-flex-1 { flex: 1; }
.ds-min-w-0 { min-width: 0; }
/* ===========================================
BOOTSTRAP OVERRIDES
Apply design system tokens to Bootstrap components
=========================================== */
/* Cards */
.card {
border: 1px solid var(--ds-neutral-200);
border-radius: var(--ds-radius-xl);
box-shadow: var(--ds-shadow-sm);
overflow: hidden;
}
/* Cards that contain dropdowns/autocompletes need visible overflow */
.card.card-overflow-visible {
overflow: visible;
}
/* Page size free text input */
.page-size-input {
width: 60px;
text-align: center;
padding: 2px 4px;
font-size: var(--ds-font-size-sm, 0.8125rem);
}
/* Merge result editable input */
.merge-result-input {
font-size: var(--ds-font-size-xs, 0.75rem) !important;
padding: 2px 6px !important;
height: auto !important;
min-height: 28px;
}
.card-header {
border-bottom: 1px solid var(--ds-neutral-100);
}
/* Buttons */
/* Form controls */
.form-check-input:checked {
background-color: var(--ds-primary-600);
border-color: var(--ds-primary-600);
}
/* Table */
.table-primary {
--bs-table-bg: var(--ds-primary-100);
}
.table > tbody > tr > td {
padding: var(--ds-space-3);
vertical-align: middle;
}
/* Compact table variant - reduced row height */
.table-compact > tbody > tr > td {
padding: var(--ds-space-2);
}
.table-compact > thead > tr > th {
padding: var(--ds-space-2);
}
/* R-015031 — proportional column layout for the contact list.
With `table-layout: auto` the browser sizes columns from cell content and hands all surplus to
the columns that declare no width: on cc-prod the table grew to 3086px, Company took 25% and
two near-empty columns took 27%, while Address stayed at its declared 240px and wrapped.
Fixed layout makes the declared share in ContactFieldCatalog the column's actual width and
keeps the table inside its container. Widths are declared per column in the catalog — never
here, and never in the markup. */
.ds-table-fixed {
table-layout: fixed;
width: 100%;
}
/* R-015046 — the floor under the columns, and the third piece every data grid has.
`.table-responsive` around this table already declares `overflow-x: auto`, but the table
declared `min-width: 0`, so it never scrolled: it squeezed columns to whatever was left, however
little that was. That is what the redistribution arithmetic in ContactFieldCatalog was built to
compensate for. With a floor the columns keep a readable width and the container scrolls
instead — the ordinary answer.
Only from the breakpoint where the wide columns appear. Below it most of them are hidden
(`d-none d-xl-table-cell` and friends), and a floor there would force scrolling on a phone that
fits its three columns today. */
@media (min-width: 992px) {
.ds-table-fixed {
min-width: 60rem;
}
}
/* -------------------------------------------------------------------------
R-015046 — the cell contract: one line, ellipsis, full value in the title
-------------------------------------------------------------------------
Eight passes of R-015031 fixed this column by column and each one moved the problem somewhere
else, because the list had no rule for what a cell looks like. It had four different truncation
mechanisms and four cell types with none at all (company read-only rendered a bare text node
straight into the td, phone, the e-mail wrapper, read-only custom fields). Measured on cc-prod:
row heights of 49, 63 and 84px in one screen, and a website value painting 60px into the address
column beside it.
One rule for every cell, the way any ordinary data grid does it. Wrapping was what let a cell
grow a row taller than its neighbours, so wrapping goes: content that does not fit ends in an
ellipsis and keeps its full text in the title attribute and on the detail page.
Nothing here touches the td itself. The composite inline-edit popover (R-015032) lives inside
that cell and `overflow: hidden` there would clip it — which is why every rule below aims at the
element inside the cell instead. */
.ds-table-fixed > thead > tr > th,
.ds-table-fixed > tbody > tr > td {
white-space: nowrap;
}
/* The truncating box. `min-width: 0` is the part that does the work: a flex item otherwise floors
at its own content width and never ellipsises, and a non-replaced inline box ignores overflow
and text-overflow entirely — the two facts that made the previous two passes inert. */
.ds-table-fixed td .text-truncate,
.ds-table-fixed td .ds-cell-wrap,
.ds-table-fixed td .inline-cell__value,
.ds-table-fixed td .inline-cell--readonly {
display: block;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Cells whose content is a flex row of icon plus value (phone, e-mail, the name column). The row
may shrink; the icon keeps its size and the value gives way. */
.ds-table-fixed td .d-flex,
.ds-table-fixed td .d-inline-flex {
min-width: 0;
max-width: 100%;
overflow: hidden;
}
/* Outside the list .ds-cell-wrap keeps its original meaning — a value that wraps instead of being
cut. Only inside a fixed-layout row does it become one line (rule above). */
.ds-cell-wrap {
white-space: normal;
overflow-wrap: break-word;
max-width: 100%;
}
/* Clickable table row */
.clickable-row {
cursor: pointer;
}
/* Table row hover state */
.contact-row {
transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
}
.contact-row:hover {
background-color: var(--ds-neutral-50);
}
/* Pagination */
.page-item.active .page-link {
background-color: var(--ds-primary-600);
border-color: var(--ds-primary-600);
}
.page-link {
color: var(--ds-primary-600);
border-radius: var(--ds-radius-md);
}
.page-link:hover {
color: var(--ds-primary-600);
background-color: var(--ds-neutral-100);
}
/* Nav Tabs */
.nav-tabs .nav-link {
color: var(--ds-neutral-600);
border: none;
border-bottom: 2px solid transparent;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
}
.nav-tabs .nav-link:hover {
color: var(--ds-primary-600);
border-color: transparent;
}
.nav-tabs .nav-link.active {
color: var(--ds-primary-600);
border-color: var(--ds-primary-600);
font-weight: var(--ds-font-semibold);
}
/* Visibility Badge */
.visibility-badge {
font-size: var(--ds-text-xs);
padding: var(--ds-space-1) var(--ds-space-2);
border-radius: var(--ds-radius-full);
}
/* Icon-only variant (R-014995) — the state text moved to aria-label/title, so the badge is a
square puck around its icon instead of a pill around a word. */
.visibility-badge--icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--ds-space-1);
line-height: var(--ds-leading-none);
}
.visibility-badge--icon .bi {
font-size: var(--ds-text-sm);
line-height: 1;
}
/* Disabled fieldset styling (read-only forms) */
fieldset[disabled] .form-control,
fieldset[disabled] .form-select {
background-color: transparent;
border-color: transparent;
padding-left: 0;
cursor: default;
}
fieldset[disabled] .form-control:focus,
fieldset[disabled] .form-select:focus {
box-shadow: none;
}
/* Top bar elements */
.profile-link:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
border-radius: var(--ds-radius-md);
}
.logout-btn {
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
background-color: transparent;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
}
.logout-btn:hover {
background-color: var(--ds-primary-700);
border-color: var(--ds-primary-700);
color: white;
}
/* Table row hover states */
.account-row,
.user-row,
.group-row,
.audit-row {
transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
}
.account-row:hover,
.user-row:hover,
.group-row:hover,
.audit-row:hover {
background-color: rgba(64, 31, 113, 0.03);
}
/* Table header styling */
.table > thead > tr > th {
font-weight: var(--ds-font-semibold);
font-size: var(--ds-type-small);
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--ds-neutral-800);
padding: 0.875rem 0.75rem;
}
/* Role badges */
.badge.role-admin {
background-color: var(--ds-primary-600);
}
.badge.role-manager {
background-color: var(--ds-primary-300);
color: var(--ds-neutral-800);
}
.badge.role-user {
background-color: var(--ds-neutral-100);
color: var(--ds-neutral-800);
}
/* Audit event badges */
.badge.event-auth-success { background-color: #107c10; }
.badge.event-auth-fail { background-color: #923d3a; }
.badge.event-auth-logout { background-color: #6c757d; }
.badge.event-create { background-color: #be7b72; }
.badge.event-update { background-color: #f7630c; }
.badge.event-delete { background-color: #923d3a; }
.badge.event-import { background-color: #5c2d91; }
.badge.event-export { background-color: #00b294; }
.badge.event-exchange { background-color: #00a4ef; }
/* Upload zones */
.upload-zone {
transition: all var(--ds-duration-fast) var(--ds-ease-default);
}
.upload-zone:hover {
background-color: rgba(64, 31, 113, 0.03);
}
/* Selectable cards (import wizard) */
.selectable-card {
transition: all var(--ds-duration-fast) var(--ds-ease-default);
border: 2px solid transparent;
}
.selectable-card:hover {
border-color: var(--ds-primary-600);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.selectable-card.selected {
border-color: var(--ds-primary-600) !important;
background-color: rgba(64, 31, 113, 0.03);
}
/* Pagination disabled state */
.page-item.disabled .page-link {
color: #6c757d;
background-color: var(--ds-neutral-100);
}
.page-link:focus {
box-shadow: 0 0 0 0.2rem rgba(64, 31, 113, 0.25);
}
/* Login card */
.login-card {
background: white;
border-radius: var(--ds-radius-xl);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
padding: 2.5rem;
max-width: min(400px, calc(100vw - 2rem));
width: 100%;
}
/* Input group seams: drop the shared border ONLY at the seam between
adjacent elements (so the two pieces look like one continuous control).
Earlier these rules dropped the borders unconditionally, which left
PhoneInput's bare with no left border at
all because PhoneInput wraps the input in .input-group.input-group-sm
for sm-sizing — but doesn't actually put anything on the input's left
side. Fix: only drop the seam-side border when the element is NOT at
that edge (the :not(:first-child) / :not(:last-child) guards). */
.input-group > .input-group-text:not(:last-child) {
border-right: none;
}
.input-group > .form-control:not(:first-child) {
border-left: none;
}
.input-group:focus-within .input-group-text {
border-color: var(--ds-primary-600);
}
.input-group:focus-within .form-control {
border-color: var(--ds-primary-600);
box-shadow: none;
}
/* ===========================================
STANDARDIZED CLASSES (Unprefixed Aliases)
These provide consistent naming across the app
=========================================== */
/* Page Header — Variant D "Whisper Eyebrow" (2026-06-07, replaces violet gradient)
Cool-slate identity per FEAT-064. White surface + 2px brand-underline on the
title + tonal-pill avatar. Brand whispers, content leads. Optional eyebrow
span (.page-header-eyebrow) renders mono-caps above the title when present. */
.page-header {
background: var(--ds-neutral-0);
color: var(--ds-neutral-900);
margin: -1.25rem -1.25rem 1rem -1.25rem;
padding: 0.85rem 1.25rem 0.7rem;
border-radius: 0;
border-bottom: 1px solid var(--ds-neutral-200);
}
.page-header .page-title,
.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4 {
color: var(--ds-neutral-900);
margin-bottom: 0;
font-weight: 600;
display: inline-block;
border-bottom: 2px solid var(--ds-primary-500);
padding-bottom: 0.15rem;
margin-top: 0.15rem;
}
.page-header .page-subtitle {
color: var(--ds-neutral-500);
font-size: var(--ds-type-small);
margin-top: 0.35rem;
display: block;
}
.page-header .avatar {
background: var(--ds-primary-50);
color: var(--ds-primary-700);
width: 40px;
height: 40px;
font-size: var(--ds-type-small);
}
.page-header .text-muted {
color: var(--ds-neutral-500) !important;
}
/* Optional eyebrow above the title — pages opt in by inserting
… before the h4 in their header. */
.page-header-eyebrow {
display: block;
font-family: var(--ds-font-mono);
font-size: var(--ds-type-meta);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-primary-700);
margin-bottom: 0.15rem;
}
@media (max-width: 767.98px) {
.page-header {
margin: -1rem -1rem 0.75rem -1rem;
padding: 0.65rem 1rem 0.55rem;
}
}
/* Avatar - Standard Sizes */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ds-radius-full);
font-weight: 600;
color: white;
background: linear-gradient(135deg, var(--ds-primary-500) 0%, var(--ds-primary-700) 100%);
flex-shrink: 0;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-xs { width: 24px; height: 24px; font-size: var(--ds-type-meta); }
.avatar-sm { width: 32px; height: 32px; font-size: var(--ds-type-meta); }
.avatar-md { width: 40px; height: 40px; font-size: var(--ds-type-small); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--ds-type-body); }
.avatar-xl { width: 64px; height: 64px; font-size: var(--ds-type-h3); }
.avatar-2xl { width: 80px; height: 80px; font-size: var(--ds-type-h2); }
/* Data Tables */
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.data-table th,
.data-table td {
padding: 0.875rem 0.75rem;
vertical-align: middle;
}
.table-header,
.data-table thead tr {
background-color: var(--ds-neutral-100);
}
.table-header th,
.data-table thead th {
font-weight: 600;
font-size: var(--ds-type-small);
text-transform: uppercase;
letter-spacing: 0.025em;
color: var(--ds-neutral-600);
border-bottom: 1px solid var(--ds-neutral-200);
}
.data-row {
transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
}
.data-row:hover {
background-color: rgba(64, 31, 113, 0.03);
}
.col-checkbox {
width: 40px;
padding-left: 1rem !important;
}
.col-actions {
width: 120px;
text-align: center;
}
/* Modal Overlay */
.modal-overlay {
background-color: rgba(0, 0, 0, 0.5);
}
/* Search Input Group */
.search-input-group {
position: relative;
display: flex;
align-items: center;
}
.search-input-group .search-icon {
position: absolute;
left: 0.75rem;
color: var(--ds-neutral-400);
pointer-events: none;
z-index: 1;
}
.search-input-group .form-control {
padding-left: 2.5rem;
}
/* Spinner Variants */
.spinner-primary {
width: 2rem;
height: 2rem;
border: 3px solid var(--ds-neutral-200);
border-top-color: var(--ds-primary-600);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.spinner-primary-sm {
width: 1rem;
height: 1rem;
border-width: 2px;
}
.spinner-primary-lg {
width: 3rem;
height: 3rem;
border-width: 4px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Icon Utilities */
.icon-primary { color: var(--ds-primary-600); }
.icon-secondary { color: var(--ds-primary-600); }
.icon-success { color: #107c10; }
.icon-warning { color: #f7630c; }
.icon-danger { color: #923d3a; }
.icon-muted { color: var(--ds-neutral-400); }
.icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--ds-radius-lg);
}
.icon-box-primary {
background: linear-gradient(135deg, var(--ds-primary-100) 0%, var(--ds-primary-200) 100%);
color: var(--ds-primary-600);
}
.icon-box-secondary {
background: linear-gradient(135deg, var(--ds-primary-100) 0%, var(--ds-primary-200) 100%);
color: var(--ds-warning);
}
.icon-box-success {
background: var(--ds-success-light);
color: #107c10;
}
.icon-box-neutral {
background: var(--ds-neutral-100);
color: var(--ds-neutral-600);
}
/* Wizard Components */
.wizard-container {
max-width: 800px;
margin: 0 auto;
}
.wizard-header {
text-align: center;
margin-bottom: 2rem;
}
.wizard-progress {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-bottom: 2rem;
padding: 0 1rem;
}
.wizard-progress-line {
position: absolute;
top: 20px;
left: 40px;
right: 40px;
height: 2px;
background-color: var(--ds-neutral-200);
z-index: 0;
}
.wizard-progress-line-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: var(--ds-primary-600);
transition: width var(--ds-duration-normal) var(--ds-ease-default);
}
.wizard-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
.wizard-step-circle {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
background-color: var(--ds-neutral-100);
color: var(--ds-neutral-400);
border: 2px solid var(--ds-neutral-200);
transition: all var(--ds-duration-fast) var(--ds-ease-default);
}
.wizard-step-label {
margin-top: 0.5rem;
font-size: var(--ds-type-meta);
color: var(--ds-neutral-500);
text-align: center;
max-width: 80px;
}
.wizard-step-active .wizard-step-circle {
background-color: var(--ds-primary-600);
border-color: var(--ds-primary-600);
color: white;
}
.wizard-step-active .wizard-step-label {
color: var(--ds-primary-600);
font-weight: 600;
}
.wizard-step-completed .wizard-step-circle {
background-color: #107c10;
border-color: #107c10;
color: white;
}
.wizard-step-completed .wizard-step-label {
color: #107c10;
}
/* Upload Zone */
.upload-zone {
border: 2px dashed var(--ds-neutral-300);
border-radius: var(--ds-radius-xl);
padding: 2rem;
text-align: center;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
cursor: pointer;
background-color: var(--ds-neutral-50);
}
.upload-zone:hover {
border-color: var(--ds-primary-600);
background-color: rgba(64, 31, 113, 0.03);
}
.upload-zone-active,
.upload-zone.active {
border-color: var(--ds-primary-600);
border-style: solid;
background-color: rgba(64, 31, 113, 0.05);
}
.upload-zone-success {
border-color: #107c10;
background-color: rgba(16, 124, 16, 0.05);
}
.upload-zone-icon {
font-size: 3rem;
color: var(--ds-neutral-400);
margin-bottom: 1rem;
}
.upload-zone:hover .upload-zone-icon {
color: var(--ds-primary-600);
}
/* Stat Cards */
.stat-card {
text-decoration: none;
border-left: 4px solid var(--ds-primary-600);
transition: transform var(--ds-duration-fast) var(--ds-ease-default),
box-shadow var(--ds-duration-fast) var(--ds-ease-default);
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--ds-shadow-lg);
}
.stat-icon {
width: 64px;
height: 64px;
border-radius: var(--ds-radius-xl);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-h1);
flex-shrink: 0;
}
.stat-icon-primary {
background: linear-gradient(135deg, var(--ds-primary-100) 0%, var(--ds-primary-200) 100%);
color: var(--ds-primary-600);
}
.stat-icon-secondary {
background: linear-gradient(135deg, var(--ds-primary-100) 0%, var(--ds-primary-200) 100%);
color: var(--ds-warning);
}
.stat-icon-success {
background: rgba(16, 124, 16, 0.1);
color: #107c10;
}
.stat-icon-neutral {
background: var(--ds-neutral-100);
color: var(--ds-neutral-600);
}
.stat-card-success { border-left-color: #107c10; }
.stat-card-warning { border-left-color: #f7630c; }
.stat-card-danger { border-left-color: #923d3a; }
.stat-card-info { border-left-color: #be7b72; }
/* Config Card (Import Wizard) */
.config-card {
background-color: var(--ds-neutral-100);
border: none;
border-radius: var(--ds-radius-xl);
}
.config-card .card-body {
padding: 1.5rem;
}
/* Metric Card */
.metric-card {
text-align: center;
padding: 1rem;
}
.metric-card .metric-value {
font-size: var(--ds-type-h1);
font-weight: 700;
color: var(--ds-neutral-800);
}
.metric-card .metric-label {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-500);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Settings Panel */
.settings-panel {
margin-bottom: 1.5rem;
}
.settings-panel .card-header {
background: transparent;
border-bottom: 1px solid var(--ds-neutral-100);
padding: 1rem 1.5rem;
}
.settings-panel .card-body {
padding: 1.5rem;
}
/* Settings Two-Column Layout */
.settings-layout {
display: flex;
gap: 1.5rem;
min-height: 500px;
}
.settings-sidebar {
width: 220px;
flex-shrink: 0;
}
.settings-content {
flex: 1;
min-width: 0;
}
/* Settings Sidebar Nav */
.settings-nav-section {
margin-bottom: 1rem;
}
.settings-nav-section-title {
display: block;
font-size: var(--ds-type-meta);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ds-neutral-400);
padding: 0.25rem 0.75rem;
margin-bottom: 0.25rem;
}
.settings-nav-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: var(--ds-radius-sm);
color: var(--ds-neutral-600);
text-decoration: none;
font-size: var(--ds-type-small);
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
}
.settings-nav-link:hover {
background-color: var(--ds-neutral-50);
color: var(--ds-neutral-800);
text-decoration: none;
}
.settings-nav-link.active {
background-color: var(--ds-primary-50);
color: var(--ds-primary);
font-weight: 500;
}
.settings-nav-link i {
font-size: var(--ds-type-body);
width: 1.25rem;
text-align: center;
}
/* Connection Status Dot */
.settings-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: auto;
flex-shrink: 0;
}
/* Responsive: collapse sidebar on small screens */
@media (max-width: 768px) {
.settings-layout {
flex-direction: column;
}
.settings-sidebar {
width: 100%;
display: flex;
overflow-x: auto;
gap: 0.25rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--ds-neutral-100);
margin-bottom: 1rem;
}
.settings-nav-section {
display: flex;
gap: 0.25rem;
margin-bottom: 0;
}
.settings-nav-section-title {
display: none;
}
.settings-nav-link {
white-space: nowrap;
padding: 0.375rem 0.75rem;
font-size: var(--ds-type-small);
}
}
/* Empty State */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
text-align: center;
}
.empty-state-icon {
font-size: 3rem;
color: var(--ds-neutral-300);
margin-bottom: 1rem;
}
.empty-state-title {
font-size: var(--ds-type-h3);
font-weight: 600;
color: var(--ds-neutral-600);
margin-bottom: 0.5rem;
}
.empty-state-message {
color: var(--ds-neutral-500);
margin-bottom: 1.5rem;
max-width: 300px;
}
/* Activity List (unprefixed) */
.activity-list {
display: flex;
flex-direction: column;
}
.activity-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--ds-neutral-100);
transition: background var(--ds-duration-fast) var(--ds-ease-default);
}
.activity-item:hover {
background: var(--ds-neutral-50);
}
.activity-item:last-child {
border-bottom: none;
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: var(--ds-radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.activity-icon.created { background: var(--ds-success-light); color: #107c10; }
.activity-icon.updated { background: var(--ds-primary-50); color: #be7b72; }
.activity-icon.deleted { background: var(--ds-danger-light); color: #923d3a; }
.activity-icon.login { background: var(--ds-primary-100); color: var(--ds-primary-600); }
.activity-icon.other { background: var(--ds-neutral-100); color: var(--ds-neutral-600); }
.activity-content {
flex: 1;
min-width: 0;
}
.activity-title {
font-weight: 500;
color: var(--ds-neutral-800);
}
.activity-time {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-400);
white-space: nowrap;
}
.activity-user {
font-size: var(--ds-type-small);
color: var(--ds-neutral-500);
margin-top: 0.25rem;
}
/* B-226: the Recently Added widget stacks its two groups (Contacts / Companies)
as plain blocks (`.recent-grid` had no grid rule). Give the second group a
clear divider + spacing so the "Companies" header doesn't read as glued onto
the last contact — a user mistook the cramped layout for a display bug. */
.recent-grid > div + div {
margin-top: var(--ds-space-5);
padding-top: var(--ds-space-4);
border-top: 1px solid var(--ds-neutral-200);
}
/* Recent List (unprefixed) */
.recent-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.recent-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.75rem;
border-radius: var(--ds-radius-md);
text-decoration: none;
color: var(--ds-neutral-800);
transition: background var(--ds-duration-fast) var(--ds-ease-default);
}
.recent-item:hover {
background: var(--ds-neutral-100);
}
.recent-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recent-time {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-400);
margin-left: 0.5rem;
}
/* Bento Grid (unprefixed) */
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.bento-grid-2-1 {
grid-template-columns: 2fr 1fr;
}
.bento-grid-1-2 {
grid-template-columns: 1fr 2fr;
}
@media (max-width: 768px) {
.bento-grid-2-1,
.bento-grid-1-2 {
grid-template-columns: 1fr;
}
}
/* Chart Container */
.chart-container {
max-height: 250px;
position: relative;
}
/* Form Row (unprefixed) */
.form-row {
display: grid;
grid-template-columns: 120px 1fr;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.form-row label {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-500);
text-align: right;
padding-right: 0.5rem;
}
@media (max-width: 767.98px) {
.form-row {
grid-template-columns: 1fr;
}
.form-row label {
text-align: left;
margin-bottom: 0.25rem;
}
}
/* Tabs (unprefixed) */
.tabs {
display: flex;
border-bottom: 1px solid var(--ds-neutral-200);
margin-bottom: 1.5rem;
}
.tab {
padding: 0.75rem 1rem;
color: var(--ds-neutral-600);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
cursor: pointer;
background: none;
border-left: none;
border-right: none;
border-top: none;
}
.tab:hover {
color: var(--ds-primary-600);
}
.tab.active {
color: var(--ds-primary-600);
border-bottom-color: var(--ds-primary-600);
font-weight: 600;
}
/* Success Icon (completion states) */
.success-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #107c10;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
}
/* Not Found Page */
.not-found-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: 2rem;
}
.not-found-title {
font-size: 6rem;
font-weight: 700;
color: var(--ds-primary-600);
line-height: 1;
margin-bottom: 1rem;
}
.not-found-message {
font-size: var(--ds-type-h3);
color: var(--ds-neutral-600);
margin-bottom: 2rem;
}
/* Error Page */
.error-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: 2rem;
}
/* Selectable Card (import wizard) */
.selectable-card {
cursor: pointer;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
border: 2px solid transparent;
}
.selectable-card:hover {
border-color: var(--ds-primary-600);
transform: translateY(-2px);
box-shadow: var(--ds-shadow-lg);
}
.selectable-card.selected {
border-color: var(--ds-primary-600);
background-color: rgba(64, 31, 113, 0.03);
}
/* Preview Table */
.preview-table {
max-height: 350px;
overflow-y: auto;
}
.preview-table .table {
margin-bottom: 0;
}
.preview-table thead {
position: sticky;
top: 0;
z-index: 1;
}
/* Color Picker Option */
.color-picker-option {
width: 24px;
height: 24px;
border-radius: var(--ds-radius-full);
cursor: pointer;
border: 2px solid transparent;
transition: transform var(--ds-duration-fast) var(--ds-ease-default);
}
.color-picker-option:hover {
transform: scale(1.1);
}
.color-picker-option.selected {
border-color: var(--ds-neutral-800);
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--ds-neutral-800);
}
/* ===========================================
GLOBAL STYLES (merged from app.css)
=========================================== */
html {
/* FEAT-065: CRM-Compact-Dense baseline — 14px root means 1rem = 14px globally,
cascading through every rem-based spacing / typography / radius token.
The entire UI tightens ~12.5% relative to a 16px root. */
font-size: var(--ds-type-body);
}
html, body {
/* Was hardcoded to Roboto from the legacy app.css merge — overrode the
design-token stack on every page. Now respects --ds-font-sans (Inter
Variable).
Firefox-on-Windows tuning (2026-06-16, second pass after 4-person
eyeball test reported Inter still rendering too thin compared to
Chrome/Edge):
* font-weight: 450 baseline. Inter at 400 reads visibly lighter on
Firefox/Windows DirectWrite than the same 400 on Chrome/Edge
ClearType — well-documented Inter quirk. Variable axis lets us
pick a non-integer weight without loading an extra static cut.
450 is the established "feels-like-Chrome-400" sweet spot.
* font-optical-sizing: auto. Inter v4 ships the opsz axis — at
small sizes (12-14px UI) the font auto-thickens stems and
widens letter-spacing for readability. Off by default in some
browsers.
* NO text-rendering: optimizeLegibility. That setting forces
Firefox to drop subpixel ClearType in favour of grayscale AA,
which makes Inter render thinner still on Windows. Default
(auto) keeps ClearType active where it helps and switches off
where it hurts. We pay the cost of slightly less aggressive
kerning at small sizes; the weight bump compensates.
* font-synthesis-weight: none stays — prevents GDI from
fake-bolding intermediate axis weights.
* font-feature-settings stays — the Inter humanist alternates
keep "1", "a", "g" readable. */
font-family: var(--ds-font-sans);
font-weight: 450;
font-feature-settings: var(--ds-font-feature-sans);
font-optical-sizing: auto;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a, .btn-link {
color: var(--ds-primary-600);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--ds-primary-600);
}
.table-dark {
background-color: var(--ds-primary-600);
}
.content {
padding-top: 1.1rem;
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
/* Login page */
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, var(--ds-primary-600) 0%, var(--ds-neutral-800) 100%);
}
.login-card {
background: white;
padding: 2.5rem;
border-radius: var(--ds-radius-xl);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: min(400px, calc(100vw - 2rem));
}
.login-header {
text-align: center;
margin-bottom: 2rem;
}
.login-header h2 {
color: var(--ds-primary-600);
margin-bottom: 0.5rem;
}
.login-header p {
color: var(--ds-neutral-600);
}
.empty-layout {
min-height: 100vh;
}
/* ===========================================
SIDEBAR NAVIGATION
=========================================== */
.sidebar {
background: var(--ds-dark-bg);
background-image: linear-gradient(135deg, rgba(190, 123, 114, 0.1) 0%, transparent 50%);
border-right: 1px solid var(--ds-dark-border);
display: flex;
flex-direction: column;
padding: 1rem;
height: 100vh;
position: sticky;
top: 0;
overflow-y: auto;
flex-shrink: 0;
}
.sidebar-header {
padding-bottom: 1rem;
}
.brand {
display: flex;
align-items: center;
gap: 0.75rem;
}
.brand-icon {
display: flex;
align-items: center;
justify-content: center;
}
.brand-text {
font-size: var(--ds-type-h3);
font-weight: 600;
color: white;
}
.tagline {
color: var(--ds-primary-300);
font-size: var(--ds-type-small);
margin-top: 0.25rem;
margin-left: 3.25rem;
}
.brand-divider {
height: 2px;
background: linear-gradient(to right, var(--ds-primary-600), transparent);
margin-top: 1rem;
width: 60px;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
}
.nav-section {
margin-bottom: 1rem;
}
.nav-section-title {
color: var(--ds-neutral-400);
font-size: var(--ds-type-meta);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.5rem 0;
margin-bottom: 0.25rem;
}
.sidebar-nav .nav-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
color: var(--ds-neutral-300);
text-decoration: none;
border-radius: var(--ds-radius-lg);
margin-bottom: 0.25rem;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
}
.sidebar-nav .nav-link:hover {
background-color: var(--ds-dark-elevated);
color: white;
}
.sidebar-nav .nav-link.active {
background: linear-gradient(135deg, var(--ds-primary-600) 0%, var(--ds-primary-700) 100%);
color: white;
box-shadow: 0 2px 8px rgba(190, 123, 114, 0.3);
}
.sidebar-nav .nav-link .bi {
font-size: var(--ds-type-h3);
width: 1.25rem;
text-align: center;
}
.nav-text {
font-size: var(--ds-type-small);
}
/* Sidebar Footer */
.sidebar-footer {
padding-top: 1rem;
border-top: 1px solid var(--ds-dark-border);
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.sidebar-user {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
border-radius: var(--ds-radius-lg);
transition: background var(--ds-duration-fast) var(--ds-ease-default);
flex: 1;
min-width: 0;
color: inherit;
}
.sidebar-user:hover {
background: var(--ds-dark-elevated);
}
.sidebar-logout-btn {
width: 36px;
height: 36px;
border-radius: var(--ds-radius-lg);
border: none;
background: transparent;
color: var(--ds-neutral-400);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
flex-shrink: 0;
}
.sidebar-logout-btn:hover {
background: rgba(239, 68, 68, 0.15);
color: #923d3a;
}
.sidebar-logout-btn i {
font-size: var(--ds-type-h3);
}
.sidebar-user-avatar {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-primary-700));
border-radius: var(--ds-radius-full);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: var(--ds-type-small);
flex-shrink: 0;
}
.sidebar-user-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.sidebar-user-name {
color: white;
font-size: var(--ds-type-small);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user-role {
color: var(--ds-neutral-400);
font-size: var(--ds-type-meta);
}
/* -------------------------------------------------------------------------
R-015031 / R-015046 — the editable cell inside a fixed-layout row
-------------------------------------------------------------------------
The truncation itself is declared once, in the cell contract near the top of this file. What
remains here is the geometry specific to an inline-editable cell: a flex row of value plus
pencil, where the value gives way and the pencil keeps its size.
------------------------------------------------------------------------- */
.ds-table-fixed td .inline-cell {
display: flex;
align-items: center;
max-width: 100%;
min-width: 0;
}
.ds-table-fixed td .inline-cell__value {
flex: 1 1 auto;
}
/* The pencil appears when the pointer is over the row, and its space is reserved either way, so
nothing shifts as it fades in. It used to sit at 0.45 opacity in every editable cell of every
row at once, which made a list of data read like a list of form fields. Keyboard users still
reach it: focus-visible below brings it back regardless of the pointer. */
.ds-table-fixed td .inline-cell__edit-btn {
flex: 0 0 auto;
opacity: 0;
}
.ds-table-fixed tbody tr:hover .inline-cell__edit-btn,
.ds-table-fixed td .inline-cell__edit-btn:focus-visible {
opacity: 0.55;
}
.ds-table-fixed tbody tr:hover .inline-cell--editable:hover .inline-cell__edit-btn {
opacity: 1;
}
/* The empty state renders no value element — the cell is one button. The dash is what the reader
sees; the button is the affordance that arrives with the pointer. Its label carried the whole
sentence "click to add", 131px of text in a 128px column, so the label is hidden here while
title and aria-label keep it for the tooltip and for screen readers. */
.ds-table-fixed td .inline-cell--empty .inline-cell__edit-btn {
flex: 0 0 auto;
}
.ds-table-fixed td .inline-cell__edit-btn--empty .inline-cell__edit-label {
display: none;
}
.ds-table-fixed td .inline-cell__empty-dash {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
color: var(--ds-neutral-400);
}
/* -------------------------------------------------------------------------
R-015040 — collapsed navigation rail
-------------------------------------------------------------------------
The rail has never declared a width: it is a flex item sized by its own
content, measured at 255px on cc-prod. Collapsing therefore needs an explicit
width in BOTH states, not a token swap — `--ds-sidebar-width` and
`--ds-sidebar-collapsed` are used only by `.ds-sidebar`, the redesign
component that nothing renders.
Everything that carries a word is hidden; the icons stay and centre
themselves. The brand mark survives because an empty rail head reads as a
rendering fault rather than as a choice.
------------------------------------------------------------------------- */
.page .sidebar {
width: var(--ds-sidebar-width);
transition: width var(--ds-duration-normal) var(--ds-ease-default);
}
.page .sidebar.sidebar--collapsed {
width: var(--ds-sidebar-collapsed);
padding-left: 0.5rem;
padding-right: 0.5rem;
/* Measured at 72px: the 40px brand mark plus 2x7px padding overflowed by 3px and the rail grew
its own horizontal scrollbar. Nothing inside may be wider than the rail. */
overflow-x: hidden;
}
.sidebar--collapsed .brand-icon,
.sidebar--collapsed .brand-icon svg {
width: 32px;
height: 32px;
}
.sidebar--collapsed .brand-text,
.sidebar--collapsed .tagline,
.sidebar--collapsed .brand-divider,
.sidebar--collapsed .nav-section-title,
.sidebar--collapsed .nav-text,
.sidebar--collapsed .sidebar-user-info {
display: none;
}
.sidebar--collapsed .sidebar-nav .nav-link,
.sidebar--collapsed .brand,
.sidebar--collapsed .sidebar-user {
justify-content: center;
gap: 0;
}
/* The footer stacks so avatar and logout both stay reachable at 72px. */
.sidebar--collapsed .sidebar-footer {
flex-direction: column;
gap: 0.25rem;
}
/* Collapse toggle — sits in the rail head, beside the brand when expanded. */
.sidebar-collapse-btn {
width: 32px;
height: 32px;
flex-shrink: 0;
border: none;
background: transparent;
color: var(--ds-neutral-400);
border-radius: var(--ds-radius-lg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--ds-duration-fast) var(--ds-ease-default);
}
.sidebar-collapse-btn:hover {
background: var(--ds-dark-elevated);
color: white;
}
.sidebar-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
/* R-015047 — collapsed, the head stacks instead of competing for one line.
Measured: the rail leaves 56px of content (72px minus 2 x 0.5rem). In one row stood the brand
mark (32px), the gap (8px) and the toggle (32px, flex-shrink: 0) — 72px of want against 56px of
room. Only the brand could yield, so it was squashed and then clipped by the rail's
`overflow-x: hidden`, which is the cut-off logo that was reported. Stacked, both keep their size
and the mark stays visible in the collapsed rail. The expanded head is untouched. */
.sidebar--collapsed .sidebar-header-row {
flex-direction: column;
justify-content: center;
gap: var(--ds-space-2);
}
/* Top Row - Removed, user info moved to sidebar footer */
/* ===========================================
RESPONSIVE UTILITIES
=========================================== */
/* Mobile visibility */
@media (max-width: 767.98px) {
.d-mobile-none {
display: none !important;
}
}
@media (min-width: 768px) {
.d-mobile-only {
display: none !important;
}
}
/* Touch-friendly buttons */
@media (max-width: 767.98px) {
.btn-touch {
min-height: 44px;
min-width: 44px;
}
.btn-group-touch > .btn {
min-width: 44px;
min-height: 44px;
padding: 0.5rem;
}
}
/* Responsive table */
@media (max-width: 767.98px) {
.table th.d-none-mobile,
.table td.d-none-mobile {
display: none !important;
}
.table-mobile-compact td,
.table-mobile-compact th {
padding: 0.5rem 0.25rem !important;
}
.table .btn-sm {
padding: 0.375rem 0.5rem;
}
}
/* Responsive cards */
@media (max-width: 767.98px) {
.card-body {
padding: 1rem;
}
.card-header {
padding: 0.75rem 1rem;
}
}
/* Page content padding */
@media (max-width: 767.98px) {
.mx-n4 {
margin-left: -1rem !important;
margin-right: -1rem !important;
}
.px-4 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
/* Responsive pagination */
@media (max-width: 575.98px) {
.pagination .page-item.d-none-xs {
display: none !important;
}
.pagination .page-link {
min-width: 40px;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
}
/* Responsive modal */
@media (max-width: 575.98px) {
.modal-dialog {
margin: 0.5rem;
max-width: calc(100% - 1rem);
}
}
/* Top row mobile */
@media (max-width: 767.98px) {
.top-row {
min-height: 56px;
}
.top-row .profile-link span:not(.rounded-circle):not([class*="bi-"]) {
display: none;
}
}
/* ===========================================
FEAT-020: Responsive Utility Classes
=========================================== */
/* Clickable row */
.ds-clickable { cursor: pointer; }
/* Truncation utilities */
.ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-truncate-sm { max-width: 120px; }
.ds-truncate-md { max-width: 200px; }
.ds-truncate-lg { max-width: 400px; }
@media (max-width: 767.98px) {
.ds-truncate-sm { max-width: 80px; }
.ds-truncate-md { max-width: 140px; }
.ds-truncate-lg { max-width: 200px; }
}
/* Table column width utilities */
.ds-col-xs { width: 60px; }
.ds-col-sm { width: 80px; }
.ds-col-100 { width: 100px; }
.ds-col-md { width: 120px; }
.ds-col-lg { width: 180px; }
/* Filter input sizing */
.ds-filter-primary { flex: 2; min-width: 0; }
.ds-filter-secondary { flex: 1; min-width: 0; }
@media (max-width: 767.98px) {
.ds-filter-primary,
.ds-filter-secondary { flex-basis: 100%; }
}
/* Filter bar container */
.ds-filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-3);
align-items: center;
}
@media (max-width: 767.98px) {
.ds-filter-bar {
flex-direction: column;
}
.ds-filter-bar > * {
width: 100%;
}
}
/* Scroll containers */
.ds-scroll-xs { max-height: 100px; overflow-y: auto; }
.ds-scroll-sm { max-height: 200px; overflow-y: auto; }
.ds-scroll-md { max-height: 350px; overflow-y: auto; }
/* Avatar sizing override for responsive */
.ds-avatar-responsive {
width: min(150px, 40vw);
height: min(150px, 40vw);
}
/* Wizard stepper progress lines — geometry follows the step-circle radius
(now 32px on desktop, was 40px before B-217 density pass). The line sits
centered on the circles, so top/left/right = radius (16px). max-width
on the fill = diameter (32px) so the fill stops at the last circle. */
.stepper-line-track,
.stepper-line-fill {
top: 16px;
height: 2px;
z-index: 0;
left: 16px;
right: 16px;
}
.stepper-line-track {
background-color: var(--ds-neutral-100);
}
.stepper-line-fill {
background-color: var(--ds-primary-600);
right: auto;
max-width: calc(100% - 32px);
}
/* Wizard stepper responsive */
@media (max-width: 767.98px) {
.ds-wizard-stepper .small {
font-size: var(--ds-type-meta);
}
.ds-wizard-stepper .rounded-circle {
width: 32px !important;
height: 32px !important;
font-size: var(--ds-type-meta);
}
.stepper-line-track,
.stepper-line-fill {
top: 16px;
left: 16px;
right: 16px;
}
.stepper-line-fill {
max-width: calc(100% - 32px);
}
}
/* ===========================================
SETUP WIZARD
(migrated from SetupWizard.razor inline style)
=========================================== */
.setup-wizard {
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
}
.wizard-progress {
position: relative;
}
.wizard-step {
flex: 1;
text-align: center;
position: relative;
}
.step-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--ds-neutral-100);
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.5rem;
font-weight: bold;
transition: all 0.3s ease;
}
.wizard-step.active .step-circle {
background-color: var(--ds-primary-600);
color: white;
}
.wizard-step.completed .step-circle {
background-color: #107c10;
color: white;
}
.step-label {
font-size: var(--ds-type-small);
color: #6c757d;
}
.wizard-step.active .step-label {
color: var(--ds-primary-600);
font-weight: 600;
}
.wizard-step.completed .step-label {
color: #107c10;
}
.setup-wizard .progress-bar {
background-color: var(--ds-primary-600);
}
@media (max-width: 767.98px) {
.setup-wizard {
max-width: calc(100vw - 2rem);
padding: 0 0.5rem;
}
.step-circle {
width: 32px;
height: 32px;
font-size: var(--ds-type-small);
}
.step-label {
font-size: var(--ds-type-meta);
}
}
/* Scrollable tabs on mobile */
@media (max-width: 767.98px) {
.ds-tabs-scrollable {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ds-tabs-scrollable .nav-link {
white-space: nowrap;
}
}
/* ===========================================
AUTOCOMPLETE DROPDOWNS
(migrated from CompanyAutocomplete.razor inline style)
=========================================== */
.company-autocomplete,
.country-autocomplete {
position: relative;
}
/* Floating command-palette list: grows to fit content (so the full name + address show),
single dense line per row (no wrapping), taller so more results are visible at once. */
.autocomplete-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
width: max-content;
max-width: min(30rem, 92vw);
z-index: var(--ds-z-dropdown);
background: var(--bs-body-bg, #fff);
border: 1px solid var(--ds-neutral-200);
border-radius: var(--ds-radius-md);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
max-height: min(24rem, 62vh);
overflow-y: auto;
padding: var(--ds-space-1);
}
.autocomplete-item {
display: flex;
align-items: center;
gap: var(--ds-space-2);
padding: 0.3125rem var(--ds-space-2);
border-radius: var(--ds-radius-sm);
cursor: pointer;
white-space: nowrap;
/* 2026-08-25 — measured in the browser: the suggestions did not match the field the user
had just typed into. Two differences at once, which is why it read as "wrong" without
being nameable:
input 13px / weight 400 (--ds-control-fs-sm, an absolute px token)
item 11.375px / weight 450 (0.8125rem against a 14px root, weight inherited from body)
The root font size in this app is 14px, not the 16px a rem value is usually read against,
so 0.8125rem resolves to 11.375px — 1.6px short of the control token. The item also set no
weight and therefore inherited the body's 450, one step bolder than the input: smaller text
that reads as larger.
Bound to the same token as the control it belongs to, so what you type and what you pick
are identical and stay identical if the token ever changes. Note for future edits: font
sizes in this file are overwhelmingly rem (240 rules) while the control tokens are px (31),
and with a 14px root the two systems do NOT line up — prefer the token next to a control. */
font-size: var(--ds-type-small);
font-weight: var(--ds-font-normal);
line-height: 1.35;
color: var(--ds-neutral-900);
}
.autocomplete-item:hover,
.autocomplete-item.selected {
background-color: var(--ds-primary-100);
}
.autocomplete-item.loading,
.autocomplete-item.no-results {
color: var(--ds-neutral-500);
cursor: default;
white-space: normal;
}
.autocomplete-item.loading:hover,
.autocomplete-item.no-results:hover {
background-color: transparent;
}
.autocomplete-item .company-icon {
flex: 0 0 auto;
color: var(--ds-neutral-400);
font-size: var(--ds-type-small);
}
/* Name shrinks (ellipsis) before the address, so the city/locator stays visible. */
.autocomplete-item .company-name {
flex: 0 1 auto;
min-width: 3.5rem;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
.autocomplete-item .company-address {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--ds-type-meta);
color: var(--ds-neutral-500);
}
.autocomplete-item .company-address::before {
content: "·";
margin-right: var(--ds-space-2);
color: var(--ds-neutral-300);
}
.autocomplete-item .company-count {
flex: 0 0 auto;
margin-left: var(--ds-space-2);
min-width: 1.25rem;
padding: 0.0625rem 0.375rem;
border-radius: 999px;
background: var(--ds-neutral-100);
color: var(--ds-neutral-600);
font-size: var(--ds-type-meta);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: center;
}
/* ===== FEAT-009: Search Match Highlighting ===== */
.search-matches {
font-size: var(--ds-type-small);
line-height: 1.4;
}
.search-match-item {
margin-bottom: 0.25rem;
}
.search-match-item:last-child {
margin-bottom: 0;
}
.match-field {
font-weight: 500;
margin-right: 0.25rem;
}
.match-snippet {
word-break: break-word;
}
.search-highlight {
background-color: #fff3cd;
padding: 0 2px;
border-radius: 2px;
font-weight: 500;
}
/* Dark mode support */
[data-bs-theme="dark"] .search-highlight {
background-color: #664d03;
color: #fff3cd;
}
/* ===========================================
BADGE SELECT INPUT (FEAT-006)
=========================================== */
.badge-select-container {
position: relative;
}
/* B-128: the BadgeSelect dropdown overflowed its enclosing card and was painted under the
next sibling card (e.g. "Sichtbarkeit"). Lifting only the local container isn't enough —
siblings of the card rank by document order in the parent stacking context, so we have
to elevate the entire enclosing card. Uses :has() to target any card that currently owns
focus inside a BadgeSelect; fallback rule keeps the container itself elevated for layouts
where the BadgeSelect is not inside a .card. */
.badge-select-container:focus-within {
z-index: var(--ds-z-dropdown);
}
.card:has(.badge-select-container:focus-within) {
position: relative;
z-index: var(--ds-z-dropdown);
/* .card sets overflow: hidden for rounded-corner clipping, which otherwise crops
the BadgeSelect option list when it overflows the card boundary. Override only
while the dropdown is actually open. */
overflow: visible;
}
/* 2026-08-25 — the same treatment for the autocomplete fields (company, country, Swiss
address lookup). Reported as a "z-index problem", but z-index was never the missing
piece on its own:
The address card already carries .card-overflow-visible, so the suggestion list does
escape the card. That class sets ONLY overflow — no position, no z-index — so the card
creates no stacking context of its own, and the card that follows in document order
paints straight over the list. The z-index on .autocomplete-dropdown cannot help: it
ranks the list inside its own card, not against a sibling card.
Visible only when the field sits near the bottom of a card, which is exactly where
"Land" is — the last row of the address block. Same defect class as B-128, which
elevated the whole enclosing card for BadgeSelect; the autocompletes were never given
the equivalent.
Scoped to :focus-within so the elevation lasts only while a list is actually open and
no card permanently outranks its neighbours. */
.card:has(.company-autocomplete:focus-within),
.card:has(.country-autocomplete:focus-within),
.card:has(.swiss-address-autocomplete:focus-within) {
position: relative;
z-index: var(--ds-z-dropdown);
overflow: visible;
}
.badge-select-input {
min-height: calc(1.5em + 0.5rem + 2px);
height: auto;
cursor: text;
padding: 0.15rem 0.25rem;
}
.badge-select-text-input {
border: none;
outline: none;
background: transparent;
flex: 1 1 60px;
min-width: 60px;
font-size: var(--ds-type-small);
padding: 0.1rem 0.25rem;
}
.badge-remove {
font-size: var(--ds-type-meta);
padding: 0.15rem;
opacity: 0.8;
}
.badge-remove:hover {
opacity: 1;
}
.badge-select-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: var(--ds-z-dropdown);
background: var(--bs-body-bg, #fff);
border: 1px solid var(--bs-border-color, #dee2e6);
border-top: none;
border-radius: 0 0 0.375rem 0.375rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-height: 200px;
overflow-y: auto;
}
.badge-select-item {
padding: 0.4rem 0.75rem;
cursor: pointer;
/* Same correction as .autocomplete-item: 0.875rem resolved to 12.25px against the 14px root,
so the badge suggestions were a third distinct size next to the field (13px) and the other
dropdown (11.375px). Three sizes for the same interaction. */
font-size: var(--ds-type-small);
font-weight: var(--ds-font-normal);
border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.05));
}
.badge-select-item:last-child {
border-bottom: none;
}
.badge-select-item:hover,
.badge-select-item.selected {
background-color: var(--bs-primary-bg-subtle, #e7f1ff);
}
.badge-select-item.no-results {
color: var(--bs-secondary, #6c757d);
cursor: default;
}
.badge-select-item.no-results:hover {
background-color: transparent;
}
/* FEAT-017: Hero stat card with breakdown bar */
.stat-hero-card {
border-left: 4px solid var(--ds-primary-600);
}
.breakdown-bar {
display: flex;
height: 2.5rem;
border-radius: var(--ds-radius-md);
overflow: hidden;
gap: 2px;
}
.breakdown-segment {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
font-size: var(--ds-type-small);
font-weight: 500;
transition: opacity 0.15s;
min-width: 3rem;
}
.breakdown-segment:hover {
opacity: 0.85;
color: white;
}
.segment-persons {
background: var(--ds-primary-600);
}
.segment-companies {
background: var(--ds-neutral-500);
}
.breakdown-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 0.5rem;
}
@media (max-width: 576px) {
.breakdown-label {
font-size: var(--ds-type-meta);
}
}
/* ===========================================
MAIN LAYOUT
(migrated from MainLayout.razor.css)
=========================================== */
.page {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page > main {
flex: 1;
}
@media (min-width: 641px) {
.page {
flex-direction: row;
}
.page .sidebar {
height: 100vh;
position: sticky;
top: 0;
overflow-y: auto;
flex-shrink: 0;
}
.page > main > article {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
}
/* Mobile Navigation Toggle */
.mobile-nav-toggle {
display: none;
position: fixed;
top: 0.75rem;
left: 0.75rem;
z-index: 1035;
width: 44px;
height: 44px;
border: none;
background-color: var(--ds-primary-600);
border-radius: var(--ds-radius-lg);
color: white;
cursor: pointer;
align-items: center;
justify-content: center;
transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
}
.mobile-nav-toggle:hover {
background-color: var(--ds-primary-700);
}
.mobile-nav-toggle:focus {
outline: 2px solid var(--ds-primary-600);
outline-offset: 2px;
}
/* Mobile Overlay */
.mobile-nav-overlay {
display: none;
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1036;
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-nav-overlay.open {
display: block;
opacity: 1;
}
/* Mobile-specific layout */
@media (max-width: 767.98px) {
.mobile-nav-toggle {
display: flex;
}
.page .sidebar {
position: fixed;
left: -280px;
top: 0;
z-index: 1037;
width: 280px;
height: 100vh;
transition: left 0.3s ease;
}
.page .sidebar.open {
left: 0;
}
.page > main {
width: 100%;
}
.page > main > .content {
padding-top: 3.5rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
/* Blazor Error UI */
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* ===========================================
RECONNECT MODAL
(migrated from ReconnectModal.razor.css)
=========================================== */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
display: block;
}
#components-reconnect-modal {
background-color: white;
width: min(20rem, calc(100vw - 2rem));
margin: 20vh auto;
padding: 2rem;
border: 0;
border-radius: 0.5rem;
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
}
#components-reconnect-modal[open] {
animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s,
components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
#components-reconnect-modal::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp {
0% { transform: translateY(30px) scale(0.95); }
100% { transform: translateY(0); }
}
@keyframes components-reconnect-modal-fadeInOpacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes components-reconnect-modal-fadeOutOpacity {
0% { opacity: 1; }
100% { opacity: 0; }
}
.components-reconnect-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p {
margin: 0;
text-align: center;
}
#components-reconnect-modal button {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active {
background-color: #6b9ed2;
}
.components-rejoining-animation {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation {
0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; }
100% { top: 0; left: 0; width: 80px; height: 80px; opacity: 0; }
}
/* ===========================================
PRINT STYLES
=========================================== */
@media print {
/* Hide UI chrome */
.sidebar, .mobile-nav-toggle, .mobile-nav-overlay,
.pagination, .license-banner,
#blazor-error-ui { display: none !important; }
/* Hide buttons except those marked for print */
.btn:not(.ds-print-visible) { display: none !important; }
/* Reset layout */
.page { display: block !important; }
main { width: 100% !important; }
.content { padding: 0 !important; }
/* Cards */
.card {
break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
/* Tables — show all columns including mobile-hidden ones */
.table { font-size: 10pt; }
.d-none-mobile,
.d-none.d-md-table-cell,
.d-none.d-lg-table-cell,
.d-none.d-xl-table-cell { display: table-cell !important; }
/* Typography */
body { font-size: 11pt; color: #000; }
a { color: #000; text-decoration: underline; }
}
/* ============================================================
FEAT-021: MOBILE EXPERIENCE
============================================================ */
/* Loading skeleton shown during viewport detection */
.mobile-loading-skeleton {
min-height: 100vh;
background: var(--ds-neutral-50, #f8f9fa);
}
/* Mobile shell — wraps content + tab bar */
.mobile-shell {
display: none; /* Hidden on desktop by default */
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
background: var(--ds-neutral-50, #f8f9fa);
}
/* Mobile page content area */
.mobile-content {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-page-content {
padding: 0 1rem 1rem;
}
/* ---- Bottom Tab Bar ---- */
.mobile-tab-bar {
display: none; /* Hidden on desktop */
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(68px + env(safe-area-inset-bottom, 0px));
background: #fff;
border-top: 1px solid var(--ds-neutral-200, #e8e5f0);
align-items: flex-start;
justify-content: space-around;
padding-top: 6px;
padding-bottom: env(safe-area-inset-bottom, 8px);
z-index: var(--ds-z-sticky, 1030);
}
.mobile-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-decoration: none;
font-size: var(--ds-type-meta);
font-weight: 500;
color: var(--ds-neutral-400, #94a3b8);
min-width: 64px;
padding: 4px 0;
-webkit-tap-highlight-color: transparent;
}
.mobile-tab:hover,
.mobile-tab:visited {
color: var(--ds-neutral-400, #94a3b8);
text-decoration: none;
}
.mobile-tab.active {
color: var(--ds-primary, #be7b72);
}
.mobile-tab-icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
font-size: var(--ds-type-h3);
border-radius: 14px;
transition: background 0.15s ease;
}
.mobile-tab.active .mobile-tab-icon {
background: #ede9fe;
width: 48px;
}
.mobile-tab-label {
line-height: 1;
}
/* ---- Mobile Placeholder Screens ---- */
.mobile-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 3rem 1.5rem;
min-height: 60vh;
}
.mobile-placeholder-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: #f5f3ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--ds-neutral-400, #94a3b8);
margin-bottom: 1.25rem;
}
.mobile-placeholder-title {
font-size: var(--ds-type-h3);
font-weight: 700;
color: var(--ds-neutral-900, #1a1a2e);
margin-bottom: 0.5rem;
}
.mobile-placeholder-text {
font-size: var(--ds-type-small);
color: var(--ds-neutral-500, #64748b);
line-height: 1.5;
max-width: 280px;
margin-bottom: 1.5rem;
}
/* ---- Mobile Media Query ---- */
@media (max-width: 767.98px) {
/* Show mobile shell, hide desktop layout elements */
.mobile-shell {
display: flex;
}
.mobile-tab-bar {
display: flex;
}
/* Add bottom padding to mobile content so tab bar doesn't cover it */
.mobile-content {
padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}
/* Hide the desktop hamburger on mobile (replaced by bottom tab bar) */
.mobile-nav-toggle {
display: none !important;
}
.mobile-nav-overlay {
display: none !important;
}
}
/* ---- Mobile Home / Search (FEAT-021 Phase 2) ---- */
.m-home {
display: flex;
flex-direction: column;
min-height: 100%;
}
.m-home-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem 0.25rem;
}
.m-home-title {
font-size: var(--ds-type-h2);
font-weight: 800;
color: var(--ds-neutral-900, #1a1a2e);
margin: 0;
}
.m-home-refresh {
width: 40px;
height: 40px;
border: none;
background: none;
color: var(--ds-neutral-500, #64748b);
font-size: var(--ds-type-h3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s;
-webkit-tap-highlight-color: transparent;
}
.m-home-refresh:active {
background: var(--ds-neutral-100, #f1f0f5);
}
.m-home-refresh.spinning i {
animation: m-spin 0.8s linear infinite;
}
@keyframes m-spin {
to { transform: rotate(360deg); }
}
/* Search bar */
.m-search-bar {
margin: 0.5rem 1rem 0.75rem;
background: #f5f3ff;
border-radius: 14px;
padding: 0;
display: flex;
align-items: center;
border: 2px solid transparent;
transition: border-color 0.15s, background 0.15s;
}
.m-search-bar.focused {
border-color: var(--ds-primary, #be7b72);
background: #fff;
}
.m-search-icon {
padding-left: 14px;
color: var(--ds-neutral-400, #94a3b8);
font-size: var(--ds-type-small);
flex-shrink: 0;
}
.m-search-input {
flex: 1;
border: none;
background: transparent;
padding: 12px 10px;
font-size: var(--ds-type-small);
color: var(--ds-neutral-900, #1a1a2e);
outline: none;
min-width: 0;
}
.m-search-input::placeholder {
color: var(--ds-neutral-400, #94a3b8);
}
.m-search-clear {
width: 36px;
height: 36px;
border: none;
background: none;
color: var(--ds-neutral-400, #94a3b8);
font-size: var(--ds-type-meta);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
/* Section headers */
.m-section-header {
padding: 0.75rem 1rem 0.25rem;
font-size: var(--ds-type-meta);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ds-neutral-400, #94a3b8);
}
/* Contact cards */
.m-contact-list {
display: flex;
flex-direction: column;
}
.m-contact-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 1rem;
text-decoration: none;
color: inherit;
border-bottom: 1px solid var(--ds-neutral-100, #f1f0f5);
-webkit-tap-highlight-color: transparent;
min-height: 56px;
}
.m-contact-card:last-child {
border-bottom: none;
}
.m-contact-card:active {
background: var(--ds-neutral-50, #f8f9fa);
}
/* Avatars */
.m-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--ds-type-small);
color: #fff;
flex-shrink: 0;
}
.m-contact-info {
flex: 1;
min-width: 0;
}
.m-contact-name {
font-weight: 600;
font-size: var(--ds-type-small);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--ds-neutral-900, #1a1a2e);
}
.m-contact-name strong {
font-weight: 800;
color: var(--ds-primary, #be7b72);
}
.m-contact-company {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-500, #64748b);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-chevron {
color: var(--ds-neutral-300, #cbd5e1);
font-size: var(--ds-type-meta);
flex-shrink: 0;
}
/* Loading */
.m-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 2rem;
color: var(--ds-neutral-400, #94a3b8);
font-size: var(--ds-type-small);
}
.m-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--ds-neutral-200, #e8e5f0);
border-top-color: var(--ds-primary, #be7b72);
border-radius: 50%;
animation: m-spin 0.6s linear infinite;
}
/* Skeleton loading */
.m-skeleton-list {
display: flex;
flex-direction: column;
}
.m-skeleton-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 1rem;
}
.m-skeleton-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ds-neutral-200, #e8e5f0);
animation: m-pulse 1.5s ease-in-out infinite;
flex-shrink: 0;
}
.m-skeleton-lines {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.m-skeleton-line {
height: 12px;
border-radius: 6px;
background: var(--ds-neutral-200, #e8e5f0);
animation: m-pulse 1.5s ease-in-out infinite;
}
.m-skeleton-line.w-60 { width: 60%; }
.m-skeleton-line.w-40 { width: 40%; }
@keyframes m-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Empty states */
.m-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2.5rem 1.5rem;
}
.m-empty-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: #f5f3ff;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-h2);
color: var(--ds-neutral-400, #94a3b8);
margin-bottom: 1rem;
}
.m-empty-title {
font-size: var(--ds-type-small);
font-weight: 600;
color: var(--ds-neutral-900, #1a1a2e);
margin: 0 0 0.25rem;
}
.m-empty-text {
font-size: var(--ds-type-small);
color: var(--ds-neutral-500, #64748b);
margin: 0 0 1rem;
line-height: 1.4;
}
.m-empty-inline {
display: flex;
align-items: center;
gap: 8px;
padding: 0.75rem 1rem;
font-size: var(--ds-type-small);
color: var(--ds-neutral-400, #94a3b8);
}
/* Error card */
.m-error-card {
display: flex;
align-items: center;
gap: 8px;
margin: 0.5rem 1rem;
padding: 0.75rem 1rem;
background: #fef2f2;
border-radius: 10px;
font-size: var(--ds-type-small);
color: #6b2825;
}
.m-error-card i {
font-size: var(--ds-type-body);
flex-shrink: 0;
}
.m-retry-btn {
margin-left: auto;
border: none;
background: none;
color: #6b2825;
font-weight: 600;
font-size: var(--ds-type-small);
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
/* ---- Mobile Contact Detail (FEAT-021 Phase 3) ---- */
.m-detail {
display: flex;
flex-direction: column;
}
.m-detail-back {
display: flex;
align-items: center;
gap: 4px;
padding: 0.5rem 1rem 0.25rem;
font-size: var(--ds-type-small);
color: var(--ds-primary, #be7b72);
font-weight: 500;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.m-detail-back i {
font-size: var(--ds-type-body);
}
/* Hero */
.m-detail-hero {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 1rem 0.75rem;
gap: 4px;
}
.m-avatar-lg {
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--ds-type-h2);
color: #fff;
}
.m-skeleton-avatar-lg {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--ds-neutral-200, #e8e5f0);
animation: m-pulse 1.5s ease-in-out infinite;
}
.m-detail-name {
font-size: var(--ds-type-h3);
font-weight: 700;
text-align: center;
color: var(--ds-neutral-900, #1a1a2e);
margin-top: 4px;
}
.m-detail-subtitle {
font-size: var(--ds-type-small);
color: var(--ds-neutral-500, #64748b);
text-align: center;
}
/* Quick actions */
.m-quick-actions {
display: flex;
justify-content: center;
gap: 20px;
padding: 0.5rem 1rem 1rem;
}
.m-action-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-decoration: none;
color: inherit;
background: none;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.m-action-circle {
width: 48px;
height: 48px;
border-radius: 50%;
background: #f5f3ff;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-h3);
color: var(--ds-primary, #be7b72);
transition: background 0.15s;
}
.m-action-circle.active {
background: #ede9fe;
color: #7d5a1c;
}
.m-action-circle:active {
background: #ede9fe;
}
.m-action-label {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-500, #64748b);
font-weight: 500;
}
/* Info card */
.m-info-section {
padding: 0 1rem;
margin-bottom: 0.75rem;
}
.m-info-card {
background: #fafafe;
border-radius: 14px;
border: 1px solid var(--ds-neutral-100, #f1f0f5);
overflow: hidden;
}
.m-info-row {
display: flex;
align-items: center;
padding: 11px 14px;
gap: 12px;
border-bottom: 1px solid var(--ds-neutral-100, #f1f0f5);
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
}
.m-info-row:last-child {
border-bottom: none;
}
.m-info-row:active {
background: var(--ds-neutral-50, #f8f9fa);
}
.m-info-icon {
width: 20px;
text-align: center;
font-size: var(--ds-type-small);
color: var(--ds-neutral-400, #94a3b8);
flex-shrink: 0;
}
.m-info-content {
flex: 1;
min-width: 0;
}
.m-info-label {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-400, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.m-info-value {
font-size: var(--ds-type-small);
font-weight: 500;
color: var(--ds-neutral-900, #1a1a2e);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* m-info-row with a secondary action button (e.g. WhatsApp next to a
call-to-tel row). The outer row stops being a single tap target; the
left side (icon + content) becomes a dedicated tap area, the action
button sits at the right edge.
(2026-06-07, added for Mobile Detail WhatsApp deep-link.) */
.m-info-row--with-action {
padding: 0;
}
.m-info-row--with-action .m-info-row-tap {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
text-decoration: none;
color: inherit;
}
.m-info-row--with-action .m-info-row-tap:active {
background: var(--ds-neutral-50, #f8f9fa);
}
.m-info-action {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-right: 6px;
border-radius: 12px;
text-decoration: none;
transition: background 0.12s, transform 0.05s;
}
.m-info-action:active {
transform: scale(0.94);
}
.m-info-action--whatsapp {
color: #25D366; /* WhatsApp brand green */
background: rgba(37, 211, 102, 0.10);
font-size: var(--ds-type-h3);
}
.m-info-action--whatsapp:active {
background: rgba(37, 211, 102, 0.20);
}
.m-info-value.link {
color: var(--ds-primary, #be7b72);
}
/* Notes */
.m-notes-toggle {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
border: none;
background: none;
padding: 8px 0;
font-size: var(--ds-type-small);
color: var(--ds-neutral-500, #64748b);
font-weight: 500;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.m-notes-content {
font-size: var(--ds-type-small);
color: var(--ds-neutral-700, #334155);
line-height: 1.5;
padding: 0.25rem 0 0.5rem;
white-space: pre-wrap;
word-break: break-word;
}
/* Activity peek */
.m-activity-row {
display: flex;
align-items: center;
padding: 10px 14px;
gap: 10px;
border-bottom: 1px solid var(--ds-neutral-100, #f1f0f5);
}
.m-activity-row:last-child {
border-bottom: none;
}
.m-activity-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ds-primary, #be7b72);
flex-shrink: 0;
}
.m-activity-dot.outbound {
background: var(--ds-neutral-400, #94a3b8);
}
.m-activity-text {
flex: 1;
font-size: var(--ds-type-small);
color: var(--ds-neutral-600, #475569);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.m-activity-time {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-400, #94a3b8);
flex-shrink: 0;
}
.m-see-all {
display: block;
text-align: center;
padding: 10px;
color: var(--ds-primary, #be7b72);
font-size: var(--ds-type-small);
font-weight: 600;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
/* ---- Mobile Utility Classes (FEAT-021) ---- */
.m-pt-3 { padding-top: 3rem; }
.m-mt-1 { margin-top: 0.5rem; }
.m-flex-1 { flex: 1; }
.m-flex-2 { flex: 2; }
.m-flex-3 { flex: 3; }
.m-skeleton-name { height: 16px; margin-top: 8px; }
.m-skeleton-subtitle { height: 12px; }
/* ---- Call Log Dialog (FEAT-021) ---- */
.call-log-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1060;
padding: 1rem;
}
.call-log-dialog {
background: #fff;
border-radius: 20px;
padding: 1.5rem;
max-width: 360px;
width: 100%;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
/* R-015049: anchor for the close symbol, and the dialog takes focus for the Escape key, which
must not paint the browser's default outline around the whole card. */
position: relative;
outline: none;
}
/* R-015049 — the way out. The dialog could only be dismissed by clicking the dimmed area, which
nothing on screen suggested, so it read as a dialog with no way out. */
.call-log-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ds-neutral-500, #6c757d);
font-size: 0.875rem;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.call-log-close:hover,
.call-log-close:focus-visible {
background: var(--ds-neutral-100, #f1efed);
color: var(--ds-neutral-800, #332f2d);
}
.call-log-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 1rem;
}
.call-log-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: #f5f3ff;
color: var(--ds-primary, #be7b72);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-h3);
flex-shrink: 0;
}
.call-log-title {
font-size: var(--ds-type-body);
font-weight: 700;
color: var(--ds-neutral-900, #1a1a2e);
}
.call-log-phone {
font-size: var(--ds-type-small);
color: var(--ds-primary, #be7b72);
font-weight: 500;
}
.call-log-contact {
font-size: var(--ds-type-small);
color: var(--ds-neutral-500, #64748b);
}
.call-log-prompt {
font-size: var(--ds-type-small);
color: var(--ds-neutral-600, #475569);
line-height: 1.4;
margin-bottom: 1.25rem;
}
.call-log-form {
margin-bottom: 1rem;
}
.call-log-actions {
display: flex;
gap: 0.5rem;
}
.call-log-btn {
flex: 1;
border: none;
border-radius: 10px;
padding: 10px 16px;
font-size: var(--ds-type-small);
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
-webkit-tap-highlight-color: transparent;
}
.call-log-btn.primary {
background: var(--ds-primary, #be7b72);
color: #fff;
}
.call-log-btn.primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.call-log-btn.secondary {
background: var(--ds-neutral-100, #f1f0f5);
color: var(--ds-neutral-700, #334155);
}
.m-success-card {
display: flex;
align-items: center;
gap: 8px;
padding: 0.75rem 1rem;
background: #f0fdf4;
border-radius: 10px;
font-size: var(--ds-type-small);
color: #16a34a;
}
.m-signout-btn {
width: 100%;
background: #fef2f2;
color: #6b2825;
text-align: center;
padding: 12px;
border-radius: 12px;
font-weight: 600;
font-size: var(--ds-type-small);
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* ---- Mobile Contact Form (FEAT-021 Phase 4) ---- */
.m-form {
display: flex;
flex-direction: column;
min-height: 100%;
}
.m-form-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem 0.75rem;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
border-bottom: 1px solid var(--ds-neutral-100, #f1f0f5);
}
.m-form-cancel {
border: none;
background: none;
color: var(--ds-neutral-500, #64748b);
font-size: var(--ds-type-small);
font-weight: 500;
cursor: pointer;
padding: 4px 8px;
-webkit-tap-highlight-color: transparent;
}
.m-form-title {
font-size: var(--ds-type-body);
font-weight: 700;
color: var(--ds-neutral-900, #1a1a2e);
}
.m-form-save {
border: none;
background: var(--ds-primary, #be7b72);
color: #fff;
border-radius: 8px;
padding: 6px 16px;
font-size: var(--ds-type-small);
font-weight: 600;
cursor: pointer;
min-width: 60px;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.m-form-save.disabled {
opacity: 0.6;
cursor: not-allowed;
}
.m-spinner-sm {
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: m-spin 0.6s linear infinite;
}
.m-form-body {
padding: 0.75rem 1rem 2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.m-form-row {
display: flex;
gap: 0.5rem;
}
.m-form-group {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.m-form-label {
font-size: var(--ds-type-meta);
font-weight: 600;
color: var(--ds-neutral-500, #64748b);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.m-required {
color: #6b2825;
}
.m-form-input {
width: 100%;
background: #f5f3ff;
border: 2px solid var(--ds-neutral-200, #e8e5f0);
border-radius: 10px;
padding: 10px 12px;
font-size: var(--ds-type-small);
color: var(--ds-neutral-900, #1a1a2e);
outline: none;
transition: border-color 0.15s, background 0.15s;
font-family: inherit;
}
.m-form-input:focus {
border-color: var(--ds-primary, #be7b72);
background: #fff;
}
.m-form-input.filled {
background: #fff;
border-color: var(--ds-primary, #be7b72);
}
.m-form-input::placeholder {
color: var(--ds-neutral-400, #94a3b8);
}
select.m-form-input {
appearance: auto;
}
.m-form-textarea {
resize: vertical;
min-height: 60px;
}
/* Discard dialog */
.m-dialog-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 1050;
padding: 1rem;
}
.m-dialog {
background: #fff;
border-radius: 16px;
padding: 1.5rem;
max-width: 320px;
width: 100%;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.m-dialog-title {
font-size: var(--ds-type-body);
font-weight: 700;
color: var(--ds-neutral-900, #1a1a2e);
margin-bottom: 0.5rem;
}
.m-dialog-text {
font-size: var(--ds-type-small);
color: var(--ds-neutral-500, #64748b);
line-height: 1.4;
margin-bottom: 1.25rem;
}
.m-dialog-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
.m-dialog-btn {
border: none;
background: var(--ds-neutral-100, #f1f0f5);
color: var(--ds-neutral-700, #334155);
border-radius: 8px;
padding: 8px 16px;
font-size: var(--ds-type-small);
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.m-dialog-btn.danger {
background: #fef2f2;
color: #6b2825;
}
/* ---- Swiss Address Autocomplete (FEAT-023) ---- */
.swiss-address-autocomplete {
position: relative;
width: 100%;
}
.swiss-address-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border: 2px solid var(--ds-primary, #be7b72);
border-radius: 8px;
margin-top: 2px;
max-height: min(220px, 50vh);
overflow-y: auto;
z-index: var(--ds-z-dropdown, 1020);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.swiss-address-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--ds-neutral-100, #f1f0f5);
}
.swiss-address-item:last-child {
border-bottom: none;
}
.swiss-address-item:hover,
.swiss-address-item.selected {
background: #f5f3ff;
}
.swiss-address-item.loading {
display: flex;
align-items: center;
gap: 8px;
color: var(--ds-neutral-400, #94a3b8);
font-size: var(--ds-type-small);
cursor: default;
}
.swiss-address-main {
font-weight: 600;
font-size: var(--ds-type-small);
color: var(--ds-neutral-900, #1a1a2e);
}
.swiss-address-detail {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-500, #64748b);
}
/* FEAT-023 Phase 2-3: Address Enrichment & Verification */
.address-enrich-section {
padding-top: 0.25rem;
border-top: 1px solid var(--ds-neutral-100, #f1f5f9);
}
.address-enrich-preview {
background: var(--ds-neutral-50, #f8fafc);
border-radius: 6px;
padding: 0.5rem 0.75rem;
border-left: 3px solid var(--ds-primary, #be7b72);
}
.address-verify-result {
padding-top: 0.25rem;
}
/* ---- Database Info Panel ---- */
.db-stat-card {
background: var(--ds-neutral-50, #f8f9fa);
border-radius: 8px;
padding: 0.75rem;
text-align: center;
}
.db-stat-value {
font-size: var(--ds-type-h3);
font-weight: 700;
color: var(--ds-neutral-900, #1a1a2e);
}
.db-stat-label {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-400, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ═══════════════════════════════════════════
FEAT-028: Contact Photos
═══════════════════════════════════════════ */
.contact-photo-section {
display: flex;
flex-direction: column;
align-items: center;
}
.contact-photo-wrapper {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
background: var(--ds-neutral-100, #f1f5f9);
border: 3px solid var(--ds-neutral-200, #e2e8f0);
}
.contact-photo-wrapper.editable {
cursor: pointer;
}
.contact-photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact-photo-initials {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 700;
color: var(--ds-primary, #be7b72);
background: var(--ds-primary-50, #f5f3ff);
}
.contact-photo-upload {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 36px;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
}
.contact-photo-wrapper.editable:hover .contact-photo-upload {
opacity: 1;
}
.contact-photo-remove {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background: rgba(220, 53, 69, 0.85);
color: white;
font-size: var(--ds-type-meta);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
cursor: pointer;
}
.contact-photo-wrapper.editable:hover .contact-photo-remove {
opacity: 1;
}
.contact-photo-remove:hover {
background: rgba(220, 53, 69, 1);
}
/* Contact list photo (36x36) */
.contact-list-photo {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.contact-list-initials {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-meta);
font-weight: 600;
color: var(--ds-primary, #be7b72);
background: var(--ds-primary-50, #f5f3ff);
flex-shrink: 0;
}
/* ═══════════════════════════════════════════
FEAT-029: Teams Integration
═══════════════════════════════════════════ */
.teams-action-bar {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.btn-teams {
background: #5b5fc7;
color: white;
border: none;
border-radius: 6px;
padding: 0.35rem 0.75rem;
font-size: var(--ds-type-small);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.25rem;
transition: background 0.2s;
text-decoration: none;
}
.btn-teams:hover {
background: #4b4fb7;
color: white;
text-decoration: none;
}
.btn-teams-sm {
width: 28px;
height: 28px;
border-radius: 6px;
border: none;
background: transparent;
color: #5b5fc7;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-meta);
transition: background 0.2s, color 0.2s;
text-decoration: none;
padding: 0;
}
.btn-teams-sm:hover {
background: rgba(91, 95, 199, 0.1);
color: #4b4fb7;
text-decoration: none;
}
/* ═══════════════════════════════════════════
FEAT-030: M365 Contact Intelligence
═══════════════════════════════════════════ */
.suggestion-list {
display: flex;
flex-direction: column;
}
.suggestion-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--ds-neutral-100, #f1f5f9);
transition: background 0.15s;
}
.suggestion-item:last-child {
border-bottom: none;
}
.suggestion-item:hover {
background: var(--ds-neutral-50, #f8fafc);
}
.suggestion-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-small);
font-weight: 600;
color: var(--ds-primary, #be7b72);
background: var(--ds-primary-50, #f5f3ff);
flex-shrink: 0;
}
.suggestion-info {
flex: 1;
min-width: 0;
}
.suggestion-name {
font-weight: 600;
font-size: var(--ds-type-small);
color: var(--ds-neutral-900, #1a1a2e);
}
.suggestion-detail {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-500, #64748b);
}
.suggestion-email {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-400, #94a3b8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.suggestion-actions {
flex-shrink: 0;
}
/* ==============================
FEAT-051: Contact Discovery
============================== */
.discovery-list {
display: flex;
flex-direction: column;
}
.discovery-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--ds-neutral-100, #f1f5f9);
transition: background 0.15s, opacity 0.3s;
}
.discovery-item:last-child {
border-bottom: none;
}
.discovery-item:hover {
background: var(--ds-neutral-50, #f8fafc);
}
.discovery-item-dismissing {
opacity: 0.4;
}
.discovery-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-small);
font-weight: 600;
color: var(--ds-primary-600, #be7b72);
background: var(--ds-primary-50, #fef5ee);
flex-shrink: 0;
}
.discovery-info {
flex: 1;
min-width: 0;
}
.discovery-name {
font-weight: 600;
font-size: var(--ds-type-small);
color: var(--ds-neutral-900, #1a1a2e);
}
.discovery-email {
font-size: var(--ds-type-meta);
color: var(--ds-neutral-500, #64748b);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.discovery-count {
font-size: var(--ds-type-meta);
}
.discovery-actions {
flex-shrink: 0;
}
@keyframes spin-animation {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin-animation {
animation: spin-animation 1s linear infinite;
}
/* ==============================
FEAT-031: Duplicate Detection
============================== */
.duplicate-card {
border: 1px solid var(--ds-neutral-200, #e2e8f0);
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.duplicate-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Match evidence row */
.duplicate-evidence {
padding: 0.5rem 1rem;
background: var(--bg-secondary, #f9fafb);
border-bottom: 1px solid var(--border-color-light, #f3f4f6);
font-size: var(--ds-type-small);
color: var(--text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.match-evidence-item {
background: #fff;
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 0.25rem;
padding: 0.125rem 0.5rem;
font-family: var(--ds-font-mono);
font-size: var(--ds-type-meta);
color: var(--text-primary, #1f2937);
}
.duplicate-card-selected {
border-color: var(--primary, #be7b72);
background-color: rgba(59, 130, 246, 0.02);
}
/* Bulk actions toolbar */
.duplicate-bulk-toolbar {
background: var(--bg-primary, #fff);
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 0.5rem;
padding: 0.5rem 1rem;
margin-bottom: 0.75rem;
position: sticky;
top: 0;
z-index: 10;
}
.duplicate-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.25rem;
background: var(--ds-neutral-50, #f8f9fa);
border-bottom: 1px solid var(--ds-neutral-200, #e2e8f0);
}
.duplicate-contact-col {
padding: 0.5rem;
border-radius: 8px;
background: var(--ds-neutral-50, #f8f9fa);
}
.duplicate-fields {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.duplicate-fields .field-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: var(--ds-type-small);
}
.duplicate-fields .field-label {
flex-shrink: 0;
width: 100px;
color: var(--ds-neutral-500, #64748b);
font-size: var(--ds-type-meta);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.confidence-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 50px;
padding: 0.2rem 0.6rem;
border-radius: 20px;
font-size: var(--ds-type-small);
font-weight: 700;
color: #fff;
}
.confidence-high {
background: var(--ds-success-600, #16a34a);
}
.confidence-medium {
background: var(--ds-warning-500, #eab308);
color: var(--ds-neutral-900, #1a1a2e);
}
.confidence-low {
background: var(--ds-warning-600, #7d5a1c);
}
.match-tag {
display: inline-block;
padding: 0.15rem 0.5rem;
font-size: var(--ds-type-meta);
font-weight: 600;
color: var(--ds-primary-700, #9a5e56);
background: var(--ds-primary-50, #eff6ff);
border: 1px solid var(--ds-primary-200, #bfdbfe);
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.merge-actions {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0.5rem 1.25rem;
background: var(--ds-neutral-50, #f8f9fa);
border-top: 1px solid var(--ds-neutral-200, #e2e8f0);
}
.field-diff {
padding: 0.1rem 0.3rem;
border-radius: 4px;
}
.field-diff-match {
background: rgba(22, 163, 74, 0.1);
}
.field-diff-different {
background: rgba(234, 179, 8, 0.15);
}
.merge-log-table th {
font-size: var(--ds-type-meta);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ds-neutral-500, #64748b);
border-bottom: 2px solid var(--ds-neutral-200, #e2e8f0);
}
.merge-log-table td {
font-size: var(--ds-type-small);
vertical-align: middle;
}
/* ---- FEAT-032: Exchange Contact Import ---- */
.exc-import-preview-table .table {
font-size: var(--ds-type-small);
}
.exc-import-preview-table .table thead th {
border-bottom: 2px solid var(--ds-neutral-200, #e2e8f0);
font-size: var(--ds-type-meta);
letter-spacing: 0.04em;
}
.exc-import-category-badge {
font-size: var(--ds-type-meta);
font-weight: 600;
padding: 0.25em 0.6em;
border-radius: 4px;
display: inline-flex;
align-items: center;
gap: 0.2em;
}
.exc-import-category-new {
background-color: rgba(16, 124, 16, 0.12);
color: #107c10;
}
.exc-import-category-existing {
background-color: var(--ds-neutral-100, #f1f5f9);
color: var(--ds-neutral-500, #64748b);
}
.exc-import-category-potentialduplicate {
background-color: rgba(232, 163, 23, 0.14);
color: #b37a00;
}
.exc-import-stats .card {
border-radius: 8px;
}
.exc-import-progress {
text-align: center;
padding: 2rem 0;
}
.exc-import-result .card {
border-radius: 8px;
}
/* Import preview detail panel */
.import-detail-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 90vw;
background: white;
z-index: 1050;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
animation: slideInRight 0.2s ease;
display: flex;
flex-direction: column;
}
/* About page container */
.about-page { max-width: 900px; }
@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
/* ===== FEAT-052: Dashboard Grid ===== */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 640px));
gap: 1rem;
justify-content: center;
}
.dashboard-grid .widget-1col {
grid-column: span 1;
max-width: 640px;
}
.dashboard-grid .widget-2col {
grid-column: span 2;
max-width: 1280px;
}
/* Responsive: 1 column on mobile */
@media (max-width: 767.98px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.dashboard-grid .widget-2col {
grid-column: span 1;
}
}
/* 3 columns on wide screens */
@media (min-width: 1600px) {
.dashboard-grid {
grid-template-columns: repeat(3, minmax(0, 640px));
}
}
/* 4 columns on ultra-wide */
@media (min-width: 2240px) {
.dashboard-grid {
grid-template-columns: repeat(4, minmax(0, 640px));
}
}
.dashboard-widget .card {
height: 100%;
}
/* Widget header action buttons (gear + remove) */
.widget-settings-btn,
.widget-remove-btn {
opacity: 0;
transition: opacity 0.15s ease;
padding: 0.25rem;
line-height: 1;
color: var(--text-muted);
}
.widget-settings-btn:hover {
color: var(--primary);
}
.widget-remove-btn:hover {
color: var(--danger);
}
.dashboard-widget .card-header:hover .widget-settings-btn,
.dashboard-widget .card-header:hover .widget-remove-btn {
opacity: 1;
}
/* Always show on touch devices */
@media (hover: none) {
.widget-settings-btn,
.widget-remove-btn {
opacity: 1;
}
}
/* Width toggle in settings panel */
.widget-width-toggle .form-check {
padding: 0.25rem 0;
padding-left: 1.5em;
}
/* ===== Generic Slide Panel (shared by catalog + settings) ===== */
.slide-panel-backdrop,
.widget-catalog-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1040;
animation: fadeIn 0.15s ease;
}
.slide-panel,
.widget-catalog-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 400px;
background: var(--bg-primary, #fff);
z-index: 1050;
display: flex;
flex-direction: column;
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
transition: transform 0.25s ease;
}
.slide-panel.open,
.widget-catalog-panel.open {
transform: translateX(0);
}
.slide-panel-header,
.widget-catalog-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border-color, #e5e7eb);
flex-shrink: 0;
}
.slide-panel-body {
flex: 1;
overflow-y: auto;
padding: 1rem 1.25rem;
}
.slide-panel-footer {
padding: 1rem 1.25rem;
border-top: 1px solid var(--border-color, #e5e7eb);
flex-shrink: 0;
}
.widget-catalog-search {
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--border-color, #e5e7eb);
flex-shrink: 0;
}
.widget-catalog-body {
flex: 1;
overflow-y: auto;
padding: 0.5rem 0;
}
.widget-catalog-category {
padding: 0.5rem 0;
}
.widget-catalog-category-header {
font-size: var(--ds-type-meta);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
padding: 0.5rem 1.25rem 0.25rem;
margin: 0;
}
.widget-catalog-item {
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--border-color-light, #f3f4f6);
transition: background-color 0.1s ease;
}
.widget-catalog-item:hover {
background-color: var(--bg-secondary, #f9fafb);
}
.widget-catalog-icon {
width: 2.25rem;
height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-subtle, #eff6ff);
color: var(--primary);
border-radius: 0.5rem;
font-size: var(--ds-type-body);
flex-shrink: 0;
}
.widget-catalog-action {
flex-shrink: 0;
align-self: center;
}
/* Mobile: full-screen slide panels */
@media (max-width: 767.98px) {
.slide-panel,
.widget-catalog-panel {
width: 100%;
}
}
/* ===== Floating Add Widget FAB ===== */
.dashboard-fab {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: var(--primary, #be7b72);
color: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 1030;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-fab-icon {
font-size: var(--ds-type-h1);
font-weight: 300;
line-height: 1;
}
.dashboard-fab:hover {
transform: scale(1.08);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.dashboard-fab:active {
transform: scale(0.95);
}
/* Mobile: above bottom nav */
@media (max-width: 767.98px) {
.dashboard-fab {
bottom: calc(var(--mobile-nav-height, 3.5rem) + 1rem);
}
}
/* ===== Empty Dashboard State ===== */
.dashboard-empty-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 40vh;
}
.dashboard-empty-state-content {
text-align: center;
max-width: 320px;
}
/* ===== Undo & Error Toasts ===== */
.dashboard-undo-toast,
.dashboard-error-toast {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
color: #fff;
font-size: var(--ds-type-small);
display: flex;
align-items: center;
gap: 0.75rem;
z-index: 1060;
animation: slideUpFadeIn 0.2s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.dashboard-undo-toast {
background: var(--gray-800, #1f2937);
}
.dashboard-error-toast {
background: var(--danger, #dc3545);
}
/* Mobile: position toasts above bottom nav */
@media (max-width: 767.98px) {
.dashboard-undo-toast,
.dashboard-error-toast {
bottom: calc(var(--mobile-nav-height, 3.5rem) + 1rem);
left: 1rem;
right: 1rem;
transform: none;
}
}
@keyframes slideUpFadeIn {
from { opacity: 0; transform: translateX(-50%) translateY(1rem); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===== Central Toast Host (EH-H2) ===== */
/* Fixed-position container that stacks toasts in the top-right corner.
Uses --ds-z-toast (1080) so toasts float above modals (1050) and
slide panels. pointer-events:none on the host so the transparent area
never blocks clicks; re-enabled per-toast so close buttons are clickable. */
.toast-host {
position: fixed;
top: var(--ds-space-6);
right: var(--ds-space-6);
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
z-index: var(--ds-z-toast);
max-width: 400px;
pointer-events: none;
}
/* Each toast reuses .ds-alert + .ds-alert-{level} for colour tokens;
.toast adds animation, shadow, and pointer-events restoration. */
.toast-host .toast {
pointer-events: auto;
animation: toastSlideIn var(--ds-duration-normal) var(--ds-ease-out);
box-shadow: var(--ds-shadow-lg);
}
/* Close (×) button — inherits alert text colour, visible on hover/focus */
.toast-close {
flex-shrink: 0;
align-self: flex-start;
background: none;
border: none;
cursor: pointer;
padding: 0 0 0 var(--ds-space-2);
opacity: 0.6;
line-height: 1;
font-size: var(--ds-type-body);
color: inherit;
margin-left: auto;
transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
}
.toast-close:hover,
.toast-close:focus-visible {
opacity: 1;
}
@keyframes toastSlideIn {
from { opacity: 0; transform: translateX(var(--ds-space-4)); }
to { opacity: 1; transform: translateX(0); }
}
/* Mobile: anchor above the bottom navigation bar, full width */
@media (max-width: 767.98px) {
.toast-host {
top: auto;
bottom: calc(var(--mobile-nav-height, 3.5rem) + var(--ds-space-4));
right: var(--ds-space-4);
left: var(--ds-space-4);
max-width: none;
}
}
/* Widget highlight after adding */
.widget-highlight .card {
animation: widgetPulse 1.5s ease;
}
@keyframes widgetPulse {
0% { box-shadow: 0 0 0 0 var(--primary-subtle, rgba(59, 130, 246, 0.4)); }
30% { box-shadow: 0 0 0 6px var(--primary-subtle, rgba(59, 130, 246, 0.25)); }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* Chart canvas sizing (Chart.js needs explicit height) */
.chart-canvas {
width: 100% !important;
height: 200px !important;
}
.chart-canvas-sm {
width: 100% !important;
height: 180px !important;
}
/* ===== Contact Identity Header (redesign proposal) ===== */
.contact-identity-header {
background: var(--bg-primary, #fff);
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 0.5rem;
padding: 0.5rem;
margin-top: 0.75rem;
margin-bottom: 1rem;
}
.contact-identity-avatar {
position: relative;
width: 96px;
height: 96px;
flex-shrink: 0;
}
.contact-identity-avatar img {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border-color, #e5e7eb);
}
.contact-identity-initials {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--primary-subtle, #eff6ff);
color: var(--primary, #be7b72);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-h2);
font-weight: 600;
border: 2px solid var(--border-color, #e5e7eb);
}
.contact-identity-avatar-upload {
position: absolute;
bottom: -2px;
right: -2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--primary, #be7b72);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-meta);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease;
border: 2px solid #fff;
}
.contact-identity-avatar:hover .contact-identity-avatar-upload {
opacity: 1;
}
.contact-identity-avatar-remove {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--danger, #dc3545);
color: #fff;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ds-type-meta);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease;
padding: 0;
line-height: 1;
}
.contact-identity-avatar:hover .contact-identity-avatar-remove {
opacity: 1;
}
/* Profile page: larger avatar */
.profile-identity-avatar {
width: 128px;
height: 128px;
}
.profile-identity-avatar img {
width: 128px;
height: 128px;
}
.profile-identity-avatar .contact-identity-initials {
width: 128px;
height: 128px;
font-size: 2.5rem;
}
.profile-identity-avatar .contact-identity-avatar-upload {
width: 30px;
height: 30px;
font-size: var(--ds-type-small);
}
.profile-identity-avatar .contact-identity-avatar-remove {
width: 26px;
height: 26px;
font-size: var(--ds-type-meta);
}
/* ===== FEAT-052 P2: Drag & Drop ===== */
/* Drag handle */
.widget-drag-handle {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
color: var(--text-muted);
cursor: grab;
flex-shrink: 0;
opacity: 0.5;
transition: opacity 0.15s ease;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.widget-drag-handle:hover {
opacity: 1;
color: var(--text-primary);
}
.widget-drag-handle:active {
cursor: grabbing;
}
/* Drag ghost (cloned element, follows cursor) */
.widget-drag-ghost {
position: fixed;
z-index: 1100;
opacity: 0.9;
transform: scale(1.02);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
pointer-events: none;
transition: none;
}
/* Original widget while being dragged */
.widget-dragging {
opacity: 0.3;
}
/* Grid state during drag */
.dashboard-grid-dragging {
user-select: none;
-webkit-user-select: none;
}
/* Displaced widgets shift smoothly during drag */
.widget-displacing {
transition: transform 0.2s ease;
}
/* Drop zone placeholder */
.widget-drop-zone {
border: 2px dashed var(--primary, #be7b72);
border-radius: 0.5rem;
min-height: 80px;
background: var(--primary-subtle, rgba(59, 130, 246, 0.05));
animation: dropZonePulse 1s ease infinite;
grid-column: span 1;
}
.widget-drop-zone-2col {
grid-column: span 2;
}
@keyframes dropZonePulse {
0%, 100% { background: var(--primary-subtle, rgba(59, 130, 246, 0.05)); }
50% { background: rgba(59, 130, 246, 0.1); }
}
/* ============================================================
FEAT-057 · Import History
============================================================ */
.cursor-pointer { cursor: pointer; }
.import-source-badge {
font-size: var(--ds-type-meta);
font-weight: 600;
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.import-source-csv { background: var(--ds-primary-100, #fde4cd); color: var(--ds-primary-700, #9a5e56); }
.import-source-messerli { background: var(--ds-warning-light, #f7f0d6); color: var(--ds-warning-dark, #7d5a1c); }
.import-source-dynamics-365 { background: #e0e7ff; color: #3730a3; }
.import-source-exchange { background: var(--ds-success-100, #dcfce7); color: var(--ds-success-700, #15803d); }
.import-source-other { background: var(--ds-neutral-200, #e5e7eb); color: var(--ds-neutral-700, #374151); }
.import-source-info {
font-size: var(--ds-type-meta);
padding: 0.25rem 0.5rem;
border-radius: 4px;
background: var(--ds-neutral-100, #f3f4f6);
color: var(--ds-neutral-600, #4b5563);
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
/* ============================================================
Import Wizard · Configure step (/contacts/import)
============================================================ */
/* Step number pill for sequential decisions (Detection → Strategy).
Signals "these two belong together" by numbering them 1 and 2.
Lives inside the card header, next to the icon + title. */
.ds-step-pill {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ds-primary-100, #ede9fe);
color: var(--ds-primary-700, #be7b72);
font-size: var(--ds-type-meta);
font-weight: 700;
font-variant-numeric: tabular-nums;
margin-right: 0.625rem;
flex-shrink: 0;
}
/* Import identity card — the metadata column (Source + Tag).
White background + thin border + a 3px primary accent bar on the left
visually separates "descriptive metadata" from "prescriptive decisions"
without introducing a new card primitive. */
.ds-import-identity {
background: #ffffff !important;
border: 1px solid var(--ds-neutral-200, #e5e7eb) !important;
position: relative;
overflow: hidden;
}
.ds-import-identity::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--ds-primary-600);
}
.ds-import-identity .card-body {
padding-left: 1.375rem; /* account for the accent bar so content doesn't collide */
}
/* Small-caps microtype for the field labels inside the identity card.
Tighter, more "metadata-ish" than the default form-label. */
.ds-import-identity-label {
font-size: var(--ds-type-meta);
letter-spacing: 0.06em;
margin-bottom: 0.375rem;
}
/* ===== FEAT-060: Manual Activity History ===== */
/* Card body: constrain height so the History section doesn't push
everything below it off-screen when many entries exist. Scrolls
internally. ~300px ≈ 4–5 entries visible before scrolling. */
.feat060-card-body {
max-height: 300px;
overflow-y: auto;
}
/* Type icon column */
.feat060-type-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* Subject truncation */
.feat060-subject {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Inline preview (expanded) — full content, no truncation. Preserves
user-typed line breaks via pre-wrap, breaks long URLs / words. */
.feat060-preview {
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.5;
}
/* Detail / chevron buttons — tap-friendly */
.feat060-detail-btn,
.feat060-chevron-btn {
min-width: 28px;
min-height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ds-radius-md, 6px);
transition: background 0.15s ease;
}
.feat060-detail-btn:hover,
.feat060-chevron-btn:hover {
background: var(--ds-neutral-100, #f0f0f0);
}
/* Disabled-by-admin info icon */
.feat060-disabled-icon {
cursor: help;
font-size: var(--ds-type-small);
}
/* Detail modal: preserve line breaks in description */
.feat060-detail-description {
white-space: pre-wrap;
word-break: break-word;
line-height: 1.6;
}
/* Mobile: larger touch targets + layout polish */
@media (max-width: 767.98px) {
.feat060-detail-btn,
.feat060-chevron-btn {
min-width: 44px;
min-height: 44px;
}
/* Shrink textarea from rows=4 to ~3 rows on narrow screens
(spec §Mobile: save vertical space) */
.modal .feat060-form-description {
max-height: 4.5rem;
}
/* Author/date line: wrap gracefully on very narrow screens */
.feat060-meta-line {
flex-wrap: wrap;
gap: 0.25rem !important;
}
/* "Show More" button: full-width on mobile for easy tapping */
.feat060-show-more {
width: 100%;
}
}
/* ==========================================================================
FEAT-064 v2 — IDENTITY OVERRIDE LAYER
--------------------------------------------------------------------------
Single source of truth for control height, padding, font-size, radius.
Overrides BOTH Bootstrap (.btn, .form-control, .form-select, .input-group*)
AND the parallel design-system classes (.ds-btn, .ds-input, .ds-select).
Net effect: every textbox / select / textarea / button on every page
renders at exactly one of three canonical heights (36 / 28 / 44 px),
regardless of which class system the markup uses.
Placed last in the file so source-order beats earlier same-specificity rules.
========================================================================== */
:root {
--ds-control-h: 36px; /* default textbox, select, button */
--ds-control-h-sm: 28px; /* dense toolbars, table actions, badges */
--ds-control-h-lg: 44px; /* primary CTAs, hero search */
--ds-control-px: 12px;
--ds-control-px-sm: 8px;
--ds-control-px-lg: 16px;
--ds-control-radius: 6px;
--ds-control-radius-sm: 4px;
--ds-control-radius-lg: 8px;
/* Derived from the canonical type scale rather than repeating the numbers, so a
control and the text around it can no longer drift apart. Both already resolved to
the same values — stating the relationship keeps it that way. --ds-control-fs-lg
has no role in the six-step scale and stays literal. */
--ds-control-fs: var(--ds-type-body); /* 14px */
--ds-control-fs-sm: var(--ds-type-small); /* 13px */
--ds-control-fs-lg: 15px;
--ds-control-border: 1px solid var(--ds-neutral-300);
--ds-control-focus-ring: 0 0 0 3px rgba(124, 77, 255, 0.18);
}
/* --- Buttons: .btn + .ds-btn unified ------------------------------------ */
.btn,
.ds-btn {
box-sizing: border-box;
height: var(--ds-control-h);
padding: 0 var(--ds-control-px);
font-family: var(--ds-font-sans);
font-size: var(--ds-control-fs);
font-weight: 500;
line-height: calc(var(--ds-control-h) - 2px);
border-radius: var(--ds-control-radius);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-2);
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
transition: background-color var(--ds-duration-fast) var(--ds-ease-default),
border-color var(--ds-duration-fast) var(--ds-ease-default),
color var(--ds-duration-fast) var(--ds-ease-default);
}
.btn-sm,
.ds-btn-sm,
.btn-group-sm > .btn {
height: var(--ds-control-h-sm);
padding: 0 var(--ds-control-px-sm);
font-size: var(--ds-control-fs-sm);
line-height: calc(var(--ds-control-h-sm) - 2px);
border-radius: var(--ds-control-radius-sm);
}
.btn-lg,
.ds-btn-lg,
.btn-group-lg > .btn {
height: var(--ds-control-h-lg);
padding: 0 var(--ds-control-px-lg);
font-size: var(--ds-control-fs-lg);
line-height: calc(var(--ds-control-h-lg) - 2px);
border-radius: var(--ds-control-radius-lg);
}
/* Icon-only buttons: square footprint at the canonical heights */
.btn-icon,
.ds-btn-icon {
width: var(--ds-control-h);
padding: 0;
aspect-ratio: 1;
}
.btn-icon.btn-sm,
.ds-btn-icon.ds-btn-sm { width: var(--ds-control-h-sm); }
.btn-icon.btn-lg,
.ds-btn-icon.ds-btn-lg { width: var(--ds-control-h-lg); }
/* Bootstrap dismiss button — aligned to the small height baseline */
.btn-close {
box-sizing: border-box;
height: var(--ds-control-h-sm);
width: var(--ds-control-h-sm);
padding: 0;
border-radius: var(--ds-control-radius-sm);
}
.btn-close-sm {
height: 20px;
width: 20px;
}
/* Visual flatness: kill translateY hover lift on .ds-btn-primary etc. */
.btn:hover:not(:disabled),
.ds-btn:hover:not(:disabled),
.btn:active:not(:disabled),
.ds-btn:active:not(:disabled) {
transform: none;
}
/* --- Inputs / Selects / Textareas: .form-control + .ds-input unified --- */
.form-control,
.ds-input,
.form-select,
.ds-select {
box-sizing: border-box;
height: var(--ds-control-h);
min-height: var(--ds-control-h);
padding: 0 var(--ds-control-px);
font-family: var(--ds-font-sans);
font-size: var(--ds-control-fs);
font-weight: 400;
line-height: calc(var(--ds-control-h) - 2px);
color: var(--ds-neutral-900);
background-color: var(--ds-neutral-0);
border: var(--ds-control-border);
border-radius: var(--ds-control-radius);
transition: border-color var(--ds-duration-fast) var(--ds-ease-default),
box-shadow var(--ds-duration-fast) var(--ds-ease-default);
}
/* .form-select keeps Bootstrap's chevron SVG; we just align padding to host it */
.form-select,
.ds-select {
padding-right: calc(var(--ds-control-px) + 24px);
background-position: right var(--ds-control-px) center;
}
/* Small variant */
.form-control-sm,
.form-select-sm,
.ds-input-sm,
.ds-select-sm {
height: var(--ds-control-h-sm);
min-height: var(--ds-control-h-sm);
padding: 0 var(--ds-control-px-sm);
font-size: var(--ds-control-fs-sm);
line-height: calc(var(--ds-control-h-sm) - 2px);
border-radius: var(--ds-control-radius-sm);
}
.form-select-sm,
.ds-select-sm {
padding-right: calc(var(--ds-control-px-sm) + 20px);
}
/* Large variant */
.form-control-lg,
.form-select-lg,
.ds-input-lg,
.ds-select-lg {
height: var(--ds-control-h-lg);
min-height: var(--ds-control-h-lg);
padding: 0 var(--ds-control-px-lg);
font-size: var(--ds-control-fs-lg);
line-height: calc(var(--ds-control-h-lg) - 2px);
border-radius: var(--ds-control-radius-lg);
}
/* Textareas: keep min-height (so they can grow), restore 1.5 line-height */
textarea.form-control,
textarea.ds-input,
.ds-textarea {
height: auto;
min-height: calc(var(--ds-control-h) * 2);
padding: 8px var(--ds-control-px);
line-height: 1.5;
}
textarea.form-control-sm,
textarea.ds-input-sm,
.ds-textarea-sm {
min-height: calc(var(--ds-control-h-sm) * 2);
padding: 6px var(--ds-control-px-sm);
}
/* Focus state — one ring for all control types */
.form-control:focus,
.form-select:focus,
.ds-input:focus,
.ds-select:focus {
outline: none;
border-color: var(--ds-primary-500);
box-shadow: var(--ds-control-focus-ring);
}
/* Placeholder color consistent across both systems */
.form-control::placeholder,
.ds-input::placeholder,
.form-select::placeholder,
.ds-select::placeholder {
color: var(--ds-neutral-400);
}
/* --- Input groups: icon + input + button on one baseline --------------- */
.input-group {
align-items: stretch;
flex-wrap: nowrap;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn,
.input-group > .input-group-text {
height: var(--ds-control-h);
}
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .btn,
.input-group-sm > .input-group-text {
height: var(--ds-control-h-sm);
padding: 0 var(--ds-control-px-sm);
font-size: var(--ds-control-fs-sm);
line-height: calc(var(--ds-control-h-sm) - 2px);
}
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .btn,
.input-group-lg > .input-group-text {
height: var(--ds-control-h-lg);
padding: 0 var(--ds-control-px-lg);
font-size: var(--ds-control-fs-lg);
line-height: calc(var(--ds-control-h-lg) - 2px);
}
.input-group-text {
box-sizing: border-box;
height: var(--ds-control-h);
padding: 0 var(--ds-control-px);
font-size: var(--ds-control-fs);
background-color: var(--ds-neutral-50);
border: var(--ds-control-border);
border-radius: var(--ds-control-radius);
color: var(--ds-neutral-600);
display: inline-flex;
align-items: center;
line-height: 1;
}
/* --- Labels: shared baseline ------------------------------------------- */
.form-label,
.ds-label {
display: block;
margin-bottom: 4px;
font-family: var(--ds-font-sans);
font-size: var(--ds-type-small);
font-weight: 500;
color: var(--ds-neutral-700);
line-height: 1.4;
}
/* --- Utility classes used by Batch 2 cleanup --------------------------- */
/* Modal overlay backdrop — replaces inline style="background: rgba(0,0,0,0.5);"
patterns that were copy-pasted across import/duplicate/email modals. */
.ds-modal-overlay {
background-color: rgba(15, 23, 42, 0.45);
}
/* 80×80 success-check circle — used by setup completion + import results.
Replaces inline style="width: 80px; height: 80px; background-color: rgba(16,124,16,0.1);" */
.ds-circle-success {
width: 80px;
height: 80px;
background-color: var(--ds-success-light);
color: var(--ds-success);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 60×60 density variant — used by the import-results step where the surrounding
"Import Completed Successfully" message already carries the celebratory weight
and the full 80px circle was eating vertical space on 1080×1920 portrait. */
.ds-circle-success-sm {
width: 60px;
height: 60px;
}
/* =====================================================================
WIZARD SHELL — vertical-fill layout (B-217 follow-up)
User principle: 'wir müssen immer 100% space nutzen, egal welche
auflösung, solange genug platz vorhanden ist.' Without this, the
wizard card ends at content-height and the Next/Back buttons hang
mid-viewport on tall screens (e.g. 1080×1920 portrait). The shell
stretches to fill the article area; the main card grows to absorb
leftover height; card-footer sits at the actual viewport bottom.
Shape:
… header + stepper card (natural height) …
← flex:1 absorbs slack
The 1.1rem subtracted from 100vh matches article.content's
padding-top so the shell ends flush with the viewport bottom.
===================================================================== */
.ds-wizard-shell {
display: flex;
flex-direction: column;
min-height: calc(100vh - 1.1rem);
}
.ds-wizard-shell > .ds-wizard-main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.ds-wizard-shell > .ds-wizard-main > .card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
/* CRITICAL for overflow-y to actually scroll inside a flex column:
without min-height: 0 the flex item grows to fit content height and
overflow never engages. Same fix is needed on every flex-child along
the chain down to the .ds-wizard-scrollarea. */
min-height: 0;
}
/* Marker for an intermediate card (e.g. the mapping-table card) that lives
inside .card-body and itself wraps a .ds-wizard-scrollarea. Without this,
the scrollarea's flex:1 has no flex parent to push against and the table
collapses to its content height — defeating the whole vertical-fill. */
.ds-wizard-grow {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Inside a wizard card-body that's grown to fill viewport slack, the
in-step scroll containers (mapping table, preview table) should
absorb the leftover space rather than stay at a hardcoded 400-450px
max-height. Marker class on the .table-responsive wrapper. */
.ds-wizard-scrollarea {
flex: 1 1 auto;
overflow-y: auto;
/* Floor — on viewports too short to give meaningful slack, fall
back to the original behaviour so the table is still usable. */
min-height: 240px;
}
/* Setup wizard task list row (moved out of CompletionStep.razor