@font-face {
    font-family: 'Oswald';
    src: url('/static/assets/fonts/oswald_light.woff2') format('woff2'),
         url('/static/assets/fonts/oswald_light.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Базовые стили */
html,
body {
    font-family: 'Oswald', sans-serif;
    margin: 0;
    height: 100%;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}
.sidebar-nav li {
    list-style: none;
}

/* Основная структура */
.wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.main {
    min-height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 0.35s ease-in-out;
    background-color: #faf8f5;
    flex: 1;
}
.content-container {
    padding: 1rem;
    max-width: 100%;
}

/* Сайдбар */
#sidebar {
    width: 77px;
    min-width: 77px;
    z-index: 1000;
    transition: all 0.25s ease-in-out;
    display: flex;
    flex-direction: column;
    background-color: #8ac1e5;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    top: 0;
}

#sidebar.expand {
    width: 335px;
    min-width: 335px;
}

/* =============================
   HEADER САЙДБАРА
   =============================
   Асимметричный тайминг:
   - Открытие: height расширяется сразу
   - Закрытие: ждём 0.25s пока лого/фон угаснут (bg завершает fade в t=250ms)
   ============================= */
.sidebar-header {
    position: relative;
    width: 100%;
    height: 100px;
    /* Без этого шапка — обычный flex-элемент и при переполнении списка пунктов
       сжимается первой: лого схлопывается до нечитаемой полоски (проявилось
       на реальных телефонах). Пусть лучше скроллится список. */
    flex-shrink: 0;
    overflow: hidden;
    transition: height 0.3s ease 0.25s;
    mask-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 96%,
        rgba(255, 255, 255, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 96%,
        rgba(255, 255, 255, 0) 100%
    );
}

#sidebar.expand .sidebar-header {
    height: 300px;
    transition: height 0.3s ease;
}

/* =============================
   ЛОГОТИП
   =============================
   Реальные DOM-элементы вместо ::before/::after
   для точного управления порядком анимаций.

   Последовательность ОТКРЫТИЯ:
     t=0ms    sidebar width + header height (0.3s)
     t=150ms  белый фон появляется (0.2s)
     t=280ms  лого появляется со scale (0.25s)

   Последовательность ЗАКРЫТИЯ:
     t=0ms    лого исчезает (0.12s)
     t=100ms  белый фон исчезает (0.15s)   → завершается t=250ms
     t=250ms  header сжимается (0.3s)
   ============================= */

.sidebar-logo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Белый фон */
.sidebar-logo__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 97%,
        rgba(138, 193, 229, 0.3) 100%
    );
    /* Закрытие: исчезает после лого */
    opacity: 0;
    transition: opacity 0.15s ease 0.1s;
    will-change: opacity;
}

#sidebar.expand .sidebar-logo__bg {
    /* Открытие: появляется когда header уже расширяется */
    opacity: 1;
    transition: opacity 0.2s ease 0.15s;
}

/* Изображение */
.sidebar-logo__img {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 20px;
    width: calc(100% - 20px);
    height: calc(100% - 30px);
    object-fit: contain;
    object-position: center;
    /* Закрытие: быстро исчезает первым */
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.12s ease, transform 0.12s ease;
    will-change: opacity, transform;
}

#sidebar.expand .sidebar-logo__img {
    /* Открытие: появляется после фона с лёгким scale */
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.25s ease 0.28s, transform 0.25s ease 0.28s;
}

/* =============================
   КНОПКИ ОТКРЫТИЯ / ЗАКРЫТИЯ
   =============================
   Crossfade через opacity + transform
   вместо display: none/block
   ============================= */
