/*
 * Identità DirectSell Commission: la stessa impostazione di ZeroCarta (superfici bianche, tratti sottili,
 * maiuscoletto spaziato per occhielli e intestazioni) con un solo colore, un verde acqua scuro che contrasta con
 * il bianco. Niente rombi: le cornici di icone e iniziali sono tonde o a quadrato arrotondato.
 * Niente font esterni: si usa il carattere di sistema.
 */

/* il carattere dei nomi dei prodotti Quattrozeta: Michroma, equivalente libero di Microgramma (licenza OFL) */
@font-face {
    font-family: "Michroma";
    src: url("../vendor/michroma/michroma-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --dc-acqua: #0e5e5a;
    --dc-acqua-rgb: 14, 94, 90;
    --dc-acqua-scuro: #0a4744;
    --dc-acqua-notte: #062b29;
    --dc-acqua-chiaro: #4f9e98;
    --dc-acqua-50: #f1f8f7;
    --dc-acqua-100: #e2f0ee;
    --dc-acqua-200: #c2dfdb;
    --dc-bordo: #e1e8e7;
    --dc-testo: #1b2a29;
    --dc-testo-tenue: #5d6d6b;
    --dc-raggio: .6rem;
    --dc-sfondo: #f4f8f7;
    --dc-superficie: #fff;
    --dc-superficie-2: #f8fbfa;
    --dc-acqua-pieno: #0e5e5a;
    --dc-acqua-pieno-hover: #0c524e;
    --dc-acqua-pieno-attivo: #0a4744;

    --bs-primary: var(--dc-acqua);
    --bs-primary-rgb: var(--dc-acqua-rgb);
    --bs-primary-text-emphasis: #083a37;
    --bs-primary-bg-subtle: var(--dc-acqua-100);
    --bs-primary-border-subtle: var(--dc-acqua-200);
    --bs-link-color: var(--dc-acqua);
    --bs-link-color-rgb: var(--dc-acqua-rgb);
    --bs-link-hover-color: var(--dc-acqua-scuro);
    --bs-link-hover-color-rgb: 10, 71, 68;
    --bs-body-color: var(--dc-testo);
    --bs-body-color-rgb: 27, 42, 41;
    --bs-body-bg: var(--dc-superficie);
    --bs-secondary-color: var(--dc-testo-tenue);
    --bs-border-color: var(--dc-bordo);
    --bs-focus-ring-color: rgba(var(--dc-acqua-rgb), .25);
}

::selection {
    background: var(--dc-acqua-200);
}

body {
    background-color: var(--dc-sfondo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* --- Bootstrap nel colore del marchio --------------------------------------------------------- */

.btn-primary {
    --bs-btn-bg: var(--dc-acqua-pieno);
    --bs-btn-border-color: var(--dc-acqua-pieno);
    --bs-btn-hover-bg: var(--dc-acqua-pieno-hover);
    --bs-btn-hover-border-color: var(--dc-acqua-pieno-hover);
    --bs-btn-active-bg: var(--dc-acqua-pieno-attivo);
    --bs-btn-active-border-color: var(--dc-acqua-pieno-attivo);
    --bs-btn-disabled-bg: var(--dc-acqua-pieno);
    --bs-btn-disabled-border-color: var(--dc-acqua-pieno);
    --bs-btn-focus-shadow-rgb: var(--dc-acqua-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--dc-acqua);
    --bs-btn-border-color: var(--dc-acqua);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dc-acqua-pieno);
    --bs-btn-hover-border-color: var(--dc-acqua-pieno);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dc-acqua-pieno-attivo);
    --bs-btn-active-border-color: var(--dc-acqua-pieno-attivo);
    --bs-btn-disabled-color: var(--dc-acqua);
    --bs-btn-disabled-border-color: var(--dc-acqua);
    --bs-btn-focus-shadow-rgb: var(--dc-acqua-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--dc-testo-tenue);
    --bs-btn-border-color: var(--dc-bordo);
    --bs-btn-hover-color: var(--dc-acqua);
    --bs-btn-hover-bg: var(--dc-acqua-50);
    --bs-btn-hover-border-color: var(--dc-acqua-200);
    --bs-btn-active-color: var(--dc-acqua);
    --bs-btn-active-bg: var(--dc-acqua-100);
    --bs-btn-active-border-color: var(--dc-acqua-200);
    --bs-btn-disabled-color: var(--dc-testo-tenue);
    --bs-btn-disabled-border-color: var(--dc-bordo);
    background: var(--dc-superficie);
}

.btn-link {
    --bs-btn-color: var(--dc-acqua);
    --bs-btn-hover-color: var(--dc-acqua-scuro);
    --bs-btn-active-color: var(--dc-acqua-scuro);
    text-decoration: none;
}

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: .45rem;
}

