/* ============================================================
 * 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-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --ds-font-display: var(--ds-font-sans);   /* FEAT-065: Inter only — Plus Jakarta Sans dropped */

    /* Font Sizes - Fluid scale */
    --ds-text-xs: clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);
    --ds-text-sm: clamp(0.8125rem, 0.775rem + 0.15vw, 0.875rem);
    --ds-text-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
    --ds-text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
    --ds-text-xl: clamp(1.1875rem, 1.1rem + 0.35vw, 1.25rem);
    --ds-text-2xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);
    --ds-text-3xl: clamp(1.625rem, 1.4rem + 0.9vw, 1.875rem);
    --ds-text-4xl: clamp(2rem, 1.7rem + 1.2vw, 2.25rem);
    --ds-text-5xl: clamp(2.5rem, 2rem + 2vw, 3rem);

    /* 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 */
.ds-h1 { font-size: var(--ds-text-5xl); }
.ds-h2 { font-size: var(--ds-text-4xl); }
.ds-h3 { font-size: var(--ds-text-3xl); }
.ds-h4 { font-size: var(--ds-text-2xl); }
.ds-h5 { font-size: var(--ds-text-xl); }
.ds-h6 { font-size: var(--ds-text-lg); }

/* ===========================================
   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);
}

/* 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: 10px; }
.ds-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.ds-avatar-md { width: 40px; height: 40px; font-size: 14px; }
.ds-avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.ds-avatar-xl { width: 64px; height: 64px; font-size: 20px; }
.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: 0.875rem;
    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: 0.65rem;
    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: 1.75rem;
    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);
}

.compact-form .form-row {
    display: grid;
    grid-template-columns: 122px 1fr;
    align-items: center;
    gap: var(--ds-space-2);
}

.compact-form .form-row label {
    font-size: 0.85rem;
    color: var(--ds-neutral-500);
    text-align: right;
    padding-right: var(--ds-space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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 <input class="form-control"> inside
      <div class="input-group input-group-sm">. 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 <div class="d-flex align-items-center"> 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);
}
/* 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
   <div class="d-flex align-items-center gap-1">). 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);
}

/* 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);
}

/* 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: 0.8125rem;
    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 <input class="form-control"> 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: 0.875rem;
    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: 0.95rem;
}

.page-header .text-muted {
    color: var(--ds-neutral-500) !important;
}

/* Optional eyebrow above the title — pages opt in by inserting
   <span class="page-header-eyebrow">…</span> before the h4 in their header. */
.page-header-eyebrow {
    display: block;
    font-family: var(--ds-font-mono);
    font-size: 0.6875rem;
    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: 0.625rem; }
.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar-md { width: 40px; height: 40px; font-size: 0.875rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
.avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; }
.avatar-2xl { width: 80px; height: 80px; font-size: 1.5rem; }

/* 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: 0.8125rem;
    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: 0.75rem;
    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: 1.75rem;
    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: 1.75rem;
    font-weight: 700;
    color: var(--ds-neutral-800);
}

.metric-card .metric-label {
    font-size: 0.75rem;
    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: 0.7rem;
    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: 0.875rem;
    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: 1rem;
    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: 0.8125rem;
    }
}

/* 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: 1.125rem;
    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: 0.75rem;
    color: var(--ds-neutral-400);
    white-space: nowrap;
}

.activity-user {
    font-size: 0.875rem;
    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: 0.75rem;
    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: 0.75rem;
    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: 1.25rem;
    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: 14px;
}

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: 1.25rem;
    font-weight: 600;
    color: white;
}

.tagline {
    color: var(--ds-primary-300);
    font-size: 0.875rem;
    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: 0.75rem;
    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: 1.1rem;
    width: 1.25rem;
    text-align: center;
}

.nav-text {
    font-size: 0.9375rem;
}

/* 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: 1.125rem;
}

.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: 0.875rem;
    flex-shrink: 0;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-name {
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    color: var(--ds-neutral-400);
    font-size: 0.75rem;
}

/* 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: 0.65rem;
    }
    .ds-wizard-stepper .rounded-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem;
    }
    .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: 0.85rem;
    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: 0.8rem;
    }
    .step-label {
        font-size: 0.7rem;
    }
}

/* 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;
    font-size: 0.8125rem;
    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: 0.875rem;
}

/* 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: 0.75rem;
    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: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* ===== FEAT-009: Search Match Highlighting ===== */
.search-matches {
    font-size: 0.85rem;
    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;
}

.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: 0.875rem;
    padding: 0.1rem 0.25rem;
}

.badge-remove {
    font-size: 0.5rem;
    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;
    font-size: 0.875rem;
    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: 0.8125rem;
    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: 0.75rem;
    }
}

/* ===========================================
   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: 0.65rem;
    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: 1.15rem;
    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: 1.1rem;
    font-weight: 700;
    color: var(--ds-neutral-900, #1a1a2e);
    margin-bottom: 0.5rem;
}

.mobile-placeholder-text {
    font-size: 0.85rem;
    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: 1.5rem;
    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: 1.2rem;
    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: 0.9rem;
    flex-shrink: 0;
}

.m-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 10px;
    font-size: 0.9rem;
    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: 0.75rem;
    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: 0.7rem;
    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: 0.85rem;
    color: #fff;
    flex-shrink: 0;
}

.m-contact-info {
    flex: 1;
    min-width: 0;
}

.m-contact-name {
    font-weight: 600;
    font-size: 0.9rem;
    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: 0.78rem;
    color: var(--ds-neutral-500, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-chevron {
    color: var(--ds-neutral-300, #cbd5e1);
    font-size: 0.75rem;
    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: 0.85rem;
}

.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: 1.3rem;
    color: var(--ds-neutral-400, #94a3b8);
    margin-bottom: 1rem;
}

.m-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ds-neutral-900, #1a1a2e);
    margin: 0 0 0.25rem;
}

.m-empty-text {
    font-size: 0.8rem;
    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: 0.8rem;
    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: 0.85rem;
    color: #6b2825;
}

.m-error-card i {
    font-size: 1rem;
    flex-shrink: 0;
}

.m-retry-btn {
    margin-left: auto;
    border: none;
    background: none;
    color: #6b2825;
    font-weight: 600;
    font-size: 0.8rem;
    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: 0.9rem;
    color: var(--ds-primary, #be7b72);
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.m-detail-back i {
    font-size: 1rem;
}

/* 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: 1.5rem;
    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: 1.2rem;
    font-weight: 700;
    text-align: center;
    color: var(--ds-neutral-900, #1a1a2e);
    margin-top: 4px;
}

.m-detail-subtitle {
    font-size: 0.85rem;
    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: 1.1rem;
    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: 0.65rem;
    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: 0.9rem;
    color: var(--ds-neutral-400, #94a3b8);
    flex-shrink: 0;
}

.m-info-content {
    flex: 1;
    min-width: 0;
}

.m-info-label {
    font-size: 0.65rem;
    color: var(--ds-neutral-400, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.m-info-value {
    font-size: 0.85rem;
    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: 1.25rem;
}
.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: 0.8rem;
    color: var(--ds-neutral-500, #64748b);
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.m-notes-content {
    font-size: 0.85rem;
    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: 0.8rem;
    color: var(--ds-neutral-600, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-activity-time {
    font-size: 0.7rem;
    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: 0.8rem;
    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);
}

.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: 1.2rem;
    flex-shrink: 0;
}

.call-log-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ds-neutral-900, #1a1a2e);
}

.call-log-phone {
    font-size: 0.9rem;
    color: var(--ds-primary, #be7b72);
    font-weight: 500;
}

.call-log-contact {
    font-size: 0.8rem;
    color: var(--ds-neutral-500, #64748b);
}

.call-log-prompt {
    font-size: 0.85rem;
    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: 0.85rem;
    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: 0.85rem;
    color: #16a34a;
}

.m-signout-btn {
    width: 100%;
    background: #fef2f2;
    color: #6b2825;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    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: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    -webkit-tap-highlight-color: transparent;
}

.m-form-title {
    font-size: 1.05rem;
    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: 0.85rem;
    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: 0.7rem;
    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: 0.85rem;
    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: 1rem;
    font-weight: 700;
    color: var(--ds-neutral-900, #1a1a2e);
    margin-bottom: 0.5rem;
}

.m-dialog-text {
    font-size: 0.85rem;
    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: 0.85rem;
    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: 0.8rem;
    cursor: default;
}

.swiss-address-main {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ds-neutral-900, #1a1a2e);
}

.swiss-address-detail {
    font-size: 0.75rem;
    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: 1.1rem;
    font-weight: 700;
    color: var(--ds-neutral-900, #1a1a2e);
}

.db-stat-label {
    font-size: 0.7rem;
    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: 0.65rem;
    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: 0.75rem;
    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: 0.8rem;
    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: 0.75rem;
    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: 0.85rem;
    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: 0.85rem;
    color: var(--ds-neutral-900, #1a1a2e);
}

.suggestion-detail {
    font-size: 0.75rem;
    color: var(--ds-neutral-500, #64748b);
}

.suggestion-email {
    font-size: 0.75rem;
    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: 0.85rem;
    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: 0.85rem;
    color: var(--ds-neutral-900, #1a1a2e);
}

.discovery-email {
    font-size: 0.75rem;
    color: var(--ds-neutral-500, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discovery-count {
    font-size: 0.7rem;
}

.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: 0.8rem;
    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: 0.75rem;
    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: 0.85rem;
}

.duplicate-fields .field-label {
    flex-shrink: 0;
    width: 100px;
    color: var(--ds-neutral-500, #64748b);
    font-size: 0.75rem;
    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: 0.8rem;
    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: 0.7rem;
    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: 0.75rem;
    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: 0.85rem;
    vertical-align: middle;
}

/* ---- FEAT-032: Exchange Contact Import ---- */
.exc-import-preview-table .table {
    font-size: 0.875rem;
}

