/* ⚠️ COPIA degli stili dell'agenda del gestionale: i blocchi <style> di
   AVISNext/Components/Generic/GrigliaMensile.razor, AVISNext/Components/Generic/PianoGiornata.razor e
   AVISNext/Components/Pages/Calendari/GiornataOperativa.razor. Se cambiano, ricopiarli. */

/* ── GrigliaMensile.razor ── */
    /* ⚠️ Le classi di stato delle pagine (bordo della selezione, tratteggio del fuori periodo…) hanno
       la STESSA specificità di quelle qui sotto — una classe — quindi vince l'ultima dichiarata nel
       documento. Funziona perché il blocco di stile delle pagine sta in fondo al file, cioè dopo
       questo componente nel DOM: spostarlo prima farebbe sparire quelle decorazioni, senza errori.

       Nota: questo blocco viene emesso una volta per ogni istanza del componente. Oggi ce n'è una per
       pagina; comparendone due nella stessa schermata converrebbe spostarlo nel foglio di stile. */

    /* Le misure che distinguono la griglia piena dal mini calendario stanno in variabili: il resto
       dell'impianto è identico, ed è il motivo per cui questo componente esiste. */
    .vr-cal { display:grid; grid-template-columns:repeat(7,1fr);
              --vr-cal-gap:4px; --vr-cal-altezza:64px; --vr-cal-raggio:6px;
              gap:var(--vr-cal-gap); }
    .vr-cal--mini { --vr-cal-gap:3px; --vr-cal-altezza:40px; --vr-cal-raggio:5px; }

    /* Colore secondario del tema e non un'opacità: sfumando il testo principale si scendeva sotto il
       contrasto minimo, il secondario invece è tarato per reggerlo in ogni palette. */
    .vr-cal-testata { text-align:center; font-size:.75rem; font-weight:600; color:var(--mud-palette-text-secondary); padding:2px 0; }
    .vr-cal--mini .vr-cal-testata { font-size:.72rem; padding:1px 0; }

    .vr-cal-vuota { min-height:var(--vr-cal-altezza); }

    .vr-cal-cella { position:relative; min-height:var(--vr-cal-altezza);
                    border-radius:var(--vr-cal-raggio); padding:4px 6px; cursor:pointer;
                    border:1px solid var(--mud-palette-lines-default); transition:filter .12s; }
    .vr-cal-cella:hover { filter:brightness(1.12); }

    /* Nel mini il giorno è piccolo e il contenuto si legge solo se centrato; nella griglia piena il
       numero sta in alto a sinistra e sotto c'è spazio per il conteggio. */
    .vr-cal--mini .vr-cal-cella { display:flex; flex-direction:column;
                                  align-items:center; justify-content:center; padding:0; }

    .vr-cal-numero { font-size:.8rem; font-weight:600; }
    .vr-cal--mini .vr-cal-numero { font-size:.85rem; font-weight:500; line-height:1.1; }

    /* Larghezza fissa in ENTRAMBE le taglie, non solo nella griglia piena: è il titolo a decidere
       dove cadono le frecce, quindi lasciandolo dimensionare sul testo "Marzo" e "Settembre"
       spostano il pulsante di avanzamento e cambiare mese diventa un tiro al bersaglio mobile.
       Il flex:1 lo tiene comunque attaccato alle due frecce se la colonna è più larga del minimo. */
    .vr-cal-titolo { min-width:190px; text-align:center; text-transform:capitalize; }
    .vr-cal-titolo.vr-cal-titolo--mini { min-width:132px; flex:1 1 auto; }

    .vr-cal:focus { outline:none; }

