.table-responsive-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
margin: 1.5rem 0;
}
.table-responsive-wrapper table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
font-size: 0.95rem;
}
.table-responsive-wrapper thead th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-weight: 600;
padding: 12px 10px;
text-align: center;
position: sticky;
top: 0;
z-index: 2;
white-space: nowrap;
}
.table-responsive-wrapper thead tr:first-child th:first-child {
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
position: sticky;
left: 0;
z-index: 3;
}
.table-responsive-wrapper thead tr:nth-child(2) th:first-child {
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
position: sticky;
left: 0;
z-index: 3;
text-align: left;
}
.table-responsive-wrapper tbody td {
padding: 10px;
text-align: center;
border-bottom: 1px solid #e2e8f0;
transition: background 0.2s;
}
.table-responsive-wrapper tbody td:first-child {
position: sticky;
left: 0;
background: #f8fafc;
font-weight: 600;
text-align: left;
z-index: 1;
border-right: 2px solid #e2e8f0;
}
.table-responsive-wrapper tbody tr:nth-child(even) td:first-child {
background: #f1f5f9;
}
.table-responsive-wrapper tbody tr:hover td {
background: #e0e7ff;
}
.table-responsive-wrapper tbody tr:hover td:first-child {
background: #c7d2fe;
}
.table-responsive-wrapper .check {
color: #22c55e;
font-size: 1.1rem;
}
@media (max-width: 768px) {
.table-responsive-wrapper table {
font-size: 0.85rem;
}
.table-responsive-wrapper thead th,
.table-responsive-wrapper tbody td {
padding: 8px 6px;
}
}