.exc-import-preview-table .table thead th {
    border-bottom: 2px solid var(--ds-neutral-200, #e2e8f0);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.exc-import-category-badge {
    font-size: 0.75rem;
    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: 0.75rem;
    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: 1rem;
    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: 1.75rem;
    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: 0.875rem;
    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: 1rem;
    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: 1.5rem;
    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: 0.6rem;
    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: 0.5rem;
    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: 0.8rem;
}
.profile-identity-avatar .contact-identity-avatar-remove {
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
}

/* ===== 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: 0.75rem;
    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: 0.75rem;
    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: 0.75rem;
    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: 0.6875rem;
    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: 0.875rem;
}

/* 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;
    --ds-control-fs:       14px;
    --ds-control-fs-sm:    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: 13px;
    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: <div class="ds-wizard-shell">
            … header + stepper card (natural height) …
            <div class="card ds-wizard-main">
              <div class="card-body">      ← flex:1 absorbs slack
              <div class="card-footer">    ← anchors bottom of card
            </div>
          </div>

   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 <style> block) */
.setup-task {
    padding: 0.5rem 0;
}

/* M365 connection-test permissions table: one row per required Graph
   permission with grant state. Sits inside the test-result panel. */
.m365-permissions-table {
    font-size: 13px;
}
.m365-permissions-table thead th {
    background: transparent;
    border-bottom: 1px solid var(--ds-neutral-200);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 8px;
}
.m365-permissions-table td {
    padding: 8px;
    vertical-align: middle;
    border-top: 1px solid var(--ds-neutral-100);
}
.m365-permissions-table code {
    background: var(--ds-neutral-50);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--ds-neutral-900);
}
.m365-permissions-table .badge {
    font-weight: 500;
}

/* End of FEAT-064 v2 identity layer ------------------------------------- */


/* =========================================================================
   LOGIN — Two-Column Split Layout (2026-06-07, FEAT-064)
   Replaces single-card-on-violet-gradient with a Clockopus-style split:
   left = cool-slate brand panel with Solvia mark + tagline, right = clean
   form on near-white surface. Old .login-container / .login-card classes
   remain intact below for ForgotPassword / ResetPassword / SetupWizard,
   which still use the legacy treatment.
   ======================================================================= */

.login-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

@media (max-width: 900px) {
    .login-page { grid-template-columns: 1fr; }
}

/* ----- LEFT: Brand panel -------------------------------------------- */
.login-brand {
    position: relative;
    background: var(--ds-neutral-900);
    color: white;
    padding: 4rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.login-brand::before {
    /* Subtle dot pattern overlay — gives the dark surface texture */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
    pointer-events: none;
}
.login-brand::after {
    /* Soft Solvia-coral radial glow at top-left, very low opacity — brand hint */
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(190, 123, 114, 0.13) 0%, transparent 60%);
    pointer-events: none;
}

.login-brand-content {
    position: relative;
    z-index: 1;
    max-width: 420px;
}

.login-brand-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 1.75rem;
    display: block;
}

.login-brand-title {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 0.85rem;
    color: white;
}

.login-brand-tagline {
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(241, 245, 249, 0.7);
    margin: 0;
    max-width: 360px;
}

.login-brand-footer {
    position: absolute;
    bottom: 2.5rem;
    left: 5rem;
    right: 5rem;
    z-index: 1;
    font-size: 0.75rem;
    color: var(--ds-neutral-500);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.login-brand-footer a {
    color: var(--ds-neutral-400);
    text-decoration: none;
    transition: color 0.15s;
}
.login-brand-footer a:hover { color: var(--ds-neutral-200); }

@media (max-width: 900px) {
    .login-brand {
        padding: 2.5rem 1.75rem;
        min-height: auto;
    }
    .login-brand-footer {
        position: static;
        margin-top: 1.5rem;
    }
}

/* ----- RIGHT: Form panel -------------------------------------------- */
.login-form-side {
    background: var(--ds-neutral-50);
    padding: 4rem 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.login-form-card {
    width: 100%;
    max-width: 420px;
}

.login-form-header { margin-bottom: 2rem; }
.login-form-title {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 0.4rem;
    color: var(--ds-neutral-900);
}
.login-form-subtitle {
    font-size: 0.9375rem;
    color: var(--ds-neutral-500);
    margin: 0;
}

.login-field { margin-bottom: 1.25rem; }
.login-field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-neutral-700);
    margin-bottom: 0.4rem;
}
.login-field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}
.login-field-label-row .login-field-label { margin-bottom: 0; }

.login-field-link {
    font-size: 0.8125rem;
    color: var(--ds-primary-600);
    text-decoration: none;
    font-weight: 500;
}
.login-field-link:hover { text-decoration: underline; }

.login-input-wrap { position: relative; }

.login-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 42px;
    background: white;
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font-sans);
    font-size: 0.9375rem;
    color: var(--ds-neutral-900);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.login-input::placeholder { color: var(--ds-neutral-400); }
.login-input:hover { border-color: var(--ds-neutral-300); }
.login-input:focus {
    outline: none;
    border-color: var(--ds-primary-500);
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.15);
    background: white;
}

.login-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-neutral-400);
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.15s;
}
.login-input:focus ~ .login-input-icon { color: var(--ds-primary-500); }

.login-validation {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    color: var(--ds-danger, #923d3a);
}

.login-submit {
    width: 100%;
    height: 46px;
    margin-top: 0.75rem;
    background: var(--ds-neutral-900);
    color: white;
    border: none;
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.15s, transform 0.05s;
}
.login-submit:hover:not(:disabled) { background: var(--ds-neutral-800); }
.login-submit:active:not(:disabled) { transform: translateY(1px); }
.login-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.login-submit i { font-size: 1rem; }

.login-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: var(--ds-radius-md);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    border-width: 1px;
    border-style: solid;
}
.login-alert--warning {
    background: #f7f0d6;
    color: #7d5a1c;
    border-color: #fde68a;
}
.login-alert--danger {
    background: #f7e9e8;
    color: #991b1b;
    border-color: #fecaca;
}

.login-form-footer {
    margin-top: 2rem;
    text-align: center;
    color: var(--ds-neutral-500);
    font-size: 0.75rem;
}
.login-form-version {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: var(--ds-neutral-400);
}

@media (max-width: 900px) {
    .login-form-side { padding: 2.5rem 1.75rem; }
}

/* End FEAT-064 login split ---------------------------------------------- */

/* ========================================================================
   /import-export Redesign (Phase 1, 2026-06-07) — landing cards through
   checkout modal. Reference visual: docs/design/demo-import-export-redesign.html
   ======================================================================== */

/* Landing cards (Import vs Export choice) — role-colored medallions (export=violet,
   import=teal accent), mono format tags, hover-lift + arrow-slide CTA. */
