/* /opt/skynet-portal/app/static/css/skeleton.css */
/* v0.2.5 — двойник /inspectors/payments: карточка фильтров (сегмент+2 даты+кнопка), профиль 5 колонок, компакт-строки; каскад строк продлён до 16 */
/* 03.08.2026: v0.2.4 зоны /fin: фильтры-строка, 4 KPI, сплит чарт+донат, TOP×2 */
/* =====================================================================
   БАЗА: любой скелетон = приглушённый блок с бегущим бликом
   ===================================================================== */
.skel {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface-2, rgba(148, 163, 184, 0.10));
  border-radius: var(--radius-md, 8px);
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--text-muted, #94a3b8) 16%, transparent),
    transparent);
  animation: skel-sweep 1.3s ease-in-out infinite;
}
@keyframes skel-sweep { 100% { transform: translateX(100%); } }
/* =====================================================================
   АТОМЫ — для любых мест портала (фрагменты, ленивые табы, витрины)
   ===================================================================== */
.skel-line   { height: 12px; border-radius: var(--radius-sm, 6px); }
.skel-title  { height: 20px; border-radius: var(--radius-sm, 6px); }
.skel-circle { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.skel-avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; }
.skel-badge  { width: 76px; height: 20px; border-radius: 999px; }
.skel-chip   { width: 100px; height: 26px; border-radius: 999px; }
.skel-btn    { width: 132px; height: 38px; border-radius: var(--radius-md, 8px); flex: 0 0 auto; }
.skel-input  { height: 40px; border-radius: var(--radius-md, 8px); }
/* Атомы страничных силуэтов */
.skel-donut  { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; }
.skel-ico    { width: 46px; height: 46px; border-radius: var(--radius-xl, 12px); flex: 0 0 auto; }
.skel-chart  { display: block; width: 100%; height: 240px; border-radius: var(--radius-lg, 10px); }
.skel-flt-sm { flex: 0 0 150px; }
.skel-sq     { width: 16px; height: 16px; border-radius: 5px; flex: 0 0 auto; }
.skel-neg    { width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto; }
.skel-kico   { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; }
.skel-track  { height: 7px; border-radius: 999px; flex: 1 1 auto; }
.skel-stack  { display: block; width: 100%; height: 9px; border-radius: 999px; }
/* Утилиты ширины и раскладки */
.skel-w-15  { width: 15%; }
.skel-w-25  { width: 25%; }
.skel-w-35  { width: 35%; }
.skel-w-50  { width: 50%; }
.skel-w-65  { width: 65%; }
.skel-w-80  { width: 80%; }
.skel-w-100 { width: 100%; }
.skel-grow  { flex: 1 1 auto; min-width: 0; }
.skel-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
}
.skel-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  flex: 1;
  min-width: 0;
}
/* Карточка-скелетон (обёртка в стиле карточек портала) */
.skel-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  padding: var(--sp-4, 16px) var(--sp-5, 20px);
  border: var(--border-thin, 1px) solid var(--border-subtle, rgba(148, 163, 184, 0.14));
  border-radius: var(--radius-xl, 12px);
  background: var(--bg-surface, rgba(255, 255, 255, 0.02));
}
/* =====================================================================
   ТАБЛИЦА-СКЕЛЕТОН (шапка + строки; ширины колонок «дышат» сами)
   ===================================================================== */
.skel-table {
  border: var(--border-thin, 1px) solid var(--border-subtle, rgba(148, 163, 184, 0.14));
  border-radius: var(--radius-2xl, 16px);
  background: var(--bg-surface, rgba(255, 255, 255, 0.02));
  overflow: hidden;
}
.skel-thead {
  display: flex;
  gap: var(--sp-4, 16px);
  padding: 12px 16px;
  background: var(--bg-surface-2, rgba(148, 163, 184, 0.06));
  border-bottom: var(--border-thin, 1px) solid var(--border-default, rgba(148, 163, 184, 0.20));
}
.skel-thead .skel { height: 10px; flex: 1; }
.skel-tr {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 16px);
  padding: 12px 16px;
  border-bottom: var(--border-thin, 1px) solid var(--border-subtle, rgba(148, 163, 184, 0.10));
}
.skel-tr:last-child { border-bottom: none; }
.skel-td { height: 12px; flex: 1; border-radius: var(--radius-sm, 6px); }
/* Профиль колонок: узкий ID, широкое имя — как в реальных списках */
.skel-thead .skel:first-child,
.skel-tr .skel-td:first-child { flex: 0 0 44px; }
.skel-thead .skel:nth-child(2),
.skel-tr .skel-td:nth-child(2) { flex: 2.1; }
.skel-tr .skel-td:nth-child(3) { flex: 1.3; }
.skel-tr .skel-td:nth-child(5) { flex: 0.9; }
/* Строка с аватаром (список абонентов): колонка имени после аватара — широкая */
.skel-tr .skel-avatar + .skel-td { flex: 2.1; }
/* Лёгкая рандомизация длин — строки не выглядят штампованными */
.skel-tr:nth-child(odd) .skel-td:nth-child(2) { max-width: 82%; }
.skel-tr:nth-child(3n)  .skel-td:nth-child(4) { max-width: 70%; }
.skel-tr:nth-child(4n)  .skel-td:nth-child(3) { max-width: 76%; }
/* =====================================================================
   АВТО-СКЕЛЕТ СТРАНИЦЫ (.spa-skel) — вставляет turbo.js на SPA-переходе
   ===================================================================== */
