/*
 * Левое меню одной колонкой.
 *
 * До этого колонок было две: узкий рельс со значками и отдельная белая
 * панель с содержанием раздела. Рядом получались три вертикальные полосы
 * подряд, и средняя читалась как чужая деталь, приклеенная к странице.
 *
 * Теперь разделы — строки со значком, а открытый раздел залит своим цветом
 * целиком: строка, значок и линия вложенности под ней. Текущая страница
 * внутри раздела — белая плашка. Цвета те же, что в рельсе и на главной:
 * синий учёба, мятный практика, коралловый соревнования, фиолетовый класс.
 *
 * Отдельным файлом, а не в app.css: app.css собирает Vite, и правка стилей
 * потребовала бы сборки. Файл подключается после него, поэтому переопределяет
 * --cw-rail: от этой переменной считаются панель уведомлений и меню профиля,
 * оставшиеся общими с прежним рельсом.
 */
:root {
    --cw-side: 236px;
    --cw-rail: var(--cw-side);
}

.cw-side {
    width: var(--cw-side);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 70;
    display: flex;
    flex-direction: column;
    padding: 9px 8px 8px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-primary);
}

/* ------------------------------------------------------------------ шапка */

.cw-side__top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 3px 10px;
    flex-shrink: 0;
}
.cw-side__logo {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--text-primary);
    text-decoration: none;
}
.cw-side__logo-ico {
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--cw-on-solid);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cw-side__logo-ico img { display: block; }
.cw-side__logo-txt { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }

.cw-side__mini {
    margin-left: auto;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-primary);
    border-radius: 7px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.cw-side__mini:hover { color: var(--text-primary); background: var(--hover-bg); }
.cw-side__mini:focus-visible { outline: 2px solid var(--cw-on-solid); outline-offset: 1px; }

/* ---------------------------------------------------------------- разделы */

.cw-side__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 6px;
}