.pagination {
    --bs-pagination-color: var(--dc-acqua);
    --bs-pagination-hover-color: var(--dc-acqua-scuro);
    --bs-pagination-focus-color: var(--dc-acqua-scuro);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--dc-acqua-rgb), .2);
    --bs-pagination-active-bg: var(--dc-acqua-pieno);
    --bs-pagination-active-border-color: var(--dc-acqua-pieno);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--dc-acqua-chiaro);
    box-shadow: 0 0 0 .2rem rgba(var(--dc-acqua-rgb), .2);
}

.form-check-input:checked,
.form-check-input:indeterminate {
    background-color: var(--dc-acqua-pieno);
    border-color: var(--dc-acqua-pieno);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--dc-bordo);
    --bs-dropdown-link-hover-bg: var(--dc-acqua-50);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--dc-acqua-pieno);
}

.form-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--dc-testo-tenue);
}

.form-text {
    color: var(--dc-testo-tenue);
}

.alert {
    border-radius: var(--dc-raggio);
}

.card {
    --bs-card-border-color: var(--dc-bordo);
    --bs-card-border-radius: var(--dc-raggio);
    --bs-card-inner-border-radius: calc(var(--dc-raggio) - 1px);
    --bs-card-cap-bg: var(--dc-superficie);
    box-shadow: 0 1px 2px rgba(6, 43, 41, .04);
}

.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 600 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dc-testo-tenue);
    padding: .9rem 1.1rem;
}

.card-header .btn {
    letter-spacing: normal;
    text-transform: none;
}

.table {
    --bs-table-bg: var(--dc-superficie);
    --bs-table-hover-bg: var(--dc-acqua-50);
    --bs-table-border-color: var(--dc-bordo);
}

.table > thead th {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dc-testo-tenue);
    background: var(--dc-superficie-2);
    white-space: nowrap;
}

.table td,
.table th {
    vertical-align: middle;
    padding: .8rem 1.1rem;
}

.table > tfoot td {
    font-weight: 600;
    background: var(--dc-superficie-2);
    border-bottom: 0;
}

