/* =============================================================================
	 Connection card
	 Bordered surface; status lives in the header badge.
	 Depends on: tokens.css, card.css, badge.css
	 ============================================================================= */

.shiftora-connection-card {
	background:    var(--shiftora-gradient-surface);
	box-shadow:    var(--shiftora-shadow-card);
	border:        1px solid var(--shiftora-color-card-border);
	border-radius: var(--shiftora-radius-xl);
	padding:       var(--shiftora-space-5);
	display:       flex;
	flex-direction: column;
	gap:           var(--shiftora-space-4);
	transition:    border-color var(--shiftora-transition-fast);
}

.shiftora-connection-card:hover {
	border-color: var(--shiftora-color-border-strong);
}

/*
 * Status is the badge in the header, a word and a color together. A revoked
 * connection is shown quieter, since it is no longer something to act on.
 */
.shiftora-connection-card.is-revoked {
	background: var(--shiftora-color-bg-surface-alt);
}

.shiftora-connection-card.is-revoked .shiftora-connection-card__name {
	color: var(--shiftora-color-text-secondary);
}

/* Header row */
.shiftora-connection-card__header {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             var(--shiftora-space-3);
}

.shiftora-connection-card__name {
	font-size:   var(--shiftora-font-size-base);
	font-weight: var(--shiftora-font-weight-semibold);
	color:       var(--shiftora-color-text);
	margin:      0;
}

.shiftora-connection-card__url {
	font-size:   var(--shiftora-font-size-xs);
	color:       var(--shiftora-color-text-muted);
	font-family: var(--shiftora-font-family-mono);
	word-break:  break-all;
	margin-block-start: var(--shiftora-space-1);
}

/* Meta row */
.shiftora-connection-card__meta {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--shiftora-space-2) var(--shiftora-space-4);
	font-size:             var(--shiftora-font-size-xs);
	color:                 var(--shiftora-color-text-muted);
}

.shiftora-connection-card__meta dt {
	font-weight: var(--shiftora-font-weight-medium);
	color:       var(--shiftora-color-text-muted);
}

.shiftora-connection-card__meta dd {
	margin: 0;
	color:  var(--shiftora-color-text-secondary);
	/*
	 * Not monospace: these are dates and durations, and monospace is for values
	 * compared character by character.
	 */
	min-inline-size: 0;
	overflow-wrap:   anywhere;
}

/* Actions */
.shiftora-connection-card__actions {
	display:             flex;
	/*
	 * Wrapping, because five controls do not fit one 20rem card and the last
	 * button would otherwise overflow the card's edge.
	 */
	flex-wrap:           wrap;
	gap:                 var(--shiftora-space-2);
	padding-block-start: var(--shiftora-space-2);
	border-block-start:  1px solid var(--shiftora-color-border-light);
}

/* Connections grid */
.shiftora-connections-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap:                   var(--shiftora-space-4);
}