/* =========================================================
   FILE: vixly-primitives.css
   PURPOSE: Styles for the parts of the Vixly.Shared.UI
   primitives that no stylesheet covered yet (card header and
   body, table states, empty state, dialog overlay, pager status,
   button spinner and subtle variant, success and warning messages).
   NOTES:
   - Added by the Control team on 2026-10-14 so the owner can try
     the primitives in the console. Frontend/UI owns this file and
     may rewrite or fold it into vixly-theme.css.
   - Load after theme tokens and before plane layout styles (ADR-0013).
   ========================================================= */

/* Shared controls work without loading a plane stylesheet.
   Action variants retain class specificity so generic link colours cannot hide labels. */
:where(.vx-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vx-space-2);
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    padding: 0 0.85rem;
    font-size: 0.8125rem;
    border: var(--vx-border-width) solid var(--vx-color-border-control);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-color-surface);
    color: var(--vx-color-text);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--vx-transition-fast), border-color var(--vx-transition-fast);
}
:where(.vx-button:hover:not(:disabled)) { background: var(--vx-color-surface-sunken); }
.vx-button--primary { background: var(--vx-color-link); border-color: var(--vx-color-link); color: #ffffff !important; }
.vx-button--primary:hover:not(:disabled) { background: var(--vx-color-primary-hover, #1d4ed8); border-color: var(--vx-color-primary-hover, #1d4ed8); color: #ffffff !important; }
.vx-button--secondary { background: var(--vx-color-surface-sunken); border-color: var(--vx-color-border-control); color: var(--vx-color-text); }
.vx-button--secondary:hover:not(:disabled) { background: var(--vx-color-surface); border-color: var(--vx-color-primary); color: var(--vx-color-text); }
.vx-button--danger { background: var(--vx-color-danger-bg); border-color: var(--vx-color-danger); color: var(--vx-color-danger); }
.vx-button--danger:hover:not(:disabled) { background: var(--vx-color-danger); border-color: var(--vx-color-danger); color: #ffffff !important; }

:where(.vx-button:focus-visible) { outline: var(--vx-focus-width) solid var(--vx-color-focus); outline-offset: var(--vx-space-1); }
:where(.vx-button:disabled) { cursor: not-allowed; opacity: 0.6; }
/* Button Density Variants */
/* Comfortable density variant (sign-in, customer portal per Brief §4) */
.vx-button--comfortable,
[data-density="comfortable"] .vx-button,
body.customer-portal .vx-button,
.vx-auth__terminal .vx-button {
    height: 40px;
    min-height: 40px;
    padding: 0 1.25rem;
    font-size: 0.875rem;
}

/* Compact table row button (36px row per Brief §4) */
.vx-button--sm,
.ops-editor__table .vx-button,
.vx-table .vx-button {
    height: 28px;
    min-height: 28px;
    padding: 0 0.55rem;
    font-size: 0.75rem;
    line-height: 1;
}
:where(.vx-card) { background: var(--vx-color-surface); border: var(--vx-border-width) solid var(--vx-color-border); border-radius: var(--vx-radius-lg); box-shadow: var(--vx-shadow-1); }
:where(.vx-message) { padding: var(--vx-space-4); border: var(--vx-border-width) solid var(--vx-color-info); border-radius: var(--vx-radius-md); background: var(--vx-color-info-bg); color: var(--vx-color-info); }
:where(.vx-message--error) { background: var(--vx-color-danger-bg); border-color: var(--vx-color-danger); color: var(--vx-color-danger); }
.vx-input { box-sizing: border-box; width: 100%; min-width: 0; height: 32px; min-height: 32px; padding: 0.25rem 0.5rem; font-size: 0.8125rem; border: 1px solid var(--vx-color-border-control); border-radius: var(--vx-radius-sm); background: var(--vx-color-surface); color: var(--vx-color-text); }
[data-density="comfortable"] .vx-input,
body.customer-portal .vx-input,
.vx-auth__terminal .vx-input { height: 40px; min-height: 40px; font-size: 0.875rem; }
textarea.vx-input { resize: vertical; }

/* ---------- Button ---------- */
.vx-button--subtle {
    background: transparent;
    border-color: transparent;
    color: var(--vx-color-text);
}

.vx-button--subtle:hover:not(:disabled) {
    background: var(--vx-color-surface-sunken);
}

.vx-button[aria-busy="true"] {
    cursor: progress;
}

.vx-button__spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: var(--vx-space-2);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--vx-radius-full);
    vertical-align: -0.125em;
    animation: vx-spin 0.7s linear infinite;
}

/* ---------- Card ---------- */
.vx-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vx-space-3);
    flex-wrap: wrap;
    margin: 0 0 var(--vx-space-4);
    padding-bottom: var(--vx-space-3);
    border-bottom: 1px solid var(--vx-color-border);
}

