/* ============================================================
   GesTask — Blocchi di pagina
   Griglie di schede, intestazioni di sezione e stati vuoti.
   ============================================================

   Raccoglie quello che più pagine condividono ma che non è un componente
   della libreria: la griglia dei team, la testata di una sezione con
   l'icona colorata, il riquadro di invito quando un elenco è vuoto.

   Prima queste regole vivevano dentro blocchi `registerCss` nelle view, una
   copia per pagina. Le copie non erano identiche — la stessa `.gt-section-card`
   era dichiarata in sei file con tre spaziature diverse — e nessuna era
   messa in cache dal browser, perché un foglio in linea viaggia con l'HTML
   a ogni richiesta. */

/* ── Testata di sezione ─────────────────────────────────────────── */

.gt-section-card-head {
    align-items: center;
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

/* L'icona quadrata colorata. Il colore arriva da una variabile impostata
   sull'elemento, così la stessa dichiarazione serve tutte le sezioni. */
.gt-section-icon {
    align-items: center;
    background: var(--gt-section-icon-bg, var(--p-primary-subtle-color));
    border-radius: var(--p-border-radius-md);
    color: var(--gt-section-icon-color, var(--p-primary-color));
    display: flex;
    flex-shrink: 0;
    font-size: 1rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.gt-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

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

/* ── Riquadro di invito ─────────────────────────────────────────── */

.gt-empty-hero {
    background: var(--p-content-alt-background);
    border: 1.5px dashed var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    margin: 0 auto 2rem;
    max-width: 480px;
    padding: 3rem 1.5rem;
    text-align: center;
}

.gt-empty-icon {
    color: var(--p-text-muted-color);
    font-size: 2.5rem;
    margin-bottom: .75rem;
    opacity: .5;
}

.gt-empty-hero h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.gt-empty-hero p {
    color: var(--p-text-muted-color);
    margin: 0 0 1rem;
}

/* ============================================================
   Team
   ============================================================ */

.gt-team-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.gt-team-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);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
        border-color var(--p-transition-duration),
        box-shadow var(--p-transition-duration),
        transform var(--p-transition-duration);
}

.gt-team-card:hover {
    box-shadow: var(--p-shadow-lg);
    transform: translateY(-3px);
}

/* La striscia colorata di testa: identifica il team a colpo d'occhio in
   una griglia dove tutte le schede hanno la stessa forma. Il colore è un
   dato della scheda e arriva da una variabile in linea. */
.gt-team-card-stripe {
    background: var(--team-accent, var(--p-primary-color));
    flex-shrink: 0;
    height: 4px;
}

.gt-team-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.gt-team-card-head {
    align-items: flex-start;
    display: flex;
    gap: .875rem;
}

.gt-team-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--team-accent, var(--p-primary-color)) 12%, transparent);
    border-radius: var(--p-border-radius-lg);
    color: var(--team-accent, var(--p-primary-color));
    display: flex;
    flex-shrink: 0;
    font-size: 1.125rem;
    font-weight: 800;
    height: 44px;
    justify-content: center;
    width: 44px;
}

/* Senza `min-width: 0` il blocco non si accorcia sotto la larghezza del
   proprio contenuto e il nome lungo non viene mai troncato. */
.gt-team-card-meta { min-width: 0; }

.gt-team-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .1875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gt-team-desc {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--p-text-muted-color);
    display: -webkit-box;
    font-size: var(--p-font-size-sm);
    margin: 0;
    overflow: hidden;
}

.gt-team-stats {
    align-items: center;
    background: var(--p-content-alt-background);
    border-radius: var(--p-border-radius-lg);
    display: flex;
    gap: .75rem;
    padding: .625rem .875rem;
}

.gt-team-stat { text-align: center; }

.gt-team-stat-value {
    color: var(--team-accent, var(--p-primary-color));
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.gt-team-stat-label {
    color: var(--p-text-muted-color);
    display: block;
    font-size: var(--p-font-size-xs);
    letter-spacing: .05em;
    margin-top: .125rem;
    text-transform: uppercase;
}

.gt-team-stat-divider {
    background: var(--p-content-border-color);
    height: 28px;
    width: 1px;
}

.gt-team-card-footer { margin-top: auto; }

/* ── Elenco dei ruoli ───────────────────────────────────────────── */

.gt-member-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: .3125rem;
}

