/* ============================================================
   GesTask — Dashboard
   Righe di task, elenchi scorrevoli e fasce di metriche.
   ============================================================

   Le quattro dashboard portavano ciascuna un blocco `registerCss` con le
   stesse sei regole ricopiate, e già divergevano: due dichiaravano la barra
   di scorrimento dell'elenco, due no. Ora le regole stanno qui, in un file
   che il gestore degli asset pubblica con gli altri, e le pagine non
   incorporano più fogli di stile. */

/* ── Elenco scorrevole ──────────────────────────────────────────── */

/* L'elenco mostra tutte le task aperte: senza un'altezza massima la pagina
   diventerebbe lunghissima e le due colonne accanto perderebbero
   allineamento. Oltre la soglia scorre da sé, e `overscroll-behavior`
   impedisce che arrivato in fondo lo scorrimento prosegua sulla pagina. */
.dash-scroller {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: min(60vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .375rem;
}

@media (max-width: 991.98px) {
    .dash-scroller { max-height: 70vh; }
}

/* ── Riga di task ───────────────────────────────────────────────── */

.dash-task {
    align-items: center;
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    color: inherit;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    justify-content: space-between;
    padding: .75rem .875rem;
    position: relative;
    text-decoration: none;
    transition: border-color var(--p-transition-fast), background-color var(--p-transition-fast);
}

.dash-task:hover {
    background: var(--p-content-hover-background);
    border-color: var(--p-primary-border-color);
    color: inherit;
}

.dash-task-main { flex: 1 1 16rem; min-width: 0; }

.dash-task-title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .1875rem;
}

.dash-task-title {
    color: var(--p-text-emphasis-color);
    font-weight: 600;
    text-decoration: none;
}

.dash-task-meta {
    align-items: center;
    color: var(--p-text-muted-color);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--p-font-size-sm);
    gap: .375rem;
}

.dash-task-meta i { line-height: 1; }

.dash-task-side {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: .5rem;
}

/* La data di scadenza: smorzata finché è nel futuro, evidenziata quando è
   passata. Lo stato scaduto non è dato dal solo colore — l'icona cambia e
   il testo resta leggibile in scala di grigi. */
.dash-task-due {
    align-items: center;
    color: var(--p-text-muted-color);
    display: inline-flex;
    font-size: var(--p-font-size-sm);
    gap: .3125rem;
    white-space: nowrap;
}

.dash-task-due-overdue {
    background: var(--p-danger-subtle-color);
    border-radius: var(--p-border-radius-sm);
    color: var(--p-danger-emphasis-color);
    font-weight: 700;
    padding: .125rem .375rem;
}

.dash-task-due-none { opacity: .55; }

/* Il pulsante di completamento sta sopra l'area cliccabile stesa dal
   titolo: senza `position: relative` finirebbe sotto e il clic aprirebbe
   la task invece di chiuderla. */
.dash-task-action {
    position: relative;
    z-index: 2;
}

/* ── Task completata ────────────────────────────────────────────── */

.dash-task-done { border-color: var(--p-success-border-color); }
.dash-task-done .dash-task-title { color: var(--p-success-emphasis-color); }

/* ── Fascia di metriche ─────────────────────────────────────────── */

/* La griglia dei riquadri di cifra. Si adatta da sola: quattro colonne su
   schermo largo, due su tavoletta, una su telefono, senza punti di rottura
   dichiarati. */
