/* ============================================================================
   Provider connections — sub-tabs, cards, and the connection test result
   ----------------------------------------------------------------------------
   Ported from the connections work on master. The rules are unchanged in
   behaviour; every colour, size and space is now a token, so the panel follows
   the light, dark and soft themes like the rest of the application.
   ========================================================================== */

/* Connection sub-tabs. Four providers under one Connections tab is a longer scroll than the reader
   wants, so they group: JIRA and Bitbucket share a tab because they share an Atlassian account.
   Pills rather than underlines, so the two tab rows never read as one. */
.connection-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}
.connection-tab {
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--space-3) var(--space-7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.connection-tab:hover { color: var(--text); background: var(--surface-hover); }
.connection-tab.active {
    color: var(--text-inverse);
    background: var(--brand);
    border-color: var(--brand);
}
.connection-group[hidden] { display: none; }
.connection-intro { margin: 0 0 var(--space-7); }
.connection-card { margin-bottom: var(--space-8); }
.connection-stored { margin: 0 0 var(--space-6); }
.connection-stored code { font-size: var(--text-xs); }
/* One action row per card: the autosave hint, the explicit Test button, and the link to where the
   token is issued. The link sits with them because a failed test is usually answered by following it. */
.connection-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-2);
}
.connection-help {
    font-size: var(--text-sm);
    color: var(--text-body);
    margin-left: auto;
}
.connection-help:hover { color: var(--brand); }

/* === Connection test result ===
   The answer to "how must this token be issued". Two things must survive a glance: which checks
   failed, and the provider's own scope string each one needs. Everything else is supporting text. */
.conn-test { font-size: var(--text-base); }
.conn-test-headline {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-7);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
}
.conn-test-ok { background: var(--success-soft); color: var(--success-on-soft); }
.conn-test-bad { background: var(--danger-soft); color: var(--danger-on-soft); }
.conn-test-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-body);
    padding: var(--space-4) var(--space-1);
}
.conn-test-verdict {
    margin: 0 0 var(--space-4);
    font-weight: var(--weight-semibold);
    color: var(--danger-on-soft);
}
/* The provider's own scope string, set as a terminal token: this is the literal an administrator
   has to tick when reissuing, so it is quoted rather than described. */
.conn-scope {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    background: var(--code-bg);
    color: var(--code-text);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-4);
    white-space: nowrap;
}
.conn-checks { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
/* The left border carries the outcome. Reading down the strip is how the failing rows are found,
   which is why the four colours have to be four and not two. */
.conn-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    border-left: var(--border-accent-thick) solid transparent;
    background: var(--surface-alt);
}
.conn-check-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    /* An explicit min-width overrides the default min-width:auto, which is what otherwise lets a flex
       item shrink below its own content: the longest label, COULD NOT CHECK, then ran under the
       capability name. flex-shrink 0 keeps the column at least as wide as its widest word. */
    flex: 0 0 auto;
    min-width: 132px;
    padding-top: var(--space-px);
}
.conn-check-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); }
.conn-check-capability { font-weight: var(--weight-semibold); color: var(--text); }
.conn-check-scope { display: inline-flex; align-items: baseline; gap: var(--space-3); }
.conn-scope-label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.conn-check-detail { flex-basis: 100%; color: var(--text-body); }
.check-passed { border-left-color: var(--success); }
.check-passed .conn-check-badge { color: var(--success-on-soft); }
/* Denied and Failed are the two the eye must land on: a saturated background, not just a border. */
.check-denied { border-left-color: var(--danger); background: var(--danger-soft); }
.check-denied .conn-check-badge { color: var(--danger-on-soft); }
.check-failed { border-left-color: var(--warning); background: var(--warning-soft); }
.check-failed .conn-check-badge { color: var(--warning-on-soft); }
/* Unsupported is information, not a problem: the provider has no such capability, so there is no
   scope to grant and nothing to fix. Muted grey, and it carries no red anywhere. */
.check-unsupported { border-left-color: var(--border-strong); background: var(--neutral-soft); }
.check-unsupported .conn-check-badge { color: var(--neutral-on-soft); }
.check-unsupported .conn-check-capability { color: var(--text-body); font-weight: var(--weight-medium); }

.conn-test-kind { color: var(--text-body); }
.conn-test-scopes { display: block; margin-top: var(--space-3); color: var(--text-muted); }