/* ============================================
   DASHBOARD - ОБЩИЕ СТИЛИ
   Собранные и организованные стили для личного кабинета
   ============================================ */

/* ============================================
   САЙДБАР - ОСНОВНЫЕ СТИЛИ
   ============================================ */

/* Ширина сайдбара */
.nk-aside,
#dashboard-sidebar {
    width: 200px !important;
}

/* Стили меню - оригинальные размеры из dashlite.css */
.nk-menu-link {
    position: relative;
    color: #fff;
    transition: all .3s ease;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    padding: 0.625rem 40px 0.625rem 24px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25rem;
    font-family: Nunito, Roboto, Arial;
}

/* Убрана левая палочка и обводка */
.nk-menu-link:before {
    display: none !important;
    content: none !important;
}

.nk-menu-link:hover {
    background-color: transparent !important;
}

/* Активная вкладка - цвет #148eff (иконка и текст),
   НО не для пункта .menu-subscription (Игры и подписка) —
   там цвет берётся из text-success / text-danger */
.nk-menu-item.active:not(.menu-subscription) .nk-menu-link {
    color: #148eff !important;
    background-color: transparent !important;
}

.nk-menu-item.active:not(.menu-subscription) .nk-menu-link .nk-menu-icon,
.nk-menu-item.active:not(.menu-subscription) .nk-menu-link .nk-menu-icon .icon,
.nk-menu-item.active:not(.menu-subscription) .nk-menu-link .nk-menu-icon em,
.nk-menu-item.active:not(.menu-subscription) .nk-menu-link .nk-menu-icon i {
    color: #148eff !important;
}

.nk-menu-item.active:not(.menu-subscription) .nk-menu-link .nk-menu-text {
    color: #148eff !important;
}

/* Оригинальные размеры иконок из dashlite.css */
.nk-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    line-height: 1;
    flex-grow: 0;
    font-weight: normal;
    letter-spacing: normal;
}

/* Единый отступ заголовков разделов кабинета */
.quests-wrap {
    max-width: 1100px;
    margin: 0px auto 0px auto;
    padding: 0 16px;
}

/* Размеры иконок для сайдбара задаются в dashlite.blade.php с !important */
.nk-menu-icon .icon,
.nk-menu-icon em {
    font-size: 24px; /* Исходный размер (переопределяется в dashlite.blade.php для сайдбара) */
    letter-spacing: normal;
    vertical-align: middle;
    color: currentColor;
    transition: color .4s, background-color .4s;
}

/* Бейджи уведомлений */
.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4858;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 4px;
}

.message-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4858;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}



/* ============================================
   САЙДБАР - СВЕРНУТОЕ СОСТОЯНИЕ
   ============================================ */

@media (min-width: 992px) {
    .nk-aside.sidebar-collapsed,
    #dashboard-sidebar.sidebar-collapsed {
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
        overflow: hidden !important;
    }
    
    .nk-aside.sidebar-collapsed .nk-menu-text,
    #dashboard-sidebar.sidebar-collapsed .nk-menu-text {
        display: none !important;
    }
    
    .nk-aside.sidebar-collapsed .nk-menu-heading,
    #dashboard-sidebar.sidebar-collapsed .nk-menu-heading {
        display: none !important;
    }
    
    /* Сохраняем padding-left: 24px для сохранения позиции при открытии */
    .nk-aside.sidebar-collapsed .nk-menu-link,
    #dashboard-sidebar.sidebar-collapsed .nk-menu-link {
        padding-left: 24px !important;
        padding-right: 0 !important;
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
    }
    
    /* Компенсируем padding-left через margin-left на иконке, чтобы убрать отступ слева */
    .nk-aside.sidebar-collapsed .nk-menu-icon,
    #dashboard-sidebar.sidebar-collapsed .nk-menu-icon {
        margin-left: -24px !important;
    }
}

/* ============================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================ */

