/* ============================================================
   GesTask — Base Prime
   Impostazioni comuni a ogni componente della libreria.
   ============================================================ */

/* Ogni componente Prime porta `.p-component`: è qui che riceve carattere,
   corpo e interlinea, invece che in ciascun foglio di componente. Un solo
   punto da cambiare quando cambia la tipografia. */
.p-component {
    font-family: var(--p-font-family);
    font-size: var(--p-font-size);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    font-weight: 400;
    line-height: var(--p-line-height);
}

/* Lo stato disabilitato è dichiarato una volta per tutti i componenti: la
   trasparenza segnala l'indisponibilità, `pointer-events` impedisce che il
   clic arrivi comunque all'elemento sotto. */
.p-disabled,
.p-disabled * {
    cursor: default !important;
    opacity: .6;
    pointer-events: none;
    user-select: none;
}

/* Chi apre un overlay blocca lo scorrimento del documento sotto: senza
   questo, la ruota del mouse scorre la pagina invece del pannello. */
.p-overflow-hidden {
    overflow: hidden;
    /* La barra di scorrimento sparisce e il contenuto scatta di lato: la
       variabile viene misurata da JavaScript prima di nascondere. */
    padding-right: var(--p-scrollbar-width, 0);
}

/* ── Messa a fuoco ────────────────────────────────────────────────
   Un solo anello per l'intera applicazione. `:focus-visible` e non
   `:focus`: chi clicca con il mouse non deve vedere il contorno, chi
   naviga da tastiera sì. */
.p-component:focus-visible,
.p-focusable:focus-visible {
    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
    outline-offset: var(--p-focus-ring-offset);
}

/* ── Icone ───────────────────────────────────────────────────────
   Le icone sono elementi di linea con interlinea propria: senza
   l'azzeramento spingono di qualche pixel in alto il testo accanto. */
.p-icon,
.pi {
    display: inline-block;
    flex: 0 0 auto;
    font-size: var(--p-icon-size);
    line-height: 1;
    vertical-align: middle;
}

.p-icon-sm, .pi-sm { font-size: var(--p-icon-sm-size); }
.p-icon-lg, .pi-lg { font-size: var(--p-icon-lg-size); }

/* Le icone Flaticon già presenti nell'applicazione convivono con PrimeIcons:
   ricevono lo stesso allineamento, così un pulsante non cambia altezza a
   seconda della famiglia di icone che gli è capitata. */
[class^='fi-'],
[class*=' fi-'] {
    line-height: 1;
    vertical-align: middle;
}

/* ── Onda al clic ────────────────────────────────────────────────
   L'increspatura di PrimeNG: un elemento figlio che JavaScript inserisce e
   anima al clic. Il contenitore deve ritagliare, altrimenti l'onda esce
   dagli angoli arrotondati. */
.p-ripple {
    overflow: hidden;
    position: relative;
}

.p-ink {
    background: rgba(255, 255, 255, .35);
    border-radius: 100%;
    display: block;
    pointer-events: none;
    position: absolute;
    transform: scale(0);
}

.p-ink-active {
    animation: p-ink .4s linear;
}

/* Sulle superfici chiare l'onda bianca è invisibile: lì si scurisce. */
.p-button-outlined .p-ink,
.p-button-text .p-ink,
.p-ripple-dark .p-ink {
    background: rgba(15, 23, 42, .12);
}

@keyframes p-ink {
    100% { opacity: 0; transform: scale(2.5); }
}

/* ── Animazioni condivise dagli overlay ─────────────────────────── */
@keyframes p-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes p-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes p-scale-in {
    from { opacity: 0; transform: scale(.94) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes p-scale-out {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(.96) translateY(-4px); }
}

@keyframes p-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes p-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes p-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

@keyframes p-indeterminate {
    0%   { left: -35%; right: 100%; }
    60%  { left: 100%; right: -90%; }
    100% { left: 100%; right: -90%; }
}

@keyframes p-skeleton {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Chi ha chiesto meno animazioni riceve gli stessi stati, raggiunti senza
   movimento: l'informazione resta, il moto no. */
@media (prefers-reduced-motion: reduce) {
    .p-component,
    .p-component *,
    .p-component *::before,
    .p-component *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .p-ink { display: none; }
}