/* ================================================
   LEADERBOARD TABLE - RESPONSIVE DESIGN
   Bảng xếp hạng Top Dự Đoán responsive cho mobile
   ================================================ */

/* ================================================
   DESKTOP - Default styles (no changes)
   ================================================ */

.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    background-color: var(--color-bg-secondary);
}

.table th {
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-xs);
}

.table td {
    font-size: var(--text-sm);
}

/* ================================================
   MOBILE RESPONSIVE - Tablets and below
   ================================================ */

@media (max-width: 1024px) {
    /* Tablet: Hiển thị các cột chính */
    .table thead th {
        font-size: 10px;
        padding: 8px 4px !important;
    }

    .table tbody td {
        padding: 8px 4px !important;
        font-size: 12px;
    }
}

/* ================================================
   MOBILE RESPONSIVE - Mobile phones
   ================================================ */

@media (max-width: 768px) {
    /* Remove fixed table layout on mobile for better flexibility */
    .table-fixed {
        table-layout: auto !important;
    }

    /* Adjust overflow container */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Add scroll indicator shadow */
        background: linear-gradient(to right, white 30%, rgba(255,255,255,0)),
                    linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
                    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
                    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
        background-repeat: no-repeat;
        background-color: white;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .dark .overflow-x-auto {
        background: linear-gradient(to right, rgb(30 41 59) 30%, rgba(30,41,59,0)),
                    linear-gradient(to right, rgba(30,41,59,0), rgb(30 41 59) 70%) 0 100%,
                    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.3), rgba(0,0,0,0)),
                    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.3), rgba(0,0,0,0)) 0 100%;
        background-repeat: no-repeat;
        background-color: rgb(30 41 59);
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Make table scrollable but keep header aligned */
    .table {
        min-width: 100%;
        width: max-content;
    }

    /* Optimize column widths for mobile */
    .table thead th:nth-child(1) { /* Hạng */
        width: 50px !important;
        min-width: 50px;
    }

    .table thead th:nth-child(2) { /* Thành viên */
        width: 140px !important;
        min-width: 140px;
    }

    .table thead th:nth-child(6) { /* Tỷ lệ % */
        width: 70px !important;
        min-width: 70px;
    }

    .table thead th:nth-child(7) { /* Điểm */
        width: 60px !important;
        min-width: 60px;
    }

    .table thead th:nth-child(10) { /* Share */
        width: 45px !important;
        min-width: 45px;
    }

    /* Compact header text */
    .table thead th {
        font-size: 9px !important;
        padding: 6px 3px !important;
        line-height: 1.2;
    }

    /* Compact body cells */
    .table tbody td {
        padding: 6px 3px !important;
        font-size: 11px !important;
    }

    /* Adjust rank column */
    .table tbody td:nth-child(1) {
        text-align: center;
    }

    /* Compact user cell */
    .table tbody td:nth-child(2) a {
        gap: 4px !important;
    }

    .table tbody td:nth-child(2) img,
    .table tbody td:nth-child(2) div {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .table tbody td:nth-child(2) span {
        font-size: 11px !important;
        max-width: 90px;
    }

    /* Adjust win rate display */
    .table tbody td:nth-child(6) .font-bold {
        font-size: 12px !important;
    }

    .table tbody td:nth-child(6) .text-\[10px\] {
        font-size: 9px !important;
    }

    /* Adjust points display */
    .table tbody td:nth-child(7) .font-bold {
        font-size: 12px !important;
    }

    /* Compact icons */
    .table tbody td i,
    .table tbody td svg {
        width: 14px !important;
        height: 14px !important;
    }

    .table tbody td button {
        padding: 4px !important;
    }
}

/* ================================================
   EXTRA SMALL MOBILE - Very small screens
   ================================================ */

@media (max-width: 380px) {
    /* Even more compact for very small screens */
    .table thead th {
        font-size: 8px !important;
        padding: 4px 2px !important;
    }

    .table tbody td {
        padding: 4px 2px !important;
        font-size: 10px !important;
    }

    .table thead th:nth-child(2) { /* Thành viên */
        width: 110px !important;
        min-width: 110px;
    }

    .table tbody td:nth-child(2) img,
    .table tbody td:nth-child(2) div {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .table tbody td:nth-child(2) span {
        font-size: 10px !important;
        max-width: 70px;
    }

    /* Smaller emojis for ranks */
    .table tbody td:nth-child(1) span {
        font-size: 18px !important;
    }
}

/* ================================================
   SCROLL INDICATOR - Show user they can scroll
   ================================================ */

@media (max-width: 768px) {
    .overflow-x-auto::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to left, rgba(0,0,0,0.05), transparent);
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .dark .overflow-x-auto::after {
        background: linear-gradient(to left, rgba(0,0,0,0.2), transparent);
    }

    /* Hide scroll indicator when scrolled to the end */
    .overflow-x-auto.scrolled-end::after {
        opacity: 0;
    }
}

/* ================================================
   PAGINATION RESPONSIVE
   ================================================ */

@media (max-width: 640px) {
    /* Stack pagination on mobile */
    .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Smaller pagination buttons */
    nav.flex.items-center.gap-2 button {
        width: 32px !important;
        height: 32px !important;
        font-size: 11px !important;
    }

    nav.flex.items-center.gap-2 i,
    nav.flex.items-center.gap-2 svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ================================================
   LOADING & EMPTY STATES
   ================================================ */

@media (max-width: 768px) {
    /* Smaller loading spinner on mobile */
    #leaderboard-loading .w-8 {
        width: 24px !important;
        height: 24px !important;
    }

    /* Compact empty state */
    .table tbody td[colspan] i,
    .table tbody td[colspan] svg {
        width: 48px !important;
        height: 48px !important;
    }

    .table tbody td[colspan] p {
        font-size: 12px !important;
    }
}

/* ================================================
   TOUCH TARGETS - Ensure buttons are tappable
   ================================================ */

@media (max-width: 768px) {
    /* Minimum 44x44 touch targets for mobile */
    .table .follow-user-btn,
    .table .share-user-btn {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================ */

/* Enable GPU acceleration for smooth scrolling */
.overflow-x-auto {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
}

/* Smooth scrolling */
.overflow-x-auto {
    scroll-behavior: smooth;
}

/* Hide scrollbar on mobile for cleaner look (optional) */
@media (max-width: 768px) {
    .overflow-x-auto::-webkit-scrollbar {
        height: 4px;
    }

    .overflow-x-auto::-webkit-scrollbar-track {
        background: var(--color-bg-tertiary);
    }

    .overflow-x-auto::-webkit-scrollbar-thumb {
        background: var(--color-text-tertiary);
        border-radius: 2px;
    }
}

/* ================================================
   ACCESSIBILITY - Focus states
   ================================================ */

.table a:focus-visible,
.table button:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* ================================================
   PRINT STYLES
   ================================================ */

@media print {
    .overflow-x-auto {
        overflow: visible !important;
    }

    .table {
        width: 100% !important;
        table-layout: auto !important;
    }

    /* Show all columns when printing */
    .hidden.md\:table-cell,
    .hidden.lg\:table-cell,
    .hidden.xl\:table-cell {
        display: table-cell !important;
    }
}