/*
 * CALYPSO - le utility che mancavano
 *
 * ⚠️ Il foglio "bootstrap.min.css" di questo progetto non e' Bootstrap: e' un
 * CSS scritto in casa che ne imita le classi. Ne mancano un centinaio che i
 * template usano da sempre, e finche' non esistono NON FANNO NIENTE. Le piu'
 * pesanti:
 *
 *   g-2 / g-3 / g-4   lo spazio VERTICALE fra le righe di una griglia che va
 *                     a capo. Usate in 71 file e mai esistite: su schermo
 *                     stretto le schede si toccavano sopra e sotto.
 *
 *                     ⚠️ Lo spazio ORIZZONTALE invece c'era gia': il foglio
 *                     del progetto mette 15px di padding a ogni colonna (30px
 *                     fra due colonne). La prima versione di questo file lo
 *                     sovrascriveva e lo DIMEZZAVA, cambiando il layout di
 *                     tutte le pagine che usano g-3. Adesso g-* tocca solo il
 *                     verticale; per cambiare l'orizzontale c'e' gx-*, che
 *                     nessuno usa.
 *   form-select-sm    i menu a tendina "piccoli" restavano grandi (29 file)
 *   align-middle      il testo delle tabelle non era centrato (28 file)
 *   pagination-sm     la paginazione grande sotto ogni elenco (27 file)
 *   fade              le finestre modali comparivano di scatto (26 file)
 *   input-group-sm    i gruppi di campi "piccoli" restavano grandi
 *   font-monospace    codici e numeri di tracking non a spaziatura fissa
 *
 * Qui ci sono solo le utility mancanti, con lo stesso comportamento che hanno
 * in Bootstrap 5. Non si tocca il foglio esistente: cosi' si vede a colpo
 * d'occhio cosa e' stato aggiunto e perche'.
 */

/* ===== Spazio verticale fra le righe di una griglia =====
   g-* imposta SOLO il verticale: l'orizzontale (15px per colonna) lo mette
   gia' il foglio del progetto, e sovrascriverlo lo dimezzava. */
.g-0, .gy-0 { --cw-gy: 0; }
.g-1, .gy-1 { --cw-gy: .25rem; }
.g-2, .gy-2 { --cw-gy: .5rem; }
.g-3, .gy-3 { --cw-gy: 1rem; }
.g-4, .gy-4 { --cw-gy: 1.5rem; }
.g-5, .gy-5 { --cw-gy: 3rem; }

.row[class*="g-"] > *, .row[class*="gy-"] > * { margin-top: var(--cw-gy, 0px); }
.row[class*="g-"], .row[class*="gy-"] { margin-top: calc(-1 * var(--cw-gy, 0px)); }

/* gx-* per chi vuole davvero cambiare l'orizzontale (nessuno, per ora) */
.row[class*="gx-"] { margin-right: calc(-.5 * var(--cw-gx, 30px));
                     margin-left:  calc(-.5 * var(--cw-gx, 30px)); }
.row[class*="gx-"] > * { padding-right: calc(var(--cw-gx, 30px) * .5);
                         padding-left:  calc(var(--cw-gx, 30px) * .5); }
.gx-0 { --cw-gx: 0; } .gx-1 { --cw-gx: .25rem; } .gx-2 { --cw-gx: .5rem; }
.gx-3 { --cw-gx: 1rem; } .gx-4 { --cw-gx: 1.5rem; }

/* ===== Numero di colonne per riga ===== */
.row-cols-1 > *, .row-cols-2 > *, .row-cols-3 > *,
.row-cols-4 > *, .row-cols-5 > *, .row-cols-6 > * { flex: 0 0 auto; }
.row-cols-1 > * { width: 100%; }
.row-cols-2 > * { width: 50%; }
.row-cols-3 > * { width: 33.3333%; }
.row-cols-4 > * { width: 25%; }
.row-cols-5 > * { width: 20%; }
.row-cols-6 > * { width: 16.6667%; }
@media (min-width: 768px) {
    .row-cols-md-2 > * { width: 50%; flex: 0 0 auto; }
    .row-cols-md-3 > * { width: 33.3333%; flex: 0 0 auto; }
    .row-cols-md-4 > * { width: 25%; flex: 0 0 auto; }
}
@media (min-width: 1200px) {
    .row-cols-xl-4 > * { width: 25%; flex: 0 0 auto; }
    .row-cols-xl-5 > * { width: 20%; flex: 0 0 auto; }
    .row-cols-xl-6 > * { width: 16.6667%; flex: 0 0 auto; }
}

/* ===== Colonne che mancavano all'elenco ===== */
.col-xl-5  { flex: 0 0 auto; }
.col-xl-7  { flex: 0 0 auto; }
.col-xl-11 { flex: 0 0 auto; }
@media (min-width: 1200px) {
    .col-xl-5  { width: 41.6667%; }
    .col-xl-7  { width: 58.3333%; }
    .col-xl-11 { width: 91.6667%; }
}

/* ===== Campi e gruppi "piccoli" e "grandi" ===== */
.form-select-sm { padding: .25rem 1.75rem .25rem .5rem; font-size: .875rem; border-radius: .25rem; }
.form-select-lg { padding: .5rem 2.25rem .5rem 1rem; font-size: 1.125rem; border-radius: .5rem; }
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn { padding: .25rem .5rem; font-size: .875rem; border-radius: .25rem; }
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn { padding: .5rem 1rem; font-size: 1.125rem; border-radius: .5rem; }

