/*
==========================================================
FantasyFanzone Table System
Version: 4.0
==========================================================
*/

.ffz-table-wrapper{
    width:100%;

    overflow-x:auto;

    overscroll-behavior-x:contain;

    scrollbar-gutter:stable;

    border:1px solid var(--ffz-border);

    border-radius:20px;

    background:var(--ffz-surface);

    box-shadow:var(--ffz-shadow-md);
}

/*======================================================
TABLE
======================================================*/

.ffz-table{
    width:100%;

    min-width:720px;

    border-collapse:collapse;
    border-spacing:0;
}

/*======================================================
HEAD
======================================================*/

.ffz-table thead{
    background:rgba(255,255,255,.04);
}

.ffz-table th{
    padding:18px 20px;

    border-bottom:1px solid var(--ffz-border);

    color:var(--ffz-text-muted);

    font-size:13px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.08em;

    text-align:left;
    text-transform:uppercase;

    white-space:nowrap;
}

/*======================================================
BODY
======================================================*/

.ffz-table td{
    padding:18px 20px;

    border-bottom:1px solid rgba(255,255,255,.05);

    color:#fff;

    font-size:15px;
    line-height:1.5;

    vertical-align:middle;
}

.ffz-table tbody tr{
    transition:
        background-color var(--ffz-transition-normal);
}

.ffz-table tbody tr:hover{
    background:rgba(255,255,255,.04);
}

.ffz-table tbody tr:last-child td{
    border-bottom:0;
}

/*======================================================
ALIGNMENT
======================================================*/

.ffz-table td.center,
.ffz-table th.center{
    text-align:center;
}

.ffz-table td.right,
.ffz-table th.right{
    text-align:right;
}

/*======================================================
STATUS
======================================================*/

.ffz-table .success{
    color:var(--ffz-success);

    font-weight:700;
}

.ffz-table .warning{
    color:var(--ffz-warning);

    font-weight:700;
}

.ffz-table .danger{
    color:var(--ffz-danger);

    font-weight:700;
}

.ffz-table .muted{
    color:var(--ffz-text-muted);
}

/*======================================================
BADGES
======================================================*/

.ffz-table-badge{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:6px 10px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
    line-height:1;
}

.ffz-table-badge--green{
    background:rgba(34,197,94,.12);

    color:var(--ffz-success);
}

.ffz-table-badge--red{
    background:rgba(239,68,68,.12);

    color:var(--ffz-danger);
}

.ffz-table-badge--yellow{
    background:rgba(250,204,21,.12);

    color:var(--ffz-warning);
}

.ffz-table-badge--blue{
    background:rgba(59,130,246,.12);

    color:var(--ffz-info);
}

/*======================================================
TEAM CELL
======================================================*/

.ffz-team-cell{
    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;
}

.ffz-team-cell img{
    flex-shrink:0;

    width:28px;
    height:28px;

    object-fit:contain;
}

.ffz-team-cell__name{
    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;
}

/*======================================================
PLAYER CELL
======================================================*/

.ffz-player-cell{
    display:flex;

    align-items:center;

    gap:12px;

    min-width:0;
}

.ffz-player-cell img{
    flex-shrink:0;

    width:42px;
    height:42px;

    border-radius:50%;

    background:var(--ffz-surface-light);

    object-fit:cover;
}

.ffz-player-cell__name{
    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;
}

/*======================================================
INTERACTIVE CONTENT
======================================================*/

.ffz-table a,
.ffz-table button{
    color:inherit;
}

.ffz-table a:focus-visible,
.ffz-table button:focus-visible{
    outline:2px solid var(--ffz-primary);
    outline-offset:3px;
}

/*======================================================
SCROLLBAR
======================================================*/

.ffz-table-wrapper::-webkit-scrollbar{
    height:8px;
}

.ffz-table-wrapper::-webkit-scrollbar-track{
    background:transparent;
}

.ffz-table-wrapper::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);

    border-radius:999px;
}

.ffz-table-wrapper::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.22);
}

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

@media(max-width:768px){

    .ffz-table{
        min-width:640px;
    }

    .ffz-table td,
    .ffz-table th{
        padding:14px 16px;

        font-size:14px;
    }

    .ffz-player-cell img{
        width:38px;
        height:38px;
    }

}

/*======================================================
SMALL PHONES
======================================================*/

@media(max-width:480px){

    .ffz-table{
        min-width:600px;
    }

    .ffz-table td,
    .ffz-table th{
        padding:13px 14px;
    }

}

/*======================================================
REDUCED MOTION
======================================================*/

@media(prefers-reduced-motion:reduce){

    .ffz-table tbody tr{
        transition:none;
    }

}