/*
 * АГРЕССИВНОЕ СКРЫТИЕ ВСЕХ СТАРЫХ СИСТЕМ УВЕДОМЛЕНИЙ
 * Оставляем только новую систему notification-corner
 */

/* Скрываем ВСЕ старые системы уведомлений */
.simple-notification-bell,
#floating-notifications-btn,
#floating-notifications-icon,
#new-notification-desktop,
#new-notification-mobile,
#notifications-icon,
.notification-icon:not(.notification-bell-corner *),
.floating-notifications,
.new-floating-notifications,
.new-desktop-notifications,
.notification-button:not(.notification-bell-corner),
.notification-bell:not(.notification-bell-corner),
.floating-notification:not(.notification-bell-corner),
[id*="notification"]:not(#notification-bell-corner):not(#notification-dropdown-corner):not(#notification-badge):not(#notification-list),
[class*="notification"]:not(.notification-bell-corner):not(.notification-dropdown-corner):not(.notification-badge):not(.notification-item):not(.notification-content):not(.notification-text):not(.notification-title):not(.notification-message):not(.notification-time):not(.notification-header):not(.notification-footer):not(.notification-list):not(.no-notifications):not(.empty-title):not(.empty-subtitle):not(.empty-icon):not(.view-all-button):not(.header-icon) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Скрываем старые dropdown меню */
.notification-dropdown:not(.notification-dropdown-corner),
.notifications-popup:not(.notification-dropdown-corner),
[id*="notifications-dropdown"]:not(#notification-dropdown-corner),
[class*="notifications-dropdown"]:not(.notification-dropdown-corner) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Принудительно показываем только колокольчик */
.notification-bell-corner {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
}

/* Дропдаун показываем только при активации */
.notification-dropdown-corner {
    position: fixed !important;
}

/* Скрываем конфликтующие элементы в шапке */
.header .notification-bell,
.header .notification-button,
.header #new-notification-desktop,
.new-header .notification-icon,
.new-header .notification-bell {
    display: none !important;
}

/* Дополнительная очистка для мобильных */
@media (max-width: 768px) {
    .mobile-notification-bell,
    #mobile-notification-bell,
    .mobile-notification-button {
        display: none !important;
    }
}

/* Принудительное позиционирование основного колокольчика */
button.notification-bell-corner,
button#notification-bell-corner {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 2147483647 !important;
}

/* Мобильная версия */
@media (max-width: 768px) {
    button.notification-bell-corner,
    button#notification-bell-corner {
        bottom: 16px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
    }

    .flex.items-center.space-x-2 > div:last-child button {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .flex.items-center.space-x-2 > div:last-child button img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Обеспечиваем правильные отступы для правой части шапки */
    .flex.items-center.space-x-2 {
        margin-right: 16px !important;
        gap: 12px !important;
    }

    /* Контейнер шапки - обеспечиваем симметричные отступы */
    header .container,
    header .container.mx-auto,
    .header-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Главный контейнер шапки - принудительно одинаковые отступы */
    header .flex.justify-between,
    header .flex.md\:hidden.justify-between,
    header .flex.items-center.justify-between {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Убираем дублирующие отступы у дочерних элементов */
    header .flex.justify-between > *,
    header .flex.md\:hidden.justify-between > *,
    header .flex.items-center.justify-between > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Синхронизация с mobile-header-fixes - одинаковые размеры элементов шапки */
    .new-hamburger,
    .hamburger-menu,
    .menu-toggle,
    button#mobile-menu-toggle,
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
    }

    /* Одинаковые отступы контента страниц */
    .page-content,
    .main-container,
    .content-area,
    .tasks-content,
    .profile-content,
    .orders-content,
    .channels-content,
    .notifications-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (min-width: 769px) {
    /* Десктопная версия */
    #user-menu-toggle #header-avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }

    #user-menu-toggle #header-avatar img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }
}

/* Исправления для дропдауна уведомлений */
.notification-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background: #2a2a2a !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000 !important;
    min-width: 350px !important;
    max-width: 450px !important;
    width: 400px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    margin-top: 8px !important;
}

/* Адаптивность для разных экранов */
@media (max-width: 480px) {
    .notification-dropdown {
        min-width: 280px !important;
        width: 320px !important;
        max-width: 95vw !important;
        right: -10px !important;
    }
}

@media (min-width: 768px) {
    .notification-dropdown {
        min-width: 380px !important;
        width: 420px !important;
        max-width: 480px !important;
    }
}

/* Стили для элементов уведомлений */
.notification-item {
    padding: 12px !important;
    border-bottom: 1px solid #3a3a3a !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    transition: background-color 0.2s ease !important;
}

.notification-item:hover {
    background-color: #333 !important;
}

.notification-item:last-child {
    border-bottom: none !important;
}

/* Исправления для аватарок в уведомлениях */
.notification-item .user-avatar-container,
.notification-item .notification-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.notification-item .user-avatar-container img,
.notification-item .notification-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}