/* ═══════════════════════════════════════════════════════════
   Navigation: logo column + topbar row + items row
   ═══════════════════════════════════════════════════════════ */

/* ── Порядок слоёв страницы ──────────────────────────────────
   Меню лежит выше содержимого, а модальное окно — выше меню.
   Держим числа здесь, потому что задаёт порядок именно меню: это
   единственный элемент, общий для всех страниц, и он загружается
   на каждой (`base.html`). Страницы объявляли свои `z-index`
   вслепую и промахивались: окно спецификации на `/admin/task`
   стояло на 900, справка — на 1000, обе ниже меню (1100). Верхний
   край окна уходил под панель, а затемнение фона её не накрывало —
   панель оставалась освещённой над затемнённой страницей.

   Значение берут через `var(--z-modal)`, чтобы у модалок не
   заводились свои числа: поменяется меню — поедут и они. */
:root {
    --z-menu: 1100;
    --z-menu-dropdown: 1200;
    --z-modal: 1300;
}

/* ── Shell: logo left + nav-right column ─────────────────── */
.nav-shell {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    background: #2c3e50;
    z-index: var(--z-menu);
    position: relative;
}

/* ── Logo column: spans both rows ────────────────────────── */
.nav-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 130px;
    flex-shrink: 0;
    background: #253444;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    padding: 7px 12px;
}

.nav-logo img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: block;
}

.nav-logo-name {
    font-size: 12px;
    font-weight: 700;
    color: #ecf0f1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Right side: two rows stacked ────────────────────────── */
.nav-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    /* Точка отсчёта для кнопки фиксера: она прижата к правому краю строки, а сама
       .tabnav-items шириной только по своему содержимому (margin-right: auto). */
    position: relative;
}

/* ── Row 1: topbar ────────────────────────────────────────── */
.topbar {
    display: flex;
    align-items: stretch;
    height: 49px;
    background: #2c3e50;
    position: relative;
}

.tabnav-delimeter {
    background-color: #f4f4f9;
    height: 6px;
}

/* ── Group tabs (inside .topbar) ─────────────────────────── */
.tabnav-group {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 15px;
    height: 49px;
    background: none;
    border: none;
    box-shadow: inset 0 -2px 0 transparent;
    color: #a5b4cc;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s, box-shadow 0.15s, background 0.15s;
    flex-shrink: 0;
}

.tabnav-group:hover {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
}

.tabnav-group.active {
    color: #3a3466;
    background-color: #f4f4f9;
    /*box-shadow: inset 0 -1px 0 #11ec34;*/
}

.topbar-spacer {
    flex: 1;
}

/* ── User menu ────────────────────────────────────────────── */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 16px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
}

.topbar-user:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.topbar-user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #2c3e50;
    border-top: 2px solid #3b82f6;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    min-width: 160px;
    display: none;
    flex-direction: column;
    padding: 6px 0;
    z-index: var(--z-menu-dropdown);
}

.topbar-user:hover .topbar-user-menu {
    display: flex;
}

.topbar-user-menu a {
    color: #bdc3c7;
    font-size: 13px;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.topbar-user-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ── Row 2: items ─────────────────────────────────────────── */
.tabnav-items {
    background: #d2d2d2;
    margin-right: auto;
}

.tabnav-panel {
    display: none;
    align-items: center;
    align-content: flex-start;
    gap: 2px;
    flex-wrap: wrap;
    max-height: 54px;
    background-color: #f4f4f9;
}

.tabnav-panel.active {
    display: flex;
}

.tabnav-panel a {
    color: #141d2b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 11px;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.4;
    background-color: #d2d2d2;
}

.tabnav-panel a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #1b611f;
}

.tabnav-panel a.active {
    color: #3a3466;
    background: #f4f4f9;
    font-weight: 600;
    /*box-shadow: inset 0 -1px 0 #11b2ec;*/
}

/* ── Фиксер: кнопка в правом краю второй строки ───────────── */
.fixer-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 36px;
    padding: 0 12px;
    border: none;
    background: none;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s;
}

.fixer-btn:hover {
    background: #bcbcbc;
}

/* Режим выбора включён — кнопка светится: иначе непонятно, почему страница вдруг
   перестала отзываться на клики. */
.fixer-btn.active {
    background: #4f46e5;
    box-shadow: inset 0 -2px 0 #312e81;
}

/* Ссылка на /docs стоит левее фиксера: тот же правый угол, но со сдвигом
   на ширину кнопки фиксера — 43 пикселя, плюс пиксель запаса (#34226). */
.docs-btn {
    right: 44px;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.tabnav-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 3px;
    flex-shrink: 0;
    align-self: center;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-logo {
        width: 80px;
        padding: 8px;
        gap: 4px;
    }

    .nav-logo img {
        width: 32px;
        height: 32px;
    }

    .nav-logo-name {
        font-size: 10px;
    }

    .tabnav-group {
        padding: 0 9px;
        font-size: 12px;
    }

    .tabnav-sep {
        display: none;
    }
}

@media (max-width: 480px) {
    .nav-logo-name {
        display: none;
    }

    .nav-logo {
        width: 56px;
    }

    .topbar-user .user-label {
        display: none;
    }
}