html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.ql-editor {
    font-family: 'Titillium Web', sans-serif !important;
    line-height: 1.6;
}

.ql-editor p,
.ql-editor ol li,
.ql-editor ul li {
    font-size: 0.95rem !important;
}

.ql-editor.ql-blank::before {
    font-family: 'Titillium Web', sans-serif;
    font-size: 0.95rem;
}

.it-header-slim-right-zone .dropdown.show .dropdown-toggle > .icon {
    transform: none !important;
}

div.dataTables_wrapper div.dataTables_filter input {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    color: #495057;
    background-color: #fff;
    border-color: #0066cc;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, .25);
}

div.dataTables_wrapper div.dataTables_length select {
    min-width: 5rem;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

div.dataTables_wrapper .pagination .page-item:hover {
    background-color: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: transparent !important;
    color: #0d6efd !important;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin: 0 0.1rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button a {
    background: transparent !important;
    border: none !important;
    color: #0d6efd !important;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin: 0 0.1rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover a {
    background-color: #0d6efd !important;
    color: #fff !important;
}

.dataTables_wrapper
.dataTables_paginate
.paginate_button.active {
    background-color: transparent !important;
    color: #0d6efd !important;
    border: 1px solid #0d6efd !important;
    border-radius: 0.25rem;
    margin: 0 0.1rem;
}

#custom-back-to-top {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#custom-back-to-top .icon {
    width: 24px;
    height: 24px;
    fill: white;
}

/* Messaggi di validazione (jQuery unobtrusive) con lo stile di Bootstrap Italia */
.invalid-feedback.field-validation-error {
    display: block;
}

.it-footer {
    position: absolute;
    width: 100%;
}

/* Testi lunghi nelle tabelle elenco: una riga, testo completo nel title */
.testo-troncato {
    max-width: 28rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.testo-a-capo {
    white-space: pre-line;
}

/* Elenco di checkbox lungo (es. template da associare a un servizio) */
.elenco-scelte {
    max-height: 16rem;
    overflow-y: auto;
}

/* Elenchi a schede (Servizi, Template, Utenti portale, Account API) */
.scheda-elenco {
    transition: box-shadow .2s ease, transform .2s ease;
}

.scheda-elenco:hover,
.scheda-elenco:focus-within {
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12) !important;
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .scheda-elenco { transition: none; }
    .scheda-elenco:hover, .scheda-elenco:focus-within { transform: none; }
}

.scheda-elenco.card .card-body .card-text {
    font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
}

.testo-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dati-scheda {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .75rem;
}