/* ── Dettaglio del team ─────────────────────────────────────────── */

.gt-team-avatar-lg {
    align-items: center;
    background: color-mix(in srgb, var(--team-accent, var(--p-primary-color)) 14%, transparent);
    border-radius: var(--p-border-radius-xl);
    color: var(--team-accent, var(--p-primary-color));
    display: flex;
    flex-shrink: 0;
    font-size: 1.5rem;
    font-weight: 800;
    height: 58px;
    justify-content: center;
    width: 58px;
}

/* Il contatore in fondo alla testata di sezione. Il margine automatico lo
   spinge a destra senza bisogno di un contenitore in più. */
.gt-count-badge {
    background: var(--p-primary-subtle-color);
    border-radius: var(--p-border-radius-full);
    color: var(--p-primary-emphasis-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    margin-left: auto;
    padding: .125rem .5625rem;
}

.gt-members-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.gt-member-row {
    align-items: center;
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    padding: .75rem 1rem;
    transition: background-color var(--p-transition-fast);
}

.gt-member-row:hover { background: var(--p-content-alt-background); }

/* Senza `min-width: 0` il blocco del nome non si accorcia e la riga si
   allarga oltre il contenitore invece di troncare il testo. */
.gt-member-identity {
    align-items: center;
    display: flex;
    flex: 1 1 14rem;
    gap: .75rem;
    min-width: 0;
}

.gt-member-name { font-weight: 600; }

.gt-member-email {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
}

.gt-member-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

.gt-empty-inline {
    color: var(--p-text-muted-color);
    padding: 1.5rem 0;
    text-align: center;
}

/* ── Pulsante di ritorno ─────────────────────────────────────────

   Quattro pagine hanno una freccia che riporta indietro — team, tag,
   bacheca e dettaglio di una task — e ciascuna aveva la propria classe con
   la propria copia della stessa dichiarazione, sparse in tre file diversi.
   Sono lo stesso pulsante: qui è dichiarato una volta e i quattro nomi lo
   condividono. */

.team-back-button,
.tag-back-button,
.board-back-button,
.task-back-button {
    align-items: center;
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    color: var(--p-text-muted-color);
    display: inline-flex;
    flex-shrink: 0;
    height: 2.375rem;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--p-transition-fast),
        border-color var(--p-transition-fast),
        color var(--p-transition-fast);
    width: 2.375rem;
}

.team-back-button:hover,
.team-back-button:focus-visible,
.tag-back-button:hover,
.tag-back-button:focus-visible,
.board-back-button:hover,
.board-back-button:focus-visible,
.task-back-button:hover,
.task-back-button:focus-visible {
    background: var(--p-primary-subtle-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-emphasis-color);
}

/* Bacheca e dettaglio task hanno il titolo da solo, senza una riga flessibile
   che lo affianchi alla freccia: la freccia galleggia a sinistra del titolo,
   nel margine della pagina, così il titolo resta allineato al contenuto
   sottostante. Sotto i 1200px il margine laterale è troppo stretto per
   contenerla, e il titolo le cede lo spazio. */
.board-title-shell,
.task-title-shell {
    min-width: 0;
    position: relative;
}

.board-title-shell .board-back-button,
.task-title-shell .task-back-button {
    left: -3.1rem;
    position: absolute;
    top: 0;
}

@media (max-width: 1199.98px) {
    .board-title-shell,
    .task-title-shell { padding-left: 3.1rem; }

    .board-title-shell .board-back-button,
    .task-title-shell .task-back-button { left: 0; }
}

/* ── Matrice dei permessi ───────────────────────────────────────── */

.gt-perm-intro {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    margin-bottom: 1rem;
    max-width: 80ch;
}

.gt-perm-table th[scope='row'] { font-weight: 400; }

/* La chiave tecnica del permesso sotto l'etichetta leggibile: serve a chi
   deve ritrovarla nel codice, non a chi assegna i ruoli, quindi resta
   piccola e smorzata. */
