/**
 * Kneads color fields — hex first, swatch opens picker; WP Iris when ready (wp-admin).
 */
.kneads-color-field,
.icancook-type__color,
.icancook-type__color-inputs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	min-width: 0;
	flex-wrap: nowrap;
}

.kneads-color-field__hex,
.icancook-type__color input[type="text"].kneads-color-field__hex,
.icancook-type__color-inputs input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kneads-color-field__hex::placeholder {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 500;
	opacity: 0.55;
}

.kneads-color-field__swatch,
.icancook-type__color input[type="color"],
.icancook-type__color-inputs input[type="color"] {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	cursor: pointer;
	background: transparent;
}

.kneads-color-field__swatch::-webkit-color-swatch-wrapper {
	padding: 3px;
}

.kneads-color-field__swatch::-webkit-color-swatch {
	border: none;
	border-radius: 5px;
}

/* WordPress picker (wp-admin): hex + square; hide duplicate native swatch when Iris is active. */
.kneads-color-field--wp-ready .kneads-color-field__swatch {
	display: none;
}

.kneads-color-field--wp-ready .wp-picker-container,
.kneads-color-field--wp .wp-picker-container,
.icancook-type__color .wp-picker-container,
.icancook-type__color-inputs .wp-picker-container {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	width: 100%;
	max-width: 100%;
}

.kneads-color-field .wp-color-result,
.icancook-type__color .wp-color-result,
.icancook-type__color-inputs .wp-color-result {
	margin: 0 !important;
	flex: 0 0 auto;
}

.kneads-color-field .wp-picker-input-wrap,
.icancook-type__color .wp-picker-input-wrap,
.icancook-type__color-inputs .wp-picker-input-wrap {
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
}

.kneads-color-field .wp-picker-input-wrap input[type="text"],
.icancook-type__color .wp-picker-input-wrap input[type="text"],
.icancook-type__color-inputs .wp-picker-input-wrap input[type="text"] {
	width: 100% !important;
	margin: 0 !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Dashboard calendar colors — layout lives in dashboard.css */