.spa-skel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5, 20px);
  padding: var(--sp-2, 8px) 0 var(--sp-8, 32px);
  animation: skel-in 0.2s ease both;
}
@keyframes skel-in { from { opacity: 0; } to { opacity: 1; } }
/* Шапка: титул + подзаголовок слева, кнопка действия справа */
.spa-skel-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5, 20px);
}
.spa-skel-hero .skel-col { max-width: 420px; }
/* Плитки-«KPI» */
.spa-skel-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3, 12px);
}
.spa-skel-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: var(--sp-4, 16px) var(--sp-3, 12px);
  border: var(--border-thin, 1px) solid var(--border-subtle, rgba(148, 163, 184, 0.14));
  border-radius: var(--radius-xl, 12px);
  background: var(--bg-surface, rgba(255, 255, 255, 0.02));
}
/* Полоса фильтра: поиск + две кнопки */
.spa-skel-filter {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
}
.spa-skel-filter .skel-input { flex: 1 1 auto; }
.spa-skel-filter .skel-input.skel-flt-sm { flex: 0 0 150px; }
/* =====================================================================
   СИЛУЭТЫ-ДВОЙНИКИ СТРАНИЦ (turbo.js выбирает по URL назначения)
   ===================================================================== */
/* Абоненты: ряд сводных зон с пропорциями hero-dash */
.spa-skel-stats {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1.3fr 1.2fr;
  gap: var(--sp-3, 12px);
}
/* Абоненты: большая фильтр-панель (карточка) с матрицей полей и полосой действий */
.spa-skel-panel { gap: var(--sp-4, 16px); }
.spa-skel-panel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.spa-skel-panel-grid .skel-input { height: 34px; }
/* Ячейка матрицы: негатор «кроме» слева + поле (как cfx в реальном фильтре) */
.spa-skel-panel-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.spa-skel-panel-cell .skel-input { flex: 1 1 auto; }
/* Легенда доната/услуг: две колонки коротких строк */
.spa-skel-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  flex: 1;
  min-width: 0;
}
/* Правая зона статов абонентов: KPI-колонка без рамки + кнопка справа по центру */
.spa-skel-kpiwrap {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 16px);
  min-width: 0;
}
.spa-skel-kpiblock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: var(--sp-2, 8px) 0;
  flex: 1 1 auto;
  min-width: 0;
}
.spa-skel-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3, 12px);
  flex-wrap: wrap;
}
/* Тикеты: ряд вкладок-статусов */
.spa-skel-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
  padding-bottom: var(--sp-2, 8px);
  border-bottom: var(--border-thin, 1px) solid var(--border-subtle, rgba(148, 163, 184, 0.14));
}
/* Дашборд: hero-полоса (аватар + имя + метрики + часы) */
.spa-skel-band {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-5, 20px);
}
.spa-skel-band .skel-col { max-width: 300px; }
.spa-skel-band .skel-btn { margin-left: auto; }
/* Дашборд: 4 метрики */
.spa-skel-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3, 12px);
}
.spa-skel-metric {
  flex-direction: row;
  align-items: center;
}
/* Дашборд: график + узкая легенда */
.spa-skel-split {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: var(--sp-4, 16px);
  align-items: stretch;
}
/* Дашборд: нижний ряд из 3 карточек */
.spa-skel-row3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3, 12px);
}
/* Финансы: карточка-строка фильтров (7 полей + 2 кнопки, компакт 33px) */
.spa-skel-fin-filters {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
}
.spa-skel-fin-filters .skel-input { height: 33px; flex: 0 0 150px; }
.spa-skel-fin-filters .skel-btn { height: 33px; width: 96px; }
/* Финансы: 4 KPI-карты */
.spa-skel-fin-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3, 12px);
}
.spa-skel-fin-kpi { gap: var(--sp-2, 8px); padding: var(--sp-3, 12px) var(--sp-4, 16px); }
/* Финансы: сплит «чарт + донат с легендой» (пропорции fin-analytics) */
.spa-skel-fin-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-3, 12px);
  align-items: stretch;
}
.spa-skel-fin-split .skel-chart { height: 210px; }
.spa-skel-fin-split .skel-donut { width: 100px; height: 100px; }
/* Финансы: две TOP-карты с кружками-медалями */
.spa-skel-fin-tops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3, 12px);
}
/* Платежи инспекторов (/inspectors/payments): hero без кнопки → карточка
   фильтров (сегмент Այո/Ոչ + 2 даты + кнопка, мини-подписи сверху) →
   таблица 5 колонок: узкий ID, широкое имя, зона, две суммы фиксом справа */
