/* DevLab Image Alt: admin styles. Scoped to .devlab-alt-wrap. */

.devlab-alt-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
	max-width: 1180px;
}

@media (max-width: 1100px) {
	.devlab-alt-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Current state. */

.devlab-alt-status {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0;
	padding: 10px 14px;
	background: #edfaef;
	border: 1px solid #b8e6bf;
	border-radius: 4px;
	color: #1d2327;
	font-size: 14px;
}

.devlab-alt-status .dashicons {
	flex: 0 0 auto;
	color: #00a32a;
}

/* Cards. */

.devlab-alt-card {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 16px 20px;
	margin: 0 0 16px;
}

.devlab-alt-card__title {
	margin: 0 0 12px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
}

/* Fields. */

.devlab-alt-field {
	margin: 0 0 18px;
}

.devlab-alt-field:last-child {
	margin-bottom: 0;
}

.devlab-alt-field > label,
.devlab-alt-field > .devlab-alt-field__label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}

.devlab-alt-field select {
	min-width: 260px;
	max-width: 100%;
}

.devlab-alt-field .description {
	margin: 6px 0 0;
}

.devlab-alt-toggle {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	padding: 12px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	cursor: pointer;
}

.devlab-alt-toggle:hover {
	border-color: #8c8f94;
}

.devlab-alt-toggle:has(input:checked) {
	border-color: #2271b1;
	background: #f6f9fc;
}

.devlab-alt-toggle input {
	margin: 2px 0 0;
}

.devlab-alt-toggle__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.devlab-alt-toggle__body span {
	color: #50575e;
}

.devlab-alt-notice-box {
	margin: 0 0 16px;
	padding: 12px 14px;
	background: #fcf9e8;
	border: 1px solid #dba617;
	border-radius: 4px;
}

/* Explanation list. */

.devlab-alt-list {
	margin: 0;
	padding-left: 18px;
	list-style: disc;
}

.devlab-alt-list li {
	margin: 0 0 8px;
}

/* Portfolio box. */

.devlab-alt-portfolio {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 16px;
}

.devlab-alt-portfolio__title {
	margin: 0 0 12px;
	padding: 0;
	font-size: 14px;
}

.devlab-alt-portfolio__icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
}

.devlab-alt-portfolio__note {
	margin: 12px 0 0;
	color: #646970;
	font-size: 12px;
}

/* Featured card (DevLab Store). */

.devlab-alt-feature {
	margin: 0 0 12px;
	padding: 14px;
	background: #f6f9fc;
	border: 1px solid #2271b1;
	border-radius: 6px;
}

.devlab-alt-feature__headline {
	margin: 8px 0 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.devlab-alt-feature__text {
	margin: 0 0 12px;
	color: #50575e;
	font-size: 12px;
	line-height: 1.5;
}