/* ==========================================================================
   CRM design system
   --------------------------------------------------------------------------
   Extends ProAudit's design language. Tokens mirror those defined in
   /css/proaudit-variables.css — same color, same radii, same shadows, same
   warm charcoal sidebar — so the two subdomains feel like the same app.
   Edit tokens here in one place. Selectors below reference tokens only,
   never hardcoded values.
   ========================================================================== */

.crm-layout {
    /* Brand */
    --crm-primary:        #dd9142;   /* warm orange — matches --brand-orange (accents, borders, focus rings) */
    --crm-primary-hover:  #c47d35;
    --crm-primary-tint:   rgba(221, 145, 66, 0.12);
    --crm-primary-tint-2: rgba(221, 145, 66, 0.06);
    --crm-primary-text:   #8a4f15;   /* WCAG-AA-safe orange for text on light surfaces (~4.7:1 on white) */
    --crm-primary-strong: #8a4f15;   /* WCAG-AA-safe deep orange for FILLS that carry white text (~6.1:1 on white) */
    --crm-primary-strong-hover: #6e3f10;
    --crm-primary-edge:   rgba(221, 145, 66, 0.30);   /* chip / pill border */
    --crm-accent:         #00a69c;   /* teal — matches --brand-teal */
    --crm-accent-tint:    rgba(0, 166, 156, 0.10);

    /* Surface + ink */
    --crm-bg:             #f7f5f2;   /* matches --warm-bg */
    --crm-bg-end:         #ede8e0;
    --crm-surface:        #ffffff;
    --crm-surface-alt:    #faf9f6;   /* table header / footer strips */
    --crm-ink:            #323232;   /* matches --brand-charcoal */
    --crm-ink-2:          rgba(50, 50, 50, 0.78);   /* ~5.7:1 on white — WCAG AA normal-text safe */
    --crm-ink-3:          rgba(50, 50, 50, 0.45);

    /* Lines */
    --crm-border:         rgba(50, 50, 50, 0.08);
    --crm-border-strong:  rgba(50, 50, 50, 0.15);
    --crm-ink-hover:      rgba(50, 50, 50, 0.04);   /* neutral ghost-button hover wash */

    /* Sidebar */
    --crm-sidebar-grad-a: #1a1a1a;
    --crm-sidebar-grad-b: #2a2a2a;
    --crm-sidebar-w:      240px;
    --crm-sidebar-w-collapsed: 64px;
    --crm-sidebar-text:   rgba(255, 255, 255, 0.55);
    --crm-sidebar-text-bright: rgba(255, 255, 255, 0.92);
    --crm-sidebar-text-muted:  rgba(255, 255, 255, 0.30);
    --crm-sidebar-border: rgba(255, 255, 255, 0.08);

    /* Geometry */
    --crm-radius:         14px;
    --crm-radius-sm:      8px;
    --crm-radius-pill:    999px;

    /* Shadow (matches --warm-shadow / --warm-shadow-hover from ProAudit) */
    --crm-shadow:       0 2px 8px rgba(90, 74, 53, 0.06), 0 8px 24px rgba(90, 74, 53, 0.04);
    --crm-shadow-hover: 0 4px 12px rgba(90, 74, 53, 0.10), 0 12px 32px rgba(90, 74, 53, 0.06);
    --crm-shadow-dialog: 0 4px 12px rgba(90, 74, 53, 0.12), 0 12px 32px rgba(90, 74, 53, 0.18);

    /* Status */
    --crm-status-new:        #8a4f15;   /* WCAG-AA-safe deep orange (~4.7:1 on white) */
    --crm-status-new-tint:   rgba(221, 145, 66, 0.10);
    --crm-status-q:          #006d66;
    --crm-status-q-tint:     rgba(0, 166, 156, 0.10);
    --crm-status-conv:       #1f6e2e;
    --crm-status-conv-tint:  rgba(31, 110, 46, 0.10);
    --crm-status-down:       #b91c1c;   /* red for down/negative delta */
    --crm-status-closed:     rgba(50, 50, 50, 0.78);   /* ~5.7:1 on white — same scale as --crm-ink-2 */
    --crm-status-closed-tint: rgba(50, 50, 50, 0.06);

    /* Motion */
    --crm-t-fast: 160ms;
    --crm-t-med:  240ms;
    --crm-ease:   cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Typography stacks — kept as distinct tokens so existing var(--font-*)
       references continue to work. All collapse onto Roboto. */
    --font-display: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    display: flex;
    min-height: 100vh;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--crm-ink);
    background: var(--crm-bg);
}

/* Make every descendant inherit Roboto and the body color */
.crm-layout, .crm-layout * { font-family: inherit; }

/* Visually hidden, screen-reader-discoverable */
.crm-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;
}

/* ==========================================================================
   Collapsed-state modifiers
   ==========================================================================
   Mirrors ProAudit's `.pa-layout--collapsed` rules. Toggled on the
   `.crm-layout` root.
   ========================================================================== */
.crm-layout--collapsed .crm-sidebar {
    width: var(--crm-sidebar-w-collapsed);
    min-width: var(--crm-sidebar-w-collapsed);
}

.crm-layout--collapsed .crm-main {
    margin-left: var(--crm-sidebar-w-collapsed);
}

.crm-layout--collapsed .crm-hide-collapsed {
    display: none;
}

.crm-layout--collapsed .crm-nav-item {
    justify-content: center;
    padding: 0.5rem;
}

.crm-layout--collapsed .crm-sidebar-logo {
    padding: 1.125rem 0.75rem;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.crm-layout--collapsed .crm-logo-link {
    justify-content: center;
}

.crm-layout--collapsed .crm-collapse-btn {
    position: static;
    opacity: 1;
    margin-left: 0;
}

.crm-layout--collapsed .crm-user {
    justify-content: center;
}

.crm-layout--collapsed .crm-sidebar-bottom {
    padding: 0.5rem;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.crm-sidebar {
    width: var(--crm-sidebar-w);
    min-width: var(--crm-sidebar-w);
    background: linear-gradient(180deg, var(--crm-sidebar-grad-a), var(--crm-sidebar-grad-b));
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1200;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--crm-t-med) ease, min-width var(--crm-t-med) ease;
}

.crm-sidebar::-webkit-scrollbar { width: 4px; }
.crm-sidebar::-webkit-scrollbar-track { background: transparent; }
.crm-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}
.crm-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.crm-sidebar-logo {
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--crm-sidebar-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.crm-logo-link {
    display: flex !important;
    align-items: center;
    gap: 0.625rem;
    color: white !important;
    text-decoration: none !important;
    transition: opacity var(--crm-t-fast) ease;
}

.crm-logo-link:hover { opacity: 0.85; }

.crm-logo-symbol {
    height: 34px;
    width: auto;
    flex-shrink: 0;
}

.crm-logo-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-logo-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.crm-logo-tagline {
    font-size: 0.625rem;
    color: var(--crm-sidebar-text-muted);
    letter-spacing: 0.03em;
}

/* ── Collapse button ──────────────────────────────────────────────────── */
.crm-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--crm-sidebar-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--crm-sidebar-text-muted);
    cursor: pointer;
    transition: color var(--crm-t-fast) ease,
                background var(--crm-t-fast) ease,
                border-color var(--crm-t-fast) ease;
    flex-shrink: 0;
    margin-left: auto;
}