.spa-skel-insp-filters {
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-4, 16px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
}
.spa-skel-insp-ff { display: flex; flex-direction: column; gap: 6px; }
.spa-skel-insp .skel-flbl { width: 96px; height: 8px; }
.spa-skel-insp .skel-seg { width: 112px; height: 38px; border-radius: var(--radius-md, 8px); flex: 0 0 auto; }
.spa-skel-insp .skel-date { width: 210px; height: 38px; border-radius: var(--radius-md, 8px); flex: 0 0 auto; }
.spa-skel-insp-filters .skel-btn { width: 118px; height: 38px; }
/* Компакт-строки таблицы двойника (под плотность живой страницы) */
.spa-skel-insp .skel-thead { padding: 10px 16px; }
.spa-skel-insp .skel-tr { padding: 10px 16px; }
/* Профиль 5 колонок */
.spa-skel-insp .skel-thead .skel:first-child,
.spa-skel-insp .skel-tr .skel-td:first-child { flex: 0 0 64px; }
.spa-skel-insp .skel-thead .skel:nth-child(2),
.spa-skel-insp .skel-tr .skel-td:nth-child(2) { flex: 2.4; }
.spa-skel-insp .skel-thead .skel:nth-child(3),
.spa-skel-insp .skel-tr .skel-td:nth-child(3) { flex: 1.1; }
.spa-skel-insp .skel-thead .skel:nth-child(4),
.spa-skel-insp .skel-tr .skel-td:nth-child(4),
.spa-skel-insp .skel-thead .skel:nth-child(5),
.spa-skel-insp .skel-tr .skel-td:nth-child(5) { flex: 0 0 120px; }
/* Каскадное появление плиток и строк (премиум-стаггер) */
.spa-skel-tile,
.spa-skel .skel-tr {
  opacity: 0;
  animation: skel-pop 0.34s var(--ease-out-soft, ease) forwards;
}
@keyframes skel-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.spa-skel-tile:nth-child(1) { animation-delay: 0.02s; }
.spa-skel-tile:nth-child(2) { animation-delay: 0.05s; }
.spa-skel-tile:nth-child(3) { animation-delay: 0.08s; }
.spa-skel-tile:nth-child(4) { animation-delay: 0.11s; }
.spa-skel-tile:nth-child(5) { animation-delay: 0.14s; }
.spa-skel-tile:nth-child(6) { animation-delay: 0.17s; }
/* Строки: nth-child считает от .skel-thead (он 1-й ребёнок), строки = 2..17.
   Задержки до 16-й строки — иначе хвост выскакивает раньше первых. */
