/* Плитки дашборда и контекстный ресайз.

   Требование из заметок дословно: зоны по краям и в углах, ручки по
   наведению, ограниченные размеры, стабильное поведение у края окна
   и внутренний layout, который подстраивается под контейнер в реальном
   времени.

   Плитки лежат в потоке с переносом: ресайз задаёт каждой свою ширину,
   соседи перекомпоновываются переносом и никогда не перекрываются. */

.tile-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  /* Внутренний layout реагирует на размер карточки, а не окна */
  container-type: inline-size;
  container-name: tile;
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

/* Под курсором плитка слегка приподнимается — так видно, что она живая
   и ею можно управлять. Сдвига нет: он сбил бы зоны ресайза. */
.tile:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-2);
}

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

.tile__header {
  flex: 0 0 auto; /* шапка не масштабируется при ресайзе */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 50px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.tile__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;
}

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

/* Тело занимает оставшееся место. Фиксированных высот внутри нет —
   иначе после увеличения плитки появляется пустая зона. */
.tile__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-4);
  overflow: auto;
}

.tile__body--flush { padding: 0; }

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

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

.tile__resize {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* сам слой кликов не ловит, только его зоны */
}

.tile__resize > * { pointer-events: auto; }

/* Индикатор края: тонкая рамка, видна при наведении на карточку */
.tile__resize::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--handle-edge-thickness) solid
          rgba(var(--handle-color), var(--handle-edge-opacity));
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity var(--handle-transition) ease;
  pointer-events: none;
}

.tile:hover .tile__resize::after,
.tile.is-resizing .tile__resize::after { opacity: 1; }

/* Зоны. Край — 8px зона попадания, угол — 14px. */

.rz {
  position: absolute;
  background: transparent;
}

.rz::after {
  content: "";
  position: absolute;
  background: rgba(var(--handle-color), var(--handle-tile-opacity));
  opacity: 0;
  transition: opacity var(--handle-transition) ease;
  border-radius: var(--radius-pill);
}

/* Ручка появляется только при наведении на свою границу */
.rz:hover::after,
.rz.is-active::after { opacity: 1; }

/* Горизонтальные края → меняется ширина */
.rz--e, .rz--w {
  top: 16px;
  bottom: 16px;
  width: 8px;
  cursor: ew-resize;
}
.rz--e { right: 0; }
.rz--w { left: 0; }

.rz--e::after, .rz--w::after {
  top: 0;
  bottom: 0;
  width: var(--handle-tile-thickness);
}
.rz--e::after { right: 0; }
.rz--w::after { left: 0; }

/* Вертикальные края → меняется высота */
.rz--n, .rz--s {
  left: 16px;
  right: 16px;
  height: 8px;
  cursor: ns-resize;
}
.rz--n { top: 0; }
.rz--s { bottom: 0; }

.rz--n::after, .rz--s::after {
  left: 0;
  right: 0;
  height: var(--handle-tile-thickness);
}
.rz--n::after { top: 0; }
.rz--s::after { bottom: 0; }

/* Углы → ширина и высота одновременно. Скрыты, пока указатель
   не вошёл в угловую зону. */
.rz--ne, .rz--nw, .rz--se, .rz--sw {
  width: 16px;
  height: 16px;
}

.rz--ne { top: 0; right: 0; cursor: nesw-resize; }
.rz--nw { top: 0; left: 0; cursor: nwse-resize; }
.rz--se { bottom: 0; right: 0; cursor: nwse-resize; }
.rz--sw { bottom: 0; left: 0; cursor: nesw-resize; }

.rz--ne::after, .rz--nw::after, .rz--se::after, .rz--sw::after {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: transparent;
  border: var(--handle-tile-thickness) solid
           rgba(var(--handle-color), 0.78);
}

.rz--ne::after { top: 3px; right: 3px; border-left: none; border-bottom: none; }
.rz--nw::after { top: 3px; left: 3px; border-right: none; border-bottom: none; }
.rz--se::after { bottom: 3px; right: 3px; border-left: none; border-top: none; }
.rz--sw::after { bottom: 3px; left: 3px; border-right: none; border-top: none; }

/* ── Реакция внутреннего layout на размер контейнера ──────────────────── */
/* Это контейнерные запросы, а не медиазапросы: реагируем на ширину самой
   карточки, которая меняется прямо во время ресайза. */

@container tile (max-width: 360px) {
  .tile__body { padding: var(--space-3); }
  .tile__header { padding-left: var(--space-3); }
  .tile-hide-sm { display: none !important; }
  .tile-stat-row { grid-template-columns: 1fr; }
  .tile-stat { border-left: none; padding-left: 0; }
}

@container tile (min-width: 560px) {
  .tile-show-lg { display: revert !important; }
}

.tile-show-lg { display: none !important; }

/* Гибкое содержимое — графики — тянется вместе с карточкой */
.tile-flex-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: var(--space-3);
}

.tile-chart {
  flex: 1 1 auto;
  min-height: 80px;
  width: 100%;
  display: block;
}

/* Строка показателей внутри плитки. Сетка, а не flex: колонки равной
   ширины выстраивают числа в один столбец и их можно сравнивать. */
.tile-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--space-3) var(--space-4);
}

.tile-stat { min-width: 0; }

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

/* Число — главное в показателе, поэтому крупнее подписи и набрано
   моноширинными цифрами, чтобы колонки не плясали */
.tile-stat__value {
  margin-top: var(--space-1);
  font-size: 25px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
}

/* ── Мобильная версия: ресайз отключён, одна колонка ──────────────────── */

@media (max-width: 720px) {
  /* Блочный поток, а не колонка из flex: карточка-флекс-элемент
     растягивается до высоты строки и внутри неё появляется пустота. */
  .tile-grid { display: block; }

  .tile {
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin-bottom: var(--space-4);
  }

  .tile:last-child { margin-bottom: 0; }

  .tile__resize { display: none; }
}