/* Синяя тема левого меню Дашборд — две версии одной геометрии:
   светлая (светло-синяя) и тёмная (тёмно-синяя, как на референсе владельца).
   Версия выбирается штатным тумблером темы платформы (класс .dark на <html>),
   отдельного переключателя не заводим — одно меню, две палитры.

   Скоуп строго <aside> с главным меню: контент справа не трогаем. Файл только
   перекрашивает и задаёт ритм; структуру, состав пунктов и поведение аккордеона
   (main-sidebar-polish.js) не меняет. Полностью обратимо: снять <link> в index.html.

   Порядок подключения: ПОСЛЕ main-sidebar-polish.css (перебиваем его цвета/размеры). */

/* ───────────────────────── палитра: светлая (по умолчанию) ─────────────────────────
   Держим на :root, а не только на <aside>: мобильные бары и шторка живут вне сайдбара,
   но красятся теми же токенами. Сами правила применяются точечно, поэтому контент
   страницы палитра не задевает. */
:root,
aside:has(nav.scrollbar-auto-hide) {
  --sb-bg-top:      #fdfeff;
  --sb-bg-bottom:   #f4f8ff;
  --sb-border:      #e2ebfa;
  --sb-sec-bg:      #ffffff;      /* секция-кнопка */
  --sb-sec-br:      #e4ecfb;
  --sb-sec-bg-on:   #eaf2ff;      /* раскрытая секция */
  --sb-sec-br-on:   #c4d9fb;
  --sb-sec-shadow:  0 1px 2px rgba(23, 54, 120, 0.05);
  --sb-head:        #1c3a6e;   /* заголовок секции — тёмно-синий */
  --sb-head-on:     #1d4ed8;   /* заголовок раскрытой секции */
  --sb-head-hover:  rgba(37, 99, 235, 0.07);
  --sb-item:        #33456b;
  --sb-item-icon:   #7d92bb;
  --sb-item-hover-bg:   rgba(37, 99, 235, 0.09);
  --sb-item-hover-text: #12224a;
  --sb-active-from: #3b7bf7;
  --sb-active-to:   #2457dc;
  --sb-active-text: #ffffff;
  --sb-active-shadow: 0 6px 16px -6px rgba(36, 87, 220, 0.55);
  --sb-divider:     rgba(37, 99, 235, 0.12);
  --sb-chip-bg:     rgba(37, 99, 235, 0.10);
  --sb-scroll:      rgba(37, 99, 235, 0.22);
}

/* ───────────────────────── палитра: тёмная (тёмно-синяя) ───────────────────────── */
html.dark, body.dark, [data-theme="dark"],
html.dark aside:has(nav.scrollbar-auto-hide),
body.dark aside:has(nav.scrollbar-auto-hide),
[data-theme="dark"] aside:has(nav.scrollbar-auto-hide) {
  --sb-bg-top:      #070d1e;
  --sb-bg-bottom:   #0b1631;
  --sb-border:      rgba(120, 160, 235, 0.16);
  --sb-sec-bg:      rgba(140, 180, 255, 0.05);
  --sb-sec-br:      rgba(120, 160, 235, 0.14);
  --sb-sec-bg-on:   rgba(47, 123, 255, 0.14);
  --sb-sec-br-on:   rgba(93, 143, 255, 0.38);
  --sb-sec-shadow:  none;
  --sb-head:        #c7d6f0;
  --sb-head-on:     #4d8cff;
  --sb-head-hover:  rgba(93, 143, 255, 0.12);
  --sb-item:        #b9c8e4;
  --sb-item-icon:   #7f97c4;
  --sb-item-hover-bg:   rgba(93, 143, 255, 0.14);
  --sb-item-hover-text: #ffffff;
  --sb-active-from: #2f7bff;
  --sb-active-to:   #1f5ce0;
  --sb-active-text: #ffffff;
  --sb-active-shadow: 0 8px 20px -8px rgba(47, 123, 255, 0.75);
  --sb-divider:     rgba(120, 160, 235, 0.14);
  --sb-chip-bg:     rgba(93, 143, 255, 0.14);
  --sb-scroll:      rgba(120, 160, 235, 0.28);
}