.dash-metrics {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ── Riquadro di richiamo ───────────────────────────────────────── */

.dash-callout {
    background: linear-gradient(135deg, var(--p-primary-subtle-color) 0%, transparent 75%);
    border: 1px solid var(--p-primary-border-color);
    border-radius: var(--p-content-border-radius);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    height: 100%;
    justify-content: center;
    padding: 1.5rem;
}

.dash-callout-title {
    color: var(--p-primary-emphasis-color);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.dash-callout p { margin: 0; }

/* ── Sezione di salute del sistema ──────────────────────────────── */

.dash-gauge { margin-bottom: 1.25rem; }
.dash-gauge:last-child { margin-bottom: 0; }

.dash-gauge-head {
    align-items: baseline;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .375rem;
}

.dash-gauge-label {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    font-weight: 600;
}

.dash-gauge-value { font-weight: 800; }

.dash-gauge-note {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    margin-top: .375rem;
}

/* ── Le mie task ────────────────────────────────────────────────── */

/* Le schede dello stato sono collegamenti e non schede in pagina: ognuna è
   un elenco impaginato a sé, con i suoi filtri nell'indirizzo. */
.my-tasks-groups {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.my-tasks-group {
    align-items: center;
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    color: var(--p-text-color);
    display: inline-flex;
    font-weight: 600;
    gap: .375rem;
    padding: .375rem .75rem;
    text-decoration: none;
}

.my-tasks-group:hover { border-color: var(--p-primary-border-color); color: inherit; }

.my-tasks-group.active {
    background: var(--p-primary-subtle-color);
    border-color: var(--p-primary-border-color);
    color: var(--p-primary-emphasis-color);
}

.my-tasks-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Parte della pagina in aggiornamento (my-tasks.js, dashboard.js). */
.my-tasks [aria-busy="true"],
.dashboard-index [aria-busy="true"] {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s;
}

.my-tasks-alert { box-shadow: 0 0 0 1px var(--p-danger-border-color); }

.my-task-key {
    color: var(--p-text-muted-color);
    font-family: var(--p-font-family-mono, monospace);
    font-size: var(--p-font-size-sm);
    font-weight: 700;
}

.my-task-tag { font-size: .75rem; padding: 0 .5rem; }

/* L'anteprima della descrizione su una riga: la card della bacheca ne
   concede di più, ma qui allungherebbe ogni riga dell'elenco. */
.task-card-description.my-task-description {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-task .task-card-chips,
.my-tasks-card .task-card-chips { margin: .25rem 0; }

/* Etichette, stati, conteggi e persone stanno sopra l'area cliccabile stesa
   dal titolo: il clic sull'etichetta filtra, gli altri hanno un suggerimento. */
.my-task-tag,
.my-task-parent,
.my-task .task-card-chips > *,
.my-tasks-card .task-card-chips > *,
.my-task .task-card-count,
.my-tasks-card .task-card-count,
.my-task .task-assignees,
.my-tasks-card .task-assignees {
    position: relative;
    z-index: 2;
}

.my-task-progress {
    align-items: center;
    color: var(--p-text-muted-color);
    display: flex;
    font-size: .75rem;
    gap: .5rem;
    margin-top: .375rem;
    max-width: 14rem;
}

.my-task-progress .p-progressbar { flex: 1 1 auto; }

/* Menu dello stato, maniglia e frecce stanno sopra l'area cliccabile stesa
   dal titolo, come il pulsante di completamento. */
.my-task-status,
.my-task-order {
    position: relative;
    z-index: 2;
}

.my-task-status { max-width: 11rem; width: auto; }

.my-task-order {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: -.25rem 0;
}

.my-task-handle {
    color: var(--p-text-muted-color);
    cursor: grab;
    line-height: 1;
    padding: .125rem;
}

.my-task-step {
    color: var(--p-text-muted-color);
    line-height: 1;
    padding: 0 .25rem;
}

/* Senza le freccette del campo numerico: ogni clic salverebbe un posto. */
.my-task-position {
    -moz-appearance: textfield;
    appearance: textfield;
    margin-top: .25rem;
    padding: .125rem .25rem;
    text-align: center;
    width: 3rem;
}

.my-task-position::-webkit-inner-spin-button,
.my-task-position::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.my-task.is-dragging { opacity: .5; }

/* Su schermo stretto si trascina male: restano le frecce, affiancate. */
@media (max-width: 575.98px) {
    .my-task-handle { display: none; }
    .my-task-order { flex-direction: row; }
    .my-task .dash-task-side { flex-wrap: wrap; width: 100%; }
}

/* Schede di stato a sinistra, scelta della vista a destra. */
.my-tasks-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
}

.my-tasks-views { margin-left: auto; }

.my-tasks-kanban {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    .my-tasks-kanban { grid-template-columns: 1fr; }
}

.my-tasks-column {
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 12rem;
    padding: .75rem;
    transition: border-color var(--p-transition-fast), background-color var(--p-transition-fast);
}

.my-tasks-column.is-over {
    background: var(--p-primary-subtle-color);
    border-color: var(--p-primary-border-color);
}

.my-tasks-column-head {
    align-items: center;
    display: flex;
    font-weight: 600;
    justify-content: space-between;
}

.my-tasks-column-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
}

.my-tasks-column-empty {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    margin: 0;
    padding: 1rem 0;
    text-align: center;
}

.my-tasks-card {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-md);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .5rem .625rem;
    position: relative;
}

.my-tasks-card[data-kanban-card] { cursor: grab; }
.my-tasks-card:hover { border-color: var(--p-primary-border-color); }
.my-tasks-card.is-dragging { opacity: .5; }

.my-tasks-card-foot {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
}

/* Il menu sta sopra l'area cliccabile stesa dal titolo. */
.my-tasks-card-group {
    max-width: 9rem;
    position: relative;
    width: auto;
    z-index: 2;
}

.my-tasks-boards {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.my-tasks-boards li {
    display: grid;
    gap: .25rem .75rem;
    grid-template-columns: 1fr auto;
}

.my-tasks-boards .p-progressbar { grid-column: 1 / -1; }

.my-tasks-board-name {
    color: var(--p-text-emphasis-color);
    display: flex;
    flex-direction: column;
    font-weight: 600;
    min-width: 0;
    text-decoration: none;
}

.my-tasks-board-name small { color: var(--p-text-muted-color); font-weight: 400; }

.my-tasks-board-count { font-weight: 800; }