/* ==========================================================================
   Tansi CRM — shared styles  ("Refined Clarity" design system)
   --------------------------------------------------------------------------
   Everything here is driven by the design-system CSS variables defined in
   app.css (--card-bg, --card-border, --shadow-card, --radius-*, --text-*)
   and MudBlazor palette vars (--mud-palette-*), so light/dark modes are
   handled automatically by the .mud-theme-light / .mud-theme-dark classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page header band  (CrmPageHeader.razor)
   -------------------------------------------------------------------------- */
.crm-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.crm-page-header__lead {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.crm-page-header__back {
    flex-shrink: 0;
}

.crm-page-header__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
}

.crm-page-header__text {
    min-width: 0;
}

.crm-page-header__title {
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--text-heading);
}

.crm-page-header__subtitle {
    color: var(--text-caption);
    margin-top: 2px;
}

.crm-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   2. Stat / KPI cards  (CrmStatCard.razor)
   -------------------------------------------------------------------------- */
.crm-stat-card {
    --crm-accent: var(--mud-palette-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 20px;
    border-radius: var(--radius-md);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-smooth), border-color var(--transition-fast);
}

.crm-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--crm-accent), color-mix(in srgb, var(--crm-accent) 30%, transparent));
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.crm-stat-card--clickable {
    cursor: pointer;
}

.crm-stat-card--clickable:hover {
    transform: translateY(-3px);
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow-card-hover);
}

.crm-stat-card--clickable:hover::before {
    opacity: 1;
}

.crm-stat-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.crm-stat-card__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-caption);
    line-height: 1.4;
}

.crm-stat-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--crm-accent);
    background: color-mix(in srgb, var(--crm-accent) 14%, transparent);
}

.crm-stat-card__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-heading);
}

.crm-stat-card__caption {
    font-size: 0.8125rem;
    color: var(--text-caption);
    line-height: 1.4;
}

.crm-stat-card__bar {
    margin-top: 6px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--crm-accent) 16%, transparent);
    overflow: hidden;
}

.crm-stat-card__bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--crm-accent);
    transition: width var(--transition-smooth);
}

/* accent variants — set the single --crm-accent driver */
.crm-accent-primary { --crm-accent: var(--mud-palette-primary); }
.crm-accent-success { --crm-accent: var(--mud-palette-success); }
.crm-accent-warning { --crm-accent: var(--mud-palette-warning); }
.crm-accent-error   { --crm-accent: var(--mud-palette-error); }
.crm-accent-info    { --crm-accent: var(--mud-palette-info); }

/* --------------------------------------------------------------------------
   3. Surface card — generic container for tables, sections, charts
   -------------------------------------------------------------------------- */
.crm-surface {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.crm-surface--pad {
    padding: 20px 24px;
}

.crm-surface__title {
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   4. Toolbar — search + actions row above lists
   -------------------------------------------------------------------------- */
.crm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.crm-toolbar__search {
    flex: 1 1 240px;
    max-width: 380px;
}

/* --------------------------------------------------------------------------
   5. List-table polish — give MudTable a quiet, modern header
   -------------------------------------------------------------------------- */
.crm-table {
    border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    overflow: hidden;
}

.crm-table .mud-table-toolbar {
    padding-inline: 8px;
}

.crm-table .mud-table-head .mud-table-cell {
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-caption);
}

.crm-table .mud-table-row {
    transition: background-color var(--transition-fast);
}

/* Tree tables (budget lines): parents read as group rows, children hang under
   vertical guide lines, and leaves reserve chevron width so names align. */
.crm-table .crm-tree-row--parent {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.crm-table .crm-tree-row--parent .crm-tree-cell {
    font-weight: 600;
}

.crm-tree-cell {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.crm-tree-guide {
    flex-shrink: 0;
    align-self: stretch;
    width: 22px;
    min-height: 28px;
    border-left: 2px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    margin-left: 14px;
}

.crm-tree-spacer {
    flex-shrink: 0;
    width: 30px;
}

/* --------------------------------------------------------------------------
   6. Owner cell  (CrmOwnerCell.razor)
   -------------------------------------------------------------------------- */
.crm-owner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.crm-owner__avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.crm-owner__name {
    color: var(--text-body);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-owner--empty {
    color: var(--text-caption);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   7. Detail header meta row  (status / source / owner chips)
   -------------------------------------------------------------------------- */
.crm-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 20px;
}

.crm-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-caption);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   8. Empty state
   -------------------------------------------------------------------------- */
.crm-empty {
    text-align: center;
    padding: 48px 24px;
    border: 1.5px dashed var(--card-border);
    border-radius: var(--radius-lg);
    color: var(--text-caption);
    background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-primary) 3%, transparent), transparent);
}

.crm-empty__icon {
    font-size: 44px !important;
    height: 44px !important;
    width: 44px !important;
    color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    margin-bottom: 8px;
}

.crm-empty__title {
    color: var(--text-body);
    font-weight: 600;
    margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   9. Stat strip for detail pages (compact inline metrics)
   -------------------------------------------------------------------------- */
.crm-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.crm-mini-stat {
    flex: 1 1 140px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card);
}

.crm-mini-stat__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-caption);
}

.crm-mini-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.3;
}

/* Mini-stat as a filter toggle (MyActivities.razor). Rendered as a real
   <button class="tansi-btn-reset …"> so it's keyboard-operable for free;
   aria-pressed carries the toggle state, --active carries the visual. */
.crm-mini-stat--btn {
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.crm-mini-stat--btn:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--card-border));
}

.crm-mini-stat--btn:focus-visible {
    outline: 3px solid var(--loop-accent, var(--mud-palette-primary));
    outline-offset: 2px;
}

.crm-mini-stat--active {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--card-bg));
}

.crm-mini-stat__value--danger { color: var(--mud-palette-error); }
.crm-mini-stat__value--warn   { color: var(--mud-palette-warning); }

/* Task cell — icon tile + subject + one-line preview (MyActivities.razor) */
.crm-task {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.crm-task__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    margin-top: 1px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.crm-task__icon .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.crm-task__text { min-width: 0; }

.crm-task__subject {
    font-size: 14.5px;
    font-weight: 600;
}

.crm-task__preview {
    font-size: 12.5px;
    color: var(--text-caption);
    max-width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. Pipeline kanban board  (PipelineBoard.razor)
   -------------------------------------------------------------------------- */
/* ---- summary banner ---- */
.pipeline-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 0;
    margin: 0 0 14px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}
.pipeline-summary__stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-right: 22px;
    margin-right: 6px;
    border-right: 1px solid var(--card-border);
}
.pipeline-summary__stat:last-of-type { border-right: 0; }
.pipeline-summary__k {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-caption);
}
.pipeline-summary__v {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-heading);
}
.pipeline-summary__note {
    margin: 0 0 0 auto;
    max-width: 340px;
    font-size: 0.78rem;
    color: var(--text-body);
}
@media (max-width: 700px) {
    .pipeline-summary__stat { border-right: 0; padding-right: 0; }
    .pipeline-summary__note { margin-left: 0; }
}

/* ---- search / filter / sort toolbar ---- */
.pipeline-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 16px;
}
.pipeline-toolbar__grow { flex: 1 1 320px; min-width: 220px; }
/* Owner + Sort grouped and pinned to the far right, like the mockup's .right. */
.pipeline-toolbar__right {
    margin-left: auto;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.pipeline-toolbar__select { flex: 0 0 190px; min-width: 170px; }
@media (max-width: 700px) {
    .pipeline-toolbar__grow { flex: 1 1 100%; }
    .pipeline-toolbar__right { margin-left: 0; width: 100%; }
    .pipeline-toolbar__select { flex: 1 1 100%; }
}

/* ---- Board/Table view switch ---- */
.pipeline-viewswitch { flex: none; }

/* ---- table view ---- */
.pipeline-table {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pipeline-board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.pipeline-column {
    background: var(--section-bg, var(--mud-palette-background-gray));
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.pipeline-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 8px;
}

.pipeline-column__title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--text-heading);
}

/* Won/Lost carry the meaning three ways — icon, word and colour */
.pipeline-column__title--won  { color: var(--success-ink); }
.pipeline-column__title--lost { color: var(--danger-ink); }
.pipeline-column__title--won .mud-icon-root,
.pipeline-column__title--lost .mud-icon-root {
    font-size: 1.05rem;
}

/* ---- per-stage accent ----*/
.pipeline-column--staged {
    border-top: 3px solid var(--stage-accent, var(--card-border));
}
.pipeline-column--staged .pipeline-column__title { color: var(--stage-accent); }
.pipeline-column__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--stage-accent, var(--text-caption));
    flex-shrink: 0;
}
.pipeline-column--accent-1 { --stage-accent: var(--primary-ink); }
.pipeline-column--accent-2 { --stage-accent: var(--teal-ink); }
.pipeline-column--accent-3 { --stage-accent: var(--violet-ink); }
.pipeline-column--accent-4 { --stage-accent: var(--warn-ink); }
.pipeline-column--accent-5 { --stage-accent: var(--mud-palette-info); }
.pipeline-column--accent-6 { --stage-accent: var(--brand); }

.pipeline-column__count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-body);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-radius: 999px;
    padding: 2px 8px;
}

.pipeline-column__sum {
    padding: 0 14px 6px;
    font-size: 0.75rem;
    color: var(--text-body);
}

/* Keyboard-actions help dialog (CrmKeyboardShortcutsDialog): the .pipeline-kbd
   rules now live in ui.css as the shared .tansi-kbd, with .pipeline-kbd kept
   as an alias there. */
.pipeline-dropzone {
    border: 2px dashed transparent;
    border-radius: var(--radius-sm);
    padding: 8px;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.pipeline-dropzone.mud-drop-zone-drag-block {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.pipeline-card {
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.pipeline-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow-card-hover);
}

.pipeline-card__title {
    font-weight: 600;
    color: var(--text-heading);
    line-height: 1.3;
}

.pipeline-card__amount {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

/* ---- close-date urgency ---- */
.pipeline-card--soon   { background: var(--warn-soft);   border-color: var(--warn-ink); }
.pipeline-card--urgent { background: var(--danger-soft); border-color: var(--danger-ink); }
.pipeline-due {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: var(--card-bg);
    font-size: 0.72rem;
    font-weight: 700;
}
.pipeline-due--soon   { color: var(--warn-ink); }
.pipeline-due--urgent { color: var(--danger-ink); }

/* ---- legend under the board ---- */
.pipeline-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 12px 2px 0;
    font-size: 0.78rem;
    color: var(--text-body);
}
.pipeline-legend__key { display: inline-flex; align-items: center; gap: 7px; }
.pipeline-legend__sw {
    width: 15px;
    height: 15px;
    border-radius: 5px;
    flex-shrink: 0;
}
.pipeline-legend__sw--soon   { background: var(--warn-soft);   border: 1.5px solid var(--warn-ink); }
.pipeline-legend__sw--urgent { background: var(--danger-soft); border: 1.5px solid var(--danger-ink); }
.pipeline-legend__note { color: var(--text-caption); }

/* ---- card as a button (opens the detail panel) ---- */
.pipeline-card--btn {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.pipeline-card--btn .pipeline-card__title {
    color: var(--primary-ink);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.3;
}
.pipeline-card__account { color: var(--text-caption); font-size: 0.75rem; }
.pipeline-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
}
.pipeline-card__pc { color: var(--text-caption); font-size: 0.75rem; }
.pipeline-card--btn .pipeline-due { margin-top: 6px; align-self: flex-start; }

/* ---- column collapse button + folded rail ---- */
.pipeline-column__head-right { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pipeline-column__collapse {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text-caption);
    cursor: pointer;
}
.pipeline-column__collapse:hover { background: var(--card-border); color: var(--text-heading); }

.pipeline-column--fold {
    flex: 0 0 46px;
    min-width: 46px;
    max-width: 46px;
    background: var(--section-bg, var(--mud-palette-background-gray));
    border-top: 3px solid var(--stage-accent, var(--card-border));
    display: flex;
}
.pipeline-fold {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 240px;
    padding: 12px 0 14px;
    background: transparent;
    border: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    color: var(--text-body);
    cursor: pointer;
    font: inherit;
}
.pipeline-fold:hover { background: color-mix(in srgb, var(--stage-accent) 12%, transparent); }
.pipeline-fold__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--stage-accent, var(--text-caption));
    flex-shrink: 0;
}
/* Won/Lost rails show their tick/cross instead of a dot — the icon is their signal. */
.pipeline-fold__ico { color: var(--stage-accent, var(--text-caption)); flex-shrink: 0; }
.pipeline-fold__name {
    writing-mode: vertical-rl;
    font-weight: 800;
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
    color: var(--stage-accent, var(--text-heading));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 320px;
}
.pipeline-fold__count {
    margin-top: auto;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--text-body);
    font-size: 0.7rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* ---- detail panel (PipelineDealSheet) ---- */
.pipeline-sheet__sec {
    margin: 20px 0 9px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-caption);
}
.pipeline-sheet__grouphead {
    margin: 12px 0 7px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-caption);
}
.pipeline-stagepick { display: flex; flex-direction: column; gap: 7px; }
.pipeline-stagepick__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--card-bg);
    color: var(--text-body);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.pipeline-stagepick__opt:hover:not(:disabled) { background: var(--section-bg); }
.pipeline-stagepick__opt:disabled { cursor: default; }
.pipeline-stagepick__opt.is-current {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}
.pipeline-stagepick__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--card-hover-border, var(--card-border));
    flex-shrink: 0;
}
.pipeline-stagepick__opt.is-current .pipeline-stagepick__radio {
    border-color: var(--mud-palette-primary);
    background: radial-gradient(circle, var(--mud-palette-primary) 0 4px, transparent 5px);
}
.pipeline-stagepick__label { flex: 1; min-width: 0; }
.pipeline-stagepick__now { font-size: 0.68rem; font-weight: 700; color: var(--text-caption); }
.pipeline-stagepick__opt--won.is-current  { border-color: var(--success-ink); background: var(--success-soft); }
.pipeline-stagepick__opt--lost.is-current { border-color: var(--danger-ink);  background: var(--danger-soft); }

.pipeline-sheet__kv { margin: 0; }
.pipeline-sheet__kv > div {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--card-border);
}
.pipeline-sheet__kv > div:last-child { border-bottom: 0; }
.pipeline-sheet__kv dt { flex: none; width: 120px; color: var(--text-caption); font-size: 0.8rem; }
.pipeline-sheet__kv dd { margin: 0; font-size: 0.84rem; font-weight: 600; color: var(--text-body); overflow-wrap: anywhere; }
.pipeline-sheet__foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.pipeline-sheet__foot .mud-button-root { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   11. Public sign / unsubscribe pages (EmptyLayout)
   -------------------------------------------------------------------------- */
.crm-public-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 16px 32px;
    background:
        radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--mud-palette-primary) 12%, transparent), transparent),
        var(--mud-palette-background, #f8f9fb);
}

.crm-public-card {
    width: 100%;
    max-width: 560px;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card-hover);
    overflow: hidden;
    /* Brand accent along the card's top edge — logo cyan into the UI primary step.
       Decorative (non-text), so the logo hue's 2.78:1 is fine here. */
    border-top: 0;
    background-image: linear-gradient(90deg, #0FA8D2, var(--mud-palette-primary));
    background-size: 100% 4px;
    background-repeat: no-repeat;
    padding-top: 4px;
}

/* Wider variant for form-heavy public pages (e.g. the lead-capture form) — the base card
   width above already suits the shorter unsubscribe/sign confirmations. */
.crm-public-card--wide {
    max-width: 680px;
}

.crm-public-card__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--card-border);
}

.crm-public-card__brand-logo {
    display: block;
    height: 30px;
    width: auto;
}

.crm-public-card__body {
    padding: 28px;
}

/* "Powered by Tansi" line under the card (CrmPublicFooter). */
.crm-public-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 0.8125rem;
    color: var(--text-caption);
}

.crm-public-footer__link {
    display: inline-flex;
    border-radius: 6px;
}

.crm-public-footer__link:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.crm-public-footer__logo {
    display: block;
    height: 18px;
    width: auto;
}

@media (max-width: 600px) {
    .crm-public-shell { padding: 24px 16px; }
    .crm-public-card__brand { padding: 14px 20px; }
    .crm-public-card__body { padding: 20px; }
}

/* --------------------------------------------------------------------------
   12. Activity timeline rows, detail & notes
   -------------------------------------------------------------------------- */
.crm-day-header {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-caption);
    margin: 10px 0 4px;
}

.crm-activity-row {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin: -4px -8px 0;
    transition: background-color var(--transition-fast);
}

.crm-activity-row:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.crm-activity-row__time {
    font-size: 0.75rem;
    color: var(--text-caption);
    white-space: nowrap;
}

.crm-activity-row__preview {
    color: var(--text-body);
    font-size: 0.85rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Notes cards (Notes tab) */
.crm-note-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.crm-note-card--pinned {
    border-left: 3px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--card-bg));
}

/* Pinned "key notes" panel (record header) */
.crm-keynotes {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--card-bg));
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 20px;
}

.crm-keynotes__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    margin-bottom: 8px;
}

.crm-keynote {
    padding: 6px 0;
    border-top: 1px solid var(--card-border);
}

.crm-keynote:first-of-type {
    border-top: none;
}

.crm-keynote__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-caption);
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 599.95px) {
    .crm-page-header {
        margin-bottom: 20px;
    }

    .crm-page-header__actions {
        margin-left: 0;
        width: 100%;
    }

    .crm-stat-card__value {
        font-size: 1.6rem;
    }

    .pipeline-column {
        min-width: 260px;
    }
}

/* ==========================================================================
   14. "Loop" — Contacts reach experience  (client concept, adapted)
   --------------------------------------------------------------------------
   Everything is scoped under .loop so it never leaks into the rest of the
   app. The accent is the Tansi brand blue: it is *derived* from MudBlazor's
   primary palette rather than restated, so CRM tracks the app theme (and any
   future brand change) automatically in both light and dark. On top of that
   the scope adds a small reach-channel / account-type colour system, whose
   light & dark hues are kept in sync via color-mix.
   ========================================================================== */
.loop {
    /* Keep the design-system surface tokens opaque & always-resolved inside the
       CRM scope by mapping them onto MudBlazor's :root palette (which is emitted
       globally, so it resolves even where the app's .mud-theme-* class isn't an
       ancestor). This guarantees cards / sheets are never see-through. */
    --card-bg: var(--mud-palette-surface);
    --card-border: var(--mud-palette-lines-default);
    --card-hover-border: var(--mud-palette-divider, var(--mud-palette-lines-default));
    --section-bg: var(--mud-palette-background);

    --loop-radius: 16px;
    --loop-radius-sm: 11px;

    /* Brand accent = the app's Tansi cyan (#0A728F light / #4ACEF2 dark).
       Derived, never restated, so CRM can't drift from the rest of the app.
       No --mud-palette-primary override lives here: the scope inherits the
       app palette as-is, which is the whole point. */
    --loop-accent: var(--mud-palette-primary);
    --loop-accent-press: var(--mud-palette-primary-darken);
    --loop-accent-contrast: var(--mud-palette-primary-text, #ffffff);

    /* reach-channel hues — each must stay legible against, and distinct from,
       the brand blue above */
    --loop-call: #15663B;
    --loop-sms: #6D28D9;
    --loop-email: #9A4A12;
    --loop-video: #3730A3;

    /* account-type hues */
    --loop-prospect: #0E7490;
    --loop-customer: #0B6E4F;
    --loop-partner: #6D28D9;
}

.mud-theme-dark .loop {
    --loop-call: #5CC98E;
    --loop-sms: #B49DF6;
    --loop-email: #E0A06A;
    --loop-video: #9E97F2;
    --loop-prospect: #67C7DC;
    --loop-customer: #4FD0A0;
    --loop-partner: #B49DF6;
}

/* CRM typography stays on the app's face (DM Sans) for coherence with the rest
   of the app. Only .loop-name needs an explicit family — it's a bare <button>,
   which doesn't inherit font-family by default; everything else already does. */
.loop-name {
    font-family: inherit;
}

.loop .crm-page-header__subtitle {
    font-size: 0.9rem;
}

/* Visible keyboard focus — consistent across the bespoke controls */
.loop-chip:focus-visible,
.loop-ch:focus-visible,
.loop-name:focus-visible,
.loop-reach__btn:focus-visible,
.loop-drawer__close:focus-visible {
    outline: 3px solid var(--loop-accent);
    outline-offset: 2px;
    border-radius: 8px;
}

/* -------------------------------------------------- toolbar -------------- */
.loop-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
}