/* ───────────────────────── полотно меню ───────────────────────── */
aside:has(nav.scrollbar-auto-hide) {
  background: linear-gradient(180deg, var(--sb-bg-top) 0%, var(--sb-bg-bottom) 100%) !important;
  border-right: 1px solid var(--sb-border) !important;
}
aside:has(nav.scrollbar-auto-hide) nav.scrollbar-auto-hide {
  padding-left: 10px;
  padding-right: 10px;
  scrollbar-color: var(--sb-scroll) transparent;
}
aside:has(nav.scrollbar-auto-hide) nav.scrollbar-auto-hide::-webkit-scrollbar { width: 8px; }
aside:has(nav.scrollbar-auto-hide) nav.scrollbar-auto-hide::-webkit-scrollbar-thumb {
  background: var(--sb-scroll); border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}

/* Логотип-баннер отделяем линией — как на референсе. */
aside:has(nav.scrollbar-auto-hide) #orq-brand-banner {
  border-bottom: 1px solid var(--sb-divider);
}


/* Обёртки секций приходят с платформенным space-y-* — между кнопками копилось
   по десятку лишних пикселей. Обнуляем отступы именно у контейнеров, внутри
   которых лежит заголовок секции: верхние пункты меню это не задевает. */
nav.scrollbar-auto-hide > *:has(> .group\/sidebar-section) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* ───────────────────────── заголовки секций ───────────────────────── */
/* Отступы заголовка ужаты до 8px: при штатной ширине сайдбара (256–264px) самый
   длинный пункт «ЗАКУПКИ И ЛОГИСТИКА» должен помещаться в строку целиком. */
nav.scrollbar-auto-hide .group\/sidebar-section {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  padding: 0.4rem 0.44rem !important;
  border-radius: 10px !important;
  background: var(--sb-sec-bg);
  border: 1px solid var(--sb-sec-br);
  box-shadow: var(--sb-sec-shadow);
  transition: background-color .15s ease, border-color .15s ease;
}
/* раскрытая секция читается как нажатая кнопка */
nav.scrollbar-auto-hide .group\/sidebar-section.orq-open {
  background: var(--sb-sec-bg-on);
  border-color: var(--sb-sec-br-on);
}
nav.scrollbar-auto-hide .group\/sidebar-section > div {
  gap: 0.3rem !important;
}
/* иконка раздела слева (ставит sidebar-sections.js) */
nav.scrollbar-auto-hide .orq-sec-ico {
  flex: 0 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sb-head);
}
nav.scrollbar-auto-hide .group\/sidebar-section .orq-sec-ico svg {
  width: 16px !important; height: 16px !important; stroke-width: 1.8 !important;
}
nav.scrollbar-auto-hide .group\/sidebar-section.orq-open .orq-sec-ico { color: var(--sb-head-on); }
/* счётчик пунктов справа (ставит sidebar-sections.js) */
nav.scrollbar-auto-hide .orq-count {
  flex: 0 0 auto;
  min-width: 17px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--sb-chip-bg);
  color: var(--sb-head);
  font-size: 9.6px; font-weight: 800; line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
