/* ---------------------------------------------------------------------------
   Экран администратора: только то, чего нет в общем /ui/app.css.

   Правило простое: если элемент есть в панели или в рабочем месте оператора,
   он берётся оттуда. Здесь остаются вкладки в шапке, воронка каскада строками
   и лента событий — три вещи, которых больше нигде нет.

   Классы разделов различаются приставкой, чтобы правки в одном разделе
   страницы не задевали второй:
       .adm-*    общее для экрана,
       .dfunnel  воронка демонстрации,
       .dfeed    лента событий демонстрации.

   Политика содержимого `default-src 'self'`: ни одного внешнего источника,
   ни строки стиля в разметке.
   --------------------------------------------------------------------------- */

/* Вкладки живут во второй строке шапки: в одну строку с наименованием
   учреждения и кнопками они не помещаются на ноутбуке управы. */
.head-in--tabs{padding-top:0;padding-bottom:0}
.head-in--tabs .tabs{width:100%}

/* --------------------------------------------------------------------------
   Воронка каскада строками.
   Не диаграмма: этапы каскада не вложены друг в друга (ветка «не дошло»
   считается от отправленных, а не от прочитанных), и рисовать их сужающейся
   трубой значило бы показывать неправду.
   -------------------------------------------------------------------------- */
.dfunnel{display:flex;flex-direction:column;gap:11px}

.dfunnel .step{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;align-items:baseline}
.dfunnel .step .name{font-size:13px;color:var(--muted);min-width:0}
.dfunnel .step .num{text-align:right;font-weight:660;font-size:15.5px;font-variant-numeric:tabular-nums}
.dfunnel .step .of{display:block;font-weight:400;color:var(--faint);font-size:11.5px}
.dfunnel .step .track{grid-column:1 / -1;height:18px;border-radius:6px;background:var(--panel-3);overflow:hidden}
.dfunnel .step .fill{height:100%;border-radius:6px;width:0;background:var(--c1);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.dfunnel .step.branch .fill{background:var(--c4)}
.dfunnel .step.voice .fill{background:var(--c2)}

/* --------------------------------------------------------------------------
   Лента событий.
   -------------------------------------------------------------------------- */
.dfeed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;max-height:420px;overflow:auto}

.dfeed li{
  display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:8px 2px;border-bottom:1px solid var(--border);font-size:13px;
}
.dfeed li:last-child{border-bottom:0}
.dfeed .mark{width:8px;height:8px;border-radius:50%;background:var(--c8);align-self:center}
.dfeed li.ok .mark{background:var(--ok)}
.dfeed li.warn .mark{background:var(--warn)}
.dfeed li.bad .mark{background:var(--bad)}
.dfeed li.info .mark{background:var(--info)}
.dfeed .txt{min-width:0}
.dfeed .txt b{display:block;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dfeed .txt span{color:var(--muted);font-size:12px}
.dfeed .at{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Новое событие подсвечивается один раз: без этого лента выглядит статичной
   даже когда обновляется. */
.dfeed li.fresh{animation:dfeed-in .6s ease}
@keyframes dfeed-in{from{background:var(--accent-soft)}to{background:transparent}}
@media (prefers-reduced-motion: reduce){
  .dfeed li.fresh{animation:none}
  .dfunnel .step .fill{transition:none}
}

/* --------------------------------------------------------------------------
   Мелочи экрана
   -------------------------------------------------------------------------- */
.adm-err{color:var(--bad)}
.adm-ok{color:var(--ok)}

@media (max-width: 900px){
  .dfeed{max-height:none}
}


/* --- отряд на линии и ответы жителей ------------------------------------
   Две карточки, за которыми следят во время волны. Оформлены плотно:
   их читают краем глаза, между делом, а не изучают. */
.ops-state { display: flex; gap: .75rem; margin: .5rem 0 .25rem; }
.ops-cell {
  flex: 1 1 0; text-align: center; padding: .55rem .3rem;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--surface-2, transparent);
}
.ops-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.ops-cap { font-size: .78rem; color: var(--ink-faint, #667); margin-top: .15rem; }
.ops-pace .sub { margin-top: .35rem; }

.outcomes-rows { margin-top: .4rem; }
.oc-row {
  display: grid; grid-template-columns: 10.5rem 1fr 5.5rem;
  align-items: center; gap: .6rem; margin: .3rem 0;
}
.oc-name { font-size: .88rem; }
.oc-bar {
  height: .55rem; border-radius: 999px; overflow: hidden;
  background: var(--rule);
}
/* Заливка одного цвета для всех, кроме двух случаев: положительный ответ
   и стоп-лист. Раскрашивать каждую строку в свой цвет — значит заставить
   читать легенду там, где хватает длины полоски. */
.oc-fill { display: block; height: 100%; background: var(--ink-faint, #8a94a6); }
.oc-fill.good { background: var(--ok, #1B5E20); }
.oc-fill.stop { background: var(--alarm, #B3261E); }
.oc-num {
  font-size: .82rem; text-align: right; color: var(--ink-faint, #667);
  font-variant-numeric: tabular-nums;
}