/* Shared card frame. Section styles supply only layout and visual variants. */
.shd-card {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--shd-card-border, var(--ui-border));
	border-radius: var(--shd-card-radius, var(--ui-radius, 10px));
	background: var(--shd-card-bg, var(--ui-surface));
	box-shadow: var(--shd-card-shadow, none);
	color: var(--shd-card-text, var(--ui-text));
	transition:
		border-color 0.12s ease,
		background 0.12s ease,
		box-shadow 0.12s ease;
}

.shd-card:hover {
	border-color: var(--shd-card-border-hover, var(--shd-card-border, var(--ui-border)));
	background: var(--shd-card-bg-hover, var(--shd-card-bg, var(--ui-surface)));
	box-shadow: var(--shd-card-shadow-hover, var(--shd-card-shadow, none));
}

.shd-card[role='button'] {
	cursor: pointer;
}

/* Shared detailed-card variant. Page modules may override only semantic tokens. */
.shd-card--detailed {
	--shd-card-radius: 12px;
	--shd-card-border: var(--pi-card-border, var(--ui-border));
	--shd-card-bg: var(--pi-card-bg, var(--ui-surface));
	--shd-card-text: var(--ui-text, var(--ui-text));
	--shd-card-text-soft: var(--ui-text-muted, var(--ui-text-dim));
	--shd-card-row-border: var(--ui-border);
	--shd-card-meta-border: var(--ui-border);
	--shd-card-meta-radius: 6px;
	--shd-card-meta-bg: var(--ui-surface-soft);
	--shd-card-shadow: var(--pi-card-shadow, var(--ui-card-depth-shadow, none));
	--shd-card-shadow-hover: var(
		--pi-card-shadow-hover,
		var(--pi-card-shadow, var(--ui-card-depth-shadow-hover, var(--ui-card-depth-shadow, none)))
	);
	display: grid;
	padding: 0;
}

/* Shared source for the detailed-card status frame used by legacy module markup. */
.agents-card,
.agents-local-card {
	--agents-card-inner-padding: 7px 7px 7px 11px;
	--agents-status-shadow: 0 0 0 0 transparent;
	--agents-status-shadow-hover: 0 0 0 0 transparent;
	--shd-card-row-border: var(--agents-service-row-border);
	--shd-card-meta-border: var(--agents-meta-border);
	--shd-card-meta-radius: var(--agents-meta-radius);
	--shd-card-meta-bg: var(--agents-meta-bg);
	--shd-card-shadow: inset 4px 0 0 var(--agents-status-strip, transparent), var(--agents-status-shadow);
	--shd-card-shadow-hover: inset 4px 0 0 var(--agents-status-strip, transparent), var(--agents-status-shadow-hover);
}

.agents-card--online,
.agents-local-card.agents-card--online {
	--agents-status-strip: rgba(34, 197, 94, 0.82);
}

.agents-card--offline,
.agents-local-card.agents-card--offline {
	--agents-status-strip: rgba(239, 68, 68, 0.78);
}

.agents-card--disabled,
.agents-local-card.agents-card--disabled {
	--agents-status-strip: rgba(148, 163, 184, 0.72);
}

.agents-card--enroll_pending,
.agents-local-card.agents-card--enroll_pending {
	--agents-status-strip: rgba(245, 158, 11, 0.8);
}

html[data-ui-theme='light'] .agents-card,
html[data-ui-theme='light'] .agents-local-card {
	--agents-status-shadow: var(--pi-card-shadow);
	--agents-status-shadow-hover: var(--pi-card-shadow-hover);
}

.agents-card--online:not(.agents-card--service-strip) {
	border-color: var(--ui-health-online-card-border);
	background: var(--ui-health-online-card-bg);
	box-shadow:
		inset 4px 0 0 var(--agents-status-strip),
		var(--agents-status-shadow);
}

.agents-card--offline:not(.agents-card--service-strip) {
	border-color: var(--ui-health-offline-card-border);
	background: var(--ui-health-offline-card-bg);
	box-shadow:
		inset 4px 0 0 var(--agents-status-strip),
		var(--agents-status-shadow);
}

.agents-card--online:not(.agents-card--service-strip):hover {
	border-color: color-mix(in srgb, var(--ui-health-online-card-border) 78%, var(--ui-text));
	background: var(--ui-health-online-card-bg-hover);
	box-shadow:
		inset 4px 0 0 var(--agents-status-strip),
		var(--agents-status-shadow-hover);
}

