/* ============================================
   COMPONENT - FORMS
   ============================================
   Augments daisyUI's .input/.select/.label/.checkbox classes (same
   names Bulma used before daisyUI, reused by daisyUI - so these rules
   still apply) with a more visible focus ring. Bulma's .control/
   .textarea/.radio/.message/.form-group/.label.required are no longer
   used in the templates, and have been removed.
   ============================================ */

.input {
    transition: border-color 0.2s ease-in-out;
}

.input:focus {
    border-color: var(--app-color-primary);
}

.input:focus-visible,
.select:focus-visible {
    outline: 3px solid var(--app-color-primary);
    outline-offset: 0;
    /* rgb(32, 182, 152) = the brand's soft teal/green. */
    box-shadow: 0 0 0 3px rgba(32, 182, 152, 0.2);
}

.select {
    width: 100%;
}

.checkbox {
    margin-bottom: 0.5rem;
}

.label {
    font-weight: 500;
    margin-bottom: 0.25rem;
    display: block;
}

.help {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}