.table td.importo,
.table th.importo {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* elenchi con molte colonne di importi */
.dc-tabella-densa td,
.dc-tabella-densa th {
    padding: .65rem .75rem;
}

.dc-tabella-densa td:first-child,
.dc-tabella-densa th:first-child {
    padding-left: 1.1rem;
}

.dc-tabella-densa .dc-motivi {
    min-width: 12rem;
}

.dc-motivo {
    max-width: 22rem;
    margin-top: .25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .dc-motivo {
        max-width: none;
        white-space: normal;
    }
}

.btn-check:checked + .btn-outline-secondary .text-tenue {
    color: inherit;
}

.dc-nome-riga {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card > .table-responsive > .table,
.card > .table {
    margin-bottom: 0;
}

.list-group {
    --bs-list-group-border-color: var(--dc-bordo);
    --bs-list-group-action-hover-bg: var(--dc-acqua-50);
}

.card > .table-responsive:last-child > .table > :last-child > tr:last-child > * {
    border-bottom: 0;
}

.text-mono {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
}

.text-tenue {
    color: var(--dc-testo-tenue);
}

.text-acqua {
    color: var(--dc-acqua);
}

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

/* --- Marchio ------------------------------------------------------------------------------------ */

/* il marchio nel rombo (components/marchio), fratello di quelli di Quattrozeta e ZeroCarta: prende il colore dal testo */
.dc-marchio {
    display: block;
    flex-shrink: 0;
    width: 2.75rem;
    height: auto;
    color: var(--dc-acqua);
}

.dc-logotipo {
    font-family: "Michroma", sans-serif;
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: .01em;
    white-space: nowrap;
}

.dc-logotipo > span {
    opacity: .72;
}

.dc-logotipo strong {
    font-weight: 400;
}

/* Cornice tonda per icone e iniziali */
.dc-tondo {
    --dc-tondo: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--dc-tondo);
    height: var(--dc-tondo);
    border: 1.5px solid currentColor;
    border-radius: 50%;
    color: var(--dc-acqua);
    background: var(--dc-superficie);
    font-size: calc(var(--dc-tondo) * .36);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
}

.dc-tondo-pieno {
    color: #fff;
    background: var(--dc-acqua-pieno);
    border-color: var(--dc-acqua-pieno);
}

.dc-tondo-tenue {
    border-color: transparent;
    background: var(--dc-acqua-100);
}

.dc-tondo-sm {
    --dc-tondo: 2rem;
}

.dc-tondo-lg {
    --dc-tondo: 3.25rem;
}

.dc-tondo-xl {
    --dc-tondo: 4.5rem;
}

/* --- Stati ---------------------------------------------------------------------------------------- */

.dc-stato {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .28em .75em;
    border: 1px solid;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.dc-stato::before {
    content: "";
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: currentColor;
}

.dc-stato-primary { color: var(--dc-acqua-scuro); background: var(--dc-acqua-50); border-color: var(--dc-acqua-200); }
.dc-stato-success { color: #1b6a43; background: #e9f6ef; border-color: #bfe2cd; }
.dc-stato-warning { color: #8a5d00; background: #fff6e1; border-color: #f0d9a0; }
.dc-stato-danger { color: #9a2f2f; background: #fdeeee; border-color: #f1c6c6; }
.dc-stato-info { color: #1d5b85; background: #ebf4fb; border-color: #c4dcee; }
.dc-stato-secondary { color: #56605f; background: #f2f4f4; border-color: #dce2e1; }

/* etichetta per il tipo di documento e il regime */
.dc-etichetta {
    display: inline-block;
    padding: .15em .55em;
    border-radius: .35rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--dc-acqua-scuro);
    background: var(--dc-acqua-100);
    white-space: nowrap;
}

.dc-motivi {
    font-size: .82rem;
    max-width: 30rem;
}

.dc-motivi > div + div {
    margin-top: .2rem;
}

.dc-blocco { color: #9a2f2f; }
.dc-avviso { color: #8a5d00; }

/* --- Menu a sinistra ------------------------------------------------------------------------------ */

:root {
    --dc-menu-larghezza: 15.5rem;
    --dc-menu-fondo-1: #0e5e5a;
    --dc-menu-fondo-2: #083f3c;
    --dc-menu-testo: rgba(255, 255, 255, .78);
}

.dc-menu {
    --bs-offcanvas-width: 17rem;
    --bs-offcanvas-bg: var(--dc-menu-fondo-2);
    --bs-offcanvas-color: #fff;
    display: flex;
    flex-direction: column;
    color: #fff;
    /* il colore è un gradiente e non un background-color: Bootstrap azzera quello di .offcanvas-lg sui monitor */
    background-image: linear-gradient(180deg, var(--dc-menu-fondo-1) 0%, var(--dc-menu-fondo-2) 100%);
}

.dc-menu-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 1.25rem 1.1rem 1rem;
}

.dc-menu-marchio {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}

.dc-menu-marchio:hover {
    color: #fff;
}

.dc-menu-marchio .dc-marchio {
    width: 3rem;
    color: #fff;
}

/* nel menu il nome va su due righe: "DirectSell" più piccolo sopra, "Commission" sotto */
.dc-menu-marchio .dc-logotipo {
    display: flex;
    flex-direction: column;
    font-size: .9rem;
    line-height: 1.35;
}

.dc-menu-marchio .dc-logotipo > span {
    font-size: .68rem;
}

.dc-menu-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .25rem .75rem 1rem;
}

.dc-menu-sezione {
    margin: 1.1rem .65rem .4rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.dc-menu-voce {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .15rem;
    padding: .55rem .65rem;
    border-radius: .5rem;
    color: var(--dc-menu-testo);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.dc-menu-voce .bi {
    font-size: 1.05rem;
    opacity: .9;
}

.dc-menu-voce:hover,
.dc-menu-voce:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .09);
}

/* la voce della pagina aperta: bianca, in contrasto con il verde acqua */
.dc-menu-voce.active {
    color: var(--dc-menu-fondo-1);
    background: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.dc-menu-voce.active .bi {
    opacity: 1;
}

.dc-menu-contatore {
    margin-left: auto;
    min-width: 1.4rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
    color: var(--dc-menu-fondo-1);
    background: #fff;
}

.dc-menu-voce.active .dc-menu-contatore {
    color: #fff;
    background: var(--dc-menu-fondo-1);
}

.dc-menu-piede {
    padding: 1rem 1.1rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.dc-utente {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.dc-utente .dc-tondo {
    color: var(--dc-menu-fondo-1);
    background: #fff;
    border-color: #fff;
}

.dc-utente .dc-nome {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
}

.dc-ruolo {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dc-acqua);
}

.dc-menu .dc-ruolo {
    color: rgba(255, 255, 255, .62);
}

.dc-menu .btn-outline-secondary,
.dc-menu-esci {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .3);
    --bs-btn-hover-color: var(--dc-menu-fondo-1);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--dc-menu-fondo-1);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
    background: transparent;
}

/* barra in alto solo sui telefoni e i tablet, con il pulsante del menu */
.dc-barra {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    background: var(--dc-superficie);
    border-top: 3px solid var(--dc-acqua);
    border-bottom: 1px solid var(--dc-bordo);
}

.dc-barra-marchio {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    color: var(--dc-testo);
    text-decoration: none;
}

.dc-barra-marchio .dc-marchio {
    width: 2.3rem;
}

.dc-barra-marchio .dc-logotipo {
    font-size: .74rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-barra-marchio .dc-logotipo strong {
    color: var(--dc-acqua);
}

.dc-contenuto {
    width: 100%;
    max-width: 112rem;
    padding: 1.5rem .75rem 3rem;
}

@media (min-width: 576px) {
    .dc-contenuto {
        padding: 2rem 1.75rem 3rem;
    }
}

@media (min-width: 992px) {
    .dc-menu {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1030;
        width: var(--dc-menu-larghezza);
    }

    .dc-con-menu > main {
        margin-left: var(--dc-menu-larghezza);
        width: auto;
    }

    .dc-contenuto {
        padding: 2.25rem 2.5rem 3rem;
    }
}

/* --- Impaginazione delle pagine ------------------------------------------------------------------- */

.dc-intestazione {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dc-intestazione h1 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.dc-intestazione .dc-sottotitolo {
    margin: .3rem 0 0;
    max-width: 52rem;
    color: var(--dc-testo-tenue);
}

.dc-intestazione-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dc-occhiello {
    display: inline-block;
    margin-bottom: .2rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-acqua);
    text-decoration: none;
}

.dc-intestazione-titolo {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}

/* pulsante Indietro accanto al titolo (sul telefono sta nella barra in alto) */
.dc-indietro {
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.15rem;
    color: var(--dc-testo);
    background: var(--dc-superficie);
    border: 1px solid var(--dc-bordo);
    border-radius: 50%;
    text-decoration: none;
    transition: color .15s, border-color .15s, background-color .15s;
}

.dc-indietro:hover {
    color: var(--dc-acqua);
    border-color: var(--dc-acqua);
    background: var(--dc-acqua-50);
}

.dc-indietro:focus-visible {
    outline: 2px solid var(--dc-acqua);
    outline-offset: 2px;
}

.dc-barra-indietro {
    margin-left: auto;
}

.dc-sezione {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 2rem 0 1rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dc-acqua);
}

.dc-sezione::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
}

.dc-sezione::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dc-bordo);
}

.dc-vuoto {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--dc-testo-tenue);
}

.dc-vuoto .dc-tondo {
    margin-bottom: .75rem;
    color: var(--dc-acqua-chiaro);
}

/* schede di stato sopra gli elenchi (components/schede-stato): pillole con il conteggio */
.dc-schede {
    display: flex;
    gap: .35rem;
    margin-bottom: .85rem;
    padding: .3rem;
    overflow-x: auto;
    background: var(--dc-superficie);
    border: 1px solid var(--dc-bordo);
    border-radius: 999px;
    scrollbar-width: none;
}

.dc-schede::-webkit-scrollbar {
    display: none;
}

.dc-scheda {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    padding: .4rem .9rem;
    border-radius: 999px;
    color: var(--dc-testo-tenue);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

.dc-scheda:hover {
    color: var(--dc-acqua);
    background: var(--dc-acqua-50);
}

.dc-scheda.active {
    color: #fff;
    background: var(--dc-acqua-pieno);
}

.dc-scheda-conteggio {
    min-width: 1.5rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    text-align: center;
    color: var(--dc-acqua-scuro);
    background: var(--dc-acqua-100);
}

.dc-scheda.active .dc-scheda-conteggio {
    color: var(--dc-acqua-pieno);
    background: #fff;
}

/* le schede di una pagina di dettaglio (anagrafica, impostazioni): sottolineate, sopra il contenuto */
.dc-schede-pagina {
    --bs-nav-tabs-border-color: var(--dc-bordo);
    --bs-nav-tabs-link-active-color: var(--dc-acqua);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-link-color: var(--dc-testo-tenue);
    --bs-nav-link-hover-color: var(--dc-acqua);
    flex-wrap: nowrap;
    gap: .25rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.dc-schede-pagina .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem .85rem;
    border: 0;
    font-weight: 500;
    white-space: nowrap;
}

.dc-schede-pagina .nav-link.active {
    font-weight: 600;
}

.dc-schede-pagina .nav-link.active::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--dc-acqua);
}

.dc-schede-pagina .dc-scheda-conteggio {
    font-size: .7rem;
}

/* filtri sopra gli elenchi */
.dc-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
    margin-bottom: 1rem;
}