.landing-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 800px;
    margin: 3rem auto;
}
.landing-card {
    position: relative;
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-xl);
    padding: 1.875rem 1.75rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s var(--ds-ease-default),
                box-shadow 0.18s var(--ds-ease-default),
                border-color 0.18s var(--ds-ease-default);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
}
.landing-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(90% 120% at 100% 0, var(--ds-primary-50), transparent 60%);
    opacity: 0;
    transition: opacity 0.18s var(--ds-ease-default);
    pointer-events: none;
}
.landing-card > * { position: relative; z-index: 1; }
.landing-card:hover {
    transform: translateY(-3px);
    border-color: var(--ds-primary-200);
    box-shadow: var(--ds-shadow-lg);
}
.landing-card:hover::after { opacity: 1; }
.landing-card-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-primary-100);
    color: var(--ds-primary-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.125rem;
}
.landing-card--import .landing-card-icon {
    background: var(--ds-warning-light);
    color: var(--ds-warning-dark);
}
.landing-card h2 {
    font-family: var(--ds-font-display);
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: var(--ds-font-bold);
    color: var(--ds-neutral-900);
}
.landing-card p {
    margin: 0;
    color: var(--ds-neutral-500);
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: 34ch;
}
.landing-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 1rem 0 1.25rem;
}
.landing-card-tag {
    font-family: var(--ds-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ds-neutral-500);
    background: var(--ds-neutral-100);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-full);
    padding: 0.1875rem 0.5625rem;
}
.landing-card-footer {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.9rem;
    color: var(--ds-primary-600);
    font-weight: var(--ds-font-semibold);
}
.landing-card--import .landing-card-footer { color: var(--ds-warning-dark); }
.landing-card-footer i { transition: transform 0.18s var(--ds-ease-default); }
.landing-card:hover .landing-card-footer i { transform: translateX(4px); }
@media (max-width: 720px) {
    .landing-cards { grid-template-columns: 1fr; }
}

/* Back link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ds-neutral-600);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    transition: color 0.12s;
}
.back-link:hover { color: var(--ds-primary-700); }

/* Export empty state — soft-gradient dashed panel with floating medallion and a
   Filter → Curate → Export mini-flow. (Bare `.export-empty i` still serves the
   simpler "no results" state in ListResultsTable.) */
.export-empty {
    position: relative;
    text-align: center;
    padding: 2.875rem 2rem;
    background: linear-gradient(180deg, var(--ds-neutral-50), var(--ds-neutral-0));
    border: 1.5px dashed var(--ds-neutral-300);
    border-radius: var(--ds-radius-2xl);
    max-width: 600px;
    margin: 0 auto 2rem;
    overflow: hidden;
}
.export-empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 90% at 50% -10%, var(--ds-primary-50), transparent 60%);
    pointer-events: none;
}
.export-empty > * { position: relative; }
.export-empty i { font-size: 2.5rem; color: var(--ds-neutral-400); }
.export-empty h3 {
    font-family: var(--ds-font-display);
    margin: 0.85rem 0 0.5rem;
    font-size: 1.4rem;
    font-weight: var(--ds-font-bold);
    color: var(--ds-neutral-900);
}
.export-empty p { color: var(--ds-neutral-500); margin: 0 auto 1.375rem; max-width: 46ch; font-size: 0.9375rem; }

.export-empty-medal {
    width: 72px;
    height: 72px;
    border-radius: var(--ds-radius-2xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-primary-600);
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-primary-100);
    box-shadow: var(--ds-shadow-md);
    margin-bottom: 1.25rem;
}
.export-empty-medal i { font-size: 1.875rem; color: var(--ds-primary-600); }

.export-steps {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.625rem;
}
.export-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8rem;
    font-weight: var(--ds-font-medium);
    color: var(--ds-neutral-600);
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-full);
    padding: 0.375rem 0.8125rem;
}
.export-step i { font-size: 0.875rem; color: var(--ds-primary-500); }
.export-step-arrow { color: var(--ds-neutral-300); }
.export-step-arrow i { font-size: 0.75rem; color: var(--ds-neutral-300); }

/* Backup card (admin-only full backup affordance) — amber surface, white-tile
   medallion, mono ADMIN-ONLY badge, neutral outline CTA. */
.backup-card {
    margin-top: 2rem;
    background: var(--ds-warning-light);
    border: 1px solid var(--ds-warning);
    border-radius: var(--ds-radius-xl);
    padding: 1.125rem 1.375rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.backup-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-neutral-0);
    color: var(--ds-warning-dark);
    border: 1px solid var(--ds-warning);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1875rem;
    flex-shrink: 0;
}
.backup-card-body { flex: 1; }
.backup-card-body strong {
    display: block;
    color: var(--ds-neutral-900);
    font-weight: var(--ds-font-bold);
    margin-bottom: 0.2rem;
}
.backup-card-body span {
    font-size: 0.83rem;
    color: var(--ds-neutral-600);
}
.backup-card-badge {
    display: inline-block;
    font-family: var(--ds-font-mono);
    background: var(--ds-neutral-0);
    color: var(--ds-warning-dark);
    border: 1px solid var(--ds-warning);
    padding: 2px 8px;
    border-radius: var(--ds-radius-full);
    font-size: 0.59rem;
    font-weight: var(--ds-font-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* List sticky bar + list switcher + cart pill */
.list-sticky-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.list-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    padding: 0.4rem 0.75rem;
    box-shadow: var(--ds-shadow-sm);
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.list-switcher:hover { border-color: var(--ds-primary-200); box-shadow: var(--ds-shadow-md); }
.list-switcher-name { font-family: var(--ds-font-display); font-weight: var(--ds-font-bold); color: var(--ds-neutral-900); }
.list-switcher i { color: var(--ds-neutral-400); font-size: 0.75rem; }

.cart-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-primary-600));
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--ds-radius-full);
    font-family: var(--ds-font-sans);
    font-size: 0.875rem;
    font-weight: var(--ds-font-semibold);
    cursor: pointer;
    box-shadow: var(--ds-shadow-md);
    transition: box-shadow 0.12s, filter 0.12s;
}
.cart-pill:hover { filter: brightness(1.05); box-shadow: var(--ds-shadow-lg); }
.cart-pill .cart-count {
    background: rgba(255,255,255,0.25);
    padding: 0.1rem 0.5rem;
    border-radius: var(--ds-radius-full);
    font-family: var(--ds-font-mono);
    font-size: 0.75rem;
    font-weight: var(--ds-font-semibold);
}

/* Filter bar (search + dropdowns over results table) */
.filter-bar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.85rem;
    background: var(--ds-neutral-50);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    margin-bottom: 1rem;
}
.filter-input {
    flex: 1;
    min-width: 200px;
    height: 36px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--ds-neutral-300);
    border-radius: var(--ds-radius-md);
    background: white;
    font-size: 0.875rem;
    position: relative;
}
.filter-input-wrap { position: relative; flex: 1; min-width: 200px; }
.filter-input-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ds-neutral-400); }
.filter-select {
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--ds-neutral-300);
    border-radius: var(--ds-radius-md);
    background: white;
    font-size: 0.875rem;
    color: var(--ds-neutral-700);
    min-width: 140px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%2364748b' d='M.5 1h7L4 5.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Filter summary + add-all CTA */
.filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.25rem 0.85rem;
    font-size: 0.875rem;
    color: var(--ds-neutral-600);
}
.filter-summary strong { color: var(--ds-neutral-900); font-weight: 600; }
.btn-add-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ds-success);
    color: white;
    border: none;
    padding: 0.45rem 0.85rem;
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}
.btn-add-all:hover { background: #4f5d44; }

/* ===========================================
   FEAT-065 Advanced contact filter
   Chip-based filter builder: quick search + add-filter picker +
   active-filter chips + per-condition editor popover.
   =========================================== */
.advanced-filter {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    padding: var(--ds-space-4);
    background: var(--ds-neutral-50);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-xl);
    margin-bottom: var(--ds-space-4);
}
.advanced-filter__search { width: 100%; }

.advanced-filter__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
}
.advanced-filter__add { position: relative; }

.filter-add-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1-5);
    height: 32px;
    padding: 0 var(--ds-space-3-5);
    background: var(--ds-primary-50);
    border: 1px dashed var(--ds-primary-300);
    border-radius: var(--ds-radius-full);
    color: var(--ds-primary-600);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-semibold);
    cursor: pointer;
    transition: border-color var(--ds-duration-fast) var(--ds-ease-default),
                background var(--ds-duration-fast) var(--ds-ease-default);
}
.filter-add-btn:hover {
    border-color: var(--ds-primary-500);
    background: var(--ds-primary-100);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
    flex: 1 1 auto;
    min-width: 0;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-full);
    box-shadow: var(--ds-shadow-sm);
    padding: var(--ds-space-1) var(--ds-space-1-5) var(--ds-space-1) var(--ds-space-3);
    max-width: 100%;
}
.filter-chip__label {
    border: none;
    background: transparent;
    color: var(--ds-neutral-700);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.filter-chip__label:hover { color: var(--ds-neutral-900); }
.filter-chip__remove {
    border: none;
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-500);
    width: 18px;
    height: 18px;
    border-radius: var(--ds-radius-full);
    padding: 0;
    flex: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    line-height: 1;
    transition: background var(--ds-duration-fast) var(--ds-ease-default),
                color var(--ds-duration-fast) var(--ds-ease-default);
}
.filter-chip__remove:hover {
    background: var(--ds-danger-light);
    color: var(--ds-danger-dark);
}

