/* [2026-09-24][CLX][S3-F] Левое меню: табличка «раздел закрыт» и режим «Настроить меню».
   Отдельный файл, чтобы правки меню не задевали общую раскладку (layout.css). */

/* ── Табличка «раздел закрыт» (router.js → Router._closedNotice) ─────────────────── */
.route-closed-notice {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(640px, calc(100vw - 32px));
  padding: 10px 12px 10px 18px;
  border-radius: var(--radius-md, 8px);
  background: var(--c-text, #222);
  color: var(--c-text-inverse, #fff);
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.route-closed-notice__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.route-closed-notice__close:hover,
.route-closed-notice__close:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.15); }

/* ── Скрытое человеком (menu-layout.js). Права роли — отдельный класс .is-role-hidden (layout.css). ── */
.is-user-hidden { display: none !important; }

/* ── Кнопка «Настроить меню» под списком разделов ─────────────────────────────────── */
.sidebar__menu-cfg {
  width: 100%;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  font-family: inherit;
  text-align: left;
}
.sidebar__menu-cfg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Окно «Настроить меню»: у края меню, чтобы меню было видно и менялось на глазах ── */
.menu-cfg__backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: var(--sidebar-w, 220px);
  z-index: var(--z-dialog, 1400);
  background: var(--dialog-backdrop, rgba(0, 0, 0, 0.25));
}
.menu-cfg {
  position: fixed;
  top: 12px;
  left: calc(var(--sidebar-w, 220px) + 12px);
  z-index: calc(var(--z-dialog, 1400) + 1);
  width: 380px;
  max-width: calc(100vw - var(--sidebar-w, 220px) - 24px);
  max-height: calc(100vh - 24px);
  /* [2026-09-25][CLX][S3-F] Прокручивается только список (`__body`): шапка и «Готово» видны всегда (1280×720). */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 16px 12px;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-dialog, 0 12px 40px rgba(0, 0, 0, 0.25));
}
body:has(.sidebar.collapsed) .menu-cfg__backdrop { left: var(--sidebar-collapsed-w, 56px); }
body:has(.sidebar.collapsed) .menu-cfg {
  left: calc(var(--sidebar-collapsed-w, 56px) + 12px);
  max-width: calc(100vw - var(--sidebar-collapsed-w, 56px) - 24px);
}
.menu-cfg__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-cfg__title { margin: 0; font-size: var(--text-lg, 1.1rem); font-weight: 600; }
.menu-cfg__x {
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.menu-cfg__x:hover { color: var(--text); }
.menu-cfg__hint { margin: 6px 0 10px; font-size: 0.8rem; line-height: 1.4; color: var(--text-secondary); }
.menu-cfg__block { margin-top: 8px; }
.menu-cfg__block-head {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 0; border-bottom: 1px solid var(--border);
}
.menu-cfg__block-name { flex: 1; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.menu-cfg__list { list-style: none; margin: 0; padding: 0; }
.menu-cfg__row { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.menu-cfg__row input { flex: none; width: 16px; height: 16px; margin: 0 6px 0 2px; cursor: pointer; accent-color: var(--accent); }
.menu-cfg__row label { flex: 1; min-width: 0; font-size: 0.88rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-cfg__row.is-off label { color: var(--text-muted); text-decoration: line-through; }
.menu-cfg__mv {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.menu-cfg__mv svg { width: 16px; height: 16px; }
.menu-cfg__mv:hover:not([disabled]) { background: var(--bg); border-color: var(--border); color: var(--text); }
.menu-cfg__mv:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.menu-cfg__mv[disabled] { opacity: 0.25; cursor: default; }
.menu-cfg__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}
.menu-cfg__status { flex: 1; min-width: 0; font-size: 0.78rem; color: var(--text-secondary); }
.menu-cfg__head, .menu-cfg__hint, .menu-cfg__foot { flex: none; }
.menu-cfg__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }

/* [2026-10-01][CLX][Д-08-261001] Свёрнутое меню: столбик подписей всех разделов при наведении на полосу меню
   (образец Александра — Яндекс Облако; js/components/sidebar-labels.js). Плашки — нейтральный тёмно-серый с белым
   текстом, без стрелок и общей подложки; пункт под курсором темнее, текущий раздел — полужирным.
   Слой в <body> с position: fixed — внутри меню его обрезал бы overflow-x у .sidebar__nav. */
.sb-labels { position: fixed; inset: 0 auto auto 0; z-index: 1200; pointer-events: none; }
/* [2026-10-05][CLX][Д-02-261005] Панель «как у Битрикса»: одна полупрозрачная подложка от края меню во всю его высоту,
   подписи — строками на высоте своих значков; зона «Каталог» продолжается тем же тоном и рамкой, что капсула в меню.
   Меню на время панели поднято над ней — круглая кнопка «свернуть/развернуть» остаётся видна и нажимается. */
.sb-labels__panel {
  position: fixed; pointer-events: auto;
  background: rgba(44, 36, 32, .82);
  background: color-mix(in srgb, var(--sidebar-bg) 84%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 8px 0 24px rgba(0, 0, 0, .22);
  border-radius: 0 12px 12px 0;
  animation: sb-labels-slide .16s ease-out;
}
.sb-labels__zone {
  position: fixed; pointer-events: none;
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--sidebar-active-border) 24%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sidebar-active-border) 55%, transparent),
              inset -1px 0 0 color-mix(in srgb, var(--sidebar-active-border) 55%, transparent),
              inset 0 -1px 0 color-mix(in srgb, var(--sidebar-active-border) 55%, transparent);
  animation: sb-labels-slide .16s ease-out;
}
.sb-labels__pill {
  position: fixed; box-sizing: border-box;
  display: flex; align-items: center;
  padding: 0 16px 0 18px;
  color: var(--sidebar-text-hover);
  font-size: 13.5px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  pointer-events: auto; cursor: pointer; user-select: none;
  animation: sb-labels-slide .16s ease-out;
}
.sb-labels__pill.is-zone { color: var(--sidebar-text-hover); }
.sb-labels__pill.is-hot { background: rgba(255, 255, 255, .09); }
.sb-labels__pill.is-current { font-weight: 700; }
.sb-labels__pill.is-current::before {
  content: ""; width: 3px; height: 16px; margin: 0 9px 0 -12px; border-radius: 2px; flex: none;
  background: var(--sidebar-active-border);
}
.sb-labels__pill--expand { color: var(--sidebar-text); font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sb-labels__pill--expand.is-hot, .sb-labels__pill--expand:hover { color: var(--sidebar-text-hover); background: rgba(255, 255, 255, .09); }
/* Меню над панелью: кнопка выступает за его край на 12 px — поверх подложки. Капсула «Каталог» сливается с зоной
   в панели: правые скругления и правая черта рамки на это время сняты, отступ до края закрыт тем же тоном. */
.sidebar.sb-labels-on { z-index: 1201; }
.sidebar.sb-labels-on .sidebar__toggle { box-shadow: 0 0 0 3px rgba(0, 0, 0, .18); }
.sidebar.collapsed.sb-labels-on .sidebar__catalog-toggle.is-open,
.sidebar.collapsed.sb-labels-on .sidebar__catalog-sub.is-open { position: relative; }
.sidebar.collapsed.sb-labels-on .sidebar__catalog-toggle.is-open {
  border-top-right-radius: 0;
  box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--sidebar-active-border) 55%, transparent);
}
.sidebar.collapsed.sb-labels-on .sidebar__catalog-sub.is-open {
  border-bottom-right-radius: 0;
  box-shadow: inset 1px -1px 0 color-mix(in srgb, var(--sidebar-active-border) 55%, transparent);
}
.sidebar.collapsed.sb-labels-on .sidebar__catalog-toggle.is-open::after,
.sidebar.collapsed.sb-labels-on .sidebar__catalog-sub.is-open::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -8px; width: 8px; pointer-events: none;
  background: color-mix(in srgb, var(--sidebar-active-border) 24%, transparent);
}
.sidebar.collapsed.sb-labels-on .sidebar__catalog-toggle.is-open::after {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sidebar-active-border) 55%, transparent);
}
.sidebar.collapsed.sb-labels-on .sidebar__catalog-sub.is-open::after {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--sidebar-active-border) 55%, transparent);
}
@keyframes sb-labels-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes sb-labels-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sb-labels__pill, .sb-labels__panel, .sb-labels__zone { animation: none; } }