/* ══════════════════════════════════════════════════════════════════
       GRIGLIA PLANNING — RIGHE-CARD VETTORIALI  (rifacimento 10/8/26)
       La tabella e' border-collapse:SEPARATE, quindi border-radius e
       box-shadow NATIVI funzionano sulle celle: niente piu' gradienti
       dipinti a mano, mosaici radiali o fasce finte. Con border-spacing
       verticale il canale fra le righe e' spazio VERO, e le ombre delle
       card ci cadono dentro senza che nulla le copra. Tutto scala con lo
       zoom perche' lo disegna il browser, non io.
       ══════════════════════════════════════════════════════════════════ */
    .matrix-table {
        border-spacing: 0 6px !important;
        background: #E4E4E8;
    }
    .matrix-table thead th, .matrix-table tbody td { border: 0 !important; }

    /* via TUTTE le simulazioni accumulate */
    .matrix-table thead th.th-data::before, .matrix-table thead th.th-data::after,
    .matrix-table thead th.th-etic::before, .matrix-table thead th.th-etic::after,
    .matrix-table thead th.th-avail::before, .matrix-table thead th.th-avail::after,
    .matrix-table thead th.th-need::before, .matrix-table thead th.th-need::after,
    .matrix-table thead th.th-delta::before, .matrix-table thead th.th-delta::after,
    .matrix-table thead th.th-liberi::before, .matrix-table thead th.th-liberi::after,
    .matrix-table tr.riga-progetto > td::before, .matrix-table tr.riga-progetto > td::after,
    .matrix-table tr.riga-persona > td::before, .matrix-table tr.riga-persona > td::after,
    .matrix-table tr.riga-aggiungi > td::before, .matrix-table tr.riga-aggiungi > td::after {
        content: none !important;
    }

    /* ── carta e ombra: una regola per tutte le righe-card ── */
    .matrix-table thead th.th-data, .matrix-table thead th.th-day, .matrix-table thead th.th-etic,
    .matrix-table thead th.th-avail, .matrix-table thead th.th-need,
    .matrix-table thead th.th-delta, .matrix-table thead th.th-liberi,
    .matrix-table tr.riga-progetto > td,
    .matrix-table tr.riga-persona > td, .matrix-table tr.riga-aggiungi > td {
        box-shadow: 0 2px 5px -1px rgba(8,24,37,0.26);
    }
    /* ── il canale della TESTATA viaggia con la card (10/8/26) ──
       Nel corpo il canale e' il fondo della tabella e scorre insieme alle
       righe: nessun problema. In testata no: le card sono sticky e il
       canale, restando indietro, diventa una FINESTRA da cui si vedono
       passare i progetti. La fascia se la porta dietro ognuna come
       seconda ombra opaca, alta quanto il border-spacing. L'ombra vera
       e' elencata PRIMA, quindi resta disegnata sopra la fascia. */
    .matrix-table thead th.th-data, .matrix-table thead th.th-day, .matrix-table thead th.th-etic,
    .matrix-table thead th.th-avail, .matrix-table thead th.th-need,
    .matrix-table thead th.th-delta, .matrix-table thead th.th-liberi,
    .matrix-table thead tr.month-header-row-plan th {
        box-shadow: 0 2px 5px -1px rgba(8,24,37,0.26), 0 6px 0 #E4E4E8;
    }
    /* ── L'ANGOLO TONDO E' UN BUCO: va tappato (10/8/26) ──
       Dove la prima cella si arrotonda, la cella NON dipinge: quel mezzaluna
       resta trasparente e, appena la griglia scorre, ci si vedono passare
       dentro le celle dei giorni della STESSA riga (scure sui totali,
       bianche sui progetti). Risultato: angolo che sembra dritto. A pagina
       appena costruita lo scorrimento e' a zero, non c'e' niente sotto e
       l'angolo sembra perfetto — per questo il difetto compariva solo a
       caricamento finito.
       Lo tappa un'ombra spostata a SINISTRA: un'ombra esterna dipinge solo
       fuori dal box, cioe' ESATTAMENTE nella mezzaluna. Il resto della copia
       finisce oltre il bordo dell'area e lo taglia il contenitore.
       -14px (> del raggio 12) e 1px di allargamento coprono anche la prima
       riga di pixel, dove una copia non allargata lascia un filo.
       NON usare questo trucco per fare l'aria dal bordo: li' la copia
       resterebbe visibile e affiorerebbe come uno scalino (provato e
       buttato). L'aria e' il bordo del contenitore, in fondo al file. */
    .matrix-table thead th.th-data, .matrix-table thead th.th-etic.m-col-1,
    .matrix-table thead th.th-avail.m-col-1, .matrix-table thead th.th-need.m-col-1,
    .matrix-table thead th.th-delta.m-col-1, .matrix-table thead th.th-liberi.m-col-1 {
        box-shadow: 0 2px 5px -1px rgba(8,24,37,0.26), 0 6px 0 #E4E4E8,
                    -14px 0 0 1px #E4E4E8;
    }
    .matrix-table tr.riga-progetto > td.m-col-1 {
        box-shadow: 0 2px 5px -1px rgba(8,24,37,0.26), -14px 0 0 1px #E4E4E8;
    }
    /* selettori ALMENO specifici quanto i vecchi (tr:nth-child(2) th.th-day),
       o i gradienti-fascia di prima riaffiorano: erano la 'trasparenza' e
       la divisione in due della riga DATA */
    .matrix-table thead tr th.th-data, .matrix-table thead tr th.th-etic,
    .matrix-table thead tr th.th-etic.m-col-1, .matrix-table thead tr th.th-etic.m-col-2,
    .matrix-table thead tr th.th-etic.m-col-3, .matrix-table thead tr:nth-child(2) th.th-day {
        background: #FBFBFD !important;
    }
    /* la riga dei MESI non e' una card: e' etichettatura sul fondo grigio.
       Card e' solo la linguetta MESE / ANNO. */
    /* la riga dei mesi ha la stessa carta della sua etichetta MESE / ANNO:
       e' una fascia unica, non due materiali diversi */
    .matrix-table thead tr.month-header-row-plan th {
        background: #FBFBFD !important; box-shadow: none !important;
        border: 0 !important; color: var(--hig-testo3) !important;
    }
    /* MESE / ANNO: (3,3) con !important, quindi e' QUESTA la regola che
       decide l'ombra della linguetta — non quella piu' in basso, che e'
       solo (2,2). Se il tappo dell'angolo manca qui, l'angolo alto a
       sinistra torna dritto appena la griglia scorre (Massimo 10/8/26). */
    .matrix-table thead tr.month-header-row-plan th.th-mese-lab {
        background: #FBFBFD !important;
        box-shadow: 0 2px 5px -1px rgba(8,24,37,0.26), 0 6px 0 #E4E4E8,
                    -14px 0 0 1px #E4E4E8 !important;
    }
    .matrix-table thead th.th-avail, .matrix-table thead th.th-need,
    .matrix-table thead th.th-delta, .matrix-table thead th.th-liberi,
    .matrix-table thead th.th-avail.m-col-1, .matrix-table thead th.th-need.m-col-1,
    .matrix-table thead th.th-delta.m-col-1, .matrix-table thead th.th-liberi.m-col-1,
    .matrix-table thead th.th-avail.m-col-2, .matrix-table thead th.th-need.m-col-2,
    .matrix-table thead th.th-delta.m-col-2, .matrix-table thead th.th-liberi.m-col-2,
    .matrix-table thead th.th-avail.m-col-3, .matrix-table thead th.th-need.m-col-3,
    .matrix-table thead th.th-delta.m-col-3, .matrix-table thead th.th-liberi.m-col-3 {
        background: #143646 !important;
    }
    .matrix-table tr.riga-progetto > td, .matrix-table tr.riga-progetto > td.m-col-1,
    .matrix-table tr.riga-progetto > td.m-col-2, .matrix-table tr.riga-progetto > td.m-col-3 {
        background: #fff !important;
    }
    .matrix-table tr.riga-progetto.aperta > td, .matrix-table tr.riga-progetto.aperta > td.m-col-1,
    .matrix-table tr.riga-progetto.aperta > td.m-col-2, .matrix-table tr.riga-progetto.aperta > td.m-col-3 {
        background: #E9EFF3 !important;
    }
    .matrix-table tr.riga-persona > td, .matrix-table tr.riga-persona > td.m-col-1,
    .matrix-table tr.riga-persona > td.m-col-2, .matrix-table tr.riga-aggiungi > td {
        background: #FCFBFA !important;
    }
    /* festivi e OGGI tornano tinte semplici, sopra la carta */
    .matrix-table thead th.col-festa:not(.oggi-col), .matrix-table td.col-festa:not(.oggi-col) {
        background: #F0EDEB !important;
    }
    .matrix-table thead th.th-avail.col-festa:not(.oggi-col), .matrix-table thead th.th-need.col-festa:not(.oggi-col),
    .matrix-table thead th.th-delta.col-festa:not(.oggi-col), .matrix-table thead th.th-liberi.col-festa:not(.oggi-col) {
        background: #1D4457 !important;
    }
    .matrix-table thead th.th-avail.oggi-col, .matrix-table thead th.th-need.oggi-col,
    .matrix-table thead th.th-delta.oggi-col, .matrix-table thead th.th-liberi.oggi-col {
        background: #2E5065 !important;
    }

    /* ── angoli: la prima cella di ogni riga apre la card ── */
    .matrix-table thead th.th-data, .matrix-table thead th.th-etic.m-col-1,
    .matrix-table thead th.th-avail.m-col-1, .matrix-table thead th.th-need.m-col-1,
    .matrix-table thead th.th-delta.m-col-1, .matrix-table thead th.th-liberi.m-col-1,
    .matrix-table tr.riga-progetto > td.m-col-1 {
        border-radius: 12px 0 0 12px;
    }

    /* ── BLOCCO APERTO: le righe della squadra sono una card sola ──
       lo spread verticale della stessa carta riempie il canale fra loro,
       cosi' sembrano un pezzo unico pur restando righe separate. */
    .matrix-table tr.riga-persona > td.m-col-2, .matrix-table tr.riga-persona > td:not(.m-col-1),
    .matrix-table tr.riga-aggiungi > td:not(.m-col-1):not(.m-col-2) {
        box-shadow: 0 -4px 0 #FCFBFA, 0 4px 0 #FCFBFA;
    }
    .matrix-table tr.riga-persona > td.m-col-1, .matrix-table tr.riga-aggiungi > td.m-col-1 {
        background: #E4E4E8 !important; box-shadow: none !important;
    }
    /* il corpo rientra: parte dalla colonna dei nomi */
    
    
    .matrix-table tr.riga-persona:has(+ tr.riga-aggiungi) > td.m-col-2 {
        border-bottom-left-radius: 12px;
        box-shadow: 0 -4px 0 #FCFBFA, 0 4px 8px -2px rgba(8,24,37,0.26);
    }
    .matrix-table tr.riga-persona:has(+ tr.riga-aggiungi) > td:not(.m-col-1):not(.m-col-2) {
        box-shadow: 0 -4px 0 #FCFBFA, 0 4px 8px -2px rgba(8,24,37,0.26);
    }
    /* il piede: solo la linguetta del bottone, sollevata sul canale */
    .matrix-table tr.riga-aggiungi > td, .matrix-table tr.riga-aggiungi > td.m-col-2 {
        background: #E4E4E8 !important; box-shadow: none !important;
    }
    
    /* l'ombra del tetto cade sulla squadra sotto */
    .matrix-table tr.riga-progetto.aperta > td {
        box-shadow: 0 4px 8px -2px rgba(8,24,37,0.30);
        position: relative; z-index: 3;
    }
    /* anche il tetto ha l'angolo tondo da tappare */
    .matrix-table tr.riga-progetto.aperta > td.m-col-1 {
        box-shadow: 0 4px 8px -2px rgba(8,24,37,0.30), -14px 0 0 1px #E4E4E8;
    }

    /* ── ARIA DAL BORDO (2mm): le card non toccano il bordo dell'area ──
       E' un BORDO DEL CONTENITORE, non un margine della tabella. Il bordo
       sta FUORI dall'area che scorre: le celle non ci possono passare sotto
       per costruzione, quindi non serve nessuna fascia opaca a coprirle.
       Con il margine della tabella invece la colonnina restava dentro l'area
       di scorrimento ed era una finestra: si vedeva spuntare la coda delle
       date, e ogni tentativo di tapparla con un'ombra lasciava uno scalino.
       Perche' funzioni, le colonne fisse si attestano a left 0/108/240:
       il bordo sposta gia' l'origine dell'area di 8px. */
    /* !important: il contenitore ha la utility .bg-white di Bootstrap, che
       e' gia' !important e vincerebbe lasciando un bordino bianco */
    .drag-scroll:has(.matrix-table) {
        background: #E4E4E8 !important;
        border-left: 8px solid #E4E4E8;
    }
    /* GLI SCOSTAMENTI DELLE COLONNE FISSE NON STANNO QUI (10/8/26).
       '.matrix-table .m-col-N' e' (2,0) e perde contro
       '.matrix-table td.m-col-N' (2,1) piu' su nel file: le vecchie
       dichiarazioni left:128/248 qui in fondo non hanno MAI avuto effetto,
       e per giunta erano calcolate su larghezze 120/120 che non esistono
       (le vere sono 108/132/96). Unica sorgente: la regola 'Geometria
       dichiarata PER COSTRUZIONE', dove ora leggi left 0 / 108 / 240. */
    .matrix-table thead th.th-data,
    .matrix-table thead th.th-mese-lab { left: 0 !important; }
    /* il campo unico MESE / ANNO: linguetta come tutte le altre */
    .matrix-table thead th.th-mese-lab {
        position: sticky; z-index: 30 !important;
        min-width: 336px; max-width: 336px; width: 336px;
        text-align: center !important; vertical-align: middle;
        font-size: 0.68rem; font-weight: 700; letter-spacing: 1.2px;
        color: var(--hig-testo3) !important;
        background: #FBFBFD !important;
        border-radius: 12px 0 0 12px;
        box-shadow: 0 2px 5px -1px rgba(8,24,37,0.26), 0 6px 0 #E4E4E8,
                    -14px 0 0 1px #E4E4E8;
    }

    /* ── OGGI nel corpo: tinta, non anello (10/8/26) ──
       l'anello per cella spezzava la card. Nel corpo la colonna di oggi si
       riconosce da un velo di tint PIENO (mai trasparente: sulle sticky
       comporrebbe col bianco della pagina), in testata e' gia' tinta piena. */
    .matrix-table tr.riga-progetto > td.oggi-col { background: #EAF2F6 !important; }
    

    /* ── SEPARATORI NELLE QUATTRO RIGHE IN NEGATIVO (Massimo 10/8/26) ──
       Senza, i numeri di giorni diversi si leggevano come una fila unica e
       non si capiva quale valore stesse sotto quale colonna. Un filo chiaro
       inset sul fianco destro: nelle righe-card i bordi non si usano
       (border: 0 !important li spegne), quindi il filo e' un'ombra interna.
       I :not() servono a NON separare l'etichetta dalla freccia nelle tre
       colonne fisse, dove una riga in mezzo non vuol dire niente. */
    .matrix-table thead th.th-avail:not(.m-col-1):not(.m-col-2):not(.m-col-3),
    .matrix-table thead th.th-need:not(.m-col-1):not(.m-col-2):not(.m-col-3),
    .matrix-table thead th.th-delta:not(.m-col-1):not(.m-col-2):not(.m-col-3),
    .matrix-table thead th.th-liberi:not(.m-col-1):not(.m-col-2):not(.m-col-3) {
        box-shadow: 0 2px 5px -1px rgba(8,24,37,0.26), 0 6px 0 #E4E4E8,
                    inset -1px 0 0 rgba(255,255,255,0.11);
    }

    /* ══════════════════════════════════════════════════════════════════
       CORPO DELLE PERSONE: UNA CARD SOLA, SOSPESA COME LE ALTRE
       (Massimo 10/8/26)
       Le righe della squadra devono galleggiare sullo STESSO fondo delle
       altre card. La colonna cliente resta canale puro — niente striscia
       di un altro colore che continua la riga a sinistra — e il corpo e'
       una carta sola che parte dal bordo dei nomi.
       ══════════════════════════════════════════════════════════════════ */
    /* La prima riga perdeva la saldatura: la regola dell'ombra del tetto
       (piu' su nel file, (5,3)) sostituiva TUTTA la box-shadow, e fra la
       prima e la seconda persona restava aperto un canale grigio. Qui
       l'ombra del tetto e la saldatura convivono. */
    .matrix-table tr.riga-progetto.aperta + tr.riga-persona > td:not(.m-col-1) {
        box-shadow: 0 4px 0 #FCFBFA, inset 0 7px 6px -4px rgba(8,24,37,0.18);
    }
    .matrix-table tr.riga-progetto.aperta + tr.riga-persona > td.m-col-2 {
        border-top-left-radius: 12px;
    }
    /* squadra di una persona sola: la stessa riga apre e chiude la carta */
    

    /* IL PIEDE E' UNA LINGUETTA, NON UN BOTTONE APPOGGIATO: stessa carta
       del corpo, angoli bassi tondi (gli alti no, continua il corpo) e la
       sua ombra. Sale di 12px per chiudere il canale e i 4px di padding
       della riga, cosi' pende dal corpo invece di galleggiare staccata.
       overflow VISIBLE sulla cella, o la m-col-2 la ghigliottina. */
    /* LA COLONNA CLIENTE RESTA GRIGIA ANCHE A GRIGLIA SCORSA.
       La saldatura del corpo (0 ±4px di carta) sta sulle celle dei GIORNI,
       che scorrendo finiscono SOTTO la colonna fissa: le loro copie di
       carta dipingono il canale per tutta la larghezza, colonna cliente
       compresa, e a sinistra restavano blocchi grigi separati da fessure
       color carta. A scorrimento zero non si vede niente, per questo era
       sfuggito. La m-col-1 e' sticky (z 22) e i giorni no: la sua fascia
       di canale vince e ridipinge grigio (Massimo 10/8/26). */
    .matrix-table tr.riga-persona > td.m-col-1,
    .matrix-table tr.riga-aggiungi > td.m-col-1 {
        box-shadow: 0 -6px 0 #E4E4E8, 0 6px 0 #E4E4E8 !important;
    }
    /* separatori fra i valori delle persone, come nelle righe in negativo.
       Qui e' un BORDO e non un'ombra interna: le celle hanno gia' la
       saldatura nella box-shadow e non si potrebbe allungare la lista
       senza riscriverla in tutte le varianti. Con box-sizing: border-box
       il bordo sta dentro i 55px, quindi le colonne non si spostano. */
    .matrix-table tr.riga-persona:not(.riga-aggiungi) > td.cell-asseg {
        border-right: 1px solid rgba(60,60,67,0.10) !important;
    }
    
    .matrix-table tr.riga-aggiungi .btn-assegna {
        background: #FCFBFA; border: 0 !important;
        border-radius: 0 0 12px 12px;
        padding: 4px 18px; margin-left: 26px;
        box-shadow: 0 3px 6px -2px rgba(8,24,37,0.30);
        position: relative; top: -12px; z-index: 2;
        color: var(--dan-primary); font-weight: 600;
        transition: background .15s, box-shadow .15s;
    }
    /* il vecchio '.btn-assegna:hover' (2,0) era diventato muto: la regola
       qui sopra e' (3,2) e vinceva anche da non-hover. La linguetta il suo
       ritorno al passaggio del mouse lo deve avere (10/8/26). */
    .matrix-table tr.riga-aggiungi .btn-assegna:hover {
        background: #fff;
        box-shadow: 0 4px 9px -2px rgba(8,24,37,0.34);
    }

    /* ══════════════════════════════════════════════════════════════════
       SCHEDA PLANNING: UNO SFONDO SOLO, TRE CARD SOSPESE (Massimo 10/8/26)
       Il grigio del canale non e' piu' solo dentro la griglia: e' il fondo
       DELLA SCHEDA. Sopra ci galleggiano il Bilancio Operativo, la testata
       della pianificazione e le righe-card, tutti con lo stesso raggio e la
       stessa ombra. Prima le due testate erano riquadri squadrati appoggiati
       al bordo e la griglia sotto sembrava di un'altra applicazione.
       La testata della pianificazione e' STACCATA dalla sua griglia: non e'
       piu' il cappello di un contenitore, e' una card come le altre.
       ══════════════════════════════════════════════════════════════════ */
    #view-planning { background: #E4E4E8; border-radius: 16px; padding: 8px 0; }
    #view-planning .row.mb-4 { margin-bottom: 8px !important; }
    /* border: 0 anche qui, o resta il filo. '.card' (riga 610) dichiara
       'border: 0.5px solid ... !important' e il template mette inline
       'border-top-color: var(--dan-primary) !important': messi insieme
       fanno un filo PETROLIO da mezzo pixel sopra la testata. Si vede
       appena, e non deve vedersi (Massimo 10/8/26). */
    #view-planning #card-pianificazione {
        margin-bottom: 0 !important; background: transparent !important;
        border: 0 !important;
    }
    #view-planning #card-pianificazione > .card-body { background: transparent !important; }
    /* gli 8px di margine allineano le due card al filo delle righe-card,
       che rientrano dello stesso passo (border-left del contenitore) */
    #view-planning #card-bilancio-plan,
    #view-planning #header-pianificazione {
        border-radius: 12px; border: 0 !important;
        box-shadow: 0 2px 5px -1px rgba(8,24,37,0.26);
        margin-left: 8px; margin-right: 8px;
        background: #fff !important;
    }
    /* NIENTE overflow:hidden sulla card del grafico: ritagliava il fondo
       dell'area di scorrimento e con esso l'asse delle ascisse. Gli angoli
       li arrotondano le due meta' per conto loro (Massimo 10/8/26). */
    #view-planning #card-bilancio-plan > .card-header,
    #view-planning #card-bilancio-plan > .card-body,
    #view-planning #card-bilancio-plan .drag-scroll { background: #fff !important; }
    #view-planning #card-bilancio-plan > .card-header {
        border-bottom: 0 !important; border-radius: 12px 12px 0 0;
    }
    /* il raggio va anche sull'area di scorrimento e non solo sul card-body:
       la .drag-scroll e' bianca e opaca e, senza, copriva lo spigolo tondo
       della card. Il suo overflow ritaglia anche la colonna sticky delle
       ordinate, che e' bianca pure lei (Massimo 10/8/26). */
    #view-planning #card-bilancio-plan > .card-body,
    #view-planning #card-bilancio-plan > .card-body > .drag-scroll {
        border-radius: 0 0 12px 12px;
    }
    #view-planning #header-pianificazione { border-bottom: 0 !important; margin-bottom: 8px; }