/* ============================================================
   GesTask — Aiutanti Prime
   Poche classi trasversali che i componenti non coprono.
   ============================================================

   Deliberatamente non è un sistema di utility completo. La griglia e le
   spaziature restano quelle di Bootstrap, che l'applicazione già usa in
   duecento punti: aggiungere un secondo insieme di utility con gli stessi
   nomi (`.grid`, `.col-6`, `.mb-3`) significherebbe due dichiarazioni in
   lotta per la stessa classe, e la vincitrice dipenderebbe dall'ordine di
   caricamento. Qui stanno solo le classi che Bootstrap non ha e che
   servono in più di una pagina. */

/* ── Colore del testo ───────────────────────────────────────────── */

.p-text-muted    { color: var(--p-text-muted-color); }
.p-text-emphasis { color: var(--p-text-emphasis-color); }
.p-text-primary  { color: var(--p-primary-color); }
.p-text-success  { color: var(--p-success-emphasis-color); }
.p-text-warn     { color: var(--p-warn-emphasis-color); }
.p-text-danger   { color: var(--p-danger-emphasis-color); }
.p-text-info     { color: var(--p-info-emphasis-color); }

/* ── Corpo del testo ────────────────────────────────────────────── */

.p-text-xs { font-size: var(--p-font-size-xs); }
.p-text-sm { font-size: var(--p-font-size-sm); }
.p-text-lg { font-size: 1.125rem; }

.p-font-medium   { font-weight: 500; }
.p-font-semibold { font-weight: 600; }
.p-font-bold     { font-weight: 700; }

/* L'occhiello sopra un titolo di sezione: maiuscoletto spaziato nel colore
   accento. Ripetuto su ogni pagina, quindi dichiarato una volta. */
.p-eyebrow {
    color: var(--p-primary-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Il valore mancante in un elenco di dati: corsivo smorzato, non rosso.
   Un campo non compilato non è un errore. */
.p-not-set {
    color: var(--p-text-muted-color);
    font-style: italic;
}

/* ── Troncamento ────────────────────────────────────────────────── */

/* `min-width: 0` non è un dettaglio: dentro un contenitore flessibile un
   figlio non si accorcia sotto la larghezza del proprio contenuto, e senza
   questo l'ellissi non compare mai. */
.p-truncate {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-clamp-2,
.p-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-clamp-2 { -webkit-line-clamp: 2; }
.p-clamp-3 { -webkit-line-clamp: 3; }

/* ── Superfici ──────────────────────────────────────────────────── */

.p-surface       { background: var(--p-content-background); }
.p-surface-alt   { background: var(--p-content-alt-background); }
.p-surface-deep  { background: var(--p-content-deep-background); }
.p-bordered      { border: 1px solid var(--p-content-border-color); }
.p-rounded       { border-radius: var(--p-content-border-radius); }
.p-shadow-sm     { box-shadow: var(--p-shadow-sm); }
.p-shadow-md     { box-shadow: var(--p-shadow-md); }

/* ── Pallino di colore ──────────────────────────────────────────── */

/* Identifica una colonna, una priorità o un tag. Il colore arriva da una
   variabile in linea, perché è un dato della riga e non del foglio. */
.p-dot {
    background: var(--p-dot-color, var(--p-primary-color));
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: .625rem;
    width: .625rem;
}

.p-dot-sm { height: .4375rem; width: .4375rem; }
.p-dot-lg { height: .875rem; width: .875rem; }

/* ── Tasto della tastiera ───────────────────────────────────────── */

.p-kbd {
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-xs);
    color: var(--p-text-muted-color);
    font-family: inherit;
    font-size: var(--p-font-size-xs);
    line-height: 1;
    padding: .1875rem .3125rem;
}

/* ── Salto al contenuto ─────────────────────────────────────────── */

/* Fuori schermo finché non riceve la messa a fuoco, e allora scende sopra
   la barra superiore. Non è `display: none`: un elemento non reso non è
   raggiungibile dalla tabulazione, che è esattamente il suo unico scopo. */
.p-skip-link {
    left: 1rem;
    position: fixed;
    top: -4rem;
    transition: top var(--p-transition-duration) ease;
    z-index: 1500;
}

.p-skip-link:focus-visible { top: .75rem; }

/* ── Riservato ai lettori di schermo ────────────────────────────── */

/* Presente nel documento, invisibile sullo schermo. Non `display: none`:
   quello lo toglierebbe anche ai lettori di schermo, che è l'opposto. */
.p-sr-only {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ── Fila che scorre ────────────────────────────────────────────── */

/* Una barra di azioni che su schermo stretto scorre invece di andare a
   capo: la fila che si spezza sposta in basso tutto il contenuto sotto. */
.p-scroll-row {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.p-scroll-row > * { flex: 0 0 auto; }

/* ── Entrata di pagina ──────────────────────────────────────────── */

/* Il riempimento è `backwards` e non `both` di proposito: con `both` la
   trasformazione del fotogramma finale resta applicata a animazione
   conclusa, e un elemento con `transform` diventa blocco contenitore dei
   discendenti `position: fixed` — le finestre finirebbero dentro l'area di
   lavoro, sotto la maschera e non cliccabili. */
.p-page-enter {
    animation: p-page-enter .3s ease-out backwards;
}

@keyframes p-page-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.p-stagger > * { animation: p-page-enter .3s ease-out backwards; }
.p-stagger > :nth-child(1) { animation-delay: .02s; }
.p-stagger > :nth-child(2) { animation-delay: .04s; }
.p-stagger > :nth-child(3) { animation-delay: .06s; }
.p-stagger > :nth-child(4) { animation-delay: .08s; }
.p-stagger > :nth-child(5) { animation-delay: .10s; }
.p-stagger > :nth-child(6) { animation-delay: .12s; }
.p-stagger > :nth-child(n+7) { animation-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
    .p-page-enter,
    .p-stagger > * { animation: none; }
}