nav.scrollbar-auto-hide .group\/sidebar-section.orq-open .orq-count {
  background: var(--sb-active-from);
  color: #fff;
}
nav.scrollbar-auto-hide .orq-chev { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; }
nav.scrollbar-auto-hide .orq-chev svg { width: 14px !important; height: 14px !important; }
nav.scrollbar-auto-hide .group\/sidebar-section.orq-managed:not(.orq-open):hover {
  background: var(--sb-head-hover) !important;
  border-color: var(--sb-sec-br-on);
}
nav.scrollbar-auto-hide .group\/sidebar-section.orq-open:hover { border-color: var(--sb-active-from); }
nav.scrollbar-auto-hide .orq-sec,
nav.scrollbar-auto-hide .group\/sidebar-section .uppercase {
  /* 10px: в строке заголовка теперь ещё иконка (16px) и счётчик (~21px), поэтому
     кегль пришлось снизить — замером проверено, что «ЗАКУПКИ И ЛОГИСТИКА»
     помещается целиком при ширине сайдбара 256 и 264px. */
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.015em !important;
  color: var(--sb-head) !important;
}
nav.scrollbar-auto-hide .group\/sidebar-section.orq-open .orq-sec,
nav.scrollbar-auto-hide .group\/sidebar-section.orq-open .uppercase {
  color: var(--sb-head-on) !important;
}
/* Иконка секции — контурная, крупнее пунктовой, в цвет подписи. */
nav.scrollbar-auto-hide .group\/sidebar-section svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.9 !important;
  color: var(--sb-head);
}
nav.scrollbar-auto-hide .group\/sidebar-section.orq-open svg { color: var(--sb-head-on); }

/* Шеврон справа — в цвет заголовка, без «пятна» на ховере. */
nav.scrollbar-auto-hide .orq-chev { color: var(--sb-head) !important; opacity: 0.75; }
nav.scrollbar-auto-hide .group\/sidebar-section.orq-open .orq-chev { color: var(--sb-head-on) !important; opacity: 1; }
nav.scrollbar-auto-hide .group\/sidebar-section:hover .orq-chev { background: transparent !important; opacity: 1; }

/* ───────────────────────── пункты ───────────────────────── */
nav.scrollbar-auto-hide a.orq-item {
  font-size: 13px !important;
  font-weight: 500 !important;
  /* иконка пункта встаёт ровно под иконку заголовка: 8 + 17 + 9 = 8 + 18 + 8 */
  gap: 0.56rem !important;
  padding: 0.36rem 0.5rem !important;
  margin: 0 !important;
  border-radius: 9px !important;
  color: var(--sb-item) !important;
  transition: background-color .15s ease, color .15s ease;
}
nav.scrollbar-auto-hide a.orq-item svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.9 !important;
  color: var(--sb-item-icon);
  transition: color .15s ease;
}
nav.scrollbar-auto-hide a.orq-item > span.shrink-0,
nav.scrollbar-auto-hide a.orq-item > span:first-child { flex: 0 0 17px !important; }

nav.scrollbar-auto-hide a.orq-item:hover {
  background-color: var(--sb-item-hover-bg) !important;
  color: var(--sb-item-hover-text) !important;
}
nav.scrollbar-auto-hide a.orq-item:hover svg { color: var(--sb-item-hover-text); }

/* Активный пункт — сплошная синяя пилюля во всю ширину (как на референсе). */
nav.scrollbar-auto-hide a.orq-item.orq-active,
nav.scrollbar-auto-hide a.orq-item.orq-active:hover {
  background: linear-gradient(135deg, var(--sb-active-from), var(--sb-active-to)) !important;
  color: var(--sb-active-text) !important;
  box-shadow: var(--sb-active-shadow);
}
nav.scrollbar-auto-hide a.orq-item.orq-active svg { color: var(--sb-active-text); }

/* «Голые» подписи внутри групп — тем же ритмом. */
nav.scrollbar-auto-hide .orq-ghost {
  font-size: 13px !important;
  color: var(--sb-item-icon) !important;
  padding: 0.44rem 0.5rem 0.44rem calc(0.5rem + 17px + 0.56rem) !important;
}

