.kpi-table-container {
    margin: 20px 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.kpi-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid var(--kpi-border, #e2e4e7);
    border-radius: var(--kpi-radius, 10px);
    overflow: hidden;
    box-shadow: var(--kpi-shadow, none);
    background: var(--kpi-bg, #ffffff);
    font-size: var(--kpi-font-size, 16px);
}

.kpi-table tr {
    border-bottom: 1px solid var(--kpi-border, #e2e4e7);
    transition: background-color 0.3s ease;
}

.kpi-table tr:last-child {
    border-bottom: none;
}

.kpi-table tr:hover {
    background-color: var(--kpi-hover-color, #f9f9f9);
}

.kpi-table.kpi-zebra tr:nth-child(even) {
    background-color: var(--kpi-hover-color, #f9f9f9);
}

.kpi-table th,
.kpi-table td {
    padding: var(--kpi-padding, 15px);
    text-align: left;
    vertical-align: top;
}

.kpi-table th {
    width: 40%;
    font-weight: 600;
    color: var(--kpi-heading-color, #333333);
    background-color: var(--kpi-bg-light, #fafafa);
    border-right: 1px solid var(--kpi-border, #e2e4e7);
}

.kpi-table td {
    width: 60%;
    color: var(--kpi-value-color, #555555);
}

@media (max-width: 768px) {
    .kpi-table {
        font-size: var(--kpi-mobile-font-size, 14px);
    }
    
    .kpi-table th,
    .kpi-table td {
        padding: 10px;
    }
}