/* antViews.css — Views 2.0 surfaces (AN-1056).
 *
 * Three things live here, in the order the user meets them:
 *   1. .vz-field-picker  — the searchable CRM field popover (AN-1088)
 *   2. .vz-views-*       — the sidebar panel that APPLIES a view
 *   3. .vz-card-*        — the views manager's card mock-up that EDITS one,
 *      plus .vz-colormap-* for the inline colour mapper
 *
 * The manager's two-pane shell is not here: it reuses .vz-modal-wide /
 * .vz-master-detail from antStyle.css, which the org chart template picker
 * already established for exactly this shape.
 *
 * Everything is token-driven. The --vz-* names come from the block in
 * antApp.css that is kept in sync with the marketing site, so the values match
 * the Figma design system without a second source of truth.
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. Field picker
   ───────────────────────────────────────────────────────────────────────── */

.vz-field-picker {
    position: fixed;
    z-index: 10050; /* above .modal (10001) — it opens from inside one */
    display: flex;
    flex-direction: column;
    width: 340px;
    max-height: min(440px, calc(100vh - 32px));
    background: var(--color-background-surface);
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius-md);
    box-shadow: var(--vz-shadow-md);
    overflow: hidden;
    font-family: var(--vz-font-sans);
}

.vz-field-picker-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-12) var(--space-8);
}
.vz-field-picker-titles {
    flex: 1;
    min-width: 0;
}
.vz-field-picker-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--vz-fg-strong);
}
.vz-field-picker-subtitle {
    font-size: 11px;
    line-height: 16px;
    color: var(--vz-fg-muted);
}
.vz-field-picker-close,
.vz-field-picker-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--vz-grey-700);
    font-size: 12px;
    cursor: pointer;
}
.vz-field-picker-close:hover,
.vz-field-picker-clear:hover {
    color: var(--vz-fg-strong);
}

.vz-field-picker-search {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0 var(--space-12) var(--space-8);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-primary-500);
    border-radius: var(--vz-radius-md);
    box-shadow: var(--vz-shadow-focus);
}
.vz-field-picker-search i {
    font-size: 12px;
    color: var(--vz-grey-600);
}
.vz-field-picker-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: 400 13px/20px var(--vz-font-sans);
    color: var(--vz-fg-primary);
}

.vz-field-picker-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-top: 1px solid var(--vz-border-subtle);
    padding: var(--space-4) 0;
}

.vz-field-picker-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    padding: var(--space-8) var(--space-12);
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}
.vz-field-picker-row:hover:not(:disabled),
.vz-field-picker-row.is-active:not(:disabled) {
    background: var(--vz-grey-150);
}
.vz-field-picker-row:disabled {
    cursor: default;
}
/* The whole row dims as a block — not just the label — so an unavailable
   field reads as unavailable at a glance. */
