/*
 * Stili applicativi Corsi per campi form e azioni specifiche di dominio.
 * La struttura generale dei form resta in form.css.
 */

form.inline-action-form .btn-generate-lessons {
    font-family: inherit;
}

/* Switch di presa visione privacy e di consenso comunicazioni: lo switch sta
 * a sinistra e il testo, una frase lunga con un eventuale link, a fianco. Il
 * testo deve andare a capo (form label del kernel ha white-space: nowrap,
 * pensato per etichette brevi) invece di uscire dallo schermo; lo switch non
 * si restringe e resta allineato alla prima riga. Il margine dello
 * switch-container e' !important nel kernel (switch.css), quindi qui anche. */
.field-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.field-consent .switch-container {
    flex: none;
    margin-bottom: 0 !important;
}

.field-consent label:not(.switch) {
    white-space: normal;
}

/* L'input nativo dello switch e' alto 0 (switch.css): il messaggio di campo obbligatorio del
 * browser si ancora al suo bordo e finisce sopra lo switch. Dandogli le dimensioni dello switch
 * (resta invisibile e senza mouse) il messaggio compare sotto. */
.field-consent label.switch input[type="checkbox"] {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
}

/* Icona di copia con una freccia accanto (i due «Copia» dell'indirizzo, corso -> lezioni e corso -> lezione):
 * le due icone stanno vicine, la freccia un po' piu' piccola. */
.icon-pair {
    display: inline-flex;
    align-items: center;
    margin-left: -4px;
}

.iconic .icon-pair .icon.icon-arrow {
    font-size: 15px;
}

form.inline-action-form .btn-generate-lessons .btn-label {
    font-weight: 600;
    line-height: 1.2;
}

/* Campo bloccato (per esempio tipo, materia e livello di un corso con iscritti): il motivo e' nel
 * suggerimento del contenitore e il controllo disattivato non intercetta il mouse, cosi' il
 * suggerimento compare passandoci sopra anche con le combo con badge, che sono pulsanti. */
.form-field.field-locked {
    cursor: not-allowed;
}

.form-field.field-locked select,
.form-field.field-locked .badge-select {
    pointer-events: none;
}

/* Le combo (select) delle form di modifica non hanno stili per singolo campo:
 * quelle che prendono la larghezza della voce piu' larga hanno la classe
 * field-autofit del kernel (form.css), quelle che riempiono la riga non
 * hanno classi. Qui restano solo i campi di testo. */
.form-field.field-username {
    flex: 1 0 250px;
}

.form-field.field-course {
    flex: 1 0 280px;
}

/* Nome della persona (campo di testo) nella form iscrizione. */
.form-field.field-teacher {
    flex: 1 0 180px;
}

/* Modulo del libro: autore, livello e titolo sulla stessa riga; l'autore
 * prende metà dello spazio del titolo. */
.form-field.field-book-author {
    flex: 1 0 140px;
}

.form-field.field-book-title {
    flex: 2 0 200px;
}

/* Nome/cognome di una persona in risalto, coerente con lo stesso
 * trattamento gia' applicato alle colonne nome nelle liste. Solo su
 * <input>: su un <select> (es. Docente/Assistente) il rendering delle
 * <option> nel menu a tendina e' controllato dal browser/SO, non dal CSS
 * della pagina - provato con :has(option:checked:not([value=""])), il
 * prompt segnaposto ("Seleziona") finiva comunque in grassetto insieme
 * alle altre opzioni una volta aperto il menu. Scartato: niente
 * grassetto sulle select. */
input.field-person-name {
    font-weight: 600;
}

.detail-item-person-name .detail-value {
    font-weight: 600;
}

@media (max-width: 640px) {
    .form-field.field-username,
    .form-field.field-teacher,
    .form-field.field-book-author,
    .form-field.field-book-title {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}

/* Collegamento di aiuto sotto i campi di una form, a destra (es. "Password
 * dimenticata?" nella pagina di accesso): una scorciatoia legata al campo,
 * non un'azione come i pulsanti della barra in basso. */
.field-help-link {
    margin: 4px 0 10px;
    font-size: 13px;
    text-align: right;
}

.field-help-link a {
    text-decoration: underline;
}