/* ==========================================================================
   LOYALGAMES BAN LIST
   ========================================================================== */

.bans-page .loyal-page-content {
    width: 100%;
    max-width: none;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.bans-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    margin-bottom: 38px;
}

.bans-header h1 {
    margin: 0 0 10px;

    color: #f4f4f4;

    font-size: clamp(38px, 5vw, 56px);
    font-weight: 950;

    line-height: 1;
    letter-spacing: -2px;
}

.bans-header h1 span {
    color: #e32636;
}

.bans-header p {
    margin: 0;

    color: var(--text-soft);

    font-size: 13px;
}


/* ==========================================================================
   ACTIVE BAN COUNTER
   ========================================================================== */

.bans-count {
    flex: 0 0 auto;

    min-width: 135px;

    padding: 17px 24px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        ),
        var(--panel);

    border: 1px solid rgba(212, 160, 23, 0.38);
    border-radius: 8px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18);
}

.bans-count span {
    display: block;

    color: #85888c;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.bans-count strong {
    display: block;

    margin-top: 5px;

    color: #f2f2f2;

    font-size: 28px;
    font-weight: 900;

    line-height: 1;
}


/* ==========================================================================
   SEARCH
   ========================================================================== */

.bans-search {
    width: 100%;
    margin-bottom: 18px;
}

.bans-search input {
    display: block;

    width: 100%;
    height: 46px;

    padding: 0 16px;

    color: #e8e8e8;

    font-family: inherit;
    font-size: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        ),
        var(--panel);

    border: 1px solid var(--border);
    border-radius: 8px;

    outline: none;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.14);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.bans-search input::placeholder {
    color: #666a6e;
}

.bans-search input:focus {
    border-color: rgba(212, 160, 23, 0.55);

    box-shadow:
        0 0 0 3px rgba(212, 160, 23, 0.08),
        0 10px 30px rgba(0, 0, 0, 0.18);
}


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

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

    max-height: 900px;
    overflow-y: auto;
    overflow-x: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.006)
        ),
        var(--panel);

    border: 1px solid var(--border);
    border-radius: 10px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.22);
}


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

.bans-table {
    width: 100%;

    border-collapse: collapse;
    table-layout: fixed;
}


/* ==========================================================================
   COLUMN WIDTHS
   ========================================================================== */

.bans-table th:nth-child(1),
.bans-table td:nth-child(1) {
    width: 18%;
}

.bans-table th:nth-child(2),
.bans-table td:nth-child(2) {
    width: 9%;
}

.bans-table th:nth-child(3),
.bans-table td:nth-child(3) {
    width: 16%;
}

.bans-table th:nth-child(4),
.bans-table td:nth-child(4) {
    width: 11%;
}

.bans-table th:nth-child(5),
.bans-table td:nth-child(5) {
    width: 14%;
}

.bans-table th:nth-child(6),
.bans-table td:nth-child(6) {
    width: 14%;
}

.bans-table th:nth-child(7),
.bans-table td:nth-child(7) {
    width: 9%;
}

.bans-table th:nth-child(8),
.bans-table td:nth-child(8) {
    width: 9%;
}


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

.bans-table th {
    padding: 15px 13px;

    text-align: left;

    color: #777b80;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;

    white-space: nowrap;

    background: rgba(255, 255, 255, 0.018);

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


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

.bans-table td {
    padding: 18px 13px;

    color: #bfc1c4;

    font-size: 12px;

    vertical-align: middle;

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

    overflow: hidden;
    text-overflow: ellipsis;
}

.bans-table tbody tr:last-child td {
    border-bottom: none;
}

.bans-table tbody tr {
    transition:
        background 0.2s ease;
}

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


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

.ban-player strong {
    display: block;

    color: #f0f0f0;

    font-size: 13px;
    font-weight: 800;
}

.ban-player span {
    display: block;

    margin-top: 3px;

    color: #666a6e;

    font-size: 10px;
}


.ban-player span .ban-steamid-link {
    color: #66c0f4;
    text-decoration: none;
}

.ban-player span .ban-steamid-link:hover {
    color: #66c0f4;
    text-decoration: underline;
}


/* ==========================================================================
   SERVER BADGE
   ========================================================================== */

.server-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 46px;

    padding: 5px 8px;

    color: #d7d7d7;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;

    background: rgba(212, 160, 23, 0.10);

    border: 1px solid rgba(212, 160, 23, 0.30);
    border-radius: 5px;
}


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

.ban-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 8px;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;

    border-radius: 5px;
}

.ban-status.active {
    color: #37d67a;

    background: rgba(55, 214, 122, 0.10);

    border: 1px solid rgba(55, 214, 122, 0.28);
}

.ban-status.expired {
    color: #777b80;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.10);
}


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

@media (max-width: 1000px) {

    .bans-table th,
    .bans-table td {
        padding-left: 9px;
        padding-right: 9px;
    }

    .bans-table th {
        font-size: 8px;
        letter-spacing: 0.9px;
    }

    .bans-table td {
        font-size: 11px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .bans-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bans-count {
        min-width: 115px;
    }

    .bans-table-wrapper {
        overflow: hidden;

        background: transparent;
        border: none;
        box-shadow: none;
    }

    .bans-table,
    .bans-table tbody,
    .bans-table tr,
    .bans-table td {
        display: block;
        width: 100%;
    }

    .bans-table thead {
        display: none;
    }

    .bans-table tbody tr {
        margin-bottom: 15px;
        padding: 5px 0;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.025),
                rgba(255, 255, 255, 0.006)
            ),
            var(--panel);

        border: 1px solid var(--border);
        border-radius: 8px;
    }

    .bans-table tbody tr:hover {
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.035),
                rgba(255, 255, 255, 0.01)
            ),
            var(--panel-hover);
    }

    .bans-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;

        padding: 12px 15px;

        text-align: right;

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

        overflow: visible;
        text-overflow: unset;
    }

    .bans-table td:last-child {
        border-bottom: none;
    }

    .bans-table td::before {
        flex: 0 0 auto;

        color: #696d72;

        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;

        text-align: left;
    }

    .bans-table td:nth-child(1)::before {
        content: "PLAYER";
    }

    .bans-table td:nth-child(2)::before {
        content: "SERVER";
    }

    .bans-table td:nth-child(3)::before {
        content: "REASON";
    }

    .bans-table td:nth-child(4)::before {
        content: "DURATION";
    }

    .bans-table td:nth-child(5)::before {
        content: "BANNED";
    }

    .bans-table td:nth-child(6)::before {
        content: "EXPIRES";
    }

    .bans-table td:nth-child(7)::before {
        content: "STATUS";
    }

    .bans-table td:nth-child(8)::before {
        content: "BANNED BY";
    }

}