/* ============================================================
   ma-skeleton.css — оверлей-скелетон для AG Grid-страниц.
   Используется: analytics / returns / advertising / pricing / my-expenses.

   ПРИНЦИП ПЕРЕИСПОЛЬЗОВАНИЯ:
   Ячейки-заглушки используют класс .ma-skeleton (base.css) для
   шиммер-анимации — без дублирования анимации и токенов.
   Этот файл добавляет только структуру:
     - .ma-skel-wrap  — абсолютный оверлей поверх grid-wrapper
     - .ma-skel-hdr   — строка-заголовок (имитирует header AG Grid)
     - .ma-skel-row   — строка данных (имитирует row AG Grid)
   prefers-reduced-motion и цвета — унаследованы от base.css.
   Все цвета — через CSS-переменные (theme.css).
   Подключать ПОСЛЕ base.css.
   ============================================================ */

/* ── Оверлей-контейнер ──────────────────────────────────── */

.ma-skel-wrap {
  position: absolute;
  inset: 0;
  /* Поверх грида (AG Grid z-index ≤ 1), под модалками (z-index ≥ 1000) */
  z-index: 2;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Плавное скрытие (JS добавляет .ma-skel-wrap--hidden) */
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.ma-skel-wrap--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Строка-заголовок ───────────────────────────────────── */

.ma-skel-hdr {
  display: flex;
  align-items: center;
  height: 32px;
  min-height: 32px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0 4px;
}

.ma-skel-hdr .ma-skeleton {
  height: 10px;
  flex-shrink: 0;
  margin: 0 8px;
}

/* ── Строки данных ──────────────────────────────────────── */

.ma-skel-row {
  display: flex;
  align-items: center;
  height: 34px;
  min-height: 34px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
}

/* Зебра: чередование фона строк (зеркало AG Grid quartz-темы) */
.ma-skel-row:nth-child(odd)  { background: var(--bg); }
.ma-skel-row:nth-child(even) { background: var(--surface); }

.ma-skel-row .ma-skeleton {
  height: 10px;
  flex-shrink: 0;
  margin: 0 8px;
}