/* ── ActionTile — global (component-level CSS) ── */

.mud-action-tile {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.2rem;
	border-radius: 18px;
	background: rgba(11, 87, 208, 0.05);
	border: 1px solid rgba(11, 87, 208, 0.1);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
	flex-wrap: wrap;
	transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.mud-action-tile::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, rgba(11, 87, 208, 0.95), rgba(53, 175, 109, 0.7));
}

.mud-action-tile:hover {
	box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
	border-color: rgba(11, 87, 208, 0.18);
}

.mud-action-copy {
	flex: 1 1 22rem;
	min-width: 0;
}

.mud-action-title {
	font-weight: 700;
}

.mud-action-description {
	margin-top: 0.4rem;
	line-height: 1.7;
	color: rgba(29, 38, 52, 0.82);
}

.mud-action-meta {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: rgba(88, 102, 122, 0.92);
}

.mud-action-meta.is-ready {
	color: rgba(20, 83, 45, 0.92);
}

.mud-action-controls {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
}

/* On narrow containers where flex-wrap kicks in,
   make controls full-width so buttons center properly */
@media (max-width: 720px) {
	.mud-action-controls {
		width: 100%;
	}
}

.mud-admin-action-button {
	min-width: 0;
	justify-content: center;
	box-sizing: border-box;
}

body.dark .mud-action-description {
	color: rgba(226, 232, 240, 0.8);
}

body.dark .mud-action-meta {
	color: rgba(191, 202, 219, 0.86);
}

body.dark .mud-action-meta.is-ready {
	color: rgba(163, 230, 193, 0.9);
}

body.dark .mud-action-tile {
	background: rgba(148, 196, 255, 0.08);
	border-color: rgba(148, 196, 255, 0.12);
}

@media (max-width: 700px) {
	.mud-action-copy {
		flex-basis: 100%;
	}

	.mud-action-controls {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
	}

	.mud-admin-action-button {
		min-width: 0;
		flex: 1 1 0;
	}
}