/* cest-admin — тонкий слой поверх Bootstrap 5.
   Здесь только то, чего нет в Bootstrap: каркас сайдбара, топбар,
   переключатель темы и дерево категорий. Компоненты (кнопки, карточки,
   таблицы, бейджи, формы) берём из Bootstrap. */

/* ---------- Каркас: сайдбар + контент ---------- */
.admin-layout { min-height: 100dvh; }

.sidebar { --bs-offcanvas-width: 280px; }

.sidebar-brand {
  display: flex;
  padding: 1rem 1.25rem;
  font-size: 1.15rem;
  color: var(--bs-emphasis-color);
  text-decoration: none;
  border-bottom: 1px solid var(--bs-border-color);
}

.sidebar .nav-link {
  color: var(--bs-body-color);
  padding: .5rem .75rem;
}
/* Ховер заметен на tertiary-фоне сайдбара (secondary-bg отличается в обеих темах);
   активный пункт при ховере не теряет белый текст — лишь слегка темнеет. */
.sidebar .nav-link:not(.active):hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
}
.sidebar .nav-link.active:hover {
  background-color: color-mix(in srgb, var(--bs-primary) 90%, #000);
}
.sidebar .nav-link i { width: 1.25rem; text-align: center; font-size: 1.05rem; }

@media (min-width: 992px) {
  .admin-layout { display: flex; align-items: stretch; }
  .sidebar {
    flex: 0 0 260px;
    width: 260px;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
  }
  .main-area { flex: 1 1 auto; min-width: 0; }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  min-height: 56px;
}

/* ---------- Переключатель темы ---------- */
.theme-icon-dark { display: none; }
[data-bs-theme="dark"] .theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-icon-dark { display: inline-block; }

/* ---------- Дерево категорий ----------
   Классы .node / .dragover / #drop-root / data-id используются
   category_tree.js — не переименовывать. */
.tree, .tree ul { list-style: none; margin: 0; padding-left: 1.25rem; }
.tree > li { padding-left: 0; }
.tree li { margin: .15rem 0; }

.tree .node {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid transparent;
  transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out, opacity .15s ease-in-out;
}
.tree .node:hover { background-color: var(--bs-tertiary-bg); }
.tree .node[draggable="true"] { cursor: grab; }
.tree .node.is-dragging { opacity: .45; cursor: grabbing; }
.tree .node.is-target {
  background-color: var(--bs-primary-bg-subtle);
  box-shadow: inset 0 0 0 2px var(--bs-primary);
}
.tree .node-name { font-weight: 500; }
.tree .node-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}

/* Зона «в корень»: скрыта; плавно появляется сверху во время перетаскивания. */
#drop-root {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  max-height: 0;
  margin-bottom: 0;
  padding: 0 .75rem;
  border: 1px dashed transparent;
  border-radius: var(--bs-border-radius);
  color: var(--bs-primary);
  font-weight: 500;
  opacity: 0;
  overflow: hidden;
  transition: max-height .18s ease-out, opacity .18s ease-out,
              margin .18s ease-out, padding .18s ease-out,
              background-color .15s ease-in-out, color .15s ease-in-out;
}
body.tree-dragging #drop-root {
  max-height: 4rem;
  margin-bottom: .75rem;
  padding: .75rem;
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
  opacity: 1;
}
body.tree-dragging #drop-root.is-target {
  background-color: var(--bs-primary);
  border-style: solid;
  color: #fff;
}

/* Bootstrap ставит flex: 1 1 auto на .modal-body, но без min-height: 0 flex-элемент
   не сжимается ниже высоты контента — overflow-y: auto не срабатывает при ошибках формы. */
.modal-dialog-scrollable .modal-body { min-height: 0; }

/* Наследованные атрибуты — приглушённый вид */
.attr-inherited td { color: var(--bs-secondary-color); }

@media (prefers-reduced-motion: reduce) {
  .tree .node,
  #drop-root { transition: none; }
}