.loop-count {
    font-size: 0.9rem;
    color: var(--text-caption);
    margin: 0;
    white-space: nowrap;
}

.loop-count strong {
    color: var(--text-heading);
    font-weight: 700;
}

.loop-search {
    flex: 1 1 200px;
    max-width: 320px;
}

.loop-filters {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.loop-chip {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-body);
    background: color-mix(in srgb, var(--text-caption) 10%, transparent);
    border: 1px solid var(--card-border);
    padding: 7px 13px;
    border-radius: 999px;
    cursor: pointer;
    min-height: 38px;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.loop-chip:hover {
    color: var(--text-heading);
    border-color: var(--card-hover-border);
}

.loop-chip[aria-pressed="true"] {
    background: var(--loop-accent);
    color: var(--loop-accent-contrast);
    border-color: var(--loop-accent);
}

.loop-viewgroup.mud-toggle-group {
    background: transparent;
    gap: 2px;
}

/* Selection on the contact cards — mirrors the leads bulk bar. */
.loop-bulkbar { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.loop-bulkbar__count { font-weight: 600; }

/* -------------------------------------------------- cards grid ---------- */
.loop-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.loop-cards[data-view="tile"] { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.loop-cards[data-view="grid"] { grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 13px; }
.loop-cards[data-view="list"] { grid-template-columns: 1fr; gap: 10px; }

.loop-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--loop-radius);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.loop-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    border-color: var(--card-hover-border);
}

.loop-card:focus-within { border-color: var(--loop-accent); }

/* Row overflow menu on a contact card — pinned to the corner so it never reflows the name. */
.loop-card__more { position: absolute; top: 6px; right: 6px; }

/* Bulk-selection checkbox — opposite corner from .loop-card__more, so the two never collide. */
.loop-card__check { position: absolute; top: 6px; left: 6px; }

.loop-card__body {
    display: flex;
    gap: 14px;
    padding: 17px 17px 13px;
    align-items: flex-start;
}

.loop-avatar {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.5px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Same footprint as the initials tile, so a mixed list stays on one grid. */
.loop-avatar--photo {
    object-fit: cover;
    background: var(--crm-surface-2, rgba(0, 0, 0, 0.06));
}

.loop-meta { min-width: 0; flex: 1; }

.loop-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.5;
    margin-bottom: 6px;
}

.loop-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.loop-pill--customer { color: var(--loop-customer); background: color-mix(in srgb, var(--loop-customer) 15%, transparent); }
.loop-pill--prospect { color: var(--loop-prospect); background: color-mix(in srgb, var(--loop-prospect) 15%, transparent); }
.loop-pill--partner  { color: var(--loop-partner);  background: color-mix(in srgb, var(--loop-partner) 15%, transparent); }
.loop-pill--neutral  { color: var(--text-caption);  background: color-mix(in srgb, var(--text-caption) 13%, transparent); }
/* Reach warning — an opted-out or unreachable record, flagged while scanning a list. */
.loop-pill--warn     { color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--text-heading)); background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); }

.loop-name {
    font-weight: 700;
    font-size: 16.5px;
    color: var(--text-heading);
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 1px;
    cursor: pointer;
    text-align: left;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.loop-name:hover { text-decoration: underline; text-underline-offset: 2px; }

.loop-role {
    font-size: 13.5px;
    color: var(--text-body);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loop-company {
    font-size: 13px;
    color: var(--text-caption);
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loop-company .mud-icon-root { font-size: 15px; flex: none; }

.loop-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 17px 13px;
    margin: 0;
    list-style: none;
}

.loop-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-body);
    background: color-mix(in srgb, var(--text-caption) 10%, transparent);
    border: 1px solid var(--card-border);
    padding: 2px 9px;
    border-radius: 999px;
}

.loop-tag--warn {
    color: var(--loop-email);
    background: color-mix(in srgb, var(--loop-email) 14%, transparent);
    border-color: transparent;
}

/* channel rail — the signature element */
.loop-rail {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border-top: 1px solid var(--card-border);
    background: var(--card-border);
}

.loop-ch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--card-bg);
    border: none;
    cursor: pointer;
    padding: 11px 4px 10px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-body);
    min-height: 56px;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.loop-ch:hover { background: var(--section-bg); }
.loop-ch__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.loop-ch__ic .mud-icon-root { font-size: 19px; }
.loop-ch.call  .loop-ch__ic { background: color-mix(in srgb, var(--loop-call) 16%, transparent);  color: var(--loop-call); }
.loop-ch.sms   .loop-ch__ic { background: color-mix(in srgb, var(--loop-sms) 16%, transparent);   color: var(--loop-sms); }
.loop-ch.email .loop-ch__ic { background: color-mix(in srgb, var(--loop-email) 16%, transparent); color: var(--loop-email); }
.loop-ch.meet  .loop-ch__ic { background: color-mix(in srgb, var(--loop-video) 16%, transparent); color: var(--loop-video); }
.loop-ch.is-best { background: color-mix(in srgb, var(--loop-accent) 12%, transparent); }
.loop-ch.is-best .loop-ch__ic { box-shadow: 0 0 0 2px var(--loop-accent); }
.loop-ch.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Meet button menu — the wrapper divs MudMenu puts around its activator must be
   layout-transparent: the card rail is a 4-column grid and the sheet rows are
   full-width list items, so the .loop-ch / .loop-reach__btn inside must fill the
   grid/flex cell exactly. NOT display:contents: MudBlazor positions the menu's
   popover from the .mud-menu wrapper's bounding rect, and display:contents
   generates NO box (rect 0,0,0,0) — which threw the menu to the viewport's
   top-left corner. Single-cell grids instead: the wrapper becomes the rail's
   grid item / the sheet row's full-width child, the button stretches to fill it
   (grid children stretch by default), and the wrapper's rect coincides with the
   button so the menu anchors right beside it. */
.loop .loop-meet-menu,
.loop .loop-meet-menu .mud-menu-activator {
    display: grid;
}

/* The menu's items render in MudPopoverProvider's tree — OUTSIDE .loop — so they
   are scoped via the MudMenu's ListClass instead. */
.loop-meet-menu__list .loop-meet-menu__label { font-weight: 600; }
.loop-meet-menu__list .loop-meet-menu__caption {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.loop-best-badge {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--loop-accent-contrast);
    background: var(--loop-accent);
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

/* list view */
.loop-cards[data-view="list"] .loop-card { flex-direction: row; align-items: center; }
.loop-cards[data-view="list"] .loop-card__body { flex: 1; padding: 12px 16px; align-items: center; }
.loop-cards[data-view="list"] .loop-avatar { width: 46px; height: 46px; font-size: 16px; border-radius: 13px; }
.loop-cards[data-view="list"] .loop-tags { display: none; }
.loop-cards[data-view="list"] .loop-rail {
    margin-top: 0;
    width: auto;
    border-top: none;
    border-left: 1px solid var(--card-border);
    grid-template-columns: repeat(4, 52px);
    flex: none;
}
.loop-cards[data-view="list"] .loop-ch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.loop-cards[data-view="list"] .loop-best-badge { font-size: 0; padding: 4px; top: 6px; }

/* grid view */
.loop-cards[data-view="grid"] .loop-card__body { padding: 15px 15px 11px; }
.loop-cards[data-view="grid"] .loop-avatar { width: 46px; height: 46px; font-size: 16px; }
.loop-cards[data-view="grid"] .loop-name { font-size: 15px; }
.loop-cards[data-view="grid"] .loop-tags { display: none; }
.loop-cards[data-view="grid"] .loop-ch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.loop-cards[data-view="grid"] .loop-best-badge { font-size: 0; padding: 4px; }

@media (max-width: 700px) {
    .loop-cards[data-view="list"] .loop-card { flex-direction: column; align-items: stretch; }
    .loop-cards[data-view="list"] .loop-rail { grid-template-columns: repeat(4, 1fr); width: 100%; border-left: none; border-top: 1px solid var(--card-border); }
    .loop-cards[data-view="list"] .loop-ch__label { position: static; width: auto; height: auto; clip: auto; }
}

/* group header */
.loop-group { grid-column: 1 / -1; margin: 6px 0 -2px; display: flex; align-items: center; gap: 10px; }
.loop-group__title { font-size: 17px; font-weight: 600; color: var(--text-heading); margin: 0; }
.loop-group__count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-caption);
    background: color-mix(in srgb, var(--text-caption) 12%, transparent);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    padding: 1px 9px;
}

/* empty state */
.loop-empty { grid-column: 1 / -1; text-align: center; padding: 56px 20px; color: var(--text-caption); }
.loop-empty__icon { font-size: 42px !important; height: 42px !important; width: 42px !important; color: color-mix(in srgb, var(--loop-accent) 55%, transparent); margin-bottom: 8px; }
.loop-empty__title { font-size: 20px; color: var(--text-heading); margin: 0 0 4px; }

/* -------------------------------------------------- reach sheet --------- */
/* The sheet container (.loop-sheet.mud-dialog: right-edge, full-height,
   slide-in, hidden title) now lives in ui.css as the shared .tansi-sheet,
   with .loop-sheet kept as an alias there. Only the CRM head/body parts
   (.loop-drawer__*) stay here. */

.loop-drawer__head {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    z-index: 2;
}

.loop-drawer__avatar {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    flex: none;
}

.loop-drawer__name { font-size: 21px; font-weight: 600; margin: 0; color: var(--text-heading); line-height: 1.15; }
.loop-drawer__sub { margin: 2px 0 0; font-size: 13.5px; color: var(--text-caption); }

.loop-drawer__close {
    margin-left: auto;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: var(--section-bg);
    color: var(--text-body);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.loop-drawer__close:hover { background: var(--card-hover-border); color: var(--text-heading); }
.loop-drawer__body { padding: 18px 20px 30px; }

.loop-suggest {
    background: color-mix(in srgb, var(--loop-accent) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--loop-accent) 30%, transparent);
    border-radius: var(--loop-radius-sm);
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 20px;
}

.loop-suggest__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--loop-accent); color: var(--loop-accent-contrast); display: grid; place-items: center; flex: none; }
.loop-suggest__text { font-size: 13px; color: var(--text-body); }
.loop-suggest__text strong { display: block; font-size: 13.5px; color: var(--text-heading); margin-bottom: 1px; }

/* The banner's warning face: same shape, amber instead of accent, so a compromised
   suggestion never reads as a recommendation. Mixed against the heading colour rather
   than used raw so the text stays legible on both the light and dark grounds. */
.loop-suggest--warn {
    background: color-mix(in srgb, var(--mud-palette-warning) 13%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
}

.loop-suggest--warn .loop-suggest__ic {
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent);
    color: color-mix(in srgb, var(--mud-palette-warning) 75%, var(--text-heading));
}

.loop-sect { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-caption); margin: 0 0 10px; }

.loop-reach { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.loop-reach__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    font: inherit;
    text-align: left;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    min-height: 56px;
    color: var(--text-body);
    text-decoration: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.loop-reach__btn:hover { border-color: var(--card-hover-border); background: var(--section-bg); }
.loop-reach__btn.is-best { border-color: var(--loop-accent); background: color-mix(in srgb, var(--loop-accent) 10%, transparent); }
.loop-reach__btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.loop-reach__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.loop-reach__btn.call  .loop-reach__ic { background: color-mix(in srgb, var(--loop-call) 16%, transparent);  color: var(--loop-call); }
.loop-reach__btn.sms   .loop-reach__ic { background: color-mix(in srgb, var(--loop-sms) 16%, transparent);   color: var(--loop-sms); }
.loop-reach__btn.email .loop-reach__ic { background: color-mix(in srgb, var(--loop-email) 16%, transparent); color: var(--loop-email); }
.loop-reach__btn.meet  .loop-reach__ic { background: color-mix(in srgb, var(--loop-video) 16%, transparent); color: var(--loop-video); }
.loop-reach__textwrap { min-width: 0; }
.loop-reach__main { font-weight: 600; font-size: 14px; color: var(--text-heading); }
.loop-reach__sub { font-size: 12.5px; color: var(--text-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loop-reach__best { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--loop-accent-contrast); background: var(--loop-accent); padding: 3px 8px; border-radius: 999px; }

/* The row is the reach button plus its "make this the preferred channel" pin. The pin is a
   sibling, never a child: the button already has a click action of its own, and HTML forbids a
   nested button. The row keeps the button flexible so a long email still ellipsises. */
.loop-reach__row { display: flex; align-items: center; gap: 8px; }
.loop-reach__row > .loop-reach__btn,
.loop-reach__row > .loop-meet-menu { flex: 1 1 auto; min-width: 0; }

.loop-reach__pin {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-caption);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.loop-reach__pin:hover { color: var(--loop-accent); background: color-mix(in srgb, var(--loop-accent) 12%, transparent); }
.loop-reach__pin:disabled { opacity: .5; cursor: progress; }

/* Pinned by the record itself — the state the admin set and expects to see honoured. */
.loop-reach__pin.is-on {
    color: var(--loop-accent);
    background: color-mix(in srgb, var(--loop-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--loop-accent) 45%, transparent);
}

/* Inherited from the account: shown, but visibly not the record's own choice — selecting it
   writes the account's preference onto the record directly. */
.loop-reach__pin.is-inherited { color: color-mix(in srgb, var(--loop-accent) 65%, var(--text-caption)); border-style: dashed; border-color: color-mix(in srgb, var(--loop-accent) 35%, transparent); }

.loop-reach__pin:focus-visible { outline: 3px solid var(--loop-accent); outline-offset: 2px; }

/* Holds the Meet row's right edge in line with the pinnable rows. */
.loop-reach__pin--spacer { pointer-events: none; }

.loop-details { list-style: none; margin: 0 0 22px; padding: 0; }
.loop-detail { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--card-border); font-size: 13.5px; }
.loop-detail:first-child { border-top: none; }
.loop-detail__k { color: var(--text-caption); }
.loop-detail__v { color: var(--text-heading); font-weight: 600; text-align: right; }
.loop-notes { font-size: 14px; color: var(--text-body); margin: 0; line-height: 1.55; white-space: pre-wrap; }

/* .loop-sheet narrow-width + reduced-motion rules: see .tansi-sheet in ui.css */

@media (prefers-reduced-motion: reduce) {
    .loop * { transition: none !important; }
    .loop-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Contact dialog — section rail  (ContactDialog.razor)
   -------------------------------------------------------------------------- */
.loop .crm-contact-rail { border-right: 1px solid var(--mud-palette-lines-default); padding-right: 8px; }
.loop .crm-rail-item { text-transform: none; justify-content: flex-start; border-radius: 10px; }
.loop .crm-rail-item--active { background: var(--mud-palette-action-default-hover); font-weight: 600; }

/* --------------------------------------------------------------------------
   CRM record dialogs  (ContactDialog / AccountDialog)
   A record form is a working surface, not a confirm box: it gets real width and
   height, sizes in rem so it scales with the user's text setting, and answers a
   press the instant it happens rather than on release.
   -------------------------------------------------------------------------- */
.crm-dialog__content { min-width: 0; }

.crm-dialog__body { min-height: 32rem; gap: 1.5rem; }

.crm-dialog__rail { min-width: 11.25rem; }

/* Feedback on pointer-DOWN, not on click — waiting for the release reads as dead. */
.loop .crm-rail-item:active { transform: scale(0.985); transition: transform 100ms ease-out; }

/* Required-but-empty marker: Save must never fail for a reason the rail could have shown. */
.crm-dialog__needs {
    width: 6px; height: 6px; border-radius: 50%; margin-left: 6px;
    background: var(--mud-palette-warning); flex: none; display: inline-block;
}

/* The scrolling pane. A fade where content meets the footer, instead of a hard
   1px rule — the edge belongs to the content passing under the chrome, not to a
   divider drawn across it. */
.crm-dialog__pane {
    max-height: min(78vh, 46rem);
    overflow-y: auto;
    padding-right: 0.25rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent 100%);
}

/* Entry for the switched-to section. Critically damped in feel — no overshoot,
   because no gesture carried momentum into this; the 8px hints the direction of
   travel so the pane reads as arriving rather than blinking into place. */
.crm-dialog__pane-inner { animation: crm-dialog-pane-in 240ms cubic-bezier(0.32, 0.72, 0, 1); }

@keyframes crm-dialog-pane-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    /* Gentler equivalent, not nothing: the cross-fade still explains the change. */
    .crm-dialog__pane-inner { animation: crm-dialog-pane-fade 160ms ease; }
    .loop .crm-rail-item:active { transform: none; }

    @keyframes crm-dialog-pane-fade { from { opacity: 0; } to { opacity: 1; } }
}

@media (prefers-reduced-transparency: reduce) {
    .crm-dialog__pane { -webkit-mask-image: none; mask-image: none; }
}

/* Below sm the rail collapses to the section picker, so the pane owns the sheet. */
@media (max-width: 599.98px) {
    .crm-dialog__body { min-height: 0; gap: 0; }
    .crm-dialog__pane { max-height: none; -webkit-mask-image: none; mask-image: none; }
}

/* Campaign delivery rate: percentage above a slim bar, sized to the cell. */
.crm-delivery { display: flex; flex-direction: column; gap: 2px; min-width: 72px; }
.crm-delivery__bar { width: 100%; }

/* --------------------------------------------------------------------------
   Documents dropzone  (CrmDocumentsTab.razor)
   A transparent InputFile stretched over the zone receives clicks AND native
   file drops; the wrapper's drag events are visual-only.
   -------------------------------------------------------------------------- */
