/*
    L'impianto: barra laterale collassabile, barra alta con briciole e ricerca, contenuto.
    Sul telefono la laterale diventa un cassetto e compare la barra in basso, raggiungibile
    col pollice, con le sole destinazioni che si usano in mobilita'.
*/

.app {
    display: grid;
    grid-template-columns: var(--laterale) 1fr;

    /*
        100% e non 100vh: html e body sono gia' al 100%, e 100vh e' l'altezza del riquadro di
        impaginazione, che NON si accorcia quando il browser aggiunge qualcosa sopra la pagina -
        una barra di un'estensione, l'avviso "Claude sta esaminando questo browser", la barra
        degli indirizzi che su telefono compare e scompare. In quei casi l'impianto diventa piu'
        alto dello spazio visibile e ricompare la barra di scorrimento della PAGINA, accanto a
        quella della tabella: due barre affiancate, che e' il difetto che si stava correggendo.
    */
    height: 100%;
    transition: grid-template-columns var(--transizione);
}

.app.stretta {
    grid-template-columns: var(--laterale-stretta) 1fr;
}

/* ---------- barra laterale ---------- */

.laterale {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border-right: 1px solid var(--riga);
    overflow: hidden;
}

.laterale-testa {
    display: flex;
    align-items: center;
    gap: var(--s2);
    height: var(--barra-alta);
    padding: 0 var(--s3);
    border-bottom: 1px solid var(--riga);
    flex: 0 0 auto;
}

.marchio {
    font-weight: 700;
    font-size: var(--t-medio);
    letter-spacing: -.02em;
    color: var(--verde);
    white-space: nowrap;
}

.laterale-voci {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--s2) 0;
}

.gruppo-titolo {
    padding: var(--s3) var(--s3) var(--s1);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grigio-tenue);
    white-space: nowrap;
}

.voce {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 7px var(--s3);
    color: var(--inchiostro);
    border-left: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}

.voce:hover {
    background: var(--superficie-alt);
    text-decoration: none;
}

.voce.attiva {
    background: var(--verde-tenue);
    border-left-color: var(--verde);
    font-weight: 600;
    color: var(--verde-scuro);
}

.voce-segno {
    flex: 0 0 18px;
    text-align: center;
    font-size: var(--t-medio);
}

.voce-testo {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app.stretta .voce-testo,
.app.stretta .gruppo-titolo,
.app.stretta .marchio {
    display: none;
}

.laterale-piede {
    flex: 0 0 auto;
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
}

/* ---------- colonna di destra ---------- */

.colonna {
    display: flex;
    flex-direction: column;
    min-width: 0;

    /*
        min-height: 0 anche qui, e non e' una ripetizione inutile: perche' una tabella scorra
        DENTRO, ogni antenato della catena deve poter diventare piu' piccolo del proprio
        contenuto. Elementi di griglia e di flex hanno per difetto un minimo pari al contenuto,
        quindi basta che manchi a un livello solo perche' la barra ricompaia fuori - o, peggio,
        perche' le righe finiscano tagliate senza nessuna barra.
    */
    min-height: 0;
}

.barra-alta {
    display: flex;
    align-items: center;
    gap: var(--s3);
    height: var(--barra-alta);
    padding: 0 var(--s4);
    background: var(--superficie);
    border-bottom: 1px solid var(--riga);
    flex: 0 0 auto;
}

.briciole {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--t-piccolo);
    color: var(--grigio);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.briciole .sep { color: var(--grigio-tenue); }

.briciole .ultima {
    color: var(--inchiostro);
    font-weight: 600;
}

.ricerca {
    position: relative;
    margin-left: auto;
    width: min(420px, 40vw);
}

.ricerca .campo { padding-left: 28px; padding-right: 44px; }

/*
    La campanella, in fondo a destra della barra. Il puntino e' rosso e piccolo, ma non e' mai
    l'unico segnale: il pulsante dice a parole quante sono le nuove, e il titolo pure.
*/
.campanella { position: relative; flex: 0 0 auto; }

.campanella-pulsante { position: relative; padding: 6px; }

.campanella-puntino {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--allarme);
    box-shadow: 0 0 0 2px var(--superficie);
}

.campanella-elenco {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    width: min(380px, calc(100vw - 32px));
    background: var(--superficie);
    border: 1px solid var(--riga);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgb(0 0 0 / .12);
    overflow: hidden;
}

