/* ============================================================
   GesTask — Calendario (FullCalendar)
   ============================================================

   Le regole stanno qui e non nelle viste perché i calendari sono due —
   quello globale e quello di bacheca — e finora solo il primo aveva un
   tema. La libreria inserisce il proprio foglio da JavaScript, quindi dopo
   questo file: i selettori sono perciò più specifici dei suoi, altrimenti a
   parità di peso vincerebbe lei.

   Le variabili sono dichiarate per entrambi i temi e non per il solo tema
   scuro. Prima erano scritte sotto `[data-bs-theme="dark"]`, il che
   lasciava al calendario chiaro i colori di fabbrica della libreria: bordi
   grigi e pulsanti azzurri che non appartenevano a nessuna parte del resto
   dell'applicazione. */

.fc {
    --fc-page-bg-color: var(--p-content-background);
    --fc-neutral-bg-color: var(--p-content-alt-background);
    --fc-neutral-text-color: var(--p-text-color);
    --fc-border-color: var(--p-content-border-color);
    --fc-theme-standard-border-color: var(--p-content-border-color);

    --fc-button-text-color: var(--p-text-color);
    --fc-button-bg-color: var(--p-content-alt-background);
    --fc-button-border-color: var(--p-content-border-color);
    --fc-button-hover-bg-color: var(--p-content-deep-background);
    --fc-button-hover-border-color: var(--p-content-border-color);
    --fc-button-active-bg-color: var(--p-primary-color);
    --fc-button-active-border-color: var(--p-primary-color);

    --fc-event-bg-color: var(--p-primary-color);
    --fc-event-border-color: var(--p-primary-color);
    --fc-event-text-color: var(--p-primary-contrast-color);
    --fc-event-selected-overlay-color: rgba(15, 23, 42, .2);

    --fc-more-link-bg-color: var(--p-content-deep-background);
    --fc-more-link-text-color: var(--p-text-color);
    --fc-list-event-hover-bg-color: var(--p-content-hover-background);

    /* Oggi si riconosce da un velo del colore accento, non da un giallo
       fisso: il giallo di fabbrica non aveva parenti in questa palette. */
    --fc-today-bg-color: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
}

.fc-theme-standard th,
.fc-theme-standard td,
.fc-theme-standard .fc-scrollgrid {
    border-color: var(--fc-border-color) !important;
}

.fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.fc .fc-button {
    border-radius: var(--p-border-radius-md);
    box-shadow: none !important;
    font-size: var(--p-font-size-sm);
    font-weight: 600;
    padding: .4375rem .75rem;
    text-transform: capitalize;
}

.fc .fc-button: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);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    color: var(--p-primary-contrast-color);
}

/* I numeri dei giorni e le intestazioni sono ancore: senza questo prendono
   colore e sottolineatura dei collegamenti del sito, e la griglia diventa
   una tabella di link azzurri. */
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
    color: var(--p-text-color);
    text-decoration: none;
}

.fc .fc-daygrid-day-number:hover,
.fc .fc-col-header-cell-cushion:hover {
    color: var(--p-primary-color);
}