.dc-filtri .form-label {
    margin-bottom: .2rem;
    font-size: .78rem;
}

.dc-filtri > div {
    flex: 0 1 auto;
}

.dc-filtri .dc-filtro-largo {
    flex: 1 1 16rem;
}

/* Contatori e importi in evidenza */
.dc-contatore {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    background: var(--dc-superficie);
    border: 1px solid var(--dc-bordo);
    border-radius: var(--dc-raggio);
    color: inherit;
    text-decoration: none;
}

a.dc-contatore {
    transition: border-color .15s, box-shadow .15s;
}

a.dc-contatore:hover {
    border-color: var(--dc-acqua-200);
    box-shadow: 0 6px 18px rgba(var(--dc-acqua-rgb), .08);
}

.dc-contatore-evidenza {
    color: #fff;
    background: var(--dc-acqua-pieno);
    border-color: var(--dc-acqua-pieno);
}

.dc-contatore-evidenza .dc-etichetta-contatore,
.dc-contatore-evidenza .dc-dettaglio {
    color: rgba(255, 255, 255, .78);
}

.dc-contatore-evidenza .dc-tondo {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
}

.dc-etichetta-contatore {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dc-testo-tenue);
}

.dc-numero {
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dc-dettaglio {
    font-size: .8rem;
    color: var(--dc-testo-tenue);
}

/* "Nota di credito" sotto lo stato SDI di una fattura accettata, negli elenchi dei documenti */
.dc-nota-credito {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .35rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-danger-text-emphasis);
}

