/* Доска виджетов, панель деталей и командная строка.

   Три механизма, которых раньше не было:

     .board   — Обзор, собираемый пользователем: состав, порядок и размер;
     .panel   — детали записи сбоку, вместо карточки под таблицей;
     .palette — переход куда угодно по Ctrl+K.
*/

/* ── Доска виджетов ───────────────────────────────────────────────────── */

.board {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Ширина меряется колонками, поэтому карточки всегда встают в сетку
   и между ними не остаётся дыр. dense подтягивает мелкие виджеты
   в пустые места ряда. */
.board__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--space-4);
  align-items: start;
}

.board__empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-2);
}

.wg {
  position: relative;
  grid-column: span var(--wg-cols, 4);
  height: var(--wg-h, 320px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  container-type: inline-size;
  container-name: wg;
  transition: box-shadow var(--transition-base), border-color var(--transition-base),
              opacity var(--transition-fast);
}

.wg:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-2);
}

.wg.is-dragging {
  opacity: 0.45;
  box-shadow: var(--shadow-3);
  border-color: var(--accent);
}

.wg.is-resizing {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
  user-select: none;
}

/* Пока что-то перетаскивают, соседи не должны перехватывать указатель
   своими собственными обработчиками */
.board__grid.is-sorting .wg__body { pointer-events: none; }

/* Выделение гасим на всей сетке: указатель уходит за пределы своей
   карточки, и текст начинал выделяться у соседних */
.board__grid.is-sorting { user-select: none; }

/* Шапка — ручка перетаскивания, выделять в ней нечего */
.wg__head { user-select: none; }

.wg__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  cursor: grab;
  touch-action: none; /* иначе жест уходит в прокрутку страницы */
}

.wg__head:active { cursor: grabbing; }

.wg__grip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.wg:hover .wg__grip { opacity: 1; }

.wg__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wg__actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-1);
}

/* Кнопка «убрать» появляется по наведению, но остаётся доступной
   с клавиатуры и всегда видна там, где наведения нет */
.wg__remove {
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.wg:hover .wg__remove,
.wg__remove:focus-visible { opacity: 1; }

@media (hover: none) {
  .wg__remove { opacity: 1; }
  .wg__grip { opacity: 1; }
}

.wg__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-4);
  overflow: auto;
}

.wg__body--flush { padding: 0; }

.wg__footer {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}

/* Внутренняя раскладка реагирует на ширину самой карточки,
   а не окна: она меняется прямо во время ресайза. */
@container wg (max-width: 320px) {
  .wg__body { padding: var(--space-3); }
  .tile-stat-row { grid-template-columns: 1fr; }
}

/* ── Ручки изменения размера ──────────────────────────────────────────── */

.wg__rz {
  position: absolute;
  z-index: 3;
  background: transparent;
  touch-action: none;
}

.wg__rz::after {
  content: "";
  position: absolute;
  background: var(--accent);
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity var(--handle-transition) ease;
}

.wg__rz:hover::after { opacity: 0.8; }

.wg__rz--e {
  top: 14px;
  bottom: 14px;
  right: 0;
  width: 10px;
  cursor: col-resize;
}

.wg__rz--e::after { top: 0; bottom: 0; right: 2px; width: 3px; }

.wg__rz--s {
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 10px;
  cursor: row-resize;
}

.wg__rz--s::after { left: 0; right: 0; bottom: 2px; height: 3px; }

.wg__rz--se {
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
}

.wg__rz--se::after {
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: transparent;
  border: 3px solid var(--accent);
  border-left: none;
  border-top: none;
}

/* ── Каталог виджетов ─────────────────────────────────────────────────── */

.catalogue {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.catalogue__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.catalogue__item:hover {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
}

.catalogue__title {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.catalogue__hint {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* ── Панель деталей ───────────────────────────────────────────────────── */

.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: min(460px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-3);
  transform: translateX(100%);
  transition: transform var(--transition-base) var(--ease-out);
}

.panel.is-open { transform: translateX(0); }

/* На широком экране список остаётся виден и работает — затемнения нет.
   Оно появляется только там, где панель закрывает собой всё. */
.panel__scrim {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--bg-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.panel__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.panel__title {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

.panel__subtitle {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
}

.panel__foot {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}

/* В панели одна колонка: двух там не поместится */
.panel .staff-detail { grid-template-columns: 1fr; gap: var(--space-5); }
.panel .staff-feed { position: static; max-height: 360px; }

@media (max-width: 900px) {
  .panel { width: 100vw; border-left: none; }
  .panel__scrim.is-open { opacity: 1; visibility: visible; }
}

/* ── Командная строка ─────────────────────────────────────────────────── */

.palette__backdrop {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(var(--space-5), 12vh, 140px) var(--space-4) var(--space-4);
  background: var(--bg-overlay);
  backdrop-filter: blur(2px);
  animation: fade-in var(--transition-fast) ease;
}

.palette {
  width: min(620px, 100%);
  max-height: min(560px, 70vh);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: modal-in var(--transition-base) var(--ease-out);
}

.palette__field {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.palette__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fs-body);
  outline: none;
}

.palette__input::placeholder { color: var(--text-muted); }

.palette__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2);
  scrollbar-width: thin;
}

.palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.palette__item.is-active { background: var(--accent-weak); }

.palette__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: var(--bg-inset);
  color: var(--text-secondary);
}

.palette__item.is-active .palette__icon {
  background: var(--accent);
  color: var(--on-accent);
}

.palette__title {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.palette__hint-text {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette__kind {
  flex: 0 0 auto;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.palette__empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
}

.palette__hint {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* ── Доска на узком экране ────────────────────────────────────────────── */
/* Одна колонка, высота по содержимому, перетаскивание и ресайз отключены:
   на телефоне раскладку всё равно не настраивают. */

@media (max-width: 900px) {
  /* align-items: start достался от сетки — во flex-колонке он оставлял
     карточкам нулевую ширину */
  .board__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .wg {
    height: auto !important;
    grid-column: auto;
  }

  .wg__head { cursor: default; }
  .wg__grip { display: none; }
  .wg__rz { display: none; }
}

@media (max-width: 720px) {
  .palette__backdrop { padding: 0; }
  .palette {
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
  }
  .palette__item { min-height: var(--tap-min); }
}