.crm-collapse-btn:hover {
    color: var(--crm-sidebar-text-bright);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.crm-collapse-btn .mud-icon-root { font-size: 1rem; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.crm-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.75rem 1rem;
}

.crm-nav-section-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--crm-sidebar-text-muted);
    letter-spacing: 1.5px;
    padding: 1.25rem 0.625rem 0.375rem;
    text-transform: uppercase;
}

.crm-nav-section-label:first-child { padding-top: 0.5rem; }

.crm-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--crm-radius-sm);
    color: var(--crm-sidebar-text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--crm-t-fast) ease,
                background var(--crm-t-fast) ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    position: relative;
    font-family: inherit;
}

.crm-nav-item:hover {
    color: var(--crm-sidebar-text-bright);
    background: rgba(255, 255, 255, 0.06);
}

.crm-nav-item.active {
    color: var(--crm-primary);
    background: var(--crm-primary-tint);
}

.crm-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--crm-primary);
}

.crm-nav-icon {
    font-size: 1.125rem !important;
    opacity: 0.8;
    flex-shrink: 0;
}

.crm-nav-item.active .crm-nav-icon {
    opacity: 1;
    color: var(--crm-primary) !important;
}

/* ── Sidebar bottom / user ────────────────────────────────────────────── */
.crm-sidebar-bottom {
    border-top: 1px solid var(--crm-sidebar-border);
    padding: 0.75rem;
    margin-top: auto;
}

.crm-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem;
}

.crm-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--crm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crm-user-avatar .mud-icon-root {
    font-size: 1rem;
    color: white;
}

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

.crm-user-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--crm-sidebar-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-user-signout {
    font-size: 0.625rem;
    color: var(--crm-sidebar-text-muted);
    text-decoration: none;
    transition: color var(--crm-t-fast) ease;
}

.crm-user-signout:hover {
    color: var(--crm-primary);
}

.crm-user .mud-icon-button {
    color: var(--crm-sidebar-text) !important;
}

.crm-user .mud-icon-button:hover {
    color: var(--crm-sidebar-text-bright) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Login button (anonymous state) */
.crm-login-btn {
    display: block;
    text-align: center;
    padding: 0.5rem 1rem;
    background: var(--crm-primary);
    color: white;
    font-weight: 600;
    font-size: 0.8125rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background var(--crm-t-fast) ease;
}

.crm-login-btn:hover {
    background: var(--crm-primary-hover);
}

/* ==========================================================================
   Main content area
   ========================================================================== */
.crm-main {
    flex: 1;
    margin-left: var(--crm-sidebar-w);
    min-height: 100vh;
    background: var(--crm-bg);
    transition: margin-left var(--crm-t-med) ease;
}

.crm-page-shell {
    padding: 24px 28px;
}

/* ==========================================================================
   Topbar
   ========================================================================== */
.crm-topbar {
    background: var(--crm-surface);
    border-bottom: 1px solid var(--crm-border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.crm-topbar-crumbs {
    font-size: 12.5px;
    color: var(--crm-ink-2);
    display: flex; gap: 6px; align-items: center;
}
.crm-topbar-crumbs strong { color: var(--crm-ink); font-weight: 600; }
.crm-topbar-crumbs a { color: var(--crm-ink-2); text-decoration: none; }
.crm-topbar-crumbs a:hover { color: var(--crm-primary-text); }
.crm-topbar-actions { display: flex; align-items: center; gap: 12px; }

/* ==========================================================================
   MudBlazor component overrides
   --------------------------------------------------------------------------
   Ported from crm-design.css (Task 4) and retuned for the new design system:
   8px input radius, 1px --crm-border-strong outlines, orange focus rings,
   14px card radius, white surfaces, warm shadows.

   Scoping rules:
   - In-tree components (inputs, tables, switches, radios, icons) scope under
     `.crm-layout` so ProAudit's MudBlazor styling is untouched.
   - Portaled components (MudPopover, MudDialog, MudDatePicker) escape
     `.crm-layout` to <body>, so they use opt-in `.crm-dialog` / `.crm-popover`
     anchors, or a `.crm-popover-scope` modifier on the portal payload.
   ========================================================================== */

/* ── MudTextField — outlined input chrome ─────────────────────────────────
   THIS IS THE FIX for "no separators between inputs". MudBlazor's default
   border is too soft on warm bg; force 1px --crm-border-strong outline,
   8px radius, --crm-primary focus border with a 3px tint focus ring. */
.crm-layout .mud-input.mud-input-outlined,
.crm-layout .mud-input-outlined-border {
    border-radius: var(--crm-radius-sm);
}

.crm-layout .mud-input-outlined-border {
    border-color: var(--crm-border-strong) !important;
    border-width: 1px !important;
    transition: border-color var(--crm-t-fast) var(--crm-ease),
                box-shadow var(--crm-t-fast) var(--crm-ease);
}

.crm-layout .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--crm-ink-2) !important;
}

.crm-layout .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--crm-primary) !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px var(--crm-primary-tint);
}

.crm-layout .mud-input-slot {
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface);
}

.crm-layout .mud-input-label,
.crm-layout .mud-input-label-text {
    font-family: inherit !important;
    font-size: 12.5px !important;
    color: var(--crm-ink-2) !important;
}

.crm-layout .mud-input-label.mud-input-label-animated.mud-focused {
    color: var(--crm-primary) !important;
}

.crm-layout .mud-input-adornment.mud-input-adornment-end {
    flex: 0 0 auto;
    width: auto;
}

