/* =========================================================================
   HEADER-V2 — консолидированный хедер платформы (UX-аудит §③/②/④).
   Грузится ПОСЛЕ app_new.css и ca-theme.css в base_no_ws.html.twig, поэтому
   перекрывает их правила хедера. Все цвета — только токены --ca-* (см.
   ca-theme.css). Тёмная тема наследуется автоматически: токены
   переопределяются в :root[data-theme="night"], хедер их подхватывает.

   Что делает:
   • Убирает вторую служебную полосу (top-bar) — теперь один хедер; онлайн-
     индикатор стоит у логотипа (§③-1). Разметку top-bar удалили в шаблоне.
   • Тач-цели ≥44px, mobile-first.
   • На десктопе в строке — только ключевые иконки (.ha-primary); остальное
     («ещё»: Матч/Настройки/Навигация/Аккаунт) — в дропдауне .ha-more по
     бургеру (§③-2, §③-4).
   • На мобиле вся панель действий уходит в дровер по бургеру (§③-1).
   • .gp-match-only виден только во время матча (body.gp-in-match) — «Таймер»
     и «Пригласить» не мозолят глаза вне матча (§③-3).
   • body.gp-in-match дополнительно поджимает хедер во время матча (§④).
   ========================================================================= */

/* --- Единый хедер: логотип + онлайн-индикатор + действия в одну строку --- */
.header-content {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    position: relative;               /* якорь для абсолютных дропдаунов */
    justify-content: flex-start;      /* перекрываем space-between из app_new.css */
}
.header-grow { flex: 1 1 auto; }      /* распорка: действия/бургер вправо */

/* Онлайн-индикатор — «пилюля» рядом с логотипом (перенесён из top-bar). */
.main-header .online-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ca-muted);
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--ca-surface-2);
    border: 1px solid var(--ca-line-soft);
    white-space: nowrap;
}
/* цвета точки по состояниям заданы в app_new.css (.online-status[data-state]) */
.main-header .online-status .online-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Состояния соединения ВНЕ матча (отзыв #73). Базовая «.main-header .online-status»
   выше объявлена безусловной пилюлей и, имея ту же специфичность, что и правила
   состояния из app_new.css, но загружаясь позже, перебивала их (пилюля «Онлайн»
   висела всегда, а офлайн не краснел). Здесь селекторы адреснее (body:not(...) +
   [data-state]) — выигрывают гарантированно. Матчевый контекст (голая LED-точка)
   не трогаем: там свои правила ниже (§④). */
body:not(.gp-in-match) .main-header .online-status[data-state="online"] { display: none; }
body:not(.gp-in-match) .main-header .online-status[data-state="offline"] {
    background: rgba(208, 90, 78, .14);
    border-color: rgba(208, 90, 78, .55);
    color: #d05a4e;
    font-weight: 600;
}
.main-header .announcement { color: var(--ca-muted); font-size: 12.5px; }

/* --- Панель действий --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Иконка действия: тач-цель ≥44px. Перекрывает app_new.css (24px + translateY). */
.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1;
    color: var(--ca-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.action-icon:hover {
    color: var(--ca-accent);
    background: var(--ca-surface-2);
    transform: none;                  /* гасим translateY(-2px) из app_new.css */
}
.action-icon:focus,
.action-icon:focus-visible,
.action-icon:active {
    outline: none;
    background: var(--ca-surface-2);   /* тот же мягкий скруглённый квадрат, не круг */
}
.action-icon > i { pointer-events: none; }

/* Font Awesome (грузится ПОСЛЕ) навязывает .fas/.far { display: inline-block },
   перебивая базовый inline-flex у прямых <i class="action-icon"> (колокол/чат/
   звук/тема): глиф садится по baseline, а не по центру → иконки на разной высоте.
   Поднимаем специфичность (.header-actions .action-icon = 0,2,0 > .fas = 0,1,0),
   чтобы ВСЕ .action-icon (и <a>, и <i>) были одинаковыми флекс-боксами с
   отцентрованным глифом независимо от FA-метрик. */
.header-actions .action-icon,
.ha-more .action-icon,
.gp-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Ключевые иконки строки (<a><i>): внутренний <i> заполняет бокс и центрирует
   глиф (для <a class=action-icon><i>…</i>). Только в строке, не в дровере. */
.header-actions > .action-icon > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

/* --- Бургер / «ещё»: видим на ВСЕХ ширинах (перекрываем ca-theme display:none) --- */
.gp-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--ca-text);
    font-size: 20px;
    cursor: pointer;
    border-radius: 10px;
}
.gp-burger:hover { background: var(--ca-surface-2); }
.main-header.gp-menu-open .gp-burger { background: var(--ca-surface-2); color: var(--ca-accent); }

/* --- Дропдаун «ещё» (.ha-more): вторичные действия, настройки, аккаунт --- */
.ha-more {
    position: absolute;
    top: calc(100% + 8px);
    right: 6px;
    min-width: 244px;
    padding: 8px;
    background: var(--ca-surface);
    border: 1px solid var(--ca-line-soft);
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(51, 71, 95, 0.20);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 1001;
}
.main-header.gp-menu-open .ha-more { display: flex; }

/* Пункты дропдауна — строки «иконка + подпись» (подпись из title). */
.ha-more .action-icon {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 12px;
    min-height: 44px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ca-text);
}
.ha-more .action-icon:hover { background: var(--ca-surface-2); color: var(--ca-text); }
/* Подпись пункта наследует font-family элемента. У прямых <i class="fas …"> это
   шрифт FontAwesome (без кириллицы → браузер валит текст в serif). Форсируем
   основной sans (--ca-font) на подпись-псевдоэлемент; глиф ::before остаётся FA. */