.vz-field-picker-row.is-dim {
    opacity: 0.55;
}
.vz-field-picker-row-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.vz-field-picker-row-name {
    font: 500 13px/18px var(--vz-font-sans);
    color: var(--vz-fg-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vz-field-picker-row-meta {
    font: 400 11px/16px var(--vz-font-sans);
    color: var(--vz-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vz-field-picker-row-meta.is-used {
    color: var(--color-primary-600);
}
.vz-field-picker-row-meta.is-warn {
    color: var(--vz-gold-500);
}
.vz-field-picker-row > i {
    flex: none;
    font-size: 11px;
    color: var(--vz-grey-600);
}
.vz-field-picker-row.is-used > i {
    color: var(--color-primary-600);
}

.vz-field-picker-empty {
    padding: var(--space-16) var(--space-12);
}
.vz-field-picker-empty-title {
    font: 600 13px/20px var(--vz-font-sans);
    color: var(--vz-fg-primary);
}
.vz-field-picker-empty-hint {
    font: 400 12px/18px var(--vz-font-sans);
    color: var(--vz-fg-muted);
}

.vz-field-picker-foot {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border-top: 1px solid var(--vz-border-subtle);
    background: var(--vz-grey-150);
    font: 400 11px/16px var(--vz-font-sans);
    color: var(--vz-grey-700);
}
.vz-field-picker-foot i {
    font-size: 12px;
    color: var(--vz-blue-600);
}
.vz-field-picker.is-full .vz-field-picker-foot {
    font-weight: 500;
}
.vz-field-picker.is-full .vz-field-picker-foot i {
    color: var(--vz-gold-500);
}
.vz-field-picker-clear-selection {
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    font: 500 11px/16px var(--vz-font-sans);
    color: var(--vz-blue-700);
    cursor: pointer;
    white-space: nowrap;
}
.vz-field-picker-clear-selection:hover {
    text-decoration: underline;
}

/* Single-value variant: the trigger that replaces a <select> of CRM fields.
   Sized like .form-select so it drops into existing settings forms unchanged
   (VizrmFieldPicker.enhanceSelect). */
.vz-field-select-native {
    display: none !important;
}
.vz-field-select {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius-md);
    background: var(--color-background-surface);
    font: 400 14px/24px var(--vz-font-sans);
    color: var(--vz-fg-primary);
    text-align: left;
    cursor: pointer;
}
.vz-field-select:hover {
    border-color: var(--vz-grey-600);
}
.vz-field-select.vz-field-picker-open {
    border-color: var(--color-primary-500);
    box-shadow: var(--vz-shadow-focus);
}
.vz-field-select-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vz-field-select-label.is-empty {
    color: var(--vz-fg-muted);
}
.vz-field-select > i {
    flex: none;
    font-size: 11px;
    color: var(--vz-grey-600);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. Sidebar — the panel that applies a view
   ───────────────────────────────────────────────────────────────────────── */

/* The footer sits directly under the last view, like the action buttons in the
   other sidebar panels (Contacts' "Create Person" and friends) — not pinned to
   the bottom of the offcanvas. */
.vz-views-panel {
    display: flex;
    flex-direction: column;
    font-family: var(--vz-font-sans);
}
.vz-views-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* "Show field labels" — a user preference, so it sits above the list rather
   than inside any one view (AN-1056 D6). */
.vz-views-pref {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12);
    border: 1px solid var(--vz-border-subtle);
    border-radius: var(--vz-radius-md);
    background: var(--vz-grey-300);
}
.vz-views-pref-text {
    flex: 1;
    min-width: 0;
}
.vz-views-pref-title {
    font: 600 13px/20px var(--vz-font-sans);
    color: var(--vz-fg-primary);
}
.vz-views-pref-hint {
    font: 400 11px/16px var(--vz-font-sans);
    color: var(--vz-fg-muted);
}

.vz-view-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    width: 100%;
    padding: var(--space-12);
    border: 1px solid var(--vz-border-subtle);
    border-radius: var(--vz-radius-md);
    background: var(--color-background-surface);
    text-align: left;
    cursor: pointer;
}
.vz-view-row:hover {
    border-color: var(--vz-border);
}
.vz-view-row.is-active {
    border-color: var(--color-primary-500);
    background: var(--color-primary-100);
}
.vz-view-mark {
    flex: none;
    margin-top: 2px;
    font-size: 15px;
    color: var(--vz-grey-500);
}
.vz-view-row.is-active .vz-view-mark {
    color: var(--color-primary-500);
}
.vz-view-body {
    flex: 1;
    min-width: 0;
}
.vz-view-name-line {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}
.vz-view-name {
    font: 500 14px/21px var(--vz-font-sans);
    color: var(--vz-fg-primary);
}
.vz-view-row.is-active .vz-view-name {
    font-weight: 600;
    color: var(--vz-fg-strong);
}
.vz-view-badge {
    padding: 1px 6px;
    border-radius: var(--vz-radius-sm);
    background: var(--vz-grey-150);
    font: 600 10px/16px var(--vz-font-sans);
    color: var(--vz-grey-700);
}
.vz-view-badge.is-mine {
    background: var(--color-primary-200);
    color: var(--color-primary-600);
}
.vz-view-shared-icon {
    font-size: 12px;
    color: var(--vz-grey-700);
}
.vz-view-summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: var(--space-4);
}
.vz-view-summary-line {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    font: 400 11px/16px var(--vz-font-sans);
    color: var(--vz-fg-muted);
}
.vz-view-summary-line i {
    flex: none;
    width: 13px;
    font-size: 11px;
    color: var(--vz-grey-700);
}
.vz-view-summary-line span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vz-view-colors {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
    font: 400 11px/16px var(--vz-font-sans);
    color: var(--vz-fg-muted);
}
.vz-view-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.vz-view-edit {
    flex: none;
    padding: 3px;
    border: none;
    background: none;
    color: var(--vz-grey-700);
    font-size: 12px;
    cursor: pointer;
}
.vz-view-edit:hover {
    color: var(--vz-fg-strong);
}

.vz-views-applied {
    flex: 1;
    min-width: 0;
    font: 400 12px/18px var(--vz-font-sans);
    color: var(--vz-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. Views manager — the card mock-up
   ───────────────────────────────────────────────────────────────────────── */

/* Two columns: the example cards on the left, and whatever is being configured
   about them (currently the colour mapper) on the right. The cards scale to fit
   rather than scrolling — see __viewsFitCards. */
.vz-cards-stage {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: var(--space-16);
    border: 1px solid var(--vz-border-subtle);
    border-radius: var(--vz-radius-lg);
    background: var(--color-background-app);
}
/* Holds the scaled cards. Its height is set in JS to the SCALED height, because
   a transform does not affect layout and the stage would otherwise still
   reserve the cards' full natural height. */
.vz-cards-fit {
    flex: 1;
    min-width: 0;
}
.vz-cards-side {
    flex: 0 0 300px;
    max-width: 300px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Nothing to configure — give the width back to the cards rather than leaving
   an empty gutter beside them. */
.vz-cards-side:empty {
    display: none;
}
.vz-cards-hint {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    font: 700 11px/16px var(--vz-font-sans);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vz-fg-muted);
}
.vz-cards-hint-note {
    margin-left: auto;
    font: 400 11px/16px var(--vz-font-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--vz-fg-muted);
}
.vz-cards-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
}

.vz-card {
    width: 300px;
    border: 1.5px dashed var(--color-primary-500);
    border-radius: var(--vz-radius-lg);
    background: var(--color-background-surface);
    box-shadow: var(--vz-shadow-sm);
}
.vz-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border-radius: 10px 10px 0 0;
    background: var(--vz-grey-900);
}
.vz-card--person .vz-card-head {
    background: var(--vz-grey-700);
}
.vz-card-head i,
.vz-card-title {
    color: var(--color-neutral-50);
}
.vz-card-title {
    flex: 1;
    font: 700 13px/20px var(--vz-font-sans);
}
.vz-card-example {
    font: 400 11px/16px var(--vz-font-sans);
    color: var(--vz-grey-600);
}
.vz-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--vz-radius-pill);
    background: var(--vz-grey-500);
    color: var(--vz-grey-800);
    font-size: 12px;
}
.vz-card-body {
    padding: var(--space-8);
}