@media screen and (max-width: 767px) {
    .nk-aside,
    #dashboard-sidebar {
        width: 80vw !important;
        max-width: 80% !important;
    }
    
    .nk-menu-link {
        border-radius: 0 !important;
        padding: .75rem 1.5rem !important;
    }
    
    .nk-menu-link:before {
        display: none !important;
        content: none !important;
    }
    
    .nk-menu-item {
        width: 100% !important;
    }
    
    .nk-menu-heading {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    html, body {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
}

/* ============================================
   ШАПКА - АКТИВНАЯ ИКОНКА
   ============================================ */

/* Активная иконка в шапке - цвет #148eff */
.dashboard-header-nav.dashboard-header-nav--icons .nk-menu-item.active .nk-menu-icon em,
.dashboard-header-nav.dashboard-header-nav--icons .nk-menu-item.active .nk-menu-icon i,
.dashboard-header-nav.dashboard-header-nav--icons .nk-menu-item.active .nk-menu-icon {
    color: #148eff !important;
}

/* ============================================
   ИНДИКАТОР ОНЛАЙН В ШАПКЕ ЛИЧНОГО КАБИНЕТА
   ============================================ */

.dashboard-online-indicator-item {
    margin-left: 6px;
}

.dashboard-online-indicator-header {
    display: flex;
    align-items: center;
    padding: 4px 6px;
}

.players-online-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.players-counter {
    display: flex;
    align-items: center;
    gap: 0;
    flex-direction: row;
}

/* NOTE: online dot+number are styled inline in dashboard header-menu to avoid theme overrides */

/* Мобильная версия */
@media screen and (max-width: 767px) {
    .dashboard-online-indicator-item {
        display: none !important;
    }
}

/* ============================================
   КНОПКИ МОДАЛЬНОГО ОКНА И КНОПКА АДМИНКА В ШАПКЕ
   ============================================ */

/* Кнопка "Админка" в шапке личного кабинета - стили применяются только если это не кнопка обратной связи на странице аккаунта */
/* Для кнопки обратной связи на странице аккаунта стили определены в account.blade.php */

#contactAdminLink:not(.balance-top-up),
#contactAdminLink:not(.balance-top-up):focus,
#contactAdminLink:not(.balance-top-up):active,
#contactAdminLink:not(.balance-top-up) *,
#contactAdminLink:not(.balance-top-up):focus *,
#contactAdminLink:not(.balance-top-up):active * {
    opacity: 1 !important;
    color: #ffffff !important;
    visibility: visible !important;
    display: inline !important;
}

#contactAdminLink:not(.balance-top-up):hover,
#contactAdminLink:not(.balance-top-up):hover * {
    opacity: 1 !important;
    color: #ffffff !important;
    visibility: visible !important;
    display: inline !important;
}

/* Кнопка "Войти" в модальном окне */
.btn-avatar,
.btn-avatar:focus,
.btn-avatar:active,
.btn-avatar *,
.btn-avatar:focus *,
.btn-avatar:active * {
    opacity: 1 !important;
    color: #fff !important;
    visibility: visible !important;
    display: inline !important;
    font-size: inherit !important;
    text-indent: 0 !important;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
    filter: none !important;
}

.btn-avatar,
.btn-avatar:hover,
.btn-avatar:focus,
.btn-avatar:active {
    color: #fff !important;
    background: linear-gradient(to bottom,#0074e0 0,#0074e0 100%) !important;
}

/* Кнопка "Отмена" в модальном окне */
.btn-name {
    background: linear-gradient(to bottom,#6b6b6b 0,#3d3d3d 100%);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    transition: none;
    white-space: nowrap;
}

/* Убираем все анимации с кнопок в модальном окне админки */
.gate-actions .btn-avatar,
.gate-actions .btn-name,
.gate-actions .btn-avatar:hover,
.gate-actions .btn-name:hover,
.gate-actions .btn-avatar:focus,
.gate-actions .btn-name:focus,
.gate-actions .btn-avatar:active,
.gate-actions .btn-name:active {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
}

/* ============================================
   ОТКЛЮЧЕНИЕ ВСЕХ HOVER ЭФФЕКТОВ ДЛЯ КНОПОК В ЛИЧНОМ КАБИНЕТЕ
   ============================================ */

/* Отключаем все hover эффекты для всех кнопок */
.btn-avatar:hover,
.btn-name:hover,
.btn-wow:hover,
.btn-gold:hover,
.btn-silver:hover,
.btn-emerald:hover,
button:hover,
button.btn:hover,
a.btn:hover,
#contactAdminLink:hover {
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}

/* Сохраняем исходные стили при hover (без изменений) */
.btn-avatar:hover {
    background: linear-gradient(to bottom,#0074e0 0,#0074e0 100%) !important;
    color: #fff !important;
}

.btn-name:hover {
    background: linear-gradient(to bottom,#6b6b6b 0,#3d3d3d 100%) !important;
    color: #fff !important;
}

.btn-wow.btn-gold:hover {
    background: linear-gradient(to bottom,#0074e0 0,#0074e0 100%) !important;
    color: #fff !important;
}

.btn-wow.btn-silver:hover {
    background: linear-gradient(to bottom,#6b6b6b 0,#3d3d3d 100%) !important;
    color: #fff !important;
}

.btn-wow.btn-emerald:hover {
    background: linear-gradient(to bottom,#4299ff 0,#0074e0 100%) !important;
    color: #fff !important;
}