[data-bs-theme="light"] {
  .card-header {
    background-color: #fbfaff;
  }
}

[data-bs-theme="dark"] {
  .card-header {
    background-color: #292c2b;
  }
}

/*  on dark theme  */

.auth_form_wrapper {
  max-width: 400px;
  width: 100%;
  align-self: center;
}

.admin_form_container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.admin_profile_tab {
  gap: 0.5rem !important;
}

.admin_profile_tab li:hover a {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

#product_list .product_item:last-of-type hr {
  display: none;
}

#tab_home_wrapper .row>* {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --- Stili per il Tema Chiaro --- */
.form_select_2 .select2-container .select2-selection {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.form_select_2 .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bs-body-color);
}

.form_select_2 .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--bs-body-color);
  /* Colore placeholder */
}

.form_select_2 .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--bs-border-color) transparent transparent transparent;
}

/* Stile per l'elemento di placeholder */
.sortable-placeholder {
  background-color: #f0f0f0;
  border: 1px dashed #ccc;
  height: 50px;
  margin-bottom: 10px;
}

.btn_fixed_center_bottom {
  position: fixed !important;
  bottom: 1rem;
  left: 50%;
  z-index: 999;
}

.elcos_motore_col_200 {
  flex-basis: 200px !important;
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  gap: 1rem !important;
}

.elcos_motore_col_300 {
  flex-basis: 300px !important;
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  gap: 1rem !important;
}

.elcos_motore_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

.lw_field_zoom_150 {
  zoom: 1.5 !important;
}

.lw_admin_form_btn {
  width: 100% !important;
}

@media (min-width: 768px) {
  #prodotti_codice {
    zoom: 1.5 !important;
  }

  .lw_admin_form_btn {
    width: 140px !important;
  }
}

.lw_timeline_line::after {
  left: 8.33333333% !important;
  margin-left: -10px !important;
}

.active>.page-link,
.page-link.active {
  background-color: #4ba6ef;
  border-color: #4ba6ef;
}

.form-check-input:checked {
  background-color: #4ba6ef;
  border-color: #4ba6ef;
}


.tab-content-border {
  border-left: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 20px;
}


div.resource-item[data-type="0"],
div.dropped-item[data-type="0"] {
  background: #73879c;
  display: inline-block;
}

div.resource-item[data-type="1"],
div.dropped-item[data-type="1"] {
  background: #b9b9b9;
  display: inline-block;
}


div.resource-item[data-type="0"]::before,
div.dropped-item[data-type="0"]::before {
  /* Uso di attributo selettore per maggiore specificità e ::after per standard moderno */
  font-family: 'boxicons' !important;
  /* Assicurati che il nome della famiglia di font sia corretto e tra virgolette se non è standard */
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  display: inline-block;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\ec63";
  /* Assicurati che il valore unicode sia corretto per il tuo font */
}

div.resource-item[data-type="1"]::before,
div.dropped-item[data-type="1"]::before {
  /* Uso di attributo selettore per maggiore specificità e ::after per standard moderno */
  font-family: 'boxicons' !important;
  /* Assicurati che il nome della famiglia di font sia corretto e tra virgolette se non è standard */
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  display: inline-block;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\ec8c";
  /* Assicurati che il valore unicode sia corretto per il tuo font */
}

.calendar-header {
  min-width: 150px;
}

div.dropped-item .color,
div.resource-item .color {
  display: block;
  width: 100%;
  height: 3px;
}

.lw_dashboard_calendar .dropped-item {
  cursor: default;
}

@media (min-width: 768px) {
  .lw_timeline .timeline-continue:after {
    left: 16%;
  }
}

.lw_timeline .timeline-box {
  width: -webkit-fill-available;
}


.minilabel {
  font-size: 10px;
  margin: 0;
}

.prezzototale {
  padding: 30px 0 14px 5px;
  font-weight: 500;
}


.box_type_2,
.box_type_3,
.box_type_4,
.box_type_5,
.box_type_8,
.box_type_11,
.box_type_14,
.box_type_16 {
  background-color: rgb(244 67 54 / 10%);
}

.box_type_7,
.box_type_15 {
  background-color: rgba(244, 200, 54, 0.1);
}

.box_type_6 {
  background-color: rgba(152, 244, 54, 0.1);
}

.box_type_12,
.box_type_13 {
  background-color: rgba(54, 216, 244, 0.1);
}