.open-btn,
.close-btn {
    position: absolute;
    top: 0;
    z-index: 2;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* =============================
   КНОПКА «WIGGLE TAIL» (v6)
   Синяя таблетка с тремя полосками;
   нижняя — оранжевая, виляет шириной
   ============================= */
.v6-btn-face {
    display: grid;
    place-items: center;
    position: relative;
    width: 2.8rem;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background: #67a7d4;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(25, 69, 134, 0.18),
                0 6px 14px -6px rgba(60, 101, 174, 0.4);
    transition: background 0.2s;
}

.open-btn:hover .v6-btn-face,
.close-btn:hover .v6-btn-face {
    background: #3c65ae;
}

.v6-bar,
.v6-x-bar {
    position: absolute;
    left: 50%;
    height: 2.6px;
    background: #fff;
    border-radius: 2px;
}

/* Полоски hamburger */
.v6-b1 { top: 14px;  width: 18px; transform: translateX(-50%); }
.v6-b2 { top: 50%;   width: 18px; transform: translate(-50%, -50%); }
.v6-b3 {
    bottom: 14px;
    width: 12px;
    background: #f4960f;
    transform: translateX(-50%);
    animation: v6wiggle 2.4s ease-in-out infinite;
}

@keyframes v6wiggle {
    0%, 100% { width: 12px; transform: translateX(-50%); }
    40%       { width: 20px; transform: translateX(-50%); }
    55%       { width: 12px; transform: translateX(-50%); }
    70%       { width: 16px; transform: translateX(-50%); }
}

.open-btn:hover .v6-b3 {
    animation: none;
    width: 20px;
    transition: width 0.2s;
}

/* Полоски крестика */
.v6-x-bar {
    top: 50%;
    width: 18px;
}
.v6-x-1 { transform: translate(-50%, -50%) rotate(45deg); }
.v6-x-2 { transform: translate(-50%, -50%) rotate(-45deg); }

/* Hamburger — виден, по центру */
.open-btn {
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    opacity: 1;
    transform: scale(1) rotate(0deg);
    pointer-events: auto;
}

/* Крестик — скрыт, справа */
.close-btn {
    right: 0;
    padding: 0.5rem 0.6rem;
    opacity: 0;
    transform: scale(0.7) rotate(-45deg);
    pointer-events: none;
}

/* В expand: hamburger уходит вправо вверх, крестик появляется */
#sidebar.expand .open-btn {
    opacity: 0;
    transform: scale(0.7) rotate(45deg);
    pointer-events: none;
}

#sidebar.expand .close-btn {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    pointer-events: auto;
}

/* ПРОЧЕЕ */
#sidebar:not(.expand) a.sidebar-link span {
    display: none;
}

/* Иконки свёрнутого сайдбара центрируем по рельсе.
   Подписи скрыты, поэтому обнуляем горизонтальные паддинги ссылки и правый
   margin иконки (зазор под подпись) — иконка встаёт ровно по центру при любой
   ширине рельсы, без пересчёта чисел в каждом адаптивном блоке.
   Селектор с #sidebar перебивает паддинги из @media ниже по файлу. */
#sidebar:not(.expand) a.sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

#sidebar:not(.expand) .sidebar-link i,
#sidebar:not(.expand) .sidebar-icon-wrap {
    margin-right: 0;
}

/* Навигация */
.sidebar-nav {
    padding: 0.5rem 0;
    flex: 1 1 auto;
    width: 100%;
}

/* Ссылки сайдбара */
#sidebar a {
    text-decoration: none;
}

