/**
 * sublima_bs4_compat.css
 * Bridge di compatibilità BS4 → BS5
 *
 * Mappa le classi BS3/BS4 rimosse o rinominate in BS5
 * ai loro equivalenti funzionali. Questo file permette
 * alle 349+ pagine ERP di funzionare con il CSS di BS5
 * senza dover modificare ogni singolo template.
 *
 * DA CARICARE DOPO bootstrap.min.css (BS5)
 * e PRIMA di sublima_new.css
 *
 * Man mano che i template vengono migrati a BS5 nativo,
 * le regole qui possono essere rimosse progressivamente.
 */

/* ============================================
   1. GRID: col-xs-* → col-* (BS3 remnant)
   BS5 ha rimosso il breakpoint xs: col-xs-N è ora col-N.

   IMPORTANTE: queste regole si applicano SOLO sotto il
   breakpoint sm (< 576px). Sopra, i col-sm-*/col-md-*/etc.
   di BS5 prendono il sopravvento normalmente.
   Senza media query, col-xs-12 sovrascriverebbe col-sm-*
   a TUTTI i breakpoint per via dell'ordine di cascata.
   ============================================ */
@media (max-width: 575.98px) {
    .col-xs-1  { flex: 0 0 auto; width: 8.333333%; }
    .col-xs-2  { flex: 0 0 auto; width: 16.666667%; }
    .col-xs-3  { flex: 0 0 auto; width: 25%; }
    .col-xs-4  { flex: 0 0 auto; width: 33.333333%; }
    .col-xs-5  { flex: 0 0 auto; width: 41.666667%; }
    .col-xs-6  { flex: 0 0 auto; width: 50%; }
    .col-xs-7  { flex: 0 0 auto; width: 58.333333%; }
    .col-xs-8  { flex: 0 0 auto; width: 66.666667%; }
    .col-xs-9  { flex: 0 0 auto; width: 75%; }
    .col-xs-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-xs-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-xs-12 { flex: 0 0 auto; width: 100%; }
}

/* ============================================
   1b. VISIBILITY: hidden-xs/sm/md/lg (BS3)
   BS5 usa d-none / d-sm-block etc.
   ============================================ */
@media (max-width: 575.98px) {
    .hidden-xs { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .hidden-sm { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-md { display: none !important; }
}
@media (min-width: 992px) {
    .hidden-lg { display: none !important; }
}

/* ============================================
   2. FLOAT: pull-left/right, float-left/right
   BS3: pull-left/right
   BS4: float-left/right
   BS5: float-start/float-end
   ============================================ */
.pull-left,  .float-left  { float: left !important; }
.pull-right, .float-right { float: right !important; }

/* ============================================
   3. SPACING: ml/mr/pl/pr → ms/me/ps/pe
   BS5 renamed left/right to start/end for RTL
   ============================================ */
/* Margin left → margin start */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

/* Margin right → margin end */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

/* Padding left → padding start */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

/* Padding right → padding end */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* ============================================
   4. TEXT ALIGNMENT
   ============================================ */
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }

/* ============================================
   5. FONT UTILITIES
   ============================================ */
.font-weight-bold    { font-weight: 700 !important; }
.font-weight-bolder  { font-weight: bolder !important; }
.font-weight-normal  { font-weight: 400 !important; }
.font-weight-light   { font-weight: 300 !important; }
.font-weight-lighter { font-weight: lighter !important; }
.font-italic         { font-style: italic !important; }

/* ============================================
   6. PANEL → CARD (BS3 panels)
   ============================================ */
.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}
.panel-heading {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.panel-heading:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.panel-body {
    flex: 1 1 auto;
    padding: 1rem;
}
.panel-title {
    margin-bottom: 0;
    font-size: 1rem;
}
.panel-footer {
    padding: 0.5rem 1rem;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.125);
}
.panel-footer:last-child {
    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}
