/* --------------------------------------------------------------------------
   DataTables a schede su smartphone (vedi js/dt-mobile-cards.js).
   Solo per le tabelle con data-mobile-cards; sopra i 768px nulla cambia.
   La classe .dt-cards e' ripetuta per prevalere sulle regole !important del tema.
   -------------------------------------------------------------------------- */
.dt-cards-filter-toggle { display: none !important; }

@media (max-width: 767.98px) {

  /* ---- Pulsante "Filtri" ---- */
  .dt-cards-on > .dt-cards-filter-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    margin-bottom: .75rem;
  }
  .dt-cards-filter-count {
    color: #fff !important;
    background: var(--color-primary, #bf0b34) !important;
  }
  .dt-cards-filters-open > .dt-cards-filter-toggle {
    color: #fff !important;
    background: var(--color-primary, #bf0b34) !important;
  }
  .dt-cards-filters-open > .dt-cards-filter-toggle .dt-cards-filter-count {
    color: var(--color-primary, #bf0b34) !important;
    background: #fff !important;
  }

  /* ---- Nessuna cornice attorno all'elenco: le schede hanno gia' la loro ---- */
  .table-responsive:has(> .dt-cards-on),
  .dt-cards-on,
  .dt-cards-on .dt-layout-row,
  .dt-cards-on .dt-layout-cell,
  .dt-cards-on .dt-layout-table,
  .dt-cards-on .dt-scroll,
  .dt-cards-on .dataTables_scroll {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .dt-cards-on .dt-layout-row { padding: 0 !important; margin: 0 !important; }
  .dt-cards-on .dt-layout-row:last-child { padding-top: .25rem !important; }

  /* ---- Intestazione: titoli nascosti, filtri in un pannello a comparsa ---- */
  .dt-cards-on .dt-scroll-head,
  .dt-cards-on .dataTables_scrollHead {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }
  .dt-cards-on .dt-scroll-headInner,
  .dt-cards-on .dataTables_scrollHeadInner,
  table.dt-cards-head.dt-cards-head {
    width: 100% !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
  table.dt-cards-head.dt-cards-head,
  table.dt-cards-head.dt-cards-head > thead {
    display: block;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  table.dt-cards-head.dt-cards-head > thead > tr:first-child,
  table.dt-cards-head.dt-cards-head > thead > tr:nth-child(2) { display: none !important; }

  .dt-cards-filters-open table.dt-cards-head.dt-cards-head > thead > tr:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: .7rem;
    margin-bottom: .75rem;
    padding: .9rem;
    color: var(--color-text-primary, inherit);
    background: var(--color-bg-surface, #fff) !important;
    border: 1px solid var(--color-border, #dde1de);
    border-top: 3px solid var(--color-primary, #bf0b34);
    border-radius: .35rem;
  }
  table.dt-cards-head.dt-cards-head > thead > tr:nth-child(2) > th {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
  }
  table.dt-cards-head.dt-cards-head > thead > tr:nth-child(2) > th::before {
    display: block;
    margin-bottom: .25rem;
    color: var(--color-text-secondary, #657068);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    content: attr(data-label);
  }
  table.dt-cards-head.dt-cards-head > thead > tr:nth-child(2) > th.dt-cards-nofilter { display: none !important; }
  table.dt-cards-head.dt-cards-head > thead > tr:nth-child(2) > th .form-control,
  table.dt-cards-head.dt-cards-head > thead > tr:nth-child(2) > th .form-select,
  table.dt-cards-head.dt-cards-head > thead > tr:nth-child(2) > th .ts-wrapper {
    width: 100% !important;
    border-color: var(--color-border, #c9d0cb) !important;
  }

  /* ---- Corpo: ogni riga diventa una scheda ---- */
  .dt-cards-on .dt-scroll-body,
  .dt-cards-on .dataTables_scrollBody {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
  }
  .dt-cards-on .dt-scroll-body > table > thead,
  .dt-cards-on .dataTables_scrollBody > table > thead { display: none !important; }

  table.dt-cards.dt-cards {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  table.dt-cards.dt-cards > tbody { display: block; }
  table.dt-cards.dt-cards > tbody > tr {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: .75rem;
    padding: .7rem .9rem;
    color: var(--color-text-primary, inherit);
    background: var(--color-bg-surface, #fff) !important;
    border: 1px solid var(--color-border, #dde1de);
    border-left: 3px solid var(--color-primary, #bf0b34);
    border-radius: .35rem;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(25, 25, 26, .05));
  }
  table.dt-cards.dt-cards > tbody > tr > td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: auto !important;
    min-height: 0;
    padding: .4rem 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--color-border-subtle, #e9ece9) !important;
    text-align: right !important;
    white-space: normal !important;
    box-shadow: none !important;
  }
  table.dt-cards.dt-cards > tbody > tr > td::before {
    flex: 0 0 38%;
    color: var(--color-text-secondary, #657068);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    content: attr(data-label);
  }
  table.dt-cards.dt-cards > tbody > tr > td[data-label=""] { justify-content: flex-end; }
  table.dt-cards.dt-cards > tbody > tr > td[data-label=""]::before { display: none; }
  table.dt-cards.dt-cards > tbody > tr > td.dt-card-empty { display: none; }

  /* Titolo della scheda (targa, nome utente, deposito) */
  /* Sempre in cima, anche se la colonna titolo non e' la prima (es. Depositi) */
  table.dt-cards.dt-cards > tbody > tr > td.dt-card-title {
    display: block;
    order: -1;
    padding: .1rem 2.6rem .55rem 0 !important;
    border-top: 0 !important;
    font-size: 1rem;
    font-weight: 700;
    text-align: left !important;
  }
  table.dt-cards.dt-cards > tbody > tr > td.dt-card-title::before { display: none; }
  table.dt-cards.dt-cards > tbody > tr > td.dt-card-title .align-items-center { align-items: flex-start !important; }
  table.dt-cards.dt-cards > tbody > tr > td.dt-card-title .justify-content-center { justify-content: flex-start !important; }
  table.dt-cards.dt-cards > tbody > tr > td.dt-card-title .text-center { text-align: left !important; }

  /* Pulsante "+" dei dettagli nell'angolo della scheda */
  table.dt-cards.dt-cards > tbody > tr > td.dtcontrol {
    position: absolute;
    top: .55rem;
    right: .6rem;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
  }
  table.dt-cards.dt-cards > tbody > tr > td.dtcontrol::before { display: none; }

  /* Righe di dettaglio aperte e riga "nessun dato": contenuto a tutta larghezza */
  table.dt-cards.dt-cards > tbody > tr > td:not([data-label]) {
    display: block;
    padding: 0 !important;
    border-top: 0 !important;
    text-align: left !important;
  }
  table.dt-cards.dt-cards > tbody > tr > td:not([data-label])::before { display: none; }
  /* Scheda con dettaglio aperto: le due righe si uniscono */
  table.dt-cards.dt-cards > tbody > tr:has(+ tr > td:not([data-label])) {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  table.dt-cards.dt-cards > tbody > tr:has(> td[data-label]) + tr:has(> td:not([data-label])) {
    padding: .5rem;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}