/* =============================================================================
	 Card component
	 Separated from the page by a border and a small step in tone. A resting
	 shadow is for things that float; a card sits on the page.
	 Depends on: tokens.css
	 ============================================================================= */

.shiftora-card {
	background:    var(--shiftora-gradient-surface);
	border:        1px solid var(--shiftora-color-card-border);
	border-radius: var(--shiftora-radius-xl);
	box-shadow:    var(--shiftora-shadow-card);
	transition:    border-color var(--shiftora-transition-fast), background-color var(--shiftora-transition-fast), box-shadow var(--shiftora-transition-lift), transform var(--shiftora-transition-lift);
}

.shiftora-card__header {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	gap:              var(--shiftora-space-4);
	padding:          var(--shiftora-space-5) var(--shiftora-space-6);
	border-block-end: 1px solid var(--shiftora-color-border-light);
}

.shiftora-card__title {
	font-size:   var(--shiftora-font-size-lg);
	font-weight: var(--shiftora-font-weight-semibold);
	color:       var(--shiftora-color-text);
	margin:      0;
}

.shiftora-card__subtitle {
	font-size:          var(--shiftora-font-size-sm);
	color:              var(--shiftora-color-text-muted);
	margin-block-start: var(--shiftora-space-1);
}

.shiftora-card__body {
	padding: var(--shiftora-space-6);
}

.shiftora-card__footer {
	display:            flex;
	flex-wrap:          wrap;
	align-items:        center;
	gap:                var(--shiftora-space-3);
	padding:            var(--shiftora-space-4) var(--shiftora-space-6);
	border-block-start: 1px solid var(--shiftora-color-border-light);
	background-color:   var(--shiftora-n-50);
	border-radius:      0 0 var(--shiftora-radius-xl) var(--shiftora-radius-xl);
}

/*
 * The right-hand button group in a footer. A zero basis keeps it beside the
 * left-hand button and wraps its own buttons inside the room left over, so a
 * long set of actions drops to a new line instead of running off the card.
 */
.shiftora-card__actions {
	display:         flex;
	flex:            1 1 0;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: flex-end;
	gap:             var(--shiftora-space-2);
	min-inline-size: 0;
}

/* On a phone the group gets its own row under the left-hand button, so the
   actions stack as one tidy block instead of a staggered column beside it. */
@media (max-width: 600px) {
	.shiftora-card__actions {
		flex-basis: 100%;
	}

	.shiftora-card__actions > .shiftora-btn {
		flex: 1 1 auto;
	}
}

/* Compact variant */
.shiftora-card--compact .shiftora-card__header { padding: var(--shiftora-space-4) var(--shiftora-space-5); }
.shiftora-card--compact .shiftora-card__body   { padding: var(--shiftora-space-4) var(--shiftora-space-5); }
.shiftora-card--compact .shiftora-card__footer { padding: var(--shiftora-space-3) var(--shiftora-space-5); }

/* Interactive */
.shiftora-card--interactive {
	cursor: pointer;
}

.shiftora-card--interactive:hover {
	border-color:     var(--shiftora-color-card-border-hover);
	background-color: var(--shiftora-color-bg-raised);
}

.shiftora-card--interactive:focus-visible {
	border-color:   var(--shiftora-color-border-focus);
	outline:        2px solid var(--shiftora-color-focus-ring);
	outline-offset: 0;
}

/* A destructive card is outlined in the error color all the way round. */
.shiftora-card--danger {
	border-color: var(--shiftora-color-error-border);
}

/*
 * Stat cards for the diagnostics page: plain definition lists of environment
 * facts (PHP version, memory limit, max upload size) with no interpretation.
 */
.shiftora-stats-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap:                   var(--shiftora-space-4);
	margin-block-end:      var(--shiftora-space-6);
}

.shiftora-stats-grid--dashboard {
	gap: var(--shiftora-space-4);
}

.shiftora-stat-card {
	display:        flex;
	flex-direction: column;
	gap:            var(--shiftora-space-2);
	padding:        var(--shiftora-space-4);
	background:     var(--shiftora-color-bg-surface);
	border:         1px solid var(--shiftora-color-border);
	border-radius:  var(--shiftora-radius-lg);
	min-inline-size: 0;
}

.shiftora-stat-card__top {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--shiftora-space-2);
}

.shiftora-stat-card__pill {
	display:        inline-flex;
	align-items:    center;
	padding:        0.15rem 0.5rem;
	border-radius:  var(--shiftora-radius-full);
	background:     var(--shiftora-color-primary-subtle);
	border:         1px solid var(--shiftora-color-primary-border);
	color:          var(--shiftora-color-primary);
	font-size:      var(--shiftora-font-size-xs);
	font-weight:    var(--shiftora-font-weight-semibold);
	letter-spacing: var(--shiftora-tracking-wide);
	text-transform: uppercase;
}

.shiftora-stat-card__icon {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	inline-size:      1.875rem;
	block-size:       1.875rem;
	border-radius:    var(--shiftora-radius-md);
	background-color: var(--shiftora-n-100);
	color:            var(--shiftora-color-text-secondary);
	border:           1px solid var(--shiftora-color-border-light);
}

.shiftora-stat-card__icon--brand {
	background-color: var(--shiftora-color-info-bg);
	border-color:     var(--shiftora-color-info-border);
	color:            var(--shiftora-color-info-text);
}

.shiftora-stat-card__icon--info {
	background-color: var(--shiftora-color-info-bg);
	border-color:     var(--shiftora-color-info-border);
	color:            var(--shiftora-color-info-text);
}

.shiftora-stat-card__icon--success {
	background-color: var(--shiftora-color-success-bg);
	border-color:     var(--shiftora-color-success-border);
	color:            var(--shiftora-color-success-text);
}

.shiftora-stat-card__icon--danger {
	background-color: var(--shiftora-color-error-bg);
	border-color:     var(--shiftora-color-error-border);
	color:            var(--shiftora-color-error-text);
}

.shiftora-stat-card__value {
	font-size:     clamp(1.4rem, 2.2vw, 1.9rem);
	font-weight:   var(--shiftora-font-weight-semibold);
	line-height:   1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color:         var(--shiftora-color-text);
	overflow-wrap: anywhere;
}

.shiftora-stat-card__label {
	font-size:   var(--shiftora-font-size-sm);
	font-weight: var(--shiftora-font-weight-semibold);
	color:       var(--shiftora-color-text);
}

.shiftora-stat-card__meta {
	font-size:     var(--shiftora-font-size-xs);
	color:         var(--shiftora-color-text-muted);
	line-height:   1.4;
	overflow-wrap: anywhere;
}

/* Generic grid helper used by diagnostics template */
.shiftora-grid {
	display: grid;
	gap:     var(--shiftora-space-6);
}