.campanella-elenco ul { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }

.campanella-elenco li + li { border-top: 1px solid var(--riga); }

.campanella-elenco li a {
    display: flex;
    gap: var(--s3);
    justify-content: space-between;
    align-items: baseline;
    padding: var(--s2) var(--s3);
    color: var(--inchiostro);
    text-decoration: none;
}

.campanella-elenco li a:hover,
.campanella-elenco li a:focus-visible { background: var(--superficie-alt); }

/* le nuove dall'ultima visita: in grassetto e con la barretta, non solo col colore */
.campanella-elenco li.nuova a { font-weight: 600; box-shadow: inset 3px 0 0 var(--allarme); }

.campanella-oggetto { min-width: 0; overflow-wrap: anywhere; }

.campanella-quando { flex: 0 0 auto; color: var(--grigio); font-size: var(--t-micro); }

.campanella-vuota { margin: 0; padding: var(--s3); color: var(--grigio); font-size: var(--t-piccolo); }

.campanella-tutte {
    display: block;
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--riga);
    text-align: center;
    font-size: var(--t-piccolo);
}

/* chi e' collegato, a destra della campanella: foto o sagoma, e il nickname */
.persona {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    flex: 0 0 auto;
    height: var(--alto-controllo);
    padding: 0 var(--s2) 0 2px;
    border-radius: 999px;
    color: var(--inchiostro);
    font-weight: 500;
    text-decoration: none;
}

.persona:hover { background: var(--superficie-alt); text-decoration: none; }

.persona-foto {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.persona-sagoma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--verde-tenue);
    color: var(--verde-scuro);
}

.persona-nome { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ricerca-segno {
    position: absolute;
    left: var(--s2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--grigio-tenue);
    pointer-events: none;
}

.ricerca-tasto {
    position: absolute;
    right: var(--s2);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mono);
    font-size: var(--t-micro);
    color: var(--grigio-tenue);
    border: 1px solid var(--riga);
    border-radius: 3px;
    padding: 0 4px;
    pointer-events: none;
}

.contenuto {
    flex: 1 1 auto;
    overflow: auto;
    padding: var(--s4);
}

/*
    Si riconoscono con :has: se dentro il contenuto c'e' una tabella, lo scorrimento e' suo.
    Cosi' non serve che ogni pagina si ricordi di mettersi una classe addosso - e una pagina nuova
    si comporta bene senza che nessuno gliel'abbia detto.

    Solo le pagine dove la tabella E' la pagina - figlia diretta del contenuto, o dentro un solo
    involucro: dove sta in una colonna accanto ad altro (Ticket, esecuzioni dei funnel: elenco e
    dettaglio) bloccare il contenuto tagliava tutto il resto, e li' scorre la pagina.

    Le pagine che sono UNA tabella e basta non devono scorrere: scorre la tabella dentro, cosi'
    l'intestazione resta ferma, la paginazione resta sempre raggiungibile in fondo, e soprattutto
    non ci sono due barre di scorrimento affiancate che si contendono la rotella.

    Con "min-height: 0" si insiste apposta: un elemento flessibile ha come minimo naturale la
    dimensione del suo contenuto, quindi senza quella riga la tabella cresce oltre lo schermo e la
    barra ricompare fuori invece che dentro.
*/
.contenuto:has(> .tabella-guscio, > div > .tabella-guscio) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/*
    Un div messo attorno alla tabella solo per darle una classe (UtentiElenco: .utenti-tabella per
    lo stile delle righe) spezzava la catena flessibile: il div cresceva quanto la tabella, il
    contenuto lo tagliava con overflow hidden e la pagina non scorreva piu' in nessun modo. Un
    involucro cosi' - figlio diretto del contenuto che contiene direttamente la tabella - entra
    nella catena. Le griglie elenco/dettaglio non c'entrano: li' il guscio sta dentro una colonna.
*/
.contenuto:has(> .tabella-guscio, > div > .tabella-guscio) > div:has(> .tabella-guscio) {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
}

.contenuto:has(> .tabella-guscio, > div > .tabella-guscio) .tabella-guscio {
    display: flex;
    flex-direction: column;

    /*
        0 1 auto e non 1 1 auto: con 25 righe corte il guscio si allungava fino in fondo allo
        schermo e la paginazione finiva staccata dall'ultima riga, con un vuoto in mezzo. Cosi'
        il guscio e' alto quanto le righe che ha - e puo' ancora rimpicciolire, quindi quando
        le righe non ci stanno scorre dentro invece di uscire dallo schermo.
    */
    flex: 0 1 auto;
    min-height: 0;
}