a.sidebar-link {
    padding: 0.825rem 1.625rem;
    color: #fff;
    font-size: 1.2rem;
    white-space: nowrap;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.sidebar-link i {
    font-size: 1.85rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* =========================
   Иконки Icons8
   =========================
   PNG подключаем маской, а не <img>: цвет тогда берётся из currentColor
   (белый, как подписи), а размер — из font-size выше, поэтому все
   адаптивные блоки ниже по файлу продолжают работать без правок.
   Тени нет намеренно: filter применяется до маски, поэтому drop-shadow дал бы
   тень квадрата, а не контура. Плотность штриха вместо этого поднята в самих
   PNG — гамма альфа-канала 0.5, см. tasks/todo.md. */
.sidebar-link i.sb-ic {
    display: block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--sb-ic) no-repeat center / contain;
    mask: var(--sb-ic) no-repeat center / contain;
}

/* Публичный сайдбар */
.sb-ic--home          { --sb-ic: url('../img/icons/home.png'); }
.sb-ic--nachalka      { --sb-ic: url('../img/icons/nachalka.png'); }
.sb-ic--podrostok     { --sb-ic: url('../img/icons/podrostok.png'); }
.sb-ic--metodika      { --sb-ic: url('../img/icons/idea.png'); }
.sb-ic--gallery       { --sb-ic: url('../img/icons/gallery.png'); }
.sb-ic--news          { --sb-ic: url('../img/icons/news.png'); }
.sb-ic--stories       { --sb-ic: url('../img/icons/stories.png'); }
.sb-ic--team          { --sb-ic: url('../img/icons/team.png'); }
.sb-ic--contacts      { --sb-ic: url('../img/icons/contacts.png'); }
.sb-ic--login         { --sb-ic: url('../img/icons/login.png'); }

/* Сайдбар сотрудников */
.sb-ic--kanban        { --sb-ic: url('../img/icons/kanban.png'); }
.sb-ic--documents     { --sb-ic: url('../img/icons/documents.png'); }
.sb-ic--profile       { --sb-ic: url('../img/icons/profile.png'); }
.sb-ic--notifications { --sb-ic: url('../img/icons/notifications.png'); }
.sb-ic--logout        { --sb-ic: url('../img/icons/logout.png'); }

a.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.075);
}

/* Элементы сайдбара */
.sidebar-item {
    position: relative;
    width: 100%;
}

.separator {
    margin: 15px;
    color: #fff;
}

/* Подвал сайдбара */
.sidebar-footer {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

/* =========================
   Адаптив под 1920×1080
   viewport ~1900×955
   ========================= */
@media (max-height: 980px) {

    /* HEADER */
    #sidebar.expand .sidebar-header {
        height: 240px;
    }

    /* ЛОГО */
    .sidebar-logo__img {
        top: 15px;
        bottom: 25px;
    }

    /* КНОПКИ */
    .open-btn,
    .close-btn {
        padding: 0.75rem 1.25rem;
    }

    .v6-btn-face {
        width: 2.6rem;
        border-radius: 7px;
    }

    /* НАВИГАЦИЯ */
    a.sidebar-link {
        padding: 0.7rem 1.5rem;
        font-size: 1.1rem;
    }

    #sidebar {
        width: 69px;
        min-width: 69px;
    }

    .sidebar-link i {
        font-size: 1.65rem;
        margin-right: 0.65rem;
    }

    /* РАЗДЕЛИТЕЛЬ */
    .separator {
        margin: 10px 15px;
    }
}

/* =========================
   Иконка с точкой уведомлений
   ========================= */
.sidebar-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0.75rem;
}

.sidebar-icon-wrap i {
    margin-right: 0;
}

/* Показываем обёртку и точку даже в свёрнутом сайдбаре */
#sidebar:not(.expand) a.sidebar-link .sidebar-icon-wrap {
    display: inline-flex;
}

#sidebar:not(.expand) a.sidebar-link .ntf-dot,
#sidebar:not(.expand) a.sidebar-link #ntf-badge-container {
    display: block;
}

.ntf-dot {
    position: absolute;
    top: 1px;
    right: 0px;
    width: 12px;
    height: 12px;
    background-color: #dc3545;
    border-radius: 50%;
    border: 1.5px solid #8ac1e5;
}

/* =========================
   Адаптив под 1920×1080
   viewport ~1519×739
   ========================= */