.crm-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.crm-dropzone--over { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.crm-dropzone__icon { font-size: 34px; color: var(--mud-palette-primary); }
.crm-dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.crm-dropzone__input:disabled { cursor: progress; }

/* --------------------------------------------------------------------------
   Billing document preview  (CrmBillingDocCard.razor)
   Invoice-style rendering shared by quote/invoice dialogs and public pages.
   -------------------------------------------------------------------------- */
.crm-billing-doc { padding: 8px 4px; }
.crm-billing-doc__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.crm-billing-doc__brand { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--mud-palette-primary); }
.crm-billing-doc__kind { font-size: 20px; font-weight: 700; letter-spacing: 1.5px; color: var(--mud-palette-text-primary); }
.crm-billing-doc__meta { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.crm-billing-doc__facts table { border-collapse: collapse; }
.crm-billing-doc__facts th {
    text-align: left;
    font-weight: 600;
    font-size: 12.5px;
    padding: 4px 12px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}
.crm-billing-doc__facts td { font-size: 12.5px; padding: 4px 12px; border: 1px solid var(--mud-palette-lines-default); }
.crm-billing-doc__status { margin-top: 10px; text-align: right; }
.crm-billing-doc__lines { margin-bottom: 12px; }
.crm-billing-doc__totals { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.crm-billing-doc__totals > div { min-width: 260px; }
.crm-billing-doc__total-row { display: flex; justify-content: space-between; padding: 5px 12px; font-size: 13.5px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.crm-billing-doc__total-row--grand { font-weight: 700; border-bottom: none; }
.crm-billing-doc__notes { border-top: 1px solid var(--mud-palette-lines-default); padding-top: 10px; }

/* --------------------------------------------------------------------------
   Campaign editor  (CrmCampaignWizard.razor, CrmCampaignBuilder.razor,
   CrmCampaignAssetPicker.razor, CrmCampaignPreviewPane.razor)
   One box for all three steps: title, step buttons, the two working columns, actions. Only
   the columns row grows, and it is minmax(0,1fr) so it may SHRINK — that is what lets the
   form and the preview each scroll on their own instead of pushing the actions off the box.
   Below 1020px the dialog goes full screen and the preview stacks UNDER the form (never
   behind a tab), each half keeping its own scroller.
   -------------------------------------------------------------------------- */
.mud-dialog.crm-campaign-wizard {
    width: min(1440px, calc(100vw - 48px));
    max-width: none;
    height: min(900px, calc(100vh - 48px));
    height: min(900px, calc(100dvh - 48px));
    max-height: none;
    display: flex;
    flex-direction: column;
}
.crm-campaign-wizard .mud-dialog-content.crm-cw__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.crm-campaign-wizard .mud-dialog-actions {
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
    gap: 8px;
}

/* the three steps — buttons, each carrying its own state */
.crm-cw-steps {
    flex: none;
    padding: 0 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}
.crm-cw-steps ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.crm-cw-steps li { flex: 1 1 0; min-width: 0; }
.crm-cw-step {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 58px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.crm-cw-step:hover:not(:disabled) { background: var(--mud-palette-surface); }
.crm-cw-step:disabled { cursor: default; opacity: .7; }
.crm-cw-step__num {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 800;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
.crm-cw-step__text { min-width: 0; }
.crm-cw-step__title { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.crm-cw-step__sub {
    display: block;
    font-size: 12.5px;
    line-height: 1.35;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-cw-step[aria-current="step"] {
    background: var(--mud-palette-surface);
    border-bottom-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}
.crm-cw-step[aria-current="step"] .crm-cw-step__num {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
/* the current step is not marked by colour alone */
.crm-cw-step[aria-current="step"] .crm-cw-step__title::after {
    content: "\00a0\00b7\00a0now";
    color: var(--mud-palette-primary);
    font-weight: 800;
}

/* the two columns */
.crm-cw-main {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    overflow: hidden;
}
.crm-cw-work {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px 28px;
    border-right: 1px solid var(--mud-palette-lines-default);
}
.crm-cw-work:focus-visible, .crm-cw-preview:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: -3px;
}
.crm-cw-work__title { margin: 0 0 16px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.crm-cw-work__section { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--mud-palette-lines-default); }
.crm-cw-work__subtitle { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.crm-cw-tools { display: flex; flex-direction: column; gap: 12px; }
.crm-cw-tools__tokens { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.crm-cw-token {
    font: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 5px 10px;
    border: 1px solid var(--mud-palette-info);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-info);
    cursor: pointer;
}
.crm-cw-token:hover { background: var(--mud-palette-info-hover); }
.crm-cw-token:focus-visible { outline: 2px solid var(--mud-palette-info); outline-offset: 2px; }
.crm-cw-tools__row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.crm-cw-preview { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

@media (max-width: 1019.98px) {
    .mud-dialog.crm-campaign-wizard {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
    .crm-cw-main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(220px, 1fr) minmax(280px, 1fr);
    }
    .crm-cw-work { border-right: 0; border-bottom: 1px solid var(--mud-palette-lines-default); padding: 16px; }
    .crm-cw-steps { padding: 0 8px; }
    .crm-cw-step { min-height: 48px; padding: 6px 8px; gap: 8px; }
    .crm-cw-step__title { font-size: 13px; }
    /* only the current step keeps its state line visible; the others keep it for AT */
    .crm-cw-step:not([aria-current="step"]) .crm-cw-step__sub {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
}

/* the live preview */
.crm-pv { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--mud-palette-background-gray); }
.crm-pv__head {
    flex: none;
    display: grid;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
.crm-pv__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.crm-pv__title { margin: 0; font-size: 14px; font-weight: 700; }
.crm-pv__inbox {
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-pv__inbox span { color: var(--mud-palette-text-secondary); }
.crm-pv__hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}
.crm-pv__stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: 14px;
}
.crm-pv__frame {
    width: 100%;
    height: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: #fff; /* emails render on white in both app themes */
}
.crm-pv__frame--phone { width: 375px; max-width: 100%; }
.crm-pv__empty { align-self: center; max-width: 280px; text-align: center; color: var(--mud-palette-text-secondary); font-size: 14px; }
.crm-pv__plain {
    align-self: flex-start;
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    font-size: 14px;
}
.crm-pv__plain--sms { max-width: 320px; border-radius: 16px 16px 16px 4px; }
.crm-pv__foot {
    flex: none;
    margin: 0;
    padding: 9px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* blocks — each row a disclosure, its fields opening underneath it */
.crm-bk-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.crm-bk {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    transition: border-color .15s ease;
}
.crm-bk:hover, .crm-bk--open { border-color: var(--mud-palette-primary); }
.crm-bk__row { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 4px; }
.crm-bk__toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.crm-bk__toggle:hover { background: var(--mud-palette-background-gray); }
.crm-bk__toggle:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 1px; }
.crm-bk__text { flex: 1 1 auto; min-width: 0; }
.crm-bk__label { display: block; font-size: 14px; font-weight: 600; }
.crm-bk__summary {
    display: block;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-bk__actions { flex: none; display: flex; align-items: center; }
.crm-bk__fields { padding: 12px 14px 16px; border-top: 1px solid var(--mud-palette-lines-default); }
.crm-bk__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 180px); gap: 12px; }
@media (max-width: 599.98px) { .crm-bk__pair { grid-template-columns: minmax(0, 1fr); } }
.crm-builder__add { margin-top: 4px; }

/* a chosen file / image / logo */
.crm-filechip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}
.crm-filechip__ext {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.crm-filechip__name { flex: 1 1 180px; min-width: 0; }
.crm-filechip__name b { display: block; font-size: 14px; overflow-wrap: anywhere; line-height: 1.4; }
.crm-filechip__name span { display: block; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.crm-filechip__actions { flex: none; display: flex; gap: 6px; flex-wrap: wrap; }

/* the inline picker — opens under the block, never as a second dialog */
.crm-assetpick {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 10px;
}
.crm-assetpick__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.crm-assetpick__search { flex: 1 1 200px; min-width: 0; }
.crm-assetpick__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }
.crm-assetpick__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.crm-assetpick__item:hover { border-color: var(--mud-palette-primary); }
.crm-assetpick__item:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 1px; }
.crm-assetpick__name { min-width: 0; }
.crm-assetpick__name b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.crm-assetpick__name span { display: block; font-size: 12.5px; color: var(--mud-palette-text-secondary); }

.crm-campaign-swatch {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    flex: none;
}
.crm-campaign-start-card {
    cursor: pointer;
    height: 100%;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.crm-campaign-start-card:hover { border-color: var(--mud-palette-primary); }

/* -------------------------------------------- procurement portals ------- */
.pport-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 12px; }
.pport-search { flex: 1 1 320px; min-width: 0; }
.pport-lvlfilter { flex: 0 1 220px; }
.pport-spacer { flex: 1 1 auto; }
.pport-views { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--mud-palette-background-gray); }
.pport-viewbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--mud-palette-text-secondary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pport-viewbtn[aria-pressed="true"] { background: var(--mud-palette-surface); color: var(--mud-palette-primary); box-shadow: var(--shadow-card); }
.pport-count { margin: 0 0 12px; font-size: 0.82rem; color: var(--mud-palette-text-secondary); }
.pport-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.pport-tile { display: flex; flex-direction: column; gap: 10px; padding: 15px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); cursor: pointer; min-width: 0; }
.pport-tile:hover { border-color: var(--mud-palette-primary); }
.pport-tilehead { display: flex; gap: 11px; align-items: flex-start; }
.pport-tilename { flex: 1 1 auto; min-width: 0; }
.pport-tilename h2 { margin: 0; font-size: 0.98rem; line-height: 1.3; }
.pport-name { padding: 0; border: none; background: none; font: inherit; font-weight: 800; text-align: left; color: var(--mud-palette-text-primary); cursor: pointer; min-height: 26px; }
.pport-name:hover { color: var(--mud-palette-primary); text-decoration: underline; }
.pport-host { margin: 2px 0 0; font-size: 0.76rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.pport-place { display: block; margin-top: 1px; }
.pport-desc { margin: 0; font-size: 0.81rem; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.pport-logo { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: contain; border: 1px solid var(--card-border); background: var(--mud-palette-background-gray); }
.pport-logo--mono { display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.5px; color: #fff; border: none; }
.pport-logo--a { background: #0a728f; } .pport-logo--b { background: #2a5cb8; }
.pport-logo--c { background: #7a3fa8; } .pport-logo--d { background: #0f7b46; }
.pport-logo--e { background: #a1521c; }
.pport-lvls, .pport-kws { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.pport-lvl { padding: 2px 9px; border-radius: 6px; font-size: 0.72rem; font-weight: 800; background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.pport-lvl--more { background: none; border: 1px solid var(--card-border); color: var(--mud-palette-text-secondary); }
.pport-kw { padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--mud-palette-background-gray); border: 1px solid var(--card-border); color: var(--mud-palette-text-secondary); }
.pport-kw--more { background: none; border-style: dashed; }
.pport-untagged { margin: 0; font-size: 0.76rem; color: var(--mud-palette-text-secondary); }
.pport-signrow { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 0.76rem; font-weight: 700; color: var(--mud-palette-success); }
.pport-signrow--no { color: var(--mud-palette-text-secondary); font-weight: 400; }
.pport-tileacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--card-border); }
.pport-golink { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pport-empty { padding: 26px; border: 1px dashed var(--card-border); border-radius: var(--radius-md); background: var(--mud-palette-background-gray); text-align: center; }
.pport-empty h2 { margin: 0 0 6px; font-size: 1rem; }
.pport-empty p { margin: 0 auto; max-width: 60ch; font-size: 0.85rem; color: var(--mud-palette-text-secondary); line-height: 1.6; }
.pport-tablewrap { position: relative; overflow-x: auto; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--card-bg); }
.pport-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.pport-table th, .pport-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--card-border); vertical-align: top; }
.pport-table thead th { background: var(--mud-palette-background-gray); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.pport-table tbody th { font-weight: 700; }
.pport-table tbody tr:hover { background: var(--mud-palette-background-gray); }
.pport-rowname { display: flex; gap: 10px; align-items: flex-start; }
.pport-rowdesc { max-width: 44ch; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.pport-rowacts { white-space: nowrap; }
.pport-rowacts > * { margin-right: 6px; }
.pport-sm { display: block; font-size: 0.74rem; font-weight: 400; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.pport-yes { font-weight: 700; color: var(--mud-palette-success); }
.pport-no { color: var(--mud-palette-text-secondary); }
.pport-kannote { margin: 0 0 10px; font-size: 0.79rem; color: var(--mud-palette-text-secondary); line-height: 1.5; max-width: 78ch; }
.pport-kanwrap { position: relative; overflow-x: auto; padding-bottom: 6px; }
.pport-kan { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; align-items: flex-start; }
.pport-kancol { flex: 0 0 268px; display: flex; flex-direction: column; gap: 9px; padding: 12px; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--mud-palette-background-gray); }
.pport-kanhead h2 { margin: 0; font-size: 0.84rem; display: flex; gap: 7px; align-items: center; }
.pport-kann { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--card-border); font-size: 0.72rem; font-weight: 800; color: var(--mud-palette-text-secondary); }
.pport-kanhead p { margin: 3px 0 0; font-size: 0.73rem; color: var(--mud-palette-text-secondary); line-height: 1.45; }
.pport-kanlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pport-kancard { display: flex; flex-direction: column; gap: 8px; padding: 11px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--card-bg); cursor: pointer; }
.pport-kancard:hover { border-color: var(--mud-palette-primary); }
.pport-kancard .pport-logo { width: 32px; height: 32px; border-radius: 8px; font-size: 0.78rem; }
.pport-kanname { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.pport-kanacts { display: flex; flex-wrap: wrap; gap: 6px; }
.pport-kanempty { margin: 0; padding: 11px; border: 1px dashed var(--card-border); border-radius: var(--radius-sm); font-size: 0.76rem; color: var(--mud-palette-text-secondary); text-align: center; }

/* PIN dialog (CrmProcurementPinDialog.razor) */
.pport-pinlede { margin: 0 0 12px; font-size: 0.85rem; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.pport-pinremember { margin: 14px 0 0; padding: 12px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); }
.pport-pinremember legend { padding: 0 6px; font-size: 0.82rem; font-weight: 800; }
.pport-pinopt-s { display: block; font-size: 0.76rem; font-weight: 400; color: var(--mud-palette-text-secondary); line-height: 1.45; }
.pport-pinerror { margin: 10px 0 0; font-size: 0.83rem; line-height: 1.55; color: var(--mud-palette-error); }

/* Detail slide-out (CrmProcurementPortalViewDialog.razor) */
.pport-vbody { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; }
.pport-vsec h3 { margin: 0 0 7px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.pport-vsign { padding-top: 13px; border-top: 1px solid var(--card-border); }
.pport-gobig { align-self: flex-start; min-height: 44px; padding: 0 16px; }
.pport-addr { margin: 0; font-style: normal; font-size: 0.86rem; line-height: 1.6; }
.pport-none { margin: 0; font-size: 0.82rem; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.pport-kv { display: flex; gap: 9px; align-items: baseline; margin: 0 0 5px; font-size: 0.8rem; }
.pport-k { flex: 0 0 66px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.pport-v { min-width: 0; overflow-wrap: anywhere; }
.pport-pw { font-size: 0.8rem; background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--mud-palette-warning); }
.pport-signacts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.pport-shared { display: flex; gap: 6px; align-items: flex-start; margin: 9px 0 0; font-size: 0.75rem; color: var(--mud-palette-text-secondary); line-height: 1.45; }
.pport-auto { display: flex; gap: 8px; align-items: flex-start; margin: 11px 0 0; padding: 10px 12px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--mud-palette-background-gray); font-size: 0.78rem; color: var(--mud-palette-text-secondary); line-height: 1.55; }
.pport-audit { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; }
.pport-audit li { padding: 6px 0; border-bottom: 1px solid var(--card-border); }
.pport-audit li:last-child { border-bottom: 0; }
.pport-vfoot { display: flex; gap: 9px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--card-border); background: var(--mud-palette-background-gray); }

/* Edit panel (CrmProcurementPortalEditDialog.razor) */
.pport-errsum { padding: 13px 15px; border: 2px solid var(--mud-palette-error); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); }
.pport-errsum h3 { margin: 0 0 7px; font-size: 0.95rem; color: var(--mud-palette-error); }
.pport-errsum ul { margin: 0; padding-left: 20px; font-size: 0.85rem; line-height: 1.7; }
.pport-fs { margin: 0; padding: 14px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--mud-palette-background-gray); display: flex; flex-direction: column; gap: 13px; }
.pport-fs legend { padding: 0 6px; font-size: 0.82rem; font-weight: 800; }
.pport-lede { margin: 0; font-size: 0.8rem; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.pport-lvlgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(228px, 100%), 1fr)); gap: 8px; }
.pport-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 13px; }
.pport-f { display: flex; flex-direction: column; gap: 5px; }
.pport-flabel { font-size: 0.79rem; font-weight: 700; }
.pport-opt { font-weight: 600; color: var(--mud-palette-text-secondary); }
.pport-logorow { display: flex; gap: 12px; align-items: center; }
.pport-help { margin: 0; font-size: 0.77rem; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.pport-kwn { margin: 8px 0 5px; font-size: 0.75rem; font-weight: 700; color: var(--mud-palette-text-secondary); }

/* --------------------------------------------------------------------------
   Leads table  (CrmLeadCardsView.razor — list view + saved-view tabs)
   --------------------------------------------------------------------------
   The reference anatomy from the leads redesign spec, rebuilt on the app's
   tokens so light/dark ride along automatically. Interaction detail follows
   the same rules as the rest of the loop surface: feedback on press, hover
   reveals that stay keyboard-reachable, visible focus, reduced-motion safe.
   -------------------------------------------------------------------------- */

/* Saved-view tab strip */
.leads-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--card-border);
    overflow-x: auto;
    margin: 4px 0 14px;
}

.leads-tab {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 9px 13px;
    min-height: 42px;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.leads-tab:hover {
    color: var(--text-heading);
    background: var(--mud-palette-background-gray);
}

.leads-tab:active { transform: translateY(1px); }

.leads-tab[aria-pressed="true"] {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.leads-tab__n {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--text-caption) 14%, transparent);
    color: var(--mud-palette-text-secondary);
}

.leads-tab[aria-pressed="true"] .leads-tab__n {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

/* Threshold hint under the tabs — shown while the Going cold view is active */
.leads-hint {
    margin: -6px 0 12px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.leads-hint b { color: var(--text-heading); }

.leads-hint a {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Bulk action bar — appears with the first selected row */
.leads-bulkbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--card-bg));
    color: var(--mud-palette-primary);
    font-size: 0.85rem;
    font-weight: 700;
}

/* .loop-clearsel (contact cards) reuses this rule rather than restating it — same control,
   same behavior, just a different bar. */
.leads-clearsel,
.loop-clearsel {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: 0;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    margin-left: auto;
}

.leads-clearsel:hover,
.loop-clearsel:hover {
    background: color-mix(in srgb, var(--text-caption) 12%, transparent);
    color: var(--text-heading);
}

/* Table card */
.leads-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.leads-tablewrap {
    overflow-x: auto;
}

.leads-tablewrap:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: -3px;
}

.leads-table {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.leads-table thead th {
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--card-border);
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    padding: 0;
}

.leads-table thead th.leads-plain,
.leads-table thead th.leads-colcheck,
.leads-table thead th.leads-colend { padding: 10px 12px; }

.leads-table tbody th,
.leads-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--card-border);
    text-align: left;
    vertical-align: middle;
    font-weight: 400;
    color: var(--text-body);
}

.leads-table tbody tr:last-child th,
.leads-table tbody tr:last-child td { border-bottom: 0; }

.leads-table tbody tr {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.leads-table tbody tr:hover { background: var(--mud-palette-background-gray); }

.leads-table tbody tr.is-selected {
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
}

.leads-colcheck { width: 44px; }
.leads-colend { width: 132px; text-align: right; }

.leads-table input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
    margin: 0;
    display: block;
}

/* Sortable header — a button filling the cell; aria-sort lives on the th */
.leads-sort {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.leads-sort:hover {
    background: color-mix(in srgb, var(--text-caption) 12%, transparent);
    color: var(--text-heading);
}

.leads-sort__arrow {
    font-size: 15px !important;
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

th[aria-sort="ascending"] .leads-sort,
th[aria-sort="descending"] .leads-sort { color: var(--mud-palette-primary); }
th[aria-sort="ascending"] .leads-sort__arrow,
th[aria-sort="descending"] .leads-sort__arrow { opacity: 1; }
th[aria-sort="descending"] .leads-sort__arrow { transform: rotate(180deg); }

/* Name cell — a real link with the email as a quiet subline */
.leads-namecell { cursor: default; }

/* A bare <button> (it opens the reach sheet), so it needs the reset a link doesn't:
   font-family is not inherited by form controls, and the UA chrome has to go. */
.leads-name {
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--mud-palette-primary);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
}

.leads-name:hover { text-decoration: underline; }

.leads-sub {
    display: block;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--text-caption);
}

