/* ====================================================================
   TEMA — "Azzurro calmo"

   Un posto solo per i colori della app. Prima erano trentuno valori
   scritti a mano in sette file: cambiarne uno voleva dire trovarli
   tutti, e sbagliarne qualcuno.

   Il principio della palette e' che il rilievo viene dal CONTRASTO DEL
   TESTO, non dalla saturazione del fondo. Un fondo tenue con sopra un
   testo carico si stacca lo stesso e non urla. Da qui la forma di ogni
   famiglia di colore: un fondo chiaro, un bordo appena piu' scuro, e un
   inchiostro abbastanza deciso da leggersi sopra.

   Questo foglio si carica DOPO Bootstrap, cosi' le sue variabili
   sovrascrivono quelle di serie senza ricompilare niente.
   ==================================================================== */

:root {
    /* --- fondi e testi --- */
    --fondo:        #f4f6fa;   /* la pagina */
    --superficie:   #ffffff;   /* le schede sopra la pagina */
    --riga:         #dfe5ee;   /* i bordi che separano */
    --riga-tenue:   #eef1f6;   /* i bordi dentro un elenco */
    --inchiostro:       #1f2937;
    --inchiostro-medio: #4a5b73;
    --inchiostro-tenue: #8b98ab;

    /* --- primario: informa, non allarma --- */
    --blu-fondo:   #dce9fb;
    --blu-fondo-2: #c9dcf7;   /* pulsanti, stati premuti */
    --blu-bordo:   #bcd6f5;
    --blu:         #14508f;
    --blu-barra:   #b9d3f2;   /* le barre dei grafici */
    --blu-scelto:  #8fb8e8;   /* la barra su cui hai cliccato */
    --blu-scuro:   #1d3f6b;   /* la barra in alto */
    --blu-testata: #e8eef7;
    --blu-appena:  #f2f7fe;   /* il velo sulle righe nuove */

    /* --- caldo: cio' che chiede attenzione senza essere un problema --- */
    --caldo-fondo: #fbeacd;
    --caldo-barra: #f0a868;
    --caldo:       #8a6212;
    --caldo-forte: #b06414;   /* sul bianco serve piu' carico */

    /* --- verde: cio' che e' a posto --- */
    --verde-fondo: #dcefe2;
    --verde-barra: #8fc9a8;
    --verde:       #256b45;

    /* --- rosso: cio' che e' andato storto --- */
    --rosso-fondo: #fae3e6;
    --rosso-bordo: #f3c9cf;
    --rosso-barra: #e59aa4;
    --rosso:       #9c2a37;

    /* --- grigio: cio' che e' finito o non riguarda piu' --- */
    --spento-fondo: #eceff3;
    --spento:       #77818f;

    /* --- lilla: la storia, il passato che si puo' guardare --- */
    --lilla-fondo: #ebe4f7;
    --lilla-bordo: #d8ccf0;
    --lilla:       #5b3f8f;

    /* ================================================================
       Le variabili di Bootstrap, ridefinite sulla nostra palette.
       Da qui in giu' non ci sono scelte nuove: si traduce soltanto.
       ================================================================ */
    --bs-body-bg: var(--fondo);
    --bs-body-color: var(--inchiostro);
    --bs-border-color: var(--riga);
    --bs-secondary-color: var(--inchiostro-medio);

    --bs-primary: #4b83cf;
    --bs-primary-rgb: 75, 131, 207;
    --bs-link-color: var(--blu);
    --bs-link-color-rgb: 20, 80, 143;
    --bs-link-hover-color: #0e3a69;

    --bs-emphasis-color: var(--inchiostro);
    --bs-secondary-bg: var(--spento-fondo);
    --bs-tertiary-bg: var(--fondo);
}

/* --------------------------------------------------------------------
   PULSANTI
   Il primario e' un pastello con testo carico, non una tinta piena.
   -------------------------------------------------------------------- */

