/* SynnFrameFW — Панель разделов (1-й уровень) и колонка команд раздела (2-й уровень).
 * Вынесено из глобального <style> MainLayout.razor (этап 4a): правила те же,
 * размеры и цвета — через токены css/tokens.css. */

/* Пользовательские цвета меню (Оформление интерфейса) — светлые по смыслу,
   поэтому в тёмной теме они игнорируются: иначе панель разделов и боковая
   панель остаются светлыми пятнами на тёмном фоне. Значения приходят
   inline на :root из theming.js, перебить их можно только тем, что мы
   вовсе не используем эти переменные в тёмной теме. */
:root[data-theme="dark"] .synn-sections,
:root[data-theme="dark"] .synn-commands {
    background: var(--surface-card);
}

/* Горизонтальная панель разделов (1-й уровень) — сверху, на всю ширину. */
.synn-sections {
    grid-column:1 / -1; grid-row:1;
    height:48px; background:var(--ui-menu1-bg, var(--surface-card));
    border-bottom:1px solid var(--border-default);
    display:flex; flex-direction:row; align-items:stretch;
    padding:0 8px; overflow-x:auto;
}
.synn-section {
    position:relative;
    display:flex; flex-direction:row;
    align-items:center; justify-content:center;
    cursor:pointer; gap:7px;
    padding:0 16px;
    color:var(--text-secondary); text-decoration:none;
    font-size:var(--fs-xs); letter-spacing:0.2px; white-space:nowrap;
    border:none; background:none;
}
.synn-section:hover { background:var(--surface-hover); color:var(--text-primary); }
.synn-section .ico {
    display:inline-flex; align-items:center;
    font-size:var(--ui-icon-size, 18px); line-height:1; color:var(--text-secondary);
}
.synn-section.active { color:var(--text-primary); font-weight:600; }
/* Активный раздел — подчёркивание снизу (панель разделов 1С 8.5). */
.synn-section.active::before {
    content:''; position:absolute; left:10px; right:10px; bottom:0; height:3px;
    background:var(--brand-1); border-radius:2px 2px 0 0;
}
.synn-section.active .ico { color:var(--brand-2); }

/* Второй уровень — левая колонка с командами выбранного раздела. */
.perm-desc-inline { display:none; }

.synn-commands {
    grid-column:1; grid-row:2;
    background:var(--ui-menu2-bg, var(--surface-card));
    border-right:1px solid var(--border-default);
    padding:12px 8px;
    overflow-y:auto; min-height:0;
}
.synn-commands .title {
    padding:6px 8px 12px; margin:0;
    font-size:var(--fs-body); font-weight:600; color:var(--text-primary);
    border-bottom:1px solid var(--border-default); margin-bottom:8px;
}
.synn-commands a {
    display:block; padding:6px 10px; border-radius:3px;
    color:var(--text-primary); text-decoration:none; font-size:var(--fs-body);
    margin-bottom:1px;
}
.synn-commands a:hover { background:var(--surface-hover); }
/* Активный пункт: подсветка от акцента темы. Был захардкожен светло-жёлтый
   #FFF8E1 — в тёмной теме он оставался светлой плашкой со светлым текстом
   на ней, то есть пункт становился нечитаемым. */
.synn-commands a.active {
    background:var(--surface-selected);
    color:var(--text-primary);
    font-weight:600;
    position:relative;
}
.synn-commands a.active::before {
    content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px;
    background:var(--brand-1); border-radius:0 2px 2px 0;
}
.nav-section-title {
    padding:8px 10px 4px; margin:0;
    font-size:var(--fs-xs); font-weight:600; letter-spacing:0.5px;
    text-transform:uppercase; color:var(--text-secondary);
}

/* S1.WM — сворачиваемые группы справочников по подсистемам. */
.nav-group-head {
    display:flex; align-items:center; gap:6px;
    padding:5px 10px; margin-top:2px; cursor:pointer; user-select:none;
    font-size:var(--fs-xs); font-weight:600; color:var(--text-primary);
    border-radius:3px;
}
.nav-group-head:hover { background:var(--surface-hover); }
/* Каретка группы: один значок, повороты — состоянием, а не двумя
   разными символами (▸/▾ имели разную ширину и «дёргали» строку). */
.nav-group-caret {
    width:14px; flex:0 0 14px; color:var(--text-secondary);
    display:inline-flex; align-items:center; justify-content:center;
    transform:rotate(-90deg); transition:transform var(--motion-fast);
}
.nav-group-caret.open { transform:rotate(0deg); }
.nav-group-title { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-group-count {
    font-size:var(--fs-xs); color:var(--text-secondary);
    background:var(--color-neutral-bg); border-radius:8px; padding:1px 7px; flex-shrink:0;
}
.nav-group-items { margin-left:8px; border-left:1px solid var(--border-default); padding-left:4px; }

/* Пустой раздел «Данные» (нет объектов) — был inline-стиль в NavMenu. */
.nav-empty { padding: var(--space-3); font-size: var(--fs-caption); color: var(--text-secondary); }