/**
 * BenzinaItalia Auto Editor – Stili articoli e tabelle (frontend)
 * Tabelle professionali e responsive
 */

/* ============================================================
   CONTENITORE ARTICOLO
   ============================================================ */

.bi-article {
    --bi-table-border: 1px solid #e2e8f0;
    --bi-table-header-bg: #f8fafc;
    --bi-table-header-fg: #334155;
    --bi-table-zebra: #f8fafc;
    --bi-table-radius: 8px;
    --bi-table-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   INTRO TABELLA
   ============================================================ */

.bi-article .bi-table-intro {
    margin-bottom: 0.75rem;
    color: #475569;
    font-size: 0.9375rem;
}

/* ============================================================
   WRAPPER RESPONSIVE (scroll orizzontale su schermi piccoli)
   ============================================================ */

.bi-article .bi-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
    border-radius: var(--bi-table-radius);
    box-shadow: var(--bi-table-shadow);
    background: #fff;
}

/* ============================================================
   TABELLA – ASPETTO PROFESSIONALE
   ============================================================ */

.bi-article .bi-table {
    width: 100%;
    min-width: 280px;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.bi-article .bi-table thead {
    background: var(--bi-table-header-bg);
}

.bi-article .bi-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--bi-table-header-fg);
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.bi-article .bi-table th:first-child {
    border-top-left-radius: var(--bi-table-radius);
}

.bi-article .bi-table th:last-child {
    border-top-right-radius: var(--bi-table-radius);
}

.bi-article .bi-table td {
    padding: 0.75rem 1rem;
    border-bottom: var(--bi-table-border);
    color: #334155;
}

.bi-article .bi-table tbody tr:nth-child(even) {
    background: var(--bi-table-zebra);
}

.bi-article .bi-table tbody tr:hover {
    background: #f1f5f9;
}

.bi-article .bi-table tbody tr:last-child td {
    border-bottom: none;
}

.bi-article .bi-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--bi-table-radius);
}

.bi-article .bi-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--bi-table-radius);
}

/* Allineamento numeri (Euro / valori) a destra */
.bi-article .bi-table td:not(:first-child),
.bi-article .bi-table th:not(:first-child) {
    text-align: right;
}

.bi-article .bi-table th:first-child,
.bi-article .bi-table td:first-child {
    text-align: left;
}

/* ============================================================
   RESPONSIVE – MOBILE
   ============================================================ */

@media (max-width: 640px) {
    .bi-article .bi-table-wrapper {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
        box-shadow: none;
        border-top: var(--bi-table-border);
        border-bottom: var(--bi-table-border);
    }

    .bi-article .bi-table {
        font-size: 0.875rem;
        min-width: 260px;
    }

    .bi-article .bi-table th,
    .bi-article .bi-table td {
        padding: 0.5rem 0.75rem;
    }

    .bi-article .bi-table th:first-child,
    .bi-article .bi-table td:first-child {
        position: sticky;
        left: 0;
        background: inherit;
        z-index: 1;
        box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.05);
    }

    .bi-article .bi-table thead th:first-child {
        background: var(--bi-table-header-bg);
    }

    .bi-article .bi-table tbody tr:nth-child(even) td:first-child {
        background: var(--bi-table-zebra);
    }

    .bi-article .bi-table tbody tr:hover td:first-child {
        background: #f1f5f9;
    }
}

/* ============================================================
   SEZIONI E GRAFICI (coerenza spaziatura)
   ============================================================ */

.bi-article .bi-section {
    margin-bottom: 2rem;
}

.bi-article .bi-section .bi-graph {
    margin: 1rem 0;
}

.bi-article .bi-conclusion {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}