@media (max-width: 767px) {

    /* Applica gli stili alla tua tabella specifica con la classe .tableblocco */
    .tableblocco {
        width: 100%; /* Assicura che la tabella occupi tutta la larghezza disponibile */
        border-collapse: collapse; /* Assicura che i bordi siano gestiti correttamente */
    }

    /* Stili per le righe della tabella all'interno di .tableblocco */
    .tableblocco tbody tr.item { /* Targeting specifico per le tue righe item */
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        padding: 0.5rem;
        position: relative; /* Necessario per posizionare il pulsante di eliminazione */
    }

    /* Stili per le celle della tabella all'interno di .tableblocco */
    .tableblocco td, .tableblocco th {
        display: block;
        width: 100% !important; /* Forza la larghezza al 100% per impilare */
        text-align: left !important;
        padding: 0.5rem;
        border: none; /* Rimuove i bordi tra le celle impilate */
        box-sizing: border-box; /* Include padding e border nella larghezza */
    }

    /* Nasconde le intestazioni della tabella originali */
    .tableblocco thead {
        display: none;
    }

    /* Stili per le label all'interno delle celle per fungere da "etichette" */
    .tableblocco td .minilabel {
        font-weight: bold;
        display: block; /* Rende la label un blocco per separarla dall'input */
        margin-bottom: 0.25rem;
        color: #343a40; /* Colore scuro per la label */
    }

    /* Allinea i pulsanti e gli input all'interno delle celle */
    .tableblocco td .form-control,
    .tableblocco td .form-select,
    .tableblocco td .btn {
        width: 100%; /* Gli input prendono tutta la larghezza disponibile */
        max-width: 100%;
        display: block; /* Ogni input su una nuova riga */
        margin-bottom: 0.5rem; /* Spazio tra gli input */
    }

    /* Rimuovi il margine inferiore dall'ultimo elemento in una col */
    .tableblocco td .col:last-child .form-control,
    .tableblocco td .col:last-child .form-select,
    .tableblocco td .col:last-child .btn {
        margin-bottom: 0;
    }

    /* Specifico per il layout delle righe dei prodotti all'interno di .tableblocco */
    .tableblocco .item .row {
        flex-direction: column; /* Impila le colonne interne delle righe dei prodotti */
        margin-left: 0; /* Rimuovi margini negativi di Bootstrap */
        margin-right: 0;
    }

    .tableblocco .item .col,
    .tableblocco .item .col-2,
    .tableblocco .item .col-6 {
        width: 100%; /* Ogni colonna interna prende tutta la larghezza */
        padding-left: 0; /* Rimuovi padding di Bootstrap */
        padding-right: 0;
        margin-bottom: 0.5rem; /* Spazio tra gli elementi impilati */
    }

    .tableblocco .item .col:last-child,
    .tableblocco .item .col-2:last-child,
    .tableblocco .item .col-6:last-child {
        margin-bottom: 0; /* Rimuovi margine dall'ultima colonna */
    }

    /* Stili per il riepilogo nel footer */
    .tableblocco tfoot {
        display: block; /* Rende il footer un blocco per gestire meglio il layout */
        width: 100%;
    }

    .tableblocco tfoot tr {
        display: flex; /* Utilizza flexbox per le righe del footer */
        flex-wrap: wrap; /* Permette alle colonne del footer di avvolgersi */
        justify-content: space-between;
        margin-bottom: 0.5rem;
        border: none;
        padding: 0;
    }

    .tableblocco tfoot th,
    .tableblocco tfoot td {
        display: flex;
        width: 48%; /* Per avere due colonne affiancate nel footer */
        align-items: center;
        justify-content: flex-end; /* Allinea il testo a destra */
        padding: 0.25rem 0;
        border: none;
        box-sizing: border-box;
    }

    .tableblocco tfoot th {
        justify-content: flex-start; /* Allinea le etichette del footer a sinistra */
        font-weight: bold;
    }

    .tableblocco tfoot h4 {
        margin: 0;
        width: 100%; /* Assicura che l'h4 prenda tutta la larghezza disponibile */
        text-align: right;
    }

    /* Posiziona il pulsante di eliminazione */
    .tableblocco .canc_item {
        position: absolute;
        top: 2px;
        right: 2px;
        z-index: 10;
        width: 27px !important;
    }

    /* Regola il padding per evitare sovrapposizioni con il pulsante di eliminazione */
    .tableblocco .item > td:last-child {
        padding-top: 2rem; /* Aggiungi spazio per il pulsante */
    }

    /* Nasconde la colonna di spostamento se non necessaria su mobile */
    .tableblocco .bg-info.opacity-25 {
        display: none;
    }

    /* Rende il div contenente la descrizione più leggibile */
    .tableblocco textarea {
        resize: vertical;
        min-height: 60px;
    }

    /* Stili per il prezzo totale */
    .tableblocco .prezzototale {
        text-align: right; /* Allinea il prezzo totale a destra */
        font-weight: bold;
        font-size: 1.1em;
        margin-bottom: 0.5rem; /* Spazio sotto il prezzo */
    }

    /* Regola l'input extra_sconto nel footer */
    .tableblocco tfoot #extra_sconto {
        width: auto; /* Permetti all'input di avere la sua larghezza naturale */
        max-width: 100px; /* Limita la larghezza per input numerico */
        text-align: right;
    }
    
    /* Regola il margine tra gli elementi all'interno delle celle per evitare accavallamenti */
    .tableblocco td > .row {
        margin-bottom: 0.5rem;
    }
    .tableblocco td > .row:last-child {
        margin-bottom: 0;
    }
}