/*
 * Боковая панель — ОДИН файл на оба интерфейса: Django-страницы
 * (templates/base.html) и React-доску задач (frontend/public/index.html
 * подключает его тем же <link>, см. HANDOFF.md 2026-10-01).
 *
 * Раньше эти же правила лежали двумя копиями — инлайном в base.html и в
 * frontend/src/App.css — и разъехались: в SPA переключатель группы
 * («Продажи», «Маркировка») сделан <button>, а в base.html — <label>, и
 * без явного `font: inherit` кнопка бралась браузерным дефолтом
 * (~13px Arial) вместо шрифта сайдбара. Поэтому ниже у всех кликабельных
 * элементов шрифт задан явно, а не «как получится от родителя»: страницы
 * вокруг сайдбара разные (Bootstrap vs CRA), наследовать от них нельзя.
 *
 * Токены (--ink-900, --accent-300 и т.п.) приходят из static/css/app.css
 * у Django и из frontend/src/index.css у SPA; у каждой переменной есть
 * запасное значение — файл должен выглядеть одинаково, даже если его
 * подключат там, где токенов нет.
 */

:root { --sidebar-w: 240px; --sidebar-w-collapsed: 64px; }

/* .app-sidebar — Django, .sidebar — React-доска: исторически разные имена
   корневого элемента, остальная разметка общая. Позиционирование — НЕ
   здесь: у Django сайдбар position:fixed со сдвигом body (см. base.html),
   у доски — обычный flex-элемент внутри .app (см. App.css). Общий тут
   только внешний вид. */
.app-sidebar,
.sidebar {
    width: var(--sidebar-w);
    background: var(--ink-900, #211D2C); color: #fff; display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden; transition: width .18s ease;
    font-family: var(--font-body, 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 1rem; line-height: 1.5;
}
html.sb-collapsed .app-sidebar,
html.sb-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

.sidebar-top { display: flex; align-items: center; gap: 8px; padding: 16px 14px; flex-shrink: 0; }
.sidebar-toggle {
    background: transparent; border: none; color: #fff; opacity: .8; font-size: 1.25rem;
    line-height: 1; padding: 6px 8px; border-radius: var(--radius-sm, 8px); cursor: pointer; flex-shrink: 0;
}
.sidebar-toggle:hover { opacity: 1; background: rgba(255,255,255,.08); }
.sidebar-brand {
    color: #fff; text-decoration: none; font-family: var(--font-display, 'Golos Text', 'Onest', sans-serif);
    font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; font-size: 1.25rem;
}

.sidebar-nav { flex: 1 1 auto; padding: 10px 8px; }
.sidebar-link {
    display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 2px;
    color: rgba(255,255,255,.68); text-decoration: none; white-space: nowrap;
    border-left: 3px solid transparent; border-radius: var(--radius-sm, 8px);
    /* font явно, не inherit: .sidebar-link бывает и <a>, и <label>, и
       <button> — у кнопки шрифт от родителя не наследуется сам. */
    font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5; text-align: left;
}
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-link.active { background: rgba(183,160,222,.14); color: var(--accent-300, #B7A0DE); border-left-color: var(--accent-300, #B7A0DE); }
.sidebar-link .bi { flex-shrink: 0; width: 20px; text-align: center; font-size: 1.05rem; }
html.sb-collapsed .sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; }

/* Раскрывающиеся группы пунктов меню («Продажи», «Маркировка»). У Django
   это чистый CSS: скрытый чекбокс + label, начальное состояние (checked)
   рендерит сам сервер по активному пути. У SPA чекбокса нет — там
   раскрытие на React-стейте, он вешает класс .expanded; правила ниже
   покрывают оба механизма. */
.sidebar-group-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sidebar-group-toggle { width: 100%; border: none; background: transparent; cursor: pointer; }
.sidebar-group-toggle .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-group-toggle .sidebar-caret { margin-left: auto; flex-shrink: 0; font-size: .78rem; opacity: .55; transition: transform .15s ease; }
.sidebar-group-check:checked + .sidebar-group-toggle .sidebar-caret,
.sidebar-group-toggle.expanded .sidebar-caret { transform: rotate(90deg); }
.sidebar-group-check:focus-visible + .sidebar-group-toggle { outline: 2px solid var(--accent-300, #B7A0DE); outline-offset: -2px; }
.sidebar-group-body { display: none; }
.sidebar-group-check:checked ~ .sidebar-group-body,
.sidebar-group-body.expanded { display: block; }
.sidebar-sublink { padding-left: 36px; }
html.sb-collapsed .sidebar-group-toggle { display: none; }
html.sb-collapsed .sidebar-group-body { display: block; }
html.sb-collapsed .sidebar-sublink { padding-left: 0; }

.sidebar-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 12px; flex-shrink: 0; }
.sidebar-company { color: rgba(255,255,255,.85); font-size: .85rem; }

/* Кнопки низа панели — свои, не bootstrap-овские .btn.btn-outline-light:
   на доске задач Bootstrap CSS не подключён (он переопределил бы стили
   карточек/модалок доски), а выглядеть обе панели должны одинаково. */
.sidebar-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    margin-bottom: 8px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--radius-sm, 8px); background: transparent; color: #fff;
    font-family: inherit; font-size: .875rem; font-weight: 400; line-height: 1.5;
    text-decoration: none; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.sidebar-btn:last-child { margin-bottom: 0; }
.sidebar-btn:hover { background: #fff; color: var(--ink-900, #211D2C); }
.sidebar-btn .btn-label { overflow: hidden; text-overflow: ellipsis; }

/* Переключатель компаний — <select> в рамке под кнопку: один и тот же
   обычный POST-форм на /switch-company/ в обоих интерфейсах (раньше у
   Django был Bootstrap-dropdown, требующий его JS, а у SPA — select). */
.sidebar-company-form { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.5); border-radius: var(--radius-sm, 8px); color: #fff; cursor: pointer; }
.sidebar-company-form:hover { background: #f8f9fa; color: var(--ink-900, #211D2C); }
.sidebar-company-form:hover .sidebar-company-select { color: var(--ink-900, #211D2C); }
.sidebar-company-form .bi { flex-shrink: 0; font-size: 1em; line-height: 21px; }
.sidebar-company-caret { font-size: .6em !important; opacity: .85; }
.sidebar-company-select { flex: 1; min-width: 0; background: none; color: inherit; border: none;
    font-family: inherit; font-size: .875rem; line-height: 1.5; cursor: pointer; appearance: none; outline: none; }
.sidebar-company-select option { color: var(--ink-900, #211D2C); }
html.sb-collapsed .sidebar-company-form { display: none; }

html.sb-collapsed .label,
html.sb-collapsed .sidebar-brand .brand-full,
html.sb-collapsed .sidebar-company-text,
html.sb-collapsed .sidebar-bottom .btn-label { display: none; }
html.sb-collapsed .sidebar-top { justify-content: center; }
html.sb-collapsed .sidebar-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; }
html.sb-collapsed .sidebar-btn { margin-bottom: 0; }

@media (max-width: 768px) {
    .app-sidebar, .sidebar { width: var(--sidebar-w-collapsed); }
    html:not(.sb-collapsed) .app-sidebar,
    html:not(.sb-collapsed) .sidebar { width: var(--sidebar-w); }
}