/* ── MudSelect — same chrome as MudTextField ──────────────────────────── */
.crm-layout .mud-select-input {
    font-family: inherit !important;
    color: var(--crm-ink) !important;
}

/* ── MudDatePicker — portaled popover, opt-in via .crm-popover-scope ─── */
.crm-popover-scope .mud-picker-toolbar.mud-picker-datepicker-toolbar {
    background: var(--crm-ink) !important;
    color: var(--crm-surface) !important;
}

.crm-popover-scope .mud-picker-toolbar .mud-picker-year,
.crm-popover-scope .mud-picker-toolbar .mud-picker-date,
.crm-popover-scope .mud-picker-toolbar .mud-button-label {
    color: var(--crm-surface) !important;
}

.crm-popover-scope .mud-picker .mud-day.mud-selected,
.crm-popover-scope .mud-picker .mud-day.mud-day-selected,
.crm-popover-scope .mud-picker .mud-range-selected {
    background-color: var(--crm-primary) !important;
    color: var(--crm-surface) !important;
}

.crm-popover-scope .mud-picker .mud-day.mud-current:not(.mud-selected):not(.mud-day-selected) {
    border-color: var(--crm-primary) !important;
    color: var(--crm-primary) !important;
}

.crm-popover-scope .mud-picker .mud-picker-calendar-header-day {
    color: var(--crm-ink-3) !important;
}

/* MudPopover-cascading-value emits a 0px element that MudBlazor uses as
   an anchor — it should not collapse the date-range input layout. */
.crm-layout .mud-popover-cascading-value {
    position: absolute;
    height: 0 !important;
}

/* ── MudDataGrid / Table — base chrome (Task 9 adds .crm-table) ────────
   New design: white surface, --crm-surface-alt header strip, hairline
   bottom borders. Dropped: 2px radius, paper-sunk header, indigo edge
   indicator on hover (those were editorial). Row hover uses
   --crm-primary-tint-2 instead of a side bar. */
.crm-layout .mud-table-container {
    background: transparent;
}

.crm-layout .mud-table-head .mud-table-row {
    background: var(--crm-surface-alt);
    border-bottom: 1px solid var(--crm-border-strong);
}

.crm-layout .mud-table-head .mud-table-cell {
    background: transparent !important;
    color: var(--crm-ink-2) !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    border: none !important;
    padding: 12px 16px !important;
    white-space: nowrap;
}

.crm-layout .mud-table-body .mud-table-row {
    cursor: pointer;
    background: transparent !important;
    transition: background var(--crm-t-fast) var(--crm-ease);
}

.crm-layout .mud-table-body .mud-table-row:hover {
    background: var(--crm-primary-tint-2) !important;
}

.crm-layout .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--crm-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 14px 16px !important;
    font-family: inherit;
    color: var(--crm-ink);
    font-size: 13.5px;
    vertical-align: middle;
}

.crm-layout .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}

.crm-layout .mud-table-pagination-toolbar {
    background: var(--crm-surface-alt) !important;
    border-top: 1px solid var(--crm-border) !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    color: var(--crm-ink-2) !important;
}

.crm-layout .mud-table-pagination-toolbar * {
    font-family: inherit !important;
    font-feature-settings: "tnum";
}

/* Pagination caption text ("Rows per page:" / "1-3 of 3") — MudBlazor's
   .mud-typography-body2 default color overrides the toolbar color above,
   so re-assert the WCAG-AA-safe ink-2 token here. */
.crm-layout .mud-table-pagination-toolbar .mud-table-pagination-caption,
.crm-layout .mud-table-pagination-toolbar .mud-typography-body2 {
    color: var(--crm-ink-2) !important;
}

/* ── MudRadio — segmented control chrome ──────────────────────────────
   Hide the default circle, use a fully-filled --crm-primary chip when
   checked. Existing .crm-segment / .qualify-segment / .crm-radio-list
   wrappers continue to work. */
.crm-layout .crm-segment .mud-radio,
.crm-layout .qualify-segment .mud-radio,
.crm-layout .crm-radio-list .mud-radio {
    margin: 0 !important;
    padding: 6px 14px !important;
    border-radius: var(--crm-radius-sm) !important;
    transition: background var(--crm-t-fast) var(--crm-ease);
    cursor: pointer;
}

.crm-layout .crm-segment .mud-radio .mud-radio-content,
.crm-layout .qualify-segment .mud-radio .mud-radio-content,
.crm-layout .crm-radio-list .mud-radio .mud-radio-content {
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--crm-ink-2) !important;
}

.crm-layout .crm-segment .mud-radio:hover .mud-radio-content,
.crm-layout .qualify-segment .mud-radio:hover .mud-radio-content,
.crm-layout .crm-radio-list .mud-radio:hover .mud-radio-content {
    color: var(--crm-ink) !important;
}

.crm-layout .crm-segment .mud-radio .mud-icon-button,
.crm-layout .qualify-segment .mud-radio .mud-icon-button,
.crm-layout .crm-radio-list .mud-radio .mud-icon-button {
    display: none !important;
}

.crm-layout .crm-segment .mud-radio.mud-checked,
.crm-layout .qualify-segment .mud-radio.mud-checked {
    background: var(--crm-primary) !important;
}

.crm-layout .crm-segment .mud-radio.mud-checked .mud-radio-content,
.crm-layout .qualify-segment .mud-radio.mud-checked .mud-radio-content {
    color: var(--crm-surface) !important;
}

.crm-layout .crm-radio-list .mud-radio.mud-checked .mud-radio-content {
    color: var(--crm-primary-text) !important;
    font-weight: 600 !important;
}

/* ── MudSwitch — track + thumb ────────────────────────────────────────
   --crm-primary checked, neutral grey unchecked, white thumb with a
   warm shadow. Dropped: ink-fill checked + .mud-success-text /
   .mud-primary-text suppressors (the new system embraces orange so
   suppressing primary-text is the wrong instinct). */
.crm-layout .mud-switch .mud-switch-track {
    opacity: 1 !important;
    background-color: var(--crm-border-strong) !important;
}

.crm-layout .mud-switch .mud-checked + .mud-switch-span .mud-switch-track,
.crm-layout .mud-switch .mud-checked ~ .mud-switch-span .mud-switch-track,
.crm-layout .mud-switch .mud-switch-track.mud-success,
.crm-layout .mud-switch .mud-switch-track.mud-primary {
    background-color: var(--crm-primary) !important;
}