.agents-card--offline:not(.agents-card--service-strip):hover {
	border-color: color-mix(in srgb, var(--ui-health-offline-card-border) 78%, var(--ui-text));
	background: var(--ui-health-offline-card-bg-hover);
	box-shadow:
		inset 4px 0 0 var(--agents-status-strip),
		var(--agents-status-shadow-hover);
}

.agents-card--disabled:not(.agents-card--service-strip) {
	border-color: rgba(148, 163, 184, 0.38);
	background:
		linear-gradient(180deg, rgba(10, 12, 18, 0.5), rgba(10, 12, 18, 0.34)),
		linear-gradient(180deg, rgba(148, 163, 184, 0.16), rgba(255, 255, 255, 0.03));
}

.agents-card--enroll_pending:not(.agents-card--service-strip) {
	border-color: rgba(255, 190, 92, 0.38);
	background:
		linear-gradient(180deg, rgba(10, 12, 18, 0.5), rgba(10, 12, 18, 0.34)),
		linear-gradient(180deg, rgba(255, 190, 92, 0.2), rgba(255, 255, 255, 0.03));
}

html[data-ui-theme='light'] .agents-card--disabled:not(.agents-card--service-strip) {
	border-color: rgba(71, 85, 105, 0.5);
	background: #f2f5f8;
}

html[data-ui-theme='light'] .agents-card--enroll_pending:not(.agents-card--service-strip) {
	border-color: rgba(146, 64, 14, 0.56);
	background: #fff6e5;
}

.agents-card--archived {
	opacity: 0.74;
	pointer-events: stroke;
}

/* Detailed card anatomy shared by operational modules. */
.shd-card__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--shd-card-gap, var(--agents-card-gap, 7px));
	height: 100%;
	min-height: 100%;
	min-width: 0;
	padding: var(--shd-card-inner-padding, var(--agents-card-inner-padding, 7px));
}

.shd-card__header,
.shd-card__header-main,
.shd-card__header-actions,
.shd-card__meta,
.shd-card__actions {
	display: flex;
	min-width: 0;
}

.shd-card__header {
	align-items: flex-start;
	gap: 8px;
	justify-content: space-between;
}
.shd-card__header-main {
	flex: 1 1 auto;
	align-items: flex-start;
	gap: 7px;
	overflow: hidden;
}
.shd-card__header-actions {
	align-items: flex-end;
	flex-direction: column;
	gap: 4px;
	margin-left: auto;
	max-width: 46%;
}
.shd-card__meta {
	width: 100%;
	flex-wrap: wrap;
	gap: 4px;
	align-content: flex-start;
	color: var(--shd-card-text-soft, var(--ui-text-dim));
	font-size: 12px;
}

.shd-card__header-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.shd-card__header--server {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	align-items: start;
	gap: 8px;
}
.shd-card__header--server > .shd-card__header-actions {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	max-width: none;
	margin-left: 0;
}
.shd-card__header--server > .shd-card__header-content {
	grid-column: 1;
	grid-row: 1;
}

.shd-card h3 {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	color: var(--shd-card-text, var(--ui-text));
	font:
		700 0.92rem/1.1 'IBM Plex Sans Condensed',
		system-ui,
		sans-serif;
}
.shd-card__header-actions.shd-card__actions--local {
	flex-direction: row;
	flex-wrap: nowrap;
}
.shd-card__body--separated {
	padding-top: 7px;
	border-top: 1px solid var(--shd-card-row-border, var(--ui-border));
}
.shd-card__footer .shd-card__services {
	flex: 1 1 auto;
	flex-wrap: nowrap;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}
.shd-card__footer .shd-card__services::-webkit-scrollbar {
	display: none;
}

