/* ============================================================================
   CSS Accordion Tabelle Step 3 - Gestione Viste
   Data: 22/01/2026
   Scopo: Stili per accordion collapse tabelle in selezione campi
   ============================================================================ */

/* === HEADER ACCORDION === */
.tabella-card-item .card-header {
  cursor: pointer !important;
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #dee2e6 !important;
  transition: background-color 0.2s ease !important;
}

.tabella-card-item .card-header:hover {
  background-color: #e9ecef !important;
}

/* === ICONA CHEVRON ANIMATA === */
.tabella-card-item .toggle-icon {
  transition: transform 0.3s ease !important;
  display: inline-block !important;
  margin-right: 8px !important;
}

/* Quando collapsed, ruota a destra */
.tabella-card-item .card-header[aria-expanded="false"] .toggle-icon {
  transform: rotate(-90deg) !important;
}

/* Quando espanso, freccia giù normale */
.tabella-card-item .card-header[aria-expanded="true"] .toggle-icon {
  transform: rotate(0deg) !important;
}

/* === CORPO ACCORDION === */
.tabella-card-item .card-body {
  padding: 0 !important;
}

.tabella-card-item .list-group-flush {
  border-radius: 0 !important;
}

/* === CAMPI LISTA === */
.tabella-card-item .campo-item {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  transition: background-color 0.15s ease !important;
}

.tabella-card-item .campo-item:last-child {
  border-bottom: none !important;
}

.tabella-card-item .campo-item:hover {
  background-color: #f8f9fa !important;
}

.tabella-card-item .campo-item.active {
  background-color: #d1ecf1 !important;
  border-left: 3px solid #0c5460 !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .tabella-card-item .card-header h4 {
    font-size: 16px !important;
  }
  
  .tabella-card-item .card-header small {
    font-size: 12px !important;
  }
}

/* ============================================================================
   NOTE:
   - Chevron ruota 90° quando collapsed
   - Hover effect su header per feedback visivo
   - Campi selezionati con bordo sinistro blu
   ============================================================================ */