/**
 * Car Show byKUTT — shared component library.
 *
 * Building blocks (buttons, cards, fields, pills, empty states, KPI tiles,
 * tables) built purely from the tokens in _tokens.css / the per-request
 * --cs-* color override. Every plugin surface (admin + all frontend screens)
 * should compose these classes instead of inventing new button/card/field
 * styling locally — this is what makes the plugin read as one product.
 *
 * Opt-in only: nothing here is scoped to body/html, so it never leaks into
 * WordPress admin chrome or a theme outside an element that uses these
 * classes.
 */

/* ---------- Buttons ---------- */

.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cs-space-2);
    font-family: var(--cs-font-body);
    font-weight: var(--cs-weight-medium);
    font-size: var(--cs-text-sm);
    line-height: 1;
    padding: 0.75em 1.25em;
    border-radius: var(--cs-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--cs-duration-fast) var(--cs-ease-out),
                box-shadow var(--cs-duration-fast) var(--cs-ease-out),
                background-color var(--cs-duration-fast) var(--cs-ease-out),
                border-color var(--cs-duration-fast) var(--cs-ease-out);
}

.cs-btn:focus-visible {
    outline: 2px solid var(--cs-primary);
    outline-offset: 2px;
}

.cs-btn:disabled,
.cs-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
}

.cs-btn--primary {
    background: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff;
}

.cs-btn--primary:hover:not(:disabled) {
    background: var(--cs-primary-dark);
    border-color: var(--cs-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--cs-shadow-1);
}

.cs-btn--secondary {
    background: var(--cs-surface);
    border-color: var(--cs-border);
    color: var(--cs-text);
}

.cs-btn--secondary:hover:not(:disabled) {
    border-color: var(--cs-primary);
    color: var(--cs-primary);
}

.cs-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--cs-muted);
}

.cs-btn--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--cs-text) 6%, transparent);
    color: var(--cs-text);
}

.cs-btn--danger {
    background: var(--cs-danger);
    border-color: var(--cs-danger);
    color: #fff;
}

.cs-btn--sm {
    padding: 0.5em 0.9em;
    font-size: var(--cs-text-xs);
    border-radius: var(--cs-radius-sm);
}

.cs-btn--lg {
    padding: 0.9em 1.6em;
    font-size: var(--cs-text-base);
}

.cs-btn--block {
    display: flex;
    width: 100%;
}

.cs-btn[aria-busy="true"] {
    position: relative;
    color: transparent !important;
}

.cs-btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    color: #fff;
    animation: cs-spin 0.7s linear infinite;
}

.cs-btn--secondary[aria-busy="true"]::after,
.cs-btn--ghost[aria-busy="true"]::after {
    color: var(--cs-text);
}

@keyframes cs-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Cards ---------- */

.cs-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-1);
    padding: var(--cs-space-5);
}

.cs-card--interactive {
    cursor: pointer;
    transition: transform var(--cs-duration-base) var(--cs-ease-out),
                box-shadow var(--cs-duration-base) var(--cs-ease-out),
                border-color var(--cs-duration-base) var(--cs-ease-out);
}

.cs-card--interactive:hover,
.cs-card--interactive:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--cs-shadow-2);
    border-color: color-mix(in srgb, var(--cs-primary) 35%, var(--cs-border));
}

.cs-card__title {
    font-family: var(--cs-font-display);
    font-weight: var(--cs-weight-bold);
    font-size: var(--cs-text-lg);
    color: var(--cs-text);
    margin: 0 0 var(--cs-space-2);
}

.cs-card__meta {
    color: var(--cs-muted);
    font-size: var(--cs-text-sm);
}

/* ---------- Form fields ---------- */

.cs-field {
    display: flex;
    flex-direction: column;
    gap: var(--cs-space-2);
    margin-bottom: var(--cs-space-4);
}

.cs-label {
    font-size: var(--cs-text-sm);
    font-weight: var(--cs-weight-medium);
    color: var(--cs-text);
}

