/* Fogli di stile del BackOffice — pagine su SiteBS4.Master (Bootstrap 4.0.0).
   Regola generale: non combattere Bootstrap con valori in pixel, ma scalarne la base.
   La densità compatta che serve al backoffice si ottiene con html{font-size}, così
   tutte le misure in rem di Bootstrap (bottoni, campi, spaziature) restano proporzionate. */

html {
    /* Base 13px invece dei 16px di Bootstrap: l'intero sistema si rimpicciolisce
       in modo coerente. Sostituisce il vecchio body{font-size:12px}, che rimpiccioliva
       il testo ma lasciava bottoni e campi alla misura piena. */
    font-size: 13px;
}

body {
    padding-bottom: 20px;
    height: 100%;
}

    body.develop {
        background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0), rgb(255, 216, 0,0.3), rgba(255, 216, 0, 0));
    }

/* Densità delle tabelle: gli stessi valori di .table-sm di Bootstrap.
   Serve finché il markup usa `table-condensed` (classe Bootstrap 3, inerte in BS4);
   quando le 30 occorrenze saranno migrate a `table-sm` questa regola può sparire. */
.table th, .table td {
    padding: .3rem .5rem;
}

h5, h6 {
    font-size: 1rem;
}

.padding-top {
    padding-top: 15px;
}

/* Classe Bootstrap 3 riesumata a mano: usata solo da WebForms/ModelloModifica.aspx.
   Va rimossa insieme al markup di quella pagina, sostituita da .card/.card-header. */
.card-default > .card-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1250px;
    }
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

select {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {

    .body-content {
        padding: 0;
    }

    /* Colonne tecniche delle GridView (ID, chiavi): nascoste da 768px in su.
       Nota: sotto i 768px tornano visibili. */
    .gridcolumhided {
        display: none;
    }

    .uc-file-upload {
        position: relative;
        padding: 10px;
    }

        .uc-file-upload .file-ready {
            display: none;
            background-color: #008000;
            color: white;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 10px;
            position: absolute;
            top: 10px;
            right: 10px;
        }

    /* Classe inventata a mano, non è Bootstrap: usata da 10 fra pagine e user control
       per allineare a destra l'ultima colonna delle liste. Va sostituita dalla griglia
       BS4 quando si migra ciascun file. */
    .col-xs-110 {
        box-sizing: border-box;
        color: rgb(51, 51, 51);
        display: block;
        float: right;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
        height: 22px;
        line-height: 20px;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }
}

/* Raccordo fra il JavaScript di jQuery UI e il suo foglio di stile: il primo e' 1.12.1,
   il secondo 1.11.4, e le due versioni costruiscono i bottoni in modo diverso. In 1.11
   l'etichetta stava in uno <span class="ui-button-text"> che il CSS impaginava; in 1.12 e'
   un nodo di testo dentro il bottone, e quello span non esiste piu'.
   Senza queste regole: la x delle finestre di dialogo mostra la scritta "Close" accanto
   all'icona, e i tasti in fondo alla finestra escono senza margini interni (77x20 invece
   di 105x32). Si toglie il giorno in cui il CSS viene portato a 1.12. */
.ui-button.ui-button-icon-only {
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}

    .ui-button.ui-button-icon-only .ui-button-icon {
        text-indent: 0;
    }

.ui-dialog-buttonpane .ui-button {
    padding: .4em 1em;
}

/* Pagina di login (Controls/Login/ucLoginForm.ascx).
   Prima il riquadro si centrava con display:table piu' un table-cell in mezzo, ma la
   catena delle altezze non arrivava fino a html/body: il risultato era che restava in
   alto invece che al centro. Con flex basta dire quanto e' alto il contenitore.
   Tolta anche .login-btn, che restava solo dentro un commento. */
.bko-login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

    .bko-login .card {
        width: 100%;
        max-width: 380px;
    }

/* --- utility del backoffice (prefisso bko-) --- */

/* Respiro verticale fra le righe dei filtri. Non e' Bootstrap: era dichiarata identica
   nel <style> di tredici pagine, con meta' dei casi in PADDING-TOP maiuscolo. Qui una
   volta sola. */
.rowpading {
    padding-top: 7px;
    padding-bottom: 7px;
}

/* Il riquadro azzurro che fa da titolo di pagina. Stessa storia: tredici copie identiche
   nei <style> delle pagine. Attenzione a non ridefinire .alert insieme a questa: .alert e'
   un componente Bootstrap vero, e sovrascriverlo deforma anche gli avvisi di validazione. */
.alerttop {
    padding: 4px;
    margin-bottom: 5px;
}


/* Riga di azioni in fondo a un pannello di modale. Serve perche' i bottoni non si
   possono spostare in un .modal-footer vero: stanno dentro gli asp:Panel che il
   code-behind accende e spegne. */
.bko-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    padding-top: .75rem;
    margin-top: .75rem;
    border-top: 1px solid #e9ecef;
}

/* Casella di spunta con la sua etichetta. Non si usa .form-check di Bootstrap perche'
   asp:CheckBox rende un <span> attorno a input+label quando ha CssClass, e il
   posizionamento assoluto di .form-check-input si romperebbe. */
