/* Doughmaker styles
 * Sister plugin to Rubmaster. Owned & created by Golden Apple Corps Ltd.
 */

.doughmaker-brand { margin-bottom: 4px; }
.doughmaker-brand h1 .dashicons { font-size: 28px; width: 28px; height: 28px; vertical-align: text-bottom; color: #b5651d; }
.doughmaker-credit { margin: 2px 0 16px; color: #646970; font-size: 12px; }
.doughmaker-credit a { color: #b5651d; }

.doughmaker-grid {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.4fr);
	gap: 20px;
	align-items: start;
}
@media (max-width: 1100px) { .doughmaker-grid { grid-template-columns: 1fr; } }

.doughmaker-card {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 18px 20px;
	box-shadow: 0 1px 1px rgba(0,0,0,.04);
}
.doughmaker-card-wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .doughmaker-card-wide { grid-column: auto; } }
.doughmaker-card h2 { margin-top: 0; }
.doughmaker-card h2.doughmaker-subhead { margin-top: 24px; }
.doughmaker-card h3 { margin: 18px 0 8px; }

.doughmaker-form label { display: block; margin-bottom: 4px; }
.doughmaker-form input[type="text"],
.doughmaker-form input[type="number"],
.doughmaker-form input[type="date"],
.doughmaker-form input[type="time"],
.doughmaker-form textarea,
.doughmaker-form select { max-width: 100%; }
.doughmaker-form input.regular-text,
.doughmaker-form select.regular-text { display: block; width: 100%; box-sizing: border-box; }

.doughmaker-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.doughmaker-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.doughmaker-row-2 > p, .doughmaker-row-4 > p { margin: 0 0 12px; }
.doughmaker-row-4 input { width: 100%; box-sizing: border-box; }
@media (max-width: 700px) { .doughmaker-row-2, .doughmaker-row-4 { grid-template-columns: 1fr 1fr; } }

/* Time-entry fields only need to be as wide as a date / time, not full-width. */
#doughmaker-times-form .doughmaker-row-2 { display: flex; flex-wrap: wrap; gap: 12px 28px; }
#doughmaker-times-form .doughmaker-row-2 > p { margin: 0 0 8px; }
#doughmaker-times-form input[type="date"],
#doughmaker-times-form input[type="time"] { display: inline-block; width: auto; }

/* Keep the native time picker (clock icon) but show an 'hh:mm' hint while the
 * field is empty. On empty+unfocused, the native "--:--" text is hidden and our
 * hint is shown; once a time is chosen, or on focus, the native field takes over.
 * This is a webkit/blink enhancement; other browsers fall back to their default. */
#doughmaker-times-form input[type="time"] { position: relative; }
#doughmaker-times-form input[type="time"]:required:invalid:not(:focus)::-webkit-datetime-edit { color: transparent; }
#doughmaker-times-form input[type="time"]:required:invalid:not(:focus)::before {
	content: "hh:mm";
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	color: #8c8f94;
	pointer-events: none;
}

.doughmaker-actions { margin-top: 14px; }
.doughmaker-actions .button { margin-right: 8px; }

.doughmaker-check { margin: 14px 0; }
.doughmaker-check label { display: inline; }
.doughmaker-check input { margin-right: 6px; }
.doughmaker-check-inline { align-self: end; padding-bottom: 8px; }