.fc .fc-col-header-cell-cushion {
    color: var(--p-text-muted-color);
    font-size: var(--p-font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fc .fc-daygrid-event {
    border-radius: var(--p-border-radius-sm);
    font-weight: 600;
}

.fc .fc-daygrid-more-link {
    color: var(--p-primary-color);
    font-weight: 600;
}

/* Il contenitore del calendario nella pagina: una superficie come le altre,
   così il calendario non galleggia sul fondo della pagina. */
.gt-calendar-surface {
    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: 1rem;
}

/* Il contenuto personalizzato di un evento: titolo e, sotto, il contesto in
   cui la task vive. */
.gt-calendar-event {
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    padding: .1875rem .25rem;
}

/* overflow-wrap: anywhere spezza anche le parole senza spazi. Senza, un
   titolo come un codice o un indirizzo resta una riga unica più larga della
   cella e allarga l'evento oltre il bordo del giorno. */
.gt-calendar-event-title {
    font-size: .8125rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    white-space: normal;
}

.gt-calendar-event-context {
    font-size: .6875rem;
    margin-top: .125rem;
    opacity: .8;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* L'evento della griglia mensile non deve mai superare la propria cella,
   qualunque sia il contenuto. Il vincolo si ferma al contenuto dell'evento:
   l'elemento che lo posiziona (`.fc-daygrid-event-harness`) deve restare
   escluso, perché è lui a sporgere oltre la cella di partenza — con un
   `right` negativo, non con una larghezza esplicita — per coprire i giorni
   di un evento che dura più di uno. Un `max-width: 100%` messo anche lì lo
   ricacciava dentro la prima cella, e un'assenza di più giorni compariva
   solo il primo giorno. */
.fc .fc-daygrid-event,
.fc .fc-event-main {
    max-width: 100%;
    min-width: 0;
}

.fc .fc-daygrid-event { overflow: hidden; }

@media (max-width: 767.98px) {
    /* Le tre sezioni della barra non stanno su una riga sola: affiancate si
       sovrappongono al titolo e i pulsanti delle viste escono dallo
       schermo. Impilate restano tutte raggiungibili. */
    .fc .fc-toolbar.fc-header-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: .5rem;
        margin-bottom: .75rem;
    }

    .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }

    .fc .fc-toolbar.fc-header-toolbar .fc-button-group {
        flex-wrap: wrap;
        justify-content: center;
    }

    .fc .fc-toolbar.fc-header-toolbar .fc-button {
        font-size: .8125rem;
        padding: .375rem .625rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.0625rem;
        text-align: center;
        text-transform: capitalize;
    }

    .fc .fc-daygrid-day-number { font-size: .78rem; padding: 2px 4px; }
    .fc .fc-daygrid-day-frame { min-height: 3.2rem; }
    .fc .fc-event-title,
    .fc .fc-event-time { font-size: .72rem; }
    .fc .fc-daygrid-more-link { font-size: .72rem; }

    /* Nella griglia mensile una cella è larga una cinquantina di pixel: il
       titolo a capo diventerebbe una colonna di sillabe alta mezza pagina.
       Resta su una riga troncata, il contesto sparisce e il nome completo è
       nel suggerimento e nel dettaglio della task. */
    .fc .fc-daygrid-event .gt-calendar-event-title {
        font-size: .6875rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fc .fc-daygrid-event .gt-calendar-event-context { display: none; }

    /* La vista settimanale a fasce orarie deve mostrare tutti e sette i
       giorni nella larghezza dello schermo. Una larghezza minima la faceva
       uscire dal riquadro, che non scorre in orizzontale: da giovedì in poi i
       giorni restavano semplicemente tagliati. Le intestazioni vanno quindi a
       capo («LUN» sopra, «14/09» sotto) e la colonna delle ore si stringe. */
    .fc .fc-timegrid .fc-col-header-cell-cushion {
        font-size: .625rem;
        letter-spacing: 0;
        line-height: 1.2;
        padding: .25rem 0;
        white-space: normal;
    }

    .fc .fc-timegrid-axis-cushion,
    .fc .fc-timegrid-slot-label-cushion {
        font-size: .625rem;
        padding-left: .125rem;
        padding-right: .125rem;
    }

    .fc .fc-timegrid-axis-cushion {
        line-height: 1.15;
        max-width: 2.5rem;
        white-space: normal;
    }

    .fc .fc-timegrid-event .gt-calendar-event,
    .fc .fc-daygrid-event .gt-calendar-event { padding: .0625rem .125rem; }

    .fc .fc-timegrid-event .gt-calendar-event-title {
        font-size: .625rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fc .fc-timegrid-event .gt-calendar-event-context { display: none; }
    .fc .fc-timegrid .fc-daygrid-more-link { font-size: .625rem; }

    .board-calendar-view,
    .calendar-index .fc-view-harness { -webkit-overflow-scrolling: touch; }

    .gt-calendar-surface { padding: .75rem; }
}