/* === sidebar lock fix (20251101_230141) ===
   Левое меню фиксируем, чтобы не прокручивалось вместе со страницей
   и не появлялась пустая полоса сверху. Контент сдвигаем вправо.
*/
:root {
  --sidebar-w: 256px;
}
@media (min-width: 901px){
  /* фиксируем сам сайдбар */
  .sidebar, .app-sidebar, #sidebar, .layout-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-w) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain; /* без прокидывания скролла вверх/вниз */
    -webkit-overflow-scrolling: touch;
    z-index: 100; /* поверх фона */
    background: var(--panel-bg, #0c1218) !important; /* заполнить фон */
  }

  /* основная область сдвигается вправо на ширину сайдбара */
  .main, .app-main, .content, #content, .layout-content, .page, .page-wrap {
    margin-left: var(--sidebar-w) !important;
    min-height: 100vh;
  }

  /* подстраховка: фон слева не должен “просвечивать” даже при reflow */
  body::before {
    content: "";
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--panel-bg, #0c1218);
    z-index: 1; pointer-events: none;
  }
}
@media (max-width: 900px){
  .main, .app-main, .content, #content, .layout-content, .page, .page-wrap {
    margin-left: 0 !important;
  }
  body::before {
    display: none !important;
  }
}

/* чтобы не было горизонтального скролла при фиксированном сайдбаре */
html, body {
  overflow-x: hidden !important;
}

/* для вкладки Orders: левый список заказов — отдельный скролл без “дёрганий” */
.orders-list, .orders__list, #orders-list, [data-orders-list] {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* == active states (20251101_230407) == */
:root {
  --active-cyan: var(--neon-cyan, #00e5ff);
  --active-mag:  var(--neon-magenta, #ff3df3);
  --panel-bg:    var(--panel-bg, #0c1218);
}
/* активный пункт слева (Orders и др.) */
.sidebar a.is-active,
.sidebar .nav a.is-active,
.sidebar .menu a.is-active {
  color: var(--active-cyan) !important;
  background: color-mix(in srgb, var(--active-cyan) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--active-cyan);
  border-radius: 10px;
}
/* выбранный заказ в левом списке */
.orders-list .is-current,
.orders__list .is-current,
#orders-list .is-current,
[data-orders-list] .is-current {
  background: color-mix(in srgb, var(--active-mag) 14%, transparent) !important;
  outline: 1px solid var(--active-mag);
  border-radius: 10px;
}
.orders-list .is-current .tag,
.orders__list .is-current .tag { filter: saturate(1.2) brightness(1.1); }


/* === FIX 2025-11-01: reset таблиц, чтобы поля не съезжали на Products/Categories === */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
thead { display: table-header-group !important; }
tbody { display: table-row-group !important; }
tr    { display: table-row !important; }
th, td{
  display: table-cell !important;
  vertical-align: middle !important;
  gap: 0 !important;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* на всякий — элементы внутри ячеек выравниваем по центру по высоте */
td > input, td > select, td > button, td > a, td > span, td > div {
  vertical-align: middle !important;
  margin: 0;
}



/* === FIX: normalize list tables (Products/Categories/Reviews) === */
/* не затрагиваем Orders-страницу (у неё свои гриды) */
main:not([data-view="orders"]) table,
main:not([data-route="orders"]) table {
  table-layout: auto !important;
}
main:not([data-view="orders"]) thead { display: table-header-group !important; }
main:not([data-view="orders"]) tbody { display: table-row-group !important; }
main:not([data-view="orders"]) tr    { display: table-row !important; }
main:not([data-view="orders"]) th,
main:not([data-view="orders"]) td {
  display: table-cell !important;
  vertical-align: middle !important;
  text-align: left !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  gap: 0 !important;            /* если вдруг td стал flex — обнулить разрывы */
  justify-content: flex-start !important;
  align-items: center !important;
}
/* Контент внутри ячеек не «едет» вправо */
main:not([data-view="orders"]) td > * {
  margin-left: 0 !important;
  translate: 0 !important;
  transform: none !important;
}
/* Поля в таблицах — компактно слева */
main:not([data-view="orders"]) td > input,
main:not([data-view="orders"]) td > select {
  width: auto;
  max-width: 220px;
}
/* Ячейка действий может быть справа */
main:not([data-view="orders"]) td.actions,
main:not([data-view="orders"]) td[data-col="actions"] {
  text-align: right !important;
}



/* === FIX: left align content cards on list pages (not Orders) === */
/* расширяем контейнер и убираем auto-centering */
main:not([data-view="orders"]) .page,
main:not([data-view="orders"]) .page-wrap,
main:not([data-view="orders"]) .content,
main:not([data-view="orders"]) .content-wrap,
main:not([data-view="orders"]) .container,
main:not([data-view="orders"]) .container-fluid,
main:not([data-view="orders"]) .card,
main:not([data-view="orders"]) .panel,
main:not([data-view="orders"]) .section,
main:not([data-view="orders"]) [class*="card"],
main:not([data-view="orders"]) [class*="container"] {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* если обёртка использует flex — прижимаем к левому краю */
main:not([data-view="orders"]) .page-row,
main:not([data-view="orders"]) .row,
main:not([data-view="orders"]) .wrapper,
main:not([data-view="orders"]) .grid {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* небольшой внутренний отступ, чтобы не «липло» к краю */
main:not([data-view="orders"]) .content,
main:not([data-view="orders"]) .card,
main:not([data-view="orders"]) .panel {
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 720px){
  main:not([data-view="orders"]) td > input,
  main:not([data-view="orders"]) td > select,
  main:not([data-view="orders"]) td > textarea {
    width: 100% !important;
    max-width: none !important;
  }
  main:not([data-view="orders"]) th,
  main:not([data-view="orders"]) td {
    white-space: normal !important;
    word-break: break-word;
  }
  main:not([data-view="orders"]) table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
  }
}