.crm-layout .mud-switch .mud-switch-thumb,
.crm-layout .mud-switch .mud-switch-thumb-small {
    background-color: var(--crm-surface) !important;
    color: var(--crm-primary) !important;
    box-shadow: 0 1px 3px rgba(90, 74, 53, 0.20);
}

.crm-layout .mud-switch .mud-switch-label {
    font-family: inherit !important;
    font-size: 13px !important;
    color: var(--crm-ink) !important;
}

/* ── MudDialog — base dialog chrome (Task 10 adds full shell) ─────────
   White surface, 14px radius, no border, warm dialog shadow. Size
   variants for tight (560px) and wide (860px) forms are kept as-is
   because they're load-bearing for existing dialogs. */
.crm-dialog.mud-dialog {
    background: var(--crm-surface) !important;
    border-radius: var(--crm-radius) !important;
    box-shadow: var(--crm-shadow-dialog) !important;
    border: none !important;
}

.crm-dialog.mud-dialog .mud-dialog-content {
    padding: 0 !important;
}

.crm-dialog--tight.mud-dialog { width: 560px !important; max-width: 94vw !important; }
.crm-dialog--wide.mud-dialog  { width: 860px !important; max-width: 94vw !important; }

.crm-dialog .mud-dialog-actions {
    padding: 16px 24px !important;
    gap: 8px !important;
    border-top: 1px solid var(--crm-border);
    background: var(--crm-surface);
    border-bottom-left-radius: var(--crm-radius);
    border-bottom-right-radius: var(--crm-radius);
}

/* ── MudMenu / MudPopover — portaled, opt-in via .crm-popover-scope ───
   Light white surface, hairline border, soft shadow, 8px radius,
   --crm-primary-tint hover instead of indigo edge bar. */
.crm-popover-scope.mud-popover,
.crm-popover-scope .mud-popover,
.crm-popover-scope .mud-list {
    background: var(--crm-surface) !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: var(--crm-radius-sm) !important;
    box-shadow: var(--crm-shadow) !important;
    padding: 4px !important;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.crm-popover-scope .mud-list-item {
    padding: 8px 12px !important;
    border-radius: 6px !important;
    color: var(--crm-ink) !important;
    transition: background var(--crm-t-fast) var(--crm-ease);
}

.crm-popover-scope .mud-list-item:hover {
    background: var(--crm-primary-tint) !important;
}

.crm-popover-scope .mud-list-item.is-active {
    background: var(--crm-primary-tint) !important;
    color: var(--crm-primary-text) !important;
}

/* In-tree menu activator (the trigger button itself) — no chrome,
   neutral ink colour, brighten on hover. */
.crm-layout .mud-menu-button-activator {
    color: var(--crm-ink-2) !important;
    transition: color var(--crm-t-fast) var(--crm-ease),
                background var(--crm-t-fast) var(--crm-ease);
}

.crm-layout .mud-menu-button-activator:hover {
    color: var(--crm-ink) !important;
    background: transparent !important;
}

/* ── MudIcon / MudIconButton ─────────────────────────────────────────── */
.crm-layout .mud-icon-button {
    color: var(--crm-ink-2);
    transition: color var(--crm-t-fast) var(--crm-ease),
                background var(--crm-t-fast) var(--crm-ease);
}

.crm-layout .mud-icon-button:hover:not(:disabled) {
    color: var(--crm-ink);
    background: var(--crm-primary-tint-2);
}

/* ── MudDropZone — kanban drag-and-drop ──────────────────────────────
   Strip MudDynamicDropItem wrapper chrome so only our card shows; drag
   preview gets a dashed --crm-primary border. */
.crm-layout .kanban-zone .mud-dynamic-drop-item,
.crm-layout .kanban-zone .mud-drop-item {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.crm-layout .kanban-zone .mud-drop-item-preview-start {
    background: var(--crm-primary-tint-2) !important;
    border: 1px dashed var(--crm-primary) !important;
    border-radius: var(--crm-radius-sm) !important;
    min-height: 72px;
    opacity: 0.6;
}

/* ── MudFileUpload — inherit dropzone width ──────────────────────────── */
.crm-layout .mud-file-upload {
    width: 100%;
}

/* ── MudSkeleton — loader bar with warm shimmer ──────────────────────── */
.crm-layout .mud-skeleton {
    background: linear-gradient(
        90deg,
        var(--crm-surface-alt) 0%,
        var(--crm-surface) 50%,
        var(--crm-surface-alt) 100%
    ) !important;
    background-size: 200% 100% !important;
    border-radius: var(--crm-radius-sm) !important;
}

/* ==========================================================================
   Page header
   --------------------------------------------------------------------------
   Standard page-level title block. Sits above the white card. h1 is 22/700
   with a 13px stat sub-line; trailing action group hangs right.
   ========================================================================== */
.crm-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.crm-page-head h1 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--crm-ink);
    margin: 0 0 4px;
}

.crm-page-head-sub {
    font-size: 13px;
    line-height: 1.45;
    color: var(--crm-ink-2);
}

.crm-page-head-sub strong,
.crm-page-head-sub b {
    color: var(--crm-ink);
    font-weight: 600;
}

.crm-page-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ==========================================================================
   Card + toolbar
   --------------------------------------------------------------------------
   White surface card with optional toolbar header. The toolbar row holds
   the search input + chip filters + inline actions; .crm-card-body is for
   cards that don't need a toolbar header.
   ========================================================================== */
.crm-card {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    overflow: hidden;
}

.crm-card-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--crm-border);
    flex-wrap: wrap;
}

/* Two-row toolbar variant for filter-rich pages (Leads, Companies, Deals).
   .crm-toolbar--search row holds search + primary categorical filters.
   .crm-toolbar--filters row holds dropdown filters + the global reset. */
.crm-toolbar--filters {
    background: var(--crm-surface-alt);
}

/* Search input wrap inside a toolbar: minimum 320px so the search field
   is always usable. Grows to fill remaining row space. */
.crm-toolbar-search {
    flex: 1 1 320px;
    min-width: 240px;
}

