/*
 * Credentials panel — merchant API keys (A5).
 * Vault-key list classes still live in the legacy monolith;
 * new A5 classes live here (panel prefix, tokens only).
 */

.credentials-api-keys-collapsible {
    margin: var(--spacing-sm) var(--panel-edge-pad);
}

.credentials-api-keys {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.credentials-api-key-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.credentials-api-key-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.credentials-api-key-row:hover {
    background: var(--interactive-hover-bg);
    outline: var(--interactive-hover-outline);
}

.credentials-api-key-row:focus-visible {
    outline: var(--interactive-focus-outline);
    outline-offset: var(--interactive-focus-offset);
}

.credentials-api-key-row--selected {
    border-color: var(--anviz-accent-primary);
    outline: var(--interactive-hover-outline);
}

.credentials-api-key-row-primary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.credentials-api-key-label {
    color: var(--text-primary);
    font-weight: 500;
}

.credentials-api-key-env {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.05rem var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
}

.credentials-api-key-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    color: var(--text-muted);
    font-size: 0.68rem;
}

.credentials-api-key-scopes {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    word-break: break-all;
}

.credentials-api-key-draft {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
}

.credentials-api-key-draft-title {
    margin: 0;
    font-weight: 600;
}

.credentials-api-key-scopes-fieldset {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.credentials-api-key-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.credentials-api-key-just-issued {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border: 1px solid color-mix(in srgb, var(--anviz-accent-primary) 40%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--anviz-accent-primary) 8%, transparent);
}

.credentials-api-key-just-issued-scope {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.credentials-api-key-secret {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--card-bg) 80%, transparent);
    word-break: break-all;
    font-size: 0.8rem;
    user-select: all;
    cursor: text;
}