/* =====================================================================
   forms.css — labels, controls, validation and field grouping.
   ===================================================================== */

.form-label {
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-ink-2);
}
.form-label .req { margin-left: 2px; color: var(--c-bad); }

.form-control,
.form-select {
    padding: .58rem .8rem;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--c-ink);
    background-color: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}
.form-control::placeholder { color: var(--c-ink-4); }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: #b6c2d2; }

.form-control:focus,
.form-select:focus {
    border-color: var(--c-brand);
    box-shadow: var(--ring);
}

.form-control:disabled, .form-control[readonly],
.form-select:disabled {
    background-color: var(--c-sunken);
    color: var(--c-ink-2);
    border-color: var(--c-line);
}

.form-control-lg { padding: .74rem .9rem; font-size: var(--fs-md); border-radius: var(--radius-sm); }

textarea.form-control { min-height: 84px; resize: vertical; }

/* -- Validation ------------------------------------------------------ */
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--c-bad); background-image: none; padding-right: .7rem; }
.form-control.is-invalid:focus { box-shadow: var(--ring-bad); }

.invalid-feedback {
    display: block;
    margin-top: 5px;
    font-size: var(--fs-sm);
    color: var(--c-bad);
}

.form-text {
    margin-top: 5px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--c-ink-3);
}

/* -- Checks and radios -----------------------------------------------
   The hanging indent is scoped to .form-check. Left unscoped, it drags
   every checkbox in the app off its own left edge. */
.form-check { padding-left: 1.7em; }
.form-check > .form-check-input { margin-left: -1.7em; }
.form-switch > .form-check-input { margin-left: -2.4em; }

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    border-radius: 5px;
    border-color: var(--c-line-strong);
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.form-check-input:checked { background-color: var(--c-brand); border-color: var(--c-brand); }
.form-check-input:indeterminate { background-color: var(--c-brand); border-color: var(--c-brand); }
.form-check-input:focus { border-color: var(--c-brand); box-shadow: var(--ring); }
.form-check-input:disabled { opacity: .5; }
.form-check-label { font-size: var(--fs-md); cursor: pointer; }
.form-check-input:disabled ~ .form-check-label { cursor: default; opacity: .75; }

.form-switch { padding-left: 2.4em; }
.form-switch .form-check-input { width: 2em; border-radius: var(--radius-pill); }

/* A switch sitting in a toolbar rather than in a form column. Declared
   after .form-switch so it wins on equal specificity - the whole reason
   this lives here and not in buttons.css. */
.switch-inline.form-check,
.switch-inline.form-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    margin: 0;
    font-size: var(--fs-md);
    color: var(--c-ink-2);
    cursor: pointer;
}
.switch-inline > .form-check-input { margin: 0; float: none; }

/* A checkbox with a title line and an explanation under it. */
.check-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    margin: 0;
}
.check-block + .check-block { border-top: 1px solid var(--c-line); }
.check-block .form-check-input { flex-shrink: 0; margin: 2px 0 0; float: none; }
.check-block .form-check-label { min-width: 0; }
.check-block__title { display: block; font-weight: 500; color: var(--c-ink); }
.check-block__hint  { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--c-ink-3); }

/* -- Input groups ---------------------------------------------------- */
.input-group-text {
    font-size: var(--fs-md);
    color: var(--c-ink-3);
    background: var(--c-sunken);
    border-color: var(--c-line-strong);
}

/* Trailing button (reveal password) reads as part of the field, not as
   a separate control bolted on. */
.input-group .btn-reveal {
    padding: 0 .8rem;
    color: var(--c-ink-3);
    background: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: color var(--t-fast) var(--ease);
}
.input-group .btn-reveal:hover { color: var(--c-ink); background: var(--c-sunken); }
.input-group:has(.btn-reveal) .form-control { border-right: 0; }
.input-group:focus-within .form-control,
.input-group:focus-within .btn-reveal { border-color: var(--c-brand); }
.input-group:focus-within { border-radius: var(--radius-sm); box-shadow: var(--ring); }
.input-group:focus-within .form-control { box-shadow: none; }

/* -- Fieldsets -------------------------------------------------------
   A labelled band of related fields, without nesting another card. */
.fieldset { padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--c-line); }
.fieldset:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.fieldset__legend {
    margin-bottom: 13px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}