/* ==========================================================================
   HomeRP form patterns (#82)
   ==========================================================================

   Fields, help text, validation and the action row, plus the Ledger treatment of
   Bootstrap's form controls and buttons.

   Two layers on purpose:
     * `.field` / `.input` / `.field__hint` / `.field__error` — the design system's
       own classes, used by <Field> (#82) and new screens.
     * `.form-*` overrides — Bootstrap's own classes, restyled from tokens, so the
       forms already written before #82 inherit the Ledger look unedited.

   Rule: tokens only — no colour, radius or spacing literal.
   ========================================================================== */

/* --- buttons (override Bootstrap's .btn) ---------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    /* The tap-target floor. Padding alone gave ~36px, which the InteractionGuardTests
       check found (#110). */
    min-height: var(--ctl-h);
    padding: .5rem .85rem;
    border: 1px solid transparent;
    border-radius: var(--r-ctl);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

    .btn:hover {
        text-decoration: none;
    }

    .btn:disabled,
    .btn.disabled {
        opacity: .6;
        cursor: not-allowed;
    }

    /* Bootstrap's `.btn:focus-visible` outranks the global ring (app.css): it sets
       `outline: 0` and a box-shadow built from `--bs-btn-focus-shadow-rgb`, which a
       variant-less `.btn` — our `.btn-ghost` — never defines, so the shadow resolved to
       nothing and the button had NO focus indicator at all. Restore the token ring.
       Measured, not guessed: qa.py's tab sweep found it (#110). */
    .btn:focus-visible {
        outline: var(--focus-width) solid var(--accent);
        outline-offset: 2px;
        box-shadow: none;
    }

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
}

    .btn-primary:hover:not(:disabled) {
        background: var(--accent-hover);
        color: var(--on-accent);
    }

.btn-ghost {
    border-color: var(--line);
    background: transparent;
    color: var(--ink);
}

    .btn-ghost:hover:not(:disabled) {
        background: var(--accent-soft);
        color: var(--heading);
    }

.btn-link {
    padding: .25rem .4rem;
    border-color: transparent;
    background: transparent;
    color: var(--accent);
    font-weight: var(--fw-medium);
}

    .btn-link:hover:not(:disabled) {
        color: var(--accent-hover);
        text-decoration: underline;
    }

/* Bootstrap's outline buttons are still in use in a few places, so they are
   re-pointed at the tokens rather than left on Bootstrap's defaults. */
.btn-outline-secondary {
    border-color: var(--input-border);
    background: transparent;
    color: var(--ink);
}

    .btn-outline-secondary:hover:not(:disabled) {
        background: var(--accent-soft);
        color: var(--heading);
    }

.btn-outline-danger {
    border-color: var(--danger);
    background: transparent;
    color: var(--danger);
}

    .btn-outline-danger:hover:not(:disabled) {
        background: var(--badge-red-bg);
        color: var(--badge-red-fg);
    }

.btn-outline-success {
    border-color: var(--pos);
    background: transparent;
    color: var(--pos);
}

    .btn-outline-success:hover:not(:disabled) {
        background: var(--badge-green-bg);
        color: var(--badge-green-fg);
    }

/* --- fields (the design system's own classes) ----------------------------- */
.field {
    margin-bottom: .9rem;
}

.field__label {
    display: block;
    margin-bottom: .3rem;
    color: var(--heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.input {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--input-border);
    border-radius: var(--r-ctl);
    background: var(--input-bg);
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-base);
}

    .input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-ring);
    }

    .input.is-invalid {
        border-color: var(--danger);
    }

.field__hint {
    margin-top: .3rem;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.field__error {
    margin-top: .3rem;
    color: var(--danger);
    font-size: var(--fs-sm);
}

/* A row of fields: two abreast at most, collapsing to one below 640px — a phone gets a
   single column of full-width inputs and a 16px gutter (#108). */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-4);
}

/* The action row at the foot of a form. */
.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

/* On a phone it sticks to the bottom of the viewport, above the tab bar, so a long form's
   primary action is reachable without scrolling back to its foot (#108). */
@media (max-width: 1023.98px) {
    .form-actions {
        position: sticky;
        bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
        z-index: 5;
        /* Full-bleed: break out of the content gutter so the bar spans the screen. */
        margin-right: calc(-1 * var(--space-4));
        margin-left: calc(-1 * var(--space-4));
        padding: var(--space-3) var(--space-4);
        border-top: 1px solid var(--line);
        background: var(--surface);
        box-shadow: var(--elev-2);
    }

        /* The primary action takes the width; a secondary one keeps its own size. */
        .form-actions > .btn-primary,
        .form-actions > .btn-danger {
            flex: 1;
        }
}

/* A checkbox/radio with its label (e.g. the admin entitlement grid). */
.check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* The glyph may be smaller than the floor; the row is the target (#108). */
    min-height: var(--ctl-h);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
}

/* --- Bootstrap form controls (overrides) ---------------------------------- */
.form-label {
    display: block;
    margin-bottom: .3rem;
    color: var(--heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.form-control,
.form-select {
    width: 100%;
    min-height: var(--ctl-h);
    padding: .5rem .7rem;
    border: 1px solid var(--input-border);
    border-radius: var(--r-ctl);
    background: var(--input-bg);
    color: var(--ink);
    font-family: inherit;
    /* --fs-input, not --fs-base: anything under 16px makes iOS zoom the viewport
       when the field is focused (#104 pins the token; #108 wires the rest). */
    font-size: var(--fs-input);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-ring);
        outline: none;
    }

    .form-control::placeholder {
        color: var(--input-placeholder);
    }

textarea.form-control {
    min-height: 6rem;
    resize: vertical;
}

.form-text {
    margin-top: .3rem;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--accent);
}

/* Bootstrap puts the glyph at 1em in a 1.5rem row. The floor belongs on the ROW — a 44px
   hit area around a glyph the eye still reads as a checkbox (#108). */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--ctl-h);
    /* Kills Bootstrap's padding-left (1.5em, or 2.5em on .form-switch), which becomes dead
       space once the row is a flex line. */
    padding-left: 0;
}

    .form-check .form-check-input {
        flex: 0 0 auto;
        /* And its negative margin-left, which assumes that padding. The width is left to
           Bootstrap so .form-switch keeps its 2em track. */
        margin: 0;
    }

@media (max-width: 639.98px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}