/* Фокус с клавиатуры — видимое кольцо в обеих палитрах. */
nav.scrollbar-auto-hide a.orq-item:focus-visible,
nav.scrollbar-auto-hide .group\/sidebar-section:focus-visible {
  outline: 2px solid var(--sb-active-from);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  nav.scrollbar-auto-hide a.orq-item,
  nav.scrollbar-auto-hide .orq-chev,
  nav.scrollbar-auto-hide .group\/sidebar-section { transition: none !important; }
}


/* ───────────────────────── вложенные пункты секции ─────────────────────────
   Пункты внутри раскрытой секции — без собственных иконок: раньше их значки стояли
   в одной вертикали со значками секций, и раскрытый раздел сливался с общим списком.
   Теперь вложенность читается тремя вещами: сдвиг вправо, направляющая линия от
   заголовка секции и точка-маркер. Классы .orq-secbody / .orq-subitem ставит
   sidebar-sections.js; пункты верхнего уровня («Дашборд», «Входящие») не трогаем. */
/* У свёрнутой секции тело нулевой высоты, но его поля продолжали держать 6px воздуха
   между кнопками — гасим их, иначе карточки не сходятся вплотную. */
nav.scrollbar-auto-hide .group\/sidebar-section:not(.orq-open) + .orq-secbody {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
nav.scrollbar-auto-hide .orq-secbody {
  position: relative;
  margin: 2px 0 4px 15px;
  padding-left: 10px;
  border-left: 1.5px solid var(--sb-sec-br-on);
}
nav.scrollbar-auto-hide a.orq-item.orq-subitem > span.shrink-0,
nav.scrollbar-auto-hide a.orq-item.orq-subitem > span:first-child { display: none !important; }
nav.scrollbar-auto-hide a.orq-item.orq-subitem {
  /* !important обязателен: main-sidebar-polish.css жёстко ставит пунктам position:static
     (лечит съезд инжектированных клонов). Без него ::before-маркер считает точкой
     отсчёта тело секции, и все точки схлопываются в одну по центру списка. */
  position: relative !important;
  gap: 0 !important;
  padding-left: 14px !important;
  font-size: 12.5px !important;
}
/* точка-маркер на направляющей */
nav.scrollbar-auto-hide a.orq-item.orq-subitem::before {
  content: "";
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sb-item-icon);
  transition: background-color .15s ease, transform .15s ease;
}
nav.scrollbar-auto-hide a.orq-item.orq-subitem:hover::before { background: var(--sb-head-on); }
nav.scrollbar-auto-hide a.orq-item.orq-subitem.orq-active::before {
  background: #fff;
  transform: translateY(-50%) scale(1.35);
}
/* «голые» подписи внутри секции выравниваем по тем же пунктам */
nav.scrollbar-auto-hide .orq-secbody .orq-ghost {
  padding-left: 14px !important;
}

/* ═════════════════════════ МОБИЛЬНЫЙ ШЕЛЛ ═════════════════════════
   mobile-shell.js строит свой верхний бар, нижние табы, шторку-меню и bottom-sheet
   на штатных токенах платформы (нейтрально-серых). Здесь они переводятся на ту же
   синюю палитру, что и десктопное меню, — обе версии (светлая и тёмная) берутся из
   тех же переменных --sb-*. Геометрию, высоты баров и поведение не трогаем: это
   зона mobile-shell.css, ломать её нельзя.

   Палитру дублируем на :root, потому что бары живут ВНЕ <aside>, где она объявлена. */

:root {
  --sbm-bg:        #fbfdff;
  --sbm-border:    #e2ebfa;
  --sbm-fg:        #24365c;
  --sbm-muted:     #7d92bb;
  --sbm-accent:    #2457dc;
  --sbm-accent-bg: rgba(37, 99, 235, 0.10);
  --sbm-scrim:     rgba(12, 26, 56, 0.45);
}
html.dark, body.dark, [data-theme="dark"] {
  --sbm-bg:        #0a1226;
  --sbm-border:    rgba(120, 160, 235, 0.18);
  --sbm-fg:        #dbe6fb;
  --sbm-muted:     #7f97c4;
  --sbm-accent:    #4d8cff;
  --sbm-accent-bg: rgba(93, 143, 255, 0.16);
  --sbm-scrim:     rgba(2, 8, 22, 0.62);
}