@media (max-height: 760px) {

    /* HEADER */
    #sidebar.expand .sidebar-header {
        height: 220px;
    }

    /* ЛОГО */
    .sidebar-logo__img {
        top: 15px;
        bottom: 25px;
    }

    /* КНОПКИ */
    .open-btn,
    .close-btn {
        padding: 0.6rem 1.1rem;
    }

    .v6-btn-face {
        width: 2.4rem;
        border-radius: 6px;
    }

    /* НАВИГАЦИЯ — основной выигрыш */
    a.sidebar-link {
        padding: 0.55rem 1.4rem;
        font-size: 1rem;
    }

    .sidebar-link i {
        font-size: 1.5rem;
        margin-right: 0.55rem;
    }

    /* УМЕНЬШАЕМ ВОЗДУХ МЕЖДУ ЭЛЕМЕНТАМИ */
    .sidebar-item {
        margin-bottom: 2px;
    }

    /* РАЗДЕЛИТЕЛЬ */
    .separator {
        margin: 6px 14px;
    }

    /* FOOTER */
    .sidebar-footer a.sidebar-link {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
}

/* =========================
   МОБИЛЬНАЯ ОБОЛОЧКА (≤ 768px)
   =========================
   На телефоне рельса 54px вынесена из потока (position: fixed), а `.main`
   отступает на её ширину. Раскрытое меню не раздвигает контент, а всплывает
   над ним со шторкой — иначе на 360px сайдбар занял бы 93% экрана.
   Побочный плюс: ширина контента при переключении не меняется, строки не «дёргаются».

   Блок идёт после `@media (max-height: …)` намеренно: перекрывает их,
   т.к. на портретном телефоне они тоже срабатывают. Ниже по файлу его,
   в свою очередь, уточняют блоки ≤400px и «телефон в ландшафте».
   ========================= */
@media (max-width: 768px) {

    /* dvh: на iOS Safari 100vh выше видимой области */
    .wrapper {
        height: 100vh;
        height: 100dvh;
    }

    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 54px;
        min-width: 54px;
        height: 100vh;
        height: 100dvh;
        box-shadow: 2px 0 14px rgba(46, 94, 126, 0.2);
    }

    #sidebar.expand {
        width: min(300px, 86vw);
        min-width: min(300px, 86vw);
    }

    .main {
        padding-left: 54px;
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* Шторка. Перехватывает тапы (иначе попадали бы по ссылкам под меню);
       закрытие по тапу навешено в sidebar.js */
    #sidebar.expand ~ .main::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 900;
        background: rgba(23, 54, 78, 0.45);
        animation: sb-scrim-in 0.25s ease both;
    }

    #sidebar.expand .sidebar-header {
        height: 210px;
    }

    .content-container {
        padding: 0.5rem;
    }

    /* Кнопка-гамбургер должна влезать в рельсу 54px */
    .open-btn {
        padding: 0.8rem 0;
    }

    .v6-btn-face {
        width: 2.3rem;
    }

    /* Плотнее строки: 9 пунктов + разделитель + подвал должны влезать
       рядом с шапкой 210px в видимую высоту телефона.
       Строка = иконка 1.6rem (25.6px) + 2 x 0.55rem (17.6px) = 43px —
       тап-таргет остаётся на уровне рекомендованных 44px. */
    a.sidebar-link {
        padding: 0.55rem 0.95rem;
        font-size: 1.05rem;
    }

    .sidebar-link i {
        font-size: 1.6rem;
        margin-right: 0.7rem;
    }

    .sidebar-icon-wrap {
        margin-right: 0.7rem;
    }

    .sidebar-nav {
        padding: 0.25rem 0;
    }

    .separator {
        margin: 8px 15px;
    }
}

/* =========================
   НЕБОЛЬШИЕ ТЕЛЕФОНЫ (≤ 400px)
   =========================
   iPhone 17E/16e — 390px, SE/13 mini — 375px, бюджетный Android — 360px.
   На 390px рельса 54px + паддинги контейнера съедают 70px (18% экрана).
   Сужаем рельсу до 48px: иконка 1.4rem (22px) + 13px паддинга по бокам,
   высота строки остаётся ~48px — тап-таргет не мельче рекомендованных 44px.
   ========================= */
