/* General Container */
.icc-rankings-container {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    background-color: #fff;
    padding: 20px;
}

/* Grid for the ranking cards */
.icc-rankings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 30px;
}

/* Individual Ranking Card */
.ranking-card {
    background-color: #f8f7fa;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.ranking-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #051e56;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left;
}

.table-wrapper {
    flex-grow: 1;
    overflow: hidden;
}

/* Table Styling */
.icc-rankings-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.icc-rankings-table thead,
.icc-rankings-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.icc-rankings-table thead {
    padding-right: 15px; /* Account for scrollbar width */
}

.icc-rankings-table th {
    color: #888;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    border: none;
    vertical-align: middle;
    white-space: nowrap;
}

.icc-rankings-table tbody {
    display: block;
}

.icc-rankings-table.scrollable tbody {
    max-height: 350px; /* Approx 5 rows */
    overflow-y: auto;
}

.icc-rankings-table tbody tr {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    margin-bottom: 8px;
}

.icc-rankings-table tbody tr:first-child {
    background: linear-gradient(to right, #f0eafc, #e9e8ee);
}

.icc-rankings-table td {
    padding: 15px 12px;
    vertical-align: middle;
    border: none;
}

/* Column specific styles */
.pos-col { width: 15%; text-align: center; font-weight: 700; color: #6c757d; }
.player-col { width: 65%; font-weight: 600; color: #333; display: flex; align-items: center; }
.rating-col { width: 20%; font-weight: 700; font-size: 18px; color: #333; text-align: right; }

/* Header specific alignment */
th.pos-col { text-align: center; }
th.player-col { text-align: left; }
th.rating-col { text-align: right; }

.ranking-logo {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Scrollbar Styling */
.icc-rankings-table.scrollable tbody::-webkit-scrollbar {
    width: 8px;
}
.icc-rankings-table.scrollable tbody::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.icc-rankings-table.scrollable tbody::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.icc-rankings-table.scrollable tbody::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}


/* Button Styling */
.view-full-rankings-btn {
    display: block;
    width: 100%;
    background-color: #fcd93b;
    color: #333;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 20px;
    transition: background-color 0.2s ease;
}

.view-full-rankings-btn:hover {
    background-color: #fbc531;
    color: #333;
}

/* Responsive adjustments */
@media (max-width: 782px) {
    .icc-rankings-grid {
        grid-template-columns: 1fr;
    }
    .icc-rankings-container {
        padding: 10px;
    }
}