@media (max-width: 768px) {
  /* верхний бар */
  html.orq-m .orq-m-topbar {
    background: color-mix(in oklab, var(--sbm-bg) 92%, transparent) !important;
    border-bottom: 1px solid var(--sbm-border) !important;
  }
  html.orq-m .orq-m-topbar .orq-m-btn { color: var(--sbm-fg) !important; }
  html.orq-m .orq-m-topbar .orq-m-btn:active { background: var(--sbm-accent-bg) !important; }
  html.orq-m .orq-m-topbar .orq-m-title { color: var(--sbm-fg) !important; }

  /* нижние табы: активный — синий, с подсветкой-пилюлей */
  html.orq-m .orq-m-bottombar {
    background: color-mix(in oklab, var(--sbm-bg) 94%, transparent) !important;
    border-top: 1px solid var(--sbm-border) !important;
  }
  html.orq-m .orq-m-bottombar .orq-m-tab { color: var(--sbm-muted) !important; }
  html.orq-m .orq-m-bottombar .orq-m-tab.orq-m-active { color: var(--sbm-accent) !important; }
  html.orq-m .orq-m-bottombar .orq-m-tab.orq-m-active svg { color: var(--sbm-accent) !important; }
  html.orq-m .orq-m-bottombar .orq-m-tab.orq-m-active::before {
    content: ""; position: absolute; margin-top: -30px;
    width: 26px; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--sbm-accent);
  }
  html.orq-m .orq-m-bottombar .orq-m-tab { position: relative; }

  /* шторка-меню: тень справа, чтобы отделялась от затемнения */
  html.orq-m aside.orq-m-drawer { box-shadow: 6px 0 28px -10px rgba(10, 25, 60, 0.45); }
  html.orq-m .orq-m-scrim { background: var(--sbm-scrim) !important; }

  /* bottom-sheet раскрытия секции */
  html.orq-m .orq-m-sheet {
    background: var(--sbm-bg) !important;
    border-top: 1px solid var(--sbm-border) !important;
  }
  html.orq-m .orq-m-sheet .orq-m-sheet-grab { background: var(--sbm-muted) !important; opacity: .6; }
  html.orq-m .orq-m-sheet .orq-m-sheet-title { color: var(--sbm-accent) !important; letter-spacing: .05em; }
  html.orq-m .orq-m-sheet .orq-m-sheet-item { color: var(--sbm-fg) !important; }
  html.orq-m .orq-m-sheet .orq-m-sheet-item svg { color: var(--sbm-muted) !important; }
  html.orq-m .orq-m-sheet .orq-m-sheet-item:active,
  html.orq-m .orq-m-sheet .orq-m-sheet-item.orq-m-active {
    background: linear-gradient(135deg, var(--sb-active-from, #3b7bf7), var(--sb-active-to, #2457dc)) !important;
    color: #fff !important;
  }
  html.orq-m .orq-m-sheet .orq-m-sheet-item.orq-m-active svg { color: #fff !important; }

  /* на телефоне секции-кнопки чуть просторнее под палец */
  html.orq-m nav.scrollbar-auto-hide .group\/sidebar-section { padding: 0.52rem 0.5rem !important; }
  html.orq-m nav.scrollbar-auto-hide a.orq-item { padding: 0.46rem 0.5rem !important; font-size: 13.5px !important; }
}

/* Утёнок не должен закрывать шторку меню и лист-выбор на телефоне. */
html.orq-m.orq-m-drawer-open #orq-duck,
html.orq-m.orq-m-sheet-open #orq-duck { opacity: 0; pointer-events: none; transition: opacity .18s ease; }