/* Source tag — reference data, deliberately quieter than the status pill */
.leads-chip--quiet {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--text-caption) 13%, transparent);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Unassigned → an action, not dead text */
.leads-assign {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 0 10px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: 1px dashed var(--card-hover-border, var(--card-border));
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.leads-assign:hover {
    border-style: solid;
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
}

.leads-assign:active { transform: scale(0.97); }

/* Going-cold highlight on the Last activity cell. Mixing toward the heading
   color pushes the amber darker on light themes and lighter on dark ones, so
   it clears contrast in both without a per-theme override. */
.leads-stale {
    color: color-mix(in srgb, var(--mud-palette-warning) 65%, var(--text-heading));
    font-weight: 700;
}

/* Row quick-actions — revealed on hover, but always keyboard-reachable */
.leads-rowacts {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
    align-items: center;
}

.leads-rowbtn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-caption);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.leads-table tr:hover .leads-rowbtn,
.leads-table tr:focus-within .leads-rowbtn,
.leads-rowbtn:focus-visible { opacity: 1; }

.leads-rowbtn:hover {
    background: color-mix(in srgb, var(--text-caption) 14%, transparent);
    color: var(--text-heading);
}

.leads-rowbtn:active { transform: scale(0.94); }

/* Pager */
.leads-pager {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid var(--card-border);
    background: var(--mud-palette-background-gray);
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.leads-pager__label { white-space: nowrap; }

.leads-perpage {
    font: inherit;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-body);
    cursor: pointer;
}

.leads-pager__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.leads-pager__range { margin-right: 4px; white-space: nowrap; }

.leads-pagebtn {
    min-width: 32px;
    min-height: 32px;
    padding: 0 9px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.leads-pagebtn:hover:not([disabled]) {
    background: var(--mud-palette-background-gray);
    color: var(--text-heading);
}

.leads-pagebtn:active:not([disabled]) { transform: translateY(1px); }

.leads-pagebtn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Visible keyboard focus across the bespoke table controls, plus their loop-cards twins */
.leads-tab:focus-visible,
.leads-sort:focus-visible,
.leads-name:focus-visible,
.leads-assign:focus-visible,
.leads-rowbtn:focus-visible,
.leads-clearsel:focus-visible,
.leads-pagebtn:focus-visible,
.leads-perpage:focus-visible,
.leads-table input[type="checkbox"]:focus-visible,
.loop-clearsel:focus-visible,
.loop-card__check input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .leads-tab, .leads-sort, .leads-sort__arrow, .leads-assign, .leads-rowbtn,
    .leads-pagebtn, .leads-table tbody tr {
        transition: none;
    }
    .leads-tab:active, .leads-assign:active, .leads-rowbtn:active, .leads-pagebtn:active:not([disabled]) {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Lead Form builder (LeadFormAdmin) + public lead form language switch.
   Field table is a real <table>; switches are <button role="switch"> with a
   visible On/Off word beside them (1.4.1 — state is never colour-only).
   -------------------------------------------------------------------------- */
.lf-page { padding-bottom: 24px; }

.lf-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.lf-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 700;
    border: 1px solid var(--card-border);
    background: var(--card-bg); color: var(--text-body);
}
.lf-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.lf-pill--live {
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 12%, var(--card-bg));
    border-color: transparent;
}
.lf-pill--off {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, var(--card-bg));
    border-color: transparent;
}

.lf-workarea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 20px;
    margin-top: 16px;
    align-items: start;
}
@media (max-width: 1180px) { .lf-workarea { grid-template-columns: minmax(0, 1fr); } }
.lf-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.lf-card { overflow: visible; }
.lf-card__head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 18px; border-bottom: 1px solid var(--card-border);
}
.lf-card__title {
    margin: 0; font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-caption);
}
.lf-card__hint { margin-left: auto; font-size: 0.8rem; color: var(--text-caption); }
.lf-card__body { padding: 18px; }
.lf-card__foot {
    margin: 0; padding: 12px 18px; border-top: 1px solid var(--card-border);
    font-size: 0.8125rem; color: var(--text-caption);
}

/* Field table */
.lf-tablewrap { overflow-x: auto; }
.lf-tablewrap:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.lf-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 0.875rem; }
.lf-table th, .lf-table td {
    padding: 8px 12px; text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--card-border);
}
.lf-table thead th {
    background: color-mix(in srgb, var(--text-caption) 7%, var(--card-bg));
    font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-caption); white-space: nowrap;
}
.lf-table tbody th { font-weight: 700; color: var(--text-heading); }
.lf-table tbody tr:hover,
.lf-table tbody tr:focus-within { background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent); }
.lf-table tbody tr:last-child > * { border-bottom: 0; }
.lf-table__num { width: 44px; color: var(--text-caption); font-variant-numeric: tabular-nums; }
.lf-table__order { width: 104px; white-space: nowrap; }
.lf-table__sw { width: 108px; }
.lf-fieldname { display: flex; flex-direction: column; gap: 2px; }
.lf-fieldname__key {
    font-size: 0.75rem; font-weight: 500; color: var(--text-caption);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.lf-locked {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    color: var(--mud-palette-success-darken, var(--mud-palette-success));
    background: color-mix(in srgb, var(--mud-palette-success) 12%, var(--card-bg));
}
.lf-orderbtn { border: 1px solid var(--card-border) !important; border-radius: 8px !important; margin-right: 4px; }

/* Switch */
.lf-sw { display: flex; align-items: center; gap: 9px; }
.lf-switch {
    position: relative; flex: none; width: 46px; height: 26px; padding: 0;
    border-radius: 999px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--text-caption) 55%, transparent);
    background: color-mix(in srgb, var(--text-caption) 18%, var(--card-bg));
    transition: background-color .15s ease, border-color .15s ease;
}
.lf-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .25);
    transition: transform .15s ease;
}
.lf-switch[aria-checked="true"] { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.lf-switch[aria-checked="true"]::after { transform: translateX(20px); }
.lf-switch[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.lf-switch:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.lf-sw__state { min-width: 26px; font-size: 0.8rem; font-weight: 700; color: var(--text-caption); }
.lf-switch[aria-checked="true"] + .lf-sw__state { color: var(--mud-palette-primary); }
@media (forced-colors: active) {
    .lf-switch { border: 1px solid ButtonBorder; }
    .lf-switch[aria-checked="true"]::after { background: Highlight; }
}

/* Sharing */
.lf-live {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 18px; border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    background: color-mix(in srgb, var(--text-caption) 5%, var(--card-bg));
}
.lf-live__txt { min-width: 0; flex: 1 1 220px; }
.lf-live__txt b { display: block; font-size: 0.875rem; color: var(--text-heading); }
.lf-live__txt span { font-size: 0.8rem; color: var(--text-caption); }
.lf-field { margin-bottom: 18px; }
.lf-field__label { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--text-body); margin-bottom: 4px; }
.lf-field__desc { margin: 0 0 6px; font-size: 0.8rem; color: var(--text-caption); }
.lf-linkrow { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.lf-input {
    flex: 1; min-width: 200px; min-height: 40px; padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--text-caption) 55%, transparent);
    border-radius: 8px; background: var(--card-bg); color: var(--text-body); font: inherit;
}
.lf-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }
.lf-danger {
    padding: 12px 14px; border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 7%, var(--card-bg));
}
.lf-danger p { margin: 0 0 10px; font-size: 0.8125rem; color: var(--text-body); }

/* Preview rail */
.lf-rail { position: sticky; top: 80px; min-width: 0; }
@media (max-width: 1180px) { .lf-rail { position: static; } }
.lf-viewswitch {
    margin-left: auto; display: flex; gap: 4px; padding: 3px; border-radius: 9px;
    border: 1px solid var(--card-border);
    background: color-mix(in srgb, var(--text-caption) 7%, var(--card-bg));
}
.lf-viewswitch button {
    min-height: 32px; padding: 0 12px; border-radius: 7px; cursor: pointer;
    border: 1px solid transparent; background: transparent; font: inherit;
    font-size: 0.8125rem; font-weight: 600; color: var(--text-body);
}
.lf-viewswitch button[aria-pressed="true"] {
    background: var(--card-bg); color: var(--text-heading);
    border-color: var(--card-border); box-shadow: var(--shadow-card);
}
.lf-device {
    margin: 0 auto; max-width: 100%; padding: 14px; border-radius: 16px;
    border: 1px solid var(--card-border);
    background: color-mix(in srgb, var(--text-caption) 6%, var(--card-bg));
    transition: max-width .2s ease;
}
.lf-device--mobile { max-width: 360px; }
/* MudGrid breakpoints follow the VIEWPORT, not this frame — collapse every grid item to one
   column so the mobile preview actually looks like a phone. */
.lf-device--mobile .mud-grid-item { flex-basis: 100%; max-width: 100%; }
.lf-pubform { padding: 18px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card-bg); }
.lf-previewfoot { margin: 12px 0 0; text-align: center; font-size: 0.8rem; color: var(--text-caption); }

/* Sticky save bar */
.lf-savebar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 20px; padding: 10px 18px;
    border: 1px solid var(--card-border); border-radius: var(--radius-md);
    background: var(--card-bg); box-shadow: 0 -4px 14px rgba(16, 24, 40, .08);
}
.lf-savebar__status {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.875rem; font-weight: 700;
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
}
.lf-savebar__spacer { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
    .lf-switch, .lf-switch::after, .lf-device { transition: none; }
}

/* Public page language switch (PublicLanguageSwitcher CssClass="crm-public-lang") */
.crm-public-lang { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.crm-public-lang form { margin: 0; }
.crm-public-lang__btn {
    min-height: 32px; padding: 0 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent; background: transparent; font: inherit;
    font-size: 0.8125rem; color: var(--text-body);
}
.crm-public-lang__btn:hover { background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); }
.crm-public-lang__btn[aria-current="true"] { font-weight: 700; color: var(--text-heading); border-color: var(--card-border); }

/* --------------------------------------------------------------------------
   Accounts list (AccountsList.razor). Rides the leads table anatomy (leads-*)
   and adds only what accounts need: a filter toolbar, the name cell with its
   initials tile, the data-completeness banner and money/number cells.
   -------------------------------------------------------------------------- */
.acct-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.acct-toolbar__search { flex: 1 1 240px; max-width: 360px; min-width: 200px; }
.acct-toolbar .acct-filter { flex: 0 1 170px; min-width: 150px; }
.acct-toolbar__right { margin-left: auto; }

.acct-menu-note {
    margin-left: 6px;
    font-size: 0.75rem;
    color: var(--text-caption);
}

/* Data-completeness banner. The amber is mixed toward the heading colour so it
   clears 4.5:1 on light AND dark surfaces without a per-theme override. */
.acct-health {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--card-border);
    border-left: 4px solid color-mix(in srgb, var(--mud-palette-warning) 65%, var(--text-heading));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, var(--card-bg));
    font-size: 0.85rem;
    color: var(--text-body);
}

.acct-health__icon { color: color-mix(in srgb, var(--mud-palette-warning) 65%, var(--text-heading)); flex: none; }
.acct-health__text { flex: 1 1 280px; }
.acct-health__text strong { color: var(--text-heading); }
.acct-health__btn { margin-left: auto; }

.acct-meter {
    flex: none;
    width: 120px;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-caption) 20%, transparent);
}

.acct-meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-warning) 65%, var(--text-heading));
}

.acct-resultline {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.acct-resultline b { color: var(--text-heading); }

/* Rows are not click targets here — the account name is the link. */
.acct-table tbody tr { cursor: default; }

.acct-namecell { display: flex; align-items: center; gap: 10px; }

.acct-logo {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.acct-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.acct-name:hover { text-decoration: underline; }

/* Every link in a themed table wears the theme's link ink explicitly — an unstyled
   tel: link falls back to the UA blue, which fails 1.4.3 on the dark surface. */
.acct-link {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.acct-money {
    display: block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-heading);
}

.acct-num { font-variant-numeric: tabular-nums; }

.acct-add { min-height: 28px; padding: 0 9px; }
.acct-add .mud-icon-root, .leads-assign .mud-icon-root { font-size: 15px; }

/* Row quick-actions are anchors here (mailto:/tel:) — keep them looking like the buttons. */
a.leads-rowbtn { text-decoration: none; }

h2.crm-empty__title { font-size: 1rem; margin: 0 0 4px; }

.acct-name:focus-visible,
.acct-link:focus-visible,
.acct-check:focus-visible,
.acct-selall:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (max-width: 600px) {
    .acct-toolbar__search, .acct-toolbar .acct-filter { flex: 1 1 100%; max-width: none; }
    .acct-toolbar__right { margin-left: 0; }
    .acct-health__btn { margin-left: 0; }
}

@media (forced-colors: active) {
    .acct-meter { border: 1px solid CanvasText; }
    .acct-meter > span { background: Highlight; }
    .acct-health { border-left-color: CanvasText; }
}

/* --------------------------------------------------------------------------
   CRM Overview (CrmHome.razor) — tansi-crm-overview-redesign.html.
   KPI tiles are links (label · value · delta · sparkline, one hero figure);
   charts are inline SVG with a table view each. Chart colours are the
   mockup's validated ordinal blue ramp, re-stepped (not inverted) for dark.
   Chart TEXT never wears a data colour — ink tokens only.
   -------------------------------------------------------------------------- */
:root, .mud-theme-light {
    --ov-stage-1: #86b6ef; --ov-stage-2: #5598e7; --ov-stage-3: #2a78d6; --ov-stage-4: #1c5cab; --ov-stage-5: #104281;
    --ov-series: #2a78d6;
    --ov-series-wash: rgba(42, 120, 214, .10);
    --ov-spark: #b6bfcd;
    --ov-grid: #e1e0d9;
    --ov-axis: #c3c2b7;
    --ov-tick: #767268;   /* 4.8:1 on white */
    --ov-ink: #4a5462;    /* 7.68:1 on white */
    --ov-ease: cubic-bezier(.2, .8, .2, 1);   /* fast response, soft settle, no overshoot */
    --ov-tip-bg: rgba(255, 255, 255, .82);
}
.mud-theme-dark {
    --ov-stage-1: #b7d3f6; --ov-stage-2: #86b6ef; --ov-stage-3: #3987e5; --ov-stage-4: #256abf; --ov-stage-5: #184f95;
    --ov-series: #3987e5;
    --ov-series-wash: rgba(57, 135, 229, .16);
    --ov-spark: #4a5563;
    --ov-grid: #2c2c2a;
    --ov-axis: #383835;
    --ov-tick: #9aa6b5;
    --ov-ink: #c0cad6;
    --ov-tip-bg: rgba(31, 34, 48, .82);
}

.ov-range {
    min-height: 36px; padding: 0 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-inputs, var(--card-hover-border));
    background: var(--card-bg); color: var(--text-heading); font: inherit; font-size: .875rem;
}
.ov-range:focus-visible,
.ov-tile:focus-visible,
.ov-btn:focus-visible,
.ov-attention a:focus-visible,
.ov-tasklist a:focus-visible,
.ov-jump a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ov-hit:focus-visible { outline: none; stroke: var(--focus); stroke-width: 2; }

/* KPI row */
.ov-kpis { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 18px; }
@media (max-width: 1180px) { .ov-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ov-kpis { grid-template-columns: 1fr; } }

.ov-tile {
    position: relative; display: block; min-width: 0; padding: 16px 18px;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card); color: inherit; text-decoration: none;
    transition: border-color 160ms var(--ov-ease), box-shadow 160ms var(--ov-ease), transform 160ms var(--ov-ease);
    font-optical-sizing: auto;
}
.ov-tile:hover { border-color: var(--card-hover-border); box-shadow: var(--shadow-card-hover, var(--shadow-card)); }
/* Feedback lives on the press, and it is instant. */
.ov-tile:active { transform: scale(.985); transition-duration: 80ms; }
.ov-tile__go {
    position: absolute; top: 12px; right: 12px; display: flex; color: var(--text-caption);
    transition: transform 160ms var(--ov-ease), color 160ms var(--ov-ease);
}
/* The arrow leans toward where the tile goes — the motion hints at the outcome. */
.ov-tile:hover .ov-tile__go, .ov-tile:focus-visible .ov-tile__go { color: var(--primary-ink); transform: translate(2px, -2px); }
.ov-tile__label { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: var(--text-caption); }
.ov-tile__value {
    margin: 6px 0 0; font-size: 2rem; line-height: 1.05; font-weight: 800; letter-spacing: -.025em;
    color: var(--text-heading); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
/* Exactly one hero figure per view; tracking tightens as the type grows. */
.ov-tile--hero .ov-tile__value { font-size: 3.25rem; line-height: 1; letter-spacing: -.04em; }
.ov-tile__unit {
    margin-left: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--text-caption);
    vertical-align: baseline; white-space: nowrap; overflow-wrap: normal;
}
.ov-tile__note { display: block; margin-top: 4px; font-size: .75rem; color: var(--text-caption); }
.ov-delta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; font-size: .8rem; font-weight: 700; }
.ov-delta--good { color: var(--success-ink); }
.ov-delta--bad { color: var(--danger-ink); }
.ov-delta--flat { color: var(--text-caption); }
.ov-delta__period { color: var(--text-caption); font-weight: 500; }
.ov-spark { display: block; width: 100%; height: 34px; margin-top: 10px; overflow: visible; }
.ov-endmarker { fill: var(--ov-series); stroke: var(--card-bg); stroke-width: 2; }

/* Layout */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
@media (max-width: 1180px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
.ov-col { min-width: 0; }
@media (max-width: 600px) { .ov-tile--hero .ov-tile__value { font-size: 2.6rem; } }
@media (max-width: 400px) { .ov-tile--hero .ov-tile__value { font-size: 2.2rem; } }

.ov-card {
    min-width: 0; margin-bottom: 18px;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-card);
}
.ov-card__head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
    padding: 16px 16px 0;
}
.ov-card__head h2 { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--text-heading); }
.ov-card__tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ov-card__cap { flex-basis: 100%; margin: 2px 0 0; font-size: .8rem; color: var(--text-caption); }
.ov-card__body { padding: 16px; }
.ov-card__body--tight { padding: 8px 10px; }

.ov-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
    border-radius: 8px; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none;
    border: 1px solid var(--mud-palette-lines-inputs, var(--card-hover-border));
    background: var(--card-bg); color: var(--text-heading);
}
.ov-btn { transition: background-color 120ms var(--ov-ease), transform 120ms var(--ov-ease); }
.ov-btn:hover { background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--card-bg)); }
.ov-btn:active, .ov-jump a:active { transform: scale(.97); transition-duration: 60ms; }
.ov-btn--sm { min-height: 32px; padding: 0 10px; font-size: .8rem; }

/* Charts */
.ov-figure { margin: 0; }
.ov-chartinner { position: relative; }
/* Below 600px a 560-unit chart would shrink its text to ~6px. Keep a readable floor and let
   the chart scroll sideways — graphics are exempt from 1.4.10, and the table view reflows. */