.vz-card-field {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4);
    border: 1px solid transparent;
    border-radius: 6px;
}
.vz-card-field:hover {
    background: var(--vz-grey-150);
}
.vz-card-field.is-color {
    background: var(--color-primary-100);
    border-color: var(--color-primary-500);
}
.vz-card-field.is-dragging {
    opacity: 0.4;
}
.vz-card-field.is-drop-target {
    border-color: var(--color-primary-500);
}
.vz-card-grip {
    flex: none;
    font-size: 13px;
    color: var(--vz-grey-600);
    cursor: grab;
}
.vz-card-field-text {
    flex: 1;
    min-width: 0;
}
.vz-card-field-label {
    font: 600 13px/19px var(--vz-font-sans);
    color: var(--vz-fg-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vz-card-field-meta {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font: 400 11px/16px var(--vz-font-sans);
    color: var(--vz-fg-muted);
}
.vz-card-field-swatches {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.vz-card-field-swatch {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}
.vz-card-gradient {
    display: inline-block;
    width: 46px;
    height: 9px;
    border-radius: 2px;
}
.vz-card-field-action {
    flex: none;
    padding: 2px 4px;
    border: none;
    background: none;
    color: var(--vz-grey-600);
    font-size: 11px;
    cursor: pointer;
}
.vz-card-field-action:hover {
    color: var(--vz-fg-strong);
}
.vz-card-field-action.is-on {
    color: var(--color-primary-600);
}

.vz-card-add {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-8);
    border: 1px dashed var(--vz-border);
    border-radius: var(--vz-radius-md);
    background: none;
    color: var(--vz-grey-700);
    font: 500 11px/16px var(--vz-font-sans);
    cursor: pointer;
}
.vz-card-add:hover,
.vz-card-add.vz-field-picker-open {
    border-style: solid;
    border-color: var(--color-primary-500);
    background: var(--color-primary-100);
    color: var(--color-primary-600);
}
/* Takes the add button's place once a field list holds its maximum — a dead
   disabled button explains nothing. Shared by the manager cards and the
   details sidebar. */
.vz-field-limit-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    width: 100%;
    margin-top: var(--space-8);
    padding: var(--space-8);
    border: 1px dashed var(--color-warning-500);
    border-radius: var(--vz-radius-md);
    background: var(--color-warning-100);
    font: 400 12px/18px var(--vz-font-sans);
    color: var(--vz-fg-primary);
    text-align: left;
}
.vz-field-limit-note i {
    flex: none;
    font-size: 13px;
    color: var(--vz-gold-500);
}

/* The reporting line between the two example cards. */
.vz-card-connector {
    width: 300px;
    display: flex;
    justify-content: center;
}
.vz-card-connector span {
    width: 1px;
    height: 26px;
    background: var(--vz-grey-500);
}

.vz-card-empty {
    padding: var(--space-8) var(--space-4);
    font: 400 12px/18px var(--vz-font-sans);
    color: var(--vz-fg-muted);
}

/* Colour strip under the cards — the one place that says how cards are coloured. */
.vz-color-strip {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    width: 300px;
    margin-top: var(--space-16);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius-md);
    background: var(--color-background-surface);
    font: 400 12px/18px var(--vz-font-sans);
    color: var(--vz-fg-muted);
}
.vz-color-strip.is-on {
    border-color: var(--color-primary-500);
    background: var(--color-primary-100);
    color: var(--vz-fg-primary);
    cursor: pointer;
}
.vz-color-strip i {
    font-size: 12px;
    color: var(--vz-grey-700);
}
.vz-color-strip.is-on i {
    color: var(--color-primary-600);
}
.vz-color-strip-action {
    color: var(--vz-blue-700);
    font-weight: 500;
}

