/* app/static/css/navbar.css
 * Шапка приложения: одна строка, приоритетное меню («Ещё»), бургер на узких
 * экранах, доступные с клавиатуры и с тача выпадающие меню.
 *
 * Почему отдельный файл и новые классы (app-nav__*), а не правка .navbar:
 * .navbar/.nav-link — классы Bootstrap, их стили в проекте переопределялись
 * частично (main.css задавал display/justify, но не flex-wrap), из-за чего
 * шапка разъезжалась на 3-6 строк. Собственное пространство имён убирает
 * конфликт и не задевает другие места, где эти классы используются.
 */

:root {
    /* --app-nav-min-height задаёт высоту, --app-header-height её ОТРАЖАЕТ
       (её проставляет navbar.js для страниц с полноэкранной раскладкой).
       Разные переменные принципиально: если считать высоту от той же, от
       которой она зависит, получается петля обратной связи — шапка начинает
       непрерывно пересчитываться. */
    --app-nav-min-height: 56px;
    --app-header-height: 56px;
    --app-header-bg: #ffffff;
    --app-header-border: #e3e7ee;
    --app-header-fg: #384252;
    --app-header-fg-muted: #6b7280;
    --app-header-accent: #2d6cdf;
    --app-header-accent-soft: #eaf1fd;
    --app-header-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
    --app-header-radius: 8px;
    --app-header-z: 1030;
}

/* ===== Каркас ===== */
.app-header {
    position: sticky;
    top: 0;
    z-index: var(--app-header-z);
    background: var(--app-header-bg);
    border-bottom: 1px solid var(--app-header-border);
    box-shadow: var(--app-header-shadow);
}

.app-nav {
    display: flex;
    flex-wrap: nowrap;          /* ключевое: шапка больше не разъезжается */
    align-items: center;
    gap: 4px;
    min-height: var(--app-nav-min-height);
    padding: 0 12px;
}

/* Ссылка «к содержимому» для клавиатуры и скринридеров */
.app-nav__skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 10;
    padding: 8px 14px;
    background: var(--app-header-accent);
    color: #fff;
    border-radius: 0 0 var(--app-header-radius) var(--app-header-radius);
    transition: top 0.15s ease;
}
.app-nav__skip:focus {
    top: 0;
    color: #fff;
    text-decoration: none;
}

.app-nav__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 6px 10px;
    margin-right: 4px;
    color: var(--app-header-fg);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--app-header-radius);
}
.app-nav__brand:hover { color: var(--app-header-accent); text-decoration: none; }
.app-nav__brand i { color: var(--app-header-accent); }

/* ===== Список разделов ===== */
.app-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;               /* иначе flex-элемент не даёт себя сжать */
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;           /* «лишние» пункты уезжают в «Ещё», а не наружу */
}

/* Контейнер кнопки «Ещё». Лежит рядом со списком, а не внутри него:
   у .app-nav__list задан overflow: hidden, и выпадающее меню, которое
   позиционируется под строкой, срезалось этим клиппингом целиком. */
.app-nav__overflow {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-nav__item { flex: 0 0 auto; }
.app-nav__item[hidden] { display: none; }

.app-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    min-height: 40px;           /* комфортная область нажатия */
    color: var(--app-header-fg);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;        /* подписи больше не рвутся посередине */
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--app-header-radius);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.app-nav__link i { font-size: 15px; color: var(--app-header-fg-muted); }
.app-nav__link:hover {
    background: #f4f6fa;
    color: var(--app-header-accent);
    text-decoration: none;
}
.app-nav__link:hover i { color: var(--app-header-accent); }
.app-nav__link:focus-visible {
    outline: 2px solid var(--app-header-accent);
    outline-offset: 2px;
}

/* Текущий раздел виден без догадок */
.app-nav__link[aria-current="page"] {
    background: var(--app-header-accent-soft);
    color: var(--app-header-accent);
    font-weight: 600;
}
.app-nav__link[aria-current="page"] i { color: var(--app-header-accent); }

/* ===== Выпадающие меню (профиль, «Ещё», уведомления) ===== */
.app-nav__dropdown-wrap { position: relative; flex: 0 0 auto; }

.app-nav__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 230px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--app-header-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    z-index: calc(var(--app-header-z) + 1);
}
.app-nav__dropdown[hidden] { display: none; }
.app-nav__dropdown .app-nav__link {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}
.app-nav__dropdown-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--app-header-border);
}
.app-nav__link--danger { color: #c62828; }
.app-nav__link--danger i { color: #c62828; }
.app-nav__link--danger:hover { background: #fdecea; color: #a51c1c; }

/* ===== Правая часть: уведомления и профиль ===== */
.app-nav__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 8px;
}

.app-nav__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--app-header-fg-muted);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.app-nav__icon-btn:hover { background: #f4f6fa; color: var(--app-header-accent); }
.app-nav__icon-btn:focus-visible {
    outline: 2px solid var(--app-header-accent);
    outline-offset: 2px;
}

.app-nav__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    color: #fff;
    text-align: center;
    background: #dc3545;
    border-radius: 8px;
}

.app-nav__profile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    background: none;
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.app-nav__profile-trigger:hover { background: #f4f6fa; }
.app-nav__profile-trigger:focus-visible {
    outline: 2px solid var(--app-header-accent);
    outline-offset: 2px;
}

.app-nav__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.app-nav__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-header-accent);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}
.app-nav__username {
    font-size: 14px;
    color: var(--app-header-fg);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Бургер (узкие экраны) ===== */
.app-nav__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    color: var(--app-header-fg);
    background: none;
    border: 0;
    border-radius: var(--app-header-radius);
    cursor: pointer;
}
.app-nav__burger:hover { background: #f4f6fa; }
.app-nav__burger:focus-visible {
    outline: 2px solid var(--app-header-accent);
    outline-offset: 2px;
}

/* ===== Уведомления ===== */
.app-nav__notifications {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(340px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid var(--app-header-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    z-index: calc(var(--app-header-z) + 1);
}
.app-nav__notifications[hidden] { display: none; }
.app-nav__notifications .notification-list { max-height: 320px; overflow-y: auto; }

/* ===== Мобильная раскладка ===== */
@media (max-width: 860px) {
    .app-nav { flex-wrap: wrap; padding: 0 8px; }
    .app-nav__burger { display: inline-flex; order: 2; }
    .app-nav__actions { order: 3; margin-left: 4px; }
    .app-nav__username { display: none; }

    .app-nav__list {
        order: 4;
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: visible;
        padding: 6px 0 10px;
        border-top: 1px solid var(--app-header-border);
    }
    .app-nav__list.is-open { display: flex; }
    .app-nav__list .app-nav__link { min-height: 44px; }
    /* В мобильном списке всё видно сразу — «Ещё» не нужно */
    .app-nav__list.is-open .app-nav__item { display: block; }
    /* В мобильном списке всё видно сразу — контейнер «Ещё» не нужен вовсе. */
    .app-nav__overflow { display: none; }
}

/* ===== Флеш-сообщения ===== */
.app-flash {
    max-width: 1180px;
    margin: 12px auto 0;
    padding: 0 16px;
}
.app-flash .alert { margin-bottom: 8px; }

/* Цель для ссылки «Перейти к содержимому»: не должна ловить обводку фокуса */
#main-content:focus { outline: none; }

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    .app-nav__link,
    .app-nav__icon-btn,
    .app-nav__profile-trigger,
    .app-nav__skip { transition: none; }
}