.filter-clear-all {
    border: none;
    background: transparent;
    color: var(--ds-neutral-500);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    text-decoration: underline;
    cursor: pointer;
    padding: var(--ds-space-1) var(--ds-space-2);
    margin-left: auto;
}
.filter-clear-all:hover { color: var(--ds-neutral-800); }

.filter-count {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-600);
}
.filter-count__totals {
    font-family: var(--ds-font-mono);
    font-weight: var(--ds-font-semibold);
    color: var(--ds-neutral-800);
}
.filter-count__from { color: var(--ds-neutral-400); }
.filter-count__to { color: var(--ds-success); font-weight: var(--ds-font-bold); }

/* --- Field picker popover --- */
.filter-picker__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-dropdown);
    background: transparent;
}
.filter-picker {
    position: absolute;
    top: calc(100% + var(--ds-space-1-5));
    left: 0;
    z-index: var(--ds-z-popover);
    width: 280px;
    max-width: 90vw;
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow: hidden;
}
.filter-picker__search {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    border-bottom: 1px solid var(--ds-neutral-200);
    color: var(--ds-neutral-400);
}
.filter-picker__search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-800);
}
.filter-picker__list {
    overflow-y: auto;
    padding: var(--ds-space-1) 0;
}
.filter-picker__group { padding: var(--ds-space-1) 0; }
.filter-picker__group-title {
    padding: var(--ds-space-1) var(--ds-space-3);
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ds-tracking-wider);
    color: var(--ds-neutral-500);
    font-weight: var(--ds-font-semibold);
}
.filter-picker__item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: var(--ds-space-2) var(--ds-space-3);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-800);
    cursor: pointer;
}
.filter-picker__item:hover,
.filter-picker__item:focus-visible {
    background: var(--ds-primary-50);
    color: var(--ds-primary-700);
    outline: none;
}
.filter-picker__empty {
    padding: var(--ds-space-3);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-500);
    text-align: center;
}

/* --- Condition editor popover --- */
.filter-editor__overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-popover);
    background: rgba(15, 23, 42, 0.25);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh var(--ds-space-4) var(--ds-space-4);
}
.filter-editor-popover {
    width: 340px;
    max-width: 100%;
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xl);
    padding: var(--ds-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
}
.filter-editor-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--ds-text-base);
    font-weight: var(--ds-font-semibold);
    color: var(--ds-neutral-900);
    padding-bottom: var(--ds-space-2);
    border-bottom: 1px solid var(--ds-neutral-100);
}
.filter-editor-popover__close {
    border: none;
    background: transparent;
    color: var(--ds-neutral-500);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: var(--ds-space-1);
}
.filter-editor-popover__close:hover { color: var(--ds-neutral-800); }
.filter-editor-popover__footer {
    display: flex;
    justify-content: flex-end;
}

/* --- Condition editor controls --- */
.filter-editor {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2-5);
}
.filter-editor__input {
    width: 100%;
    height: 36px;
    padding: 0 var(--ds-space-3);
    border: 1px solid var(--ds-neutral-300);
    border-radius: var(--ds-radius-md);
    background: var(--ds-neutral-0);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-800);
}
.filter-editor__input:focus-visible {
    outline: none;
    border-color: var(--ds-primary-500);
    box-shadow: 0 0 0 3px var(--ds-primary-100);
}
.filter-editor__input--num { width: 100%; }
.filter-editor__row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}
.filter-editor__sep { color: var(--ds-neutral-400); }
.filter-editor__sub {
    flex: 0 0 auto;
    min-width: 44px;
    font-size: var(--ds-text-xs);
    color: var(--ds-neutral-500);
}
.filter-editor__choices {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1-5);
    max-height: 200px;
    overflow-y: auto;
}
.filter-editor__choice {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-800);
    cursor: pointer;
}
.filter-editor__empty {
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-500);
}
.filter-editor__segmented {
    display: inline-flex;
    border: 1px solid var(--ds-neutral-300);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}
.filter-editor__seg-option {
    position: relative;
    flex: 1;
    text-align: center;
    padding: var(--ds-space-1-5) var(--ds-space-3);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-700);
    cursor: pointer;
    border-right: 1px solid var(--ds-neutral-300);
}
.filter-editor__seg-option:last-child { border-right: none; }
.filter-editor__seg-option.is-active {
    background: var(--ds-primary-500);
    color: var(--ds-neutral-0);
}
.filter-editor__seg-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Results table (filter results / candidates view) */
.results-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}
.results-table th {
    background: var(--ds-neutral-50);
    text-align: left;
    padding: 0.6rem 0.85rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-neutral-500);
    border-bottom: 1px solid var(--ds-neutral-200);
    font-weight: 600;
}
.results-table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--ds-neutral-100);
    font-size: 0.875rem;
    color: var(--ds-neutral-800);
}
.results-table tr:last-child td { border-bottom: none; }
.results-table tr:hover td { background: var(--ds-primary-50); }
.results-table .col-checkbox { width: 28px; }
.results-table .col-action { width: 44px; text-align: right; }
.results-table input[type="checkbox"] { cursor: pointer; }

/* Avatar circle with initials (name cell). Violet by default; teal accent for
   company-type rows (no person name). */
.avatar-initials {
    width: 34px;
    height: 34px;
    border-radius: var(--ds-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 0.78rem;
    font-weight: var(--ds-font-bold);
    color: var(--ds-primary-700);
    background: var(--ds-primary-100);
}
.avatar-initials--company {
    color: var(--ds-warning-dark);
    background: var(--ds-warning-light);
}
.contact-name-cell__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.contact-name-cell__name { font-weight: var(--ds-font-semibold); color: var(--ds-neutral-900); }
.contact-name-cell__role { font-size: 0.72rem; color: var(--ds-neutral-400); }
.results-table__email { font-family: var(--ds-font-mono); font-size: 0.8rem; color: var(--ds-neutral-500); }

.row-add-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--ds-radius-full);
    border: 1px solid var(--ds-primary-200);
    background: var(--ds-primary-50);
    color: var(--ds-primary-600);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.row-add-btn:hover { background: var(--ds-primary-500); color: white; border-color: var(--ds-primary-500); }
.row-added-badge {
    width: 30px;
    height: 30px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-success-light);
    color: var(--ds-success-dark);
    border: 1px solid var(--ds-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
}

/* Tag chips (used in results + cart-item meta) */
.tag-chip {
    display: inline-block;
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 4px;
}
.tag-chip--customer { background: rgba(16, 185, 129, 0.10); color: var(--ds-success); }
.tag-chip--lead { background: rgba(124, 77, 255, 0.10); color: var(--ds-primary-700); }
.tag-chip--partner { background: rgba(245, 158, 11, 0.10); color: var(--ds-warning); }

/* Pagination bar (footer of results table) */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0.25rem 0;
    color: var(--ds-neutral-500);
    font-size: 0.8125rem;
}
.pagination-bar nav { display: inline-flex; gap: 0.25rem; }
.pagination-bar nav button {
    background: white;
    border: 1px solid var(--ds-neutral-200);
    color: var(--ds-neutral-700);
    width: 32px;
    height: 32px;
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    font-size: 0.8125rem;
}
.pagination-bar nav button.active { background: var(--ds-primary-600); color: white; border-color: var(--ds-primary-500); }

/* Cart panel (slide-out from right) */
.cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.40);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.20s;
    z-index: 80;
}
.cart-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    background: white;
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    z-index: 90;
    display: flex;
    flex-direction: column;
}
.cart-panel.open { transform: translateX(0); }
@media (max-width: 600px) {
    .cart-panel { width: 100%; }
}

