/* ============================================================================
   DRC Student Portal - forms
   Global, not scoped, so it can restyle the Bootstrap classes already in the
   application markup (.form-control, .form-select, .btn-check) without
   rewriting every input. Everything is namespaced under .app-form so it can't
   leak into Blazor.Bootstrap widgets or the rest of the app.
   Requires portal-theme.css for the --drc-* tokens.
   ============================================================================ */

.app-form {
    --field-border: #C4D0D7;
}

/* ── Labels and fields ───────────────────────────────────────────────────── */
.app-form .form-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--drc-ink-2);
    margin-bottom: 5px;
}

.app-form .form-control,
.app-form .form-select {
    width: 100%;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--drc-ink);
    background-color: #fff;
    border: 1px solid var(--field-border);
    border-radius: var(--drc-r-sm);
    box-shadow: none;
}

    .app-form .form-control:hover,
    .app-form .form-select:hover {
        border-color: #9FB2BC;
    }

    .app-form .form-control:focus,
    .app-form .form-select:focus {
        border-color: var(--drc-navy);
        outline: 3px solid #BBD6EC;
        outline-offset: 0;
        box-shadow: none;
    }

    .app-form .form-control::placeholder {
        color: #9AAAB3;
    }

    .app-form .form-control:disabled,
    .app-form .form-select:disabled {
        background-color: #F3F6F8;
        color: var(--drc-ink-3);
    }

/* A hint under a field. */
.app-form .field-hint {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--drc-ink-3);
}

/* ── Yes / No segmented control ──────────────────────────────────────────── */
/* Restyles the existing .btn-check + <label class="btn btn-outline-primary">
   pattern into the same pill the Contact us page uses. */
.app-form .btn-check + .btn,
.app-form .btn-check + .btn-outline-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 8px 20px;
    border: 1.5px solid var(--drc-navy);
    border-radius: 999px;
    background-color: #fff;
    color: var(--drc-navy);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    margin: 0;
}

    .app-form .btn-check + .btn:hover {
        background-color: #E1E7EA;
        color: var(--drc-navy);
    }

.app-form .btn-check:checked + .btn,
.app-form .btn-check:checked + .btn-outline-primary {
    background-color: var(--drc-navy);
    border-color: var(--drc-navy);
    color: #fff;
}

.app-form .btn-check:focus-visible + .btn {
    outline: 3px solid #2F80C8;
    outline-offset: 2px;
}

/* A question with a Yes/No answer. */
.app-form .qa {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 16px 0;
    border-bottom: 1px solid var(--drc-hair-soft);
}

    .app-form .qa:last-of-type {
        border-bottom: 0;
    }

.app-form .qa-text {
    flex: 1 1 22rem;
    min-width: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--drc-ink);
    padding: 0;
    float: none;
    width: auto;
}

    .app-form .qa-text .qa-note {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        color: var(--drc-ink-3);
    }

.app-form .qa-choices {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* ── Grouped sections inside a step ──────────────────────────────────────── */
.app-form .field-group {
    border: 0;
    padding: 0;
    margin: 0 0 8px;
}

.app-form .field-group-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--drc-ink);
    margin: 22px 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--drc-hair-soft);
    float: none;
    width: auto;
}

    .app-form .field-group:first-of-type .field-group-title {
        margin-top: 0;
    }

/* ── Repeating entries (military service, licenses) ──────────────────────── */
.entry-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.entry {
    border: 1px solid var(--drc-hair);
    border-radius: var(--drc-r-md);
    padding: 14px 16px;
    background: #fff;
}

.entry-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.entry-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--drc-ink);
}

.entry-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 4px 8px;
    border-radius: var(--drc-r-sm);
    color: var(--drc-navy);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

    .entry-edit:hover {
        background: #E1E7EA;
    }

    .entry-edit .material-symbols-sharp {
        font-size: 18px;
    }

.entry-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 4px 18px;
    margin: 0;
    font-size: 14px;
}

.entry-fact-k {
    color: var(--drc-ink-3);
    font-size: 12.5px;
    display: block;
}

.entry-fact-v {
    color: var(--drc-ink);
    display: block;
}

.entry-empty {
    border: 1.5px dashed var(--drc-hair);
    border-radius: var(--drc-r-md);
    padding: 22px 16px;
    text-align: center;
    color: var(--drc-ink-2);
    font-size: 14px;
    margin-bottom: 14px;
}

/* ── Modal body reuse ────────────────────────────────────────────────────── */
.modal-form .form-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--drc-ink-2);
    margin-bottom: 5px;
}

.modal-form .form-control,
.modal-form .form-select {
    width: 100%;
    padding: 9px 11px;
    font-size: 15px;
    color: var(--drc-ink);
    border: 1px solid #C4D0D7;
    border-radius: var(--drc-r-sm);
}

    .modal-form .form-control:focus,
    .modal-form .form-select:focus {
        border-color: var(--drc-navy);
        outline: 3px solid #BBD6EC;
        box-shadow: none;
    }

.modal-form .field {
    margin-bottom: 14px;
}