/**
 * File: clay-collection-log.css
 * Styling for the public Clay Collection Log entry form.
 *
 * Field rows reuse the plugin's own established classes so this page looks
 * and behaves like the rest of the site's forms rather than a bespoke
 * layout: .form-column.stakeholderFormField for label/input spacing (same
 * as the Collection Centre repeater). This file only adds what's specific
 * to Clay Collection Log: the card containers, the accent colour (matched
 * to the site's own olive-green / cream palette), and the field grids.
 *
 * Card styling (padding/radius/background/border, no left accent stripe)
 * mirrors .collection-centre-card exactly, per the plugin's own convention
 * for a repeatable entry card.
 *
 * The admin/partner report (a separate My Account tab) is built entirely on
 * the plugin's shared listing templates/CSS and needs nothing from this
 * file — this stylesheet only covers the public entry form.
 */

:root {
	--clayLogAccent:     #8FAB3F;
	--clayLogAccentDark: #6E8A32;
	--clayLogCream:      #F5ECD9;
	--clayLogCardBg:     #fbf7f2;
	--clayLogCardBorder: #efdecd;
	--clayLogInk:        #3A3428;
	--clayLogInkMuted:   #6B6259;
}

.clayLogWrap {
	max-width: 1120px;
	margin: 24px 0 48px;
	color: var(--clayLogInk);
}

.clayLogFormCard {
	background: #fff;
	border: 2px solid var(--clayLogCardBorder);
	border-radius: 12px;
	padding: 22px 24px;
	margin-bottom: 22px;
}

/* A proper notice box — tinted background + border, same treatment as
   .clayLogEmptyCentres below — not just a bare line of text. */
.clayLogIntro {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--clayLogCream);
	border: 2px solid var(--clayLogCardBorder);
	border-radius: 12px;
	padding: 14px 20px;
	margin: 0 0 22px;
}

.clayLogIntro p {
	margin: 0;
	color: var(--clayLogInk);
	font-size: 14.5px;
	line-height: 1.5;
}

.clayLogIntroIcon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--clayLogAccent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	font-style: italic;
	font-family: Georgia, "Times New Roman", serif;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clayLogEmptyCentres {
	background: var(--clayLogCream);
	border: 2px solid var(--clayLogCardBorder);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 24px;
	font-size: 15px;
}

/* ── "Submitted by" — captured once for the whole batch ─────────────────── */

.clayLogSubmitterRow {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
}

.clayLogSubmitterRow .form-column.stakeholderFormField {
	/* Fields were shrink-wrapping instead of filling their grid column,
	   leaving a large gap between "Your name" and "Your phone" — same
	   class of issue as the earlier number-input fix, so forced explicitly
	   rather than relying on Grid's default item-stretch behaviour. */
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	padding-bottom: 0 !important;
}

.clayLogSubmitterRow .clayLogField {
	width: 100% !important;
}

/* ── Donor entry card ─────────────────────────────────────────────────── */

.clayLogDonorCard {
	padding: 20px;
	border-radius: 12px;
	background: var(--clayLogCardBg);
	border: 2px solid var(--clayLogCardBorder);
	margin-bottom: 20px;
}

.clayLogDonorCard:last-child {
	margin-bottom: 0;
}

.clayLogCardHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.clayLogCardLabel {
	font-size: 13px;
	font-weight: 700;
	color: var(--clayLogInkMuted);
}

/* Seven fields per donor card. CSS Grid, not flex — an earlier flex-based
   row (flex: 1 on each column) left fields shrink-wrapped with dead space
   after them instead of stretching evenly. Four columns wraps the seven
   fields to 4 + 3 automatically — no extra markup needed for the second
   line. */
.clayLogFieldsRow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.clayLogFieldsRow .form-column.stakeholderFormField {
	min-width: 0;
	padding-bottom: 0;
}

/* Sentence case, not the small-caps "chip" look — matches the plain,
   normal-case labels on Edit Account (First Name, Donor name, etc.). */
.clayLogLabel {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--clayLogInk);
	margin-bottom: 5px;
}

.clayLogField {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid #d9d2c2;
	border-radius: 4px;
	background-color: #fff;
	font-size: 14.5px;
	color: var(--clayLogInk);
}

/* Number input specifically was rendering shrink-wrapped to its content
   instead of filling its grid column (visible as a narrow box with a lot
   of dead space beside it) — forced full width to match every other
   field in the row. */
input.clayLogField[type="number"] {
	width: 100% !important;
	min-width: 0 !important;
}

.clayLogField:focus {
	outline: none;
	border: 2px solid var(--clayLogAccent) !important;
}

/* ── Remove-entry button (card header, top right) ─────────────────────── */

.clayLogRemoveRowBtn {
	width: 32px;
	height: 32px;
	padding: 0;
	line-height: 1;
	border-radius: 50%;
	background: #fff !important;
	border: 1px solid #d9d2c2 !important;
	color: var(--clayLogInkMuted) !important;
	font-size: 17px;
	cursor: pointer;
	flex-shrink: 0;
}

.clayLogRemoveRowBtn:hover,
.clayLogRemoveRowBtn:focus {
	background: #fbeae7 !important;
	border-color: #d99a90 !important;
	color: #b3261e !important;
}

/* ── Action buttons ───────────────────────────────────────────────────── */

.clayLogAddRowBtn {
	display: inline-block;
	margin-top: 4px;
	padding: 10px 20px;
	border-radius: 6px;
	background: #fff !important;
	border: 1px solid var(--clayLogAccent) !important;
	color: var(--clayLogAccentDark) !important;
	font-weight: 600;
	font-size: 14.5px;
	cursor: pointer;
}

.clayLogAddRowBtn:hover,
.clayLogAddRowBtn:focus {
	background: var(--clayLogCream) !important;
	color: var(--clayLogAccentDark) !important;
}

.clayLogSaveBtn {
	display: block;
	margin-top: 18px;
	padding: 11px 24px;
	border-radius: 6px;
	background: var(--clayLogAccent) !important;
	border: 1px solid var(--clayLogAccent) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 14.5px;
	cursor: pointer;
}

.clayLogSaveBtn:hover,
.clayLogSaveBtn:focus {
	background: var(--clayLogAccentDark) !important;
	border-color: var(--clayLogAccentDark) !important;
	color: #fff !important;
}

.clayLogSaveBtn:disabled {
	opacity: 0.6;
	cursor: default;
}

.clayLogMessage {
	margin: 14px 0 0;
	font-weight: 600;
	font-size: 14.5px;
	min-height: 20px;
}

.clayLogMessage-error   { color: #b3261e; }
.clayLogMessage-success { color: #3f6b1e; }
.clayLogMessage-warning { color: #8a6100; }
.clayLogMessage-info    { color: var(--clayLogInkMuted); }

/* ── Responsive ────────────────────────────────────────────────────────
   Same 991.98px / 576px breakpoints .campaignContainer already uses
   elsewhere on this site (les-avartan-network-public.css). */

@media (max-width: 991.98px) {
	.clayLogFieldsRow {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.clayLogFieldsRow,
	.clayLogSubmitterRow {
		grid-template-columns: 1fr;
	}

	.clayLogFormCard,
	.clayLogDonorCard {
		padding: 16px;
	}

	.clayLogSaveBtn,
	.clayLogAddRowBtn {
		width: 100%;
		text-align: center;
	}
}