/* ============================================
   НОВЫЙ ДИЗАЙН ШАПКИ 2025 - ПОЛНОСТЬЮ ПЕРЕПИСАНО
   Отменяет ВСЕ старые стили из responsive-comprehensive.css
   ============================================ */

/* ============================================
   СБРОС СТАРЫХ СТИЛЕЙ ШАПКИ
   ============================================ */
.app-header * {
    /* Сбрасываем все order и margin из старых стилей */
}

/* ============================================
   БАЗОВЫЕ СТИЛИ ШАПКИ (ВСЕ РАЗРЕШЕНИЯ)
   ============================================ */

.app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    background: var(--bg-surface) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    overflow: visible !important;
}

.app-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* ПО ЦЕНТРУ */
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 0 20px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    gap: 20px !important;
}

/* ============================================
   ЛОГОТИП - ВСЕГДА СЛЕВА
   ============================================ */

.logo-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    order: -999 !important; /* ВСЕГДА ПЕРВЫЙ */
}

.logo-link {
    display: flex !important;
    align-items: center !important;
}

.logo-container {
    display: flex !important;
    align-items: center !important;
}

.logo-image {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* ============================================
   КОНТЕНТ ШАПКИ - МЕЖДУ ЛОГОТИПОМ И БУРГЕРОМ
   ============================================ */

.header-content-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex: 1 !important;
    justify-content: flex-end !important; /* КОНТЕНТ СПРАВА */
}

/* Главное меню */
.main-nav {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.main-nav a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: var(--color-primary);
}

/* Действия в хедере */
.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Иконки и кнопки */
.icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.3s ease;
}

.icon-btn:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
}

/* Профиль */
.user-info-dropdown {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    cursor: pointer;
}

/* Баланс */
.balance-display {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-weight: 600;
}

/* Кнопки авторизации */
.header-auth-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.header-auth-buttons .btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* ============================================
   БУРГЕР МЕНЮ - СКРЫТ ПО УМОЛЧАНИЮ
   ============================================ */

.mobile-burger {
    display: none !important; /* СКРЫТ на больших экранах */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    order: 999 !important; /* ВСЕГДА ПОСЛЕДНИЙ */
}

.mobile-burger:hover {
    color: var(--color-primary);
}

/* Мобильное меню (overlay) */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active,
.mobile-overlay.open {
    display: block !important;
    opacity: 1;
}

/* Мобильная навигация */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--bg-surface);
    padding: 80px 20px 20px;
    overflow-y: auto;
    z-index: 9999;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-overlay.active .mobile-nav,
.mobile-overlay.open .mobile-nav {
    right: 0 !important;
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 1.5rem;
    cursor: pointer;
}

.mobile-link {
    display: block;
    padding: 12px 16px;
    color: var(--text-main);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.mobile-link:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
}

body.menu-open {
    overflow: hidden;
}

/* ============================================
   АДАПТИВНОСТЬ - ПОСЛЕДОВАТЕЛЬНОЕ СКРЫТИЕ
   ============================================ */

/* 1800px - БУРГЕР ПОЯВЛЯЕТСЯ + скрываем режим работодатель/фрилансер */
@media (max-width: 1800px) {
    .mobile-burger {
        display: flex !important;
    }
    
    .mode-switcher {
        display: none !important;
    }
}

/* 1700px - Скрываем кнопки "Разместить проект" / "Найти работу" */
@media (max-width: 1700px) {
    .main-nav {
        display: none !important;
    }
}

/* 1600px - Скрываем переключатель языка */
@media (max-width: 1600px) {
    #languageSwitcher,
    .language-switcher {
        display: none !important;
    }
}

/* 1500px - Скрываем переключатель темы */
@media (max-width: 1500px) {
    #themeSwitcher,
    .theme-switcher {
        display: none !important;
    }
}

/* 1400px - Скрываем поиск */
@media (max-width: 1400px) {
    #searchTrigger,
    .search-trigger {
        display: none !important;
    }
}

/* 1300px - Скрываем кнопку перевода */
@media (max-width: 1300px) {
    .transfer-btn {
        display: none !important;
    }
}

/* 1200px - Скрываем профиль и кнопки авторизации */
@media (max-width: 1200px) {
    .user-info-dropdown,
    .header-auth-buttons {
        display: none !important;
    }
}

/* 580px - Скрываем ВСЕ элементы между логотипом и бургером */
@media (max-width: 580px) {
    /* Скрываем ВСЕ дочерние элементы контейнера кроме логотипа и бургера */
    .app-header .container > *:not(.logo-wrapper):not(.mobile-burger) {
        display: none !important;
    }
    
    /* Явно показываем только логотип и бургер */
    .app-header .logo-wrapper {
        display: flex !important;
    }
    
    .app-header .mobile-burger {
        display: flex !important;
    }
}

/* Адаптивные отступы для маленьких экранов */
/* ВЫСОТА ШАПКИ ВСЕГДА 80px НА ВСЕХ РАЗРЕШЕНИЯХ! */

@media (max-width: 1024px) {
    .app-header {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
    }
    
    .app-header .container {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
    }
}

@media (max-width: 768px) {
    .app-header {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
    }
    
    .app-header .container {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        padding: 0 16px !important;
        gap: 16px !important;
    }
}

@media (max-width: 580px) {
    .app-header .container {
        gap: 12px !important; /* Уменьшаем gap - бургер ближе к логотипу */
    }
}

@media (max-width: 480px) {
    .app-header {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
    }
    
    .app-header .container {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        padding: 0 12px !important;
        gap: 10px !important; /* Еще меньше gap */
    }
    
    .mobile-burger {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }
}

@media (max-width: 320px) {
    .app-header {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
    }
    
    .app-header .container {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        padding: 0 8px !important;
        gap: 6px !important; /* Минимальный gap для экономии места */
    }
}

/* ============================================
   RTL ПОДДЕРЖКА (АРАБСКИЙ И ДР.)
   ============================================ */

[dir="rtl"] .app-header .container {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .logo-wrapper {
    order: 999 !important; /* Логотип СПРАВА в RTL */
}

[dir="rtl"] .mobile-burger {
    order: -999 !important; /* Бургер СЛЕВА в RTL */
}

[dir="rtl"] .header-content-wrapper {
    justify-content: flex-start !important; /* Контент слева в RTL */
}

[dir="rtl"] .mobile-nav {
    right: auto !important;
    left: -100% !important;
}

[dir="rtl"] .mobile-overlay.active .mobile-nav,
[dir="rtl"] .mobile-overlay.open .mobile-nav {
    left: 0 !important;
    right: auto !important;
}

[dir="rtl"] .mobile-menu-close {
    right: auto !important;
    left: 20px !important;
}

/* ============================================
   ВЫСОКИЕ DPI ЭКРАНЫ
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ============================================
   ПЕЧАТЬ
   ============================================ */

@media print {
    .app-header {
        position: static !important;
        box-shadow: none !important;
    }
    
    .mobile-burger,
    .mobile-overlay,
    .header-actions {
        display: none !important;
    }
}

/* ============================================
   ТЕМНАЯ ТЕМА
   ============================================ */

[data-theme="dark"] .app-header {
    background: var(--bg-surface-dark, #1a1a1a) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   АНИМАЦИИ
   ============================================ */

.app-header {
    transition: all 0.3s ease;
}

.logo-image {
    transition: all 0.3s ease;
}

.mobile-burger {
    transition: all 0.3s ease;
}

/* ============================================
   КОНЕЦ ФАЙЛА
   ============================================ */