/* Colour mapper, opened from a field row's palette icon. Lives in
   .vz-cards-side, beside the cards. It scrolls its own option rows so a
   many-valued dropdown cannot push the footer actions out of reach. */
.vz-colormap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    width: 100%;
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius-md);
    background: var(--color-background-surface);
    box-shadow: var(--vz-shadow-sm);
    overflow: hidden;
}
.vz-colormap-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-12);
    border-bottom: 1px solid var(--vz-border-subtle);
}
.vz-colormap-head i {
    margin-top: 2px;
    font-size: 13px;
    color: var(--vz-grey-800);
}
.vz-colormap-titles {
    flex: 1;
    min-width: 0;
}
.vz-colormap-title {
    font: 700 12px/18px var(--vz-font-sans);
    color: var(--vz-fg-strong);
}
.vz-colormap-hint {
    font: 400 11px/16px var(--vz-font-sans);
    color: var(--vz-fg-muted);
}
.vz-colormap-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-8) var(--space-12);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.vz-colormap-head,
.vz-colormap-foot,
.vz-colormap-gradient {
    flex: none;
}
.vz-colormap-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    padding: var(--space-4);
    border: none;
    border-radius: 6px;
    background: none;
    text-align: left;
    cursor: pointer;
}
.vz-colormap-row:hover,
.vz-colormap-row.is-open {
    background: var(--vz-grey-150);
}
.vz-colormap-swatch {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: var(--vz-radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.vz-colormap-label {
    flex: 1;
    min-width: 0;
    font: 400 12px/18px var(--vz-font-sans);
    color: var(--vz-fg-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vz-colormap-row > i {
    font-size: 10px;
    color: var(--vz-grey-600);
}
.vz-colormap-palette {
    margin: var(--space-4) 0 var(--space-8);
    padding: var(--space-8);
    border: 1px solid var(--vz-border-subtle);
    border-radius: var(--vz-radius-md);
    background: var(--vz-grey-150);
}
/* The swatches themselves come from the shared palette (.group-color-palette /
   .color-swatch in antApp.css); this only sizes them down for the narrower
   mapper column. */
.vz-colormap-palette .group-color-palette {
    margin-top: 0;
    gap: var(--space-4);
}
.vz-colormap-palette .color-swatch {
    width: 24px;
    height: 24px;
}
.vz-colormap-foot {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-8) var(--space-12);
    border-top: 1px solid var(--vz-border-subtle);
}
.vz-colormap-foot button {
    border: none;
    background: none;
    padding: 0;
    font: 500 12px/18px var(--vz-font-sans);
    cursor: pointer;
}
.vz-colormap-reset {
    color: var(--vz-blue-700);
}
.vz-colormap-stop {
    margin-left: auto;
    color: var(--color-error-500);
}
.vz-colormap-gradient {
    padding: var(--space-12) var(--space-12) 0;
}
.vz-colormap-gradient-bar {
    height: 12px;
    border-radius: var(--vz-radius-pill);
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.vz-colormap-gradient-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-4);
    font: 500 11px/16px var(--vz-font-sans);
    color: var(--vz-fg-muted);
}

/* Manager list rows carry badges the template picker's rows do not. */
.vz-view-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.vz-view-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: 2px 7px;
    border-radius: var(--vz-radius-sm);
    background: var(--vz-grey-200);
    font: 700 10px/15px var(--vz-font-sans);
    color: var(--vz-grey-700);
}
.vz-view-chip.is-mine {
    background: var(--color-primary-200);
    color: var(--color-primary-600);
}
.vz-view-chip i {
    font-size: 10px;
}

/* Admin-only menu entries stay visible for members, but inert — a member can
   see the capability exists and who to ask for it (AN-1056 D14).

   They sit under a shared "Admin" section header rather than one badge each: the
   badge was right-aligned into the label's own box and overlapped longer entries.
   The header carries the same information once and costs the labels nothing. */
.vz-master-row-actions .dropdown-header {
    padding: var(--space-8, 8px) var(--space-16, 16px) var(--space-4, 4px);
    font: 600 11px/16px var(--vz-font-sans);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vz-grey-600);
}
.dropdown-item.is-locked {
    opacity: 0.65;
    cursor: default;
}
/* Bootstrap paints its own hover/focus background on every .dropdown-item; an
   inert entry must not look clickable on the way past. */