@media (max-width: 600px) {
    .ov-chartscroll {
        overflow-x: auto; padding-bottom: 4px;
        /* Scroll-edge cue: a soft shade marks the side with more chart, gone at each end. */
        background:
            linear-gradient(to right, var(--card-bg) 30%, transparent) left / 24px 100% no-repeat local,
            linear-gradient(to left, var(--card-bg) 30%, transparent) right / 24px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, .14), transparent) left / 10px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, .14), transparent) right / 10px 100% no-repeat scroll;
    }
    .ov-chartinner { min-width: 480px; }
}
.ov-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ov-gridline { stroke: var(--ov-grid); stroke-width: 1; shape-rendering: crispEdges; }
.ov-axisline { stroke: var(--ov-axis); stroke-width: 1; shape-rendering: crispEdges; }
.ov-crosshair { stroke: var(--ov-axis); stroke-width: 1; shape-rendering: crispEdges; visibility: hidden; }
.ov-ticktext { fill: var(--ov-tick); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.ov-rowlabel { fill: var(--ov-ink); font-size: 12px; font-weight: 600; font-family: inherit; }
.ov-valuelabel { fill: var(--ov-ink); font-size: 11.5px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums; }
.ov-bar { transition: opacity 120ms var(--ov-ease); }
.ov-chartwrap:not(.is-dismissed) .ov-chartinner:has(.ov-hit:is(:hover, :focus)) .ov-bar { opacity: .5; }
.ov-hit { fill: transparent; cursor: pointer; }
.ov-tip {
    display: none; position: absolute; z-index: 20; pointer-events: none;
    transform: translate(-50%, -100%); transform-origin: 50% 100%;
    min-width: 130px; padding: 8px 10px; border-radius: 10px; font-size: .8rem; line-height: 1.4;
    background: var(--ov-tip-bg); color: var(--text-heading);
    -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--card-hover-border); box-shadow: 0 6px 18px rgba(16, 24, 40, .14);
    animation: ov-tip-in 140ms var(--ov-ease);
}
.ov-tip--below { transform: translate(-50%, 0); transform-origin: 50% 0; }
/* Materialize from the anchor: scale and opacity together, never a bare fade. */
@keyframes ov-tip-in { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
.ov-tip p { margin: 0; }
.ov-tip__t { font-weight: 800; margin-bottom: 3px !important; }
.ov-tip__r { display: flex; align-items: center; gap: 7px; color: var(--text-body); }
.ov-tip__sw, .ov-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.ov-swatch { margin-right: 7px; }
.ov-single { margin: 0; font-size: .9rem; color: var(--text-body); }

.ov-tableview[hidden] { display: none; }
.ov-tableview:not([hidden]) { animation: ov-reveal 180ms var(--ov-ease); }
@keyframes ov-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ov-tableview table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .85rem; }
.ov-tableview caption { text-align: left; padding-bottom: 8px; font-size: .8rem; color: var(--text-caption); }
.ov-tableview th, .ov-tableview td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--card-border); color: var(--text-body); }
.ov-tableview thead th {
    background: var(--section-bg); color: var(--text-caption);
    font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
}
.ov-tableview .num { text-align: right; font-variant-numeric: tabular-nums; }
.ov-tableview tbody tr:last-child th, .ov-tableview tbody tr:last-child td { border-bottom: 0; font-weight: 700; }

/* Empty states */
.ov-empty { text-align: center; padding: 22px 12px; }
.ov-empty__ico {
    display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%;
    background: var(--success-soft); color: var(--success-ink);
}
.ov-empty__ico--muted { background: var(--section-bg); color: var(--text-caption); }
.ov-empty h3 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--text-heading); }
.ov-empty p { margin: 4px 0 12px; font-size: .85rem; color: var(--text-caption); }

/* Needs attention */
.ov-attention { list-style: none; margin: 0; padding: 0; }
.ov-attention li { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--card-border); }
.ov-attention li:last-child { border-bottom: 0; }
.ov-attention__n { min-width: 26px; font-size: 1.25rem; font-weight: 800; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.ov-attention__lbl { font-size: .85rem; color: var(--text-body); }
.ov-attention li.is-zero .ov-attention__n { color: var(--text-caption); }
.ov-attention a { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--primary-ink); text-decoration: none; }
.ov-attention a:hover { text-decoration: underline; }

/* Tasks */
.ov-tasklist { list-style: none; margin: 0; padding: 0; }
.ov-tasklist li { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--card-border); }
.ov-tasklist li:last-child { border-bottom: 0; }
.ov-tasklist__main { min-width: 0; flex: 1; }
.ov-tasklist__t { margin: 0; font-size: .85rem; font-weight: 700; color: var(--text-heading); overflow-wrap: anywhere; }
.ov-tasklist__t a { color: var(--primary-ink); text-decoration: none; }
.ov-tasklist__t a:hover { text-decoration: underline; }
.ov-tasklist__m { margin: 2px 0 0; font-size: .78rem; color: var(--text-caption); }
.ov-state {   /* status is icon + word, never colour alone */
    display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; border-radius: 999px;
    font-size: .72rem; font-weight: 800; white-space: nowrap;
}
.ov-state--overdue { background: var(--danger-soft); color: var(--danger-ink); }
.ov-state--today { background: var(--warn-soft); color: var(--warn-ink); }
.ov-state--ok { background: var(--success-soft); color: var(--success-ink); }
.ov-more { margin: 8px 0 0; font-size: .78rem; color: var(--text-caption); }

/* Jump to */
.ov-jump { list-style: none; margin: 0; padding: 0; }
.ov-jump a {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; margin: 1px 0;
    border-radius: 8px; color: var(--text-body); text-decoration: none; font-size: .875rem;
}
.ov-jump a:hover { background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); color: var(--text-heading); }
.ov-jump__count { margin-left: auto; font-size: .78rem; color: var(--text-caption); font-variant-numeric: tabular-nums; }

/* Reduced motion keeps the feedback, drops the movement: cross-fades only. */
@media (prefers-reduced-motion: reduce) {
    .ov-tile, .ov-tile__go, .ov-btn, .ov-bar { transition: none; }
    .ov-tile:active, .ov-btn:active, .ov-jump a:active { transform: none; }
    .ov-tile:hover .ov-tile__go, .ov-tile:focus-visible .ov-tile__go { transform: none; }
    .ov-tip { animation: ov-fade 120ms linear; }
    .ov-tableview:not([hidden]) { animation: ov-fade 120ms linear; }
}
@keyframes ov-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-transparency: reduce) {
    .ov-tip { background: var(--mud-palette-surface, var(--card-bg)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .ov-tile, .ov-card, .ov-tip { border-color: var(--text-caption); }
    .ov-tip { background: var(--mud-palette-surface, var(--card-bg)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
    .ov-tile, .ov-card, .ov-btn, .ov-state { border: 1px solid ButtonBorder; }
    .ov-bar { fill: CanvasText; }
}

/* --------------------------------------------------------------------------
   Lead profile (LeadDetail.razor + CrmActivityTimeline Composer mode) —
   tansi-lead-redesign.html. Record header with ONE filled action, a status
   strip that never relies on colour alone, a path bar, ARIA tabs with
   counts, a composer above a card feed, and a sticky rail that drops under
   the main column below 1080px. App tokens only, so dark rides along.
   -------------------------------------------------------------------------- */
.lp { --lp-ease: cubic-bezier(.2, .8, .2, 1); --lp-line: var(--mud-palette-lines-default, var(--card-border));
      --lp-control: var(--mud-palette-lines-inputs, var(--card-hover-border)); --lp-tint: var(--mud-palette-background-gray); }

/* Breadcrumb */
.lp-crumbs { font-size: .8125rem; color: var(--text-caption); margin-bottom: 12px; }
.lp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--text-caption); }
.lp-crumbs a { color: var(--text-body); text-underline-offset: 2px; }
.lp-crumbs [aria-current="page"] { color: var(--text-heading); font-weight: 600; }

/* Record header */
.lp-head {
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md, 14px);
    box-shadow: var(--shadow-card); padding: 18px 20px;
}
.lp-head__top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.lp-avatar {
    flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; font-size: 1.125rem;
    border: 1px solid var(--lp-line);
}
.lp-identity { flex: 1; min-width: 0; }
.lp-identity__name {
    margin: 0; font-size: 1.625rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em;
    color: var(--text-heading); overflow-wrap: anywhere;
}
.lp-identity__sub { margin: 4px 0 0; font-size: .84rem; color: var(--text-caption); }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Buttons (bespoke so hierarchy is exact: one filled, the rest outlined) */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 14px; border-radius: 9px; cursor: pointer;
    font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--lp-control); background: var(--card-bg); color: var(--text-heading);
    transition: background-color 160ms var(--lp-ease), border-color 160ms var(--lp-ease), transform 80ms var(--lp-ease);
}
.lp-btn:hover:not(:disabled) { background: var(--lp-tint); }
.lp-btn:active:not(:disabled) { transform: scale(.98); }
.lp-btn:disabled { cursor: not-allowed; opacity: .55; }
.lp-btn .mud-icon-root { font-size: 1.1rem; }
.lp-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.lp-btn--primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.lp-btn--sm { min-height: 34px; padding: 0 11px; font-size: .8125rem; }
.lp-iconbtn {
    width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--text-body);
}
.lp-iconbtn:hover { background: var(--lp-tint); color: var(--text-heading); }
.lp-menu__line { display: block; }
.lp-menu__why { display: block; font-size: .75rem; color: var(--text-caption); }

.lp :where(a, button, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* Status strip */
.lp-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lp-line);
}
.lp-pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; line-height: 1.3;
    border: 1px solid var(--lp-line); background: var(--lp-tint); color: var(--text-body);
}
.lp-pill .mud-icon-root { font-size: 1rem; }
.lp-pill--primary { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.lp-pill--ok { background: var(--success-soft); color: var(--success-ink); border-color: transparent; }
.lp-pill--warn { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.lp-pill--danger { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent; }
.lp-pill--owner { margin-left: auto; font-weight: 600; }
.lp-pill--owner .crm-owner__avatar { width: 22px; height: 22px; font-size: .65rem; }
.lp-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* Path bar */
.lp-stage { margin-top: 16px; }
.lp-stage__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.lp-step { flex: 1 1 110px; }
.lp-step__bar { display: block; height: 6px; border-radius: 999px; margin-bottom: 6px; background: var(--lp-line); }
.lp-step--done .lp-step__bar, .lp-step--current .lp-step__bar { background: var(--primary); }
.lp-step--current .lp-step__bar { box-shadow: 0 0 0 2px var(--primary-soft); }
.lp-step__lbl { font-size: .75rem; font-weight: 600; color: var(--text-caption); }
.lp-step--current .lp-step__lbl { color: var(--primary-ink); font-weight: 700; }
.lp-stage__note { margin: 8px 0 0; font-size: .8rem; color: var(--text-body); }

/* Work area: fluid main column + 336px sticky rail */
.lp-work { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 20px; margin-top: 20px; align-items: start; }
.lp-card {
    min-width: 0; background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: var(--radius-md, 14px); box-shadow: var(--shadow-card);
}
.lp-card__title {
    margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--lp-line);
    font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-caption);
}
.lp-card__body { padding: 16px; }
.lp-rail { display: grid; gap: 16px; position: sticky; top: 76px; }

/* Tabs */
.lp-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--lp-line); overflow-x: auto; }
.lp-tab {
    appearance: none; background: transparent; border: 0; border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0; padding: 12px 14px; min-height: 44px; cursor: pointer; white-space: nowrap;
    font: inherit; font-size: .875rem; font-weight: 600; color: var(--text-body);
    transition: color 160ms var(--lp-ease), background-color 160ms var(--lp-ease);
}
.lp-tab:hover { color: var(--text-heading); background: var(--lp-tint); }
.lp-tab[aria-selected="true"] { color: var(--primary-ink); border-bottom-color: var(--primary); }
.lp-tab__n {
    margin-left: 7px; padding: 1px 6px; border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: var(--lp-tint); color: var(--text-caption); font-variant-numeric: tabular-nums;
}
.lp-tab[aria-selected="true"] .lp-tab__n { background: var(--primary-soft); color: var(--primary-ink); }
.lp-panel { padding: 16px; }
.lp .lp-tab:focus-visible, .lp .lp-panel:focus-visible { outline-offset: -3px; }

/* Composer */
.lp-composer { border: 1px solid var(--lp-control); border-radius: 10px; background: var(--lp-tint); overflow: hidden; }
.lp-composer__types { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--lp-line); }
.lp-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 8px;
    cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600;
    border: 1px solid transparent; background: transparent; color: var(--text-body);
    transition: background-color 160ms var(--lp-ease), color 160ms var(--lp-ease);
}
.lp-chip:hover:not(:disabled) { background: var(--card-bg); color: var(--text-heading); border-color: var(--lp-line); }
.lp-chip:disabled { cursor: not-allowed; opacity: .55; }
.lp-chip .mud-icon-root { font-size: 1.05rem; }
.lp-composer__input {
    display: block; width: 100%; min-height: 88px; resize: vertical; border: 0; padding: 12px 14px;
    background: var(--card-bg); color: var(--text-heading); font: inherit; font-size: .9rem; line-height: 1.5;
}
.lp-composer__input::placeholder { color: var(--text-caption); opacity: 1; }
.lp .lp-composer__input:focus-visible { outline-offset: -3px; border-radius: 0; }
.lp-composer__foot { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--card-bg); border-top: 1px solid var(--lp-line); }
.lp-composer__hint { margin-left: auto; font-size: .75rem; color: var(--text-caption); }

/* Feed */
.lp-feed__filter { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; }
.lp-filter {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
    border: 1px solid var(--crm-border-strong, #b6bfcd); border-radius: 999px; background: transparent;
    color: inherit; font: inherit; font-size: .8125rem; cursor: pointer;
}
.lp-filter:hover { background: var(--primary-soft, rgba(15, 168, 210, .08)); }
.lp-filter[aria-pressed="true"] { background: var(--primary-soft, rgba(15, 168, 210, .12)); border-color: var(--primary, #0b7fa3); font-weight: 700; }
.lp-filter__n { font-size: .75rem; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--mud-palette-background-gray); color: var(--text-body); }
.lp-filter:focus-visible { outline: 3px solid var(--primary, #0b7fa3); outline-offset: 2px; }
.lp-feed { position: relative; margin-top: 6px; }
.lp-feed::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 16px; width: 2px; background: var(--lp-line); }
.lp-feed__day {
    position: relative; z-index: 1; width: fit-content; margin: 18px 0 10px 52px; padding-right: 8px;
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-caption);
    background: var(--card-bg);
}
.lp-feed__list { list-style: none; margin: 0; padding: 0; }
.lp-item { position: relative; display: flex; gap: 14px; padding-bottom: 14px; }
.lp-item__icon {
    position: relative; z-index: 1; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: var(--card-bg); border: 1px solid var(--lp-line); color: var(--text-body);
}
.lp-item__icon .mud-icon-root { font-size: 1.15rem; }
.lp-tone-primary { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.lp-tone-success { background: var(--success-soft); color: var(--success-ink); border-color: transparent; }
.lp-tone-warn { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.lp-tone-teal { background: var(--teal-soft); color: var(--teal-ink); border-color: transparent; }
.lp-tone-violet { background: var(--violet-soft); color: var(--violet-ink); border-color: transparent; }
.lp-tone-danger { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent; }
.lp-item__body {
    flex: 1; min-width: 0; background: var(--card-bg); border: 1px solid var(--lp-line); border-radius: 10px;
    padding: 10px 14px; transition: border-color 160ms var(--lp-ease);
}
.lp-item__body:hover { border-color: var(--lp-control); }
.lp-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.lp-item__head .crm-owner__name { font-weight: 700; font-size: .875rem; color: var(--text-heading); }
.lp-item__kind { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-caption); }
.lp-item__flag {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; background: var(--primary-soft); color: var(--primary-ink);
}
.lp-item__flag .mud-icon-root { font-size: .9rem; }
.lp-item__flag--warn { background: var(--warn-soft); color: var(--warn-ink); }
.lp-item__camp { font-size: .78rem; color: var(--primary-ink); text-underline-offset: 2px; }
.lp-item__time { margin-left: auto; font-size: .78rem; color: var(--text-caption); white-space: nowrap; }
.lp-item__open {
    display: block; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer;
    text-align: left; font: inherit; color: var(--text-body);
}
.lp-item__open:hover .lp-item__text { color: var(--text-heading); text-decoration: underline; text-underline-offset: 2px; }
.lp-item__text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    font-size: .875rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
}
/* Linkified feed text sits beside the open-detail button, not inside it: the button is stretched over the
   whole card (so the card still opens the detail and shows a focus ring) and the links stay above it. */
.lp-item__body:has(.lp-item__open--stretch) { position: relative; }
.lp-item__open--stretch { position: absolute; inset: 0; z-index: 0; width: auto; border-radius: 10px; }
.lp-item__open--stretch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lp-item__body:has(.lp-item__open--stretch) .lp-item__text a,
.lp-item__body:has(.lp-item__open--stretch) .lp-item__head a { position: relative; z-index: 1; }

/* Rail: next action + key/value lists */
.lp-next { border: 1px solid var(--lp-line); border-left: 4px solid var(--primary); border-radius: 10px; padding: 12px 14px; background: var(--lp-tint); }
.lp-next--overdue { border-left-color: var(--warn-ink); background: var(--warn-soft); }
.lp-next--empty { border-left-color: var(--lp-control); }
.lp-next__title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 800; color: var(--text-heading); }
.lp-next--overdue .lp-next__title { color: var(--warn-ink); }
.lp-next__title .mud-icon-root { font-size: 1.05rem; }
.lp-next__text { margin: 6px 0 10px; font-size: .84rem; color: var(--text-body); overflow-wrap: anywhere; }
.lp-next__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-kv { margin: 0; }
.lp-kv > div { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lp-line); }
.lp-kv > div:last-child { border-bottom: 0; }
.lp-kv dt { flex: none; width: 104px; font-size: .8125rem; color: var(--text-caption); }
.lp-kv dd { margin: 0; min-width: 0; font-size: .875rem; font-weight: 600; color: var(--text-heading); overflow-wrap: anywhere; }
.lp-kv a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.lp-kv__block { white-space: pre-line; }
.lp-kv__links { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-empty { margin: 0; font-size: .84rem; color: var(--text-caption); }
.lp-about { margin: 0; font-size: .875rem; color: var(--text-body); white-space: pre-line; overflow-wrap: anywhere; }

/* Reflow (1.4.10): rail drops under 1080, header actions go full-width on phones; no horizontal scroll at 320. */
@media (max-width: 1080px) {
    .lp-work { grid-template-columns: minmax(0, 1fr); }
    .lp-rail { position: static; }
}
@media (max-width: 600px) {
    .lp-head { padding: 14px; }
    .lp-identity__name { font-size: 1.375rem; }
    .lp-actions { width: 100%; }
    .lp-actions .lp-btn { flex: 1 1 auto; }
    .lp-pill--owner { margin-left: 0; }
    .lp-kv dt { width: 84px; }
    .lp-item__time { margin-left: 0; }
    .lp-composer__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn, .lp-tab, .lp-chip, .lp-item__body { transition: none; }
    .lp-btn:active:not(:disabled) { transform: none; }
}
@media (prefers-contrast: more) {
    .lp-head, .lp-card, .lp-item__body, .lp-pill { border-color: var(--text-caption); }
}
@media (forced-colors: active) {
    .lp-btn, .lp-chip, .lp-tab, .lp-pill, .lp-card, .lp-head, .lp-item__body { border: 1px solid ButtonBorder; }
    .lp-tab[aria-selected="true"] { border-bottom: 3px solid Highlight; }
    .lp-step__bar { border: 1px solid CanvasText; }
    .lp-step--done .lp-step__bar, .lp-step--current .lp-step__bar { background: Highlight; }
}

/* ── Account record (ar-*) ───────────────────────────────────────────────────
   AccountDetail.razor — tansi-account-record-redesign.html, Part 1. Breadcrumb,
   identity card with ONE filled action, a status strip that never relies on
   colour alone, KPI tiles that link into their tab, ARIA tabs over one panel box.
   App tokens only (same mapping as the lp-* block), so .mud-theme-dark rides along.
   Tokens are written inline rather than as :root custom properties: a property
   computed on :root would freeze the light value and never see the dark override
   that .mud-theme-dark sets lower in the tree.
   Shared-component classes (ar-kv, ar-unset, ar-addbtn, ar-panelhead*, ar-btn*,
   ar-table, ar-tablewrap, ar-chip*, ar-relgrid, ar-relcard, ar-viewgroup,
   ar-viewbtn, ar-set-missing, ar-empty, ar-pct) are deliberately NOT scoped under
   .ar-page — other pages render them behind opt-ins, and the contact view
   radiogroup everywhere.
   -------------------------------------------------------------------------- */

/* [hidden] loses to any class that sets display. */
.ar-page [hidden] { display: none !important; }
.ar-page :where(a, button, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* Breadcrumb */
.ar-crumbs { font-size: .8125rem; color: var(--text-caption); margin-bottom: 12px; }
.ar-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ar-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--text-caption); }
.ar-crumbs a { color: var(--text-body); text-underline-offset: 2px; }
.ar-crumbs [aria-current="page"] { color: var(--text-heading); font-weight: 600; }

