/* ============================================================
   GesTask — Contenitori Prime
   Schede, pannelli, sezioni richiudibili, schede a linguette e separatori.
   ============================================================ */

/* ── Scheda ─────────────────────────────────────────────────────── */

/* La scheda è la superficie di base dell'applicazione. Nel tema chiaro si
   stacca dal fondo con un bordo tenue più un'ombra appena percepibile; nel
   tema scuro il bordo fa tutto il lavoro, perché un'ombra nera su fondo
   nero non separa nulla. */
.p-card {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    box-shadow: var(--p-shadow-xs);
    color: var(--p-content-color);
    display: flex;
    flex-direction: column;
}

.p-card-header {
    border-bottom: 1px solid var(--p-content-border-color);
    padding: 1rem 1.25rem;
}

.p-card-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}

.p-card-subtitle {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    margin: .25rem 0 0;
}

.p-card-body { padding: 1.25rem; }

/* Corpo e intestazione insieme raddoppierebbero la spaziatura al centro:
   quando l'intestazione c'è, il corpo perde il proprio margine superiore. */
.p-card-header + .p-card-body { padding-top: 1rem; }

.p-card-content { flex: 1 1 auto; }

.p-card-footer {
    border-top: 1px solid var(--p-content-border-color);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding: .875rem 1.25rem;
}

.p-card-interactive {
    transition:
        border-color var(--p-transition-duration),
        box-shadow var(--p-transition-duration),
        transform var(--p-transition-duration);
}

.p-card-interactive:hover {
    border-color: var(--p-primary-border-color);
    box-shadow: var(--p-shadow-md);
    transform: translateY(-2px);
}

/* La scheda con la barretta di testa: il colore identifica la categoria
   senza spendere spazio per un'etichetta. */
.p-card-accent {
    border-top: 3px solid var(--p-card-accent, var(--p-primary-color));
}

/* ── Pannello ───────────────────────────────────────────────────── */

.p-panel {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    color: var(--p-content-color);
}

.p-panel-header {
    align-items: center;
    background: var(--p-content-alt-background);
    border-bottom: 1px solid var(--p-content-border-color);
    border-radius: calc(var(--p-content-border-radius) - 1px) calc(var(--p-content-border-radius) - 1px) 0 0;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .75rem 1rem;
}

.p-panel-title {
    font-size: var(--p-font-size);
    font-weight: 700;
    margin: 0;
}

.p-panel-icons { display: flex; gap: .25rem; }

.p-panel-content { padding: 1rem; }

.p-panel-footer {
    border-top: 1px solid var(--p-content-border-color);
    padding: .75rem 1rem;
}

/* Il pannello richiudibile: l'altezza va a zero e la spaziatura con lei,
   altrimenti resterebbe una striscia vuota alta due centesimi di rem. */
.p-panel-toggleable .p-panel-content-container {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--p-transition-duration) ease;
}

.p-panel-toggleable.p-panel-collapsed .p-panel-content-container {
    grid-template-rows: 0fr;
}

.p-panel-content-container > div { overflow: hidden; }

.p-panel-toggler {
    transition: transform var(--p-transition-duration);
}

.p-panel-collapsed .p-panel-toggler { transform: rotate(-90deg); }

/* ── Riquadro con legenda ───────────────────────────────────────── */

.p-fieldset {
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    margin: 0;
    padding: 0 1rem 1rem;
}

.p-fieldset-legend {
    color: var(--p-text-color);
    font-size: var(--p-font-size-sm);
    font-weight: 700;
    letter-spacing: .02em;
    padding: 0 .5rem;
    text-transform: uppercase;
}

/* ── Sezioni richiudibili ───────────────────────────────────────── */

/* Costruito su `<details>`: si apre e si chiude senza JavaScript, resta
   ricercabile dal browser e annunciato correttamente dai lettori di
   schermo. Il foglio veste il comportamento nativo, non lo sostituisce. */
.p-accordion {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.p-accordion-panel {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    overflow: hidden;
}

.p-accordion-header {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--p-text-color);
    cursor: pointer;
    display: flex;
    font-size: var(--p-font-size);
    font-weight: 600;
    gap: .625rem;
    list-style: none;
    padding: .875rem 1rem;
    text-align: left;
    transition: background-color var(--p-transition-duration);
    width: 100%;
}

