:root{
    /* Breakpoint iniziali */
    --bp-xs:     0;      /* to handle... */
    --bp-sm:     576px;
    --bp-md:     768px;
    --bp-lg:     992px;
    --bp-xl:    1200px;
    --bp-xxl:   1400px;
    --bp-xxxl:  1600px; /* Extra */
    --bp-xxxxl: 1800px; /* Extra */
}

/* ===== Grid a 24 colonne compatibile con Bootstrap ===== */
.grid-24 {
    display: grid;
    grid-template-columns: repeat(24, minmax(0,1fr));
    column-gap: var(--bs-gutter-x,.5rem);
    row-gap: var(--bs-gutter-y,.5rem);
}

/* Allineamenti utili */
.self-end { align-self: end; }
.justify-end { justify-self: end; }

/* Breakpoint aggiuntivi */
@media (min-width:1600px){:root{--bp:xxxl}}
@media (min-width:1800px){:root{--bp:xxxxl}}

/* =========================
   XS (default)
   ========================= */
[class*="span-"] { grid-column: span 24; }
.span-1  { grid-column: span 1; }
.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }
.span-13 { grid-column: span 13; }
.span-14 { grid-column: span 14; }
.span-15 { grid-column: span 15; }
.span-16 { grid-column: span 16; }
.span-17 { grid-column: span 17; }
.span-18 { grid-column: span 18; }
.span-19 { grid-column: span 19; }
.span-20 { grid-column: span 20; }
.span-21 { grid-column: span 21; }
.span-22 { grid-column: span 22; }
.span-23 { grid-column: span 23; }
.span-24 { grid-column: span 24; }

/* =========================
   Breakpoints
   ========================= */

/* SM ≥576px */
@media (min-width:576px){
    .sm-span-1{grid-column:span 1}
    .sm-span-2{grid-column:span 2}
    .sm-span-3{grid-column:span 3}
    .sm-span-4{grid-column:span 4}
    .sm-span-5{grid-column:span 5}
    .sm-span-6{grid-column:span 6}
    .sm-span-7{grid-column:span 7}
    .sm-span-8{grid-column:span 8}
    .sm-span-9{grid-column:span 9}
    .sm-span-10{grid-column:span 10}
    .sm-span-11{grid-column:span 11}
    .sm-span-12{grid-column:span 12}
    .sm-span-13{grid-column:span 13}
    .sm-span-14{grid-column:span 14}
    .sm-span-15{grid-column:span 15}
    .sm-span-16{grid-column:span 16}
    .sm-span-17{grid-column:span 17}
    .sm-span-18{grid-column:span 18}
    .sm-span-19{grid-column:span 19}
    .sm-span-20{grid-column:span 20}
    .sm-span-21{grid-column:span 21}
    .sm-span-22{grid-column:span 22}
    .sm-span-23{grid-column:span 23}
    .sm-span-24{grid-column:span 24}
}

/* MD ≥768px */
@media (min-width:768px){
    .md-span-1{grid-column:span 1}
    .md-span-2{grid-column:span 2}
    .md-span-3{grid-column:span 3}
    .md-span-4{grid-column:span 4}
    .md-span-5{grid-column:span 5}
    .md-span-6{grid-column:span 6}
    .md-span-7{grid-column:span 7}
    .md-span-8{grid-column:span 8}
    .md-span-9{grid-column:span 9}
    .md-span-10{grid-column:span 10}
    .md-span-11{grid-column:span 11}
    .md-span-12{grid-column:span 12}
    .md-span-13{grid-column:span 13}
    .md-span-14{grid-column:span 14}
    .md-span-15{grid-column:span 15}
    .md-span-16{grid-column:span 16}
    .md-span-17{grid-column:span 17}
    .md-span-18{grid-column:span 18}
    .md-span-19{grid-column:span 19}
    .md-span-20{grid-column:span 20}
    .md-span-21{grid-column:span 21}
    .md-span-22{grid-column:span 22}
    .md-span-23{grid-column:span 23}
    .md-span-24{grid-column:span 24}
}

/* LG ≥992px */
@media (min-width:992px){
    .lg-span-1{grid-column:span 1}
    .lg-span-2{grid-column:span 2}
    .lg-span-3{grid-column:span 3}
    .lg-span-4{grid-column:span 4}
    .lg-span-5{grid-column:span 5}
    .lg-span-6{grid-column:span 6}
    .lg-span-7{grid-column:span 7}
    .lg-span-8{grid-column:span 8}
    .lg-span-9{grid-column:span 9}
    .lg-span-10{grid-column:span 10}
    .lg-span-11{grid-column:span 11}
    .lg-span-12{grid-column:span 12}
    .lg-span-13{grid-column:span 13}
    .lg-span-14{grid-column:span 14}
    .lg-span-15{grid-column:span 15}
    .lg-span-16{grid-column:span 16}
    .lg-span-17{grid-column:span 17}
    .lg-span-18{grid-column:span 18}
    .lg-span-19{grid-column:span 19}
    .lg-span-20{grid-column:span 20}
    .lg-span-21{grid-column:span 21}
    .lg-span-22{grid-column:span 22}
    .lg-span-23{grid-column:span 23}
    .lg-span-24{grid-column:span 24}
}

