/*
 * Il vestito di 23022-Main: Bootstrap fa quasi tutto, qui c'è solo quello che manca.
 *
 * Il tema è scuro come nella cassa — questo programma lo si guarda dallo stesso schermo — e
 * il colore lo decide Bootstrap con le sue variabili, non regole scritte a mano: un colore
 * fisso in un «color:» è quello che poi non segue il tema e si scopre mesi dopo.
 */

body { min-height: 100vh; }

/* L'ingresso: un riquadro in mezzo, e nient'altro da guardare. */
.videata-accesso {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.riquadro-accesso {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

/* La barra in cima: chi è entrato, e la via d'uscita sempre nello stesso posto. */
.barra-alta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.barra-alta .chi { margin-left: auto; color: var(--bs-secondary-color); font-size: 0.9rem; }

.corpo { padding: 1rem; }

/*
 * Le tabelle scorrono dentro il loro contenitore e non fanno scorrere la pagina di lato: una
 * tabella larga il doppio dello schermo si legge scorrendo, cioè non trovando mai due cose
 * insieme.
 */
.scorre { overflow-x: auto; }

.tabella td, .tabella th { vertical-align: middle; }
.tabella .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella .comandi { white-space: nowrap; text-align: right; }
.tabella .comandi .btn { margin-left: 0.25rem; }

/* Lo stato di un pacchetto o di una configurazione, che si legge da lontano. */
.stato { font-size: 0.78rem; padding: 0.2rem 0.5rem; border-radius: 1rem; white-space: nowrap; }
.stato-bozza      { background: rgba(255, 193, 7, 0.2);  color: #ffca2c; }
.stato-pubblicato { background: rgba(25, 135, 84, 0.25); color: #75b798; }
.stato-ritirato   { background: rgba(220, 53, 69, 0.2);  color: #ea868f; }

/* L'impronta: si guarda per confronto, non si legge — carattere fisso e non va a capo. */
.impronta {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* Il contenuto di una configurazione: è JSON, e va scritto in un carattere che incolonna. */
.contenuto {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    min-height: 20rem;
    white-space: pre;
}

/*
 * Il riquadro della versione nuova sta in basso a destra e non in cima: in cima ci sono i
 * comandi, e un avviso appoggiato lì si legge come parte di quello che copre.
 */
.versione-nuova {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 1200;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--bs-warning);
    border-radius: 2rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.85rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.vuoto { padding: 2rem 1rem; text-align: center; color: var(--bs-secondary-color); }