.dropdown-item.is-locked:hover,
.dropdown-item.is-locked:focus {
    background-color: transparent;
    color: inherit;
}
/* Destructive entries (delete view). A class, not an inline colour, so the
   dark-mode rules can still restyle the hover state. */
.dropdown-item.vz-dropdown-danger {
    color: var(--color-error-500);
}

/* A shared view is read-only for members: the notice explains why once, and the
   pane below it stops taking input. Pointer-events alone would leave the fields
   focusable by keyboard, so the interactive children are disabled too. */
.vz-detail-locked {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8, 8px);
    margin-bottom: var(--space-16, 16px);
    padding: var(--space-12, 12px) var(--space-16, 16px);
    border: 1px solid var(--vz-grey-300);
    border-radius: var(--vz-radius-md, 8px);
    background: var(--color-background-subtle, var(--vz-grey-100));
    font: 400 13px/19px var(--vz-font-sans);
    color: var(--vz-grey-800);
}
.vz-detail-locked i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--vz-grey-600);
}
.vz-detail.is-readonly .vz-cards-stage,
.vz-detail.is-readonly .vz-cards-hint {
    opacity: 0.7;
    pointer-events: none;
}
.vz-detail.is-readonly .vz-view-name-input {
    color: var(--vz-grey-700);
    cursor: default;
}

