/* ============================================================
   EduJA — online signing: the on-screen form drawn by js/esign-form.js.
   Used on the signing page (light) and in Admin > E-Sign (dark), so
   colours come from a few variables each page can set.
   ============================================================ */
.esf {
    --esf-text: #1f2a24;
    --esf-muted: #5d6b62;
    --esf-line: #cfdad3;
    --esf-field-bg: #ffffff;
    --esf-accent: #006633;
    color: var(--esf-text);
}
.esf-section {
    margin: 22px 0 8px;
    font-size: 0.95rem;
    color: var(--esf-accent);
    border-bottom: 1px solid var(--esf-line);
    padding-bottom: 4px;
}
.esf-section:first-child { margin-top: 0; }
.esf-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 16px; }
.esf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.esf-wide, .esf-group, .esf-row, .esf-tick { grid-column: 1 / -1; }
.esf-label { font-size: 0.82rem; font-weight: 600; color: var(--esf-muted); }
.esf-req { color: #c0392b; font-weight: 700; }
.esf input[type="text"], .esf input[type="email"], .esf input[type="date"], .esf select, .esf textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.95rem;
    padding: 9px 10px;
    border: 1px solid var(--esf-line);
    border-radius: 8px;
    background: var(--esf-field-bg);
    color: var(--esf-text);
}
.esf input:focus, .esf select:focus, .esf textarea:focus { outline: 2px solid var(--esf-accent); outline-offset: 1px; }
.esf-group { border: 1px solid var(--esf-line); border-radius: 8px; padding: 8px 12px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.esf-group legend { font-size: 0.82rem; font-weight: 600; color: var(--esf-muted); padding: 0 4px; }
.esf-choice { display: flex; align-items: flex-start; gap: 8px; font-size: 0.92rem; line-height: 1.35; cursor: pointer; }
.esf-choice input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--esf-accent); }
.esf-row { border-bottom: 1px dashed var(--esf-line); padding-bottom: 10px; }
.esf-row-title { font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; }
.esf-row-parts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.esf-row-parts input[type="text"] { flex: 1 1 150px; width: auto; }
.esf-row-parts input.esf-narrow { flex: 0 1 130px; }
.esf-row-tick { flex: 0 0 auto; margin-right: 6px; }

/* A required box that was left empty (set by markMissing in js/esign-form.js) */
.esf-missing { outline: 2px solid #c0392b; outline-offset: 4px; border-radius: 6px; background: rgba(192, 57, 43, 0.08); }
.esf-missing input[type="text"], .esf-missing input[type="email"], .esf-missing input[type="date"], .esf-missing select, .esf-missing textarea { border-color: #c0392b; }