/* Identity card */
.ar-head {
    background: var(--card-bg); border: 1px solid var(--mud-palette-lines-default, var(--card-border));
    border-radius: var(--radius-md, 14px); box-shadow: var(--shadow-card); padding: 18px 20px; margin-bottom: 16px;
}
.ar-head__top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ar-avatar {
    flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; font-size: 1.0625rem;
    border: 1px solid var(--mud-palette-lines-default, var(--card-border));
}
.ar-identity { flex: 1; min-width: 0; }
.ar-identity h1 {
    margin: 0; font-size: 1.625rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em;
    color: var(--text-heading); overflow-wrap: anywhere;
}
.ar-sub { margin: 4px 0 0; font-size: .84rem; color: var(--text-caption); overflow-wrap: anywhere; }
.ar-sub a { color: var(--text-body); text-underline-offset: 2px; }
.ar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ar-iconbtn {
    width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--text-body);
}
.ar-iconbtn:hover { background: var(--mud-palette-background-gray); color: var(--text-heading); }
/* A blocked action explains itself instead of greying out silently. */
.ar-blocked {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border-radius: 9px;
    border: 1px dashed var(--mud-palette-lines-inputs, var(--card-hover-border)); background: transparent;
    color: var(--text-body); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.ar-blocked:hover { border-style: solid; color: var(--primary-ink); background: var(--primary-soft); border-color: var(--primary); }
.ar-blocked .mud-icon-root, .ar-btn .mud-icon-root { font-size: 1.1rem; }
.ar-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mud-palette-lines-default, var(--card-border));
}
.ar-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* Buttons — one filled, the rest outlined */
.ar-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 14px; border-radius: 9px; cursor: pointer;
    font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--mud-palette-lines-inputs, var(--card-hover-border)); background: var(--card-bg); color: var(--text-heading);
    transition: background-color 160ms ease, border-color 160ms ease;
}
.ar-btn:hover:not(:disabled) { background: var(--mud-palette-background-gray); }
.ar-btn:disabled { cursor: not-allowed; opacity: .55; }
.ar-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ar-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ar-btn--primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.ar-btn--quiet { border-color: transparent; background: transparent; color: var(--text-body); }
.ar-btn--quiet:hover:not(:disabled) { background: var(--mud-palette-background-gray); color: var(--text-heading); }
.ar-btn--sm { min-height: 34px; padding: 0 11px; font-size: .8125rem; }

/* Chips — words first, tint second */
.ar-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.4; border: 1px solid transparent;
    background: var(--mud-palette-background-gray); color: var(--text-body);
}
.ar-chip--ok { background: var(--success-soft); color: var(--success-ink); font-weight: 700; }
.ar-chip--info { background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.ar-chip--warn { background: var(--warn-soft); color: var(--warn-ink); font-weight: 700; }
.ar-chip--danger { background: var(--danger-soft); color: var(--danger-ink); font-weight: 700; }
.ar-chip--link { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.ar-chip--link:hover { background: var(--primary-soft); }
.ar-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* KPI tiles — each is a link into its tab */
.ar-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0 18px; }
.ar-tile {
    display: block; position: relative; padding: 14px 16px; text-decoration: none; color: inherit;
    background: var(--card-bg); border: 1px solid var(--mud-palette-lines-default, var(--card-border));
    border-radius: var(--radius-md, 14px); box-shadow: var(--shadow-card);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ar-tile:hover { border-color: var(--mud-palette-lines-inputs, var(--card-hover-border)); box-shadow: var(--shadow-card-hover); }
.ar-tile__label { margin: 0; padding-right: 22px; font-size: .78rem; color: var(--text-caption); font-weight: 600; }
.ar-tile__value {
    margin: 5px 0 0; font-size: 1.75rem; line-height: 1.05; font-weight: 800; letter-spacing: -.02em;
    color: var(--text-heading); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.ar-tile__value + .ar-tile__value { font-size: 1.25rem; margin-top: 4px; }
.ar-tile__meta { margin: 6px 0 0; font-size: .78rem; color: var(--text-caption); }
.ar-tile__go { position: absolute; top: 13px; right: 13px; color: var(--text-caption); }
.ar-tile:hover .ar-tile__go { color: var(--primary-ink); }

/* Tab strip + panel box */
.ar-tabs {
    display: flex; gap: 2px; padding: 0 6px; overflow-x: auto; background: var(--card-bg);
    border: 1px solid var(--mud-palette-lines-default, var(--card-border));
    border-radius: var(--radius-md, 14px) var(--radius-md, 14px) 0 0;
}
.ar-tab {
    appearance: none; background: transparent; border: 0; border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0; padding: 12px 13px; min-height: 46px; cursor: pointer; white-space: nowrap;
    font: inherit; font-size: .875rem; font-weight: 600; color: var(--text-body);
    transition: color 160ms ease, background-color 160ms ease;
}
.ar-tab:hover { color: var(--text-heading); background: var(--mud-palette-background-gray); }
.ar-tab[aria-selected="true"] { color: var(--primary-ink); border-bottom-color: var(--primary); }
.ar-page .ar-tab:focus-visible { outline-offset: -3px; }
.ar-tab__n {
    margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: var(--mud-palette-background-gray); color: var(--text-body); font-variant-numeric: tabular-nums;
}
.ar-tab[aria-selected="true"] .ar-tab__n { background: var(--primary-soft); color: var(--primary-ink); }
.ar-panelbox {
    background: var(--card-bg); border: 1px solid var(--mud-palette-lines-default, var(--card-border)); border-top: 0;
    border-radius: 0 0 var(--radius-md, 14px) var(--radius-md, 14px); box-shadow: var(--shadow-card);
}
.ar-panelbox > [role="tabpanel"] { padding: 16px; }
.ar-page .ar-panelbox > [role="tabpanel"]:focus-visible { outline-offset: -3px; }

/* Panel head (shared: Notes, Related, Forms, Team, Billing opt into it) */
.ar-panelhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ar-panelhead h3 { margin: 0; font-size: .9375rem; font-weight: 800; color: var(--text-heading); }
.ar-panelhead__cnt { font-size: .8125rem; color: var(--text-caption); }
.ar-panelhead__right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Empty state */
.ar-empty { text-align: center; padding: 34px 16px; }
.ar-empty__ico {
    width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center;
    background: var(--mud-palette-background-gray); color: var(--text-caption);
}
.ar-empty h4 { margin: 0; font-size: .9375rem; font-weight: 800; color: var(--text-heading); }
.ar-empty p { margin: 5px auto 14px; max-width: 46ch; font-size: .84rem; color: var(--text-caption); }

/* Tables (shared: Team, Forms; Task 10 opportunities/projects) */
.ar-tablewrap { overflow-x: auto; position: relative; }
.ar-tablewrap:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.ar-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ar-table caption { text-align: left; padding: 0 0 10px; color: var(--text-caption); font-size: .8125rem; }
.ar-table th, .ar-table td {
    position: relative; /* keeps sr-only spans inside the cell (1.4.10) */
    padding: 10px 12px; text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--mud-palette-lines-default, var(--card-border));
}
.ar-table thead th {
    background: var(--mud-palette-background-gray); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-caption); white-space: nowrap; font-weight: 700;
}
.ar-table thead th:has(.ar-sortbtn) { padding: 0; }
.ar-table tbody tr:hover { background: color-mix(in srgb, var(--mud-palette-background-gray) 60%, transparent); }
.ar-table tbody tr:last-child td, .ar-table tbody tr:last-child th { border-bottom: 0; }
.ar-table a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.ar-table .ar-num { text-align: right; font-variant-numeric: tabular-nums; }
.ar-sortbtn {
    display: flex; align-items: center; gap: 6px; width: 100%; min-height: 42px; padding: 10px 12px;
    background: transparent; border: 0; cursor: pointer; color: inherit; font: inherit;
    letter-spacing: inherit; text-transform: inherit; font-size: .75rem; font-weight: 700;
}
.ar-sortbtn:hover { background: color-mix(in srgb, var(--text-heading) 6%, transparent); color: var(--text-heading); }
.ar-sortbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* Unsorted columns show a faint two-way arrow so sortability is visible; the sorted one is solid. */
.ar-sortbtn__arrow { opacity: .35; transition: opacity 120ms ease; }
.ar-sortbtn:hover .ar-sortbtn__arrow { opacity: .7; }
th[aria-sort="ascending"] .ar-sortbtn, th[aria-sort="descending"] .ar-sortbtn { color: var(--primary-ink); }
th[aria-sort="ascending"] .ar-sortbtn__arrow, th[aria-sort="descending"] .ar-sortbtn__arrow { opacity: 1; }
th[aria-sort="descending"] .ar-sortbtn__arrow { transform: rotate(180deg); }

/* Progress meter */
.ar-pct { display: flex; align-items: center; gap: 9px; min-width: 132px; }
.ar-pct__track {
    flex: 1; height: 8px; border-radius: 999px; background: var(--mud-palette-background-gray); overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, var(--card-border));
}
.ar-pct__fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.ar-pct__num { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; color: var(--text-heading); }

/* Key/value list (Custom fields) — a blank is a job, not a void */
.ar-kv { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; }
.ar-kv > div { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--mud-palette-lines-default, var(--card-border)); }
.ar-kv dt { flex: none; width: 130px; color: var(--text-caption); font-size: .8125rem; }
.ar-kv dd { margin: 0; min-width: 0; font-size: .875rem; font-weight: 600; color: var(--text-heading); overflow-wrap: anywhere; }
.ar-unset { color: var(--text-caption); font-weight: 500; }
.ar-addbtn {
    display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 9px; border-radius: 8px;
    border: 1px dashed var(--mud-palette-lines-inputs, var(--card-hover-border)); background: transparent;
    color: var(--text-body); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.ar-addbtn:hover { border-style: solid; color: var(--primary-ink); background: var(--primary-soft); border-color: var(--primary); }
.ar-addbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ar-addbtn .mud-icon-root { font-size: 15px; }

/* Related records as cards */
.ar-relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ar-relcard {
    border: 1px solid var(--mud-palette-lines-default, var(--card-border)); border-radius: 10px; padding: 13px;
    background: var(--card-bg); min-width: 0;
}
.ar-relcard h4 { margin: 0 0 3px; font-size: .875rem; font-weight: 800; color: var(--text-heading); overflow-wrap: anywhere;
                 text-transform: none; letter-spacing: normal; }
.ar-relcard h4 a { color: var(--primary-ink); text-decoration: none; }
.ar-relcard h4 a:hover { text-decoration: underline; }
.ar-relcard p { margin: 6px 0 0; font-size: .8125rem; color: var(--text-caption); }

.ar-set-missing { margin-top: 4px; }

/* Contact view switch — a radiogroup (CrmContactCardsView, on /crm/contacts AND the account
   page). Styled to read like the Mud toggle group it replaced. */
.ar-viewgroup {
    display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-inputs, var(--card-hover-border)); background: var(--mud-palette-background-gray);
}
.ar-viewbtn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border-radius: 7px;
    border: 1px solid transparent; background: transparent; color: var(--text-body);
    font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.ar-viewbtn:hover { color: var(--text-heading); background: color-mix(in srgb, var(--text-heading) 7%, transparent); }
.ar-viewbtn[aria-checked="true"] { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.ar-viewbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ar-viewbtn .mud-icon-root { font-size: 1.05rem; }

/* Contact cards with channel hints (ShowChannelHints): grid view marks Best with a star and
   shows the channel's name on hover AND focus (1.4.13). */
.loop-cards--hints[data-view="grid"] .loop-best-badge { font-size: 0; width: 15px; height: 15px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.loop-cards--hints[data-view="grid"] .loop-best-badge::before { content: "★"; font-size: 9px; }
.loop-cards--hints[data-view="grid"] [data-tip] { position: relative; }
.loop-cards--hints[data-view="grid"] [data-tip]:hover::after,
.loop-cards--hints[data-view="grid"] [data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; padding: 4px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
    background: var(--mud-palette-text-primary); color: var(--mud-palette-surface); z-index: 5; pointer-events: none;
}
.loop-hint { margin: 9px 0 0; font-size: 12px; color: var(--mud-palette-text-secondary); }

/* Reflow (1.4.10): KPIs 4 → 2 → 1; header actions wrap, then go full width on phones. */
@media (max-width: 1080px) { .ar-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    .ar-head { padding: 14px; }
    .ar-identity h1 { font-size: 1.375rem; }
    .ar-actions { width: 100%; }
    .ar-actions .ar-btn, .ar-actions .ar-blocked { flex: 1 1 auto; justify-content: center; }
    .ar-kv dt { width: 104px; }
}
@media (max-width: 560px) { .ar-kpis { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .ar-btn, .ar-chip, .ar-tile, .ar-tab, .ar-sortbtn__arrow { transition: none; }
}
@media (prefers-contrast: more) {
    .ar-head, .ar-tile, .ar-tabs, .ar-panelbox, .ar-relcard, .ar-chip { border-color: var(--text-caption); }
}
@media (forced-colors: active) {
    .ar-btn, .ar-chip, .ar-tile, .ar-head, .ar-tab, .ar-relcard, .ar-viewbtn { border: 1px solid ButtonBorder; }
    .ar-tab[aria-selected="true"] { border-bottom: 3px solid Highlight; }
    .ar-viewbtn[aria-checked="true"] { border: 2px solid Highlight; }
    th[aria-sort]:not([aria-sort="none"]) { border-bottom: 3px solid Highlight; }
    .ar-pct__fill { background: Highlight; }
}
.ar-money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   OPPORTUNITY DIALOG (od-*) — tansi-new-opportunity-redesign.html
   One create/edit form for every "New opportunity" / "Edit opportunity" button.
   Header sits inside the scrolling content (inside MudDialog's focus trap) and sticks.
   ========================================================================== */
/* scroll-padding keeps a focused field from scrolling under the sticky header (2.4.11). */
.od .mud-dialog-content { padding-top: 0; scroll-padding-top: 96px; }
.od-head {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin: 0 -24px 4px; padding: 18px 16px 12px 24px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.od-head__text { flex: 1 1 auto; min-width: 0; }
.od-head__title { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--mud-palette-text-primary); }
.od-head__sub { margin: 2px 0 0; font-size: .875rem; color: var(--mud-palette-text-secondary); }
.od-head__close { margin-top: -6px; flex: none; }

.od-form { padding-bottom: 4px; }
.od-reqnote { margin: 12px 0 8px; font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.od-star { color: var(--mud-palette-error); font-weight: 700; }

/* Error summary: marked by a thick border and a heading, not by colour alone (1.4.1). */
.od-errsummary {
    margin: 4px 0 12px; padding: 12px 16px;
    border: 2px solid var(--mud-palette-error); border-left-width: 6px; border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-error) 7%, var(--mud-palette-surface));
}
.od-errsummary:focus { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.od-errsummary__title { margin: 0 0 4px; color: var(--mud-palette-text-primary); }
.od-errsummary ul { margin: 0; padding-left: 20px; }
.od-errsummary li { margin: 2px 0; }
.od-errsummary a { color: var(--mud-palette-text-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.od-errsummary a:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 2px; }

/* Sections: real fieldsets with legends (1.3.1). */
.od-fset { border: 0; margin: 0; padding: 14px 0 6px; min-width: 0; }
.od-fset + .od-fset { border-top: 1px solid var(--mud-palette-lines-default); }
.od-fset > legend {
    float: left; width: 100%; padding: 0; margin: 0 0 12px;
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.od-fset > legend + * { clear: both; }
.od-fset__note { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .8125rem; }
.od-fset--internal {
    margin-top: 6px; padding: 14px 14px 6px; border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
    border: 1px dashed var(--mud-palette-lines-inputs) !important;
}

.od-hint, .od-help { margin: 4px 14px 0; font-size: .75rem; line-height: 1.4; color: var(--mud-palette-text-secondary); }
.od-hint:empty { display: none; }

@media (max-width: 600px) {
    .od-head { margin: 0 -16px 4px; padding: 14px 8px 10px 16px; }
    .od-head { flex-wrap: wrap; }
    .od-head__tools { width: 100%; justify-content: flex-end; }
    .od .mud-dialog-content { padding-left: 16px; padding-right: 16px; }
}
@media (forced-colors: active) {
    .od-errsummary { border: 2px solid CanvasText; border-left-width: 6px; }
    .od-fset--internal { border: 1px dashed CanvasText !important; }
}

/* New opportunity: section jump rail (keyboard shortcuts spec). Two columns; the rail sticks under
   the sticky header. Below 600px it becomes a wrapping row of section buttons above the form. */
.od-head__tools { display: flex; align-items: center; gap: 4px; flex: none; }
.od-head__tools .od-head__close { margin-top: 0; }
.od-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
.od-rail { position: sticky; top: 84px; align-self: start; padding-top: 12px; }
.od-rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.od-rail__btn {
    width: 100%; min-height: 32px; padding: 6px 10px; text-align: left;
    border: 0; border-left: 3px solid transparent; border-radius: 0 8px 8px 0;
    background: transparent; color: var(--mud-palette-text-secondary);
    font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.od-rail__btn:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); }
.od-rail__btn[aria-current="true"] { border-left-color: var(--mud-palette-primary); color: var(--mud-palette-text-primary); }
.od-rail__btn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
@media (max-width: 600px) {
    .od-layout { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .od-rail { position: static; padding-top: 8px; }
    .od-rail ul { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .od-rail__btn { width: auto; border-left: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; }
    .od-rail__btn[aria-current="true"] { border-bottom-color: var(--mud-palette-primary); }
}
@media (forced-colors: active) {
    .od-rail__btn[aria-current="true"] { border-left-color: Highlight; border-bottom-color: Highlight; }
}

/* ── Contact profile (cp-*) ──────────────────────────────────────────────────
   ContactDetail.razor — tansi-contact-profile-redesign_2.html, Part 1. Breadcrumb,
   a compact record head (details live in the Contact slide-out), ARIA tabs that share
   one row with a SEPARATE group of activity buttons, one panel box. Same app tokens as
   the ar-* block (written inline, not as :root properties, so .mud-theme-dark rides along).
   -------------------------------------------------------------------------- */
/* The timeline feed (lp-feed, lp-filter, lp-item) reads the lead profile's local tokens. */
.cp-page { --lp-ease: cubic-bezier(.2, .8, .2, 1); --lp-line: var(--mud-palette-lines-default, var(--card-border));
           --lp-control: var(--mud-palette-lines-inputs, var(--card-hover-border)); --lp-tint: var(--mud-palette-background-gray); }
/* [hidden] loses to any class that sets display. */
.cp-page [hidden] { display: none !important; }
/* Every link gets theme ink in both themes (--primary-ink is redefined under .mud-theme-dark).
   An unstyled tel:/mailto: falls back to #0000EE: 1.84:1 on the dark surface (1.4.3). */
.cp-page a { color: var(--primary-ink); text-underline-offset: 2px; }
.cp-page :where(a, button, select, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* Breadcrumb */
.cp-crumbs { font-size: .8125rem; color: var(--text-caption); margin-bottom: 12px; }
.cp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 6px; color: var(--text-caption); }
.cp-page .cp-crumbs a { color: var(--text-body); }
.cp-crumbs [aria-current="page"] { color: var(--text-heading); font-weight: 600; overflow-wrap: anywhere; }

/* Record head */
.cp-head {
    background: var(--card-bg); border: 1px solid var(--mud-palette-lines-default, var(--card-border));
    border-radius: var(--radius-md, 14px); box-shadow: var(--shadow-card); padding: 18px 20px; margin-bottom: 16px;
}
.cp-head__top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cp-avatar {
    flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
    background: var(--violet-soft); color: var(--violet-ink); font-weight: 800; font-size: 1.125rem;
    border: 1px solid var(--mud-palette-lines-default, var(--card-border));
}
.cp-avatar--photo { object-fit: cover; padding: 0; }
.cp-identity { flex: 1; min-width: 0; }
.cp-identity h1 {
    margin: 0; font-size: 1.625rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em;
    color: var(--text-heading); overflow-wrap: anywhere;
}
.cp-sub { margin: 4px 0 0; font-size: .84rem; color: var(--text-caption); overflow-wrap: anywhere; }
.cp-page .cp-sub a { color: var(--text-body); }
.cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 14px; border-radius: 9px; cursor: pointer;
    font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--mud-palette-lines-inputs, var(--card-hover-border)); background: var(--card-bg); color: var(--text-heading);
    transition: background-color 160ms ease, border-color 160ms ease;
}
.cp-btn:hover:not(:disabled) { background: var(--mud-palette-background-gray); }
.cp-btn:disabled { cursor: not-allowed; opacity: .55; }
.cp-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.cp-btn--primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.cp-btn--sm { min-height: 34px; padding: 0 11px; font-size: .8125rem; }
.cp-btn .mud-icon-root, .cp-actbtn .mud-icon-root { font-size: 1.1rem; flex: none; }
.cp-iconbtn {
    width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--text-body);
}
.cp-iconbtn:hover { background: var(--mud-palette-background-gray); color: var(--text-heading); }

/* Status strip: words first, tint second (1.4.1) */
.cp-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mud-palette-lines-default, var(--card-border));
}
.cp-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.4; border: 1px solid transparent;
    background: var(--mud-palette-background-gray); color: var(--text-body);
}
.cp-chip--ok { background: var(--success-soft); color: var(--success-ink); font-weight: 700; }
.cp-chip--info { background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.cp-chip--warn { background: var(--warn-soft); color: var(--warn-ink); font-weight: 700; }
.cp-chip--danger { background: var(--danger-soft); color: var(--danger-ink); font-weight: 700; }
.cp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cp-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cp-block { white-space: pre-line; }

/* Tab row: the tablist and the activity group share one bar */
.cp-tabrow {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 8px; background: var(--card-bg);
    border: 1px solid var(--mud-palette-lines-default, var(--card-border)); border-bottom: 0;
    border-radius: var(--radius-md, 14px) var(--radius-md, 14px) 0 0;
}
.cp-tabs { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.cp-tab {
    display: inline-flex; align-items: center; appearance: none; background: transparent; border: 0;
    border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; padding: 12px 13px; min-height: 46px;
    cursor: pointer; white-space: nowrap; font: inherit; font-size: .875rem; font-weight: 600; color: var(--text-body);
    transition: color 160ms ease, background-color 160ms ease;
}
.cp-tab:hover { color: var(--text-heading); background: var(--mud-palette-background-gray); }
.cp-tab[aria-selected="true"] { color: var(--primary-ink); border-bottom-color: var(--primary); }
.cp-page .cp-tab:focus-visible { outline-offset: -3px; }
.cp-tab__n {
    margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: var(--mud-palette-background-gray); color: var(--text-body); font-variant-numeric: tabular-nums;
}
.cp-tab[aria-selected="true"] .cp-tab__n { background: var(--primary-soft); color: var(--primary-ink); }
.cp-actrow { margin-left: auto; display: flex; flex-wrap: wrap; gap: 3px; padding: 6px 0; }
.cp-actbtn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 8px;
    border: 1px solid transparent; background: transparent; color: var(--text-body);
    font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cp-actbtn:hover { background: var(--mud-palette-background-gray); color: var(--text-heading); border-color: var(--mud-palette-lines-default, var(--card-border)); }

/* Panel box */
.cp-panelbox {
    background: var(--card-bg); border: 1px solid var(--mud-palette-lines-default, var(--card-border));
    border-radius: 0 0 var(--radius-md, 14px) var(--radius-md, 14px); box-shadow: var(--shadow-card);
}
.cp-panelbox > [role="tabpanel"] { padding: 18px; min-width: 0; }
.cp-page .cp-panelbox > [role="tabpanel"]:focus-visible { outline-offset: -3px; }
.cp-panelhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
/* .crm-panel__title is CrmCampaignHistoryPanel's opt-in head: it reads the same as the panel heads. */
.cp-panelhead h3, .crm-panel__title { margin: 0; font-size: .9375rem; font-weight: 800; line-height: 1.4; color: var(--text-heading); }
.crm-panel__title { margin-bottom: 14px; }
.cp-panelhead__cnt { font-size: .8125rem; color: var(--text-caption); overflow-wrap: anywhere; }
.cp-note { margin: 0 0 16px; max-width: 64ch; font-size: .84rem; color: var(--text-caption); }
.cp-warn {
    margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: .84rem;
    background: var(--warn-soft); color: var(--text-heading); border: 1px solid var(--warn-ink); border-left-width: 4px;
}

/* Empty state */
.cp-empty { text-align: center; padding: 34px 16px; }
.cp-empty__ico {
    width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center;
    background: var(--mud-palette-background-gray); color: var(--text-caption);
}
.cp-empty h4 { margin: 0; font-size: .9375rem; font-weight: 800; color: var(--text-heading); }
.cp-empty p { margin: 5px auto 14px; max-width: 46ch; font-size: .84rem; color: var(--text-caption); }

/* Preferences: switch rows with visible On/Off text (state never by colour alone) */
.cp-pref {
    display: flex; gap: 14px; align-items: flex-start; padding: 14px; margin-bottom: 10px; border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--card-border)); background: var(--card-bg);
}
.cp-pref__txt { flex: 1; min-width: 0; }
.cp-pref__t { display: block; margin: 0; font-size: .875rem; font-weight: 700; color: var(--text-heading); }
.cp-pref__m { margin: 3px 0 0; font-size: .78rem; color: var(--text-caption); }
.cp-switchwrap { display: flex; align-items: center; gap: 9px; flex: none; }
.cp-switch {
    position: relative; flex: none; width: 46px; height: 26px; padding: 0; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-inputs, var(--card-hover-border)); background: var(--mud-palette-background-gray);
}
.cp-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--card-bg); box-shadow: 0 1px 2px rgba(16, 24, 40, .25); transition: transform 150ms ease;
}
.cp-switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.cp-switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--on-primary); }
.cp-switch[aria-disabled="true"], .cp-select[aria-disabled="true"] { cursor: progress; opacity: .7; }
.cp-switch__state { min-width: 26px; font-size: .78rem; font-weight: 700; color: var(--text-caption); }
.cp-switch[aria-checked="true"] + .cp-switch__state { color: var(--primary-ink); }
.cp-select {
    flex: none; min-height: 40px; max-width: 100%; padding: 0 10px; border-radius: 9px; font: inherit; font-size: .875rem;
    border: 1px solid var(--mud-palette-lines-inputs, var(--card-hover-border)); background: var(--card-bg); color: var(--text-heading);
}

