/* Подключение шрифта */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght=300;400;600;700&display=swap');

/* =========================================
   БАЗОВЫЕ НАСТРОЙКИ И АНИМАЦИИ ПОЯВЛЕНИЯ
   ========================================= */
body {
    font-family: 'Inter', sans-serif;
    /* Плавное появление всей страницы при загрузке */
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Сохраняем твой важный класс для скрытия элементов */
.hidden-safely {
    display: none !important;
}

/* =========================================
   КРУТЫЕ СКРОЛЛБАРЫ (Киберпанк/Неон стайл)
   ========================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #020617; /* Под цвет твоего bg-slate-950 */
}

::-webkit-scrollbar-thumb {
    background: #4f46e5; /* Цвет индиго как у твоих кнопок */
    border-radius: 8px;
    border: 2px solid #020617; /* Создает отступ вокруг ползунка */
}

    ::-webkit-scrollbar-thumb:hover {
        background: #6366f1; /* Чуть светлее при наведении */
    }

/* =========================================
   ЭФФЕКТЫ ДЛЯ КАРТОЧЕК (Glassmorphism)
   ========================================= */
#auth-screen,
.bg-slate-900,
#sidebar {
    /* Добавляем глубокую тень и легкий внутренний блик сверху */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Интерактивные карточки в магазине и профиле */
#content-shop .bg-slate-900:hover,
#content-profile .bg-slate-900:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* =========================================
   АНИМАЦИИ КНОПОК И ВВОДА
   ========================================= */
button {
    /* Плавный переход для всех кнопок */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

    /* Кнопки действия (Вход, Сохранить, Купить) */
    button[type="submit"],
    .bg-indigo-600,
    .bg-emerald-600 {
        position: relative;
    }

        button[type="submit"]:hover,
        .bg-indigo-600:hover {
            box-shadow: 0 0 15px rgba(79, 70, 229, 0.4);
            transform: translateY(-2px);
        }

        .bg-emerald-600:hover {
            box-shadow: 0 0 15px rgba(5, 150, 105, 0.4);
            transform: translateY(-2px);
        }

    /* Физический эффект нажатия на любую кнопку */
    button:active {
        transform: scale(0.96) !important;
    }

/* Красивое свечение для полей ввода при клике */
input:focus,
select:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* =========================================
   УЛУЧШЕНИЕ МЕССЕНДЖЕРА
   ========================================= */
/* Сообщения в чате */
#chat-messages > div {
    animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Подсветка активного чата в боковом меню */
button[id^="btn-chat-"]:hover {
    transform: translateX(4px);
}


/* =========================================
   АНИМИРОВАННЫЙ ФОН (Темный киберпанк/градиент)
   ========================================= */
body {
    /* Создаем красивый темный градиент с оттенками синего и фиолетового */
    background: linear-gradient(-45deg, #020617, #0f172a, #1e1b4b, #020617);
    background-size: 400% 400%;
    /* Добавляем анимацию движения фона к твоей анимации появления */
    animation: gradientBG 15s ease infinite, fadeIn 0.8s ease-out;
    /* Чтобы фон не дергался при скролле */
    background-attachment: fixed;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Делаем панели чуть прозрачными, чтобы фон красиво просвечивал (Эффект стекла) */
#app-screen > div > div,
#auth-screen,
aside#sidebar {
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* =========================================
   КРАСИВАЯ АДМИН-ПАНЕЛЬ И РОЛИ
   ========================================= */
/* Карточки игроков в списке */
#admin-users-list > div {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

    #admin-users-list > div:hover {
        transform: translateY(-3px) scale(1.01);
        background: rgba(30, 41, 59, 0.6);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(79, 70, 229, 0.4);
        z-index: 10;
    }

/* Стилизация кнопок ролей (прячем галочки, делаем кнопки) */
#admin-users-list label {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    user-select: none; /* Чтобы текст не выделялся при клике */
}

/* Прячем стандартный квадратик чекбокса, но он всё еще работает! */
#admin-users-list input[type="checkbox"] {
    display: none;
}

/* Эффект при наведении на невыбранную роль */
#admin-users-list label:hover {
    border-color: #6366f1;
    background: rgba(79, 70, 229, 0.1);
}

/* Когда роль ВЫБРАНА (чекбокс нажат) — делаем кнопку светящейся */
#admin-users-list label:has(input:checked) {
    background: rgba(79, 70, 229, 0.25);
    border-color: #818cf8;
    color: #e0e7ff;
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.4);
    transform: scale(1.05);
}

    /* Добавляем маленькую галочку через CSS для выбранных ролей */
    #admin-users-list label:has(input:checked)::before {
        content: '✓';
        display: inline-block;
        color: #818cf8;
        font-weight: bold;
        margin-right: -2px;
    }