*{
    box-sizing:border-box;
}

body{
    margin:20px;
    font-family:Segoe UI,Arial,sans-serif;
    background:#f5f7fa;
    color:#333;
}

/* contenitore */
.table-container{
    width:100%;
    overflow-x:auto;
    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* tabella */
.modern-table{
    width:100%;
    min-width:1200px;
    border-collapse:collapse;
}

/* intestazione */
.modern-table thead{
    background:#2c3e50;
    color:#fff;
}

.modern-table th{
    padding:14px 18px;
    text-align:left;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:.4px;
    position:sticky;
    top:0;
    white-space:nowrap;
}

/* celle */
.modern-table td{
    padding:14px 18px;
    border-bottom:1px solid #ececec;
    white-space:nowrap;
    font-size:.92rem;
}

/* righe alternate */
.modern-table tbody tr:nth-child(even){
    background:#fafafa;
}

/* hover */
.modern-table tbody tr:hover{
    background:#eef6ff;
    transition:.2s;
}

/* pulsante */
.btn{
    padding:7px 14px;
    border:none;
    border-radius:6px;
    background:#4a90e2;
    color:#fff;
    cursor:pointer;
    font-size:.85rem;
    transition:.2s;
}

.btn:hover{
    background:#2f76ca;
}

/* scrollbar */
.table-container::-webkit-scrollbar{
    height:10px;
}

.table-container::-webkit-scrollbar-thumb{
    background:#c9c9c9;
    border-radius:10px;
}

.table-container::-webkit-scrollbar-track{
    background:#f0f0f0;
}