.cw-side__sec {
    --tone: var(--cw-sky);
    --tone-ink: #1d6fd0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 4px 8px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.cw-side__sec:hover { background: var(--hover-bg); color: var(--text-primary); }
.cw-side__sec:focus-visible { outline: 2px solid var(--cw-on-solid); outline-offset: 1px; }

.cw-side__ico {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 13%, transparent);
}
.cw-side__lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cw-side__sec[data-cw-tone="sky"] { --tone: var(--cw-sky); --tone-ink: #1d6fd0; }
.cw-side__sec[data-cw-tone="mint"] { --tone: var(--cw-mint); --tone-ink: #1f8b52; }
.cw-side__sec[data-cw-tone="coral"] { --tone: var(--cw-coral); --tone-ink: var(--cw-coral-edge); }
.cw-side__sec[data-cw-tone="grape"] { --tone: var(--cw-grape); --tone-ink: #6d3fe0; }
.cw-side__sec[data-cw-tone="sun"] { --tone: var(--cw-sun); --tone-ink: var(--cw-sun-edge); }

/* Открытый раздел: залит своим цветом целиком. В тёмной теме заливка
   прозрачная, а подпись берёт сам тон — тёмных чернил там нет. */
.cw-side__sec.is-on {
    background: color-mix(in srgb, var(--tone) 12%, transparent);
    color: var(--tone-ink);
    font-weight: 700;
}
.cw-side__sec.is-on .cw-side__ico { background: var(--tone); color: #fff; }
.cw-side__sec.is-on:hover { background: color-mix(in srgb, var(--tone) 18%, transparent); color: var(--tone-ink); }

[data-theme="dark"] .cw-side__sec { --tone-ink: var(--tone); }
[data-theme="dark"] .cw-side__sec.is-on .cw-side__ico { color: #0f172a; }

.cw-side__chev { margin-left: auto; display: inline-flex; color: currentColor; opacity: .65; transform: rotate(90deg); }

/* --------------------------------------------- содержание открытого раздела */

.cw-side__sub {
    --tone: var(--cw-sky);
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 6px 22px;
    padding-left: 11px;
    border-left: 2px solid color-mix(in srgb, var(--tone) 35%, transparent);
}
.cw-side__sub[data-cw-tone="sky"] { --tone: var(--cw-sky); }
.cw-side__sub[data-cw-tone="mint"] { --tone: var(--cw-mint); }
.cw-side__sub[data-cw-tone="coral"] { --tone: var(--cw-coral); }
.cw-side__sub[data-cw-tone="grape"] { --tone: var(--cw-grape); }
.cw-side__sub[data-cw-tone="sun"] { --tone: var(--cw-sun); }

.cw-side__grp {
    margin: 8px 0 3px;
    padding: 0 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cw-side__sub > .cw-side__grp:first-child { margin-top: 3px; }

.cw-side__i {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 29px;
    padding: 4px 9px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12.5px;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color .15s, color .15s;
}
.cw-side__i:hover { background: var(--hover-bg); color: var(--text-primary); }
.cw-side__i:focus-visible { outline: 2px solid var(--cw-on-solid); outline-offset: 1px; }

/* Текущая страница — белая плашка на цветном разделе.

   В тёмной теме «белой» она быть не может: --card-bg там совпадает с фоном
   самой колонки, и от плашки оставалась одна черта снизу. Поэтому там
   плашка светлее фона на ступень. */
.cw-side__i.is-on {
    background: var(--card-bg);
    color: var(--text-primary);
    font-weight: 650;
    box-shadow: 0 1px 0 var(--border-primary);
}
[data-theme="dark"] .cw-side__i.is-on {
    background: var(--bg-tertiary);
    box-shadow: none;
}
.cw-side__i.is-off { color: var(--text-muted); cursor: default; }
.cw-side__i--add { color: var(--text-muted); }

/* ------------------------------------------------------------------- низ */

.cw-side__foot {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 6px;
    border-top: 1px solid var(--border-primary);
}

/* Уведомления, тема и профиль остались общими с прежним рельсом: там значок
   в коробке 34×34 и подпись под ним. В строке колонки они лежат в ряд,
   поэтому раскладка переопределяется здесь. Значки тут нейтральные: пять
   цветов разделов выше и так держат внимание, шестой и седьмой внизу
   начали бы с ними спорить. */
.cw-side .cw-rail__item {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 34px;
    padding: 4px 8px;
    border-radius: 10px;
    text-align: left;
    font-size: 13px;
}
.cw-side .cw-rail__ico {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
}
.cw-side .cw-rail__item:hover .cw-rail__ico { background: color-mix(in srgb, var(--text-muted) 22%, transparent); }
.cw-side .cw-rail__ava { background: none; }
.cw-side .cw-rail__lab { font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-side .cw-notif, .cw-side .cw-rail__me { width: 100%; display: block; }
.cw-side .cw-notif > .relative { display: block; width: 100%; }
.cw-side .cw-xp { display: none; }

/* Панель уведомлений держалась на правиле `.cw-rail .cw-notif__panel` и без
   рельса осталась бы на своих исходных стилях — у правого края. */
.cw-side .cw-notif__panel {
    position: fixed;
    left: calc(var(--cw-side) + 10px);
    right: auto;
    top: auto;
    bottom: 14px;
    margin: 0;
    width: 360px;
    max-height: min(70vh, 540px);
    border-radius: 14px;
    background: var(--dropdown-bg);
    border-color: var(--border-primary);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
}
/* Через .cw-side, а не просто .cw-rail__menu: в app.css у этого правила такая
   же значимость, и оно ставило меню по ширине прежнего рельса — поверх
   колонки. Меню лежит внутри колонки, поэтому селектор точнее. */
.cw-side .cw-rail__menu { left: calc(var(--cw-side) + 10px); }

/* --------------------------------------------- свёрнуто до одних значков */

body.cw-side-mini { --cw-side: 66px; }
body.cw-side-mini .cw-side { padding-inline: 6px; align-items: center; }
body.cw-side-mini .cw-side__lab,
body.cw-side-mini .cw-side__logo-txt,
body.cw-side-mini .cw-side__chev,
body.cw-side-mini .cw-side__sub,
body.cw-side-mini .cw-side .cw-rail__lab { display: none; }
body.cw-side-mini .cw-side__top { flex-direction: column; gap: 6px; padding-bottom: 10px; }
body.cw-side-mini .cw-side__mini { margin-left: 0; }
body.cw-side-mini .cw-side__mini svg { transform: rotate(180deg); }
body.cw-side-mini .cw-side__sec,
body.cw-side-mini .cw-side .cw-rail__item { justify-content: center; padding-inline: 4px; gap: 0; }
body.cw-side-mini .cw-side__list { align-items: stretch; }
body.cw-side-mini .cw-side__foot { width: 100%; }

/* ------------------------------------------------------------- по ширине */

@media (max-width: 1319px) {
    :root { --cw-side: 212px; }
    .cw-side__sec { min-height: 32px; font-size: 12.5px; }
}

/* Ниже 1024 меню перестаёт быть колонкой и всплывает поверх страницы.
   Содержимое под ним не перекладывается: иначе таблица прыгала бы при
   каждом открытии меню. */
@media (max-width: 1023px) {
    .cw-side {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(84vw, 282px);
        height: auto;
        box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
        transform: translateX(-105%);
        transition: transform .18s ease;
    }
    .cw-side.is-open { transform: none; }

    /* Свёрнутый вид на узком экране не нужен: меню и так накладное, и
       показывать в нём одни значки — прятать то, ради чего его открыли. */
    body.cw-side-mini { --cw-side: 236px; }
    body.cw-side-mini .cw-side { width: min(84vw, 282px); padding-inline: 8px; align-items: stretch; }
    body.cw-side-mini .cw-side__lab,
    body.cw-side-mini .cw-side__logo-txt,
    body.cw-side-mini .cw-side__sub,
    body.cw-side-mini .cw-side .cw-rail__lab { display: block; }
    body.cw-side-mini .cw-side__sub { display: flex; }
    body.cw-side-mini .cw-side__chev { display: inline-flex; }
    body.cw-side-mini .cw-side__top { flex-direction: row; }
    body.cw-side-mini .cw-side__sec,
    body.cw-side-mini .cw-side .cw-rail__item { justify-content: flex-start; padding-inline: 8px; gap: 10px; }
    body.cw-side-mini .cw-side__mini { display: none; }

    .cw-side__backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 65;
        background: rgba(15, 23, 42, .34);
    }
    .cw-side__backdrop.is-open { display: block; }

    .cw-side .cw-notif__panel { left: 10px; width: min(94vw, 360px); }
    .cw-side .cw-rail__menu { left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .cw-side { transition: none; }
}

@media print {
    .cw-side,
    .cw-side__backdrop { display: none !important; }
}