/* ═══════════════════════════════════════════════════════════════════════════
   forms.css — Alignment, spacing & responsive polish for django-forms-workflows
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Side-by-side field alignment (CSS Grid + subgrid) ─────────────────
   When two or more fields sit in a .row.fields-aligned-row we switch from
   Bootstrap's flexbox row to a CSS Grid so that labels, inputs and help
   text each share a common row track across columns.  This guarantees
   perfect horizontal alignment regardless of label wrapping or the
   presence / absence of help text in any column.

   Grid row tracks:  1 = label  |  2 = input  |  3 = help text / errors
   ──────────────────────────────────────────────────────────────────────── */

/* 1. The row becomes a CSS Grid; columns flow automatically */
@media (min-width: 768px) {
    .row.fields-aligned-row {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        grid-template-rows: auto auto auto;
        column-gap: var(--bs-gutter-x, 1.5rem);
        margin-left: 0;
        margin-right: 0;
    }

    /* 2. Each field-wrapper spans all 3 row tracks and inherits them */
    .row.fields-aligned-row > .field-wrapper {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        /* Reset Bootstrap column flex/width — grid handles sizing */
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding-left: 0;
        padding-right: 0;
    }

    /* 3. .mb-3 also inherits the 3 row tracks via subgrid */
    .row.fields-aligned-row > .field-wrapper > .mb-3 {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        margin-bottom: 0 !important;  /* grid gap handles spacing */
    }

    /* 4. Labels sit at the bottom of their row-track so short labels
       align with the bottom of taller (wrapping) labels. */
    .row.fields-aligned-row > .field-wrapper > .mb-3 > label {
        align-self: end;
    }
}

/* ── Consistent field spacing ────────────────────────────────────────── */

.field-wrapper {
    margin-bottom: 1rem;
}
/* Slightly more breathing room between label and input */
.field-wrapper label.form-label,
.field-wrapper label.form-check-label {
    margin-bottom: 0.375rem;
    font-weight: 500;
}
/* Help text polish */
.field-wrapper .form-text {
    font-size: 0.8125rem;
    margin-top: 0.375rem;
    line-height: 1.4;
}

/* ── Responsive stacking ─────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    /* Stack side-by-side fields vertically on mobile */
    .row > [class*="col-md-"] {
        margin-bottom: 0.75rem;
    }
    /* Give the form card a tighter horizontal padding on small screens */
    .card-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ── Signature Pad ───────────────────────────────────────────────────── */

.signature-pad-wrapper {
    margin-top: 0.25rem;
}
.signature-pad-wrapper > label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.signature-pad-canvas-container {
    display: block;
    width: 100%;
    border: 2px solid #6c757d !important;
    border-radius: 0.5rem;
    background: #fafbfc;
    cursor: crosshair;
    touch-action: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.signature-pad-canvas-container:hover,
.signature-pad-canvas-container:active {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}
.signature-pad-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}
.signature-pad-buttons {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.signature-pad-help {
    font-size: 0.8125rem;
    color: #6c757d;
    margin-top: 0.375rem;
}

/* ── Signature Type mode ────────────────────────────────────────────── */

.signature-mode-toggle {
    display: flex;
}
.signature-type-controls {
    margin-bottom: 0.5rem;
}
.signature-font-options {
    margin-bottom: 0.25rem;
}
.signature-font-btn {
    min-width: 5rem;
    padding: 0.25rem 0.75rem;
}

/* ── Form submit button row ──────────────────────────────────────────── */

.form-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

/* ── Checkbox / radio alignment ──────────────────────────────────────── */

.form-check {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* ── Required field asterisk ─────────────────────────────────────────── */

.asteriskField {
    color: #dc3545;
    font-weight: 600;
    margin-left: 0.15em;
}