/*
 * Оформление демонстрационного макета.
 *
 * Два требования ТЗ определили здесь почти всё:
 *  — NFR-008: факт, расчёт, гипотеза и решение человека обязаны РАЗЛИЧАТЬСЯ визуально. Иначе
 *    на демонстрации невозможно понять, что система знает, а что предполагает, и доверие к
 *    показу теряется на первом же вопросе из зала.
 *  — NFR-011: различие не должно держаться на одном цвете. Поэтому у каждой природы данных есть
 *    и цвет, и значок, и подпись словами — понятно и на проекторе, и человеку с дальтонизмом.
 *
 * Экран рассчитан на 1920×1080 (NFR-005): плотность выбрана так, чтобы главные числа читались
 * с расстояния, а не только вблизи.
 */

:root {
  --bg: #0f1216;
  --panel: #171b21;
  --panel2: #1d222a;
  --line: #262c35;
  --line2: #333b47;
  --txt: #e8ecf1;
  --txt2: #b9c2cd;
  --muted: #8b95a3;
  --faint: #6b7482;

  --acc: #35c88f;          /* факт из системы */
  --calc: #58a6ff;         /* расчёт платформы */
  --hypo: #d9a441;         /* гипотеза ИИ */
  --human: #b98cf0;        /* решение человека */
  --alarm: #e5595b;

  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--calc); }

/* ── Каркас ─────────────────────────────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; border-bottom: 1px solid var(--line);
  background: var(--panel); position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; letter-spacing: .2px; }
.brand span { color: var(--acc); }

.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.crumbs button {
  background: none; border: none; color: var(--calc); cursor: pointer;
  font: inherit; padding: 2px 4px; border-radius: 4px;
}
.crumbs button:hover { background: rgba(88,166,255,.12); }
.crumbs .sep { color: var(--faint); }
.crumbs .cur { color: var(--txt); }

/* Оговорка про синтетику — обязательна на всех экранах (ТЗ, приложение B). */
.disclaimer {
  margin-left: auto; font-size: 12px; color: var(--hypo);
  border: 1px solid rgba(217,164,65,.35); background: rgba(217,164,65,.08);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}

main { padding: 20px; max-width: 1860px; margin: 0 auto; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 12px; }
.sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

/* ── Панели и сетки ─────────────────────────────────────────────────────── */

.grid { display: grid; gap: 14px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-2 { grid-template-columns: 1.4fr 1fr; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.panel h2 { display: flex; align-items: baseline; gap: 8px; }
.panel h2 .tag { font-size: 11px; font-weight: 400; color: var(--muted); }

/* ── Карточки предприятий ───────────────────────────────────────────────── */

.ent {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; cursor: pointer;
  transition: border-color .15s, transform .15s;
  text-align: left; color: inherit; font: inherit; width: 100%;
}
.ent:hover, .ent:focus-visible { border-color: var(--acc); transform: translateY(-1px); outline: none; }
.ent.reserve { opacity: .62; cursor: default; }
.ent.reserve:hover { border-color: var(--line); transform: none; }
.ent .name { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.ent .note { color: var(--muted); font-size: 12px; min-height: 32px; }
.ent .kpis { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.kpi .v { font-size: 20px; font-weight: 700; }
.kpi .k { font-size: 11px; color: var(--faint); }

/* ── Природа данных: цвет + значок + подпись (NFR-008, NFR-011) ─────────── */

.mark {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid; white-space: nowrap;
}
.mark::before { font-size: 11px; }
.mark.fact   { color: var(--acc);   border-color: rgba(53,200,143,.4);  background: rgba(53,200,143,.10); }
.mark.calc   { color: var(--calc);  border-color: rgba(88,166,255,.4);  background: rgba(88,166,255,.10); }
.mark.hypo   { color: var(--hypo);  border-color: rgba(217,164,65,.4);  background: rgba(217,164,65,.10); }
.mark.human  { color: var(--human); border-color: rgba(185,140,240,.4); background: rgba(185,140,240,.10); }
.mark.gap    { color: var(--alarm); border-color: rgba(229,89,91,.45);  background: rgba(229,89,91,.10); }
.mark.fact::before  { content: "■"; }
.mark.calc::before  { content: "∑"; }
.mark.hypo::before  { content: "?"; }
.mark.human::before { content: "☺"; }
.mark.gap::before   { content: "!"; }

/* Легенда природы данных — висит на экране, чтобы зал понимал маркировку. */
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

/* ── Цепочка этапов ─────────────────────────────────────────────────────── */

.chain { display: flex; gap: 6px; flex-wrap: wrap; }
.stage {
  border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px;
  font-size: 12px; background: var(--panel2); min-width: 120px;
  cursor: pointer; color: inherit; font-family: inherit; text-align: left;
}
.stage:hover, .stage:focus-visible { border-color: var(--calc); outline: none; }
.stage .n { color: var(--faint); font-size: 10px; }
.stage.demo { border-color: rgba(53,200,143,.45); }
.stage.problem { border-color: var(--alarm); background: rgba(229,89,91,.08); }
.stage.out { opacity: .5; }
.stage .scope { font-size: 10px; color: var(--faint); margin-top: 2px; }

/* ── Таблицы ────────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-weight: 600; font-size: 11px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .3px;
  padding: 6px 10px; border-bottom: 1px solid var(--line);
}
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--panel2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.exceed { color: var(--alarm); font-weight: 600; }

/* ── Событийная лента ───────────────────────────────────────────────────── */

.feed { max-height: 420px; overflow: auto; }
.ev { display: grid; grid-template-columns: 108px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: none; }
.ev .t { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.ev .txt { font-size: 13px; }
.ev .meta { font-size: 11px; color: var(--muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.ev.gate { background: rgba(185,140,240,.06); border-left: 2px solid var(--human); padding-left: 8px; }

/* ── Кнопки ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--acc); color: #08130d; border: none;
  padding: 8px 14px; border-radius: 8px; font: 600 13px/1 inherit; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: none; border: 1px solid var(--line2); color: var(--txt2); font-weight: 500; }
.btn.ghost:hover { border-color: var(--calc); color: var(--txt); }
.btn:focus-visible { outline: 2px solid var(--calc); outline-offset: 2px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ── Крупные показатели ─────────────────────────────────────────────────── */

.big { display: flex; gap: 28px; flex-wrap: wrap; }
.big .v { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.big .k { font-size: 12px; color: var(--muted); margin-top: 2px; }
.big .v.alarm { color: var(--alarm); }

/* ── Пробел знаний ──────────────────────────────────────────────────────── */

.gapbox {
  border: 1px solid rgba(229,89,91,.4); background: rgba(229,89,91,.07);
  border-radius: var(--radius); padding: 14px; margin-bottom: 14px;
}
.gapbox h3 { margin: 0 0 6px; font-size: 14px; color: var(--alarm); }

.hint { font-size: 12px; color: var(--faint); margin-top: 10px; }