:root {
    --text-on-color: rgb(var(--filterColor-rgb));
}

/* ==========================================
   1. CONTENITORE PRINCIPALE & LAYOUT
   ========================================== */
.index-container {
    padding: 1.5rem;
    background-color: rgb(var(--filterBackground-rgb));
    color: rgb(var(--filterColor-rgb));
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

/* Contenitore responsive per la tabella */
.table-responsive-container {
    width: 100%;
    overflow-x: auto;
    background-color: rgba(var(--filterBackground-rgb), 0.85);
    backdrop-filter: blur(8px);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--primary-border);
    margin-top: 1rem;
    padding: 1rem;
}

/* ==========================================
   2. TABELLA PRINCIPALE & INTESTAZIONE
   ========================================== */
.table-index {
    width: 100% !important;
    table-layout: auto;
    border-collapse: collapse;
    text-align: left;
    color: rgb(var(--filterColor-rgb));
    margin-bottom: 1rem !important;
}

    /* Gradiente unico sull'intestazione */
    .table-index thead {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    }

        .table-index thead th {
            background: transparent !important;
            color: var(--contrast-color) !important;
            padding: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.05em;
            border-bottom: 2px solid var(--secondary-border);
            white-space: nowrap;
        }

    /* Celle del corpo tabella */
    .table-index td {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--primary-border);
    }

    /* Righe Striped (alternate) */
    .table-index tbody tr:nth-child(even) {
        background-color: var(--primary-light);
    }

    /* Effetto Hover sulle righe */
    .table-index tbody tr {
        transition: background-color 0.2s ease-in-out;
    }

        .table-index tbody tr:hover {
            background-color: var(--secondary-light);
        }

/* ==========================================
   3. BOTTONI GENERALI
   ========================================== */
.btn-custom-primary {
    background-color: var(--primary-color);
    color: var(--contrast-color);
    border: 1px solid var(--primary-border);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease;
}

    .btn-custom-primary:hover {
        filter: brightness(0.95);
    }

.btn-custom-secondary {
    background-color: var(--secondary-color);
    color: var(--contrast-color);
    border: 1px solid var(--secondary-border);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease;
}

    .btn-custom-secondary:hover {
        filter: brightness(0.95);
    }

/* ==========================================
   4. OVERRIDE BADGE BOOTSTRAP
   ========================================== */
.index-container .index-table span.badge.bg-primary,
.table-responsive-container .index-table span.badge.bg-primary,
.index-container .table-index span.badge.bg-primary,
.table-responsive-container .table-index span.badge.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--contrast-color) !important;
    font-weight: 600 !important;
}

/* ==========================================
   OVERRIDE DEFINITIVO BADGE BG-PRIMARY
   ========================================== */
.datatable-container .index-table span.badge.bg-primary,
table.index-table span.badge.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--contrast-color) !important;
    font-weight: 600 !important;
}