/* --------------------------------------------------------------------------
   Filter row layout — MudSelect / MudDateRangePicker share remaining space.
   Each MudBlazor filter renders as <div class="mud-input-control crm-input">
   at the root. Without explicit flex sizing the items collide and the
   trailing "Reset filters" button stacks on top of the date picker.

   Fixes:
   - Each `.crm-input` inside the filter row is `flex: 1 1 200px` (selects)
     so they grow to share row space evenly with a 200px minimum.
   - Override the date-range picker to a fixed 280px slot — it carries TWO
     inputs (Start + End) inside, so it needs more room than a select.
   - Push the Reset filters button to the far right with `margin-left: auto`
     so a clear visual gap separates it from the last input.
   - The `width: 100%` declared on `.crm-input` (for bare HTML inputs)
     gets neutralized in the flex context by `flex-basis`.
   -------------------------------------------------------------------------- */
.crm-toolbar--filters > .crm-input {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 320px;
    width: auto;
}

/* Native HTML5 date inputs (Created from / Created to) wrapped in a
   <fieldset>/<legend> to mimic MudBlazor's outlined notched-label
   chrome — same border, radius, label typography, focus ring as the
   adjacent MudSelects so the row reads as five matching boxes. */
.crm-toolbar--filters .crm-filter-date-native {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 240px;
}

.crm-filter-fieldset {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--crm-border-strong);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface);
    height: 56px;
    transition: border-color var(--crm-t-fast) var(--crm-ease),
                box-shadow var(--crm-t-fast) var(--crm-ease);
}

.crm-filter-fieldset:hover {
    border-color: var(--crm-ink-2);
}

.crm-filter-fieldset:focus-within {
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px var(--crm-primary-tint);
}

/* The <legend> floats inside the top border, just like MudBlazor's
   notched-outlined floating label. The native legend already breaks
   the fieldset's top border, so this drops in cleanly. */
.crm-filter-fieldset__legend {
    padding: 0 6px;
    margin-left: 4px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--crm-ink-2);
    line-height: 1;
}

.crm-filter-fieldset:focus-within .crm-filter-fieldset__legend {
    color: var(--crm-primary);
}

.crm-filter-fieldset__input {
    flex: 1;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--crm-ink);
    padding: 0;
    line-height: 1.4;
}

.crm-filter-fieldset__input::placeholder {
    color: var(--crm-ink-3);
}

/* Native date input calendar icon — color match with the MudBlazor
   adornment icons in the surrounding selects. */
.crm-filter-fieldset__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--crm-t-fast) var(--crm-ease);
}

.crm-filter-fieldset__input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Reset filters button: anchor to the right edge so it never crowds the
   adjacent date picker. Margin-left:auto pushes it past whatever space
   the wrapped flex children left over. */
.crm-toolbar--filters > .crm-btn-ghost,
.crm-toolbar--filters > .mud-button.crm-btn-ghost {
    margin-left: auto;
    flex: 0 0 auto;
}

.crm-card-body {
    padding: 14px 16px;
}

/* ==========================================================================
   Inputs
   --------------------------------------------------------------------------
   Standard 1px outlined input. .crm-input-wrap layers a leading icon
   inside the input's left padding (icon at 10px, input padding-left 34px).
   Focus state: orange border + 3px primary-tint ring.
   ========================================================================== */
.crm-input {
    display: block;
    width: 100%;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border-strong);
    border-radius: var(--crm-radius-sm);
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: var(--crm-ink);
    outline: none;
    transition: border-color var(--crm-t-fast) var(--crm-ease),
                box-shadow var(--crm-t-fast) var(--crm-ease);
}

.crm-input::placeholder {
    color: var(--crm-ink-3);
}

.crm-input:hover:not(:focus):not(:disabled) {
    border-color: var(--crm-ink-2);
}

.crm-input:focus {
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px var(--crm-primary-tint);
}

.crm-input:disabled {
    background: var(--crm-surface-alt);
    color: var(--crm-ink-3);
    cursor: not-allowed;
}

.crm-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.crm-input-wrap .crm-input {
    padding-left: 34px;
}

.crm-input-wrap > svg,
.crm-input-wrap > i,
.crm-input-wrap > .crm-input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--crm-ink-3);
    pointer-events: none;
}

/* ==========================================================================
   Buttons
   --------------------------------------------------------------------------
   Three intents: primary (filled orange), secondary (white outlined),
   ghost (transparent text-only). MudButton variants under .crm-layout
   strip the default Material chrome (uppercase, ripple shadow) so
   <MudButton Class="crm-btn-primary"> matches the bare HTML version.
   ========================================================================== */
.crm-btn-primary,
.crm-btn-secondary,
.crm-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--crm-t-fast) var(--crm-ease),
                border-color var(--crm-t-fast) var(--crm-ease),
                color var(--crm-t-fast) var(--crm-ease),
                box-shadow var(--crm-t-fast) var(--crm-ease);
    user-select: none;
    white-space: nowrap;
}

.crm-btn-primary {
    /* WCAG AA: --crm-primary (#dd9142) on white is ~2.6:1 with white text;
       use --crm-primary-strong (#a86919) for the fill so the white label
       clears 4.5:1. Border keeps the brand orange tone for visual continuity. */
    background: var(--crm-primary-strong);
    color: var(--crm-surface);
    border: 1px solid var(--crm-primary-strong);
    border-radius: var(--crm-radius-sm);
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.crm-btn-primary:hover:not(:disabled) {
    background: var(--crm-primary-strong-hover);
    border-color: var(--crm-primary-strong-hover);
    color: var(--crm-surface);
}

.crm-btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
                0 0 0 3px var(--crm-primary-tint);
}

.crm-btn-primary:disabled {
    background: var(--crm-border-strong);
    border-color: var(--crm-border-strong);
    color: var(--crm-surface);
    cursor: not-allowed;
    box-shadow: none;
}

.crm-btn-secondary {
    background: var(--crm-surface);
    color: var(--crm-ink);
    border: 1px solid var(--crm-border-strong);
    border-radius: var(--crm-radius-sm);
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 600;
}

.crm-btn-secondary:hover:not(:disabled) {
    border-color: var(--crm-primary);
    color: var(--crm-primary-text);
    background: var(--crm-surface);
}

.crm-btn-secondary:focus-visible {
    outline: none;
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px var(--crm-primary-tint);
}

.crm-btn-secondary:disabled {
    color: var(--crm-ink-3);
    border-color: var(--crm-border);
    background: var(--crm-surface-alt);
    cursor: not-allowed;
}

.crm-btn-ghost {
    background: transparent;
    color: var(--crm-ink-2);
    border: 1px solid transparent;
    border-radius: var(--crm-radius-sm);
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
}