.shd-card__body {
	order: 2;
	display: block;
	min-width: 0;
	padding-top: 0;
	border-top: 0;
}
.shd-card__meta > :is(span, time) {
	display: inline-flex;
	align-items: center;
	min-height: 18px;
	max-width: 100%;
	padding: 1px 6px;
	border: 1px solid var(--shd-card-meta-border, var(--ui-border));
	border-radius: var(--shd-card-meta-radius, 6px);
	background: var(--shd-card-meta-bg, var(--ui-surface-soft));
	font-size: 10px;
	line-height: 1.1;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.shd-card__footer {
	order: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-width: 0;
	margin-top: auto;
	padding-top: 7px;
	border-top: 1px solid var(--shd-card-row-border, var(--ui-border));
}
.shd-card__footer-left,
.shd-card__footer-main {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	align-self: center;
	min-width: 0;
}
.shd-card__actions {
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 6px;
	flex: 0 0 auto;
}
.shd-card__actions--local {
	min-width: 96px;
	min-height: 28px;
}
.shd-card__footer--actions-only > .shd-card__actions {
	margin-left: auto;
}

:is(.shd-card__title, .agents-controller-title) {
	display: grid;
	gap: 1px;
	min-width: 0;
	overflow: hidden;
	color: var(--ui-text, var(--ui-text));
}
:is(.shd-card__eyebrow, .agents-title-line--top) {
	color: var(--ui-text-dim, var(--ui-text-dim));
	font:
		500 0.7rem/1.05 'Artifakt Element',
		system-ui,
		sans-serif;
}
:is(.shd-card__title-line, .agents-title-line) {
	display: block;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
:is(.shd-card__title-line, .agents-title-line):empty {
	display: none;
}
:is(.shd-card__title-line--main, .agents-title-line--main) {
	color: var(--ui-text, var(--ui-text));
	font-size: 0.9rem;
	line-height: 1.05;
	letter-spacing: 0;
}
:is(.shd-card__project-label, .agents-project-label) {
	display: inline;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ui-text, var(--ui-text));
	font: inherit;
}

/* Shared compact metadata and state chips. Modules may add semantic variants. */
:is(.shd-card__status, .agents-status, .agents-current-device, .agents-role-badge, .agents-muted) {
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	padding: 0 7px;
	border: 1px solid var(--ui-border, var(--ui-border));
	border-radius: 6px;
	background: var(--ui-surface-soft, var(--ui-surface-soft));
	color: var(--ui-text-muted, var(--ui-text-dim));
	font-size: 9px;
	line-height: 1;
	overflow-wrap: anywhere;
}

:is(.shd-card__type, .agents-type) {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 22px;
	max-width: 118px;
	padding: 0 7px;
	border: 1px solid var(--ui-border, var(--ui-border));
	border-radius: 999px;
	background: var(--ui-surface-soft, var(--ui-surface-soft));
	color: var(--ui-text-muted, var(--ui-text-dim));
	font-size: 10px;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The compact variant is the established layout of all list-card statuses. */
:is(.shd-card__status, .agents-status, .agents-current-device, .agents-role-badge, .agents-muted) {
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.shd-card__status--success {
	border-color: rgba(124, 224, 162, 0.44);
	background: rgba(124, 224, 162, 0.12);
	color: var(--status-success-text, #7ce0a2);
}

.shd-card__status--muted {
	border-color: rgba(148, 163, 184, 0.42);
	background: rgba(148, 163, 184, 0.13);
	color: var(--ui-text-muted, var(--ui-text-dim));
}

html[data-ui-theme='light'] .shd-card__status--success {
	border-color: rgba(40, 122, 58, 0.38);
	background: rgba(40, 122, 58, 0.1);
	color: #287a3a;
}

html[data-ui-theme='light'] .shd-card__status--muted {
	border-color: rgba(71, 85, 105, 0.42);
	background: rgba(71, 85, 105, 0.09);
	color: var(--ui-text-dim);
}

.agents-status--online {
	border-color: rgba(124, 224, 162, 0.44);
	background: rgba(124, 224, 162, 0.12);
	color: var(--status-success-text, #7ce0a2);
}

.agents-status--offline {
	border-color: rgba(255, 123, 123, 0.38);
	background: rgba(255, 123, 123, 0.12);
	color: var(--status-danger-text, #ff7b7b);
}

.agents-status--disabled {
	border-color: rgba(148, 163, 184, 0.42);
	background: rgba(148, 163, 184, 0.13);
	color: var(--ui-text-muted, var(--ui-text-dim));
}

.agents-status--enroll_pending {
	border-color: rgba(255, 190, 92, 0.42);
	background: rgba(255, 190, 92, 0.13);
	color: #ffbe5c;
}

html[data-ui-theme='light'] .agents-status--online {
	border-color: rgba(40, 122, 58, 0.38);
	background: rgba(40, 122, 58, 0.1);
	color: #287a3a;
}

html[data-ui-theme='light'] .agents-status--disabled {
	border-color: rgba(71, 85, 105, 0.42);
	background: rgba(71, 85, 105, 0.09);
	color: var(--ui-text-dim);
}

.shd-card__services {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	min-width: 0;
	padding-top: 0;
	border-top: 0;
}

/* List-card anatomy. Individual modules provide only colour variables. */
.shd-card--list .shd-card__link {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) 18px;
	align-items: center;
	gap: 9px;
	min-height: 0;
	padding: 8px 10px;
	color: inherit;
	text-decoration: none;
}

.shd-card--list .shd-card__icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	color: var(--shd-card-text-soft, var(--ui-text-dim));
}
.shd-card--list .shd-card__content {
	display: grid;
	min-width: 0;
	gap: 2px;
}
.shd-card--list .shd-card__title {
	overflow: hidden;
	color: var(--shd-card-text, var(--ui-text));
	font:
		600 15px/1.15 'IBM Plex Sans Condensed',
		system-ui,
		sans-serif;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shd-card--list :is(.shd-card__context, .shd-card__secondary) {
	overflow: hidden;
	color: var(--shd-card-text-soft, var(--ui-text-dim));
	font:
		400 12px/1.2 'Artifakt Element',
		system-ui,
		sans-serif;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shd-card--list .shd-card__secondary {
	color: var(--ui-text-muted, var(--shd-card-text-soft, var(--ui-text-dim)));
	font-family: 'IBM Plex Mono', monospace;
}
.shd-card--list .shd-card__action {
	color: var(--shd-card-text-soft, var(--ui-text-dim));
}
.shd-card--list .shd-card__link:hover .shd-card__action {
	color: var(--shd-card-text, var(--ui-text));
}

/* Tile-card anatomy. Status colours and responsive placement stay local. */
.shd-card--tile .shd-card__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 6px;
	box-sizing: border-box;
}

.shd-card--tile .shd-card__properties {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 7px;
	row-gap: 4px;
	width: 100%;
	text-align: left;
	font-size: 0.7rem;
}
.shd-card--tile .shd-card__property {
	display: flex;
	align-items: center;
	min-width: 0;
	line-height: 1;
}
.shd-card--tile .shd-card__value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 1;
}
.shd-card--tile .shd-card__property:is(.prop--status, .prop--phase) .shd-card__value {
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	min-height: 16px;
	max-width: 100%;
	padding: 0 5px;
	border: 1px solid var(--ui-border);
	border-radius: 6px;
	background: var(--shd-card-chip-bg, var(--ui-surface-soft));
	color: var(--shd-card-chip-text, var(--ui-text-dim));
	font:
		500 0.65rem/1 'Artifakt Element',
		system-ui,
		sans-serif;
}

/* Compact project cards share the legacy file-card anatomy during migration. */
.shd-card--compact .shd-card__inner {
	display: grid;
	position: relative;
}

.shd-card--compact .shd-card__title {
	font-weight: 600;
	color: var(--shd-card-title-text, var(--ui-text));
	font-size: 0.88rem;
}

.shd-card--compact .shd-card__actions {
	display: flex;
	align-items: center;
	justify-self: end;
	flex-wrap: wrap;
	gap: 6px;
}

.shd-card--compact .shd-card__icon {
	display: grid;
	place-items: center;
	font-size: 1.1rem;
}

.shd-card--compact .shd-card__secondary {
	color: var(--shd-card-secondary-text, var(--ui-text-dim));
	opacity: 0.85;
	font-size: 0.78rem;
}

.shd-card--compact .shd-card__content {
	justify-self: start;
	align-items: flex-start;
	text-align: left;
}

.shd-card--compact .shd-card__content :is(.shd-card__title, .shd-card__secondary, small) {
	text-align: left;
}

.shd-card--compact .shd-card__content small {
	display: block;
	opacity: 0.75;
}

.shd-card--compact .shd-card__inner .online-dots {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	pointer-events: auto;
	z-index: 2;
}

.shd-card--compact .shd-card__inner .online-dots.online-dots--top {
	left: 3px;
	top: 3px;
}
.shd-card--compact .shd-card__inner .online-dots.online-dots--bottom {
	bottom: 3px;
	left: 3px;
}
.shd-card--compact .shd-card__inner .online-dots .dot {
	position: static;
}

@media (max-width: 720px) {
	.shd-card__header-actions {
		max-width: 100%;
	}
	.shd-card__footer {
		flex-wrap: wrap;
	}
	.shd-card__actions.shd-card__actions--local {
		justify-content: flex-start;
	}
}