/* Il triangolino nativo di `<details>` va tolto in entrambe le sintassi:
   i browser Webkit usano lo pseudo-elemento, gli altri il tipo di lista. */
.p-accordion-header::-webkit-details-marker { display: none; }
.p-accordion-header::marker { content: ''; }

.p-accordion-header:hover { background: var(--p-content-hover-background); }

.p-accordion-header:focus-visible {
    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
    outline-offset: calc(var(--p-focus-ring-offset) * -1);
}

.p-accordion-toggle-icon {
    color: var(--p-text-muted-color);
    margin-left: auto;
    transition: transform var(--p-transition-duration);
}

.p-accordion-panel[open] > .p-accordion-header {
    border-bottom: 1px solid var(--p-content-border-color);
}

.p-accordion-panel[open] > .p-accordion-header .p-accordion-toggle-icon {
    transform: rotate(180deg);
}

.p-accordion-content { padding: 1rem; }

/* ── Schede a linguette ─────────────────────────────────────────── */

.p-tabs {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.p-tablist {
    border-bottom: 1px solid var(--p-content-border-color);
    display: flex;
    gap: .25rem;
    /* Su schermo stretto le linguette scorrono invece di andare a capo:
       una fila che si spezza sposta il contenuto sotto a ogni cambio. */
    overflow-x: auto;
    scrollbar-width: none;
}

.p-tablist::-webkit-scrollbar { display: none; }

.p-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--p-text-muted-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--p-font-size);
    font-weight: 600;
    margin-bottom: -1px;
    padding: .625rem .875rem;
    text-decoration: none;
    transition: color var(--p-transition-duration), border-color var(--p-transition-duration);
    white-space: nowrap;
}

.p-tab:hover { color: var(--p-text-color); }

.p-tab[aria-selected='true'],
.p-tab.p-tab-active {
    border-bottom-color: var(--p-primary-color);
    color: var(--p-primary-color);
}

.p-tab:focus-visible {
    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
    outline-offset: -2px;
}

.p-tabpanel { padding-top: 1rem; }
.p-tabpanel[hidden] { display: none; }

/* ── Barra di strumenti ─────────────────────────────────────────── */

.p-toolbar {
    align-items: center;
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    padding: .75rem 1rem;
}

.p-toolbar-start,
.p-toolbar-center,
.p-toolbar-end {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── Separatore ─────────────────────────────────────────────────── */

.p-divider {
    border: 0;
    border-top: 1px solid var(--p-content-border-color);
    margin: 1.25rem 0;
    opacity: 1;
}

.p-divider-vertical {
    align-self: stretch;
    border-left: 1px solid var(--p-content-border-color);
    border-top: 0;
    margin: 0 .75rem;
    width: 0;
}

/* Il separatore con etichetta: due linee ai lati del testo, che si
   allungano da sole perché sono elementi flessibili senza base. */
.p-divider-labelled {
    align-items: center;
    border: 0;
    color: var(--p-text-muted-color);
    display: flex;
    font-size: var(--p-font-size-sm);
    gap: .75rem;
}

.p-divider-labelled::before,
.p-divider-labelled::after {
    background: var(--p-content-border-color);
    content: '';
    flex: 1 1 auto;
    height: 1px;
}

/* ── Intestazione di pagina ─────────────────────────────────────── */

/* Non è un componente della libreria ma la ripetiamo su ogni pagina:
   occhiello, titolo, sottotitolo a sinistra, azioni a destra. Dichiararla
   qui evita venti varianti nate una view alla volta. */
.p-page-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.p-page-header-eyebrow {
    color: var(--p-primary-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0 0 .25rem;
    text-transform: uppercase;
}

.p-page-title {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0;
}

.p-page-subtitle {
    color: var(--p-text-muted-color);
    margin: .375rem 0 0;
    max-width: 60ch;
}

.p-page-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── Stato vuoto ────────────────────────────────────────────────── */

.p-empty-state {
    align-items: center;
    background: var(--p-content-alt-background);
    border: 1.5px dashed var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.p-empty-state-icon {
    color: var(--p-text-muted-color);
    font-size: 2rem;
    opacity: .6;
}

.p-empty-state-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.p-empty-state-text {
    color: var(--p-text-muted-color);
    margin: 0;
    max-width: 44ch;
}