@media (max-width: 400px) {

    #sidebar {
        width: 48px;
        min-width: 48px;
    }

    #sidebar.expand {
        width: min(288px, 88vw);
        min-width: min(288px, 88vw);
    }

    #sidebar.expand .sidebar-header {
        height: 180px;
    }

    .main {
        padding-left: 48px;
    }

    .content-container {
        padding: 0.5rem 0.4rem;
    }

    .open-btn {
        padding: 0.7rem 0;
    }

    .v6-btn-face {
        width: 2.1rem;
    }

    /* Строка = иконка 1.55rem (24.8px) + 2 x 0.55rem (17.6px) = 42px */
    a.sidebar-link {
        padding: 0.55rem 0.8rem;
    }

    .sidebar-link i {
        font-size: 1.55rem;
        margin-right: 0.65rem;
    }

    .sidebar-icon-wrap {
        margin-right: 0.65rem;
    }

    .separator {
        margin: 7px 14px;
    }
}

/* =========================
   ТЕЛЕФОН В ЛАНДШАФТЕ
   =========================
   844×390 (iPhone 17E боком) шире 768px, поэтому мобильный блок выше
   не срабатывал и включался десктопный сайдбар: рельса 77px в потоке,
   раскрытое меню 335px — 40% экрана, а `max-height: 760px` ещё и
   растягивал шапку на 220px из 390px высоты.

   Здесь та же оболочка-оверлей, что и в портрете, плюс шапка ужата
   до 96px, иначе список пунктов не помещается и уходит в скролл.
   ========================= */
@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {

    .wrapper {
        height: 100vh;
        height: 100dvh;
    }

    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 54px;
        min-width: 54px;
        height: 100vh;
        height: 100dvh;
        box-shadow: 2px 0 14px rgba(46, 94, 126, 0.2);
    }

    #sidebar.expand {
        width: min(300px, 42vw);
        min-width: min(300px, 42vw);
    }

    #sidebar.expand .sidebar-header {
        height: 96px;
    }

    /* height задан в базовых стилях, поэтому bottom не работает —
       пересчитываем высоту явно под шапку в 96px */
    .sidebar-logo__img {
        top: 6px;
        height: calc(100% - 18px);
    }

    .main {
        padding-left: 54px;
        min-height: 100vh;
        min-height: 100dvh;
    }

    #sidebar.expand ~ .main::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 900;
        background: rgba(23, 54, 78, 0.45);
        animation: sb-scrim-in 0.25s ease both;
    }

    .content-container {
        padding: 0.5rem;
    }

    .open-btn {
        padding: 0.6rem 0;
    }

    .close-btn {
        padding: 0.35rem 0.5rem;
    }

    .v6-btn-face {
        width: 2.2rem;
    }

    /* Плотнее строки: в 390px высоты должны влезть 10 пунктов + подвал */
    a.sidebar-link {
        padding: 0.42rem 0.95rem;
        font-size: 1rem;
    }

    .sidebar-link i {
        font-size: 1.45rem;
        margin-right: 0.6rem;
    }

    .sidebar-icon-wrap {
        margin-right: 0.6rem;
    }

    .separator {
        margin: 5px 14px;
    }
}

@keyframes sb-scrim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar.expand ~ .main::before { animation: none; }
}

/* =========================
   ПОДСКАЗКИ К ИКОНКАМ (свёрнутый сайдбар)
   =========================
   Живёт в <body>, а не внутри пункта меню: у #sidebar стоит
   overflow-x: hidden, поэтому любой вложенный тултип обрезался бы
   по рельсе 77px. Позиция считается в sidebar.js по getBoundingClientRect.
   ========================= */
.sidebar-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    padding: 0.4rem 0.75rem;
    max-width: 240px;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    line-height: 1.25;
    color: #fff;
    background-color: #194586;
    border-radius: 6px;
    box-shadow: 0 8px 18px -8px rgba(25, 69, 134, 0.65);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.sidebar-tooltip::before {
    content: '';
    position: absolute;
    top: var(--sb-tooltip-arrow, 50%);
    left: -4px;
    width: 8px;
    height: 8px;
    background-color: inherit;
    border-radius: 1px;
    transform: translateY(-50%) rotate(45deg);
}

.sidebar-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-tooltip { transition: none; transform: none; }
    .sidebar-tooltip.is-visible { transform: none; }
}