/* CSS Variables for colors (approximating Tailwind's slate palette and others) */
:root {
    --font-family-inter: 'Inter', sans-serif;
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-750: #2c3a4f;
    /* Custom shade */
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-amber-400: #fbbf24;
    --color-orange-400: #fb923c;
    --color-gold-text: #4A3B00;
    --color-silver-text: #3E3E3E;
    --color-bronze-text: #4A2A00;
    --color-rank-gold: #ffd700;
    --color-rank-silver: #c0c0c0;
    --color-rank-bronze: #cd7f32;
    --color-rank-other: #6b7280;
    --gradient-start: #4f46e5;
    --gradient-end: #db2777;
}

/* Header Styles */
.header-title {
    font-size: 1rem;
    /* text-4xl */
    line-height: 1rem;
    font-weight: 700;
    /* font-bold */
    /* gradient-text styles */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
    margin: 0 auto;
}

.header-subtitle {
    color: var(--color-slate-400);
    margin-top: 0.5rem;
    /* mt-2 */
    font-size: 1.125rem;
    /* text-lg */
    line-height: 1.75rem;
}

/* Table Container Styles */
.table-container {
    overflow-x: auto;
    border-radius: 0.5rem;
    /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* shadow-md */
}

/* Table Styles */
.leaderboard-table-monthly, .leaderboard-table-total {
    width: 100%;
    font-size: 0.875rem;
    /* text-sm */
    line-height: 1.25rem;
    text-align: left;
    color: var(--color-slate-300);
}

    .leaderboard-table-monthly thead, .leaderboard-table-total thead {
        font-size: 0.75rem;
        /* text-xs */
        line-height: 1rem;
        color: var(--color-slate-200);
        text-transform: uppercase;
        background-color: var(--color-slate-700);
    }

    .leaderboard-table-monthly th,
    .leaderboard-table-monthly td,
    .leaderboard-table-total th,
    .leaderboard-table-total td {
        padding: 1rem 1.5rem;
        /* px-6 py-4 */
    }

        .leaderboard-table-monthly th:first-child, .leaderboard-table-total th:first-child {
            border-top-left-radius: 0.5rem;
            /* rounded-tl-lg */
        }

        .leaderboard-table-monthly th:last-child, .leaderboard-table-total th:last-child {
            border-top-right-radius: 0.5rem;
            /* rounded-tr-lg */
        }

    .leaderboard-table-monthly tbody tr,
    .leaderboard-table-total tbody tr {
        background-color: var(--color-slate-750);
        border-bottom: 1px solid var(--color-slate-600);
    }

        .leaderboard-table-monthly tbody tr:last-child,
        .leaderboard-table-total tbody tr:last-child {
            border-bottom: none;
        }

        .leaderboard-table-monthly tbody tr:hover,
        .leaderboard-table-total tbody tr:hover {
            background-color: var(--color-slate-600);
            /* Adjusted hover color */
        }

    .leaderboard-table-monthly tbody td,
    .leaderboard-table-total tbody td {
        white-space: nowrap;
    }

.player-cell {
    display: flex;
    align-items: center;
}

.player-avatar {
    height: 2.5rem;
    /* h-10 */
    width: 2.5rem;
    /* w-10 */
    border-radius: 50%;
    /* rounded-full */
    object-fit: cover;
    margin-right: 0.75rem;
    /* mr-3 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* shadow-md */
}

.player-name {
    font-weight: 500;
    /* font-medium */
    color: var(--color-slate-50);
}

.points-cell {
    text-align: right;
    font-weight: 600;
    /* font-semibold */
    font-size: 1.125rem;
    /* text-lg */
    line-height: 1.75rem;
}

.points-gold {
    color: var(--color-amber-400);
}

.points-bronze {
    color: var(--color-orange-400);
}

.points-other {
    color: var(--color-slate-300);
}


/* Rank Badge Styles */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    border-radius: 50%;
    font-weight: 600;
    color: white;
    /* Default, overridden by specific ranks */
}

.rank-1 {
    background-color: var(--color-rank-gold);
    color: var(--color-gold-text);
}

.rank-2 {
    background-color: var(--color-rank-silver);
    color: var(--color-silver-text);
}

.rank-3 {
    background-color: var(--color-rank-bronze);
    color: var(--color-bronze-text);
}

.rank-other {
    background-color: var(--color-rank-other);
}
.player-cell {
    white-space: normal;
    overflow-wrap: break-word;
}
/* Responsive Styles for small screens (max-width: 640px) */
@media (max-width: 640px) {
    .leaderboard-table-monthly tr,
    .leaderboard-table-monthly td,
    .leaderboard-table-monthly tbody,
    .leaderboard-table-total tr,
    .leaderboard-table-total td,
    .leaderboard-table-total tbody {
    }

    .avatar-wrapper {
        display:none;
    }

    .leaderboard-table-monthly tr,
    .leaderboard-table-total tr {
        margin-bottom: 1rem;
        border: 1px solid var(--color-slate-600);
        border-radius: 0.5rem;
        overflow: hidden;
        background-color: var(--color-slate-750);
    }

    .leaderboard-table-monthly td:last-child,
    .leaderboard-table-total td:last-child {
        border-bottom: none;
    }

    .rank-badge-mobile-container {
        /* Used by JS to wrap badge on mobile */
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

        .rank-badge-mobile-container .rank-badge {
            margin-left: 0.5rem;
        }

    /* Remove bottom-left/right rounding for table cells on mobile, as the TR now has rounding */
    .leaderboard-table-monthly td.rounded-bl-sm,
    .leaderboard-table-total td.rounded-bl-sm,
    .leaderboard-table-monthly td.rounded-br-sm,
    .leaderboard-table-total td.rounded-br-sm {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .leaderboard-container{
        width: 100%;
    }
}

/* Styles for larger screens (min-width: 640px) - sm equivalent */
@media (min-width: 641px) {

    .header-title {
        font-size: 2rem;
        /* sm:text-5xl */
        line-height: 1;
    }

    /* Apply corner rounding for last row cells on larger screens */
    .leaderboard-table-monthly td.rounded-bl-sm,
    .leaderboard-table-total td.rounded-bl-sm {
        border-bottom-left-radius: 0.5rem;
        /* sm:rounded-bl-lg */
    }

    .leaderboard-table-monthly td.rounded-br-sm,
    .leaderboard-table-total td.rounded-br-sm {
        border-bottom-right-radius: 0.5rem;
        /* sm:rounded-br-lg */
    }

    .leaderboard-container{
        width: 50%;
    }
}