/* ============================================================================
   direction-c.css  —  "Soft & filled" form direction for the Bookings app.
   Drop-in override. Load LAST, after stylesworkshopdetail.css, in main.hbs:

     <link rel="stylesheet" href="/styles/direction-c.css">

   Restyles the shared .ed-* form system to the approved Direction C:
     • Inputs become obviously-fillable FILLED BOXES (grey fill, rounded,
       accent focus ring) — no more underline-only fields.
     • Labels are bold, dark, sentence-case and sit clearly above each field.
     • Required fields auto-show a red "*"; non-required fields auto-show
       "Optional" — both derived from the existing `required` attribute,
       so no HTML changes are needed.
     • The decorative 01–05 field numbers are hidden.
     • Soft 12px corners + warm green accent applied app-wide.
   Works in light and dark themes. Everything is additive — delete this file
   to revert.
   ========================================================================== */

:root {
	--ed-accent: #1f6b3a;
	/* warm green */
	--ed-accent-soft: #e3ecdf;
	--ed-input-bg: #f1efe9;
	/* filled field on the page bg */
	--ed-input-border: #d1cfc7;
	/* border color for filled fields */

	--ed-input-bg-focus: #ffffff;

	--ed-danger-soft: #f6e7e3;
	--ed-radius-field: 12px;
	/* soft corners app-wide (cards, badges, buttons) */
	--ed-radius: 12px;
}

[data-theme="dark"] {
	--ed-accent: #5bb87a;
	--ed-accent-soft: #1a3327;
	--ed-input-bg: #272625;
	--ed-input-border: #3a3a3a;
	--ed-input-bg-focus: #1e1d1c;
	--ed-danger-soft: #2e1410;
}

/* ── Field container: gap-based rhythm, no divider lines ──────────────── */
.ed-field {
	margin-bottom: 20px;
	padding-top: 0;
	border-top: 0;
}

.ed-field__head {
	margin-bottom: 8px;
	align-items: baseline;
}

/* ── Labels: bold, dark, sentence-case (the key hierarchy fix) ────────── */
.ed-field__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--ed-ink);
	letter-spacing: -0.1px;
	text-transform: none;
	white-space: nowrap;
}

/* Hide the decorative numbers */
.ed-field__num {
	display: none !important;
}

/* Auto required marker — any required control in the field → red "*" */
.ed-field:has(:is(input, select, textarea)[required]) .ed-field__label::after {
	content: " *";
	color: var(--ed-danger);
	font-weight: 700;
}

/* Auto "Optional" tag — fields with no required control */
.ed-field:not(:has(:is(input, select, textarea)[required])) .ed-field__head::after {
	content: "Optional";
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1px;
	color: var(--ed-ink-3);
}

/* ── Inputs: filled, boxed, clearly fillable ──────────────────────────── */
.ed-input,
select.ed-input,
textarea.ed-input,
button.ed-input,
button.ed-input.custom-select-trigger {
	width: 100% !important;
	height: 50px !important;
	min-height: 50px;
	padding: 0 14px !important;
	background: var(--ed-input-bg) !important;
	border: 1.5px solid var(--ed-input-border) !important;
	border-radius: var(--ed-radius-field) !important;
	font: 400 16px/1.2 var(--ed-font-sans) !important;
	color: var(--ed-ink) !important;
	letter-spacing: -0.1px;
	box-shadow: none !important;
	transition: border-color .12s, background .12s, box-shadow .12s;
}

.ed-input::placeholder {
	color: var(--ed-ink-3);
}

/* textarea grows */
textarea.ed-input {
	height: auto !important;
	min-height: 92px;
	padding: 13px 14px !important;
	line-height: 1.45 !important;
	resize: vertical;
}

/* native select: hide default arrow, draw our own chevron */
select.ed-input {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-right: 40px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
}

[data-theme="dark"] select.ed-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23a09e97' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* button-style triggers (custom selects) keep a chevron via their own icon;
   align text + give them the same box */
button.ed-input,
button.ed-input.custom-select-trigger {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	text-align: left;
	gap: 8px;
}

/* ── Focus: accent ring + lift to white fill ──────────────────────────── */
.ed-input:focus,
.ed-input:focus-visible,
select.ed-input:focus,
select.ed-input:focus-visible,
textarea.ed-input:focus,
button.ed-input:focus,
button.ed-input:focus-visible {
	background: var(--ed-input-bg-focus) !important;
	border-color: var(--ed-accent) !important;
	box-shadow: 0 0 0 3px var(--ed-accent-soft) !important;
	outline: none !important;
}

/* ── Invalid state ────────────────────────────────────────────────────── */
.ed-field.is-invalid .ed-input,
.ed-field.is-invalid select.ed-input,
.ed-field.is-invalid textarea.ed-input,
.ed-field.is-invalid button.ed-input {
	border-color: var(--ed-danger) !important;
	background: var(--ed-danger-soft) !important;
	box-shadow: none !important;
}

.ed-field.is-invalid .ed-field__label {
	color: var(--ed-danger);
}

.ed-field.is-invalid .ed-field__label::after {
	color: var(--ed-danger);
}