.cart-panel-header {
    padding: 1.25rem 1.5rem 0.85rem;
    border-bottom: 1px solid var(--ds-neutral-200);
}
.cart-panel-header h3 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ds-neutral-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cart-close {
    background: transparent;
    border: none;
    color: var(--ds-neutral-500);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.cart-close:hover { color: var(--ds-neutral-900); }
.cart-panel-header .count {
    font-size: 0.8125rem;
    color: var(--ds-neutral-500);
}
.cart-panel-search {
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--ds-neutral-100);
}
.cart-panel-search input {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md);
    font-size: 0.8125rem;
    background: var(--ds-neutral-50);
}
.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}
.cart-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 1.5rem;
    border-bottom: 1px solid var(--ds-neutral-100);
}
.cart-item:hover { background: var(--ds-neutral-50); }
.cart-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--ds-primary-100);
    color: var(--ds-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-name {
    font-weight: 500;
    color: var(--ds-neutral-900);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-item-meta {
    font-size: 0.75rem;
    color: var(--ds-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-item-remove {
    width: 28px;
    height: 28px;
    border-radius: var(--ds-radius-md);
    border: none;
    background: transparent;
    color: var(--ds-neutral-400);
    cursor: pointer;
    font-size: 1rem;
}
.cart-item-remove:hover { background: var(--ds-danger-light); color: var(--ds-danger); }

.cart-panel-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ds-neutral-200);
    background: var(--ds-neutral-50);
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: space-between;
}

/* Buttons used by the new modal + cart panel.
   .btn-secondary / .btn-primary do not exist in the design system yet
   (only .btn, .btn-icon, .btn-teams, etc.) — defining them here for the
   redesign surface. */
.btn-secondary {
    background: white;
    color: var(--ds-neutral-700);
    border: 1px solid var(--ds-neutral-300);
    padding: 0.55rem 0.85rem;
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}
.btn-secondary:hover { background: var(--ds-neutral-100); }
.btn-primary {
    background: var(--ds-neutral-900);
    color: white;
    border: none;
    padding: 0.6rem 1.25rem;
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.12s;
}
.btn-primary:hover { background: var(--ds-neutral-800); }

/* Modal (checkout / confirm) */
.ie-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.50);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}
.ie-modal-backdrop.open { display: flex; }
.ie-modal {
    background: white;
    border-radius: var(--ds-radius-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.20);
}
.ie-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ds-neutral-200);
}
.ie-modal-header h2 {
    margin: 0 0 0.2rem;
    font-size: 1.1rem;
    color: var(--ds-neutral-900);
}
.ie-modal-header .meta { font-size: 0.8125rem; color: var(--ds-neutral-500); }
.ie-modal-body { padding: 1.25rem 1.5rem; }
.ie-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ds-neutral-200);
    background: var(--ds-neutral-50);
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* Format option (radio-card inside checkout modal) */
.format-option {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    margin-bottom: 0.6rem;
    transition: border-color 0.12s, background 0.12s;
}
.format-option:hover { border-color: var(--ds-neutral-400); }
.format-option.selected {
    border-color: var(--ds-primary-500);
    background: var(--ds-primary-50);
}
.format-option input[type="radio"] {
    margin-top: 4px;
    cursor: pointer;
    accent-color: var(--ds-primary-600);
}
.format-option-body { flex: 1; }
.format-option-body strong {
    display: block;
    color: var(--ds-neutral-900);
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.15rem;
}
.format-option-body span {
    color: var(--ds-neutral-600);
    font-size: 0.8125rem;
}

/* Preview block (inline data preview inside checkout modal).
   NOTE: a different `.preview-table` rule exists earlier in this file for
   the ExchangeContactImport sticky-header use-case (max-height: 350px,
   overflow-y: auto). That rule targets a block container; the rule below
   targets the actual <table> element — both can coexist on the page
   without visible conflict. */
.preview-block { margin-top: 1.25rem; }
/* Scroll container wrapping the preview table — handles horizontal overflow for wide
   column sets (e.g. 12-col XLSX) and caps vertical height so the modal stays manageable. */
.preview-scroll {
    overflow: auto;
    max-height: 340px;
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
}
.preview-block h4 {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--ds-neutral-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.preview-block .preview-table {
    /* Width expands to fit all columns; .preview-scroll provides horizontal scroll.
       Border is on .preview-scroll, not the table itself, so it doesn't scroll away. */
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    border: 0;
    border-radius: 0;
    font-size: 0.8125rem;
}
.preview-block .preview-table th {
    background: var(--ds-neutral-50);
    padding: 0.5rem 0.6rem;
    font-size: 0.6875rem;
    color: var(--ds-neutral-500);
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 1px solid var(--ds-neutral-200);
}
.preview-block .preview-table thead th {
    /* Sticky header within .preview-scroll so column labels stay visible when
       scrolling vertically. Background is inherited from the th rule above. */
    position: sticky;
    top: 0;
    z-index: 1;
}
.preview-block .preview-table td {
    padding: 0.45rem 0.6rem;
    border-top: 1px solid var(--ds-neutral-100);
    color: var(--ds-neutral-700);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-block .preview-table tbody tr:hover {
    background: var(--ds-primary-50);
}

/* Checkout modal — icon-header variant (medallion + close ×).
   Scoped to .ie-modal-header--with-icon so no other modal header is affected. */
.ie-modal-header--with-icon {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    position: relative;
    overflow: hidden;
}
.ie-modal-header--with-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(110% 130% at 96% -30%, var(--ds-primary-50), transparent 55%);
    pointer-events: none;
}
.ie-modal-header-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--ds-radius-lg);
    display: grid;
    place-items: center;
    font-size: 1.125rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-primary-700));
    flex: none;
    box-shadow: 0 6px 14px -4px rgb(124 77 255 / 0.5);
}
.ie-modal-header-content { flex: 1; }
.ie-modal-header-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-neutral-200);
    background: white;
    color: var(--ds-neutral-500);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1rem;
    flex: none;
    padding: 0;
    line-height: 1;
}
.ie-modal-header-close:hover:not(:disabled) {
    background: var(--ds-neutral-50);
    color: var(--ds-neutral-700);
}
.ie-modal-header-close:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* End /import-export Redesign block */

/* ========================================================================
   Phase 6 component CSS (Lists feature) — absorbs inline styles
   that were placed in ListSwitcher + ManageListsModal during Phase 6.2/6.3.
   `.list-sticky-bar` and `.cart-pill` are already defined earlier in this
   file; only the missing selectors are declared here.
   ======================================================================== */
.list-switcher-container {
    position: relative;
    display: inline-block;
}

.list-switcher-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.list-switcher-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 280px;
    background: var(--ds-neutral-0, #fff);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md, 0.5rem);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 0.5rem;
    z-index: 95;
}

.list-switcher-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: var(--ds-neutral-900);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    border-radius: var(--ds-radius-sm, 0.25rem);
}

.list-switcher-menu-item:hover {
    background: var(--ds-neutral-50);
}

.list-switcher-menu-item--active {
    font-weight: 600;
    color: var(--ds-primary-700);
    background: var(--ds-primary-50, var(--ds-neutral-50));
}

.list-switcher-menu-item--create {
    color: var(--ds-primary-600);
}

.list-switcher-menu-item--muted {
    color: var(--ds-neutral-600, var(--ds-neutral-500));
}

.list-switcher-menu-divider {
    height: 1px;
    background: var(--ds-neutral-200);
    margin: 0.4rem 0;
    border: 0;
}

.ie-modal--large {
    max-width: 880px;
}

.active-list-row {
    background: var(--ds-primary-50, var(--ds-neutral-50));
}

/* Inline-style absorptions (Phase 6 hotfix — CartSlideOut + CheckoutModal + ListResultsTable) */
.cart-inline-alert {
    margin: 0.5rem 1.5rem;
}
.export-empty--in-cart {
    padding: 2rem 1.5rem;
}
.cart-undo-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cart-undo-toast-action {
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
}
.format-section-label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--ds-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.contact-name-cell {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
}
.filter-select--compact {
    min-width: 80px;
}
/* End Phase 6 component CSS */

/* Backup progress bar (SSE-driven BackupConfirmModal in-progress stage).
   Coarse 5-step indicator; width is set inline by the component. */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--ds-neutral-200);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.75rem 0;
}
.progress-bar-fill {
    height: 100%;
    background: var(--ds-primary-500);
    transition: width 0.3s ease;
}

/* FEAT-047 P2: Sign in with Microsoft button — branding guidelines compliant
   (https://learn.microsoft.com/entra/identity-platform/howto-add-branding-in-apps) */
.login-sso-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 41px;
  padding: 10px 12px;
  background: #fff;
  color: #5e5e5e;
  border: 1px solid #8c8c8c;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 2px;
}
.login-sso-button:hover { background: #f5f5f5; }
.login-sso-button-logo  { width: 21px; height: 21px; }
.login-sso-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0;
  color: var(--ds-text-muted, #8c8c8c);
  font-size: 14px;
}
.login-sso-divider::before, .login-sso-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--ds-border, #e0e0e0);
}

/* ============================================================
   FEAT-068 P1: RolePillGroup + Migration banner + inline-edit
   switch styling. Used by /admin/masterdata's custom-fields tab.
   ============================================================ */
