/* ============================================================
   GesTask — Campi di modulo Prime
   Testo, aree, scelte, interruttori, gruppi ed etichette.
   ============================================================ */

/* ── Campo di testo ─────────────────────────────────────────────── */

.p-inputtext,
.p-textarea,
.p-select,
.p-multiselect,
.p-datepicker-input {
    appearance: none;
    background: var(--p-form-field-background);
    border: 1px solid var(--p-form-field-border-color);
    border-radius: var(--p-form-field-border-radius);
    color: var(--p-form-field-color);
    font-family: inherit;
    font-size: var(--p-font-size);
    line-height: 1.5;
    padding: var(--p-form-field-padding-y) var(--p-form-field-padding-x);
    transition:
        background-color var(--p-transition-duration),
        border-color var(--p-transition-duration),
        box-shadow var(--p-transition-duration);
    width: 100%;
}

.p-inputtext:enabled:hover,
.p-textarea:enabled:hover,
.p-select:not(.p-disabled):hover,
.p-multiselect:not(.p-disabled):hover {
    border-color: var(--p-form-field-hover-border-color);
}

.p-inputtext:enabled:focus,
.p-textarea:enabled:focus,
.p-select.p-focus,
.p-select:focus-visible,
.p-multiselect.p-focus {
    border-color: var(--p-form-field-focus-border-color);
    box-shadow: var(--p-focus-ring-shadow);
    outline: none;
}

.p-inputtext::placeholder,
.p-textarea::placeholder {
    color: var(--p-form-field-placeholder-color);
}

.p-inputtext:disabled,
.p-textarea:disabled {
    background: var(--p-form-field-disabled-background);
    color: var(--p-form-field-disabled-color);
    cursor: default;
}

.p-inputtext-sm { font-size: var(--p-form-field-sm-font-size); padding: var(--p-form-field-sm-padding-y) var(--p-form-field-sm-padding-x); }
.p-inputtext-lg { font-size: var(--p-form-field-lg-font-size); padding: var(--p-form-field-lg-padding-y) var(--p-form-field-lg-padding-x); }

/* Il campo pieno rinuncia alla cornice: lo usa la ricerca dentro una barra
   di strumenti, dove una cornice in più affollerebbe la riga. */
.p-variant-filled {
    background: var(--p-form-field-filled-background);
    border-color: transparent;
}

.p-variant-filled:enabled:hover { border-color: transparent; background: var(--p-content-hover-background); }
.p-variant-filled:enabled:focus { background: var(--p-form-field-background); border-color: var(--p-form-field-focus-border-color); }

.p-textarea {
    /* Il ridimensionamento resta verticale: in orizzontale l'area uscirebbe
       dalla colonna che la contiene. */
    resize: vertical;
    min-height: 5rem;
}

.p-textarea-autoresize { overflow: hidden; resize: none; }

/* ── Stato di invalidità ────────────────────────────────────────── */

/* Il rosso non è l'unico segnale: sotto il campo compare il messaggio, e il
   campo riceve `aria-invalid`. Il colore è la conferma, non l'informazione. */
.p-inputtext.p-invalid,
.p-textarea.p-invalid,
.p-select.p-invalid,
.p-multiselect.p-invalid,
.p-inputgroup.p-invalid {
    border-color: var(--p-form-field-invalid-border-color);
}

.p-inputtext.p-invalid:enabled:focus,
.p-textarea.p-invalid:enabled:focus,
.p-inputgroup.p-invalid:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-danger-color) 22%, transparent);
}

.p-error,
.p-invalid-feedback {
    color: var(--p-danger-emphasis-color);
    display: block;
    font-size: var(--p-font-size-sm);
    margin-top: .375rem;
}

/* Il messaggio vuoto non deve lasciare spazio bianco sotto ogni campo. */
.p-invalid-feedback:empty { display: none; }

.p-helper-text {
    color: var(--p-text-muted-color);
    display: block;
    font-size: var(--p-font-size-sm);
    margin-top: .375rem;
}

/* ── Etichette ──────────────────────────────────────────────────── */

.p-field {
    display: block;
    margin-bottom: 1.125rem;
}

.p-field-label,
label.p-label {
    color: var(--p-text-color);
    display: block;
    font-size: var(--p-font-size-sm);
    font-weight: 600;
    margin-bottom: .375rem;
}

.p-field-required::after {
    color: var(--p-danger-color);
    content: ' *';
}

/* L'etichetta fluttuante: sta dentro il campo finché il campo è vuoto e non
   ha la messa a fuoco, poi risale sul bordo. Vale su `:focus-within` e su
   `:not(:placeholder-shown)`, quindi il campo deve avere un placeholder
   (anche uno spazio) perché la seconda condizione possa essere falsa. */