.dc-nota-credito:hover {
    text-decoration: underline;
}

.dc-nota-credito:focus-visible {
    outline: 2px solid var(--dc-acqua);
    outline-offset: 2px;
    border-radius: 2px;
}

/* elenco a scelta aperto (select con size), con la ricerca sopra: la voce scelta nel verde acqua */
.dc-elenco-scelta {
    padding: .3rem;
}

.dc-elenco-scelta option {
    padding: .4rem .6rem;
    border-radius: .35rem;
}

.dc-elenco-scelta option:checked {
    color: var(--dc-acqua-scuro);
    font-weight: 600;
    background: linear-gradient(var(--dc-acqua-100), var(--dc-acqua-100));
}

.dc-elenco-scelta:focus option:checked {
    color: #fff;
    background: linear-gradient(var(--dc-acqua-pieno), var(--dc-acqua-pieno));
}

/* le due viste delle provvigioni (components/viste-provvigioni) */
.dc-viste {
    display: inline-flex;
    max-width: 100%;
    margin-bottom: 1.25rem;
}

/* dashboard del riepilogo: le cose da fare, ognuna con il collegamento */
.dc-da-fare .list-group-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .8rem 1.25rem;
    background: transparent;
}

.dc-da-fare-testo {
    flex: 1 1 12rem;
}