.doughmaker-message { margin-top: 12px; padding: 0; font-weight: 600; }
.doughmaker-message.is-success { color: #007017; }
.doughmaker-message.is-error { color: #b32d2e; }

.doughmaker-table { margin-top: 8px; }
.doughmaker-col-actions { width: 150px; }
.doughmaker-col-actions .button { margin-right: 6px; }
.button-link-delete { color: #b32d2e; }

/* Centered version footer (matches Rubmaster) */
.doughmaker-footer { text-align: center; font-size: 11px; color: #8c8f94; margin: 28px 0 8px; }
.doughmaker-frontend .doughmaker-footer { margin-top: 24px; }

/* Front-end (shortcode) container */
.doughmaker-frontend { max-width: 1000px; margin: 0 auto; }
.doughmaker-frontend * { box-sizing: border-box; }
.doughmaker-frontend input[type="number"],
.doughmaker-frontend input[type="text"],
.doughmaker-frontend input[type="date"],
.doughmaker-frontend input[type="time"],
.doughmaker-frontend select { padding: 6px 8px; }
.doughmaker-frontend .doughmaker-card h2 { margin-top: 0; }

/* ---- Planner wizard ---- */
.doughmaker-planner { display: grid; gap: 20px; }
.doughmaker-window-summary { font-size: 14px; color: #1d2327; margin: 0 0 14px; padding: 9px 13px; background: #f6f7f7; border: 1px solid #e0e0e0; border-radius: 6px; }

/* Dough option cards with a leading checkbox and a fit badge */
.doughmaker-option {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 10px;
	cursor: pointer;
	background: #fff;
	transition: border-color .12s, box-shadow .12s;
}
.doughmaker-option[hidden] { display: none; }
.doughmaker-option:hover { border-color: #b5651d; }
.doughmaker-option.is-selected { border-color: #2323ff; box-shadow: inset 3px 0 0 #2323ff; background: #f7f7ff; }
.doughmaker-option input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }
.doughmaker-option-body { flex: 1 1 auto; }
.doughmaker-option-name { font-weight: 700; font-size: 15px; color: #1d2327; }
.doughmaker-option-desc { margin: 4px 0 8px; color: #50575e; font-size: 13px; line-height: 1.45; }

.doughmaker-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; margin-top: 2px; }
.doughmaker-badge.is-great { background: #edf7ed; color: #1e4620; border: 1px solid #cfe8cf; }
.doughmaker-badge.is-ok { background: #f6f7f7; color: #3c434a; border: 1px solid #e0e0e0; }
.doughmaker-badge.is-tight { background: #fcf3e6; color: #7a4f12; border: 1px solid #f0d9b5; }
.doughmaker-badge.is-plenty { background: #eaf1fb; color: #123a7a; border: 1px solid #cfe0f5; }

.doughmaker-no-doughs { padding: 12px 14px; background: #fcf3e6; border: 1px solid #f0d9b5; color: #7a4f12; border-radius: 6px; }

/* ---- Recipe (same look as the same-day recipe) ---- */
.doughmaker-recipe-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.doughmaker-recipe-actions .button { margin: 0; }

.doughmaker-recipe h2 { margin: 0 0 4px; }
.doughmaker-recipe-sub { color: #50575e; font-style: italic; margin: 0 0 16px; max-width: 72ch; }

/* Blue hero card (mirrors Rubmaster's salt-card) with key figures */
.doughmaker-hero {
	background: linear-gradient(135deg, #2323ff, #1b1bc2);
	border: none; border-radius: 8px;
	margin: 8px 0 20px; padding: 16px 20px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px;
}
.doughmaker-hero-item { color: #fff; }
.doughmaker-hero-item .k { display: block; font-size: 12px; opacity: .85; }
.doughmaker-hero-item .v { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; }

.doughmaker-section-title { margin: 20px 0 10px; padding-bottom: 4px; border-bottom: 2px solid #b5651d; font-size: 15px; }

/* Ingredients grid (mirrors result-grid) */
.doughmaker-ing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.doughmaker-ing-card { background: #f6f7f7; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.doughmaker-ing-card .label { font-size: 13px; font-weight: 600; color: #1d2327; line-height: 1.3; }
.doughmaker-ing-card .value { font-size: 18px; font-weight: 700; color: #1d2327; }
.doughmaker-ing-card.is-water { border-color: #2323ff; box-shadow: inset 3px 0 0 #2323ff; }

/* Schedule steps */
.doughmaker-steps { list-style: none; margin: 0; padding: 0; counter-reset: dmstep; }
.doughmaker-step-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid #f0f0f1; }
.doughmaker-step-row:last-child { border-bottom: 0; }
.doughmaker-step-time { font-weight: 700; color: #b5651d; font-size: 15px; }
.doughmaker-step-time small { display: block; font-weight: 400; color: #8c8f94; font-size: 11px; white-space: normal; line-height: 1.35; }
.doughmaker-step-title { font-weight: 700; color: #1d2327; margin-bottom: 3px; }
.doughmaker-step-body { color: #3c434a; font-size: 14px; line-height: 1.5; }

.doughmaker-notes { margin-top: 18px; padding: 12px 16px; background: #f6f7f7; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 13px; color: #3c434a; line-height: 1.55; }
.doughmaker-notes strong { color: #1d2327; }

@media (max-width: 600px) {
	.doughmaker-step-row { grid-template-columns: 84px 1fr; }
}