/* Reflow (1.4.10): the action group drops under the tabs below 1100px; tabs become a wrapping
   set of pills below 820px; header actions go full width on phones. Nothing scrolls sideways at 320px. */
@media (max-width: 1100px) {
    .cp-actrow { margin-left: 0; width: 100%; border-top: 1px solid var(--mud-palette-lines-default, var(--card-border)); }
}
@media (max-width: 820px) {
    .cp-tabrow { padding: 6px; }
    .cp-tabs { width: 100%; }
    .cp-tab { flex: 1 1 auto; justify-content: center; border-radius: 8px; border-bottom-width: 0; min-width: 0; }
    .cp-tab[aria-selected="true"] { background: var(--primary-soft); box-shadow: inset 0 -3px 0 var(--primary); }
}
@media (max-width: 600px) {
    .cp-head { padding: 14px; }
    .cp-identity h1 { font-size: 1.375rem; }
    .cp-actions { width: 100%; }
    .cp-actions .cp-btn { flex: 1 1 auto; }
    .cp-panelbox > [role="tabpanel"] { padding: 14px; }
    .cp-pref { flex-wrap: wrap; }
    .cp-select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-btn, .cp-tab, .cp-switch::after { transition: none; }
}
@media (prefers-contrast: more) {
    .cp-head, .cp-tabrow, .cp-panelbox, .cp-pref, .cp-chip { border-color: var(--text-caption); }
}
@media (forced-colors: active) {
    .cp-btn, .cp-chip, .cp-head, .cp-tab, .cp-actbtn, .cp-pref, .cp-select, .cp-switch { border: 1px solid ButtonBorder; }
    .cp-tab[aria-selected="true"] { border-bottom: 3px solid Highlight; }
    .cp-switch, .cp-switch::after { forced-color-adjust: none; }
    .cp-switch { background: Canvas; }
    .cp-switch::after { background: ButtonText; }
    .cp-switch[aria-checked="true"] { background: Highlight; }
    .cp-switch[aria-checked="true"]::after { background: HighlightText; }
}

/* --------------------------------------------------------------------------
   Sales reports (CrmReports.razor) — tansi-reports-redesign.html, Part 1.
   Period control is a native select with optgroups; KPI deltas are words with
   an aria-hidden arrow; every grid sorts from a heading button (aria-sort on
   the active column only); status chips are words, never colour alone.
   Chart series colours (--rp-*) are ordinal (stages) or categorical
   (activity types), each paired with a pattern in the charts. Chart TEXT
   never wears a data colour — ink tokens only.
   -------------------------------------------------------------------------- */
.rp-page [hidden] { display: none !important; }
:root, .mud-theme-light {
    --rp-s1:#189bbf; --rp-s2:#137d9a; --rp-s3:#0f637b; --rp-s4:#0b4a5b;
    --rp-email:#0a728f; --rp-call:#a3196b; --rp-meeting:#7a2fa8; --rp-note:#0f7b46; --rp-sms:#a8420a; --rp-task:#1d4ed8; --rp-other:#4a5462;
    --rp-won:#0f7b46; --rp-lost:#a8420a;
}
.mud-theme-dark {
    --rp-s1:#a4e3f4; --rp-s2:#6ed2ed; --rp-s3:#37c1e6; --rp-s4:#19a2c8;
    --rp-email:#4acef2; --rp-call:#ff9ec7; --rp-meeting:#c98cf0; --rp-note:#4ed08c; --rp-sms:#f0a06a; --rp-task:#8ab0ff; --rp-other:#9aa6b5;
    --rp-won:#4ed08c; --rp-lost:#f0a06a;
}
.rp-page { padding: 20px 24px 48px; color: var(--text-heading); }
.rp-page :is(a, button, input, select, [tabindex]) { scroll-margin-top: 96px; scroll-margin-bottom: 28px; }   /* 2.4.11 */
.rp-page :is(a, button, input, select, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.rp-denied {
    padding: 14px 16px; border-radius: 10px; font-weight: 600;
    border: 1px solid var(--danger-ink); color: var(--danger-ink);
    background: color-mix(in srgb, var(--danger-ink) 12%, var(--card-bg));
}

/* crumbs + page head */
.rp-crumbs { font-size: 13px; color: var(--text-caption); margin-bottom: 12px; }
.rp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.rp-crumbs a { color: var(--text-body); }
.rp-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--card-hover-border); }
.rp-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rp-head h1 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; font-weight: 800; color: var(--text-heading); }
.rp-head .rp-sub { margin: 4px 0 0; color: var(--text-caption); font-size: 13.5px; }
.rp-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.rp-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 9px;
    cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none;
    border: 1px solid var(--card-hover-border); background: var(--card-bg); color: var(--text-heading);
}
.rp-btn:hover { background: color-mix(in srgb, var(--text-heading) 4%, var(--card-bg)); }
.rp-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* period toolbar */
.rp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 16px; }
.rp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rp-field label { font-size: 12.5px; font-weight: 700; color: var(--text-body); }
.rp-field input, .rp-field select {
    height: 40px; padding: 0 11px; background: var(--card-bg); color: var(--text-heading); font: inherit;
    border: 1px solid var(--card-hover-border); border-radius: 9px; min-width: 180px; max-width: 100%;
}
.rp-field input[aria-invalid="true"] { border-color: var(--danger-ink); border-width: 2px; }
.rp-err { flex: 1 1 100%; margin: 0; font-size: 13px; font-weight: 700; color: var(--danger-ink); }
.rp-resultcount { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--text-body); min-height: 1px; }
.rp-note {
    margin: 0 0 12px; padding: 8px 12px; border-radius: 9px; font-size: 13px; color: var(--text-body);
    background: color-mix(in srgb, var(--text-heading) 4%, var(--card-bg)); border: 1px solid var(--card-border);
}

/* KPI tiles */
.rp-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); margin: 0 0 16px; }
.rp-kpi { padding: 13px 14px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; }
.rp-kpi__k {
    display: flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-body); font-weight: 700;
}
.rp-kpi__v { display: block; margin-top: 5px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-heading); }
.rp-kpi__d {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800;
}
.rp-kpi__d--up { background: color-mix(in srgb, var(--success-ink) 12%, var(--card-bg)); color: var(--success-ink); }
.rp-kpi__d--down { background: color-mix(in srgb, var(--danger-ink) 12%, var(--card-bg)); color: var(--danger-ink); }
.rp-kpi__d--flat { background: color-mix(in srgb, var(--text-heading) 9%, var(--card-bg)); color: var(--text-body); }
.rp-kpi__sub { display: block; margin-top: 5px; font-size: 12px; color: var(--text-caption); }

/* panels */
.rp-panels { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }
.rp-panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; display: flex; flex-direction: column; min-width: 0; }
.rp-panel--wide { grid-column: 1 / -1; }
.rp-panel__head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; }
.rp-panel__head h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text-heading); }
.rp-panel__head .rp-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--text-caption); }
.rp-panel__right { margin-left: auto; display: flex; gap: 6px; flex: none; align-items: center; }
.rp-panel__body { padding: 0 16px 16px; min-width: 0; }

/* data grids */
.rp-gridwrap { overflow-x: auto; border: 1px solid var(--card-border); border-radius: 10px; position: relative; }
.rp-dg { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.rp-dg th, .rp-dg td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--card-border); position: relative; color: var(--text-heading); }
.rp-dg tbody th { font-weight: 600; }
.rp-dg thead th {
    background: color-mix(in srgb, var(--text-heading) 4%, var(--card-bg)); font-size: 11.5px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-body); white-space: nowrap;
}
.rp-dg tbody tr:last-child :is(td, th) { border-bottom: 0; }
.rp-dg .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-dg tbody tr:hover { background: color-mix(in srgb, var(--text-heading) 4%, var(--card-bg)); }
.rp-sortbtn {
    display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0; background: transparent;
    border: 0; font: inherit; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
    color: var(--text-body); cursor: pointer;
}
.rp-sortbtn:hover { color: var(--text-heading); }
.rp-dg th[aria-sort] .rp-sortbtn { color: var(--primary-ink); }
.rp-arrow { opacity: 0; }
.rp-dg th[aria-sort] .rp-arrow { opacity: 1; }
.rp-barinline {
    display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text-heading) 9%, var(--card-bg));
    border: 1px solid var(--card-hover-border); overflow: hidden; margin-top: 4px; min-width: 60px;
}
.rp-barinline i { display: block; height: 100%; background: var(--primary-ink); }
.rp-rowlink {
    font-weight: 700; color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px;
    display: inline-flex; align-items: center; min-height: 24px;
}
.rp-rowlink:hover { text-decoration-thickness: 2px; }

.rp-stale {
    display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; margin-left: 4px;
    background: color-mix(in srgb, var(--warn-ink, #8a5300) 12%, var(--card-bg)); color: var(--warn-ink, #8a5300);
    font-size: 11px; font-weight: 800; white-space: nowrap;
}
.rp-due {
    display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; margin-left: 4px;
    background: var(--card-bg); font-size: 11px; font-weight: 800; white-space: nowrap;
}
.rp-due--overdue, .rp-due--urgent { color: var(--danger-ink); }
.rp-due--soon { color: var(--warn-ink, #8a5300); }

.rp-empty { margin: 0; padding: 26px 12px; text-align: center; color: var(--text-caption); font-size: 13px; }

/* Charts: img + finding sentence, a Table view each; text in ink tokens only */
.rp-chart { display:block; width:100%; height:auto; overflow:visible; }
.rp-chart text { font-family: inherit; }
.rp-axis { fill: var(--ov-tick); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rp-gridline { stroke: var(--ov-grid); stroke-width:1; shape-rendering:crispEdges; }
.rp-zero { stroke: var(--ov-axis); stroke-width:1.5; shape-rendering:crispEdges; }
.rp-val { fill: var(--text-heading); font-size:11.5px; font-weight:800; font-variant-numeric: tabular-nums; }
.rp-cat { fill: var(--ov-ink); font-size:11.5px; font-weight:600; }
.rp-f-s1{fill:var(--rp-s1)} .rp-f-s2{fill:var(--rp-s2)} .rp-f-s3{fill:var(--rp-s3)} .rp-f-s4{fill:var(--rp-s4)}
.rp-f-email{fill:var(--rp-email)} .rp-f-call{fill:var(--rp-call)} .rp-f-meeting{fill:var(--rp-meeting)} .rp-f-note{fill:var(--rp-note)}
.rp-f-sms{fill:var(--rp-sms)} .rp-f-task{fill:var(--rp-task)} .rp-f-other{fill:var(--rp-other)} .rp-f-won{fill:var(--rp-won)} .rp-f-lost{fill:var(--rp-lost)}
.rp-legend { display:flex; flex-wrap:wrap; gap:12px; margin:10px 0 0; padding:0; list-style:none; }
.rp-legend li { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color: var(--text-body); }
.rp-sw { width:16px; height:16px; border-radius:4px; flex:none; border:1px solid rgba(0,0,0,.22); }
.mud-theme-dark .rp-sw { border-color: rgba(255,255,255,.3); }
/* the legend swatch carries the same texture as its bars, so legend ↔ band is never colour-only */
.rp-sw-email   { background: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 2px, transparent 2px 6px), var(--rp-email); }
.rp-sw-call    { background: linear-gradient(rgba(255,255,255,.4) 1.5px, transparent 1.5px) 0 3px/8px 8px, linear-gradient(90deg, rgba(255,255,255,.4) 1.5px, transparent 1.5px) 3px 0/8px 8px, var(--rp-call); }
.rp-sw-meeting { background: radial-gradient(rgba(255,255,255,.55) 1.3px, transparent 1.6px) 0 0/6px 6px, var(--rp-meeting); }
.rp-sw-note    { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.45) 0 2px, transparent 2px 6px), var(--rp-note); }
.rp-sw-sms     { background: repeating-linear-gradient(0deg, rgba(255,255,255,.45) 0 2px, transparent 2px 7px), var(--rp-sms); }
.rp-sw-task    { background: repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 2px, transparent 2px 7px), var(--rp-task); }
.rp-sw-other   { background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)) 2px 2px/3px 3px repeat, var(--rp-other); background-size: 8px 8px; }
.rp-sw-s2 { background: var(--rp-s2); }
.rp-sw-s4 { background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 2px, transparent 2px 6px), var(--rp-s4); }   /* Weighted bars carry the rp-p-weighted hatch */
.rp-sw-won  { background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 2px, transparent 2px 6px), var(--rp-won); }
.rp-sw-lost { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.4) 0 2px, transparent 2px 6px), var(--rp-lost); }
@media (max-width: 600px) { .rp-chartscroll { overflow-x:auto; padding-bottom:4px; } .rp-chartinner { min-width:480px; } }
/* chart / table switch — the table is a first-class view, not a fallback */
.rp-vswitch { display:inline-flex; background: color-mix(in srgb, var(--text-heading) 4%, var(--card-bg)); border:1px solid var(--card-hover-border); border-radius:8px; padding:2px; gap:2px; }
.rp-vswitch button { min-height:28px; padding:0 10px; border:1px solid transparent; border-radius:6px; background:transparent; color: var(--text-body); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.rp-vswitch button[aria-pressed="true"] { background: var(--card-bg); color: var(--primary-ink); border:1px solid var(--card-border); box-shadow: var(--shadow-card); }
.rp-vswitch button:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.rp-outside { margin: 10px 0 0; font-size: 12.5px; color: var(--text-body); }
.rp-dg tr.rp-total :is(th, td) { font-weight: 800; border-top: 2px solid var(--card-hover-border); }
@media (forced-colors: active) { .rp-vswitch button[aria-pressed="true"] { border: 2px solid Highlight; } .rp-sw { forced-color-adjust: none; } }

@media (forced-colors: active) { .rp-kpi, .rp-panel, .rp-btn, .rp-due, .rp-stale { border: 1px solid CanvasText; } .rp-dg th[aria-sort] { border-bottom: 3px solid Highlight; } }
@media (prefers-reduced-motion: reduce) { .rp-page * { transition: none !important; animation: none !important; } }
@media (max-width: 1080px) { .rp-page { padding: 16px 14px 40px; } }
@media (max-width: 560px) { .rp-panels { grid-template-columns: 1fr; } .rp-panel__head { flex-wrap: wrap; } .rp-panel__right { margin-left: 0; } .rp-acts { margin-left: 0; } }

/* ==========================================================================
   CHART OF ACCOUNTS (tansi-coa-redesign.html) — CrmChartOfAccounts, on
   /crm/admin/accounts and in the CRM Settings Financial tab, plus its two
   dialogs (CrmLedgerAccountDialog / CrmLedgerAccountDeleteDialog).
   Input and control borders use --text-caption, not --card-hover-border: a
   12%-alpha edge is ~1.3:1 and fails 1.4.11 on a form control.
   ========================================================================== */
.coa-page { padding: 20px 24px 48px; color: var(--text-heading); }
.coa :is(a, button, input, select, [tabindex]),
.coa-dlg :is(a, button, input, select, [tabindex]) { scroll-margin-top: 96px; scroll-margin-bottom: 28px; }   /* 2.4.11 */
.coa :is(a, button, input, select, [tabindex]):focus-visible,
.coa-dlg :is(a, input, select):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.coa-denied {
    padding: 14px 16px; border-radius: 10px; font-weight: 600;
    border: 1px solid var(--danger-ink); color: var(--danger-ink);
    background: color-mix(in srgb, var(--danger-ink) 12%, var(--card-bg));
}

.coa-crumbs { font-size: 13px; color: var(--text-caption); margin-bottom: 12px; }
.coa-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.coa-crumbs a { color: var(--text-body); }
.coa-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--text-caption); }

