/* Rachel's Place — parent enrolment form (pages/enrolment) */

.enr-req-mark { color: var(--color-accent); font-weight: 700; }

.enr-form { max-width: 56rem; margin: 0 auto; display: grid; gap: var(--space-4); }
.enr-loading { color: var(--color-text-muted); }

/* Sections */
.enr-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.enr-sec-head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-1); }
.enr-sec-head h2 { font-size: var(--text-lg); margin: 0; }
.enr-sec-no {
  flex: 0 0 auto;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-sm);
}
.enr-reg { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-faint); }
.enr-intro { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Fields */
.enr-field { display: grid; gap: 0.35rem; align-content: start; }
.enr-label { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
.enr-sublabel { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); }

.enr-input {
  width: 100%;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
}
.enr-input:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.enr-textarea { resize: vertical; min-height: 3.5rem; }
.enr-select { appearance: auto; }

/* Rows of inputs */
.enr-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); align-items: end; }
.enr-row .enr-cell.enr-w3 { grid-column: auto; }
.enr-row:has(.enr-w3) { grid-template-columns: 1fr 1fr 1fr; }
.enr-row:has(.enr-textarea) { align-items: start; }
.enr-cell { min-width: 0; }

/* Radios & checkboxes */
.enr-radios { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.enr-radio, .enr-check {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.enr-radio:has(input:checked), .enr-check:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.enr-radio input, .enr-check input {
  accent-color: var(--color-primary); margin: 0;
  width: 0.95rem; height: 0.95rem; min-height: 0;
  padding: 0; flex: 0 0 auto;
}
.enr-checks, .enr-checks-inline { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Notes */
.enr-subhead {
  font-family: var(--font-display, inherit);
  font-size: var(--text-lg);
  color: var(--color-primary);
  margin: var(--space-4) 0 0;
}

.enr-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

/* Signature pad */
.enr-sig-wrap { display: grid; gap: var(--space-2); }
#enr-sig-pad {
  width: 100%;
  max-width: 34rem;
  height: auto;
  aspect-ratio: 640 / 200;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  touch-action: none;
  cursor: crosshair;
}
.enr-sig-tools { display: flex; align-items: center; justify-content: space-between; max-width: 40rem; gap: var(--space-3); }
.enr-sig-hint { font-size: var(--text-xs); color: var(--color-text-faint); }

/* Validation */
.enr-invalid .enr-input, .enr-invalid #enr-sig-pad { border-color: #c0392b; }
.enr-invalid > .enr-label, .enr-invalid .enr-sublabel { color: #c0392b; }
.enr-error {
  background: #fdecea;
  color: #8c2318;
  border: 1px solid #f5c6c0;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}
[data-theme="dark"] .enr-error { background: rgba(192, 57, 43, 0.15); color: #f1998d; border-color: rgba(192, 57, 43, 0.4); }

/* Button size helpers (local to this page) */
.enr-review .btn-sm, .enr-form .btn-sm { padding: 0.35rem 0.85rem; font-size: var(--text-xs); }
.enr-submit-row .btn-lg { padding: 0.85rem 2.4rem; font-size: var(--text-base); }

/* Submit */
.enr-submit-row { text-align: center; padding: var(--space-4) 0 0; }
.enr-submit-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); }

/* Success panel */
.enr-done {
  max-width: 56rem;
  margin: 0 auto var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.enr-done h2 { margin-top: 0; }

/* Director / Owner review panel. Uses the normal card surface (not the dark
   band colour, which left dark text on a dark green panel). */
.enr-review {
  max-width: 56rem;
  margin: 0 auto var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.enr-review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.enr-review-head h2 { margin: 0; font-size: var(--text-xl); }
.enr-review-note { font-size: var(--text-xs); color: var(--color-text-faint); margin: var(--space-2) 0 var(--space-4); }
.enr-review-list { display: grid; gap: var(--space-3); }
.enr-review-empty { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.enr-rv-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.enr-rv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.enr-rv-meta { display: block; font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 2px; }
.enr-rv-del { color: #c0392b; }
.enr-rv-tag { display: inline-block; margin-left: var(--space-2); padding: 0.1rem 0.5rem; border-radius: 999px; font-size: var(--text-xs); background: var(--color-primary-soft); color: var(--color-primary); vertical-align: middle; }
.enr-rv-body { margin-top: var(--space-3); }
.enr-rv-detail { margin-top: var(--space-4); border-top: 1px dashed var(--color-divider); padding-top: var(--space-3); display: grid; gap: var(--space-3); }
.enr-rv-sec h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-primary); }
.enr-rv-row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-size: var(--text-sm);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--color-divider);
}
.enr-rv-row span { color: var(--color-text-muted); max-width: 60%; }
.enr-rv-row strong { text-align: right; overflow-wrap: anywhere; }
.enr-rv-sig img { max-width: 16rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

/* Inline validation messages */
.enr-err {
  margin: 0.15rem 0 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #c0392b;
  line-height: 1.35;
}
.enr-invalid .enr-radios .enr-radio, .enr-invalid .enr-checks .enr-check { border-color: #c0392b; }
.enr-error { text-align: left; }
.enr-error ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; font-weight: 500; text-align: left; list-style: disc; }
.enr-error li { text-align: left; }

/* Already submitted / form closed panel */
.enr-status {
  max-width: 46rem;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.enr-status h2 { margin: 0; font-size: var(--text-xl); }
.enr-status p { margin: 0; }
.enr-status-note { font-size: var(--text-xs); color: var(--color-text-faint); }
.enr-done .enr-status-note { margin-top: var(--space-3); }

/* Submissions page (Director & Owner) */
.sub-wrap { padding-top: var(--space-6); padding-bottom: var(--space-16); }
.sub-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.sub-search { flex: 1 1 20rem; max-width: 30rem; }
.sub-search-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.sub-search-field { position: relative; display: flex; align-items: center; }
.sub-search-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--color-text-faint);
  pointer-events: none;
}
.sub-search-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem 0.55rem 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.sub-search-input::placeholder { color: var(--color-text-faint); }
.sub-search-input:hover { border-color: var(--color-primary); }
.sub-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.sub-search-field:focus-within .sub-search-icon { color: var(--color-primary); }
.sub-msg { font-size: var(--text-sm); margin: 0 0 var(--space-3); min-height: 1.4em; }
.sub-msg.is-error { color: #c0392b; font-weight: 600; }
.sub-msg.is-ok { color: var(--color-primary); font-weight: 600; }
.sub-card .btn-row { flex-wrap: wrap; gap: var(--space-2); }
.sub-sig { max-width: 16rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

/* Delete confirmation dialog (type DELETE) */
.sub-del-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.5);
  animation: sub-del-fade 0.14s ease;
}
@keyframes sub-del-fade { from { opacity: 0; } to { opacity: 1; } }
.sub-del-box {
  width: min(30rem, 100%);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  padding: var(--space-6);
}
.sub-del-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: #c0392b; }
.sub-del-lede { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text); }
.sub-del-label { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.sub-del-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sub-del-input:focus {
  outline: none;
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}
.sub-del-error { margin: var(--space-2) 0 0; min-height: 1.2em; font-size: var(--text-xs); color: #c0392b; font-weight: 600; }
.sub-del-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }
.sub-del-confirm {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.sub-del-confirm:hover:not([disabled]) { background: #a93226; border-color: #a93226; }
.sub-del-confirm[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Mobile */
@media (max-width: 640px) {
  .enr-row, .enr-row:has(.enr-w3) { grid-template-columns: 1fr; }
  .enr-section { padding: var(--space-4); }
  .enr-rv-row { flex-direction: column; gap: 2px; }
  .enr-rv-row span { max-width: none; }
  .enr-rv-row strong { text-align: left; }
}

@media (max-width: 640px) {
  .enr-status { padding: var(--space-4); }
  .sub-toolbar { flex-direction: column; align-items: stretch; }
  /* In column direction the 20rem flex-basis becomes a height — reset it */
  .sub-search { flex: 0 0 auto; max-width: none; }
  .sub-toolbar .btn-row { flex-wrap: wrap; }
  .sub-toolbar .btn-row .btn { flex: 1 1 8rem; justify-content: center; }
  .sub-card .btn-row .btn { flex: 1 1 auto; }
  .sub-del-box { padding: var(--space-5); border-radius: var(--radius-md, 12px); }
  .sub-del-actions { flex-direction: column-reverse; gap: var(--space-2); }
  .sub-del-actions .btn { width: 100%; justify-content: center; }
  .sub-del-input { font-size: 1rem; }
}

/* ---------- Address autocomplete ---------- */
.enr-ac-list {
  position: absolute;
  z-index: 60;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 17rem;
  overflow-y: auto;
}
.enr-ac-item {
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.enr-ac-item .enr-ac-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.enr-ac-item.is-active,
.enr-ac-item:hover {
  background: var(--color-primary-soft);
}
.enr-ac-note {
  padding: 0.35rem 0.65rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------- Step wizard ---------- */
.enr-progress {
  position: sticky;
  top: var(--space-2);
  z-index: 5;
  margin-top: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.enr-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.enr-progress-title {
  font-weight: 700;
  color: var(--color-primary-ink);
  font-size: var(--text-base);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.enr-progress-count {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.enr-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-surface-3);
  overflow: hidden;
}
.enr-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}
.enr-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
}
.enr-step-chip {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.enr-step-chip:hover:not([disabled]) {
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}
.enr-step-chip.is-done {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
  color: var(--color-primary-ink);
}
.enr-step-chip.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.enr-step-chip[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.enr-wiz-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.enr-wiz-nav .btn { min-width: 8rem; justify-content: center; }
.enr-wiz-nav #enr-back[disabled] { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 640px) {
  .enr-progress { padding: var(--space-3) var(--space-4); }
  .enr-step-chip { width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
  .enr-wiz-nav .btn { flex: 1 1 auto; min-width: 0; }
}