.ha-more .action-icon::after { content: attr(title); font-family: var(--ca-font); font-style: normal; }
/* Единый ЛЕВЫЙ СЛОТ иконки: одинаковая ширина и зазор до подписи для ОБОИХ
   видов пунктов — дочернего <i> (<a><i>: «Возможности») и псевдо-::before у прямых
   <i class="action-icon"> (Пригласить/Таймер/Звук/Тема/QR). Строка — флекс (см.
   правило выше), gap:12px даёт стабильный зазор слот→подпись. ::before ловим
   descendant-селектором (без '>'), чтобы поймать и вложенные пункты (QR и пр.). */
.ha-more .action-icon > i,
.ha-more i.action-icon::before {
    flex: 0 0 24px;
    width: 24px;
    text-align: center;
    font-size: 16px;
    line-height: 1;
    color: var(--ca-muted);
}

/* Разделы и разделители дропдаунов (§③-4). */
.ha-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ca-faint);
    padding: 8px 12px 3px;
}
.ha-divider { height: 1px; background: var(--ca-line-soft); margin: 6px 6px; }

/* Аккаунт: ник + Войти/Выйти как строки меню. */
.ha-more .nick,
.ha-more #login,
.ha-more #logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    min-height: 44px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ca-text);
    text-decoration: none;
    cursor: pointer;
}
.ha-more .nick:hover,
.ha-more #login:hover,
.ha-more #logout:hover { background: var(--ca-surface-2); }
.ha-more #login,
.ha-more #logout { color: var(--ca-accent); }
.ha-more .nick-edit-icon { font-size: 11px; margin-left: auto; opacity: .6; }

/* --- §③-3: «Матч»-действия (Таймер/Пригласить) видны только на матче ---
   Класс body.gp-in-match выставляет обёртка матча (контракт tc-wrapper).
   Вне матча window.gpToggleTimer не определён и пункт «Таймер» бесполезен.
   Селектор специфичнее .action-icon/.ha-more .action-icon — !important не нужен. */
body:not(.gp-in-match) .gp-match-only { display: none; }

/* --- §④: компакция хедера во время матча ---
   На матче онлайн-индикатор ужимаем до ГОЛОЙ точки-LED: прячем подпись И снимаем
   фон/бордюр/паддинг пилюли (иначе оставалась «пилюля с одинокой точкой без
   подписи» — странный значок). title-тултип состояния сохраняется на .online-status. */
body.gp-in-match .main-header .online-status__text { display: none; }
body.gp-in-match .main-header .online-status {
    background: none;
    border: 0;
    padding: 0;
}
/* §④/§⑥: каталожные иконки прячем в «ещё» ТОЛЬКО на мобильном матче (там хедер
   компактный — всё в дровере). На ДЕСКТОП-матче навигация остаётся в строке
   (компас/приглашения/отзыв/профиль), иначе виден только бургер и кажется, что
   меню пропало. Дубля с .gp-match-bar нет: там другие кнопки (Выйти/Правила). */
@media (max-width: 640px) {
    body.gp-in-match .ha-primary { display: none; }
}

/* Модалка входа (перенесена из top-bar) — опускаем под хедер. */
.auth-modal { top: 70px; }

/* =========================== ДЕСКТОП (>640) ============================= */
/* .ha-primary — ключевые иконки всегда в строке; .ha-more скрыт до «ещё». */

/* =========================== МОБИЛЬНЫЙ (≤640) ========================== */
@media (max-width: 640px) {
    /* Вся панель действий — выпадающий дровер по бургеру. */
    .header-actions {
        position: absolute;
        top: calc(100% + 8px);
        right: 6px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        min-width: 248px;
        padding: 8px;
        background: var(--ca-surface);
        border: 1px solid var(--ca-line-soft);
        border-radius: 14px;
        box-shadow: 0 16px 38px rgba(51, 71, 95, 0.20);
        display: none;
        z-index: 1001;
    }
    .main-header.gp-menu-open .header-actions { display: flex; }

    /* .ha-primary внутри дровера — тоже строки с подписями. */
    .header-actions .action-icon {
        width: 100%;
        height: auto;
        justify-content: flex-start;
        gap: 12px;
        padding: 11px 12px;
        min-height: 44px;
        border-radius: 9px;
        font-size: 15px;
        font-weight: 600;
        color: var(--ca-text);
    }
    .header-actions .action-icon::after { content: attr(title); font-family: var(--ca-font); font-style: normal; }
    /* Единый левый слот иконки в дровере (тот же приём, что и для .ha-more):
       и дочерний <i>, и псевдо-::before у прямых <i> — фикс. ширина 24px, gap 12px. */
    .header-actions .action-icon > i,
    .header-actions i.action-icon::before {
        flex: 0 0 24px;
        width: 24px;
        text-align: center;
        font-size: 16px;
        line-height: 1;
        color: var(--ca-muted);
    }

    /* .ha-more раскрывается в общий поток дровера (без своей рамки/тени). */
    .ha-more {
        position: static;
        display: flex;
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    /* Онлайн-индикатор ужимаем до точки — экономим ширину строки. */
    .main-header .online-status {
        background: none;
        border: 0;
        padding: 0;
    }
    .main-header .online-status__text { display: none; }

    /* Бейдж-счётчик приглашений — вправо строки в дровере. */
    .header-actions .icon-badge { position: static; margin-left: auto; }
}