/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        form.css
 * Path:        public/css/form.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Definisce struttura e campi dei moduli generati da ActiveForm/ActiveField.
 * Lo stile dei pulsanti (trasversale a liste, dettagli e form) vive in
 * buttons.css; lo stile base dei controlli input (input/select/textarea,
 * usato anche fuori da un <form> vero, es. da FilterBar) vive in inputs.css.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: struttura
 * form e campi generati da ActiveForm/ActiveField.
 * Le regole definiscono solo la presentazione grafica degli elementi HTML e
 * non introducono logica applicativa. Eventuali comportamenti dinamici sono
 * gestiti dai file JavaScript o dal markup prodotto dalle view PHP.
 *
 * NOTE OPERATIVE:
 * - mantenere i selettori coerenti con il markup generato da ActiveForm/ActiveField;
 * - modificare colori, spaziature e transizioni solo verificando le pagine
 *   che riutilizzano gli stessi componenti;
 * - evitare rinominazioni dei selettori senza aggiornare anche HTML e JS.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: struttura dei form e dei campi
 * ========================================================== */

/* Stile del contenitore principale del modulo. */
form {
    border-radius: var(--radius-large);
    padding: 20px;
    background-color: var(--color-bg-form);
}

/* Form «Elimina» del record (PageHelper::deleteForm()), in fondo alla scheda e sotto il modulo di
 * modifica: visivamente separata ma senza box di sfondo. Sta qui, e non in view.css, perche' form.css
 * lo carica ActiveForm e quindi arriva su entrambe le pagine. */
.view-delete-form {
    background: transparent;
    box-shadow: none;
    margin-top: 20px;
    padding: 0;
}

/* Pulsanti del form eliminazione senza margine superiore aggiuntivo. */
.view-delete-form .form-buttons {
    margin-top: 0;
}

/* Form inline usata per azioni compatte dentro liste o pulsantiere. */
form.inline-action-form {
    display: inline-block;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* Etichette generiche interne ai form. */
form label {
    margin-bottom: 6px;
    white-space: nowrap;
}

/* Marcatore visuale dei campi obbligatori. */
form .star {
    color: var(--color-danger);
    font-size: 1.1em;
    margin-left: 4px;
}

/* Riga flessibile di campi form. */
.form-box {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 12px;
}

/* Campo diretto dentro una riga form, distribuito in modo fluido. */
.form-box > .form-field {
    flex: 1 1 0;
}

/* Campo che occupa tutta la riga form. */
.form-box > .form-field.field-full-row {
    flex-basis: 100%;
}

/* Elementi form nascosti tramite attributo hidden. */
.form-box[hidden],
.form-field[hidden] {
    display: none !important;
}

/* Ultima riga form senza margine inferiore. */
.form-box:last-child {
    margin-bottom: 0;
}

/* Wrapper verticale di un singolo campo form. */
.form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

/* Stato readonly o disabilitato dei controlli dentro un campo. */
.form-field .disabled,
.form-field input[disabled],
.form-field input[readonly],
.form-field textarea[readonly],
.form-field select[disabled] {
    background-color: var(--color-bg-disabled) !important;
    color: var(--color-text-muted);
}

/* Etichetta compatta del campo form. */
.form-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-soft);
    margin-bottom: 4px;
    margin-left: 3px;
    width: auto;
}

/* Controlli form allineati alla larghezza del proprio campo. */
.form-field input,
.form-field select,
.form-field textarea {
    margin-bottom: 0 !important;
    width: 100%;
}

/* Area pulsanti di una form, allineata a destra su desktop. */
.form-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* Variante compatta dei pulsanti, allineata all'altezza di input/select.
 * Usata dalla filter bar (vedi FilterBar::reset(), il pulsante Resetta):
 * non ha il tag <form> nel markup, ma svolge la stessa funzione - un
 * insieme di campi con un pulsante che agisce su di essi - e dalla
 * finestra Dialog. Nell'area pulsanti di un modulo vale la regola qui
 * sotto. */
.form-btn {
    font-size: 12px !important;
    min-height: 35px;
}

/* Nell'area pulsanti di un modulo (Salva, Annulla, Reimposta, Elimina...)
 * i pulsanti hanno le stesse dimensioni di quelli di pagina (vedi
 * .page-actions .btn, page-actions.css): 12px maiuscolo e' piccolo da
 * leggere e da premere sul telefono. !important sul font perche'
 * .form-btn lo impone. */
.form-buttons .form-btn {
    padding: calc(0.64em + 1px) 1em calc(0.72em + 1px);
    font-size: 1.05em !important;
    line-height: 1.2;
    min-height: 0;
}

