/*
 * Wheels form defaults — stacked labels, full-width inputs, red errors,
 * and boxed flash messages (green success, blue notice, amber warning).
 * Loaded after simple.css. Safe to delete if you bring your own stylesheet.
 * #3549 #3550
 */
:root {
	--wheels-error: #9f1239;
	--wheels-error-bg: #fff1f2;
	--wheels-error-border: #be123c;
	--wheels-success: #166534;
	--wheels-success-bg: #f0fdf4;
	--wheels-success-border: #16a34a;
	--wheels-notice: #1e40af;
	--wheels-notice-bg: #eff6ff;
	--wheels-notice-border: #2563eb;
	--wheels-warning: #92400e;
	--wheels-warning-bg: #fffbeb;
	--wheels-warning-border: #d97706;
}

@media (prefers-color-scheme: dark) {
	:root {
		--wheels-error: #fda4af;
		--wheels-error-bg: #4c0519;
		--wheels-error-border: #fb7185;
		--wheels-success: #86efac;
		--wheels-success-bg: #14532d;
		--wheels-success-border: #4ade80;
		--wheels-notice: #93c5fd;
		--wheels-notice-bg: #1e3a8a;
		--wheels-notice-border: #60a5fa;
		--wheels-warning: #fcd34d;
		--wheels-warning-bg: #78350f;
		--wheels-warning-border: #fbbf24;
	}
}

.field {
	display: block;
	margin-bottom: 1.25rem;
}

.field > label,
form label {
	display: block;
	margin-bottom: 0.25rem;
}

/* Full-width text-like controls. Checkboxes/radios stay shrink-wrapped. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]),
.field textarea,
.field select,
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="url"],
form input[type="tel"],
form input[type="search"],
form input[type="number"],
form input[type="date"],
form input[type="datetime-local"],
form input[type="month"],
form input[type="week"],
form input[type="time"],
form textarea,
form select {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* around-placement: the input lives inside the label — put it on the next line */
form label > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]),
form label > textarea,
form label > select {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.field-with-errors {
	display: block;
}

.field-with-errors input,
.field-with-errors textarea,
.field-with-errors select {
	border-color: var(--wheels-error-border);
}

.error-message,
.error-messages {
	color: var(--wheels-error);
	font-weight: 600;
}

.error-message {
	display: block;
	margin-top: 0.35rem;
}

/* Icon prefix so errors are not color-only (paired with the "Error:" text
   the helper prepends, role="alert", and the stronger type weight). */
.error-message::before,
.error-messages li::before {
	content: "⚠ ";
}

.error-messages {
	background-color: var(--wheels-error-bg);
	border: 1px solid var(--wheels-error-border);
	border-radius: 5px;
	padding: 0.75rem 1rem 0.75rem 1.5rem;
	margin: 0 0 1.25rem;
	list-style: none;
}

.error-messages li {
	margin: 0.25rem 0;
}

/* Boxed flash messages. flashMessages() emits a <p class="<key>-message"> for
   each flash entry; the scaffold flashes `success` (created/updated/deleted)
   and `notice`, and `warning` rounds out the palette. Field-level errors keep
   using .error-message above, which stays inline rather than a box. */
.success-message,
.notice-message,
.warning-message {
	display: block;
	border: 1px solid;
	border-radius: 5px;
	padding: 0.75rem 1rem 0.75rem 1.5rem;
	margin: 0 0 1.25rem;
	font-weight: 600;
}

.success-message {
	color: var(--wheels-success);
	background-color: var(--wheels-success-bg);
	border-color: var(--wheels-success-border);
}

.notice-message {
	color: var(--wheels-notice);
	background-color: var(--wheels-notice-bg);
	border-color: var(--wheels-notice-border);
}

.warning-message {
	color: var(--wheels-warning);
	background-color: var(--wheels-warning-bg);
	border-color: var(--wheels-warning-border);
}

/* Icon prefixes so each tone is not color-only (paired with the box, role,
   and the stronger type weight). */
.success-message::before {
	content: "✓ ";
}

.notice-message::before {
	content: "ℹ ";
}

.warning-message::before {
	content: "⚠ ";
}

form input[type="checkbox"] + label,
form input[type="radio"] + label,
form label:has(> input[type="checkbox"]),
form label:has(> input[type="radio"]) {
	display: inline-block;
	width: auto;
}

form label > input[type="checkbox"],
form label > input[type="radio"] {
	display: inline-block;
	width: auto;
	margin-right: 0.4rem;
}

/*
 * Action rows generated by the scaffold (`app/views/<model>/index.cfm`,
 * `show.cfm`, and the related-items block). Every action carries simple.css's
 * `.button` class so links and form buttons read alike — before this, Edit and
 * "all posts" were plain links next to a Delete button. `buttonTo` needs its
 * class passed as `inputClass` because it wraps a nested <button>.
 *
 * Top-aligned on purpose. `buttonTo` renders a <form>, so the flex item is
 * the form and the visible button sits one level down. simple.css gives that
 * nested button `margin-bottom: 8px`, which made the form 8px taller than the
 * sibling links; `align-items: center` then floated the Delete button 4px
 * above Edit and "all posts". Zeroing the nested margin fixes the height, and
 * `flex-start` means a future height difference can't re-centre the row.
 */
.wheels-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem;
}

.wheels-actions > *,
.wheels-actions > form > .button {
	margin-bottom: 0;
}