.vz-views-dirty {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--vz-radius-pill);
    background: var(--color-warning-100);
    font: 600 11px/16px var(--vz-font-sans);
    color: var(--vz-grey-900);
}
.vz-views-dirty i {
    font-size: 7px;
    color: var(--vz-gold-500);
}

/* Detail-pane name field: looks like text until you focus it. */
.vz-view-name-input {
    width: 100%;
    padding: 2px 6px;
    margin-left: -6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: 700 16px/24px var(--vz-font-sans);
    color: var(--vz-fg-strong);
}
.vz-view-name-input:hover {
    border-color: var(--vz-border-subtle);
}
.vz-view-name-input:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: var(--vz-shadow-focus);
}

/* ─────────────────────────────────────────────────────────────────────────
   Details sidebar — in-place field editing (AN-1056 D9)
   ───────────────────────────────────────────────────────────────────────── */

.vz-detail-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    width: 100%;
    margin-top: var(--space-8);
    padding: var(--space-8);
    border: 1px dashed var(--vz-border);
    border-radius: var(--vz-radius-md);
    background: none;
    color: var(--vz-grey-700);
    font: 600 12px/18px var(--vz-font-sans);
    cursor: pointer;
}
.vz-detail-add:hover,
.vz-detail-add.vz-field-picker-open {
    border-style: solid;
    border-color: var(--color-primary-500);
    background: var(--color-primary-100);
    color: var(--color-primary-600);
}
/* The per-row remove control is .details-remove (antApp.css), a row action
   next to the edit pencil. Adding fields is a view-mode affordance: while the
   create / edit dialogue is open the list is frozen. */
#personDetails.create-dialogue .vz-detail-add,
#personDetails.create-dialogue .vz-field-limit-note,
#personDetails.create-dialogue .vz-card-empty {
    display: none;
}
/* Spinner loader (Figma 1050:504): a 32px ring, 4px primary-500 stroke, with
   one quadrant cut out; the text variant is not used in the sidebar. Size via
   --vz-spinner-size, the stroke keeps the 1:8 ratio of the design. */
