/* Custom Styles for VideoRank */

/* Sticky Columns for Rankings Table */
.table-responsive-custom {
    overflow-x: scroll;
    /* Always show horizontal scrollbar */
    position: relative;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
}

.sticky-col {
    position: -webkit-sticky;
    position: sticky;
    background-color: #fff !important;
    /* Force white background to hide scrolling content */
    z-index: 10;
}

.first-col {
    left: 0;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    border-right: 1px solid #dee2e6;
}

.second-col {
    left: 200px;
    width: 120px;
    min-width: 120px;
    border-right: 2px solid #dee2e6;
}

/* Ensure headers are above body content */
thead th.sticky-col {
    z-index: 20;
    background-color: #f8f9fa !important;
    /* Bootstrap table-light color */
}

/* Rank Badges */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.8rem;
}

.rank-top-10 {
    background-color: #198754 !important;
    color: #fff !important;
}

.rank-top-20 {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.rank-top-30 {
    background-color: #2308f0 !important;
    color: #fff !important;
}

/* Success color */
.rank-other {
    background-color: #9ba2a9 !important;
    color: #242629 !important;
}

/* Secondary light */