/* numero e pulsante sempre a destra, anche quando vanno a capo sul telefono */
.dc-da-fare-azione {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

.dc-da-fare-numero {
    text-align: right;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.dc-da-fare .dc-fatto .dc-da-fare-testo {
    color: var(--dc-testo-tenue);
}

.dc-da-fare .dc-fatto .dc-da-fare-numero {
    font-size: .85rem;
}

/* Elenco dati (scheda incaricato, dettagli del documento) */
.dc-dati {
    display: grid;
    grid-template-columns: minmax(7rem, 35%) 1fr;
    gap: .55rem 1rem;
    margin: 0;
}

.dc-dati dt {
    font-size: .8rem;
    font-weight: 500;
    color: var(--dc-testo-tenue);
}

.dc-dati dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Riepilogo degli importi di un documento */
.dc-conto {
    width: 100%;
    margin: 0;
}

.dc-conto td {
    padding: .45rem 0;
    border-bottom: 1px solid var(--dc-bordo);
}

.dc-conto td:last-child {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dc-conto tr.dc-totale td {
    padding-top: .75rem;
    border-bottom: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dc-acqua);
}

/* Barra delle azioni sulle righe selezionate, in fondo agli elenchi */
.dc-azioni {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: 1rem;
    padding: .9rem 1.1rem;
    background: var(--dc-superficie);
    border: 1px solid var(--dc-bordo);
    border-top: 3px solid var(--dc-acqua);
    border-radius: var(--dc-raggio) var(--dc-raggio) 0 0;
    box-shadow: 0 -8px 24px rgba(6, 43, 41, .08);
}

.dc-azioni .dc-conteggio {
    font-weight: 600;
}

.dc-azioni .form-text {
    margin: 0;
}

/* Caricamento di un file */
.dc-caricamento {
    display: block;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    color: var(--dc-testo-tenue);
    background: var(--dc-acqua-50);
    border: 1.5px dashed var(--dc-acqua-200);
    border-radius: var(--dc-raggio);
    transition: border-color .15s, background .15s;
}

.dc-caricamento:hover,
.dc-caricamento:focus-within {
    background: var(--dc-acqua-100);
    border-color: var(--dc-acqua);
}

.dc-caricamento strong {
    color: var(--dc-testo);
}

.dc-pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .82rem;
}

code {
    color: var(--dc-acqua-scuro);
}

/* --- Accesso ---------------------------------------------------------------------------------------- */

.dc-pieno {
    padding: 0;
}

.dc-accesso {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    min-height: 100vh;
}

.dc-accesso-marchio {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: 4rem clamp(1.5rem, 6vw, 6rem);
    overflow: hidden;
    color: #fff;
    background: radial-gradient(120% 90% at 20% 15%, #1a7a74 0%, #0e5e5a 42%, var(--dc-acqua-notte) 100%);
}

.dc-accesso-marchio .dc-marchio {
    width: 7.5rem;
    color: #fff;
}

.dc-accesso-marchio .dc-logotipo {
    font-size: clamp(1.2rem, 2.2vw, 1.85rem);
    line-height: 1.35;
    white-space: normal;
}

.dc-accesso-marchio p {
    max-width: 28rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, .85);
}

.dc-accesso-marchio .dc-filo {
    width: 7rem;
    height: 2px;
    background: rgba(255, 255, 255, .55);
}

.dc-accesso-form {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: var(--dc-superficie);
}

.dc-accesso-form > div {
    width: 100%;
    max-width: 22rem;
}

.dc-accesso-form > .dc-tema-angolo {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: auto;
}

@media (max-width: 767.98px) {
    .dc-accesso {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .dc-accesso-form {
        align-items: flex-start;
        padding-top: 2rem;
    }

    .dc-accesso-marchio {
        padding: 2.5rem 1.25rem;
    }

    .dc-accesso-marchio .dc-marchio {
        width: 4.5rem;
    }
}

/* --- Finestra di conferma (components/dialogo) ---------------------------------------------------- */

.dc-dialogo {
    --bs-modal-width: 26rem;
    --bs-modal-padding: 1.75rem;
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 1rem;
    --bs-modal-footer-border-width: 0;
}

.dc-dialogo .modal-content {
    box-shadow: 0 1.5rem 3rem rgba(6, 43, 41, .22);
}

.dc-dialogo .modal-body {
    padding-bottom: 0;
    text-align: center;
}

.dc-dialogo .dc-tondo {
    --dc-tondo: 3.5rem;
    margin-bottom: 1rem;
    border-color: transparent;
    background: var(--dc-acqua-100);
}

.dc-dialogo h2 {
    margin-bottom: .4rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dc-dialogo p {
    margin-bottom: 0;
    color: var(--dc-testo-tenue);
}

.dc-dialogo .modal-footer {
    flex-wrap: nowrap;
    gap: .6rem;
    padding: 1.5rem var(--bs-modal-padding) var(--bs-modal-padding);
}

.dc-dialogo .modal-footer > .btn {
    flex: 1 1 0;
    margin: 0;
}

.dc-dialogo-pericolo .dc-tondo {
    color: var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
}

.dc-dialogo.fade .modal-dialog {
    transform: scale(.95);
    transition: transform .2s ease-out;
}

.dc-dialogo.show .modal-dialog {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .dc-dialogo.fade .modal-dialog {
        transition: none;
    }
}

.modal-backdrop {
    --bs-backdrop-bg: var(--dc-acqua-notte);
    --bs-backdrop-opacity: .45;
}

@media (max-width: 420px) {
    .dc-dialogo .modal-footer {
        flex-direction: column-reverse;
    }

    .dc-dialogo .modal-footer > .btn {
        flex: none;
        width: 100%;
    }
}

/* --- Procedure guidate: preparazione dell'istanza e configurazione iniziale (components/passi) -------- */

.dc-passi {
    display: flex;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.dc-passi li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

/* il tratto tra un passo e il successivo */
.dc-passi li + li::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: calc(50% + 1.25rem);
    left: calc(-50% + 1.25rem);
    border-top: 1.5px solid var(--dc-bordo);
}

.dc-passi li.is-fatto + li::before {
    border-top-color: var(--dc-acqua-chiaro);
}

.dc-passi a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: var(--dc-testo-tenue);
    text-decoration: none;
}

.dc-passi .dc-tondo {
    border-color: var(--dc-bordo);
    color: var(--dc-testo-tenue);
}

.dc-passi .is-fatto .dc-tondo {
    border-color: currentColor;
    color: var(--dc-acqua);
}

.dc-passi .is-corrente .dc-tondo {
    border-color: var(--dc-acqua-pieno);
    color: #fff;
}

.dc-passi-titolo {
    max-width: 100%;
    overflow: hidden;
    font-size: .8rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dc-passi .is-corrente a {
    color: var(--dc-testo);
    font-weight: 600;
}

.dc-passi a:hover .dc-passi-titolo {
    text-decoration: underline;
}

.dc-vantaggi {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 2rem;
}

@media (min-width: 768px) {
    .dc-vantaggi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dc-vantaggio {
    display: flex;
    gap: 1rem;
}

.dc-vantaggio h3 {
    margin: .3rem 0 .25rem;
    font-size: 1rem;
    font-weight: 600;
}

.dc-vantaggio p {
    margin: 0;
    color: var(--dc-testo-tenue);
    font-size: .9rem;
}

/* --- Telefoni ------------------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .dc-intestazione h1 {
        font-size: 1.4rem;
    }

    /* restano i numeri: il titolo del passo è nell'intestazione */
    .dc-passi-titolo {
        display: none;
    }

    /* tabelle degli elenchi: ogni riga diventa un blocco; le celle con data-etichetta la mostrano a sinistra */
    .dc-tabella,
    .dc-tabella tbody,
    .dc-tabella tfoot {
        display: block;
        width: 100%;
    }

    .dc-tabella thead {
        display: none;
    }

    .dc-tabella tr {
        display: block;
        padding: .85rem 1rem;
        border-bottom: 1px solid var(--dc-bordo);
    }

    .dc-tabella tbody tr:last-child {
        border-bottom: 0;
    }

    .dc-tabella td {
        display: block;
        padding: 0;
        border: 0;
        box-shadow: none !important;
        text-align: left !important;
    }

    .dc-tabella td + td {
        margin-top: .3rem;
    }

    .dc-tabella td[data-etichetta] {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .dc-tabella td[data-etichetta]::before {
        content: attr(data-etichetta);
        font-size: .78rem;
        font-weight: 500;
        color: var(--dc-testo-tenue);
    }

    .dc-tabella td:empty {
        display: none;
    }

    .dc-azioni {
        margin-left: -.75rem;
        margin-right: -.75rem;
        border-radius: 0;
    }
}

/* --- Tema scuro: lo stesso verde acqua, schiarito dove sta su fondo scuro ------------------------- */

:root[data-bs-theme="dark"] {
    color-scheme: dark;

    --dc-acqua: #6fcdc3;
    --dc-acqua-rgb: 111, 205, 195;
    --dc-acqua-scuro: #a3e3db;
    --dc-acqua-chiaro: #3f9b93;
    --dc-acqua-notte: #041c1b;
    --dc-acqua-50: #13292a;
    --dc-acqua-100: #173233;
    --dc-acqua-200: #23494a;
    --dc-acqua-pieno: #137a73;
    --dc-acqua-pieno-hover: #178880;
    --dc-acqua-pieno-attivo: #1a948b;
    --dc-bordo: #263a3a;
    --dc-testo: #e6f0ef;
    --dc-testo-tenue: #9fb3b1;
    --dc-sfondo: #0c1615;
    --dc-superficie: #121f1f;
    --dc-superficie-2: #172626;

    --bs-primary-text-emphasis: #b7ece5;
    --bs-link-hover-color-rgb: 163, 227, 219;
    --bs-body-color-rgb: 230, 240, 239;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-body-bg-rgb: 18, 31, 31;
    --bs-secondary-bg: #1b2c2c;
    --bs-secondary-bg-rgb: 27, 44, 44;
    --bs-tertiary-bg: #162424;
    --bs-tertiary-bg-rgb: 22, 36, 36;
}

:root[data-bs-theme="dark"] .card,
:root[data-bs-theme="dark"] .dc-azioni {
    box-shadow: none;
}

:root[data-bs-theme="dark"] {
    --dc-menu-fondo-1: #0d4f4b;
    --dc-menu-fondo-2: #072725;
}

:root[data-bs-theme="dark"] .dc-menu-voce.active {
    color: #0b3f3c;
    background: #d9f1ee;
}

:root[data-bs-theme="dark"] .dc-accesso-marchio {
    background: radial-gradient(120% 90% at 20% 15%, #146c66 0%, #0c4b48 42%, var(--dc-acqua-notte) 100%);
}

:root[data-bs-theme="dark"] .dc-stato-primary { color: var(--dc-acqua-scuro); background: var(--dc-acqua-50); border-color: var(--dc-acqua-200); }
:root[data-bs-theme="dark"] .dc-stato-success { color: #7dd3a3; background: #12291c; border-color: #22503a; }
:root[data-bs-theme="dark"] .dc-stato-warning { color: #f0c66b; background: #33290f; border-color: #5a4718; }
:root[data-bs-theme="dark"] .dc-stato-danger { color: #f2a0a0; background: #351a1d; border-color: #5c2b30; }
:root[data-bs-theme="dark"] .dc-stato-info { color: #93c8ee; background: #12253a; border-color: #24435f; }
:root[data-bs-theme="dark"] .dc-stato-secondary { color: #b4c0bf; background: #1d2a2a; border-color: #334443; }

:root[data-bs-theme="dark"] .dc-blocco { color: #f2a0a0; }
:root[data-bs-theme="dark"] .dc-avviso { color: #f0c66b; }