/* Panel color variants */
.panel-default { border-color: #dee2e6; }
.panel-primary { border-color: #0d6efd; }
.panel-primary > .panel-heading { background-color: #0d6efd; color: #fff; border-color: #0d6efd; }
.panel-success { border-color: #198754; }
.panel-success > .panel-heading { background-color: #198754; color: #fff; border-color: #198754; }
.panel-info { border-color: #0dcaf0; }
.panel-info > .panel-heading { background-color: #0dcaf0; color: #000; border-color: #0dcaf0; }
.panel-warning { border-color: #ffc107; }
.panel-warning > .panel-heading { background-color: #ffc107; color: #000; border-color: #ffc107; }
.panel-danger { border-color: #dc3545; }
.panel-danger > .panel-heading { background-color: #dc3545; color: #fff; border-color: #dc3545; }

/* ============================================
   7. CLOSE BUTTON (BS4 → BS5)
   BS4 used .close with ×, BS5 uses .btn-close
   Keep .close working for existing templates
   ============================================ */
button.close,
.close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: .5;
    cursor: pointer;
}
.close:hover { opacity: .75; }
.close span { display: none; } /* Hide the × character, use SVG background instead */

/* ============================================
   8. BADGE (BS4 → BS5)
   BS4: badge-pill, badge-{color}
   BS5: rounded-pill, bg-{color}
   ============================================ */
.badge-pill { border-radius: 50rem !important; }
.badge-primary   { background-color: #0d6efd !important; color: #fff !important; }
.badge-secondary { background-color: #6c757d !important; color: #fff !important; }
.badge-success   { background-color: #198754 !important; color: #fff !important; }
.badge-danger    { background-color: #dc3545 !important; color: #fff !important; }
.badge-warning   { background-color: #ffc107 !important; color: #000 !important; }
.badge-info      { background-color: #0dcaf0 !important; color: #000 !important; }
.badge-light     { background-color: #f8f9fa !important; color: #000 !important; }
.badge-dark      { background-color: #212529 !important; color: #fff !important; }

/* ============================================
   9. JUMBOTRON (rimosso in BS5)
   ============================================ */
.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: 0.3rem;
}
.jumbotron-fluid {
    padding-right: 0;
    padding-left: 0;
    border-radius: 0;
}

/* ============================================
   10. FORM UTILITIES (BS4 → BS5)
   ============================================ */
.form-group {
    margin-bottom: 1rem;
}
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

/* ============================================
   11. CUSTOM CONTROL (BS4 → BS5)
   BS4 custom-control → BS5 form-check
   ============================================ */
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}
.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}
.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}
.custom-switch { padding-left: 2.25rem; }

/* ============================================
   12. INPUT GROUP (BS4 → BS5)
   ============================================ */
.input-group-append,
.input-group-prepend {
    display: flex;
}
.input-group-append .btn,
.input-group-prepend .btn {
    position: relative;
    z-index: 2;
}

/* ============================================
   13. MEDIA OBJECT (rimosso in BS5)
   ============================================ */
.media {
    display: flex;
    align-items: flex-start;
}
.media-body {
    flex: 1;
}

/* ============================================
   14. ROW-EQ-HEIGHT (custom BS3 utility)
   ============================================ */
.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

/* ============================================
   15. NAVBAR COMPATIBILITY
   BS4 navbar classes that differ in BS5
   ============================================ */
/* Keep BS4 navbar-light functional */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================
   16. MISCELLANEOUS BS4 UTILITIES
   ============================================ */
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.thead-dark th {
    color: #fff;
    background-color: #343a40;
    border-color: #454d55;
}
.thead-light th {
    color: #495057;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

/* sr-only → visually-hidden */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   17. BTN-BLOCK (rimosso in BS5)
   BS4: .btn-block → width 100% + display block
   BS5: usare d-grid wrapper o w-100
   ============================================ */
.btn-block {
    display: block;
    width: 100%;
}

/* ============================================
   18. TAB-PANE FADE TRANSITION (BS3/BS4 → BS5)
   BS3/BS4: .fade.in  → BS5: .fade.show
   ============================================ */
.fade.in {
    opacity: 1;
}

/* ============================================
   19. DROPDOWN-MENU-RIGHT/LEFT (BS4 → BS5)
   BS4: dropdown-menu-right → BS5: dropdown-menu-end
   Usato da bootstrap-table, bootstrap-select, etc.
   ============================================ */
.dropdown-menu-right {
    right: 0;
    left: auto;
}
.dropdown-menu-left {
    right: auto;
    left: 0;
}

/* ============================================
   20. CARET (BS3/BS4 → rimosso in BS5)
   Bootstrap-table genera ancora <span class="caret">
   ============================================ */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
/* BS5 aggiunge già il caret via ::after su .dropdown-toggle.
   Nasconde il .caret/<b class="caret"> manuale per evitare il doppio caret.
   Non colpisce i <th> di bootstrap-table (non sono .dropdown-toggle). */
.dropdown-toggle .caret,
.dropdown-toggle > b.caret {
    display: none;
}

/* ============================================
   19. LABEL (BS3 → BS5)
   BS3: .label .label-* → BS5: .badge .bg-*
   ============================================ */
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-default { background-color: #777; }
.label-primary { background-color: #0d6efd; }
.label-success { background-color: #198754; }
.label-info    { background-color: #0dcaf0; color: #000; }
.label-warning { background-color: #ffc107; color: #000; }
.label-danger  { background-color: #dc3545; }

/* ============================================
   21. FONTAWESOME 4 ANIMATION (fa-spin / fa-pulse)
   FA4 CSS rimosso in BS5 migration, ma alcune
   pagine usano ancora le classi di animazione
   con le nuove icone Bootstrap Icons.
   ============================================ */
.fa-spin {
    animation: fa-spin 2s infinite linear;
}
.fa-pulse {
    animation: fa-spin 1s infinite steps(8);
}
@keyframes fa-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* fa-5x (sizing utility from FA4) */
.fa-5x { font-size: 5em; }
.fa-4x { font-size: 4em; }
.fa-3x { font-size: 3em; }
.fa-2x { font-size: 2em; }
.fa-lg { font-size: 1.333em; vertical-align: -15%; }