.table-responsive {
    border-radius: var(--border-radius-medium, 8px);
    box-shadow: var(--box-shadow-card, 0 3px 10px rgba(0, 0, 0, 0.08));
    background-color: var(--background-table, #f9f9f9);
    margin: var(--margin-large, 12px) auto;
    max-width: 1200px;
    overflow-x: auto;
}

.table {
    width: 100%;
    color: var(--text-primary, #2d2d2d);
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-family, 'Noto Sans Devanagari', 'Segoe UI', system-ui, sans-serif);
}

.table thead th {
    background: var(--accent-primary, #4a6bff);
    color: var(--text-on-accent, #ffffff);
    padding: var(--padding-small, 4px);
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-label-mobile, 0.8rem);
    text-transform: uppercase;
    border: none;
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: center;
    white-space: nowrap;
}

.table tbody tr {
    transition: background-color var(--transition-short, 0.2s ease);
}

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

.table td {
    color: var(--text-primary, #2d2d2d);
    padding: var(--padding-small, 4px);
    font-size: var(--font-size-label-mobile, 0.8rem);
    background-color: var(--background-card, #ffffff);
    border-bottom: 1px solid var(--border-color-light, #e5e5e5);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* Specific styling for date column to prevent line breaks */
.table td.date {
    white-space: nowrap;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--background-container, #ffffff);
}

.result-wait {
    color: var(--highlight-neutral, #8b5cf6);
    font-weight: var(--font-weight-bold, 700);
}

.result-announced {
    color: var(--highlight-win, #28a745);
    font-weight: var(--font-weight-bold, 700);
}

.current-month-row {
    background-color: var(--highlight-current-month, rgba(255, 235, 59, 0.2)) !important;
    font-weight: var(--font-weight-bold, 700);
}

/* Responsive Adjustments for Tables */
@media (max-width: var(--breakpoint-mobile, 767px)) {
    .table-responsive {
        margin: var(--margin-medium, 8px) var(--margin-small, 4px);
    }
    .table thead th {
        font-size: var(--font-size-tiny, 0.65rem);
        padding: var(--padding-small, 4px);
    }
    .table td {
        font-size: var(--font-size-tiny, 0.65rem);
        padding: var(--padding-small, 4px);
    }
}

@media (min-width: calc(var(--breakpoint-mobile, 767px) + 1px)) and (max-width: var(--breakpoint-tablet, 991px)) {
    .table thead th {
        font-size: var(--font-size-label-desktop, 0.9rem);
        padding: var(--padding-medium, 8px);
    }
    .table td {
        font-size: var(--font-size-body-desktop, 0.95rem);
        padding: var(--padding-medium, 8px);
    }
}

@media (min-width: var(--breakpoint-desktop, 1024px)) {
    .table thead th {
        font-size: var(--font-size-label-desktop, 0.9rem);
        padding: var(--padding-medium, 8px);
    }
    .table td {
        font-size: var(--font-size-body-desktop, 1rem);
        padding: var(--padding-medium, 8px);
    }
}