.btn-primary {
    --bs-btn-bg: var(--blu-fondo-2);
    --bs-btn-border-color: var(--blu-bordo);
    --bs-btn-color: var(--blu);
    --bs-btn-hover-bg: #b8d1f4;
    --bs-btn-hover-border-color: #a6c6ef;
    --bs-btn-hover-color: var(--blu);
    --bs-btn-active-bg: #a6c6ef;
    --bs-btn-active-border-color: #93b9ea;
    --bs-btn-active-color: var(--blu);
    --bs-btn-disabled-bg: var(--blu-fondo);
    --bs-btn-disabled-border-color: var(--blu-bordo);
    --bs-btn-disabled-color: var(--inchiostro-tenue);
}

.btn-outline-primary {
    --bs-btn-color: var(--blu);
    --bs-btn-border-color: var(--blu-bordo);
    --bs-btn-hover-bg: var(--blu-fondo);
    --bs-btn-hover-border-color: var(--blu-bordo);
    --bs-btn-hover-color: var(--blu);
    --bs-btn-active-bg: var(--blu-fondo-2);
    --bs-btn-active-border-color: var(--blu-bordo);
    --bs-btn-active-color: var(--blu);
}

.btn-outline-secondary {
    --bs-btn-color: var(--inchiostro-medio);
    --bs-btn-border-color: #c3cede;
    --bs-btn-hover-bg: var(--spento-fondo);
    --bs-btn-hover-border-color: #b4c1d4;
    --bs-btn-hover-color: var(--inchiostro);
    --bs-btn-active-bg: #e2e6ed;
    --bs-btn-active-border-color: #b4c1d4;
    --bs-btn-active-color: var(--inchiostro);
}

.btn-outline-danger {
    --bs-btn-color: var(--rosso);
    --bs-btn-border-color: var(--rosso-bordo);
    --bs-btn-hover-bg: var(--rosso-fondo);
    --bs-btn-hover-border-color: var(--rosso-bordo);
    --bs-btn-hover-color: var(--rosso);
    --bs-btn-active-bg: #f6d5da;
    --bs-btn-active-border-color: var(--rosso-bordo);
    --bs-btn-active-color: var(--rosso);
}

.btn-light {
    --bs-btn-bg: var(--spento-fondo);
    --bs-btn-border-color: var(--riga);
    --bs-btn-color: var(--inchiostro-medio);
    --bs-btn-hover-bg: #e2e6ed;
    --bs-btn-hover-border-color: #cfd6e0;
    --bs-btn-hover-color: var(--inchiostro);
}

/* --------------------------------------------------------------------
   AVVISI
   -------------------------------------------------------------------- */

.alert-primary {
    --bs-alert-bg: var(--blu-fondo);
    --bs-alert-border-color: var(--blu-bordo);
    --bs-alert-color: var(--blu);
}

.alert-danger {
    --bs-alert-bg: var(--rosso-fondo);
    --bs-alert-border-color: var(--rosso-bordo);
    --bs-alert-color: var(--rosso);
}

.alert-warning {
    --bs-alert-bg: var(--caldo-fondo);
    --bs-alert-border-color: #f2dcb2;
    --bs-alert-color: var(--caldo);
}

.alert-light {
    --bs-alert-bg: var(--superficie);
    --bs-alert-border-color: var(--riga);
    --bs-alert-color: var(--inchiostro-medio);
}

/* --------------------------------------------------------------------
   ETICHETTE E BARRE
   -------------------------------------------------------------------- */

.text-bg-primary {
    background-color: var(--blu-fondo) !important;
    color: var(--blu) !important;
}

.text-bg-secondary {
    background-color: var(--spento-fondo) !important;
    color: var(--spento) !important;
}

.progress { background-color: var(--spento-fondo); }
.progress-bar { background-color: var(--blu-barra); }
.progress-bar.bg-danger { background-color: var(--rosso-barra) !important; }
.progress-bar.bg-warning { background-color: var(--caldo-barra) !important; }
.progress-bar.bg-success { background-color: var(--verde-barra) !important; }

/* --------------------------------------------------------------------
   SUPERFICI
   -------------------------------------------------------------------- */

.card {
    --bs-card-bg: var(--superficie);
    --bs-card-border-color: var(--riga);
}

.card-header.bg-white { background-color: var(--superficie) !important; }

