/* ==========================================================================
   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 (PipelineKeyboardHelpDialog) */
.pipeline-kbd { margin: 0; }
.pipeline-kbd__row {
    display: flex;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--card-border);
}
.pipeline-kbd__row:last-child { border-bottom: 0; }
.pipeline-kbd__keys {
    flex: none;
    width: 118px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
}
.pipeline-kbd__key {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--card-hover-border, var(--card-border));
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--card-bg);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-heading);
}
.pipeline-kbd__what {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-body);
}

.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;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    background:
        radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--mud-palette-primary) 8%, 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;
}

/* 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__brand-name {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-heading);
}

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

/* --------------------------------------------------------------------------
   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 --------- */
/* Rendered through the dialog provider (CrmReachDialog) so it escapes the
   page's stacking context and is always opaque. Pinned to the right edge as a
   full-height sheet; MudBlazor supplies the dimmed overlay, focus trap & Esc. */
.loop-sheet.mud-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    height: auto;
    max-height: 100vh;
    width: min(440px, 100vw);
    max-width: 100vw;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: -24px 0 60px -34px rgba(0, 0, 0, 0.55);
    animation: loop-sheet-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.loop-sheet .mud-dialog-content {
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    max-height: none;
}

.loop-sheet .mud-dialog-title { display: none; }

@keyframes loop-sheet-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.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; }

@media (max-width: 480px) { .loop-sheet.mud-dialog { width: 100vw; } }

@media (prefers-reduced-motion: reduce) {
    .loop * { transition: none !important; }
    .loop-card:hover { transform: none; }
    .loop-sheet.mud-dialog { animation: 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 (CrmPublicLanguageSwitcher) */
.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); }