.role-pill-group {
    display: inline-flex;
    gap: 4px;
}
.role-pill {
    padding: 3px 10px;
    background: #fff;
    color: var(--ds-text-muted, #6c757d);
    border: 1px solid var(--ds-border, #dee2e6);
    border-radius: 14px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
    user-select: none;
    line-height: 1.4;
}
.role-pill:hover:not(:disabled):not(.role-pill--active) {
    border-color: var(--ds-text-muted, #6c757d);
    color: var(--ds-text-default, #212529);
}
.role-pill--active {
    background: var(--ds-brand-primary, #be7b72);
    color: #fff;
    border-color: var(--ds-brand-primary, #be7b72);
}
.role-pill--active:hover:not(:disabled) {
    background: #a76960;
    border-color: #a76960;
}
.role-pill:disabled {
    cursor: default;
    opacity: 0.6;
}

/* FEAT-068 P1: migration banner — mustard (warning, distinct from
   brand-orange family per the warning-color-distinct memory). */
.feat068-migration-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fcf3e3;
    border: 1px solid #c08930;
    border-left-width: 4px;
    border-radius: 6px;
    margin-bottom: 16px;
}
.feat068-migration-banner__icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: #c08930;
    margin-top: 1px;
}
.feat068-migration-banner__title {
    font-weight: 600;
    margin: 0 0 4px 0;
}
.feat068-migration-banner__title-count {
    color: #c08930;
}
.feat068-migration-banner__text {
    margin: 0;
    color: var(--ds-text-muted, #6c757d);
    font-size: 12.5px;
}
.feat068-migration-banner__actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Mark the rows that are still in the post-migration lockdown state
   so the Admin can scan the table and see what's left to review. */
.feat068-row-locked {
    background-color: #fcf3e3 !important;
}
.feat068-row-locked:hover {
    background-color: #f7ead3 !important;
}

/* Inline-edit toggle switch — compact, fits in a table cell. */
.feat068-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    vertical-align: middle;
}
.feat068-switch input { opacity: 0; width: 0; height: 0; }
.feat068-switch__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--ds-border, #dee2e6);
    border-radius: 18px;
    transition: 200ms;
}
.feat068-switch__slider::before {
    position: absolute;
    content: '';
    width: 14px; height: 14px;
    left: 2px; top: 2px;
    background-color: #fff;
    border-radius: 50%;
    transition: 200ms;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.feat068-switch input:checked + .feat068-switch__slider { background-color: #7a8b6e; }
.feat068-switch input:checked + .feat068-switch__slider::before { transform: translateX(14px); }
.feat068-switch input:disabled + .feat068-switch__slider { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
   FEAT-068 P2: InlineEditCell — hover affordance + edit mode +
   popover for MultiSelect/BadgeSelect. Used in ContactList's
   custom-field columns.
   ============================================================ */
.inline-cell {
    display: inline-block;
    position: relative;
    padding: 2px 4px;
    border-radius: 4px;
    min-height: 22px;
    min-width: 24px;
}
.inline-cell--readonly {
    /* Plain text. No hover affordance — non-editable cells must look
       like ordinary list content. */
    color: inherit;
}
.inline-cell--editable {
    /* P4.1: cell itself is no longer a click target — only the pencil
       button inside is. Cursor stays default; hover outline acts as a
       subtle indicator that the row contains an editable field. */
    cursor: default;
    border: 1px solid transparent;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.inline-cell--editable:hover {
    border-color: var(--ds-border, #dee2e6);
    background-color: var(--ds-surface-hover, rgba(0,0,0,0.03));
}
.inline-cell__value {
    /* Value is selectable text — cursor reflects that, not "clickable". */
    cursor: text;
}
/* The pencil button is now the only edit trigger. Default opacity 45 %
   so it still hints at interactivity without screaming; brand-primary
   on hover/focus. Icon-only variant for filled cells, icon-plus-label
   variant for empty cells (P4.1: cells without a value need a stronger
   discovery affordance than a 45 % icon). */
.inline-cell__edit-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0 4px;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1;
    color: var(--ds-text-muted, #6c757d);
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 120ms ease, color 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inline-cell__edit-btn:hover,
.inline-cell__edit-btn:focus-visible {
    opacity: 1;
    color: var(--ds-brand-primary, #be7b72);
    outline: none;
}
.inline-cell--editable:hover .inline-cell__edit-btn {
    opacity: 1;
    color: var(--ds-brand-primary, #be7b72);
}
.inline-cell__edit-btn--empty {
    /* Empty-state variant: full opacity by default so the affordance is
       discoverable without hover; brand-soft color + italic so it reads
       as a placeholder, not a real value. */
    opacity: 0.9;
    color: var(--ds-brand-primary, #be7b72);
    font-style: italic;
    font-size: 12px;
    margin-left: 0;
    padding: 2px 6px;
}
.inline-cell__edit-btn--empty:hover,
.inline-cell__edit-btn--empty:focus-visible {
    opacity: 1;
    background-color: var(--ds-surface-hover, rgba(0,0,0,0.03));
    border-radius: 4px;
}
.inline-cell--editing {
    padding: 0;
    border: 1px solid var(--ds-brand-primary, #be7b72);
    border-radius: 4px;
    background: white;
}
.inline-cell--error {
    border-color: var(--ds-color-danger, #923d3a) !important;
    box-shadow: 0 0 0 2px rgba(146,61,58,0.15);
}
.inline-cell--editing .form-control,
.inline-cell--editing .form-select {
    /* Borderless: the .inline-cell--editing wrapper draws the brand border.
       Do NOT override padding here — the base .form-control-sm/.form-select-sm
       padding reserves room for the native chevron. A previous `padding:2px 6px`
       shorthand collapsed that clearance, so the chevron rendered on top of the
       value and struck through it (worst on the empty "(kein)" option). */
    border: 0;
    box-shadow: none;
    font-size: 13px;
    /* Stop the editor collapsing to a cramped sliver in narrow columns. */
    min-width: 150px;
}

/* MultiSelect / BadgeSelect popover — anchored to the cell, shows
   above other content with a thin shadow. Backdrop is a transparent
   click-trap that closes (= commits) when the operator clicks
   anywhere outside the popover. */
.inline-cell-popover-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1090;
}
.inline-cell-popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--ds-border, #dee2e6);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    padding: 6px;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.inline-cell-popover__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}
.inline-cell-popover__item:hover {
    background-color: var(--ds-surface-hover, rgba(0,0,0,0.03));
}
.inline-cell-popover__close {
    margin-top: 4px;
    align-self: flex-end;
    background: var(--ds-brand-primary, #be7b72);
    color: white;
    border: 0;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

/* P4.1 — composite popover (Phone bundle, Email bundle, Address).
   Wider than the MultiSelect popover, single column of labeled inputs,
   real Save/Cancel buttons (no commit-on-backdrop). */
.inline-cell-popover--composite {
    min-width: 280px;
    max-width: 340px;
    gap: 8px;
    padding: 10px 12px;
}
.inline-cell-popover__title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted, #6c757d);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ds-border, #dee2e6);
    margin-bottom: 2px;
}
.inline-cell-popover__field {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    cursor: default;
}
.inline-cell-popover__label {
    color: var(--ds-text-muted, #6c757d);
    text-align: right;
    user-select: none;
}
.inline-cell-popover__field .form-control {
    font-size: 13px;
    padding: 4px 8px;
}
.inline-cell-popover__error {
    font-size: 12px;
    color: var(--ds-color-danger, #923d3a);
    background-color: rgba(146,61,58,0.08);
    border-radius: 4px;
    padding: 4px 8px;
    margin-top: 2px;
}
.inline-cell-popover__actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
    border-top: 1px solid var(--ds-border, #dee2e6);
    padding-top: 8px;
}

/* Mobile: turn the editable cell back into plain text — no hover, no
   pencil button. ContactList sets CanEdit=false on mobile so the
   component already renders the readonly path, but this is a belt-and-
   suspenders fallback. */
@media (max-width: 767.98px) {
    .inline-cell--editable { cursor: default; }
    .inline-cell--editable:hover { border-color: transparent; background-color: transparent; }
    .inline-cell__edit-btn { display: none; }
}

/* ============================================================
   FEAT-068 P3: ContactViewPicker (title dropdown) + ContactViewEditor
   (slide-in panel). Picker is anchored to the page title area; editor
   slides in from the right side, overlays the page content.
   ============================================================ */
.view-picker {
    position: relative;
    display: inline-block;
}
.view-picker__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background-color 120ms ease;
}
.view-picker__trigger:hover {
    background-color: var(--ds-surface-hover, rgba(0,0,0,0.04));
}
.view-picker__name {
    font-weight: 600;
}
.view-picker__caret {
    font-size: 10px;
    color: var(--ds-text-muted, #6c757d);
}
.view-picker__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
}
.view-picker__menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--ds-border, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    min-width: 240px;
    padding: 4px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.view-picker__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: inherit;
    width: 100%;
}
.view-picker__item:hover {
    background-color: var(--ds-surface-hover, rgba(0,0,0,0.04));
}
.view-picker__item--active {
    color: var(--ds-brand-primary, #be7b72);
    font-weight: 500;
}
.view-picker__item--cta {
    color: var(--ds-brand-primary, #be7b72);
}
.view-picker__item-icon { font-size: 14px; color: var(--ds-text-muted, #6c757d); }
.view-picker__item-label { flex: 1; }
.view-picker__item-check { color: var(--ds-brand-primary, #be7b72); }
.view-picker__divider {
    height: 1px;
    background-color: var(--ds-border, #dee2e6);
    margin: 4px 6px;
}

/* Editor — slide-in panel from the right */
.cv-editor-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.20);
    z-index: 1200;
}
.cv-editor-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 100%);
    background: white;
    box-shadow: -2px 0 14px rgba(0,0,0,0.15);
    z-index: 1210;
    display: flex;
    flex-direction: column;
}
.cv-editor-panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ds-border, #dee2e6);
}
.cv-editor-panel__title {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.cv-editor-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
}
.cv-editor-panel__footer {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--ds-border, #dee2e6);
    align-items: center;
}

.cv-editor-columns__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 4px;
}
.cv-editor-columns__row:hover { background-color: var(--ds-surface-hover, rgba(0,0,0,0.03)); }
.cv-editor-columns__name { flex: 1; font-size: 13px; }
.cv-editor-columns__order { display: flex; gap: 2px; }
.cv-editor-columns__group-title {
    margin: 10px 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-muted, #6c757d);
}
.cv-editor-columns__group-title:first-child { margin-top: 0; }

.cv-editor-filter-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

/* ============================================================
   Custom-Field BadgeSelect pill — soft-brand variant. Replaces the
   Bootstrap `.badge bg-primary` + `.btn-close` stack that drove the
   pills to ~36px tall on the contact-detail page. Sized like the
   FEAT-068 role pills (~24px tall, 11px font); soft brand background
   with terracotta text so the contact card doesn't read as a wall of
   solid orange when an operator has 10+ projects on a person.
   ============================================================ */
.cf-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 10px;
    background-color: #f3e2dd;            /* brand-primary-soft */
    color: var(--ds-brand-primary, #be7b72);
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.cf-badge-pill:hover {
    border-color: var(--ds-brand-primary, #be7b72);
}
.cf-badge-pill__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cf-badge-pill__remove {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.6;
    transition: opacity 120ms ease, color 120ms ease;
}
.cf-badge-pill__remove:hover {
    opacity: 1;
    color: #923d3a;                       /* wine — read as "destructive" */
}
.cf-badge-pill__remove:focus-visible {
    opacity: 1;
    outline: 1px solid var(--ds-brand-primary, #be7b72);
    outline-offset: 1px;
    border-radius: 4px;
}

/* ── ColumnHeaderPopup (FEAT-072 Task 10) ────────────────────────────────────
   .chp-*  — column-header sort/filter popup anchored by the host (ContactList).
   No scoped CSS; all rules live here per the project CSS rule.               */

.chp {
    min-width: 220px;
    max-width: 300px;
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
    outline: none;  /* tabindex=-1 host, focus ring not needed visually */
}

.chp-section {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1-5);
    padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-2);
}

.chp-section-title {
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-semibold);
    color: var(--ds-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ds-space-1);
}

.chp-divider {
    height: 1px;
    background: var(--ds-neutral-200);
    margin: 0 var(--ds-space-3);
}

/* Sort buttons */
.chp-btn {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-1-5) var(--ds-space-2);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-700);
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background var(--ds-duration-fast) var(--ds-ease-default),
                color var(--ds-duration-fast) var(--ds-ease-default);
}

.chp-btn:hover {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-900);
}

.chp-btn--active {
    background: var(--ds-primary-50);
    color: var(--ds-primary-700);
    border-color: var(--ds-primary-200);
    font-weight: var(--ds-font-medium);
}

.chp-btn--active:hover {
    background: var(--ds-primary-100);
}

/* Filter controls */
.chp-row {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
}

.chp-op-select {
    width: 100%;
    padding: var(--ds-space-1-5) var(--ds-space-2);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-800);
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-300);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    appearance: auto;
}

.chp-op-select:focus {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: -1px;
    border-color: var(--ds-primary-400);
}

.chp-value-input {
    width: 100%;
    padding: var(--ds-space-1-5) var(--ds-space-2);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-800);
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-300);
    border-radius: var(--ds-radius-md);
    box-sizing: border-box;
}

.chp-value-input:focus {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: -1px;
    border-color: var(--ds-primary-400);
}

/* From / To range layout */
.chp-range-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.chp-range-row .chp-value-input { flex: 1; min-width: 0; }

.chp-range-label {
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-xs);
    color: var(--ds-neutral-500);
    white-space: nowrap;
    flex: none;
}

/* Multi-select checkbox list for Choice columns */
.chp-choice-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-0-5);
    max-height: 148px;
    overflow-y: auto;
}

.chp-choice-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-1) var(--ds-space-1-5);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-700);
}

.chp-choice-item:hover { background: var(--ds-neutral-100); }

.chp-choice-item input[type="checkbox"] {
    accent-color: var(--ds-primary-500);
    cursor: pointer;
    flex: none;
}

/* Presence Ja/Nein row */
.chp-presence-row {
    display: flex;
    gap: var(--ds-space-4);
    padding: var(--ds-space-1) 0;
}

.chp-presence-opt {
    display: flex;
    align-items: center;
    gap: var(--ds-space-1-5);
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-700);
    cursor: pointer;
}

.chp-presence-opt input[type="radio"] {
    accent-color: var(--ds-primary-500);
    cursor: pointer;
}

/* Apply / Reset action row */
.chp-actions {
    display: flex;
    gap: var(--ds-space-2);
    padding-top: var(--ds-space-2);
    border-top: 1px solid var(--ds-neutral-100);
    margin-top: var(--ds-space-1);
}

/* ── ColumnHeaderPopup host wiring (FEAT-072 Task 13) ────────────────────────
   .chp-anchor   – position: relative on the <th> so .chp-dropdown is anchored.
   .chp-dropdown – absolutely-positioned wrapper that places the popup below
                   and left-aligned with the column header.
   .chp-caret    – small filter button rendered inside the column label span.
   .chp-overlay  – transparent full-page backdrop for click-outside-to-close.  */

.chp-anchor { position: relative; }

.chp-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--ds-z-dropdown);
    padding-top: var(--ds-space-1);
}

