.pacchetto .card,
.struttura .card,
.alloggio .card {
    transition: all 0.3s ease;
}
.pacchetto:hover .card,
.struttura:hover .card,
.alloggio:hover .card {
    background: var(--dx-body-color);
}
.pacchetto .card img,
.struttura .card img,
.alloggio .card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0.5rem;
}
.navbar-menu .nav-item .nav-link.amw-active {
    color: var(--dx-sidebar-link-active-color);
    background-color: var(--dx-sidebar-link-bg-active-color);
}
.swiper {
    background: transparent !important;
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 0.5rem;
}

.pagina-tableau .tableau-controls .form-inline {
    display: flex;
    align-items: end;
}

@media (min-width: 768px) {
    .pagina-tableau .form-inline .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }
}
.btn.btn-icon {
    height: 1.5625rem;
}
/* Matrice permessi: la colonna del ruolo resta fissa nello scroll orizzontale.
   Le celle del tema hanno sfondo trasparente (zebratura via box-shadow inset):
   serve uno sfondo opaco esplicito o il contenuto si vede scorrere sotto. */
.tabella-matrice-permessi th:first-child,
.tabella-matrice-permessi td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--dx-card-bg, #fff);
}

/* Tabelle DataTables server-side: il tema styla .page-link ma non definisce
   .pagination/.page-item, che resterebbero list-item sovrapposti. */
.dt-container .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.dt-container .page-item {
    display: block;
}

/* Il tema dà ai .page-link una larghezza fissa da bottone quadrato, anche
   con una regola specifica per .dt-container: i testi "Precedente"/
   "Successivo" traboccherebbero sui vicini. La seconda variante pareggia
   la specificità di admin.css (che carica prima di questo file). */
.dt-container .pagination .page-item .page-link,
.dt-container .pagination .page-item:not(:first-child) .page-link {
    width: auto;
    min-width: 2.25rem;
    padding-inline: 0.75rem;
    white-space: nowrap;
}

/* ── Celle frigo disegnate come scaffali ─────────────────────────────────
   La Cliente non vuole la griglia ma lo scaffale in metallo che ha davanti:
   montanti ai lati, ripiani orizzontali, e il numero del ripiano ripetuto
   su tutti e due i montanti come sui suoi fogli. La geometria (quanti
   blocchi, quali ripiani, quali colonne) arriva da `celle.layout`.

   Le colonne sono una GRIGLIA a larghezza fissa (--colonne): con il flex le
   caselle si allargavano per far stare il codice del lotto e i ripiani non
   si allineavano più fra loro, che su uno scaffale è il difetto peggiore. */

.scaffali {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    align-items: flex-start;
}

.scaffale {
    --montante: linear-gradient(90deg, #8d959e, #c8cdd3 45%, #7f878f);
    --piano: linear-gradient(180deg, #d7dce1, #a9b1b9);
    --slot: #f3f5f7;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: .25rem;
}

.scaffale-testa,
.ripiano {
    display: flex;
    align-items: stretch;
    min-width: max-content;
}

/* Testa e ripiani condividono la stessa griglia: le colonne restano in asse. */
.griglia {
    display: grid;
    grid-template-columns: repeat(var(--colonne), 2.55rem);
    flex: 0 0 auto;
}

.scaffale-testa {
    padding-bottom: .15rem;
}

.colonna-nome {
    text-align: center;
    font-size: .62rem;
    font-weight: 700;
    color: #6c757d;
    letter-spacing: .02em;
}

.colonna-nome.colonna-cc {
    color: #a4508b;
}

/* Il piano del ripiano: una traversa vera, non un bordo di tabella. */
.ripiano {
    border-bottom: 6px solid transparent;
    border-image: var(--piano) 1;
    margin-bottom: 2px;
}

.montante-etichetta {
    flex: 0 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
    background: var(--montante);
}

.posizione {
    /* Altezza libera: una posizione che tiene due o tre lotti cresce invece di
       schiacciarli in strisce illeggibili — e si vede a occhio che è più piena. */
    min-height: 1.55rem;
    margin: .1rem .08rem;
    border-radius: 2px;
    background: var(--slot);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Fascia controcampioni: un velo, non un bordo su ogni casella. Il rosa è
   quello che usano già loro sul foglio. */
.posizione-cc {
    background: rgba(255, 165, 234, .22);
}

.posizione-piena {
    box-shadow: none;
}

/* Il codice sul chip: il colore lo detta lo sfondo dello stato, non il tema.
   Senza questo l'ancora resta blu-link e su rosso e verde non si legge. */
.posizione-lotto,
.posizione-lotto:hover,
.posizione-lotto:focus {
    color: #fff;
}

.posizione-lotto.bg-warning,
.posizione-lotto.bg-warning:hover,
.posizione-lotto.bg-warning:focus {
    color: #212529;
}

.posizione-lotto {
    flex: 1 0 auto;
    min-height: 1.35rem;
    display: flex;
    align-items: center;
    /* Allineato a sinistra e non centrato: se il codice non ci sta, si taglia
       solo in coda e le prime cifre — che sono la data — restano leggibili. */
    justify-content: flex-start;
    padding: 0 1px 0 2px;
    font-size: .52rem;
    letter-spacing: -.02em;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Due o tre lotti nella stessa posizione: strisce sovrapposte, ognuna col
   colore del suo stato. Succede davvero (AA22, AA23). */
.posizione-lotto + .posizione-lotto {
    border-top: 1px solid rgba(255, 255, 255, .7);
}

.scaffale-piede {
    height: .55rem;
    margin-top: -2px;
    background: var(--montante);
    border-radius: 0 0 3px 3px;
}

/* Documenti qualità: revisione approvata che entrerà in vigore più avanti.
   Viola, perché il blu della revisione in vigore e l'azzurro di prima si
   confondevano (Francesca, 02/11). Non bg-secondary: nel tema è lo stesso viola
   ma è usato per i contatori delle schede. */
.amw-badge-futura {
    background-color: var(--dx-purple, #a855f7) !important;
    color: #fff !important;
}

/* Registro CAPA: con 17 colonne «Attività» e «Avanzamento» andavano a capo dopo
   due parole; meglio una tabella che scorre un po' di più in orizzontale. */
.capa-col-attivita { min-width: 280px; }
.capa-col-avanzamento { min-width: 220px; }

/* -------------------------------------------------------------------
   Separatore del breadcrumb (correzione portata da pegasuscadcam).
   admin.css usa var(--dx-breadcrumb-divider, "https://srbthemes…"): senza
   la variabile, nel percorso compariva l'URL del sito del template.
------------------------------------------------------------------- */
:root {
    --dx-breadcrumb-divider: "›";
    --bs-breadcrumb-divider: "›";
}

/* -------------------------------------------------------------------
   Colori delle "coppe" dei premi (Bronzo … Diamante), come le icone
   prima…quinta.png del vecchio CRM.
------------------------------------------------------------------- */
.coppa-1 { color: #cd7f32; }
.coppa-2 { color: #a8a9ad; }
.coppa-3 { color: #d4af37; }
.coppa-4 { color: #8fa3b3; }
.coppa-5 { color: #5bc0de; }