.dati-scheda dt {
    font-weight: 600;
    color: var(--bs-secondary, #5d7083);
}

.dati-scheda dd {
    margin: 0;
    min-width: 0;
}

.anteprima-messaggio {
    border-left: 3px solid var(--bs-primary, #0066cc);
    background: #f5f7fa;
    padding: .5rem .75rem;
    margin: 0;
    white-space: pre-line;
    font-style: normal;
}

.min-w-0 {
    min-width: 0;
}

/* Form: Bootstrap Italia porta l'etichetta attiva sopra il campo (translateY(-85%), circa 2rem) con posizione assoluta.
   Lo spazio va sopra al campo, altrimenti l'etichetta si sovrappone a titoli e testi che lo precedono.
   La distanza tra due campi resta quella di Bootstrap Italia (3rem). Vale per i form con classe form-appio. */
form.form-appio .form-group {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

form.form-appio .select-wrapper {
    margin-top: 2rem;
}

form.form-appio fieldset > legend {
    margin-bottom: .5rem;
}

/* Testi di aiuto sotto i campi: blocco con lo stesso rientro dell'etichetta su tutte le righe */
form.form-appio .form-group .form-text {
    display: block;
    padding: 0 .5rem;
}

/* Campo password in errore: l'icona di errore di Bootstrap Italia finirebbe sotto il pulsante mostra/nascondi */
form.form-appio .form-control.input-password.is-invalid {
    background-image: none;
}

/* Notifiche (Bootstrap Italia "notification") */
.appio-notifica {
    z-index: 1090;
    overflow: hidden;
}

.appio-notifica .h5 {
    position: relative;
    margin-bottom: .25rem;
}

.appio-notifica p {
    font-size: .95rem;
    color: #333;
}

.appio-notifica-tempo {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    transform: scaleX(0);
    background: currentColor;
    opacity: .35;
}

.appio-notifica.success .appio-notifica-tempo { color: #008055; }
.appio-notifica.info .appio-notifica-tempo { color: #0066cc; }
.appio-notifica.warning .appio-notifica-tempo { color: #a66300; }

.appio-notifica.con-tempo .appio-notifica-tempo {
    animation: appio-tempo var(--appio-durata, 6000ms) linear forwards;
}

@keyframes appio-tempo {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .appio-notifica.con-tempo .appio-notifica-tempo { animation: none; }
}

/* Accordion dei template associati a un servizio */
.accordion-template .accordion-button {
    font-weight: 600;
}

.scelta-template {
    border: 1px solid #d9dadb;
    border-radius: .5rem;
    padding: .75rem 1rem;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.scelta-template:hover {
    border-color: #0066cc;
}

.scelta-template:has(input:checked) {
    border-color: #0066cc;
    background: #f0f6fc;
    box-shadow: inset 3px 0 0 #0066cc;
}

.scelta-template:has(input:focus-visible) {
    outline: 2px solid #ff9900;
    outline-offset: 2px;
}

.scelta-template .form-check-label {
    cursor: pointer;
}

/* Invii: barra di avanzamento a segmenti (inviati / errori / esclusi) e riquadri filtro per esito */
.progress-invio {
    height: .5rem;
    background-color: #e8ebef;
    border-radius: 1rem;
    overflow: hidden;
}

.progress-invio-grande {
    height: 1rem;
}

.progress-invio .progress-bar {
    transition: width .6s ease;
}

.riquadro-esito {
    border: 1px solid #d9dadb;
    border-radius: .5rem;
    background: #fff;
    padding: .75rem 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.riquadro-esito:hover {
    border-color: #0066cc;
}

.riquadro-esito[aria-pressed="true"] {
    border-color: #0066cc;
    box-shadow: inset 0 -3px 0 #0066cc;
    background: #f0f6fc;
}

.tabella-messaggi td code {
    white-space: nowrap;
}

/* Nuovo invio: anteprima del messaggio come appare in app IO */
.anteprima-io {
    top: 1rem;
}

.anteprima-io-telefono {
    background: #fff;
    border: 1px solid #d9dadb;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}

.anteprima-io-testo {
    white-space: pre-line;
    overflow-wrap: anywhere;
    max-height: 22rem;
    overflow-y: auto;
}

.anteprima-io-extra {
    display: flex;
    align-items: center;
    background: #f0f6fc;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .9rem;
}

/* Invio massivo: caricamento del CSV */
.numero-passo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #0066cc;
    color: #fff;
    font-size: .9rem;
}

.zona-file {
    display: block;
    border: 2px dashed #9fb3c8;
    border-radius: .75rem;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    transition: border-color .15s ease, background-color .15s ease;
}

.zona-file:hover,
.zona-file.trascina,
.zona-file:focus-within {
    border-color: #0066cc;
    background: #f0f6fc;
}

.zona-file.con-file {
    border-style: solid;
    border-color: #008055;
    background: #f0faf6;
}

.riquadro-colonne {
    border-top: 1px solid #e8ebef;
    padding-top: 1rem;
}

.dettagli-colonne summary {
    cursor: pointer;
}

.caricamento-csv {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .85);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caricamento-csv[hidden] {
    display: none;
}

.caricamento-csv-box {
    text-align: center;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .15);
}

/* Etichette sempre sopra il campo nei form rifatti: anche quando il valore lo inserisce il JavaScript
   (es. titolo preso dal template) l'etichetta non si sovrappone al testo */
form.form-appio .form-group > label:not(.form-check-label) {
    transform: translateY(-85%);
    font-weight: 600;
    font-size: .875rem;
    color: hsl(0, 0%, 10%);
}

/* Testi inseriti dagli utenti (titoli, messaggi, nomi file) con parole lunghissime senza spazi:
   vanno a capo invece di allargare la pagina e farla scorrere in orizzontale */
main {
    overflow-wrap: break-word;
}

/* Finestre di conferma: nessuna ombra/bordo sopra i pulsanti */
.alert-modal .modal-footer {
    border-top: 0;
    box-shadow: none;
    padding-top: 0;
}

/* Finestre centrate: Bootstrap calcola l'altezza minima su margini di 8px, Bootstrap Italia usa 48px
   sopra e sotto. Senza questa correzione la finestra supera lo schermo e compare una barra di scorrimento. */
@media (min-width: 576px) {
    .modal-dialog.modal-dialog-centered {
        margin-top: 3rem;
        margin-bottom: 3rem;
        min-height: calc(100% - 6rem);
    }
}

/* Azioni dentro una scheda con stretched-link: devono restare cliccabili */
.scheda-elenco .azioni-scheda {
    position: relative;
    z-index: 2;
}

/* Logo del comune (da BackendAuth) nella barra in alto */
.logo-comune {
    object-fit: contain;
    flex-shrink: 0;
}

/* Nome dell'utente nel pulsante del menu, con il ruolo sotto più piccolo */
/* Chiavi API come campi password: occhio di Bootstrap Italia e, accanto, il pulsante per copiare */
.form-group .campo-chiave {
    padding-right: 5.5rem;
}

.copia-chiave {
    position: absolute;
    right: 2.5rem;
    top: 8px;
    z-index: 8;
    padding: 0 .5rem;
    background-color: #fff;
    border: 0;
    box-shadow: none;
}

.copia-chiave .icon {
    fill: hsl(210, 17%, 44%);
}

.copia-chiave:hover .icon,
.copia-chiave.copiato .icon {
    fill: #0066cc;
}

/* Dettaglio messaggio (modale dello storico invii) */
.dettaglio-messaggio .anteprima-io {
    background: #f6f9fc;
}

.riquadro-dettaglio {
    border: 1px solid #d9dadb;
    border-radius: 8px;
    padding: .75rem 1rem;
}

.dati-messaggio dt {
    font-weight: 600;
    color: #5d7083;
}

.dati-messaggio dd {
    margin-bottom: .5rem;
}

.copia-testo {
    line-height: 1;
    box-shadow: none;
}

/* Template del catalogo IO */
.badge-catalogo {
    background-color: #e5f1fa;
    color: #0059b3;
    border: 1px solid #0066cc;
}

.badge-da-completare {
    background-color: #fff3cd;
    color: #5c3d00;
    border: 1px solid #cc7a00;
}

/* Anteprima di un modello del catalogo, come appare in IO */
.anteprima-io {
    background: #fff;
    border: 1px solid #d9dadb;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.anteprima-io .titolo-io {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .5rem;
}

.anteprima-io .testo-io {
    white-space: pre-line;
    font-size: .9rem;
    line-height: 1.5;
}

.anteprima-io .parametro-io {
    font-family: var(--bs-font-monospace, monospace);
    font-size: .8rem;
    background: #e5f1fa;
    color: #0059b3;
    border-radius: 4px;
    padding: 0 .3em;
}

.anteprima-io .completare-io {
    background: #fff3cd;
    color: #5c3d00;
    border-radius: 4px;
    padding: 0 .3em;
}

.anteprima-io .link-io {
    color: #0066cc;
    text-decoration: underline;
}

.modello-catalogo.importato {
    background: #f6f9fc;
}

.modello-catalogo .form-check-input:checked ~ .form-check-label {
    color: #0066cc;
}

.categoria-scheda {
    letter-spacing: .04em;
    font-size: .75rem;
}

.analisi-template .badge {
    font-size: .8rem;
    font-weight: 600;
}

.utente-corrente {
    line-height: 1.15;
}

.utente-corrente small {
    font-size: .75rem;
    font-weight: 400;
    opacity: .85;
}