.chp-caret {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: var(--ds-space-0-5) var(--ds-space-1);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-neutral-400);
    cursor: pointer;
    line-height: 1;
    transition: color var(--ds-duration-fast) var(--ds-ease-default),
                background var(--ds-duration-fast) var(--ds-ease-default);
}
.chp-caret:hover { color: var(--ds-neutral-700); background: var(--ds-neutral-100); }
.chp-caret--active { color: var(--ds-primary-600); }
.chp-caret--active:hover { background: var(--ds-primary-50); }

.chp-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
    cursor: default;
}

/* ===================================================================================
   FEAT-076 Worker Operations Console — Zone A health band + Zone B attention queue.
   Dense LOB/CRM aesthetic (flat surfaces, subtle borders, status via left-border + dot).
   =================================================================================== */
.ops-console { margin-bottom: var(--ds-space-4); }
.ops-console__header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--ds-space-3);
}
.ops-console__updated { font-variant-numeric: tabular-nums; }
.ops-console__detail { margin-top: var(--ds-space-4); }

/* Zone A — health band */
.ops-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-4);
}
.ops-chip {
    display: flex; align-items: flex-start; gap: var(--ds-space-2);
    padding: var(--ds-space-2-5) var(--ds-space-3);
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-left: 3px solid var(--ds-neutral-300);
    border-radius: var(--ds-radius-md);
    text-decoration: none;
    color: var(--ds-neutral-800);
    transition: background 0.12s ease, border-color 0.12s ease;
    /* also rendered as a <button> (deep-link) — reset native button chrome */
    font: inherit; text-align: left; width: 100%; cursor: pointer;
}
.ops-chip:hover { background: var(--ds-neutral-50); }
.ops-chip:focus-visible { outline: 2px solid var(--ds-primary-600); outline-offset: 1px; }
.ops-chip__dot {
    width: 8px; height: 8px; border-radius: var(--ds-radius-full);
    margin-top: 5px; flex: 0 0 auto; background: var(--ds-neutral-400);
}
.ops-chip__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ops-chip__label { font-weight: 600; font-size: 0.8125rem; }
.ops-chip__state { font-size: 0.75rem; color: var(--ds-neutral-600); }
.ops-chip__counts {
    display: flex; gap: var(--ds-space-2); font-size: 0.75rem;
    font-variant-numeric: tabular-nums; margin-top: 1px;
}
.ops-chip__counts .ok   { color: var(--ds-success-dark); }
.ops-chip__counts .warn { color: var(--ds-warning-dark); }
.ops-chip__counts .fail { color: var(--ds-danger-dark); }
.ops-chip__rate {
    font-size: 0.6875rem; color: var(--ds-neutral-500); font-variant-numeric: tabular-nums;
}
.ops-chip__spark { width: 100%; height: 16px; margin-top: 3px; display: block; overflow: visible; }
.ops-chip__spark polyline {
    fill: none; stroke: var(--ds-neutral-400); stroke-width: 1.25;
    stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.ops-chip--ok       .ops-chip__spark polyline { stroke: var(--ds-success); }
.ops-chip--degraded .ops-chip__spark polyline { stroke: var(--ds-warning); }
.ops-chip--failing  .ops-chip__spark polyline { stroke: var(--ds-danger); }

/* status accents (left border + dot) */
.ops-chip--ok       { border-left-color: var(--ds-success); }
.ops-chip--ok       .ops-chip__dot { background: var(--ds-success); }
.ops-chip--degraded { border-left-color: var(--ds-warning); }
.ops-chip--degraded .ops-chip__dot { background: var(--ds-warning); }
.ops-chip--failing  { border-left-color: var(--ds-danger); background: var(--ds-danger-light); }
.ops-chip--failing  .ops-chip__dot { background: var(--ds-danger); }
.ops-chip--idle     { border-left-color: var(--ds-neutral-300); }
.ops-chip--idle     .ops-chip__dot { background: var(--ds-neutral-300); }
.ops-chip--unknown  { border-left-color: var(--ds-neutral-400); border-style: dashed; }
.ops-chip--unknown  .ops-chip__dot { background: var(--ds-neutral-400); }

/* Zone B — attention queue */
.ops-attention {
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-2) var(--ds-space-3);
    margin-bottom: var(--ds-space-3);
}
.ops-attention__title {
    font-weight: 600; font-size: 0.8125rem; color: var(--ds-neutral-700);
    display: flex; align-items: center; gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-2);
}
.ops-attention__count {
    background: var(--ds-danger); color: var(--ds-neutral-0);
    border-radius: var(--ds-radius-full); padding: 0 var(--ds-space-2);
    font-size: 0.6875rem; font-weight: 600; min-width: 18px; text-align: center;
}
.ops-attention__empty {
    color: var(--ds-neutral-500); font-size: 0.8125rem; padding: var(--ds-space-1) 0;
}
.ops-attention__item {
    display: flex; align-items: center; gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-2-5);
    border-left: 3px solid var(--ds-neutral-300);
    border-radius: var(--ds-radius-sm);
    margin-bottom: var(--ds-space-1);
    font-size: 0.8125rem;
}
.ops-attention__item--error   { border-left-color: var(--ds-danger);  background: var(--ds-danger-light); }
.ops-attention__item--warning { border-left-color: var(--ds-warning); background: var(--ds-warning-light); }
.ops-attention__item--error   .ops-attention__icon { color: var(--ds-danger); }
.ops-attention__item--warning .ops-attention__icon { color: var(--ds-warning-dark); }
.ops-attention__text { flex: 1 1 auto; min-width: 0; }
.ops-attention__view {
    flex: 0 0 auto; text-decoration: none; font-size: 0.75rem; font-weight: 600;
    color: var(--ds-primary-600); white-space: nowrap;
    background: none; border: none; padding: 0; cursor: pointer; /* rendered as <button> */
}
.ops-attention__view:hover { text-decoration: underline; }
.ops-attention__more {
    font-size: 0.75rem; color: var(--ds-neutral-500); padding-top: var(--ds-space-1);
}