/* XL ≥1200px */
@media (min-width:1200px){
    .xl-span-1{grid-column:span 1}
    .xl-span-2{grid-column:span 2}
    .xl-span-3{grid-column:span 3}
    .xl-span-4{grid-column:span 4}
    .xl-span-5{grid-column:span 5}
    .xl-span-6{grid-column:span 6}
    .xl-span-7{grid-column:span 7}
    .xl-span-8{grid-column:span 8}
    .xl-span-9{grid-column:span 9}
    .xl-span-10{grid-column:span 10}
    .xl-span-11{grid-column:span 11}
    .xl-span-12{grid-column:span 12}
    .xl-span-13{grid-column:span 13}
    .xl-span-14{grid-column:span 14}
    .xl-span-15{grid-column:span 15}
    .xl-span-16{grid-column:span 16}
    .xl-span-17{grid-column:span 17}
    .xl-span-18{grid-column:span 18}
    .xl-span-19{grid-column:span 19}
    .xl-span-20{grid-column:span 20}
    .xl-span-21{grid-column:span 21}
    .xl-span-22{grid-column:span 22}
    .xl-span-23{grid-column:span 23}
    .xl-span-24{grid-column:span 24}
}
/* XXL ≥1400px */
@media (min-width:1400px){
    .xxl-span-1{grid-column:span 1}
    .xxl-span-2{grid-column:span 2}
    .xxl-span-3{grid-column:span 3}
    .xxl-span-4{grid-column:span 4}
    .xxl-span-5{grid-column:span 5}
    .xxl-span-6{grid-column:span 6}
    .xxl-span-7{grid-column:span 7}
    .xxl-span-8{grid-column:span 8}
    .xxl-span-9{grid-column:span 9}
    .xxl-span-10{grid-column:span 10}
    .xxl-span-11{grid-column:span 11}
    .xxl-span-12{grid-column:span 12}
    .xxl-span-13{grid-column:span 13}
    .xxl-span-14{grid-column:span 14}
    .xxl-span-15{grid-column:span 15}
    .xxl-span-16{grid-column:span 16}
    .xxl-span-17{grid-column:span 17}
    .xxl-span-18{grid-column:span 18}
    .xxl-span-19{grid-column:span 19}
    .xxl-span-20{grid-column:span 20}
    .xxl-span-21{grid-column:span 21}
    .xxl-span-22{grid-column:span 22}
    .xxl-span-23{grid-column:span 23}
    .xxl-span-24{grid-column:span 24}
}
/* XXXL ≥1600px */
@media (min-width:1600px){
    .xxxl-span-1{grid-column:span 1}
    .xxxl-span-2{grid-column:span 2}
    .xxxl-span-3{grid-column:span 3}
    .xxxl-span-4{grid-column:span 4}
    .xxxl-span-5{grid-column:span 5}
    .xxxl-span-6{grid-column:span 6}
    .xxxl-span-7{grid-column:span 7}
    .xxxl-span-8{grid-column:span 8}
    .xxxl-span-9{grid-column:span 9}
    .xxxl-span-10{grid-column:span 10}
    .xxxl-span-11{grid-column:span 11}
    .xxxl-span-12{grid-column:span 12}
    .xxxl-span-13{grid-column:span 13}
    .xxxl-span-14{grid-column:span 14}
    .xxxl-span-15{grid-column:span 15}
    .xxxl-span-16{grid-column:span 16}
    .xxxl-span-17{grid-column:span 17}
    .xxxl-span-18{grid-column:span 18}
    .xxxl-span-19{grid-column:span 19}
    .xxxl-span-20{grid-column:span 20}
    .xxxl-span-21{grid-column:span 21}
    .xxxl-span-22{grid-column:span 22}
    .xxxl-span-23{grid-column:span 23}
    .xxxl-span-24{grid-column:span 24}
}
/* XXXXL ≥1800px */
@media (min-width:1800px){
    .xxxxl-span-1{grid-column:span 1}
    .xxxxl-span-2{grid-column:span 2}
    .xxxxl-span-3{grid-column:span 3}
    .xxxxl-span-4{grid-column:span 4}
    .xxxxl-span-5{grid-column:span 5}
    .xxxxl-span-6{grid-column:span 6}
    .xxxxl-span-7{grid-column:span 7}
    .xxxxl-span-8{grid-column:span 8}
    .xxxxl-span-9{grid-column:span 9}
    .xxxxl-span-10{grid-column:span 10}
    .xxxxl-span-11{grid-column:span 11}
    .xxxxl-span-12{grid-column:span 12}
    .xxxxl-span-13{grid-column:span 13}
    .xxxxl-span-14{grid-column:span 14}
    .xxxxl-span-15{grid-column:span 15}
    .xxxxl-span-16{grid-column:span 16}
    .xxxxl-span-17{grid-column:span 17}
    .xxxxl-span-18{grid-column:span 18}
    .xxxxl-span-19{grid-column:span 19}
    .xxxxl-span-20{grid-column:span 20}
    .xxxxl-span-21{grid-column:span 21}
    .xxxxl-span-22{grid-column:span 22}
    .xxxxl-span-23{grid-column:span 23}
    .xxxxl-span-24{grid-column:span 24}
}

