/* =========================================================================
   VIP Players (page module) — стили
   Грид карточек повторяет паттерн .punishmen-admins__* из punishment-модуля,
   но дублирует все ключевые правила локально, потому что Neo3 подгружает
   CSS только текущего модуля (punishment/1.css на странице /vips/
   НЕ подключается). VIP-specific дополнения — namespace .vip-card__.
   ========================================================================= */

/* --- Card grid --- */
.punishments-admins {
    display: block;
    width: 100%;
}

.punishmen-admins__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    width: 100%;
    gap: 1rem;
}

/* --- Card shell (1:1 with punishment) --- */
.punishmen-admins__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--br-10);
    position: relative;
    background-color: var(--input-form);
    border: 1px solid var(--transparent-2-w);
}

.punishmen-admins__card-header {
    height: 5rem;
    overflow: hidden;
    position: relative;
    background-color: var(--transparent-2-w);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.punishmen-admins__card-header img,
.punishmen-admins__card-header video {
    position: absolute;
    height: 100%;
    object-fit: cover;
    width: 100%;
    left: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0.3;
}

/* --- Avatar (1:1 with punishment) --- */
.punishmen-admins__avatar {
    position: absolute;
    top: 3rem;
    left: 1.3rem;
}

.punishmen-admins__avatar img {
    height: 4rem;
    width: 4rem;
    border-radius: var(--br-50);
    outline: 0.5rem solid var(--input-form);
}

.punishmen-admins__avatar span {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: var(--br-50);
    background-color: var(--button-hover);
    border: 4px solid var(--input-form);
    top: 0.1rem;
    right: 0.1rem;
}

.punishmen-admins__avatar span.online {
    background-color: var(--green);
}

/* --- SteamID copy row (1:1 with punishment) --- */
.punishmen-admins__steamid {
    height: 2.3rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline: 0.8rem;
    font-size: var(--font-size-s);
    color: var(--text-custom);
    opacity: 0.3;
    gap: 0.3rem;
    cursor: pointer;
    transition: var(--transition-duration);
}

.punishmen-admins__steamid svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: currentColor;
}

.punishmen-admins__steamid:hover {
    opacity: 0.7;
}

/* --- Nickname (1:1 with punishment) --- */
.punishmen-admins__nickname {
    font-size: var(--font-size-l);
    color: var(--text-default);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    margin-left: 1rem;
    font-weight: var(--font-weight-7);
}

/* --- Bottom button wrapper (1:1 with punishment) --- */
.punishmen-admins__button {
    margin: .5rem;
}

/* =========================================================================
   Sidebar (1:1 with punishment .punish_* — стили не подгружаются с
   соседнего модуля, дублируем локально)
   ========================================================================= */

.sticky-filter {
    position: sticky;
    top: 0.5rem;
}

.punishment-filters,
.vip-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.punish_title {
    display: block;
    width: 100%;
    font-size: var(--font-size-m);
    color: var(--text-custom);
    opacity: 0.5;
}

.punish_state {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.not_auth_user {
    display: flex;
    font-size: var(--font-size-m);
    color: var(--text-custom);
    text-align: center;
    font-weight: normal;
    background: var(--transparent-2-w);
    padding: 10px 20px;
    border-radius: var(--br-12);
    height: 59px;
    align-items: center;
    justify-content: center;
}

.no_user_punish {
    display: flex;
    font-size: var(--font-size-m);
    text-align: center;
    font-weight: normal;
    background: var(--transparent);
    padding: 10px 20px;
    border-radius: var(--br-12);
    position: relative;
    overflow: hidden;
    align-items: center;
    height: 59px;
    justify-content: center;
}

/* --- Stats header (заголовок + скрыть/показать) --- */
.punish_stats_head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.hide_stats {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--button);
    color: var(--orange);
    font-size: var(--font-size-s);
    padding: 5px 10px;
    border-radius: var(--br-6);
    cursor: pointer;
}

.show_stats {
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--button);
    color: var(--green);
    font-size: var(--font-size-s);
    padding: 5px 10px;
    border-radius: var(--br-6);
    cursor: pointer;
}

/* --- Stats rows --- */
.punish_string {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: var(--font-size-m);
    align-items: center;
    background: var(--transparent-2-w);
    padding: 5px 5px 5px 10px;
    border-radius: var(--br-8);
}

.punish_stats_list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
    border-radius: var(--br-8);
    height: max-content;
    transition: var(--transition-duration) ease-in;
}

.stats_title {
    color: var(--text-default);
}

.stats_count {
    color: var(--span);
    background: var(--span-low);
    border: 1px solid var(--span-low);
    padding: 3px 10px;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-7);
    border-radius: var(--br-4);
}

