/* Оформление панели в языке shadcn/ui: токены, радиусы, приглушённая палитра.
 *
 * Сам shadcn/ui — это React-компоненты, которые его генератор кладёт в проект со
 * сборкой. У нас панель на Flask и Tailwind из браузера, поэтому взят его
 * **язык**: те же переменные (--background, --card, --muted, --border, --ring),
 * та же логика «спокойный фон, тонкая рамка, один акцент», те же радиусы. Это
 * даёт ровно тот вид, за которым к нему идут, и не тащит в выкладку node.
 *
 * Почему не просто «покрасивее покрасить»: панель смотрят в спешке, когда
 * открылись даты. Значит цвет должен что-то значить, а не украшать. Здесь
 * зелёный — сделано, красный — сломалось, янтарный — идёт, серый — впереди.
 * Больше акцентов на странице не бывает.
 */

:root {
  /* Основа: почти белый фон и тёмно-синий текст — так цифры читаются лучше
     всего, а цветные значки не спорят с фоном. */
  --фон: 210 20% 98%;
  --текст: 222 47% 11%;

  --карточка: 0 0% 100%;
  --карточка-текст: 222 47% 11%;

  /* Приглушённое: подписи, вторые строки, пояснения */
  --тихое: 210 16% 93%;
  --тихий-текст: 215 16% 47%;

  /* Наш акцент — глубокая зелень EcoTravel, а не синева по умолчанию */
  --акцент: 158 64% 30%;
  --акцент-текст: 0 0% 100%;

  --рамка: 214 24% 90%;
  --обводка: 158 64% 40%;

  /* Смыслы состояний. Держим здесь, чтобы страница и полосы этапов красились
     из одного места: расхождение оттенков читается как разные состояния. */
  --готово: 142 71% 40%;
  --идёт: 38 92% 50%;
  --беда: 0 72% 51%;

  --радиус: 0.625rem;
}

body {
  font-family: "General Sans", "Satoshi", system-ui, sans-serif;
  background: hsl(var(--фон));
  color: hsl(var(--текст));
  -webkit-font-smoothing: antialiased;
}

/* Заголовки и цифры — Satoshi: у него узкие цифры одной ширины, поэтому
   меняющиеся секунды не дёргают строку туда-сюда. */
h1, h2, h3, .шрифт-заголовка, .цифры {
  font-family: "Satoshi", system-ui, sans-serif;
  font-feature-settings: "tnum" 1;
}

.цифры { font-variant-numeric: tabular-nums; }

/* --- Карточка ------------------------------------------------------------ */

.карточка {
  background: hsl(var(--карточка));
  border: 1px solid hsl(var(--рамка));
  border-radius: var(--радиус);
  box-shadow: 0 1px 2px 0 hsl(var(--текст) / 0.04);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}

.карточка:hover {
  box-shadow: 0 4px 12px -2px hsl(var(--текст) / 0.08);
}

.карточка-беда { border-color: hsl(var(--беда) / 0.5); }
.карточка-ждёт { border-color: hsl(var(--идёт) / 0.5); }

/* --- Значок состояния --------------------------------------------------- */

.значок {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
}

.значок-готово { background: hsl(var(--готово) / 0.12); color: hsl(var(--готово) / 0.95); }
.значок-идёт   { background: hsl(var(--идёт) / 0.14);   color: hsl(35 92% 33%); }
.значок-беда   { background: hsl(var(--беда) / 0.12);   color: hsl(var(--беда)); }
.значок-тихий  { background: hsl(var(--тихое));         color: hsl(var(--тихий-текст)); }

/* --- Полоса этапа ------------------------------------------------------- */

.полоса {
  height: 6px;
  border-radius: 999px;
  background: hsl(var(--тихое));
  overflow: hidden;
  position: relative;
}

.полоса-готово { background: hsl(var(--готово)); }
.полоса-беда   { background: hsl(var(--беда)); }

/* Идущий этап дышит: движение показывает, что работа не встала. Анимацию
   отключаем тем, кто просил меньше движения в системе, — им она мешает. */
.полоса-идёт {
  background: linear-gradient(90deg,
    hsl(var(--идёт) / 0.35) 0%, hsl(var(--идёт)) 50%, hsl(var(--идёт) / 0.35) 100%);
  background-size: 200% 100%;
  animation: бег 1.4s ease-in-out infinite;
}

@keyframes бег {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .полоса-идёт { animation: none; background: hsl(var(--идёт)); }
  .пульс { animation: none; }
}

/* --- Пульс живой связи -------------------------------------------------- */

.пульс {
  width: 8px; height: 8px; border-radius: 999px;
  animation: мигание 2s ease-in-out infinite;
}

.пульс-живой { background: hsl(var(--готово)); }
.пульс-мёртвый { background: hsl(var(--беда)); animation: none; }

@keyframes мигание {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* --- Иконки Phosphor ---------------------------------------------------- */

/* Иконка в тексте должна стоять на строке, а не висеть выше или ниже её. */
i[class^="ph-"], i[class*=" ph-"] {
  display: inline-block;
  vertical-align: -0.125em;
  line-height: 1;
}

.иконка-круг {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: var(--радиус);
  background: hsl(var(--тихое));
  color: hsl(var(--тихий-текст));
  flex-shrink: 0;
}

.иконка-круг-готово { background: hsl(var(--готово) / 0.12); color: hsl(var(--готово)); }
.иконка-круг-идёт   { background: hsl(var(--идёт) / 0.14);   color: hsl(35 92% 40%); }
.иконка-круг-беда   { background: hsl(var(--беда) / 0.12);   color: hsl(var(--беда)); }

/* Вращение для «работаем прямо сейчас» */
.вертится { animation: оборот 1.6s linear infinite; }

@keyframes оборот {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .вертится { animation: none; }
}

/* --- Появление новых карточек ------------------------------------------ */

/* Кабинет, появившийся в списке, проявляется, а не выпрыгивает: резкое
   появление в потоке событий читается как ошибка отрисовки. */
.проявись { animation: проявление .35s ease-out; }

@keyframes проявление {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}