.list-group {
    --bs-list-group-bg: var(--superficie);
    --bs-list-group-border-color: var(--riga-tenue);
    --bs-list-group-color: var(--inchiostro);
    --bs-list-group-action-hover-bg: #f7f9fc;
}

.table { --bs-table-border-color: var(--riga); }
.table-light {
    --bs-table-bg: var(--fondo);
    --bs-table-color: var(--inchiostro-medio);
}

.modal-content {
    background-color: var(--superficie);
    border-color: var(--riga);
}
.modal-header, .modal-footer { border-color: var(--riga-tenue); }

/* --------------------------------------------------------------------
   MODULI
   -------------------------------------------------------------------- */

.form-control, .form-select {
    border-color: #ccd5e2;
    color: var(--inchiostro);
}
.form-control:focus, .form-select:focus {
    border-color: var(--blu-bordo);
    box-shadow: 0 0 0 .2rem rgba(75, 131, 207, .18);
}
.form-check-input:checked {
    background-color: var(--blu-barra);
    border-color: var(--blu-bordo);
}
.form-check-input:focus {
    border-color: var(--blu-bordo);
    box-shadow: 0 0 0 .2rem rgba(75, 131, 207, .18);
}

/* Il focus da tastiera deve restare visibile: e' l'unico modo di
   sapere dove si e' senza il mouse. */
:focus-visible {
    outline: 2px solid var(--blu-barra);
    outline-offset: 2px;
}

.text-muted { color: var(--inchiostro-tenue) !important; }
.text-danger { color: var(--rosso) !important; }
.text-success { color: var(--verde) !important; }
.text-body { color: var(--inchiostro) !important; }


/* --------------------------------------------------------------------
   La storia delle letture: il pannello che si apre sotto una voce
   -------------------------------------------------------------------- */
.storia-corpo {
    background: var(--blu-appena); border: 1px solid var(--blu-bordo);
    border-radius: .4rem; padding: .6rem .8rem; margin: .3rem 0 .6rem;
    font-size: .84rem;
}
.storia-titolo { margin-bottom: .35rem; }
.storia-riga {
    display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap;
    padding: .25rem 0; border-top: 1px solid var(--riga-tenue);
}
.storia-data { color: var(--inchiostro-medio); min-width: 6rem; }
.storia-valore { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 7rem; }
.storia-diff { font-variant-numeric: tabular-nums; font-size: .8rem; }
.storia-diff.su { color: var(--verde); }
.storia-diff.giu { color: var(--caldo-forte); }
.storia-togli { margin-left: auto; font-size: .78rem; color: var(--inchiostro-tenue); text-decoration: none; }
.storia-togli:hover { color: var(--rosso); }

/* Le azioni accanto a una voce - storia, chiudi, riapri, togli,
   modifica - sono etichette, non parole nel testo: un colore per
   funzione, pastello, cosi' si riconoscono prima di leggerle. */
.azione {
    display: inline-block; font-size: .66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    padding: .1rem .5rem; border-radius: 999px; margin-left: .3rem;
    text-decoration: none; border: 1px solid transparent; line-height: 1.5;
}
.azione:hover { filter: brightness(.94); text-decoration: none; }
.azione-storia   { background: var(--lilla-fondo);  color: var(--lilla);  border-color: var(--lilla-bordo); }
.azione-chiudi   { background: var(--caldo-fondo);  color: var(--caldo); }
.azione-riapri   { background: var(--verde-fondo);  color: var(--verde); }
.azione-togli    { background: var(--rosso-fondo);  color: var(--rosso);  border-color: var(--rosso-bordo); }
.azione-modifica { background: var(--spento-fondo); color: var(--spento); }

.pillola-chiusa {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .1rem .45rem; border-radius: 999px; font-weight: 600;
    background: var(--spento-fondo); color: var(--spento);
}
/* Una voce chiusa: c'e', ma in grigio. Non conta piu', e si vede. */
.chiusa { opacity: .55; }
.chiusa .form-control { visibility: hidden; }

/* Il campo di una voce in ritardo: colorato lui, non la pagina. */
.form-control.da-aggiornare {
    border-color: var(--caldo-barra);
    background-color: var(--caldo-fondo);
}
.form-control.da-aggiornare::placeholder { color: var(--caldo); }