/* Interruttore (checkbox a levetta) */
.form-switch { padding-left: 2.5em; }
.form-switch .form-check-input { width: 2em; margin-left: -2.5em; border-radius: 2em;
    background-position: left center; transition: background-position .15s ease-in-out; }
.form-switch .form-check-input:checked { background-position: right center; }
.form-check-inline { display: inline-block; margin-right: 1rem; }

/* ===== Tabelle ===== */
.align-middle { vertical-align: middle !important; }
.align-top    { vertical-align: top !important; }
.align-bottom { vertical-align: bottom !important; }

/* ===== Paginazione piccola ===== */
.pagination-sm .page-link { padding: .2rem .5rem; font-size: .8rem; }

/* ===== Comparsa graduale (finestre modali, avvisi) ===== */
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
.modal.fade .modal-dialog { transition: transform .2s ease-out; transform: translateY(-25px); }
.modal.show .modal-dialog { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .fade, .modal.fade .modal-dialog { transition: none; }
}

/* ===== Testo ===== */
.font-monospace  { font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace !important; }
.text-white-50   { color: rgba(255,255,255,.5) !important; }
.text-black-50   { color: rgba(0,0,0,.5) !important; }
.small-muted     { font-size: .8rem; color: #6c757d; }
.h3, .h5, .h6    { font-weight: 500; line-height: 1.2; margin-bottom: .5rem; }
.h3 { font-size: 1.75rem; } .h5 { font-size: 1.25rem; } .h6 { font-size: 1rem; }
.display-4       { font-size: 3.5rem; font-weight: 300; line-height: 1.2; }

/* ===== Sfondi con trasparenza ===== */
.bg-opacity-10 { --cw-bg-opacity: .1; }
.bg-opacity-25 { --cw-bg-opacity: .25; }
.bg-opacity-50 { --cw-bg-opacity: .5; }
.bg-opacity-75 { --cw-bg-opacity: .75; }

/* ===== Badge con testo leggibile (Bootstrap 5.2) ===== */
.text-bg-primary   { color: #fff; background-color: #0d6efd !important; }
.text-bg-secondary { color: #fff; background-color: #6c757d !important; }
.text-bg-success   { color: #fff; background-color: #198754 !important; }
.text-bg-danger    { color: #fff; background-color: #dc3545 !important; }
.text-bg-warning   { color: #000; background-color: #ffc107 !important; }
.text-bg-info      { color: #000; background-color: #0dcaf0 !important; }
.text-bg-light     { color: #000; background-color: #f8f9fa !important; }
.text-bg-dark      { color: #fff; background-color: #212529 !important; }

/* ===== Menu a tendina allineato a destra ===== */
.dropdown-menu-end { right: 0; left: auto; }

/* ===== Celle che compaiono solo su schermi larghi ===== */
@media (min-width: 992px)  { .d-lg-table-cell { display: table-cell !important; } }
@media (min-width: 1200px) { .d-xl-table-cell { display: table-cell !important; } }

/* ===== Altre utility standard che mancavano ===== */
.display-1 { font-size: 5rem; font-weight: 300; line-height: 1.2; }
.display-5 { font-size: 3rem; font-weight: 300; line-height: 1.2; }
.h4 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; margin-bottom: .5rem; }
@media (min-width: 768px) { .d-md-table-cell { display: table-cell !important; } }

/* Testo di "enfasi": la variante scura del colore, leggibile su fondo chiaro */
.text-primary-emphasis   { color: #052c65 !important; }
.text-success-emphasis   { color: #0a3622 !important; }
.text-danger-emphasis    { color: #58151c !important; }
.text-warning-emphasis   { color: #664d03 !important; }
.text-info-emphasis      { color: #055160 !important; }
.text-secondary-emphasis { color: #2b2f32 !important; }

/* Pila verticale con spaziatura */
.vstack { display: flex; flex-direction: column; flex: 1 1 auto; }
.hstack { display: flex; flex-direction: row; align-items: center; }

/* Righe di tabella colorate */
.table-success   > td, .table-success   > th { background-color: #d1e7dd !important; }
.table-danger    > td, .table-danger    > th { background-color: #f8d7da !important; }
.table-warning   > td, .table-warning   > th { background-color: #fff3cd !important; }
.table-secondary > td, .table-secondary > th { background-color: #e2e3e5 !important; }
.table-info      > td, .table-info      > th { background-color: #cff4fc !important; }

/* Elenco compatto */
.list-group-sm .list-group-item { padding: .35rem .6rem; font-size: .85rem; }

/* Bordi */
.border-4 { border-width: 4px !important; }
.border-3 { border-width: 3px !important; }

/* ===== Riquadri e badge "morbidi" (sfondo tenue, testo scuro) ===== */
.badge-soft { background: #eef2f7; color: #334155; font-weight: 600; }
.card-soft  { border: 1px solid #e9eef5; border-radius: .65rem; background: #fff;
              box-shadow: 0 1px 2px rgba(15,23,42,.04); }

/* ===== Barra di pulsanti e pulsante diviso ===== */
.btn-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; }
.dropdown-toggle-split { padding-right: .5rem; padding-left: .5rem; }

/* Blocchi che compaiono solo per il marketplace scelto: il JavaScript li
   mostra e li nasconde, qui serve solo che partano nascosti quando lo dice
   l'attributo style. */
.platform-field { }