/* ==========================================================
 * SEZIONE: varianti campo
 * ========================================================== */

/* Campo che ospita uno switch booleano. */
.form-field.field-switch {
    flex: 0 0 auto;
    align-items: center;
}

/* Etichetta dello switch allineata al controllo. */
.form-field.field-switch label {
    margin-left: 0;
}

/* Campo data con larghezza compatta. */
.form-field.field-date {
    flex: 0 0 145px;
}

/* Campo numero con larghezza compatta. */
.form-field.field-number {
    flex: 0 0 78px;
}

/* Combo (select) con la larghezza della voce piu' larga: si applica a tutte
 * le combo di una riga form tranne a quelle che devono riempire lo spazio che
 * resta (queste non hanno la classe e seguono la regola di base .form-box >
 * .form-field). Stesso criterio dei filtri delle liste (.filter-box >
 * .filter-field, filterbar.css): la larghezza segue da sola la lingua e il
 * contenuto, e il tetto evita che una voce molto lunga allarghi troppo il
 * campo (il controllo la tronca con i puntini, l'elenco la mostra intera).
 * Per le combo con i badge la larghezza la da' una copia invisibile delle
 * voci (BaseInsert._enhanceBadgeSelect()). */
.form-field.field-autofit {
    flex: 0 0 auto;
    max-width: 240px;
}

.form-field.field-autofit select {
    text-overflow: ellipsis;
}

/* Campo ora con larghezza compatta. */
.form-field.field-time {
    flex: 0 0 90px;
}

/* Campo che contiene un pulsante inline. */
.form-field.field-button {
    display: flex;
    padding-bottom: 1px;
}

/* Variante compatta per pulsanti di reset. */
.form-field.reset-button {
    flex: 0 0 90px;
}

/* Campo Markdown esteso su tutta la riga. */
.form-field.field-markdown {
    flex: 1 1 100%;
}

/* Campo note esteso su tutta la riga. */
.form-field.field-notes {
    flex: 1 1 100%;
}

/* ==========================================================
 * SEZIONE: opzioni suggerite
 * ========================================================== */

/* Pannello dropdown delle opzioni suggerite per un campo. */
.field-options {
    position: absolute;
    z-index: 1;
    top: calc(100% - 18px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    background: var(--color-on-primary);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* Singola opzione selezionabile del pannello suggerimenti. */
.field-option {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 0;
    background: var(--color-on-primary);
    box-shadow: none;
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    outline: none;
    text-align: left;
    text-transform: none;
}

/* Stato hover, focus o attivo di una opzione suggerita. */
.field-option:hover,
.field-option:focus,
.field-option:focus-visible,
.field-option.is-active {
    background: var(--color-on-dark);
    border: 0;
    color: var(--color-on-primary);
    outline: none;
    transform: none;
    box-shadow: none;
}

/* ==========================================================
 * SEZIONE: adattamento responsive
 * ========================================================== */

/* Su schermi stretti i campi e i pulsanti occupano tutta la larghezza. */
@media (max-width: 640px) {
    form {
        padding: 14px;
    }

    .form-box {
        gap: 10px;
    }

    .form-field,
    .form-field.field-text,
    .form-field.field-small,
    .form-field.field-autofit,
    .form-field.field-switch,
    .form-field.field-date,
    .form-field.field-time {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .form-buttons {
        justify-content: stretch;
    }

    /* Pulsanti impilati a piena larghezza invece che affiancati e
     * allineati a destra: coerente con .form-buttons qui sopra, che
     * passa da flex-end a stretch alla stessa soglia. Selettori (non
     * .btn di per se') presi da buttons.css, dove vivono le altre
     * regole trasversali su pulsanti/button/input. */
    .form-buttons .btn,
    .form-buttons button,
    .form-buttons input[type="submit"],
    .form-buttons input[type="button"] {
        flex: 1 1 100%;
        text-align: center;
    }

    /* I pulsanti con icona (.iconic e' inline-flex) centrano icona e testo. */
    .form-buttons .iconic {
        justify-content: center;
    }
}

/* Avviso fisso dopo «Applica» (BaseInsert._restoreScrollAfterApply()): il messaggio della pagina
 * sta in alto e, tornati alla posizione di prima, sarebbe fuori vista. */
.apply-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    max-width: min(420px, calc(100vw - 40px));
    padding: 10px 16px;
    border: 1px solid var(--color-msg-success-border);
    border-left: 4px solid var(--color-msg-success-accent);
    border-radius: var(--radius-small);
    background-color: var(--color-msg-success-bg);
    color: var(--color-msg-success-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    pointer-events: none;
}