/* theme.css — слой темы платформы ПНООЛР (образец: app.hr-ecoplatform.ru).
   Палитра, шрифты и вид ключевых компонентов меняются ТОЛЬКО здесь.
   Подключается ПОСЛЕ встроенных стилей страниц и переопределяет их.
   Откат: убрать <link href="/static/theme.css"> из страниц. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700&display=swap');

:root {
  /* Палитра ролями — нейтраль + один зелёный акцент экологии */
  --bg:      #FAFAFA;
  --panel:   #FFFFFF;
  --ink:     #18181B;
  --muted:   #52525B;
  --accent:  #0F7A3E;
  --accent2: #0C6533;
  --line:    #E5E5E5;
  --warn:    #92400E;
  --err:     #B91C1C;

  --accent-tint: #EAF7EF;
  --ring: rgba(15, 122, 62, .18);

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
}

body {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  letter-spacing: -.01em;
}

/* ===== Шапка: была тёмно-зелёная плашка → белая поверхность с разделителем */
header {
  background: var(--panel);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
header h1 { font-weight: 700; }
header h1::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--accent);
  margin-right: 9px;
}
header .sub { opacity: 1; color: var(--muted); }
header .user { opacity: 1; color: var(--muted); }
header .user button {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}
header .user button:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent2);
}
/* Ссылки шапки (ФККО, Формулы, Чат, Админка) прописаны в разметке inline
   белым под старую тёмную шапку — на белой шапке их не видно. Inline-стиль
   перебивается только через !important; правим цвет, остальное не трогаем. */
header a { color: var(--muted) !important; opacity: 1 !important; }
header a:hover { color: var(--accent2) !important; }

/* ===== Сайдбар: был зеленоватый → белый, активный шаг с зелёной полосой */
aside {
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.steps li { color: var(--muted); }
.steps li:hover { background: var(--bg); color: var(--ink); }
.steps li.active {
  background: var(--accent-tint);
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--ink);
}

/* ===== Карточки */
.panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

/* ===== Кнопки и поля */
button { border-radius: var(--radius-sm); font-weight: 500; }
button.ghost { color: var(--accent2); border-color: var(--accent); background: transparent; }
button.ghost:hover { background: var(--accent-tint); }
input, textarea, select { border-radius: var(--radius-sm); }
button:focus-visible,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ===== Таблицы: зелёные шапки → нейтральные ярлыки */
th {
  background: #F4F4F5;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

/* ===== Статусы и плашки — семантические цвета дизайн-системы */
.tag { border-radius: 999px; background: var(--accent-tint); color: var(--accent2); }
.tag.low  { background: #FEF3C7; color: #92400E; }
.tag.crit { background: #FEE2E2; color: #B91C1C; }
.msg.ok  { background: #ECFDF5; color: #047857; }
.msg.err { background: #FEE2E2; color: #B91C1C; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}