.vx-card .vx-card__header .vx-card__title {
    margin: 0;
    padding: 0;
    border: 0;
}

.vx-card__actions {
    display: flex;
    gap: var(--vx-space-2);
    flex-wrap: wrap;
}

.vx-card__body > :first-child {
    margin-top: 0;
}

.vx-card__body > :last-child {
    margin-bottom: 0;
}

.vx-card__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--vx-space-2);
    margin-top: var(--vx-space-4);
    padding-top: var(--vx-space-3);
    border-top: 1px solid var(--vx-color-border);
}

/* ---------- Data table ---------- */
.vx-table-container {
    width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

.vx-card .vx-table-container .vx-table {
    box-shadow: none;
}

.vx-table td.vx-table__loading,
.vx-table td.vx-table__empty {
    padding: var(--vx-space-6) var(--vx-space-4);
}

.vx-table tbody tr:hover td.vx-table__loading,
.vx-table tbody tr:hover td.vx-table__empty {
    background: transparent;
}

.vx-skeleton-line {
    height: 0.75rem;
    border-radius: var(--vx-radius-sm);
    background: linear-gradient(90deg,
        var(--vx-color-surface-sunken) 0%,
        var(--vx-color-border) 50%,
        var(--vx-color-surface-sunken) 100%);
    background-size: 200% 100%;
    animation: vx-shimmer 1.2s ease-in-out infinite;
}

/* ---------- Empty state ---------- */
.vx-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--vx-space-2);
    padding: var(--vx-space-4);
    text-align: center;
    color: var(--vx-color-text-muted);
}

.vx-empty-state__icon {
    color: var(--vx-color-text-subtle);
}

.vx-empty-state .vx-empty-state__title {
    margin: 0;
    font-size: var(--vx-font-size-md);
    font-weight: 600;
    color: var(--vx-color-text);
    text-transform: none;
    letter-spacing: normal;
}

.vx-empty-state__desc {
    margin: 0;
    max-width: 36rem;
    font-size: var(--vx-font-size-sm);
}

.vx-empty-state__action {
    margin-top: var(--vx-space-2);
}

/* ---------- Message ---------- */
div.vx-message {
    display: flex;
    align-items: flex-start;
    gap: var(--vx-space-3);
}

.vx-message__content {
    flex: 1;
}

.vx-message--success {
    background: var(--vx-color-success-bg);
    border-color: var(--vx-color-success);
    color: var(--vx-color-success);
    font-weight: 500;
}

.vx-message--warning {
    background: var(--vx-color-warning-bg);
    border-color: var(--vx-color-warning);
    color: var(--vx-color-warning);
    font-weight: 500;
}

.vx-message__dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: var(--vx-font-size-lg);
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--vx-space-1);
    border-radius: var(--vx-radius-sm);
}

/* ---------- Pager ---------- */
.vx-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--vx-space-2);
    margin-top: var(--vx-space-4);
}

.vx-pager__status {
    min-width: 5rem;
    text-align: center;
    font-size: var(--vx-font-size-sm);
    color: var(--vx-color-text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ---------- Dialog ---------- */
.vx-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--vx-space-4);
    background: var(--vx-color-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.vx-dialog-overlay .vx-dialog {
    margin: 0;
    width: min(32rem, 100%);
    max-height: calc(100vh - 2 * var(--vx-space-4));
    overflow-y: auto;
    border: 1px solid var(--vx-color-border);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-color-surface);
    box-shadow: var(--vx-shadow-3);
    padding: var(--vx-space-6);
}

.vx-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vx-space-3);
    margin-bottom: var(--vx-space-3);
}

.vx-dialog .vx-dialog__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--vx-font-size-xl);
    font-weight: 600;
    color: var(--vx-color-text);
}

.vx-dialog__close {
    background: transparent;
    border: 0;
    color: var(--vx-color-text-muted);
    font-size: var(--vx-font-size-xl);
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--vx-space-1);
    border-radius: var(--vx-radius-sm);
}

.vx-dialog__close:hover {
    color: var(--vx-color-text);
    background: var(--vx-color-surface-sunken);
}

.vx-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--vx-space-2);
    margin-top: var(--vx-space-4);
}

