/* Оформление публичных страниц «Умного предприятия».
 *
 * Токены скопированы из client/src/index.css — того же файла, которым живёт
 * продукт. Это сделано намеренно и с известной ценой: копия может разъехаться
 * с оригиналом. Альтернатива хуже — сборка ради четырёх статических страниц,
 * которые Caddy отдаёт напрямую с диска.
 *
 * Что нельзя менять «на глаз»:
 *   --accent затемнён до #2E7D32, чтобы белый текст на кнопке давал контраст
 *   ≈4.8:1 (WCAG AA). Более светлый зелёный из палитры давал ≈2.5 и не
 *   проходил проверку — это уже чинили 29.06.2026 внутри продукта.
 *
 *   В тёмной теме фирменная зелёная шапка заменяется нейтральной: зелёный
 *   градиент хорош на светлом фоне и плохо выглядит на тёмном (решение
 *   владельца 25.06.2026).
 */

:root {
  color-scheme: light;
  --bg-primary: #FFFFFF;
  --bg-secondary: #FAFCFA;
  --bg-tertiary: #F0F6F0;
  --bg-active: #E8F5E9;
  --bg-input: #FFFFFF;
  --text-primary: #1A2E1A;
  --text-secondary: #5C7A5C;
  --text-muted: #6B8F6B;
  --border-color: #E0EBE0;
  --border-active: #C8E6C9;
  --accent: #2E7D32;
  --accent-hover: #1B5E20;
  --text-on-accent: #FFFFFF;
  /* Ссылка — НЕ то же, что заливка кнопки. На кнопке белый текст поверх
     тёмно-зелёного даёт нужный контраст, а тот же зелёный ТЕКСТОМ на тёмном
     фоне читается плохо. В продукте это разные токены (--accent и
     --text-accent), повторяем различение. */
  --text-accent: #2E7D32;
  --brand-header: linear-gradient(135deg, #1B5E20, #2E7D32);
  --color-danger: #E53935;
  --color-warning: #FFA000;
  --shadow-color: rgba(0, 0, 0, .08);
  /* Плашка «черновик» на юридических страницах. */
  --warn-bg: #FFF8E1;
  --warn-text: #8A5A00;
}

/* Тему выбирает человек, а не только система. «Как в системе» — это
   ОТСУТСТВИЕ атрибута data-theme, тогда работает медиа-запрос ниже. Явный
   выбор ставит атрибут, и два блока переопределяют палитру в обе стороны:
   :not([data-theme="light"]) даёт светлую при тёмной системе, а
   [data-theme="dark"] — тёмную при светлой.

   ВАЖНО: значения в обоих блоках обязаны совпадать — они и создавались из
   одного источника. Правя один, правьте второй. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-primary: #1e1e1e;
    --bg-secondary: #121212;
    --bg-tertiary: #2a2a2a;
    --bg-active: #1e3a2e;
    --bg-input: #1e1e1e;
    --text-primary: #e6e6e6;
    --text-secondary: #a8a8a8;
    --text-muted: #8a8a8a;
    --border-color: #333333;
    --border-active: #3a5a3a;
    --accent: #2E7D32;
    --accent-hover: #388E3C;
    --text-accent: #66bb6a;
    --brand-header: linear-gradient(135deg, #242424, #2c2c2c);
    --color-danger: #ef5350;
    --color-warning: #FFB74D;
    --shadow-color: rgba(0, 0, 0, .4);
    --warn-bg: #3a2f10;
    --warn-text: #FFD180;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #1e1e1e;
  --bg-secondary: #121212;
  --bg-tertiary: #2a2a2a;
  --bg-active: #1e3a2e;
  --bg-input: #1e1e1e;
  --text-primary: #e6e6e6;
  --text-secondary: #a8a8a8;
  --text-muted: #8a8a8a;
  --border-color: #333333;
  --border-active: #3a5a3a;
  --accent: #2E7D32;
  --accent-hover: #388E3C;
  --text-accent: #66bb6a;
  --brand-header: linear-gradient(135deg, #242424, #2c2c2c);
  --color-danger: #ef5350;
  --color-warning: #FFB74D;
  --shadow-color: rgba(0, 0, 0, .4);
  --warn-bg: #3a2f10;
  --warn-text: #FFD180;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
  background: var(--bg-secondary);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--text-accent); }

/* --- Шапка с фирменным градиентом, как у модулей продукта --- */
.top {
  background: var(--brand-header);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.top a { color: #fff; text-decoration: none; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.logo svg { flex-shrink: 0; }

/* --- Карточка: тот же радиус и рамка, что у карточек внутри продукта --- */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 24px 26px;
}

.muted { color: var(--text-secondary); }

/* --- Формы --- */
label { display: block; font-size: 13px; color: var(--text-secondary);
        margin: 15px 0 5px; font-weight: 500; }
input[type=email], input[type=password] {
  width: 100%;
  padding: 11px 13px;
  /* 16px — иначе iOS зумит страницу при фокусе в поле. */
  font-size: 16px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--bg-active);
}
.hint { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }

button, .btn {
  display: inline-block;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-on-accent);
  background: var(--accent);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
button:hover:not(:disabled), .btn:hover { background: var(--accent-hover); }
button:disabled { opacity: .55; cursor: default; }

.msg { margin-top: 15px; padding: 11px 13px; border-radius: 9px; font-size: 14px; }
.msg.err { background: rgba(229, 57, 53, .1); color: var(--color-danger); }
.msg.ok { background: var(--bg-active); color: var(--text-primary);
          border: 1px solid var(--border-active); }

/* --- Юридические страницы --- */
.doc { width: 100%; max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }
.doc h1 { font-size: 26px; margin-bottom: 4px; }
.doc h2 { font-size: 17px; margin: 28px 0 8px; }
.doc p, .doc li { margin-bottom: 8px; }
.doc ol, .doc ul { padding-left: 22px; }
.doc .date { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }
.draft {
  background: var(--warn-bg); color: var(--warn-text);
  border-radius: 10px; padding: 14px 16px;
  font-size: 14px; margin-bottom: 26px; font-weight: 600;
}
.todo { background: var(--warn-bg); color: var(--warn-text);
        border-radius: 8px; padding: 2px 7px; font-size: 12.5px; font-weight: 600; }
table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px;
         border-bottom: 1px solid var(--border-color); vertical-align: top; }
th { color: var(--text-secondary); font-weight: 600; font-size: 13px; }
/* Широкая таблица прокручивается внутри себя, а не тянет страницу вбок. */
.scroll { overflow-x: auto; }

footer {
  border-top: 1px solid var(--border-color);
  padding: 20px; text-align: center;
  font-size: 13px; color: var(--text-muted);
}
footer a { margin: 0 8px; }