/* Mantieni la scala "sm" dei controlli per coerenza visiva */
.grid-24 .form-control,
.grid-24 .form-select,
.grid-24 .btn{
    height:calc(1.5em + .5rem + 2px);
    padding:.25rem .5rem;
    font-size:.875rem;
}


/* ===== Estensione Bootstrap: row-cols per breakpoint extra ===== */

/* XXXL ≥1600px */
@media (min-width:1600px){
    .row-cols-xxxl-auto > * { flex: 0 0 auto; width: auto; }

    .row-cols-xxxl-1  > * { flex: 0 0 auto; width: 100%; }
    .row-cols-xxxl-2  > * { flex: 0 0 auto; width: calc(100% / 2); }
    .row-cols-xxxl-3  > * { flex: 0 0 auto; width: calc(100% / 3); }
    .row-cols-xxxl-4  > * { flex: 0 0 auto; width: calc(100% / 4); }
    .row-cols-xxxl-5  > * { flex: 0 0 auto; width: calc(100% / 5); }
    .row-cols-xxxl-6  > * { flex: 0 0 auto; width: calc(100% / 6); }
    .row-cols-xxxl-7  > * { flex: 0 0 auto; width: calc(100% / 7); }
    .row-cols-xxxl-8  > * { flex: 0 0 auto; width: calc(100% / 8); }
    .row-cols-xxxl-9  > * { flex: 0 0 auto; width: calc(100% / 9); }
    .row-cols-xxxl-10 > * { flex: 0 0 auto; width: calc(100% / 10); }
    .row-cols-xxxl-11 > * { flex: 0 0 auto; width: calc(100% / 11); }
    .row-cols-xxxl-12 > * { flex: 0 0 auto; width: calc(100% / 12); }
}

/* XXXXL ≥1800px */
@media (min-width:1800px){
    .row-cols-xxxxl-auto > * { flex: 0 0 auto; width: auto; }

    .row-cols-xxxxl-1  > * { flex: 0 0 auto; width: 100%; }
    .row-cols-xxxxl-2  > * { flex: 0 0 auto; width: calc(100% / 2); }
    .row-cols-xxxxl-3  > * { flex: 0 0 auto; width: calc(100% / 3); }
    .row-cols-xxxxl-4  > * { flex: 0 0 auto; width: calc(100% / 4); }
    .row-cols-xxxxl-5  > * { flex: 0 0 auto; width: calc(100% / 5); }
    .row-cols-xxxxl-6  > * { flex: 0 0 auto; width: calc(100% / 6); }
    .row-cols-xxxxl-7  > * { flex: 0 0 auto; width: calc(100% / 7); }
    .row-cols-xxxxl-8  > * { flex: 0 0 auto; width: calc(100% / 8); }
    .row-cols-xxxxl-9  > * { flex: 0 0 auto; width: calc(100% / 9); }
    .row-cols-xxxxl-10 > * { flex: 0 0 auto; width: calc(100% / 10); }
    .row-cols-xxxxl-11 > * { flex: 0 0 auto; width: calc(100% / 11); }
    .row-cols-xxxxl-12 > * { flex: 0 0 auto; width: calc(100% / 12); }
}


/* ===== Display utilities - extra breakpoints ===== */

/* XXXL ≥1600px */
@media (min-width:1600px){
    .d-xxxl-none        { display: none !important; }
    .d-xxxl-inline      { display: inline !important; }
    .d-xxxl-inline-block{ display: inline-block !important; }
    .d-xxxl-block       { display: block !important; }
    .d-xxxl-grid        { display: grid !important; }
    .d-xxxl-table       { display: table !important; }
    .d-xxxl-table-row   { display: table-row !important; }
    .d-xxxl-table-cell  { display: table-cell !important; }
    .d-xxxl-flex        { display: flex !important; }
    .d-xxxl-inline-flex { display: inline-flex !important; }
}

/* XXXXL ≥1800px */
@media (min-width:1800px){
    .d-xxxxl-none        { display: none !important; }
    .d-xxxxl-inline      { display: inline !important; }
    .d-xxxxl-inline-block{ display: inline-block !important; }
    .d-xxxxl-block       { display: block !important; }
    .d-xxxxl-grid        { display: grid !important; }
    .d-xxxxl-table       { display: table !important; }
    .d-xxxxl-table-row   { display: table-row !important; }
    .d-xxxxl-table-cell  { display: table-cell !important; }
    .d-xxxxl-flex        { display: flex !important; }
    .d-xxxxl-inline-flex { display: inline-flex !important; }
}