.gt-perm-key {
    color: var(--p-text-muted-color);
    display: block;
    font-size: var(--p-font-size-xs);
    opacity: .75;
}

/* Le righe bloccate sono quelle senza le quali un membro non vedrebbe più
   nulla e nessuno potrebbe riaprire questa schermata: si distinguono dal
   fondo, non dal solo colore del testo. */
.gt-perm-locked { background: var(--p-content-alt-background); }

.gt-perm-static {
    color: var(--p-text-muted-color);
    font-size: 1rem;
}

.gt-perm-allowed { color: var(--p-success-emphasis-color); }

@media (max-width: 767.98px) {
    .gt-member-actions { margin-left: 0; width: 100%; }
}

/* ============================================================
   Contatti
   ============================================================ */

.gt-contact-brand-card {
    background: linear-gradient(135deg, var(--p-primary-600) 0%, var(--p-primary-500) 45%, var(--p-cyan-500) 100%);
    border-radius: var(--p-content-border-radius);
    overflow: hidden;
    position: relative;
}

.gt-contact-brand-card::before {
    background:
        radial-gradient(circle at 15% 85%, rgba(6, 182, 212, .35) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(129, 140, 248, .3) 0%, transparent 40%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.gt-contact-brand-inner {
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 1;
}

.gt-contact-brand-title {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

.gt-contact-brand-sub {
    color: rgba(255, 255, 255, .78);
    font-size: var(--p-font-size-sm);
    line-height: 1.6;
    margin: 0;
}

.gt-contact-info-list {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.gt-contact-info-item {
    align-items: center;
    border-radius: var(--p-border-radius-lg);
    display: flex;
    gap: .875rem;
    padding: .625rem .75rem;
    transition: background-color var(--p-transition-fast);
}

.gt-contact-info-item:hover { background: var(--p-content-alt-background); }

.gt-contact-info-icon {
    align-items: center;
    background: var(--contact-icon-bg, var(--p-primary-subtle-color));
    border-radius: var(--p-border-radius-md);
    color: var(--contact-icon-color, var(--p-primary-color));
    display: flex;
    flex-shrink: 0;
    font-size: 1rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.gt-contact-info-title {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    letter-spacing: .05em;
    margin-bottom: .0625rem;
    text-transform: uppercase;
}

.gt-contact-info-value {
    color: var(--p-text-color);
    font-size: var(--p-font-size-sm);
    font-weight: 500;
}

.gt-contact-footer {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.gt-captcha-wrap { flex: 1 1 14rem; min-width: 14rem; }
.gt-captcha-input { max-width: 8rem; }

@media (max-width: 767.98px) {
    .gt-contact-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ============================================================
   Ricerca
   ============================================================ */

.search-form { max-width: 720px; }

/* Il campo di ricerca della pagina è tondo e più grande di un campo
   normale: è l'unico controllo della schermata e deve essere il primo posto
   dove va l'occhio. */
.search-field {
    align-items: center;
    background: var(--p-form-field-background);
    border: 1px solid var(--p-form-field-border-color);
    border-radius: var(--p-border-radius-full);
    display: flex;
    gap: .625rem;
    padding: .3125rem .3125rem .3125rem 1rem;
    transition: border-color var(--p-transition-fast), box-shadow var(--p-transition-fast);
}

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

.search-field-icon {
    color: var(--p-primary-color);
    font-size: 1.125rem;
    line-height: 1;
}

.search-field-input {
    background: transparent;
    border: 0;
    color: var(--p-text-color);
    flex: 1;
    font-family: inherit;
    font-size: 1.0625rem;
    min-width: 0;
    outline: none;
    padding: .375rem 0;
}

.search-field-input::placeholder { color: var(--p-form-field-placeholder-color); }

.search-field-reset {
    color: var(--p-text-muted-color);
    line-height: 1;
    padding: .25rem;
}

.search-field-reset:hover { color: var(--p-text-color); }

.search-hint {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    margin: .5rem 0 0 1rem;
}

.search-results { display: grid; gap: .5rem; }

.search-result {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    color: inherit;
    display: block;
    padding: .875rem 1rem;
    text-decoration: none;
    transition: border-color var(--p-transition-fast), box-shadow var(--p-transition-fast);
}

.search-result:hover {
    border-color: var(--p-primary-color);
    box-shadow: var(--p-shadow-sm);
    color: inherit;
}

.search-result-title {
    font-weight: 600;
    margin-bottom: .1875rem;
}

.search-result-body {
    color: var(--p-text-color);
    font-size: var(--p-font-size-sm);
    margin-bottom: .3125rem;
}

.search-result-meta {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
}

/* Il termine trovato dentro il risultato. Fondo ambra e testo scuro: il
   segno deve staccarsi dal testo intorno senza renderlo meno leggibile. */
.search-result mark {
    background: var(--p-warn-subtle-color);
    border-radius: var(--p-border-radius-xs);
    color: var(--p-warn-emphasis-color);
    padding: 0 .1em;
}

/* ============================================================
   Tag
   ============================================================ */

.gt-tag-section-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin-bottom: .875rem;
}

.gt-tag-section-icon {
    align-items: center;
    background: var(--p-primary-subtle-color);
    border-radius: var(--p-border-radius-md);
    color: var(--p-primary-color);
    display: flex;
    flex-shrink: 0;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.gt-tag-section-title {
    font-size: .9375rem;
    font-weight: 700;
    margin: 0;
}

.gt-tag-grid {
    display: grid;
    gap: .875rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.gt-tag-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);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--p-transition-duration), transform var(--p-transition-duration);
}

.gt-tag-card:hover {
    box-shadow: var(--p-shadow-md);
    transform: translateY(-2px);
}

/* Il campione porta il nome del tag scritto sopra il colore stesso: è il
   modo più diretto di mostrare come apparirà. Il colore del testo è
   calcolato in PHP dalla luminanza del fondo, perché il bianco su giallo e
   il nero su blu scuro sono entrambi illeggibili. */
.gt-tag-swatch {
    align-items: center;
    display: flex;
    font-size: var(--p-font-size);
    font-weight: 700;
    min-height: 56px;
    padding: .875rem 1rem;
    word-break: break-word;
}

.gt-tag-card-body { padding: .5rem 1rem .375rem; }

.gt-tag-hex {
    background: transparent;
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    padding: 0;
}

.gt-tag-card-actions { margin-top: auto; padding: .375rem .75rem .75rem; }

/* ── Scelta dell'ambito ─────────────────────────────────────────── */

/* Due opzioni sole, entrambe da vedere insieme: un elenco a discesa
   nasconderebbe metà della scelta dietro un clic. */
.gt-scope-toggle { display: flex; flex-wrap: wrap; gap: .5rem; }

.gt-scope-option {
    align-items: center;
    border: 1.5px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    cursor: pointer;
    display: flex;
    font-size: var(--p-font-size-sm);
    font-weight: 500;
    gap: .4375rem;
    padding: .4375rem .875rem;
    transition:
        background-color var(--p-transition-fast),
        border-color var(--p-transition-fast),
        color var(--p-transition-fast);
    user-select: none;
}

.gt-scope-option:hover { background: var(--p-content-alt-background); }

/* Lo stato acceso è retto dal selettore `:has()` sul controllo nativo
   contenuto, non da una classe scritta da JavaScript: senza script la
   scelta resta visibile lo stesso. */
.gt-scope-option:has(input:checked) {
    background: var(--p-primary-subtle-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-emphasis-color);
}

.gt-scope-option:has(input:focus-visible) {
    box-shadow: var(--p-focus-ring-shadow);
}

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

.gt-color-picker-wrap {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.gt-color-preview-row {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.gt-color-native {
    border: 1px solid var(--p-form-field-border-color);
    border-radius: var(--p-border-radius-md);
    cursor: pointer;
    height: 44px;
    padding: 2px;
    width: 44px;
}

.gt-color-hex {
    color: var(--p-text-muted-color);
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
    font-size: var(--p-font-size-sm);
}

.gt-palette {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.gt-palette-swatch {
    border: 2px solid transparent;
    border-radius: var(--p-border-radius-full);
    cursor: pointer;
    height: 26px;
    transition: transform var(--p-transition-fast), box-shadow var(--p-transition-fast);
    width: 26px;
}

.gt-palette-swatch:hover,
.gt-palette-swatch:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
    outline: none;
    transform: scale(1.15);
}

/* ============================================================
   Riunioni
   ============================================================ */

.gt-meeting-group-title {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: .75rem;
    text-transform: uppercase;
}

.gt-meeting-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.gt-meeting-card {
    align-items: stretch;
    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: inherit;
    display: flex;
    gap: 1rem;
    padding: 1rem 1.125rem;
    position: relative;
    text-decoration: none;
    transition:
        border-color var(--p-transition-duration),
        box-shadow var(--p-transition-duration),
        transform var(--p-transition-duration);
}

.gt-meeting-card:hover {
    border-color: var(--p-primary-color);
    box-shadow: var(--p-shadow-lg);
    color: inherit;
    transform: translateY(-2px);
}

.gt-meeting-card:focus-visible { box-shadow: var(--p-focus-ring-shadow); outline: none; }

/* In corso: bordo sinistro acceso, si nota a colpo d'occhio. */
.gt-meeting-card.is-live { border-left: 3px solid var(--p-warn-color); }

/* Completata: resta leggibile ma passa in secondo piano. */
.gt-meeting-card.is-completed .gt-meeting-date { opacity: .7; }

/* Il foglietto del calendario: giorno grande, mese e anno sotto. */
.gt-meeting-date {
    align-items: center;
    align-self: flex-start;
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    display: flex;
    flex: 0 0 3.75rem;
    flex-direction: column;
    padding: .375rem 0;
}

.gt-meeting-date-year {
    color: var(--p-text-muted-color);
    font-size: .625rem;
    letter-spacing: .03em;
}

.gt-meeting-date.is-today .gt-meeting-date-year { color: inherit; }

.gt-meeting-date.is-today {
    background: var(--p-primary-subtle-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-emphasis-color);
}

.gt-meeting-date-day { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }

.gt-meeting-date-month {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    text-transform: uppercase;
}

.gt-meeting-date.is-today .gt-meeting-date-month { color: inherit; }

.gt-meeting-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.gt-meeting-card-head {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    min-height: 1.5rem;
}

.gt-meeting-card-team {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    font-weight: 600;
    letter-spacing: .03em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.gt-meeting-card-title { font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }

/* Punti e avanzamento in fondo, allineati fra card di altezza diversa. */
.gt-meeting-card-foot {
    border-top: 1px solid var(--p-content-border-color);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: auto;
    padding-top: .625rem;
}

.gt-meeting-card-empty { color: var(--p-text-muted-color); font-size: var(--p-font-size-sm); }

.gt-meeting-card-chips { display: flex; flex-wrap: wrap; gap: .25rem; }

/* ── Riepilogo della riunione ───────────────────────────────── */

.gt-meeting-summary {
    align-items: center;
    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);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    padding: 1.125rem 1.25rem;
}

.gt-meeting-summary-main {
    display: grid;
    flex: 1 1 260px;
    gap: .25rem .75rem;
    grid-template-columns: auto 1fr;
    align-items: baseline;
}

.gt-meeting-summary-value { font-size: 1.75rem; font-weight: 700; line-height: 1; }

.gt-meeting-summary-label { color: var(--p-text-muted-color); font-size: var(--p-font-size-sm); }

.gt-meeting-summary-main .p-progressbar { grid-column: 1 / -1; margin-top: .5rem; }

.gt-meeting-summary-stats { display: flex; gap: .75rem; }

.gt-meeting-stat {
    border-left: 3px solid var(--gt-meeting-stat-color, var(--p-content-border-color));
    display: flex;
    flex-direction: column;
    min-width: 6.5rem;
    padding: .125rem 0 .125rem .625rem;
}

.gt-meeting-stat--todo { --gt-meeting-stat-color: var(--p-text-muted-color); }
.gt-meeting-stat--presented { --gt-meeting-stat-color: var(--p-success-color); }
.gt-meeting-stat--postponed { --gt-meeting-stat-color: var(--p-warn-color); }

.gt-meeting-stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.gt-meeting-stat-label { color: var(--p-text-muted-color); font-size: var(--p-font-size-xs); }

.gt-meeting-notes {
    background: var(--p-content-alt-background);
    border-left: 3px solid var(--p-primary-color);
    border-radius: var(--p-border-radius-lg);
    display: flex;
    gap: .75rem;
    padding: .875rem 1rem;
}

.gt-meeting-notes > .fi { color: var(--p-primary-color); margin-top: .125rem; }

/* ── Filtro, sezioni e punti ────────────────────────────────── */

.gt-meeting-filter { flex-wrap: wrap; }

.gt-meeting-filter-count {
    background: var(--p-content-alt-background);
    border-radius: var(--p-border-radius-full);
    font-size: var(--p-font-size-xs);
    padding: 0 .4375rem;
}

/* Il filtro nasconde i punti degli altri stati e le sezioni rimaste vuote:
   lo regge `:has()` sui pulsanti di scelta, senza script. */
.gt-meeting-board:has(#meeting-filter-todo:checked) .gt-meeting-item:not(.is-todo),
.gt-meeting-board:has(#meeting-filter-presented:checked) .gt-meeting-item:not(.is-presented),
.gt-meeting-board:has(#meeting-filter-postponed:checked) .gt-meeting-item:not(.is-postponed),
.gt-meeting-board:has(#meeting-filter-todo:checked) .gt-meeting-section:not(:has(.is-todo)),
.gt-meeting-board:has(#meeting-filter-presented:checked) .gt-meeting-section:not(:has(.is-presented)),
.gt-meeting-board:has(#meeting-filter-postponed:checked) .gt-meeting-section:not(:has(.is-postponed)) {
    display: none;
}

.gt-meeting-section {
    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);
}

.gt-meeting-section-head {
    align-items: center;
    border-bottom: 1px solid var(--p-content-border-color);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .875rem 1.25rem;
}

.gt-meeting-section-title { flex: 1; font-size: 1rem; font-weight: 700; margin: 0; }

.gt-meeting-section-count {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-sm);
    font-variant-numeric: tabular-nums;
}

.gt-meeting-items { list-style: none; margin: 0; padding: 0; }

.gt-meeting-item {
    align-items: flex-start;
    border-bottom: 1px solid var(--p-content-border-color);
    border-left: 3px solid transparent;
    display: flex;
    gap: .75rem;
    padding: .75rem 1.25rem .75rem calc(1.25rem - 3px);
    transition: background var(--p-transition-duration);
}

.gt-meeting-item:last-child { border-bottom: 0; }
.gt-meeting-item:hover { background: var(--p-content-alt-background); }
.gt-meeting-item.is-postponed { border-left-color: var(--p-warn-color); }

.gt-meeting-check {
    color: var(--p-text-muted-color);
    font-size: 1.125rem;
    line-height: 1;
    margin-top: .125rem;
    text-decoration: none;
}

a.gt-meeting-check:hover { color: var(--p-success-color); }
.gt-meeting-item.is-presented .gt-meeting-check { color: var(--p-success-color); }

.gt-meeting-item-main {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.gt-meeting-item-text { overflow-wrap: anywhere; }
.gt-meeting-item.is-presented .gt-meeting-item-text { color: var(--p-text-muted-color); }

.gt-meeting-item-meta { align-items: center; display: flex; flex-wrap: wrap; gap: .375rem; }

.gt-meeting-task-link {
    align-items: center;
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-full);
    color: var(--p-text-color);
    display: inline-flex;
    font-size: var(--p-font-size-xs);
    gap: .3125rem;
    max-width: 100%;
    padding: .125rem .5625rem;
    text-decoration: none;
}

.gt-meeting-task-link > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-meeting-task-link:hover { border-color: var(--p-primary-color); color: var(--p-primary-color); }
.gt-meeting-task-link.is-done .fi { color: var(--p-success-color); }

/* I comandi della riga restano discreti finché non ci si passa sopra. */
.gt-meeting-item-actions {
    display: inline-flex;
    gap: .125rem;
    opacity: .55;
    transition: opacity var(--p-transition-duration);
}

.gt-meeting-item:hover .gt-meeting-item-actions,
.gt-meeting-item:focus-within .gt-meeting-item-actions { opacity: 1; }

.gt-meeting-action {
    background: none;
    border: 0;
    border-radius: var(--p-border-radius-md, .375rem);
    color: var(--p-text-muted-color);
    cursor: pointer;
    line-height: 1;
    padding: .375rem;
    text-decoration: none;
}

.gt-meeting-action:hover { background: var(--p-content-border-color); color: var(--p-primary-color); }
.gt-meeting-action--danger:hover { color: var(--p-danger-color); }

@media (hover: none) {
    .gt-meeting-item-actions { opacity: 1; }
}

/* La finestra del punto è corta: lasciarla senza scorrimento fa uscire
   l'elenco dei suggerimenti della task invece di tagliarlo. */
#meeting-item-dialog .p-dialog-content { overflow: visible; }

/* ── Partecipanti e relatori ────────────────────────────────── */

.gt-meeting-card-time {
    align-items: center;
    color: var(--p-text-muted-color);
    display: inline-flex;
    font-size: var(--p-font-size-sm);
    gap: .25rem;
}

.gt-meeting-people {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

.gt-meeting-people-label {
    align-items: center;
    color: var(--p-text-muted-color);
    display: inline-flex;
    font-size: var(--p-font-size-sm);
    font-weight: 600;
    gap: .375rem;
}

.gt-meeting-people-list { display: flex; flex-wrap: wrap; gap: .375rem; }

.gt-meeting-presenter {
    align-items: center;
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-full);
    display: inline-flex;
    font-size: var(--p-font-size-xs);
    gap: .375rem;
    padding: .125rem .625rem .125rem .125rem;
}

.gt-meeting-presenter .p-avatar { height: 1.375rem; width: 1.375rem; font-size: .625rem; }

.gt-meeting-participant-picker { display: flex; flex-wrap: wrap; gap: .375rem; }

.gt-meeting-participant-option {
    align-items: center;
    border: 1.5px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-full);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--p-font-size-sm);
    gap: .375rem;
    padding: .25rem .75rem;
}

.gt-meeting-participant-option:has(input:checked) {
    background: var(--p-primary-subtle-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-emphasis-color);
}

/* La riga attende la risposta del server: niente doppi clic. */
.gt-meeting-item.is-busy { opacity: .5; pointer-events: none; }

/* ── Riunioni: svolgimento ──────────────────────────────────── */

.gt-meeting-item-notes {
    align-items: flex-start;
    color: var(--p-text-muted-color);
    display: flex;
    font-size: var(--p-font-size-sm);
    gap: .375rem;
    overflow-wrap: anywhere;
}

.gt-meeting-item-notes > .fi { margin-top: .125rem; }

.gt-meeting-outcome {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-left: 3px solid var(--p-success-color);
    border-radius: var(--p-content-border-radius);
    padding: 1.125rem 1.25rem;
}

.gt-meeting-outcome-meta { color: var(--p-text-muted-color); font-size: var(--p-font-size-sm); }

.gt-meeting-task-list .gt-meeting-item { padding-left: 0; padding-right: 0; }
.gt-meeting-task-list .gt-meeting-item:hover { background: none; }

.gt-meeting-run-progress {
    align-items: center;
    color: var(--p-text-muted-color);
    display: grid;
    font-size: var(--p-font-size-sm);
    gap: .375rem;
}

.gt-meeting-run {
    align-items: flex-start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(220px, 300px) 1fr;
}

.gt-meeting-run-index {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding: .75rem;
    position: sticky;
    top: 5rem;
}

.gt-meeting-run-index-section {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    font-weight: 600;
    letter-spacing: .04em;
    margin: .75rem .5rem .25rem;
    text-transform: uppercase;
}

.gt-meeting-run-index-section:first-child { margin-top: .25rem; }

.gt-meeting-run-index-item {
    align-items: flex-start;
    border-radius: var(--p-border-radius-md);
    color: var(--p-text-color);
    display: flex;
    font-size: var(--p-font-size-sm);
    gap: .5rem;
    padding: .4375rem .5rem;
    text-decoration: none;
}

.gt-meeting-run-index-item:hover { background: var(--p-content-alt-background); color: var(--p-text-color); }
.gt-meeting-run-index-item > .fi { color: var(--p-text-muted-color); margin-top: .125rem; }
.gt-meeting-run-index-item.is-presented > .fi { color: var(--p-success-color); }
.gt-meeting-run-index-item.is-postponed > .fi { color: var(--p-warn-color); }
.gt-meeting-run-index-item.is-presented > span { color: var(--p-text-muted-color); }

.gt-meeting-run-index-item.is-current {
    background: var(--p-primary-subtle-color);
    color: var(--p-primary-emphasis-color);
    font-weight: 600;
}

.gt-meeting-run-index-close {
    border-top: 1px solid var(--p-content-border-color);
    border-radius: 0 0 var(--p-border-radius-md) var(--p-border-radius-md);
    margin-top: .75rem;
    padding-top: .75rem;
}

.gt-meeting-run-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);
    padding: 1.5rem;
}

.gt-meeting-run-card-head {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.gt-meeting-run-text { font-size: 1.25rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }

.gt-meeting-run-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.gt-meeting-run-actions-spacer { flex: 1; }

.gt-meeting-run-subtitle {
    font-size: var(--p-font-size-sm);
    font-weight: 700;
    letter-spacing: .03em;
    margin: 1.5rem 0 .5rem;
    text-transform: uppercase;
}

.gt-meeting-run-newtask {
    background: var(--p-content-alt-background);
    border-radius: var(--p-border-radius-lg);
    margin-top: .75rem;
    padding: .75rem 1rem;
}

.gt-meeting-run-newtask > summary { cursor: pointer; font-weight: 600; }

@media (max-width: 767.98px) {
    .gt-meeting-run { grid-template-columns: 1fr; }
    .gt-meeting-run-index { max-height: 40vh; position: static; }
}

/* ── Modelli di bacheca ─────────────────────────────────────────── */

.gt-tpl-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Il bordo superiore porta il colore del modello, come la scheda della
   bacheca: la bacheca che ne nasce avrà lo stesso. */
.gt-tpl-card {
    background: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-content-border-radius);
    border-top: 3px solid var(--board-accent);
    box-shadow: var(--p-shadow-xs);
    display: flex;
    flex-direction: column;
    padding: .875rem 1rem;
}

.gt-tpl-card.is-default { box-shadow: 0 0 0 2px var(--board-accent), var(--p-shadow-xs); }

.gt-tpl-card-head { align-items: flex-start; display: flex; gap: .5rem; justify-content: space-between; }

.gt-tpl-card-title { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }

.gt-tpl-default-badge {
    align-items: center;
    color: var(--board-accent);
    display: inline-flex;
    font-size: var(--p-font-size-xs);
    font-weight: 600;
    gap: .25rem;
    white-space: nowrap;
}

.gt-tpl-card-desc { color: var(--p-text-muted-color); font-size: var(--p-font-size-sm); margin: 0 0 .5rem; }

.gt-tpl-flow {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--p-font-size-xs);
    gap: .25rem .75rem;
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
}

.gt-tpl-flow li { align-items: center; display: inline-flex; gap: .3rem; }

.gt-tpl-card-meta { color: var(--p-text-muted-color); font-size: var(--p-font-size-xs); margin: 0 0 .75rem; }

.gt-tpl-card-actions { align-items: center; display: flex; gap: .5rem; margin-top: auto; }

/* Editor, condiviso con il pannello di amministrazione. */
.gt-tpl-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }

.gt-tpl-field[hidden] { display: none; }

.gt-tpl-heading { font-size: .95rem; font-weight: 700; margin: 1.25rem 0 .5rem; }

.gt-tpl-rows { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }

.gt-tpl-row { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }

.gt-tpl-title { flex: 1 1 200px; }

.gt-tpl-color { block-size: 2rem; border: 0; inline-size: 2.25rem; padding: 0; }

.gt-tpl-flags { display: flex; flex-wrap: wrap; font-size: var(--p-font-size-xs); gap: .25rem .75rem; }

.gt-tpl-flag { align-items: center; display: inline-flex; gap: .25rem; }

.gt-tpl-row-actions { display: flex; gap: .125rem; }

.gt-tpl-summary { color: var(--p-text-muted-color); font-size: var(--p-font-size-sm); margin-top: 1rem; }