.coa-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.coa-head__title { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; font-weight: 800; color: var(--text-heading); }
h2.coa-head__title { font-size: 20px; }
.coa-head__sub { margin: 4px 0 0; color: var(--text-caption); font-size: 13.5px; }
.coa-head__acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.coa-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 9px;
    cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
    border: 1px solid var(--text-caption); background: var(--card-bg); color: var(--text-heading);
}
.coa-btn:hover { background: color-mix(in srgb, var(--text-heading) 4%, var(--card-bg)); }
.coa-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.coa-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.coa-btn[disabled] { opacity: .55; cursor: not-allowed; }
.coa-btn--sm { min-height: 34px; padding: 0 11px; font-size: 13px; }

/* scope note: warn while no workspace is picked, quiet once one is */
.coa-scope {
    display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 13px 15px; margin: 0 0 16px;
    background: var(--warn-soft); border: 1px solid var(--warn-ink); border-radius: 14px;
}
.coa-scope > svg { flex: none; color: var(--warn-ink); margin-top: 2px; }
.coa-scope__txt { min-width: 0; flex: 1; }
.coa-scope__title { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--warn-ink); }
.coa-scope__txt p { margin: 3px 0 0; font-size: 13px; color: var(--text-body); }
.coa-scope--ok { background: var(--card-bg); border-color: var(--card-border); }
.coa-scope--ok > svg { color: var(--primary-ink); }
.coa-scope--ok .coa-scope__title { color: var(--text-heading); }

.coa-count { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--text-body); min-height: 1px; }
/* position:relative keeps the sr-only caption's absolute box inside the scroller */
.coa-wrap { overflow-x: auto; position: relative; border: 1px solid var(--card-border); border-radius: 14px; background: var(--card-bg); }
.coa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.coa-table th, .coa-table td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--card-border); color: var(--text-heading); }
.coa-table thead th {
    background: color-mix(in srgb, var(--text-heading) 4%, var(--card-bg)); font-size: 11.5px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-body); white-space: nowrap;
}
.coa-table tbody tr:last-child > * { border-bottom: 0; }
.coa-table tbody tr:hover { background: color-mix(in srgb, var(--text-heading) 3%, var(--card-bg)); }
.coa-code { font-variant-numeric: tabular-nums; font-weight: 800; }
.coa-sort {
    display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0;
    background: transparent; border: 0; font: inherit; font-size: 11.5px; letter-spacing: .05em;
    text-transform: uppercase; font-weight: 700; color: var(--text-body); cursor: pointer;
}
.coa-sort:hover { color: var(--text-heading); }
.coa-table th[aria-sort] .coa-sort { color: var(--primary-ink); }
.coa-sort__arrow { opacity: 0; transition: transform .12s; }
.coa-table th[aria-sort] .coa-sort__arrow { opacity: 1; }
.coa-sort__arrow.is-desc { transform: rotate(180deg); }
.coa-muted { color: var(--text-caption); font-size: 12.5px; }
.coa-typechip {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    background: color-mix(in srgb, var(--text-heading) 8%, var(--card-bg)); color: var(--text-body);
}
/* status carries a word as well as a colour (1.4.1) */
.coa-st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.coa-st--on { background: var(--success-soft); color: var(--success-ink); }
.coa-st--off { background: color-mix(in srgb, var(--text-heading) 8%, var(--card-bg)); color: var(--text-body); }
.coa-st__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }
.coa-rowacts { display: flex; gap: 6px; justify-content: flex-end; }
.coa-iact {
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--card-hover-border); background: var(--card-bg); color: var(--text-body);
}
.coa-iact:hover { background: color-mix(in srgb, var(--text-heading) 5%, var(--card-bg)); color: var(--text-heading); border-color: var(--text-caption); }
.coa-iact--danger { color: var(--danger-ink); }
.coa-iact--danger:hover { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-ink); }
.coa-empty { padding: 36px 20px; text-align: center; }
.coa-empty__title { margin: 0; font-size: 16px; font-weight: 800; color: var(--text-heading); }
.coa-empty p { margin: 6px 0 14px; color: var(--text-body); font-size: 13.5px; }

/* dialogs */
.coa-form { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.coa-frow { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.coa-f { min-width: 0; }
.coa-f label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; color: var(--mud-palette-text-primary); }
.coa-req { color: var(--danger-ink); margin-left: 2px; }
.coa-f input, .coa-f select {
    width: 100%; height: 42px; padding: 0 12px; font: inherit; border-radius: 9px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    border: 1px solid var(--text-caption);
}
.coa-f input[aria-invalid="true"] { border-color: var(--danger-ink); border-width: 2px; }
.coa-hint { margin: 5px 0 0; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.coa-err { margin: 5px 0 0; font-size: 12.5px; font-weight: 700; color: var(--danger-ink); }
.coa-switchrow {
    display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 9px;
    border: 1px solid var(--mud-palette-lines-default); background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}
.coa-switchrow__txt { min-width: 0; flex: 1; }
.coa-switchrow__nm { display: block; font-size: 13.5px; font-weight: 700; }
.coa-switchrow__ds { display: block; font-size: 12.5px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.coa-sw { position: relative; width: 46px; height: 26px; flex: none; }
.coa-sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.coa-sw__tr {
    display: block; width: 46px; height: 26px; border-radius: 999px; pointer-events: none;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, var(--mud-palette-surface));
    border: 1.5px solid var(--text-caption); transition: background .12s;
}
.coa-sw__tr::after {
    content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 999px;
    background: var(--mud-palette-surface); border: 1.5px solid var(--text-caption); transition: transform .12s;
}
.coa-sw input:checked + .coa-sw__tr { background: var(--success-ink); border-color: var(--success-ink); }
.coa-sw input:checked + .coa-sw__tr::after { transform: translateX(20px); border-color: var(--success-ink); }
.coa-sw input:focus-visible + .coa-sw__tr { outline: 3px solid var(--focus); outline-offset: 2px; }
.coa-danger {
    padding: 13px 14px; margin: 4px 0 14px; border-radius: 10px;
    border: 1px solid var(--danger-ink); border-left-width: 4px; background: var(--danger-soft);
}
.coa-danger p { margin: 0; font-size: 13.5px; color: var(--mud-palette-text-primary); }
.coa-danger p + p { margin-top: 8px; }
.coa-dlg .mud-dialog-actions { flex-wrap: wrap; gap: 8px; }
.coa-dlg__left { margin-right: auto; }

@media (forced-colors: active) {
    .coa-btn, .coa-iact, .coa-st, .coa-typechip, .coa-scope { border: 1px solid ButtonBorder; }
    .coa-table th[aria-sort] { border-bottom: 3px solid Highlight; }
    .coa-sw__tr { border-color: ButtonText; }
}
@media (prefers-reduced-motion: reduce) { .coa *, .coa-dlg * { transition: none !important; } }
@media (max-width: 1080px) { .coa-page { padding: 16px 14px 40px; } }
@media (max-width: 560px) { .coa-frow { grid-template-columns: 1fr; } .coa-head__acts { margin-left: 0; } }

/* ── CRM settings (tansi-admin-redesign.html) ── */
/* ==========================================================================
   CRM settings page (StagesAdmin, /crm/admin) and its panels: stages, custom fields,
   picklists, tags. Tokens come from app.css (:root / .mud-theme-dark), so
   the dark theme rides along without per-rule overrides. Breadcrumb: reuse
   .lp-crumbs. Buttons: reuse .coa-btn. Dialogs: reuse the coa-* form/dialog
   classes (CrmSettingsDeleteDialog / CrmSettingsConfirmDialog add .cs-dlg).
   ========================================================================== */
.cs-page { padding: 20px 24px 48px; color: var(--text-heading); }
.cs :is(a, button, input, select, [tabindex]),
.cs-dlg :is(a, button, input, select, [tabindex]) { scroll-margin-top: 96px; scroll-margin-bottom: 28px; }   /* 2.4.11 */
.cs :is(a, button, input, select, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* page head */
.cs-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cs-head__title { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; font-weight: 800; color: var(--text-heading); }
.cs-head__sub { margin: 4px 0 0; color: var(--text-caption); font-size: 13.5px; }
.cs-head__acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* scope bar: quiet for a workspace, amber when editing the global defaults.
   --warn-ink on --warn-soft: 5.7:1 light (#8a5300 / #fdf3e2), 9.4:1 dark (#f0bf6a / #2a2010). */
.cs-scope {
    display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 13px 15px; margin: 0 0 16px;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px;
}
.cs-scope > svg { flex: none; color: var(--primary-ink); margin-top: 2px; }
.cs-scope__txt { min-width: 0; flex: 1; }
.cs-scope__title { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--text-heading); }
.cs-scope__txt p { margin: 3px 0 0; font-size: 13px; color: var(--text-body); }
.cs-scope__pick { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.cs-scope__pick > div { flex: 1 1 200px; min-width: 0; }
.cs-scope label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-body); margin-bottom: 4px; }
.cs-scope select {
    width: 100%; max-width: 340px; min-width: 0; height: 38px; padding: 0 11px; font: inherit; border-radius: 9px;
    background: var(--card-bg); color: var(--text-heading); border: 1px solid var(--text-caption);
}
.cs-scope--global { background: var(--warn-soft); border-color: var(--warn-ink); }
.cs-scope--global > svg, .cs-scope--global .cs-scope__title { color: var(--warn-ink); }
.cs-scope--global .cs-scope__txt p { color: var(--text-heading); }

/* tab strip (folder tabs onto the panel); role="tablist" + roving focus in StagesAdmin.razor.js */
.cs-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 -1px; padding: 0; list-style: none; position: relative; z-index: 1; }
.cs-tab {
    min-height: 44px; padding: 0 15px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0;
    background: transparent; color: var(--text-body); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cs-tab:hover { background: color-mix(in srgb, var(--text-heading) 4%, var(--card-bg)); color: var(--text-heading); }
.cs-tab[aria-selected="true"] {
    background: var(--card-bg); border-color: var(--card-border); color: var(--primary-ink);
    box-shadow: inset 0 3px 0 var(--primary);
}
.cs-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 10px 10px 0 0; }
.cs-tabpanel {
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 0 14px 14px;
    padding: 16px; color: var(--text-heading);
}
.cs-tabpanel:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* panel head */
.cs-panelhead { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.cs-panelhead__txt { min-width: 0; flex: 1 1 320px; }
.cs-panelhead__title { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--text-heading); }
.cs-panelhead__txt p { margin: 3px 0 0; font-size: 13px; color: var(--text-body); max-width: 70ch; }
.cs-panelhead__right { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.cs-fld label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-body); margin-bottom: 4px; }
.cs-fld select {
    height: 40px; padding: 0 11px; font: inherit; border-radius: 9px; min-width: 0; max-width: 230px;
    background: var(--card-bg); color: var(--text-heading); border: 1px solid var(--text-caption);
}

/* table; position:relative keeps any sr-only caption's absolute box inside the scroller */
.cs-tw { overflow-x: auto; position: relative; border: 1px solid var(--card-border); border-radius: 10px; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 660px; }
.cs-table th, .cs-table td {
    padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--card-border);
    color: var(--text-heading); position: relative; vertical-align: middle;
}
.cs-table thead th {
    background: color-mix(in srgb, var(--text-heading) 4%, var(--card-bg)); font-size: 11.5px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-body); white-space: nowrap; font-weight: 700;
}
.cs-table th[scope="row"] { font-weight: 600; }
.cs-table tbody tr:last-child > * { border-bottom: 0; }
.cs-table tbody tr:hover { background: color-mix(in srgb, var(--text-heading) 3%, var(--card-bg)); }
.cs-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--text-body); }

/* reorder cell — disabled rather than absent, so the column keeps its shape */
.cs-order { display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.cs-order__n { min-width: 20px; font-variant-numeric: tabular-nums; color: var(--text-caption); font-size: 12px; font-weight: 700; }
.cs-oarr {
    width: 30px; height: 30px; min-width: 24px; min-height: 24px; display: grid; place-items: center; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--card-hover-border); background: var(--card-bg); color: var(--text-body); padding: 0;
}
.cs-oarr:hover:not(:disabled) { background: color-mix(in srgb, var(--text-heading) 6%, var(--card-bg)); color: var(--text-heading); border-color: var(--text-caption); }
.cs-oarr:disabled { opacity: .4; cursor: not-allowed; }

/* row icon buttons */
.cs-rowacts { display: flex; gap: 6px; justify-content: flex-end; }
.cs-iact {
    width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; cursor: pointer; padding: 0;
    border: 1px solid var(--card-hover-border); background: var(--card-bg); color: var(--text-body);
}
.cs-iact:hover:not(:disabled) { background: color-mix(in srgb, var(--text-heading) 5%, var(--card-bg)); color: var(--text-heading); border-color: var(--text-caption); }
.cs-iact--danger { color: var(--danger-ink); }
.cs-iact--danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-ink); }
.cs-iact:disabled { opacity: .4; cursor: not-allowed; }

/* status pill — a word as well as a colour (1.4.1) */
.cs-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.cs-pill--on { background: var(--success-soft); color: var(--success-ink); }
.cs-pill--off { background: color-mix(in srgb, var(--text-heading) 8%, var(--card-bg)); color: var(--text-body); }
.cs-pill__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }

/* stage kind chip */
.cs-chip {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
    background: color-mix(in srgb, var(--text-heading) 8%, var(--card-bg)); color: var(--text-body);
}
.cs-chip--won { background: var(--success-soft); color: var(--success-ink); }
.cs-chip--lost { background: var(--danger-soft); color: var(--danger-ink); }

/* default marker + "Make default" text button */
.cs-deftag {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    background: var(--primary-soft); color: var(--primary-ink); font-size: 11.5px; font-weight: 800;
}
.cs-mkdef {
    min-height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--text-caption); cursor: pointer;
    background: var(--card-bg); color: var(--text-body); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.cs-mkdef:hover { background: color-mix(in srgb, var(--text-heading) 4%, var(--card-bg)); color: var(--text-heading); }

/* tag colour swatch */
.cs-swatch {
    width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .25);
    display: inline-block; vertical-align: -4px; margin-right: 7px; flex: none;
}
.mud-theme-dark .cs-swatch { border-color: rgba(255, 255, 255, .3); }

/* empty state */
.cs-empty { padding: 32px 18px; text-align: center; }
.cs-empty__title { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-heading); }
.cs-empty p { margin: 6px auto 14px; color: var(--text-body); font-size: 13.5px; max-width: 52ch; }

/* stage-scope note above the stages table (defaults vs. own stages) */
.cs-note {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px;
    border: 1px solid var(--card-border); border-radius: 10px; background: color-mix(in srgb, var(--text-heading) 3%, var(--card-bg));
}
.cs-note p { margin: 0; flex: 1 1 280px; min-width: 0; font-size: 13px; color: var(--text-body); }
.cs-panel > .coa-err { margin: 0 0 10px; }

/* dialogs (on top of .coa-dlg) */
.cs-dlg__body { margin: 4px 0 8px; font-size: 13.5px; color: var(--mud-palette-text-primary); }
.cs-dlg .coa-f textarea {
    width: 100%; min-height: 96px; padding: 9px 12px; font: inherit; border-radius: 9px; resize: vertical;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border: 1px solid var(--text-caption);
}
.cs-dlg .coa-f textarea[aria-invalid="true"] { border-color: var(--danger-ink); border-width: 2px; }
.cs-dlg .coa-f input[readonly] { background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface)); }
.cs-dlg :is(textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* radio cards: a stage's Open / Won / Lost, a tag's colour (one group, full-width labels) */
.cs-kindset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cs-kindset > legend { padding: 0; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--mud-palette-text-primary); }
.cs-kindopts { display: grid; gap: 8px; }
.cs-kindopts--grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cs-kindopts > label {
    display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; cursor: pointer; border-radius: 9px;
    border: 1px solid var(--text-caption); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
}
.cs-kindopts > label:hover { background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface)); }
.cs-kindopts > label:has(input:checked) { border-color: var(--mud-palette-primary); background: var(--primary-soft); }
.cs-kindopts input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--mud-palette-primary); flex: none; }
.cs-kindopts input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cs-kindopts__nm { display: block; font-size: 13.5px; font-weight: 700; }
.cs-kindopts__ds { display: block; font-size: 12.5px; color: var(--mud-palette-text-secondary); margin-top: 2px; }

@media (forced-colors: active) {
    .cs-scope, .cs-tab[aria-selected="true"], .cs-oarr, .cs-iact, .cs-mkdef { border: 1px solid ButtonBorder; }
    .cs-tab[aria-selected="true"] { border-top: 3px solid Highlight; }
    .cs-pill, .cs-chip, .cs-deftag { border: 1px solid CanvasText; }
    .cs-swatch { forced-color-adjust: none; border: 1px solid CanvasText; }
    .cs-kindopts > label { border: 1px solid ButtonBorder; }
    .cs-kindopts > label:has(input:checked) { border: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) { .cs *, .cs-dlg * { transition: none !important; animation: none !important; } }
@media (max-width: 1080px) { .cs-page { padding: 16px 14px 40px; } }
@media (max-width: 600px) {
    .cs-panelhead { flex-direction: column; align-items: stretch; }
    .cs-panelhead__txt { flex-basis: auto; }
    .cs-panelhead__right { margin-left: 0; width: 100%; }
    .cs-head__acts { margin-left: 0; }
    .cs-tab { padding: 0 11px; }
}