/* ── PianoGiornata.razor ── */
    .vr-giorno { position:relative; display:flex; overflow-x:auto; padding:12px 0 26px; }
    /* La colonna delle ore resta agganciata a sinistra mentre il piano scorre: senza, scorrendo
       verso destra si perde il riferimento orario proprio quando serve. */
    .vr-giorno-ore { position:sticky; left:0; z-index:2; width:62px; flex:0 0 62px;
                     background:var(--mud-palette-surface); }
    .vr-giorno-ora { position:absolute; left:0; transform:translateY(-50%); font-size:.72rem; opacity:.7; }
    .vr-giorno-piano { position:relative; flex:1 1 auto;
                       border-left:1px solid var(--mud-palette-lines-default); }
    .vr-giorno-linea { position:absolute; left:0; right:0; height:0;
                       border-top:1px dashed var(--mud-palette-lines-default); opacity:.6; }
    /* Bordo colorato PIÙ una velatura sfumata: il solo contorno, fra due colori vicini, si
       riconosceva male a colpo d'occhio. La sfumatura parte dall'alto e si spegne verso il basso,
       così il colore si vede ma il testo resta su fondo pulito — che era il motivo per cui i
       riquadri pieni erano stati abbandonati.
       Le tinte si compongono con le varianti -rgb della palette: sono le uniche che si possono
       usare con un'opacità, e restano corrette al cambio di tema. */
    .vr-slot { position:absolute; border-radius:6px; padding:2px 6px; overflow:hidden;
               background:var(--mud-palette-surface);
               border:2px solid var(--mud-palette-lines-default);
               font-size:.72rem; line-height:1.2; }
    .vr-slot-compatto { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* Verde = c'è un appuntamento. Grigio = posto ancora vuoto. Niente blu da nessuna parte. */
    .vr-slot-occupato { border-color:var(--mud-palette-success);
                        background:linear-gradient(180deg,
                                       rgba(var(--mud-palette-success-rgb), .22) 0%,
                                       rgba(var(--mud-palette-success-rgb), .04) 70%,
                                       rgba(var(--mud-palette-success-rgb), 0) 100%),
                                   var(--mud-palette-surface); }
    .vr-slot-libero { border-color:var(--mud-palette-lines-default);
                      background:linear-gradient(180deg,
                                     rgba(var(--mud-palette-dark-rgb), .10) 0%,
                                     rgba(var(--mud-palette-dark-rgb), .02) 70%,
                                     rgba(var(--mud-palette-dark-rgb), 0) 100%),
                                 var(--mud-palette-surface); }

    /* Azzurro = proposta fatta al donatore, che non l'ha ancora confermata. È uno stato di
       ATTESA, non un posto preso: il colore diverso serve a non contarlo come confermato
       guardando la giornata. */
    .vr-slot-proposta { border-color:var(--mud-palette-info);
                        border-style:dashed;
                        background:linear-gradient(180deg,
                                       rgba(var(--mud-palette-info-rgb), .22) 0%,
                                       rgba(var(--mud-palette-info-rgb), .04) 70%,
                                       rgba(var(--mud-palette-info-rgb), 0) 100%),
                                   var(--mud-palette-surface); }
    .vr-slot-spento { opacity:.45; text-decoration:line-through; }
    .vr-slot-ora { font-weight:600; }
    .vr-slot-tipo { opacity:.8; }
    .vr-slot-chi { margin-top:2px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* Un posto su cui si può agire lo dice il cursore. Chi non ha la funzionalità di prenotazione
       non riceve nessuna di queste classi, e la vista resta quella di sola lettura. */
    .vr-slot-agibile { cursor:pointer; }
    .vr-slot-agibile:hover { filter:brightness(1.08); box-shadow:0 0 0 2px var(--mud-palette-primary); }
    /* In spostamento i bersagli si accendono e tutto il resto si spegne: la griglia deve dire da
       sola dove si può posare l'appuntamento, senza che l'operatore provi a tentativi. */
    .vr-slot-bersaglio { cursor:pointer; outline:2px dashed var(--mud-palette-primary); outline-offset:-2px; }
    .vr-slot-bersaglio:hover { filter:brightness(1.12); }
    .vr-slot-inerte { opacity:.35; cursor:not-allowed; }

    /* Occupato da un'altra sede: banda doppia sul bordo sinistro.
       ⚠️ NON si abbassa l'opacità come per l'inerte, e NON si toglie il cursore a mano. Quel posto
       è preso davvero e si apre come tutti gli altri — è dentro il dettaglio che i pulsanti sono
       spenti. Sbiadirlo lo farebbe leggere come «meno reale» e il cursore di divieto come «non si
       guarda»: cambia chi ci comanda, non quanto esiste né quanto si legge. */
    .vr-slot-altrui { border-left:6px double var(--mud-palette-warning); }

    /* L'appuntamento cercato: un ANELLO attorno al riquadro, non un riempimento diverso. I colori
       pieni sono già impegnati a dire lo stato del posto (verde/azzurro/grigio) e sovrascriverli
       farebbe sparire proprio l'informazione che si è venuti a leggere. Il battito si ferma dopo
       tre giri: serve a farsi trovare, non a restare acceso mentre si lavora. */
    .vr-slot-evidenziato { outline:3px solid var(--mud-palette-secondary); outline-offset:2px;
                           z-index:3; animation:vr-slot-pulsa 1.1s ease-out 3; }

    @keyframes vr-slot-pulsa {
        0%   { box-shadow:0 0 0 0 var(--mud-palette-secondary); }
        70%  { box-shadow:0 0 0 12px transparent; }
        100% { box-shadow:0 0 0 0 transparent; }
    }

/* ── GiornataOperativa.razor ── */

    /* Impianto e misure della griglia stanno in GrigliaMensile: qui restano i soli colori di stato,
       che dipendono da cosa questa vista sta mostrando (posti LIBERI, non occupati). */
    /* I due pannelli in alto stanno in una riga flex e non in una MudGrid: le colonne della
       griglia vanno a scatti di dodicesimi, e con la griglia del mese larga 270px la colonna da un
       terzo lasciava un vuoto in mezzo che allontanava i filtri dal calendario a cui si
       riferiscono. Cosi il pannello del mese si dimensiona sul proprio contenuto e i filtri
       cominciano subito dopo, prendendosi tutto quel che resta. */
    .vr-riga-alto { display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; }
    .vr-pannello-mese { flex:0 0 auto; }
    .vr-pannello-filtri { flex:1 1 460px; min-width:0; }

    /* I due pannelli in alto alti uguale: sfalsati sembrerebbero due passi in sequenza invece di
       due parti della stessa scelta. */
    .vr-alto { height:100%; }

    /* Piu piccola in larghezza e in altezza: qui e un selettore di giorni, non la griglia su cui
       si configura. Le misure stanno in variabili dentro GrigliaMensile, quindi si sovrascrivono
       da fuori senza toccare il componente.

       Larghezza FISSA e non max-width: il pannello si dimensiona sul proprio contenuto, quindi con
       un massimo il mese piu stretto lo restringeva e tutta la colonna ballava passando da un mese
       all'altro. Le celle restano intorno ai 36x34px: il minimo in cui il conteggio "12/12" ci sta
       su una riga sola senza andare a capo. */
    .vr-mini-stretta { width:266px; }
    .vr-cal.vr-mini-fitta { --vr-cal-altezza:34px; --vr-cal-gap:2px; --vr-cal-raggio:4px; }

    /* Rimpicciolita la cella, il numero del giorno e il conteggio vanno rimpiccioliti con lei:
       lasciati alla taglia del componente riempirebbero la cella fino a toccarne i bordi.
       Selettori a due classi perche' quelli di GrigliaMensile lo sono gia'. */
    .vr-cal--mini.vr-mini-fitta .vr-cal-numero { font-size:.78rem; }
    .vr-cal--mini.vr-mini-fitta .vr-cal-testata { font-size:.68rem; }

    /* La larghezza fissa del titolo serve a tenere ferme le frecce, ma quella del componente e'
       tarata sulla griglia larga: qui sfonderebbe il pannello. Scende al minimo che regge
       "Settembre". */
    .vr-mini-stretta .vr-cal-titolo--mini { min-width:108px; }

    .vr-mini-conteggio { font-size:.62rem; opacity:.85; line-height:1.1; }
    .vr-mini-scelto { border:2px solid var(--mud-palette-primary); font-weight:700; }
    /* Tinte tenui come nella griglia del calendario (CalendarioGiornateTab): vedi la nota là. */
    .vr-mini-aperto { background:color-mix(in srgb, var(--mud-palette-success) 28%, var(--mud-palette-surface)); }
    .vr-mini-pieno { background:color-mix(in srgb, var(--mud-palette-warning) 28%, var(--mud-palette-surface)); }
    .vr-mini-chiuso { background:transparent; opacity:.5; }
    .vr-mini-legenda { display:inline-block; width:12px; height:12px; border-radius:3px;
                       border:1px solid var(--mud-palette-lines-default); }

/* Nella demo le celle del mese sono link: niente sottolineatura né colore dei link. */
a.vr-cal-cella { color: inherit; text-decoration: none; }