.bko-check {
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .bko-check label {
        margin-bottom: 0;
        font-weight: 400;
    }

/* Gruppo di scelte in riga. Come .bko-check, non si usa .form-check di Bootstrap
   perche' asp:RadioButton rende un <span> attorno a input+label quando ha CssClass. */
.bko-radio {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-right: .9rem;
}

    .bko-radio label {
        margin-bottom: 0;
        font-weight: 400;
    }

/* asp:RadioButtonList con RepeatLayout="Flow" rende input+label sciolti */
.bko-radiolist {
    display: inline-block;
    margin-right: 1rem;
}

    .bko-radiolist input {
        margin-right: .3rem;
    }

    .bko-radiolist label {
        margin: 0 .9rem 0 0;
        font-weight: 400;
    }

/* Intestazione della griglia che resta visibile mentre si scorre l'elenco.
   asp:GridView non rende un <thead>: mette le intestazioni nella prima riga del
   <tbody>, quindi serve anche il secondo selettore. Per avere un <thead> vero
   occorrerebbe HeaderRow.TableSection nel code-behind. */
.bko-sticky thead th,
.bko-sticky > tbody > tr:first-child > th {
    position: sticky;
    top: 0;
    background: #fff;
    box-shadow: inset 0 -2px 0 #dee2e6;
    z-index: 1;
}

/* Numeri incolonnati */
.bko-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Icone Material usate nelle liste. Erano 20+ attributi style= ripetuti a mano.
   Il blu e' quello di Bootstrap (#007bff) e non piu' il "blue" puro del browser. */
/* Il foglio di Material Icons arriva da Google Fonts ed e' linkato DOPO Site.css: la sua
   regola .material-icons { font-size: 24px } vince su qualunque .bko-icona-* a classe
   singola. Per questo la dimensione di partenza la lascia dare a lui, e i due modificatori
   sono scritti a doppia classe - altrimenti non farebbero niente, come e' stato finora. */
.bko-icona {
    color: #007bff;
    vertical-align: middle;
}

.material-icons.bko-icona-lg {
    font-size: 30px;
}

.material-icons.bko-icona-sm {
    font-size: 18px;
}

.bko-icona-rossa {
    color: #dc3545;
}

.bko-logo16 {
    width: 16px;
}

.bko-logo20 {
    width: 20px;
}

/* Coperta mostrata durante il caricamento di una lista (asp:UpdateProgress) */
.bko-caricamento {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background-color: rgba(0, 0, 0, .7);
    text-align: center;
}

.bko-caricamento-testo {
    position: fixed;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    padding: 2rem 3rem;
    background-color: #fff;
    border-radius: .3rem;
    font-size: 1.5rem;
}

/* Intestazioni con spiegazione: il puntino sotto dice che c'e' un testo di aiuto */
.table abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Titoletto di un gruppo di filtri. Senza questa regola <legend> usa la misura
   predefinita del browser (19,5 px) e sembra un titolo di sezione. */
fieldset > legend {
    width: 100%;
    margin-bottom: .5rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid #dee2e6;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6c757d;
}

/* --- pastiglie dei filtri attivi --- */
.bko-pastiglie {
    margin-top: .5rem;
}

    .bko-pastiglie:empty {
        display: none;
    }

.bko-pastiglia {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: 85%;
    font-weight: 500;
    padding: .3em .5em .3em .7em;
    margin: 0 .35rem .35rem 0;
}

.bko-pastiglia-x {
    background: none;
    border: 0;
    color: inherit;
    opacity: .75;
    font-size: 1.05em;
    line-height: 1;
    padding: 0 .15rem;
    cursor: pointer;
}

    .bko-pastiglia-x:hover {
        opacity: 1;
    }

.bko-azzera-tutto {
    padding: 0 .25rem;
    vertical-align: baseline;
}

/* Gruppo di filtro impostato: si vede anche dentro il pannello, non solo nelle pastiglie */
.bko-attivo {
    position: relative;
}

    .bko-attivo > .col-form-label,
    .bko-attivo > label.col-form-label {
        font-weight: 600;
        color: #004085;
    }

    .bko-attivo::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: 2px;
        background: #007bff;
    }

/* Conteggio dei risultati accanto al bottone di ricerca */
.bko-conteggio {
    display: inline-block;
    white-space: nowrap;
    color: #495057;
    font-variant-numeric: tabular-nums;
}

/* --- registro delle attivita' (AttivitaList) -------------------------------
   La riga che si apre col chevron sotto una modifica. Poche regole: la tabella
   dentro e' una table-sm normale, qui si tolgono solo i bordi che la farebbero
   sembrare una griglia dentro una griglia. */

.bko-riga-dettaglio > td.bko-dettaglio-cella {
    padding: 0;
    border-top: 0;
    background-color: #f8f9fa;
}

.bko-dettaglio {
    margin: 0;
    background-color: transparent;
}

    .bko-dettaglio th {
        border-top: 0;
        font-weight: 600;
        white-space: nowrap;
    }

    /* i valori possono essere lunghi e andare a capo: si mostrano per intero
       invece di sfondare la larghezza della pagina */
    .bko-dettaglio td {
        white-space: pre-wrap;
        word-break: break-word;
        vertical-align: top;
    }

.bko-espandi {
    color: #6c757d;
    cursor: pointer;
}

    .bko-espandi:hover {
        color: #212529;
    }

    /* la freccia gira quando la riga e' aperta, cosi' si vede a colpo d'occhio
       quali righe si stanno guardando */
    .bko-espandi[aria-expanded="true"] .material-icons {
        transform: rotate(180deg);
    }

.bko-nowrap {
    white-space: nowrap;
}