.spa-skel .skel-tr:nth-child(2)  { animation-delay: 0.06s; }
.spa-skel .skel-tr:nth-child(3)  { animation-delay: 0.10s; }
.spa-skel .skel-tr:nth-child(4)  { animation-delay: 0.14s; }
.spa-skel .skel-tr:nth-child(5)  { animation-delay: 0.18s; }
.spa-skel .skel-tr:nth-child(6)  { animation-delay: 0.22s; }
.spa-skel .skel-tr:nth-child(7)  { animation-delay: 0.26s; }
.spa-skel .skel-tr:nth-child(8)  { animation-delay: 0.30s; }
.spa-skel .skel-tr:nth-child(9)  { animation-delay: 0.34s; }
.spa-skel .skel-tr:nth-child(10) { animation-delay: 0.38s; }
.spa-skel .skel-tr:nth-child(11) { animation-delay: 0.42s; }
.spa-skel .skel-tr:nth-child(12) { animation-delay: 0.46s; }
.spa-skel .skel-tr:nth-child(13) { animation-delay: 0.50s; }
.spa-skel .skel-tr:nth-child(14) { animation-delay: 0.54s; }
.spa-skel .skel-tr:nth-child(15) { animation-delay: 0.58s; }
.spa-skel .skel-tr:nth-child(16) { animation-delay: 0.62s; }
.spa-skel .skel-tr:nth-child(17) { animation-delay: 0.66s; }
/* Каскад карточек страничных силуэтов (+KPI-зона абонентов без рамки) */
.spa-skel .skel-card,
.spa-skel .spa-skel-kpiwrap {
  opacity: 0;
  animation: skel-pop 0.34s var(--ease-out-soft, ease) forwards;
}
.spa-skel-stats > :nth-child(1)             { animation-delay: 0.02s; }
.spa-skel-stats > :nth-child(2)             { animation-delay: 0.05s; }
.spa-skel-stats > :nth-child(3)             { animation-delay: 0.08s; }
.spa-skel-stats > :nth-child(4)             { animation-delay: 0.11s; }
.spa-skel > .spa-skel-panel                 { animation-delay: 0.10s; }
.spa-skel-metrics > .skel-card:nth-child(1) { animation-delay: 0.02s; }
.spa-skel-metrics > .skel-card:nth-child(2) { animation-delay: 0.06s; }
.spa-skel-metrics > .skel-card:nth-child(3) { animation-delay: 0.10s; }
.spa-skel-metrics > .skel-card:nth-child(4) { animation-delay: 0.14s; }
.spa-skel-split > .skel-card:nth-child(1)   { animation-delay: 0.08s; }
.spa-skel-split > .skel-card:nth-child(2)   { animation-delay: 0.14s; }
.spa-skel-row3 > .skel-card:nth-child(1)    { animation-delay: 0.06s; }
.spa-skel-row3 > .skel-card:nth-child(2)    { animation-delay: 0.10s; }
.spa-skel-row3 > .skel-card:nth-child(3)    { animation-delay: 0.14s; }
/* Каскад зон /fin */
.spa-skel > .spa-skel-fin-filters               { animation-delay: 0.03s; }
.spa-skel-fin-kpis > .skel-card:nth-child(1)    { animation-delay: 0.05s; }
.spa-skel-fin-kpis > .skel-card:nth-child(2)    { animation-delay: 0.08s; }
.spa-skel-fin-kpis > .skel-card:nth-child(3)    { animation-delay: 0.11s; }
.spa-skel-fin-kpis > .skel-card:nth-child(4)    { animation-delay: 0.14s; }
.spa-skel-fin-split > .skel-card:nth-child(1)   { animation-delay: 0.12s; }
.spa-skel-fin-split > .skel-card:nth-child(2)   { animation-delay: 0.17s; }
.spa-skel-fin-tops > .skel-card:nth-child(1)    { animation-delay: 0.15s; }
.spa-skel-fin-tops > .skel-card:nth-child(2)    { animation-delay: 0.19s; }
/* Каскад двойника платежей инспекторов */
.spa-skel > .spa-skel-insp-filters              { animation-delay: 0.03s; }
/* Каскад вкладок-статусов тикетов */
.spa-skel-tabs .skel-chip {
  opacity: 0;
  animation: skel-pop 0.3s var(--ease-out-soft, ease) forwards;
}
.spa-skel-tabs .skel-chip:nth-child(1) { animation-delay: 0.02s; }
.spa-skel-tabs .skel-chip:nth-child(2) { animation-delay: 0.05s; }
.spa-skel-tabs .skel-chip:nth-child(3) { animation-delay: 0.08s; }
.spa-skel-tabs .skel-chip:nth-child(4) { animation-delay: 0.11s; }
.spa-skel-tabs .skel-chip:nth-child(5) { animation-delay: 0.14s; }
.spa-skel-tabs .skel-chip:nth-child(6) { animation-delay: 0.17s; }
.spa-skel-tabs .skel-chip:nth-child(7) { animation-delay: 0.20s; }
/* Пока скелет показан — реальный контент #main скрыт (вернётся при ошибке) */
#main.is-skel { position: relative; overflow-x: hidden; }
#main.is-skel > :not(.spa-skel) { display: none !important; }
/* =====================================================================
   АДАПТИВ И ДОСТУПНОСТЬ
   ===================================================================== */
@media (max-width: 1280px) {
  .spa-skel-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spa-skel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .spa-skel-split { grid-template-columns: 1fr; }
  .spa-skel-fin-split { grid-template-columns: 1fr; }
  .spa-skel-fin-tops { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .spa-skel-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .spa-skel-hero .skel-btn { width: 96px; }
  .spa-skel-fin-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .spa-skel-panel-grid { grid-template-columns: 1fr; }
  .spa-skel-stats { grid-template-columns: 1fr; }
  .spa-skel-band { flex-wrap: wrap; }
  .spa-skel-fin-kpis { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; }
  .spa-skel,
  .spa-skel-tile,
  .spa-skel .skel-tr,
  .spa-skel .skel-card,
  .spa-skel .spa-skel-kpiwrap,
  .spa-skel-tabs .skel-chip { animation: none !important; opacity: 1 !important; }
}