.p-floatlabel {
    display: block;
    position: relative;
}

.p-floatlabel > label {
    color: var(--p-form-field-placeholder-color);
    left: var(--p-form-field-padding-x);
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all var(--p-transition-duration) ease;
}

.p-floatlabel > input:focus ~ label,
.p-floatlabel > input:not(:placeholder-shown) ~ label,
.p-floatlabel > textarea:focus ~ label,
.p-floatlabel > textarea:not(:placeholder-shown) ~ label,
.p-floatlabel > .p-select.p-filled ~ label {
    background: var(--p-form-field-background);
    color: var(--p-primary-color);
    font-size: var(--p-font-size-xs);
    font-weight: 600;
    padding: 0 .25rem;
    top: 0;
    transform: translateY(-50%);
}

/* ── Campo con icona ────────────────────────────────────────────── */

.p-iconfield {
    display: block;
    position: relative;
}

.p-iconfield > .p-inputicon {
    color: var(--p-form-field-icon-color);
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.p-iconfield > .p-inputicon:first-child { left: var(--p-form-field-padding-x); }
.p-iconfield > .p-inputicon:last-child  { right: var(--p-form-field-padding-x); }

.p-iconfield > .p-inputicon:first-child ~ .p-inputtext { padding-left: 2.25rem; }
.p-iconfield:has(> .p-inputicon:last-child) > .p-inputtext { padding-right: 2.25rem; }

/* ── Gruppo di campi ────────────────────────────────────────────── */

/* La cornice appartiene al gruppo, non ai suoi pezzi: così l'anello di
   messa a fuoco circonda il gruppo intero invece del solo campo interno,
   che è quello che l'occhio si aspetta quando i due sembrano un elemento. */
.p-inputgroup {
    align-items: stretch;
    border: 1px solid var(--p-form-field-border-color);
    border-radius: var(--p-form-field-border-radius);
    display: flex;
    overflow: hidden;
    transition: border-color var(--p-transition-duration), box-shadow var(--p-transition-duration);
    width: 100%;
}

.p-inputgroup:focus-within {
    border-color: var(--p-form-field-focus-border-color);
    box-shadow: var(--p-focus-ring-shadow);
}

.p-inputgroup > .p-inputtext,
.p-inputgroup > .p-textarea,
.p-inputgroup > .p-select {
    border: 0;
    border-radius: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.p-inputgroup > .p-inputtext:focus,
.p-inputgroup > .p-select.p-focus {
    box-shadow: none;
}

.p-inputgroup-addon {
    align-items: center;
    background: var(--p-content-alt-background);
    border: 0;
    color: var(--p-text-muted-color);
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0 .75rem;
}

.p-inputgroup > .p-button {
    border-radius: 0;
    border-width: 0;
    flex: 0 0 auto;
}

/* ── Casella di spunta ──────────────────────────────────────────── */

/* La casella disegnata è un `<div>`; l'input vero resta nel documento,
   trasparente e sovrapposto, perché la tastiera e i lettori di schermo
   devono trovare un controllo nativo, non una finzione di stile. */
.p-checkbox,
.p-radiobutton {
    display: inline-flex;
    height: 1.25rem;
    position: relative;
    vertical-align: middle;
    width: 1.25rem;
}

.p-checkbox > input,
.p-radiobutton > input {
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.p-checkbox-box,
.p-radiobutton-box {
    align-items: center;
    background: var(--p-form-field-background);
    border: 1.5px solid var(--p-form-field-border-color);
    border-radius: var(--p-border-radius-xs);
    color: var(--p-primary-contrast-color);
    display: flex;
    height: 100%;
    justify-content: center;
    transition:
        background-color var(--p-transition-fast),
        border-color var(--p-transition-fast),
        box-shadow var(--p-transition-fast);
    width: 100%;
}

.p-radiobutton-box { border-radius: 50%; }

.p-checkbox > input:hover ~ .p-checkbox-box,
.p-radiobutton > input:hover ~ .p-radiobutton-box {
    border-color: var(--p-form-field-hover-border-color);
}

.p-checkbox > input:focus-visible ~ .p-checkbox-box,
.p-radiobutton > input:focus-visible ~ .p-radiobutton-box {
    border-color: var(--p-form-field-focus-border-color);
    box-shadow: var(--p-focus-ring-shadow);
}

.p-checkbox > input:checked ~ .p-checkbox-box,
.p-radiobutton > input:checked ~ .p-radiobutton-box {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
}

.p-checkbox > input:disabled ~ .p-checkbox-box,
.p-radiobutton > input:disabled ~ .p-radiobutton-box {
    background: var(--p-form-field-disabled-background);
    border-color: var(--p-form-field-border-color);
    opacity: .6;
}

/* Il segno di spunta è disegnato con due bordi ruotati invece che con un
   carattere: nessuna dipendenza dal caricamento del font delle icone, e la
   forma resta nitida a qualsiasi ingrandimento. */
.p-checkbox-icon {
    border-color: currentColor;
    border-style: solid;
    border-width: 0 2px 2px 0;
    height: .55rem;
    opacity: 0;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: opacity var(--p-transition-fast);
    width: .3rem;
}

.p-checkbox > input:checked ~ .p-checkbox-box .p-checkbox-icon { opacity: 1; }

/* Lo stato intermedio di una casella che governa un elenco parzialmente
   selezionato: una barretta, non una spunta. */
.p-checkbox > input:indeterminate ~ .p-checkbox-box {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
}

.p-checkbox > input:indeterminate ~ .p-checkbox-box .p-checkbox-icon {
    border-width: 0 0 2px 0;
    height: 0;
    opacity: 1;
    transform: none;
    width: .55rem;
}

.p-radiobutton-icon {
    background: currentColor;
    border-radius: 50%;
    height: .45rem;
    transform: scale(0);
    transition: transform var(--p-transition-fast);
    width: .45rem;
}

.p-radiobutton > input:checked ~ .p-radiobutton-box .p-radiobutton-icon { transform: scale(1); }

/* L'etichetta accanto alla casella è cliccabile e allineata alla prima riga
   di testo, non centrata: su etichette di due righe il centro sbanda. */
.p-checkbox-group,
.p-radiobutton-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.p-check-label {
    align-items: flex-start;
    cursor: pointer;
    display: inline-flex;
    gap: .5rem;
    line-height: 1.25rem;
}

.p-check-label > span { flex: 1 1 auto; }

/* ── Interruttore ───────────────────────────────────────────────── */

.p-toggleswitch {
    display: inline-flex;
    height: 1.5rem;
    position: relative;
    vertical-align: middle;
    width: 2.625rem;
}

.p-toggleswitch > input {
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.p-toggleswitch-slider {
    background: var(--p-surface-300);
    border-radius: var(--p-border-radius-full);
    height: 100%;
    transition: background-color var(--p-transition-duration), box-shadow var(--p-transition-duration);
    width: 100%;
}

[data-bs-theme='dark'] .p-toggleswitch-slider { background: var(--p-surface-600); }

.p-toggleswitch-handle {
    background: #ffffff;
    border-radius: 50%;
    box-shadow: var(--p-shadow-sm);
    height: 1.125rem;
    left: .1875rem;
    position: absolute;
    top: .1875rem;
    transition: transform var(--p-transition-duration) ease;
    width: 1.125rem;
}

.p-toggleswitch > input:checked ~ .p-toggleswitch-slider { background: var(--p-primary-color); }
.p-toggleswitch > input:checked ~ .p-toggleswitch-handle { transform: translateX(1.125rem); }
.p-toggleswitch > input:focus-visible ~ .p-toggleswitch-slider { box-shadow: var(--p-focus-ring-shadow); }
.p-toggleswitch > input:disabled ~ .p-toggleswitch-slider { opacity: .6; }

/* ── Elenco a discesa ───────────────────────────────────────────── */

/* `.p-select` veste sia il `<select>` nativo sia il pulsante del componente
   avanzato: la stessa altezza e la stessa cornice, così una pagina che
   mescola i due non mostra due altezze diverse sulla stessa riga. */
.p-select {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    padding-right: 2rem;
    position: relative;
    text-align: left;
}

/* La freccia del nativo è disegnata dal sistema operativo e cambia da
   piattaforma a piattaforma: la sostituiamo con una nostra, in SVG dentro
   l'immagine di sfondo, uguale ovunque. */
select.p-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .625rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
}

select.p-select::-ms-expand { display: none; }

.p-select-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-select-label.p-placeholder { color: var(--p-form-field-placeholder-color); }

.p-select-dropdown-icon {
    color: var(--p-form-field-icon-color);
    pointer-events: none;
    position: absolute;
    right: .75rem;
    transition: transform var(--p-transition-duration);
}

.p-select[aria-expanded='true'] .p-select-dropdown-icon { transform: rotate(180deg); }

/* Il pannello delle opzioni è condiviso da elenco a discesa, scelta
   multipla e completamento automatico: una sola dichiarazione di elenco. */
.p-select-overlay,
.p-multiselect-overlay,
.p-autocomplete-overlay {
    background: var(--p-overlay-background);
    border: 1px solid var(--p-overlay-border-color);
    border-radius: var(--p-overlay-select-border-radius);
    box-shadow: var(--p-overlay-shadow);
    color: var(--p-overlay-color);
    display: none;
    max-height: 16rem;
    min-width: 100%;
    overflow-y: auto;
    padding: var(--p-list-padding);
    position: absolute;
    z-index: 1200;
}

.p-select-overlay.p-connected-overlay-visible,
.p-multiselect-overlay.p-connected-overlay-visible,
.p-autocomplete-overlay.p-connected-overlay-visible {
    animation: p-slide-down var(--p-transition-duration) ease;
    display: block;
}

.p-select-option,
.p-multiselect-option,
.p-autocomplete-option {
    align-items: center;
    border-radius: var(--p-list-option-border-radius);
    color: var(--p-list-option-color);
    cursor: pointer;
    display: flex;
    gap: .5rem;
    padding: var(--p-list-option-padding);
}

/* Il suggerimento del completamento automatico porta due righe — quello
   che si sceglie e come riconoscerlo — quindi si impila invece di
   affiancare. */
.p-autocomplete-option {
    align-items: flex-start;
    flex-direction: column;
    gap: .0625rem;
}

.p-autocomplete { display: block; position: relative; }

.p-select-option:hover,
.p-select-option.p-focus,
.p-multiselect-option:hover,
.p-multiselect-option.p-focus,
.p-autocomplete-option.p-focus {
    background: var(--p-list-option-focus-background);
    color: var(--p-content-hover-color);
}

.p-select-option.p-selected,
.p-multiselect-option.p-selected {
    background: var(--p-list-option-selected-background);
    color: var(--p-list-option-selected-color);
    font-weight: 600;
}

.p-select-option-group {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    padding: .5rem .75rem .25rem;
    text-transform: uppercase;
}

.p-select-empty-message {
    color: var(--p-text-muted-color);
    padding: .75rem;
    text-align: center;
}

/* Il campo di filtro dentro il pannello resta ancorato in alto mentre
   l'elenco scorre: cercando fra cinquanta voci non deve sparire. */
.p-select-filter-container {
    background: var(--p-overlay-background);
    padding: .25rem .25rem .5rem;
    position: sticky;
    top: calc(var(--p-list-padding) * -1);
    z-index: 1;
}

/* ── Scelta multipla ────────────────────────────────────────────── */

.p-multiselect {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    min-height: calc(var(--p-form-field-padding-y) * 2 + 1.5rem + 2px);
    padding-right: 2rem;
    position: relative;
}

.p-multiselect-chip {
    align-items: center;
    background: var(--p-content-deep-background);
    border-radius: var(--p-border-radius-sm);
    display: inline-flex;
    font-size: var(--p-font-size-sm);
    gap: .25rem;
    padding: .125rem .375rem;
}

.p-multiselect-chip-remove {
    background: none;
    border: 0;
    color: var(--p-text-muted-color);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.p-multiselect-chip-remove:hover { color: var(--p-danger-color); }

/* ── Cursore ────────────────────────────────────────────────────── */

.p-slider {
    appearance: none;
    background: var(--p-surface-200);
    border-radius: var(--p-border-radius-full);
    height: .375rem;
    width: 100%;
}

[data-bs-theme='dark'] .p-slider { background: var(--p-surface-700); }

.p-slider::-webkit-slider-thumb {
    appearance: none;
    background: var(--p-primary-color);
    border: 2px solid var(--p-content-background);
    border-radius: 50%;
    box-shadow: var(--p-shadow-sm);
    cursor: pointer;
    height: 1.125rem;
    width: 1.125rem;
}

.p-slider::-moz-range-thumb {
    background: var(--p-primary-color);
    border: 2px solid var(--p-content-background);
    border-radius: 50%;
    box-shadow: var(--p-shadow-sm);
    cursor: pointer;
    height: 1.125rem;
    width: 1.125rem;
}

/* ── Selettore di colore ────────────────────────────────────────── */

.p-colorpicker-preview {
    border: 1px solid var(--p-form-field-border-color);
    border-radius: var(--p-border-radius-md);
    cursor: pointer;
    height: 2.375rem;
    padding: .1875rem;
    width: 2.75rem;
}

/* ── Riepilogo degli errori di modulo ───────────────────────────── */

.p-error-summary {
    background: var(--p-danger-subtle-color);
    border-left: 3px solid var(--p-danger-color);
    border-radius: var(--p-border-radius-md);
    color: var(--p-danger-emphasis-color);
    margin-bottom: 1rem;
    padding: .75rem 1rem;
}

.p-error-summary ul { margin: 0; padding-left: 1.25rem; }