.crm-btn-ghost:hover:not(:disabled) {
    color: var(--crm-ink);
    background: var(--crm-ink-hover);
}

.crm-btn-ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--crm-primary-tint);
}

.crm-btn-ghost:disabled {
    color: var(--crm-ink-3);
    cursor: not-allowed;
}

/* ── MudButton retunes for crm-btn-* intents ──────────────────────────
   MudButton applies its own padding/typography/box-shadow/uppercase
   transform; strip those when our intent class is on the button. */
.crm-layout .mud-button-root.crm-btn-primary,
.crm-layout .mud-button-root.crm-btn-secondary,
.crm-layout .mud-button-root.crm-btn-ghost {
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-width: 0 !important;
    font-family: inherit !important;
}

.crm-layout .mud-button-root.crm-btn-primary {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.crm-layout .mud-button-root.crm-btn-primary:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.crm-layout .mud-button-root.crm-btn-secondary,
.crm-layout .mud-button-root.crm-btn-ghost {
    box-shadow: none !important;
}

/* ==========================================================================
   Filter chips
   --------------------------------------------------------------------------
   Pill-shaped filter chips for in-toolbar quick-filters. Default state is
   warm-paper background with neutral ink-2 text; .is-on flips to
   primary-tint background with warm-orange status text.
   ========================================================================== */
.crm-chip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--crm-surface-alt);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-pill);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-ink-2);
    cursor: pointer;
    user-select: none;
    transition: background var(--crm-t-fast) var(--crm-ease),
                border-color var(--crm-t-fast) var(--crm-ease),
                color var(--crm-t-fast) var(--crm-ease);
    white-space: nowrap;
}

.crm-chip:hover {
    background: var(--crm-surface);
    border-color: var(--crm-border-strong);
    color: var(--crm-ink);
}

.crm-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--crm-primary-tint);
}

.crm-chip.is-on {
    background: var(--crm-primary-tint);
    border-color: var(--crm-primary-edge);
    color: var(--crm-status-new);
}

.crm-chip.is-on:hover {
    background: var(--crm-primary-tint);
    border-color: var(--crm-primary);
    color: var(--crm-status-new);
}

/* ==========================================================================
   Tables
   --------------------------------------------------------------------------
   Semantic table styling: clean borders, subtle hover state, secondary
   headers with minimal chrome. Cell variants for name, secondary text,
   dashes, and muted content.
   ========================================================================== */
.crm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.crm-table thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--crm-ink-2);
    padding: 11px 16px;
    background: var(--crm-surface-alt);
    border-bottom: 1px solid var(--crm-border);
}

.crm-table tbody td {
    padding: 13.5px 16px;
    border-bottom: 1px solid var(--crm-border);
    vertical-align: top;
    color: var(--crm-ink);
}

.crm-table tbody tr:hover td {
    background: var(--crm-primary-tint-2);
}

.crm-cell-name {
    font-weight: 600;
    color: var(--crm-ink);
}

.crm-cell-sub {
    font-size: 11.5px;
    color: var(--crm-ink-2);
    margin-top: 2px;
}

.crm-cell-dash {
    color: var(--crm-ink-3);
}

.crm-cell-muted {
    color: var(--crm-ink-2);
}

/* MudBlazor data grid overrides — retune grid cells to match .crm-table */
.crm-layout .mud-data-grid .mud-table-cell {
    padding: 13.5px 16px;
    border-bottom: 1px solid var(--crm-border);
    color: var(--crm-ink);
    font-size: 12.5px;
}

.crm-layout .mud-data-grid .mud-table-head .mud-table-cell {
    background: var(--crm-surface-alt);
    color: var(--crm-ink-2);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* MudDataGrid wraps the header text in <span class="column-header"> which
   inherits from a MudBlazor default rather than the cell color above.
   Force the same ink-2 color so axe-core's color-contrast rule sees the
   computed style we expect. */
.crm-layout .mud-data-grid .mud-table-head .column-header,
.crm-layout .mud-data-grid .mud-table-head .column-options,
.crm-layout .mud-data-grid .mud-table-head .sortable-column-header {
    color: var(--crm-ink-2) !important;
}

.crm-layout .mud-data-grid .mud-table-row:hover .mud-table-cell {
    background: var(--crm-primary-tint-2);
}

/* ----------------------------------------------------------------------------
   Row hover indicator — inset box-shadow on first cell instead of a
   `tr::before` pseudo-element. The original implementation in
   crm-design.css used `display: block` on `tr::before`, which CSS
   wraps as an anonymous table-cell inside the `display: table-row`
   parent. That anonymous cell occupies column 0 of the body row even
   when `position: absolute` is set on the pseudo-element, pushing
   every visible TD one column right of its matching TH. The fix:
   suppress the legacy ::before and draw the indicator with an inset
   shadow on `:first-child`, which doesn't affect column layout.
   ---------------------------------------------------------------------------- */
.crm-layout .mud-data-grid .mud-table-body .mud-table-row::before {
    display: none !important;
    content: none !important;
}
.crm-layout .mud-data-grid .mud-table-body .mud-table-row .mud-table-cell:first-child {
    box-shadow: inset 2px 0 0 transparent;
    transition: box-shadow var(--crm-t-fast) var(--crm-ease);
}
.crm-layout .mud-data-grid .mud-table-body .mud-table-row:hover .mud-table-cell:first-child {
    box-shadow: inset 2px 0 0 var(--crm-primary);
}

/* ==========================================================================
   Status pills
   --------------------------------------------------------------------------
   Inline status indicators with leading dot. Five semantic variants:
   New, Contacted, Qualified, Converted, Closed. Dot uses currentColor
   for automatic color sync with each variant class.
   ========================================================================== */
.crm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--crm-radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.crm-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.crm-pill--new {
    background: var(--crm-status-new-tint);
    color: var(--crm-status-new);
}

.crm-pill--contacted {
    background: var(--crm-primary-tint);
    color: var(--crm-primary-text);
}

.crm-pill--qualified {
    background: var(--crm-status-q-tint);
    color: var(--crm-status-q);
}

.crm-pill--converted {
    background: var(--crm-status-conv-tint);
    color: var(--crm-status-conv);
}

.crm-pill--closed {
    background: var(--crm-status-closed-tint);
    color: var(--crm-status-closed);
}

/* Priority pills + pricing hint (executive dashboard) */
.crm-pill--priority-low {
    background: var(--crm-status-closed-tint);
    color: var(--crm-status-closed);
}

.crm-pill--priority-medium {
    background: var(--crm-primary-tint-2);
    color: var(--neutral-700);
}

.crm-pill--priority-high {
    background: var(--crm-primary-tint);
    color: var(--crm-primary-strong);
}

/* Inline em-dash hint inside .crm-detail-dl dd cells */
.crm-pricing-hint {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 11px;
    color: var(--neutral-500);
    margin-left: 6px;
}

/* ==========================================================================
   Dialog shell — three zones (head / body / foot), reusable across all CRM
   dialogs. Composes with MudDialog as `<MudDialog Class="crm-dialog">`.
   Base chrome (surface, radius, shadow, border) defined in Task 4.
   ========================================================================== */

.crm-dialog__head {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--crm-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.crm-dialog__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--crm-ink);
    margin: 0 0 3px;
}