/* =========================================================================
   Duration badges (VIP-specific). Используем СВОИ модификаторы,
   а не shared `.permanent_punish` / `.current_punish` из punishment,
   потому что у VIP другая семантика:
     - permanent = «навсегда» → positive/premium → зелёный
     - current   = «активный временный» → info → синий
   Цвета фиксированные (--green из глобальной палитры + custom blue),
   не зависят от темы.
   ========================================================================= */

.vip-card__expires {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-inline: 0.7rem;
    height: 23px;
    border-radius: var(--br-6);
    font-size: var(--font-size-s);
    width: max-content;
    line-height: 1;
}

.vip-card__expires--permanent {
    background: rgb(100 206 130 / 14%);
    color: var(--green);
}

.vip-card__expires--current {
    /* Custom blue (Tailwind sky-400 / Bootstrap info-tone). В палитре Neo3
       нет --blue, поэтому фиксируем hex чтобы был стабилен в любой теме. */
    background: rgb(91 154 249 / 14%);
    color: #5b9af9;
}

/* --- VIP-card additions --- */
.vip-card .punishmen-admins__card-header {
    height: 5rem;
}

/* VIP-группа в правом верхнем углу шапки карточки */
.vip-card__group {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--br-6);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-7);
    background: var(--span-low);
    color: var(--span);
    max-width: 70%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Блок мета-данных (срок, last visit, сервер) под ником */
.vip-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.4rem 1rem 0.2rem 1rem;
}

.vip-card__lastvisit,
.vip-card__server {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-s);
    color: var(--text-custom);
    opacity: 0.7;
    text-decoration: none;
    transition: var(--transition-duration);
}

.vip-card__lastvisit svg,
.vip-card__server svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
    flex-shrink: 0;
}

/* Live-статус: «Был в игре давно» — обычный серый текст (без интерактива). */
.vip-card__lastvisit.lastconnect {
    cursor: default;
    pointer-events: none;
}

/* Live-статус: «Играет на: SERVER» — зелёный CTA с steam:// link. */
.vip-card__lastvisit.button_playing_server {
    opacity: 1;
    color: var(--green);
    background: rgb(100 206 130 / 12%);
    padding: 0.2rem 0.55rem;
    border-radius: var(--br-6);
    cursor: pointer;
    align-self: flex-start;
    font-weight: var(--font-weight-5);
}

.vip-card__lastvisit.button_playing_server:hover {
    background: rgb(100 206 130 / 22%);
    color: var(--green);
}

.vip-card__lastvisit-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* CTA-кнопка профиля внутри карточки (override .width-100 + active style) */
.punishmen-admins__profile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--input-height);
    background-color: var(--button);
    color: var(--text-default);
    border-radius: var(--br-8);
    font-size: var(--font-size-m);
    transition: var(--transition-duration);
    cursor: pointer;
}

.punishmen-admins__profile-link:hover {
    background-color: var(--button-hover);
    color: var(--text-default);
}

/* --- Sidebar: моя VIP-карточка --- */
.vip-no-vip {
    display: flex;
    font-size: var(--font-size-m);
    text-align: center;
    font-weight: normal;
    background: var(--transparent);
    padding: 10px 20px;
    border-radius: var(--br-12);
    position: relative;
    overflow: hidden;
    align-items: center;
    height: 59px;
    justify-content: center;
}

.vip-no-vip::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(315deg, rgb(124 58 237 / 16%), transparent);
    z-index: 0;
}

.vip-no-vip svg {
    position: absolute;
    right: -10px;
    width: 48px;
    height: auto;
    fill: var(--span);
    opacity: 0.25;
}

.vip-no-vip span {
    color: var(--text-default);
    z-index: 2;
    position: relative;
}

.vip-my-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    background: var(--transparent-3-w);
    border: 1px solid var(--transparent-2-w);
    border-radius: var(--br-10);
    position: relative;
    overflow: hidden;
}

.vip-my-card::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(315deg, rgb(124 58 237 / 12%), transparent);
    z-index: 0;
    pointer-events: none;
}

.vip-my-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

.vip-my-card__icon {
    width: 1.3rem;
    height: 1.3rem;
    fill: var(--span);
    flex-shrink: 0;
}

.vip-my-card__group {
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-7);
    color: var(--text-default);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vip-my-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    font-size: var(--font-size-s);
}

.vip-my-card__server {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-custom);
    opacity: 0.7;
    max-width: 60%;
    min-width: 0;
}

.vip-my-card__server svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
    flex-shrink: 0;
}

.vip-my-card__server-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* --- Search input в правой колонке --- */
#search {
    margin-bottom: 0.8rem;
}

#search input {
    width: 100%;
}

/* --- No data placeholder --- */
.vip-no-data {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--text-custom);
    opacity: 0.6;
    gap: 0.6rem;
    font-size: var(--font-size-m);
}

.vip-no-data svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: currentColor;
}

/* --- Responsive: на мобилке карточки в одну колонку --- */
@media (max-width: 540px) {
    .punishmen-admins__wrapper {
        grid-template-columns: 1fr;
    }
}