.cs-input,
.cs-select,
.cs-textarea {
    font-family: var(--cs-font-body);
    font-size: var(--cs-text-base);
    color: var(--cs-text);
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-sm);
    padding: 0.65em 0.85em;
    transition: border-color var(--cs-duration-fast) var(--cs-ease-out),
                box-shadow var(--cs-duration-fast) var(--cs-ease-out);
}

.cs-input:focus,
.cs-select:focus,
.cs-textarea:focus {
    outline: none;
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-primary) 20%, transparent);
}

.cs-field--invalid .cs-input,
.cs-field--invalid .cs-select,
.cs-field--invalid .cs-textarea {
    border-color: var(--cs-danger);
}

.cs-field-hint {
    font-size: var(--cs-text-xs);
    color: var(--cs-muted);
}

.cs-field-error {
    display: none;
    font-size: var(--cs-text-xs);
    color: var(--cs-danger);
    font-weight: var(--cs-weight-medium);
}

.cs-field--invalid .cs-field-error {
    display: block;
}

/* ---------- Status pills ---------- */

.cs-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--cs-space-1);
    font-size: var(--cs-text-xs);
    font-weight: var(--cs-weight-medium);
    padding: 0.3em 0.75em;
    border-radius: var(--cs-radius-pill);
    background: color-mix(in srgb, var(--cs-muted) 14%, transparent);
    color: var(--cs-muted);
    line-height: 1.4;
}

.cs-pill--success {
    background: color-mix(in srgb, var(--cs-success) 16%, transparent);
    color: var(--cs-success);
}

.cs-pill--warning {
    background: color-mix(in srgb, var(--cs-warning) 16%, transparent);
    color: var(--cs-warning);
}

.cs-pill--danger {
    background: color-mix(in srgb, var(--cs-danger) 16%, transparent);
    color: var(--cs-danger);
}

.cs-pill--primary {
    background: color-mix(in srgb, var(--cs-primary) 16%, transparent);
    color: var(--cs-primary-dark);
}

/* ---------- Empty states ---------- */

.cs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--cs-space-2);
    padding: var(--cs-space-7) var(--cs-space-4);
    color: var(--cs-muted);
}

.cs-empty__title {
    font-family: var(--cs-font-display);
    font-weight: var(--cs-weight-bold);
    font-size: var(--cs-text-lg);
    color: var(--cs-text);
}

.cs-empty__desc {
    max-width: 42ch;
    font-size: var(--cs-text-sm);
}

/* ---------- KPI tiles (revenue dashboard, event summaries) ---------- */

.cs-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--cs-space-4);
}

.cs-kpi {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    padding: var(--cs-space-4);
}

.cs-kpi__label {
    font-size: var(--cs-text-xs);
    color: var(--cs-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--cs-weight-medium);
}

.cs-kpi__value {
    font-family: var(--cs-font-display);
    font-weight: var(--cs-weight-black);
    font-size: var(--cs-text-2xl);
    color: var(--cs-text);
    line-height: var(--cs-leading-tight);
}

.cs-kpi__trend {
    font-size: var(--cs-text-xs);
    font-weight: var(--cs-weight-medium);
}

.cs-kpi__trend--up { color: var(--cs-success); }
.cs-kpi__trend--down { color: var(--cs-danger); }

/* ---------- Tables ---------- */

.cs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cs-text-sm);
}

.cs-table th,
.cs-table td {
    text-align: left;
    padding: var(--cs-space-3) var(--cs-space-3);
    border-bottom: 1px solid var(--cs-border);
}

.cs-table th {
    font-weight: var(--cs-weight-medium);
    color: var(--cs-muted);
    font-size: var(--cs-text-xs);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.cs-table tbody tr:hover {
    background: color-mix(in srgb, var(--cs-primary) 4%, transparent);
}

/* ---------- Utility ---------- */

.cs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-contrast: more) {
    .cs-btn, .cs-card, .cs-input, .cs-select, .cs-textarea {
        border-width: 2px;
    }
}