/* LogiRates, меню кабинета в дизайне dashboard2610 (T-026): левое меню (CabinetSideNav2610.vue),
   нижний док и шторка More (CabinetDock2610.vue), каркас кабинета Main1Layout (.dash-shell--2610)
   и лейаута Main2Layout2610 (.cab2610, T-035: Dashboard, Shipments, Bulk — блок в конце файла).
   Классы и значения — из пакета dashboard2610 1:1 (html/dashboard2610.css пакета, блоки «Каркас», «Меню кабинета»,
   «Нижний док и шторка More», брейкпоинты 1199/980px). Отличия от пакета отмечены комментариями «T-026».
   Переменные и сброс — на собственном корне .cm2610 (aside.db-side, обёртка дока), не на .db: в контент не протекают.
   Глобально — только html.db-lock, отступ body под док (≤980px) и keyframes.
   Подключается в resources/views/layouts/inertia.blade.php сразу после styles.css (без мигания при загрузке). */

/* ===== Корень меню: токены и сброс (в пакете — на .db) ===== */
.cm2610 {
  color: var(--ink); font-family: Manrope, "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
.cm2610 *, .cm2610 ::before, .cm2610 ::after { box-sizing: border-box; }
.cm2610 :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.cm2610 svg:not(.ico) { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cm2610 :where(button) { font: inherit; color: inherit; }
.cm2610 :where(a) { color: inherit; text-decoration: none; }
.cm2610 :where(button, input, a):focus { outline: none; }
.cm2610 :where(button, a):focus-visible, .db-sheet :where(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Каркас Main1Layout: как .db-shell + .bw пакета. Классы dash-main / shell dash-shell сохранены,
   модификаторы перекрывают styles.css (.dash-main, .dash-shell, .shell, страничные .page--* .dash-main) ===== */
main.dash-main.dash-main--2610 { padding: 32px 0 96px; }
.shell.dash-shell.dash-shell--2610 { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; gap: 32px; width: 1198px; max-width: calc(100% - 48px); margin: 0 auto; padding: 0; }
/* T-026: в сетке ровно два ребёнка — меню (слот sidebar) и .dash-shell__main, обёртка всего слота страницы
   (страницы кладут туда несколько корней: контент + диалоги). Одна строка: sticky меню живёт на всю высоту контента.
   Обёртка — block: прямые дети (.dash-content, .shipment-card, .page-wrap) занимают всю ширину,
   их flex: 1 1 auto из styles.css вне flex-контейнера не действует — ширина та же, что была у flex-колонки. */
.dash-shell--2610 > :first-child { grid-column: 1; grid-row: 1; }
.dash-shell--2610 > .dash-shell__main { grid-column: 2; grid-row: 1; min-width: 0; }

/* ===== Меню кабинета. Подсветка (pill) стоит на открытой странице и едет за курсором ===== */
/* T-026: top 24px вместо 96px пакета — наша шапка не липкая */
.db-side { position: sticky; top: 24px; z-index: 2; }
.db-nav { position: relative; display: flex; flex-direction: column; padding: 10px; border-radius: 22px; background: rgba(255, 255, 255, .94); box-shadow: var(--card); }
.db-nav ul { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.db-nav__bottom { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid var(--line); }
.db-nav__pill { position: absolute; z-index: 0; left: 10px; right: 10px; top: 0; height: 46px; border-radius: 13px; background: var(--warm); box-shadow: inset 0 0 0 1px rgba(234, 163, 10, .3); opacity: 0; transform: translateY(var(--y, 10px)); transition: transform .4s var(--ease), opacity .25s, background-color .25s; pointer-events: none; }
.db-nav.has-pill .db-nav__pill { opacity: 1; }
.db-nav.is-hover .db-nav__pill { background: #fbf6ee; box-shadow: none; }
.db-nav__link { position: relative; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px; border-radius: 13px; color: var(--slate) !important; font-size: 15px; font-weight: 700; white-space: nowrap; transition: color .2s; }
.db-nav:not(.has-pill) .db-nav__link.is-on { background: var(--warm); }
.db-nav__ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: var(--muted); transition: color .2s, background-color .2s, box-shadow .2s; }
.db-nav__link:hover { color: var(--ink) !important; }
.db-nav__link:hover .db-nav__ico { color: var(--accent-d); }
.db-nav__link.is-on { color: var(--ink) !important; }
.db-nav__link.is-on .db-nav__ico, .db-dock__link.is-on .db-nav__ico { background: var(--grad); color: #fff; box-shadow: 0 5px 12px rgba(234, 163, 10, .3); }
.db-nav__txt { overflow: hidden; text-overflow: ellipsis; }
.db-nav__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: auto; padding: 0 7px; border-radius: 11px; background: linear-gradient(135deg, #ff8a5c, var(--pink)); color: #fff; font-size: 12px; font-weight: 800; font-style: normal; }
.motion .db-nav__badge { animation: db-pulse 2.2s ease-out 1s infinite; }
@keyframes db-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 139, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 107, 139, 0); } }

/* Появление меню. T-026: только при первой загрузке кабинета (.is-rise), а не на каждом переходе Inertia.
   db-rise совпадает с одноимённым keyframes в dashboard2610.css проекта 1:1 */
.db-side.motion.is-rise { animation: db-rise .8s var(--ease) both; }
@keyframes db-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ===== Нижний док и шторка More (до 980px) ===== */
.db-dock { display: none; }
.db-sheet { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #fff; color: var(--ink); box-shadow: 0 -20px 60px rgba(26, 31, 51, .25); font-family: inherit; }
.db-sheet::backdrop { background: rgba(26, 26, 26, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.db-sheet[open] { animation: db-up .4s var(--ease); }
@keyframes db-up { from { translate: 0 100%; } }
.db-sheet__box { padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); }
.db-sheet__head { position: relative; display: flex; justify-content: flex-end; height: 40px; }
.db-sheet__grip { position: absolute; left: 50%; top: 2px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #dfe1e7; }
.db-sheet__x { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--soft-bg); cursor: pointer; }
.db-sheet__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.db-sheet__link { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 12px; border-radius: 15px; color: var(--ink); font-size: 17px; font-weight: 700; text-decoration: none; }
.db-sheet__link:hover { background: #fff6e6; }
.db-sheet .db-nav__txt { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.db-sheet .db-nav__badge { position: static; min-width: 22px; height: 22px; padding: 0 7px; font-size: 12px; }
.db-sheet__link .db-nav__ico { width: 36px; height: 36px; background: var(--soft-bg); color: var(--accent-d); }
/* T-026: в пакете в шторке нет текущей страницы — подсветка как у .db-nav__link.is-on (те же значения) */
.db-sheet__link.is-on { background: var(--warm); }
.db-sheet__link.is-on .db-nav__ico { background: var(--grad); color: #fff; box-shadow: 0 5px 12px rgba(234, 163, 10, .3); }
/* T-026: Account и Sign out — отдельный блок, разделитель как у .db-nav__bottom */
.db-sheet__list--account { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Sign out — <button> (Inertia Link as="button", POST): выглядит как ссылка шторки */
.db-sheet button.db-sheet__link { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.db-sheet button.db-sheet__link:hover { background: #fff6e6; }
.motion .db-sheet[open] .db-sheet__list li { animation: db-in .4s var(--ease) both; }
.motion .db-sheet[open] .db-sheet__list li:nth-child(2) { animation-delay: .04s; }
.motion .db-sheet[open] .db-sheet__list li:nth-child(3) { animation-delay: .08s; }
.motion .db-sheet[open] .db-sheet__list li:nth-child(4) { animation-delay: .12s; }
.motion .db-sheet[open] .db-sheet__list li:nth-child(5) { animation-delay: .16s; }
/* db-in совпадает с одноимённым keyframes в dashboard2610.css проекта 1:1 */
@keyframes db-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
html.db-lock { overflow: hidden; }

/* ===== Узкий десктоп (981 to 1199px): меню — колонка иконок ===== */
@media (max-width: 1199px) {
  .shell.dash-shell.dash-shell--2610 { grid-template-columns: 72px minmax(0, 1fr); gap: 24px; }
  .db-nav { padding: 10px 10px; }
  .db-nav__link { justify-content: center; gap: 0; padding: 0; }
  .db-nav__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .db-nav__badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
}

/* ===== Телефон и планшет: меню внизу экрана ===== */
@media (max-width: 980px) {
  .shell.dash-shell.dash-shell--2610 { display: block; max-width: calc(100% - 32px); }
  main.dash-main.dash-main--2610 { padding: 22px 0 56px; }
  .db-side { display: none; }

  /* T-026: число колонок задаёт компонент (inline style) — по числу видимых кнопок; здесь — 5, как в пакете */
  .db-dock { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 -1px 0 var(--line), 0 -10px 30px rgba(26, 31, 51, .06); }
  .db-dock__link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px; padding: 0; border: 0; border-radius: 14px; background: none; color: var(--muted) !important; font-size: 11.5px; font-weight: 700; cursor: pointer; }
  .db-dock__link .db-nav__ico { width: 34px; height: 30px; }
  .db-dock__link.is-on { color: var(--ink) !important; }
  .db-dock__link .db-nav__txt { position: static; width: auto; height: auto; max-width: 100%; overflow: hidden; clip-path: none; white-space: nowrap; text-overflow: ellipsis; }
  .db-dock__link:active { background: var(--soft-bg); }
  .db-nav__dot { position: absolute; top: 6px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px #fff; }
  html:has(.db-dock) body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  /* VT-FIX-11: прокрутка к элементу и фокус с клавиатуры не прячут его под доком (последняя Book на /parcel/send) */
  html:has(.db-dock) { scroll-padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* T-026: место под док уже держит body (см. выше) — снимаем отступ styles.css под старый MobileBottomNav
   у обёртки лейаута без .dash-main (ParcelStepsLayout: .has-mobile-nav — 84px) и у main Main1Layout
   (.has-mobile-nav .dash-main — 84px + safe-area), чтобы не было двойного отступа:
   main даёт 56px воздуха, как в пакете, body — 68px + safe-area под сам док. */
@media (max-width: 768px) {
  .has-mobile-nav:has(.db-dock) { padding-bottom: 0; }
  .has-mobile-nav main.dash-main.dash-main--2610 { padding-bottom: 56px; }
}

/* ===== T-035: каркас лейаута Main2Layout2610 (main.cab2610 > img.cab2610__ribbon + .cab2610__shell > меню + .cab2610__body).
   В пакете: .db (белый фон, relative, overflow-x: clip) > img.lr-ribbon.db-ribbon + .bw.db-shell > aside.db-side + .db-body.
   Классы свои — CSS страниц (dashboard2610.css и др.) стилизует .db/.bw/.db-body и сбрасывает img/h1/p.
   Значения 1:1 из html/dashboard2610.css пакета (.db, .db .bw, .db-shell, .db-body, лента, брейкпоинты 1199/980). ===== */
/* Белая страница, как page--white образца: класс на body ставит лейаут (useCabinetPageMeta, extraBodyClass) */
body.page--cab2610 { background: #fff; }
/* Лента уходит вверх под шапку: шапки и строка поиска тарифа — над ней (в образце .page--white .topbar { z-index: 5 }).
   Шапки — в CabinetTopbar (.cab-topbar > .topbar, z-index 6: выпадашки шапки поверх строки поиска), строка поиска — здесь */
.cab2610-root > .tariff-context { position: relative; z-index: 5; }
/* Короткая страница: лента (absolute, z-index 0) не должна ложиться поверх подвала */
.cab2610-root > .site-footer { position: relative; z-index: 1; }
/* overflow-x: clip, а не hidden — иначе не работает sticky меню. Без z-index: окна страниц (fixed внутри слота)
   не должны попадать в контекст наложения каркаса */
main.cab2610 { position: relative; overflow-x: clip; background: #fff; }
main.cab2610 > img.cab2610__ribbon { position: absolute; z-index: 0; right: -470px; top: -330px; display: block; width: 1500px; max-width: none; height: auto; mix-blend-mode: multiply; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); }
.cab2610__shell { position: relative; display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; gap: 32px; box-sizing: border-box; width: 1198px; max-width: calc(100% - 48px); margin: 0 auto; padding: 32px 0 96px; }
/* В сетке ровно два ребёнка: меню (слот sidebar) и .cab2610__body (весь слот страницы, включая диалоги) — одна строка */
.cab2610__shell > :first-child { grid-column: 1; grid-row: 1; }
.cab2610__shell > .cab2610__body { grid-column: 2; grid-row: 1; position: relative; min-width: 0; }

@media (max-width: 1199px) {
  .cab2610__shell { grid-template-columns: 72px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 980px) {
  main.cab2610 > img.cab2610__ribbon { width: 680px; right: -225px; top: -60px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 65%, transparent 95%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 65%, transparent 95%); }
  .cab2610__shell { display: block; max-width: calc(100% - 32px); padding: 22px 0 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm2610, .cm2610 *, .cm2610 ::before, .cm2610 ::after, .db-sheet::backdrop { animation: none !important; transition: none !important; }
}