/* Zone C — paged subsystem detail (tabs + toolbar + table + pager) */
.ops-zonec__tabs {
    display: flex; gap: var(--ds-space-1); flex-wrap: wrap;
    border-bottom: 1px solid var(--ds-neutral-200); margin-bottom: var(--ds-space-3);
}
.ops-zonec__tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: var(--ds-space-2) var(--ds-space-3); font-size: 0.8125rem; font-weight: 600;
    color: var(--ds-neutral-600); cursor: pointer; margin-bottom: -1px;
}
.ops-zonec__tab:hover { color: var(--ds-neutral-900); }
.ops-zonec__tab.active { color: var(--ds-primary-600); border-bottom-color: var(--ds-primary-600); }
.ops-zonec__toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--ds-space-3); flex-wrap: wrap; margin-bottom: var(--ds-space-3);
}
.ops-zonec__segments { display: flex; gap: 0; }
.ops-seg {
    background: var(--ds-neutral-0); border: 1px solid var(--ds-neutral-200);
    padding: var(--ds-space-1) var(--ds-space-3); font-size: 0.75rem; color: var(--ds-neutral-700);
    cursor: pointer; border-right-width: 0;
}
.ops-seg:first-child { border-radius: var(--ds-radius-sm) 0 0 var(--ds-radius-sm); }
.ops-seg:last-child  { border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0; border-right-width: 1px; }
.ops-seg:hover { background: var(--ds-neutral-50); }
.ops-seg.active { background: var(--ds-primary-600); color: var(--ds-neutral-0); border-color: var(--ds-primary-600); }
.ops-zonec__search { position: relative; display: flex; align-items: center; }
.ops-zonec__search .bi-search {
    position: absolute; left: var(--ds-space-2); color: var(--ds-neutral-400); font-size: 0.8125rem; pointer-events: none;
}
.ops-zonec__search input { padding-left: var(--ds-space-7); min-width: 220px; }
.ops-zonec__empty {
    text-align: center; color: var(--ds-neutral-500); font-size: 0.8125rem; padding: var(--ds-space-6) 0;
}
.ops-zonec__pager {
    display: flex; justify-content: space-between; align-items: center; padding-top: var(--ds-space-2);
}
.ops-bulkbar {
    display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap;
    background: var(--ds-neutral-50); border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md); padding: var(--ds-space-2) var(--ds-space-3);
    margin-bottom: var(--ds-space-2);
}
.ops-bulkbar__count { font-size: 0.8125rem; font-weight: 600; color: var(--ds-neutral-700); margin-right: auto; }

/* FEAT-076 — deep-link feedback pulse for Zone C (#ops-zonec). A chip / "View →"
   can target the tab+filter that is already shown, so the table does not change;
   ccScrollToId() scrolls it into view and adds .ops-flash for a brief ring pulse. */
@keyframes ops-flash-pulse {
    0%   { box-shadow: 0 0 0 0 var(--ds-primary-200); }
    25%  { box-shadow: 0 0 0 4px var(--ds-primary-200); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
.ops-flash {
    animation: ops-flash-pulse 1.1s ease-out;
    border-radius: var(--ds-radius-md);
}

/* ===========================================
   FEAT-062 — Linked-employer chip + derived (read-only) company fields
   When a contact is linked to an employer (flag ON + EmployerContactId set),
   the company-level fields are DERIVED from the linked Kind=Company record and
   edited there, not on the employee. The chip routes to that record; the
   inputs get a subtle non-editable surface. Tokens only — no raw hex (the
   banned-color guard scans this file).
   =========================================== */

/* Derived read-only company fields — subtle muted surface signalling the values
   are managed elsewhere. The neutral-200 border on the neutral-50 fill keeps a
   >=3:1 non-text contrast so the boundary is perceivable. */
.ds-field-derived .form-control,
.ds-field-derived .form-control-sm,
.ds-field-derived input,
.ds-field-derived .badge-select-container {
    background-color: var(--ds-neutral-50);
    border-color: var(--ds-neutral-200);
    cursor: not-allowed;
}
.ds-field-derived__hint {
    display: flex;
    align-items: center;
    gap: var(--ds-space-1);
    margin-bottom: var(--ds-space-2);
    color: var(--ds-neutral-600);
    font-size: var(--ds-text-xs);
}
.ds-field-derived__hint .bi { color: var(--ds-primary-600); }