/* API credentials. Follows the two-factor page's container so the pages under My Account look
   like siblings. Colours come from the source tokens only — this file is copied into the
   backoffice's light theme at build time, and a literal would survive the redefinition. */

.credentials-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.panel-intro {
    margin: 0 0 1.25rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── List ──────────────────────────────────────────── */

.list-actions {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.list-actions .btn {
    width: 100%;
}

.action-note {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* Six columns in an 860px container, and the client id is 36 characters with no space in it:
   with no break opportunity that one cell claimed ~260px on its own and the row ran past the
   edge, so .table-wrapper's overflow-x showed a scrollbar under a table with five short values
   in it. Breaking the id and tightening this page's cell padding makes the row fit; the
   wrapper's overflow stays as the fallback it is meant to be. */
#list-content .data-table th,
#list-content .data-table td {
    padding: 12px 14px;
}

/* Nothing else in the row may wrap into two lines to make room for the id. */
#list-content .data-table th {
    font-size: 0.75rem;
    letter-spacing: 0.4px;
}

#list-content .data-table .btn-small {
    white-space: nowrap;
}

.client-id {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
    user-select: all;
    /* Wraps mid-token rather than widening the column. Still selectable as a unit above. */
    overflow-wrap: anywhere;
}

.credential-inactive td {
    color: var(--text-muted);
}

.btn-small {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}

/* ── Result ────────────────────────────────────────── */

.secret-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem 1.5rem;
    margin: 0 0 1.25rem;
}

.secret-list dt {
    color: var(--text-secondary);
    align-self: center;
}

.secret-list dd {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
}

.secret-list code {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--dark-bg-tertiary);
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    word-break: break-all;
    color: var(--text-primary);
    /* Selectable as a unit — dragging across a secret is the likeliest gesture here. */
    user-select: all;
}

.codes-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.codes-actions .btn {
    flex: 1;
}

/* ── Notes ─────────────────────────────────────────── */

.warning-note {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--warning-color);
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.warning-note code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.error-note {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.loading-note {
    color: var(--text-muted);
}

.field-hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 560px) {
    .secret-list {
        grid-template-columns: 1fr;
    }

    .codes-actions {
        flex-direction: column;
    }
}

/* ── The AI connector pointer ──────────────────────
   The commonest reason to be on this page, so it sits above the list rather than below it. Same
   shape as the strip on the portal start page, so the two read as the same announcement. */

.credentials-promo {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    background: var(--card-background);
}

.credentials-promo-icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--accent);
    font-size: 1.6rem;
}

.credentials-promo-title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.credentials-promo p {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}

.credentials-promo strong {
    color: var(--text-primary);
}

.credentials-promo-link {
    color: var(--accent);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.credentials-promo-link:hover {
    text-decoration: underline;
}