.crm-dialog__sub {
    font-size: 12.5px;
    color: var(--crm-ink-2);
    margin: 0;
}

.crm-dialog__close {
    width: 28px;
    height: 28px;
    border-radius: var(--crm-radius-sm);
    background: transparent;
    border: 0;
    color: var(--crm-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--crm-t-fast) var(--crm-ease), color var(--crm-t-fast) var(--crm-ease);
    flex-shrink: 0;
}

.crm-dialog__close:hover {
    background: var(--crm-ink-hover);
    color: var(--crm-ink);
}

.crm-dialog__body {
    padding: 18px 22px;
}

.crm-dialog__field {
    margin-bottom: 14px;
}

.crm-dialog__label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--crm-ink);
    margin-bottom: 6px;
}

.crm-dialog__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.crm-dialog__foot {
    padding: 14px 22px;
    background: var(--crm-surface-alt);
    border-top: 1px solid var(--crm-border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.crm-dialog__alert {
    margin-top: 12px;
}

/* Optional 'Executive Tracking' / 'Pricing & Commitment' collapsible section
   inside CRM dialogs. Quiet divider above, smaller field grid inside,
   editorial restraint. */
.crm-dialog__exec-section {
    margin-top: 12px;
    border-top: 1px dashed var(--crm-border);
    padding-top: 14px;
}
.crm-dialog__exec-section .mud-expand-panel-text {
    padding: 8px 0 0 !important;
}
.crm-dialog__exec-section .mud-expand-panel-header {
    padding: 6px 0 !important;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* ============================================================================
   Dashboard — KPI tiles + chart cards
   ============================================================================
   KPI row: responsive grid of metric tiles. Each tile composes on .crm-card
   chrome (white surface, border, shadow) and adds dense padding + column layout
   for label/value/delta stack. Hover lift via shadow shift only (no transform).

   Chart row: 2-column grid on desktop, collapses to 1 column under 900px.
   Chart cards extend .crm-card with a header section (title + subtitle) and
   a bordered bottom to visually separate metadata from chart content.
   ========================================================================== */

/* KPI Grid — auto-fit responsive without breakpoints */
.crm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* KPI Tile — composes on .crm-card chrome */
.crm-kpi-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    transition: box-shadow var(--crm-t-fast) var(--crm-ease);
    cursor: default;
}

.crm-kpi-tile:hover {
    box-shadow: var(--crm-shadow-hover);
}

/* KPI Tile — label (metric name) */
.crm-kpi-tile__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

/* KPI Tile — value (the number) */
.crm-kpi-tile__value {
    font-size: 26px;
    font-weight: 700;
    color: var(--crm-ink);
    margin: 0;
    line-height: 1.1;
}

/* KPI Tile — delta (% change) */
.crm-kpi-tile__delta {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    margin: 4px 0 0 0;
}

.crm-kpi-tile__delta--up {
    color: var(--crm-status-conv);
}

.crm-kpi-tile__delta--down {
    color: var(--crm-status-down);
}

/* Chart Row — 2-column on desktop, 1-column under 900px */
.crm-chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .crm-chart-row {
        grid-template-columns: 1fr;
    }
}

/* Chart Card — composes on .crm-card chrome */
.crm-chart-card {
    display: flex;
    flex-direction: column;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    overflow: hidden;
}

/* Chart Card — header (title + subtitle) with bordered bottom */
.crm-chart-card__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--crm-border);
    margin: 0;
}

/* Chart Card — title */
.crm-chart-card__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--crm-ink);
    margin: 0 0 2px 0;
}

/* Chart Card — subtitle */
.crm-chart-card__sub {
    font-size: 12px;
    color: var(--crm-ink-2);
    margin: 0;
}

/* Chart Card — trailing summary cluster (e.g. total wins, convert rate) */
.crm-chart-card__summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
    line-height: 1;
    flex-shrink: 0;
}

.crm-chart-card__summary-number {
    font-size: 20px;
    font-weight: 700;
    color: var(--crm-ink);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.crm-chart-card__summary-label {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--crm-ink-2);
}

/* Chart Card — loading skeleton (occupies the chart slot) */
.crm-chart-card__skel {
    width: 100%;
    min-height: 200px;
    background: linear-gradient(
        90deg,
        var(--crm-surface-alt) 0%,
        var(--crm-border) 50%,
        var(--crm-surface-alt) 100%
    );
    background-size: 200% 100%;
    animation: crm-chart-card-shimmer 1.6s ease-in-out infinite;
    border-radius: var(--crm-radius-sm);
}

@keyframes crm-chart-card-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Chart Card — empty state (centered italic note) */
.crm-chart-card__empty {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--crm-ink-2);
    font-style: italic;
    padding: 20px;
}

.crm-chart-card__empty p { margin: 0; }

/* ==========================================================================
   Card — title + tab strip + skeleton + empty state
   --------------------------------------------------------------------------
   Add-ons composed on .crm-card so heavy surfaces (activity feed) can
   reuse the card chrome without re-implementing toolbar layout, tab
   buttons, skeleton shimmer, or zero-state copy.
   ========================================================================== */

/* Title sitting in a .crm-card-toolbar header (Activity, etc.) */
.crm-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--crm-ink);
    margin: 0;
    flex: 0 0 auto;
}

/* Inline tablist (filter buttons) inside the card toolbar */
.crm-card__tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}