.vz-spinner {
    --vz-spinner-size: 32px;
    box-sizing: border-box;
    display: inline-block;
    flex: none;
    width: var(--vz-spinner-size);
    height: var(--vz-spinner-size);
    border: calc(var(--vz-spinner-size) / 8) solid var(--color-primary-500);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
/* A just-added field renders instantly; its value is still on its way from
   the CRM, so the row hides its content and shows the spinner, centred in the
   row, until the background fetch lands. */
.contactdata.vz-detail-pending > * {
    visibility: hidden;
}
.contactdata.vz-detail-pending::before {
    content: '';
    --vz-spinner-size: 24px;
    position: absolute;
    inset: 0;
    margin: auto;
    box-sizing: border-box;
    width: var(--vz-spinner-size);
    height: var(--vz-spinner-size);
    border: calc(var(--vz-spinner-size) / 8) solid var(--color-primary-500);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.vz-detail-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin-top: var(--space-12);
    padding: var(--space-12);
    border: 1px solid var(--color-info-500);
    border-radius: var(--vz-radius-md);
    background: var(--color-info-100);
    font: 400 12px/18px var(--vz-font-sans);
    color: var(--vz-fg-primary);
}
.vz-detail-note i {
    margin-top: 2px;
    font-size: 13px;
    color: var(--color-info-500);
}

/* Plan note (AN-1056 D22) — what a single-view plan is missing, shown in the
   sidebar Views panel and, compact, where the manager's "New view" button would
   be. Primary tint like .vz-master-new so it reads as "the next thing to do",
   not as an error. */
.vz-plan-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin-top: var(--space-8);
    padding: var(--space-12);
    border: 1px solid var(--color-info-500);
    border-radius: var(--vz-radius-md);
    background: var(--color-info-100);
    font: 400 12px/18px var(--vz-font-sans);
    color: var(--vz-fg-primary);
}
.vz-plan-note > i {
    margin-top: 2px;
    font-size: 13px;
    color: var(--color-primary-600);
}
.vz-plan-note-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}
.vz-plan-note-actions {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}
.vz-plan-note-link {
    color: var(--color-primary-600);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.vz-plan-note-link:hover {
    text-decoration: underline;
}
.vz-plan-note.is-compact {
    margin-top: auto;
    padding: var(--space-8) var(--space-12);
    font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Dark mode — same mechanism as the template picker in antStyle.css.
   New surfaces get their dark rules the day they are born.
   ───────────────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    .vz-field-picker,
    .vz-colormap,
    .vz-color-strip,
    .vz-view-row,
    .vz-field-select {
        background: var(--color-neutral-800);
        border-color: var(--color-neutral-600);
    }
    /* The example card keeps its dashed primary-500 "editable" border — only
       the surface flips. */
    .vz-card {
        background: var(--color-neutral-800);
    }
    .vz-field-select,
    .vz-field-select-label {
        color: var(--color-neutral-100);
    }
    .vz-field-select-label.is-empty {
        color: var(--color-neutral-500);
    }
    .vz-field-picker-title,
    .vz-field-picker-row-name,
    .vz-field-picker-empty-title,
    .vz-field-picker-search input,
    .vz-card-field-label,
    .vz-colormap-title,
    .vz-colormap-label,
    .vz-view-name,
    .vz-views-pref-title,
    .vz-view-name-input {
        color: var(--color-neutral-100);
    }
    .vz-field-picker-row-meta,
    .vz-field-picker-subtitle,
    .vz-card-field-meta,
    .vz-colormap-hint,
    .vz-view-summary-line,
    .vz-views-pref-hint,
    .vz-views-applied,
    .vz-card-empty,
    .vz-view-colors {
        color: var(--color-neutral-500);
    }
    .vz-field-picker-row:hover:not(:disabled),
    .vz-field-picker-row.is-active:not(:disabled),
    .vz-card-field:hover,
    .vz-colormap-row:hover,
    .vz-colormap-row.is-open {
        background: var(--color-neutral-700);
    }
    .vz-field-picker-foot,
    .vz-views-pref,
    .vz-colormap-palette {
        background: var(--color-neutral-700);
        border-color: var(--color-neutral-600);
    }
    .vz-plan-note {
        background: var(--color-primary-700);
        color: var(--color-neutral-100);
    }
    .vz-plan-note > i,
    .vz-plan-note-link {
        color: var(--color-primary-500);
    }
    .vz-cards-stage {
        background: var(--color-neutral-800);
        border-color: var(--color-neutral-600);
    }
    .vz-card-field.is-color,
    .vz-view-row.is-active,
    .vz-color-strip.is-on,
    .vz-card-add:hover,
    .vz-detail-add:hover,
    .vz-card-add.vz-field-picker-open,
    .vz-detail-add.vz-field-picker-open {
        background: var(--color-primary-700);
        border-color: var(--color-primary-500);
        color: var(--color-primary-500);
    }
    .vz-view-row.is-active .vz-view-name {
        color: var(--color-neutral-50);
    }
    .vz-view-chip,
    .vz-view-badge {
        background: var(--color-neutral-700);
        color: var(--color-neutral-100);
    }
    .vz-view-chip.is-mine,
    .vz-view-badge.is-mine {
        background: var(--color-primary-700);
        color: var(--color-primary-500);
    }
    .vz-detail-note {
        background: var(--color-info-700);
        border-color: var(--color-info-500);
        color: var(--color-neutral-100);
    }
    .vz-field-limit-note {
        background: var(--color-warning-700);
        border-color: var(--color-warning-500);
        color: var(--color-neutral-50);
    }
    .vz-field-limit-note i {
        color: var(--color-warning-500);
    }
    .vz-views-dirty {
        background: var(--color-warning-700);
        color: var(--color-neutral-50);
    }
    /* Muted controls whose light grey (#686868 / #3E3E3E) falls below AA on
       the neutral-800 surface. */
    .vz-field-picker-close,
    .vz-field-picker-clear,
    .vz-view-edit,
    .vz-view-shared-icon,
    .vz-view-summary-line i,
    .vz-card-add,
    .vz-detail-add,
    .vz-color-strip i,
    .vz-colormap-head i {
        color: var(--color-neutral-400);
    }
    /* Their hover colour, --vz-fg-strong, is the same #2A2A2A as the dark
       surface — the control would disappear under the cursor. */
    .vz-field-picker-close:hover,
    .vz-field-picker-clear:hover,
    .vz-view-edit:hover,
    .vz-card-field-action:hover {
        color: var(--color-neutral-50);
    }
    /* Accents tuned for white cards: primary-600 and blue-700 read below
       2.5:1 on the dark surfaces — step each one shade brighter. */
    .vz-field-picker-row-meta.is-used,
    .vz-field-picker-row.is-used > i,
    .vz-card-field-action.is-on,
    .vz-color-strip.is-on i {
        color: var(--color-primary-500);
    }
    .vz-field-picker-clear-selection,
    .vz-color-strip-action,
    .vz-colormap-reset {
        color: var(--vz-blue-600);
    }
    .vz-field-picker-foot {
        color: var(--color-neutral-400);
    }
    /* Inner dividers keep --vz-border-subtle (#E8E8E8) from the light rules —
       stark white hairlines on a dark surface. */
    .vz-field-picker-results,
    .vz-colormap-head,
    .vz-colormap-foot,
    .vz-view-name-input:hover {
        border-color: var(--color-neutral-600);
    }
    .vz-card-connector span {
        background: var(--color-neutral-600);
    }
    /* 10%-black swatch hairlines are invisible here, so a dark preset colour
       would merge into the card without an edge. */
    .vz-view-swatch,
    .vz-colormap-swatch,
    .vz-colormap-gradient-bar {
        border-color: rgba(255, 255, 255, 0.15);
    }
    /* The org card head is --vz-grey-900 (#2A2A2A) — identical to the dark
       card body. Lift it one step so the header still reads as a band; the
       person variant (#686868) already does. */
    .vz-card-head {
        background: var(--color-neutral-700);
    }
    .vz-card-avatar {
        background: var(--color-neutral-600);
        color: var(--color-neutral-100);
    }
    /* Read-only notice for shared views — a light panel in light mode. */
    .vz-detail-locked {
        background: var(--color-neutral-700);
        border-color: var(--color-neutral-600);
        color: var(--color-neutral-100);
    }
    .vz-detail-locked i {
        color: var(--color-neutral-400);
    }
    .vz-detail.is-readonly .vz-view-name-input {
        color: var(--color-neutral-500);
    }
    /* Light-mode shadows vanish on dark surfaces — deepen them, same values
       antHomeDashboard.css uses for its scope. */
    .vz-field-picker {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.6);
    }
    .vz-card,
    .vz-colormap {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
    }
    /* The label-preference switch is raw Bootstrap on these pages (antForms.css
       is not loaded) — a white pill on the dark sidebar. Checked state is
       already green via antStyle.css. */
    .vz-views-pref .form-check-input:not(:checked) {
        background-color: var(--color-neutral-600);
        border-color: var(--color-neutral-500);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23D0D0D0'/%3e%3c/svg%3e");
    }
    /* Dark hover paints --alto behind menu entries, where error-500 falls to
       ~2.4:1 — darken the danger text while the light background is under it. */
    .dropdown-item.vz-dropdown-danger:hover,
    .dropdown-item.vz-dropdown-danger:focus {
        color: var(--color-error-700);
    }
}