/* Contenitore per lo scroll verticale su desktop */
  .table-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #2f3542;
    border-radius: 8px; /* Angoli smussati moderni */
  }

  /* Stili base Desktop */
  .responsive-table-mq {
    width: 100%;
    border-collapse: collapse;
    font-family: system-ui, -apple-system, sans-serif; /* Font più leggibile e moderno */
    color: #ffffff; 
    font-size: 15px;
  }

  .responsive-table-mq th,
  .responsive-table-mq td {
    padding: 14px 16px; /* Più spazio per il testo */
    text-align: left;
  }

  /* Intestazione fissa (Sticky) Antracite e Arancione */
  .responsive-table-mq th {
    position: sticky;
    top: 0;
    background-color: #1e222b; /* Antracite scuro per maggior contrasto */
    color: #ff9f43; /* Arancione ad alta leggibilità */
    font-weight: 600;
    z-index: 10;
    box-shadow: inset 0 -2px 0 #2f3542;
  }

  /* Alternanza colori righe (Sfondi scuri per far risaltare il testo bianco) */
  .responsive-table-mq tbody tr:nth-child(odd) {
    background-color: #3d4654; /* Grigio scuro mediato */
  }

  .responsive-table-mq tbody tr:nth-child(even) {
    background-color: #4b5563; /* Grigio leggermente più chiaro */
  }

  /* EFFETTO HOVER (Desktop): Illumina la riga al passaggio del mouse */
  @media (hover: hover) {
    .responsive-table-mq tbody tr:hover {
      background-color: #576574 !important; /* Grigio luminoso */
      cursor: pointer;
    }
  }

  /* MEDIA QUERY: Ottimizzazione totale per Smartphone (< 600px) */
  @media screen and (max-width: 600px) {
    .table-scroll-container {
      max-height: none; 
      border: none;
      overflow: visible;
    }

    .responsive-table-mq thead {
      display: none; /* Nasconde l'intestazione standard */
    }

    /* Trasforma la riga in una "scheda" (card) mobile ben separata */
    .responsive-table-mq tr {
      display: block;
      margin-bottom: 20px;
      border: 1px solid #4b5563;
      border-radius: 8px;
      overflow: hidden; /* Mantiene gli angoli smussati */
      box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* Dà profondità su mobile */
    }

    /* Celle trasformate in righe interne alla scheda */
    .responsive-table-mq td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding: 12px 16px;
      text-align: right; /* Allinea i dati a destra per un look pulito */
      font-size: 14px;
    }

    .responsive-table-mq td:last-child {
      border-bottom: none;
    }

    /* Etichette a sinistra: Arancione chiaro, leggibile e ordinato */
    .responsive-table-mq td::before {
      content: attr(data-label);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.5px;
      color: #ffaa66; /* Arancione mobile con contrasto aumentato */
      text-align: left;
      padding-right: 10px;
    }

    /* EFFETTO HOVER (Mobile): feedback visivo rapido al tocco */
    .responsive-table-mq tbody tr:active {
      background-color: #576574 !important;
    }
  }