.crm-card__tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--crm-radius-sm);
    color: var(--crm-ink-2);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    transition: background var(--crm-t-fast) var(--crm-ease),
                color var(--crm-t-fast) var(--crm-ease),
                border-color var(--crm-t-fast) var(--crm-ease);
}

.crm-card__tab:hover {
    color: var(--crm-ink);
    background: var(--crm-surface-alt);
}

.crm-card__tab:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 1px;
}

.crm-card__tab--active {
    color: var(--crm-ink);
    background: var(--crm-surface-alt);
    border-color: var(--crm-border-strong);
}

/* Skeleton rows used inside .activity-rail while loading */
.crm-card__skel-row {
    list-style: none;
}

.crm-card__skel-time,
.crm-card__skel-title,
.crm-card__skel-meta {
    display: block;
    background: linear-gradient(
        90deg,
        var(--crm-surface-alt) 0%,
        var(--crm-border) 50%,
        var(--crm-surface-alt) 100%
    );
    background-size: 200% 100%;
    animation: crm-chart-card-shimmer 1.6s ease-in-out infinite;
    border-radius: 2px;
    margin-bottom: 5px;
}

.crm-card__skel-time  { width: 90px; height: 10px; }
.crm-card__skel-title { width: 70%;  height: 16px; }
.crm-card__skel-meta  { width: 45%;  height: 12px; }

/* Empty state inside a card body */
.crm-card__empty {
    padding: 28px 16px;
    text-align: center;
}

.crm-card__empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--crm-ink);
    margin: 0 0 6px;
}

.crm-card__empty-body {
    font-size: 13px;
    color: var(--crm-ink-2);
    margin: 0 auto;
    max-width: 50ch;
    line-height: 1.5;
}

/* Activity-rail entity link + kind chip
   (extracted from the old crm-dash-feed__entity* names so the rail can
   carry its own deep-link styling without depending on dashboard-only
   classes. Scoped tightly inside .activity-rail__title / __meta.) */
.activity-rail__entity {
    margin-left: 6px;
    color: var(--crm-ink-2);
    font-weight: 400;
}

.activity-rail__entity-sep {
    margin-right: 4px;
    color: var(--crm-ink-3);
}

.activity-rail__entity-link {
    color: var(--crm-primary-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--crm-t-fast) var(--crm-ease);
}

.activity-rail__entity-link:hover {
    border-bottom-color: currentColor;
}

.activity-rail__entity-link:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
    border-radius: 1px;
}

.activity-rail__entity-text {
    color: var(--crm-ink);
}

.activity-rail__kind {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--crm-ink-2);
}

/* ============ Activity rail (dashboard activity feed) ============
   Semantic editorial rail for activity timelines. Vertical dashed
   connector line with circular markers per item. Supports animation
   stagger + family/kind classifiers for visual differentiation. */
.activity-rail {
    position: relative;
    list-style: none;
    padding: 4px 0 0 28px;
    margin: 0;
}

.activity-rail::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 0;
    border-left: 1px dashed var(--crm-border-strong);
}

.activity-rail__item {
    position: relative;
    padding: 0 0 22px;
    opacity: 0;
    transform: translateY(4px);
    animation: crm-rail-in var(--crm-t-med) var(--crm-ease) forwards;
    animation-delay: calc(var(--i, 0) * 50ms);
}

.activity-rail__item:last-child {
    padding-bottom: 4px;
}

.activity-rail__marker {
    position: absolute;
    left: -26px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: var(--crm-radius-pill);
    background: var(--crm-ink-3);
    border: 2px solid var(--crm-surface);
    box-shadow: 0 0 0 1px var(--crm-border);
}

.activity-rail__marker--primary {
    background: var(--crm-primary);
}

.activity-rail__marker--success {
    background: var(--crm-status-conv);
}

.activity-rail__marker--info {
    background: var(--crm-accent);
}

.activity-rail__marker--warning {
    background: var(--crm-status-new);
}

.activity-rail__marker--error {
    background: var(--crm-status-down);
}

.activity-rail__marker--secondary {
    background: var(--crm-ink-2);
}

.activity-rail__marker--default {
    background: var(--crm-ink-3);
}

.activity-rail__time {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--crm-ink-3);
    margin-bottom: 4px;
    font-feature-settings: "tnum";
}

.activity-rail__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 16;
    font-weight: 500;
    font-size: 16px;
    color: var(--crm-ink);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.activity-rail__meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--crm-ink-2);
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    line-height: 1.45;
}

.activity-rail__meta-sep {
    color: var(--crm-border);
}

.activity-rail__meta-user {
    font-weight: 500;
    color: var(--crm-ink);
}

.activity-rail__outcome {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--crm-ink);
    margin: 6px 0 0;
    line-height: 1.5;
}

.activity-rail__chips {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.activity-rail__chip {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--crm-ink-2);
    border: 1px solid var(--crm-border);
    border-radius: 2px;
    padding: 2px 7px;
    background: var(--crm-surface);
    font-feature-settings: "tnum";
}

.activity-rail__chip b {
    font-weight: 600;
    color: var(--crm-ink);
    margin-right: 4px;
    opacity: 0.85;
}

.activity-rail__empty {
    padding: 28px 8px;
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--crm-ink-3);
    letter-spacing: -0.005em;
}

/* Animation for staggered rail entry */
@keyframes crm-rail-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.crm-pill--error {
    background: rgba(185, 28, 28, 0.10);
    color: #b91c1c;
    margin-top: 4px;
    display: inline-block;
}

/* Stage pill — small typeset badge instead of bare text */
.crm-pill--stage {
    background: var(--paper-sunk);
    color: var(--neutral-700);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--rule);
}

/* Service pipeline chips (PA / PE) */
.crm-pill--service {
    margin-right: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 3px 7px;
    border-radius: 2px;
}
.crm-pill--service-pa {
    background: var(--ink);
    color: var(--paper);
}
.crm-pill--service-pe {
    background: var(--paper-sunk);
    color: var(--ink);
    border: 1px solid var(--ink);
}

/* Section labels inside AddAccountDialog */
.crm-dialog__section-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule);
}
.crm-dialog__section-label:first-child { margin-top: 0; }

/* Portfolio KPI tiles (4-tile group inside the leftmost card) */
.crm-portfolio-kpi {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.crm-portfolio-kpi__head {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule);
}
.crm-portfolio-kpi__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
}
.crm-portfolio-kpi__tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.crm-portfolio-kpi__value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-feature-settings: "tnum";
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.crm-portfolio-kpi__label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}