/* ── Hint / error: consistent, no italics ─────────────────────────────── */
.ed-field__hint {
	font: 400 13px/1.4 var(--ed-font-sans);
	color: var(--ed-ink-3);
	margin-top: 7px;
}

.ed-field__error {
	font: 600 13px/1.4 var(--ed-font-sans);
	color: var(--ed-danger);
	margin-top: 7px;
}

/* ── Date picker indicator stays subtle ───────────────────────────────── */
input[type="date"].ed-input::-webkit-calendar-picker-indicator {
	opacity: 0.55;
	cursor: pointer;
}

/* ── ALL link-buttons → real buttons (no underlined labels anywhere) ───── */
/* The app uses .ed-link / .btn-change-workshop / .btn-select-workshop for
   underlined text actions. Turn every one into an outlined button. */
.ed-link,
.btn-change-workshop,
.btn-select-workshop {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px;
	padding: 0 16px !important;
	border: 1.5px solid var(--ed-ink-4) !important;
	border-radius: var(--ed-radius-field) !important;
	background: var(--ed-surface) !important;
	color: var(--ed-ink) !important;
	font: 600 13px/1 var(--ed-font-sans) !important;
	text-decoration: none !important;
	cursor: pointer;
	vertical-align: middle;
	transition: background .12s, border-color .12s;
}

.ed-link:hover,
.btn-change-workshop:hover,
.btn-select-workshop:hover {
	background: var(--ed-surface-2) !important;
	color: var(--ed-ink) !important;
}

/* Muted variant → lighter, more secondary button (still a button) */
.ed-link--muted {
	height: 34px;
	padding: 0 13px !important;
	font-size: 12px !important;
	color: var(--ed-ink-2) !important;
	border-color: var(--ed-border-strong) !important;
	background: transparent !important;
}

/* ── Terms acceptance: checkbox → toggle switch (CSS-only, keeps the JS) ── */
#termsCheckbox {
	appearance: none;
	-webkit-appearance: none;
	width: 46px !important;
	height: 28px !important;
	border-radius: 999px !important;
	background: var(--ed-ink-4) !important;
	border: none !important;
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
	margin: 0 !important;
	transition: background .15s;
}

#termsCheckbox::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
	transition: transform .15s;
}

#termsCheckbox:checked {
	background: var(--ed-accent) !important;
}

#termsCheckbox:checked::before {
	transform: translateX(18px);
}

/* Align the toggle nicely next to its label */
#termsCheckbox+label[for="termsCheckbox"] {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--ed-ink) !important;
	align-self: center;
}

/* ── Card action links → real buttons ─────────────────────────────────── */
/* Scoped to links INSIDE cards (.ed-card / .ed-cards) so true inline links
   elsewhere (terms, "change workshop", etc.) stay as text links. */
.ed-card .ed-link,
.ed-cards .ed-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px;
	padding: 0 16px !important;
	border: 1.5px solid var(--ed-ink-4) !important;
	border-radius: var(--ed-radius-field) !important;
	background: var(--ed-surface) !important;
	color: var(--ed-ink) !important;
	font: 600 13px/1 var(--ed-font-sans) !important;
	text-decoration: none !important;
	transition: background .12s, border-color .12s;
}

.ed-card .ed-link:hover,
.ed-cards .ed-link:hover {
	background: var(--ed-surface-2) !important;
}

/* First action in a card reads as the primary one → accent fill */
.ed-card .ed-link:first-of-type,
.ed-cards .ed-link:first-of-type {
	background: var(--ed-accent) !important;
	border-color: var(--ed-accent) !important;
	color: #fff !important;
}

.ed-card .ed-link:first-of-type:hover,
.ed-cards .ed-link:first-of-type:hover {
	filter: brightness(0.93);
	background: var(--ed-accent) !important;
}

[data-theme="dark"] .ed-card .ed-link:first-of-type,
[data-theme="dark"] .ed-cards .ed-link:first-of-type {
	color: #0a0a0a !important;
}

/* ── Primary buttons → warm green accent (Direction C identity) ────────── */
/* Mirrors the app's known primary-button selectors. Ghost/back buttons are
   intentionally excluded. Delete this block to keep buttons black. */
.ed-btn--primary,
.create-booking-btn,
.add-booking-btn,
.save-btn:not(.back-btn),
.save-btn.primary,
.signin-button,
.signup-button {
	background: var(--ed-accent) !important;
	border-color: var(--ed-accent) !important;
	color: #fff !important;
}

.ed-btn--primary:hover,
.create-booking-btn:hover,
.add-booking-btn:hover,
.save-btn:not(.back-btn):hover,
.save-btn.primary:hover,
.signin-button:hover,
.signup-button:hover {
	filter: brightness(0.93);
}

[data-theme="dark"] .ed-btn--primary,
[data-theme="dark"] .create-booking-btn,
[data-theme="dark"] .add-booking-btn,
[data-theme="dark"] .save-btn:not(.back-btn),
[data-theme="dark"] .save-btn.primary,
[data-theme="dark"] .signin-button,
[data-theme="dark"] .signup-button {
	background: var(--ed-accent) !important;
	border-color: var(--ed-accent) !important;
	color: #0a0a0a !important;
}