<div class="tab-pane fade" id="bilancio-tab-costi" role="tabpanel">
  <div class="row g-3">
    <div class="col-6">
      <div class="card border">
        <div class="card-header pb-2">
          <h6 class="mb-0">Tabella Costi</h6>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-sm table-striped align-middle mb-0">
              <thead>
                <tr>
                  <th>Categoria contabile</th>
                  <th class="text-end">Movimenti</th>
                  <th class="text-end">Totale costi</th>
                </tr>
              </thead>
              <tbody>
                @forelse($costiRows as $row)
                  <tr>
                    <td>
                      @if(!empty($row['colore']))
                        <span class="badge me-1" style="background-color: {{ $row['colore'] }};">&nbsp;</span>
                      @endif
                      {{ $row['voce'] ?? 'N/D' }}
                    </td>
                    <td class="text-end">{{ (int)($row['movimenti'] ?? 0) }}</td>
                    <td class="text-end text-danger">€ {{ number_format((float)($row['totale'] ?? 0), 2, ',', '.') }}</td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="3" class="text-center text-muted py-3">Nessun costo rilevato nell'anno selezionato.</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-6">
      <div class="card border h-100">
        <div class="card-header pb-2">
          <h6 class="mb-0">Trend costi mensili</h6>
        </div>
        <div class="card-body">
          <div id="bilancio-costi-chart" style="min-height: 230px;"></div>
          <p class="text-muted small mt-2 mb-0">
            Mostra l'andamento dei costi mese per mese: picchi alti indicano periodi con spese maggiori.
          </p>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-6">
      <div class="card border h-100">
        <div class="card-header pb-2">
          <h6 class="mb-0">Top categorie costi</h6>
        </div>
        <div class="card-body">
          <div id="bilancio-costi-categorie-chart" style="min-height: 260px;"></div>
          <p class="text-muted small mt-2 mb-0">
            Confronta le categorie: le barre piu lunghe sono le voci che pesano di piu sul totale costi.
          </p>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-6">
      <div class="card border h-100">
        <div class="card-header pb-2">
          <h6 class="mb-0">Composizione costi (%)</h6>
        </div>
        <div class="card-body">
          <div id="bilancio-costi-percent-chart" style="min-height: 320px;"></div>
          <p class="text-muted small mt-2 mb-0">
            Distribuzione percentuale dei costi: ogni fetta rappresenta la quota di una categoria sul totale.
          </p>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-6">
      <div class="card border h-100">
        <div class="card-header pb-2">
          <h6 class="mb-0">Pareto costi (80/20)</h6>
        </div>
        <div class="card-body">
          <div id="bilancio-costi-pareto-chart" style="min-height: 320px;"></div>
          <p class="text-muted small mt-2 mb-0">
            Pareto 80/20: le barre mostrano i valori, la linea indica la percentuale cumulata per capire quali categorie coprono gran parte dei costi.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