.vx-message__dismiss:focus-visible,
.vx-dialog__close:focus-visible {
    outline: 2px solid var(--vx-color-focus);
    outline-offset: 2px;
}

/* ---------- Text input & Fields ---------- */
.vx-field {
    display: flex;
    flex-direction: column;
    gap: var(--vx-space-1);
    margin-bottom: var(--vx-space-3);
}

.vx-label {
    display: inline-flex;
    align-items: center;
    font-size: var(--vx-font-size-sm);
    font-weight: 600;
    color: var(--vx-color-text);
}

.vx-required {
    color: var(--vx-color-danger);
    margin-left: 0.25rem;
}

.vx-input {
    font: inherit;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--vx-color-border-control);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-color-surface);
    color: var(--vx-color-text);
    transition: border-color var(--vx-transition-fast), box-shadow var(--vx-transition-fast);
}

.vx-input:focus-visible {
    outline: 2px solid var(--vx-color-focus);
    outline-offset: 1px;
}

/* ---------- Motion ---------- */
@keyframes vx-spin {
    to { transform: rotate(360deg); }
}

@keyframes vx-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vx-button__spinner,
    .vx-skeleton-line {
        animation: none;
    }
}

/* Enterprise workbench: semantic density, surfaces and status vocabulary. */
.vx-metric { min-width: 0; padding: var(--vx-space-5); border: var(--vx-border-width) solid var(--vx-color-border); border-radius: var(--vx-radius-workbench); background: var(--vx-color-surface); box-shadow: var(--vx-shadow-1); }
.vx-metric p { margin: 0; }
.vx-metric__label { font-size: var(--vx-font-size-md); color: var(--vx-color-text-muted); font-weight: 500; }
.vx-metric__row { display: flex; align-items: center; justify-content: space-between; gap: var(--vx-space-4); margin-block: var(--vx-space-3); }
.vx-metric__value { font-size: var(--vx-font-size-3xl); line-height: var(--vx-leading-heading); font-variant-numeric: tabular-nums; letter-spacing: var(--vx-tracking-heading); color: var(--vx-color-text); }
.vx-metric__chart { display: block; width: 30%; color: var(--vx-color-link); }
.vx-metric__chart svg { display: block; height: var(--vx-metric-chart-height); width: 100%; overflow: visible; }
.vx-metric__detail { color: var(--vx-color-text-muted); font-size: var(--vx-font-size-xs); }
.vx-metric__delta { font-weight: 600; color: var(--vx-color-text); }
.vx-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vx-space-4); }
.vx-lifecycle { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: var(--vx-space-5); gap: var(--vx-space-4); background: var(--vx-color-surface); border: var(--vx-border-width) solid var(--vx-color-border); border-radius: var(--vx-radius-workbench); }
.vx-lifecycle li { flex: 1; display: flex; align-items: center; gap: var(--vx-space-2); color: var(--vx-color-text-muted); font-size: var(--vx-font-size-md); }
.vx-lifecycle__number { display: inline-grid; place-items: center; flex-shrink: 0; width: var(--vx-space-8); height: var(--vx-space-8); border: var(--vx-border-width) solid var(--vx-color-border-control); border-radius: var(--vx-radius-full); font-variant-numeric: tabular-nums; }
.vx-lifecycle__complete .vx-lifecycle__number { color: var(--vx-color-success); background: var(--vx-color-success-bg); border-color: var(--vx-color-status-success-border); }
.vx-lifecycle .vx-lifecycle__current { font-weight: 600; color: var(--vx-color-link); }
.vx-lifecycle__current .vx-lifecycle__number { background: var(--vx-color-info-bg); border-color: var(--vx-color-link); }
.vx-badge { display: inline-flex; align-items: center; gap: var(--vx-space-1); padding: var(--vx-space-1) var(--vx-space-2); border: var(--vx-border-width) solid; border-radius: var(--vx-radius-full); font-size: var(--vx-font-size-xs); font-weight: 600; line-height: 1.25; white-space: nowrap; }
.vx-badge--active { color: var(--vx-color-status-completed); background: var(--vx-color-status-completed-bg); border-color: var(--vx-color-status-success-border); }
.vx-badge--invited { color: var(--vx-color-status-received); background: var(--vx-color-status-received-bg); border-color: var(--vx-color-status-info-border); }
.vx-badge--suspended { color: var(--vx-color-status-staged); background: var(--vx-color-status-staged-bg); border-color: var(--vx-color-status-warning-border); }
.vx-badge--locked { color: var(--vx-color-status-exception); background: var(--vx-color-status-exception-bg); border-color: var(--vx-color-status-danger-border); }
.vx-badge--progress { color: var(--vx-color-progress); background: var(--vx-color-progress-bg); border-color: var(--vx-color-progress-border); }
.vx-badge--deactivated { color: var(--vx-color-inactive); background: var(--vx-color-inactive-bg); border-color: var(--vx-color-inactive-border); }
.vx-table-container { overflow: auto; border: var(--vx-border-width) solid var(--vx-color-border); border-radius: var(--vx-radius-workbench); background: var(--vx-color-surface); }
.vx-table { border-collapse: separate; border-spacing: 0; width: 100%; color: var(--vx-color-text); font-size: var(--vx-font-size-md); }
.vx-table caption { padding: var(--vx-space-3) var(--vx-space-4); text-align: start; color: var(--vx-color-text-muted); }
.vx-table th, .vx-table td { padding: var(--vx-density-cell-y) var(--vx-space-4); text-align: start; border-bottom: var(--vx-border-width) solid var(--vx-color-border); }
.vx-table th { position: sticky; top: 0; z-index: 2; background: var(--vx-color-surface-sunken); font-weight: 600; color: var(--vx-color-text-muted); white-space: nowrap; }
.vx-table tbody tr:last-child td { border-bottom: 0; }
.vx-table tbody tr:hover td { background: var(--vx-color-primary-soft); }
.vx-table__number { font-family: var(--vx-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vx-table .vx-table__actions { position: sticky; inset-inline-end: 0; background: var(--vx-color-surface); border-inline-start: var(--vx-border-width) solid var(--vx-color-border); }
.vx-table th.vx-table__actions { z-index: 3; background: var(--vx-color-surface-sunken); }
.vx-table-scroll { max-height: var(--vx-table-viewport); overflow: auto; }
.vx-table-scroll .vx-table { min-width: var(--vx-table-min-width); }
.vx-table input[type="checkbox"] { accent-color: var(--vx-color-link); width: var(--vx-space-4); height: var(--vx-space-4); }
.vx-table-scroll:focus-visible { outline: var(--vx-focus-width) solid var(--vx-color-focus); outline-offset: var(--vx-space-1); }
@media (max-width: 1024px) { .vx-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .vx-metric-grid { grid-template-columns: minmax(0, 1fr); }
    .vx-lifecycle { flex-direction: column; }
    .vx-table button, .vx-table input[type="checkbox"] { min-height: var(--vx-control-min); }
}

.vx-badge--inactive { color: var(--vx-color-inactive); background: var(--vx-color-inactive-bg); border-color: var(--vx-color-inactive-border); }
.vx-badge--primary { color: var(--vx-color-link); background: var(--vx-color-primary-soft); border-color: var(--vx-color-status-info-border); }

/* Compact desktop action cells; handheld targets remain comfortable. */
.vx-table .vx-button { min-height: 0; padding: var(--vx-space-1) var(--vx-space-2); font-size: var(--vx-font-size-sm); line-height: 1.3; }
@media (max-width: 640px) { .vx-table .vx-button { min-height: var(--vx-control-min); } }

@media (min-width: 641px) {
    .vx-table .vx-button { padding-block: 0; }
    .vx-table .vx-badge { padding-block: 0; line-height: 1.5; }
}

.vx-metric__detail { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vx-space-2); }

/* Shared help primitives (ADR-0023). */
.vx-help-article { max-width: 72ch; color: var(--vx-color-text); overflow-wrap: anywhere; line-height: 1.65; }
.vx-help-article__body h2 { margin-block-start: 2rem; scroll-margin-top: 5rem; }
.vx-help-article__body a, .vx-help-article a { color: var(--vx-color-primary); }
.vx-help-article__body { overflow-x: auto; }
.vx-help-article__body table { border-collapse: collapse; width: 100%; }
.vx-help-article__body th, .vx-help-article__body td { border: 1px solid var(--vx-color-border); padding: .5rem; text-align: start; }
.vx-help-article__body img { max-width: 100%; height: auto; }
.vx-help-article__body pre { overflow-x: auto; }

.vx-help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--vx-color-border);
    border-radius: var(--vx-radius-md);
    color: var(--vx-color-text);
    background: var(--vx-color-surface);
    text-decoration: none;
    font-weight: 600;
}
.vx-help-link:focus-visible { outline: 2px solid var(--vx-color-primary); outline-offset: 2px; }