.contenuto:has(> .tabella-guscio, > div > .tabella-guscio) .tabella-scorri {
    flex: 1 1 auto;
    min-height: 0;

    /* niente calc(100vh - 210px): quel numero era gia' sbagliato ogni volta che cambiava
       l'altezza dell'intestazione, e nessuno se ne sarebbe accorto subito */
    max-height: none;
}

.pagina-testa {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    margin-bottom: var(--s3);

    /* su schermi stretti i filtri vanno a capo invece di schiacciare il titolo */
    flex-wrap: wrap;
}

/*
    I filtri attivi stanno in fondo alla riga del titolo, spinti a destra: si leggono insieme al
    titolo - sono la ragione per cui si vedono quelle righe li' - e non rubano una riga alla
    tabella, che e' la cosa che si sta guardando.
*/
.pagina-testa .filtri {
    /*
        subito dopo il titolo e non spinti al bordo destro: sono la riga che dice perche' si
        stanno vedendo quelle righe li', e a mille pixel di distanza dal titolo non si legge piu'
        come una cosa sola
    */
    margin-bottom: 0;
}

/* il titolo di una pagina di lavoro non deve gridare: sopra c'e' gia' la briciola che dice
   dove siamo, e lo spazio che si risparmia qui diventa una riga in piu' di tabella */
.pagina-testa h1 { font-size: var(--t-grande); }

/*
    Le azioni della pagina a destra, sulla riga del titolo: una riga intera sotto il titolo per un
    pulsante solo erano trenta pixel tolti alla tabella. Centrate e non sulla linea di base: sono
    pulsanti, non testo.
*/
.pagina-testa-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    gap: var(--s2);
    margin-left: auto;
}

.pagina-testa .sottotitolo {
    font-size: var(--t-piccolo);
    color: var(--grigio);
}

/* ---------- telefono ---------- */

.solo-telefono { display: none; }

@media (max-width: 900px) {
    /* sul telefono la barra e' stretta: resta la foto, il nome si legge nel menu */
    .persona-nome { display: none; }

    .app { grid-template-columns: 1fr; }

    .laterale {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--laterale);
        z-index: 40;
        transform: translateX(-100%);
        transition: transform var(--transizione);
        box-shadow: var(--ombra-alta);
    }

    .app.cassetto-aperto .laterale { transform: translateX(0); }

    .velo {
        position: fixed;
        inset: 0;
        z-index: 30;
        border: 0;
        padding: 0;
        background: rgba(22, 33, 28, .4);
    }

    .contenuto {
        padding: var(--s3);
        padding-bottom: calc(var(--barra-basso) + var(--s3));
    }

    .ricerca {
        width: auto;
        flex: 1 1 auto;
    }

    .ricerca-tasto { display: none; }
    .briciole { display: none; }

    .solo-telefono { display: inline-flex; }

    .barra-basso {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 20;
        height: var(--barra-basso);
        display: flex;
        background: var(--superficie);
        border-top: 1px solid var(--riga);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .barra-basso a {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: var(--t-micro);
        color: var(--grigio);
    }

    .barra-basso a.attiva {
        color: var(--verde);
        font-weight: 600;
    }

    .barra-basso a:hover { text-decoration: none; }
}

@media (min-width: 901px) {
    .barra-basso { display: none; }
    .velo { display: none; }
}

/*
    La barra di caricamento: accesa da wk.js al clic su un collegamento, spenta quando la pagina
    nuova e' disegnata. Compare dopo un attimo, cosi' sulle pagine veloci non lampeggia.
*/
html.caricando body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 30%;
    height: 3px;
    background: var(--verde);
    opacity: 0;
    animation: caricamento-appare 0s linear .15s forwards, caricamento-scorre 1.1s ease-in-out .15s infinite;
}

html.caricando { cursor: progress; }

@keyframes caricamento-appare { to { opacity: 1; } }

@keyframes caricamento-scorre {
    from { left: -30%; }
    to { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html.caricando body::before { width: 100%; animation: caricamento-appare 0s linear .15s forwards; }
}