/* Внутреннее рабочее место: спокойный лист, крупный текст, ничего лишнего.
   Шрифты системные — сервер в РФ, до чужих CDN может не достучаться. */

:root {
  --ink: #1c1f24;
  --ink-soft: #5b6270;
  --line: #dfe3e9;
  --paper: #f6f7f9;
  --card: #ffffff;
  --accent: #2f5d8a;
  --bad: #a3341f;
  --ok: #2c6e49;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Шапка */

.top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 56px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
}

.nav { display: flex; gap: 18px; flex: 1; }
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover, .nav a.on { color: var(--accent); }

.who { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.who-name { font-weight: 500; }
.who-role { color: var(--ink-soft); }
.logout { margin: 0; }
.logout button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}
.logout button:hover { border-color: var(--accent); color: var(--accent); }

/* Лист */

.page { max-width: 900px; margin: 0 auto; padding: 32px 24px 64px; }

h1 { font-size: 24px; margin: 0 0 20px; font-weight: 600; }
h2 { font-size: 16px; margin: 0 0 14px; font-weight: 600; color: var(--ink-soft); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 18px;
}

.facts { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; }

.rights { list-style: none; margin: 0; padding: 0; }
.rights li { padding: 3px 0 3px 24px; position: relative; }
.rights li::before { position: absolute; left: 0; }
.rights .yes::before { content: "✓"; color: var(--ok); }
.rights .no { color: #a6acb8; }
.rights .no::before { content: "·"; color: #c4c9d2; }

.hint { color: var(--ink-soft); font-size: 14px; }
.dim { color: var(--ink-soft); font-size: 14px; }
.bad-text { color: var(--bad); }
.crumbs { margin: 0 0 12px; font-size: 14px; }
.count { margin: 0 0 12px; }

.notice {
  background: #fdf7e6;
  border: 1px solid #ecdcae;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: 14px;
}

/* Поиск */

.search .fields { display: flex; flex-wrap: wrap; gap: 14px; }
.search label { display: block; flex: 1 1 180px; }
.search label.narrow { flex: 0 0 140px; }
.search label span { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 5px; }
.search input[type=text], .search select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}
.search input:focus, .search select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.search .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
.search .check { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-soft); }
.search .check input { margin: 0; }
.search .check span { margin: 0; }
.search button {
  padding: 9px 22px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.search button:hover { background: #26507a; }

/* Таблицы */

.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.grid th {
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}
.grid td { padding: 10px 14px; border-bottom: 1px solid #eef1f5; vertical-align: top; }
.grid tr:last-child td { border-bottom: 0; }
.grid .narrow { width: 1%; white-space: nowrap; }
.grid .phone { font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid.tight { border: 0; border-radius: 0; }
.grid.tight td { padding: 6px 0; border-bottom: 0; }

.tag {
  display: inline-block;
  font-size: 12px;
  line-height: 1.5;
  padding: 1px 8px;
  margin-right: 4px;
  border-radius: 20px;
  background: #eef2f7;
  color: #445;
}
.tag.dim-tag { background: #f3f0e8; color: #7a6f57; }

.links { list-style: none; margin: 0; padding: 0; }
.links li { padding: 4px 0; }

.paging { display: flex; gap: 20px; margin-top: 16px; font-size: 14px; }

/* Правка на карточке */

.done {
  background: #eef7ef;
  border: 1px solid #cbe3d0;
  color: var(--ok);
  border-radius: 6px;
  padding: 9px 12px;
  margin: 0 0 16px;
  font-size: 14px;
}

.edit .fields { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.edit label { display: block; flex: 1 1 180px; }
.edit label.narrow { flex: 0 0 150px; }
.edit label span { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 5px; }
.edit input[type=text], .edit input[type=date], .edit select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}
.edit input:focus, .edit select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.edit .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}
.edit button {
  padding: 9px 22px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.edit button:hover { background: #26507a; }

.inline-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.inline-add select, .inline-add input[type=text] {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.inline-add input[type=text] { flex: 1 1 160px; min-width: 120px; }
.inline-add button {
  padding: 7px 16px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.inline-add button:hover { background: #26507a; }
.inline-add .check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); }

/* Мелкие действия внутри строк и списков */

.grid td.right { text-align: right; }
.grid td form { display: inline; }

.acts { display: inline-flex; gap: 10px; margin-left: 6px; }
.acts form { display: inline; }

button.quiet {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
button.quiet:hover { color: var(--accent); }
button.quiet.danger:hover { color: var(--bad); }

/* Склейки */

.count a { margin-right: 2px; }
.count a.on { font-weight: 600; text-decoration: none; }

.pair .why { margin: 0 0 16px; font-size: 14px; }
.pair .why .phone { margin-left: 4px; }

.sides { display: flex; gap: 16px; flex-wrap: wrap; }
.side {
  flex: 1 1 240px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: #fbfcfd;
}
.side-name { display: block; font-weight: 500; margin-bottom: 8px; }
.side-facts { font-size: 14px; color: var(--ink-soft); display: grid; gap: 3px; }

.verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.verdict form { display: inline; }
.verdict button {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.verdict button:hover { border-color: var(--accent); color: var(--accent); }
.verdict button.quiet { border: 0; background: none; padding: 8px 4px; }

/* Конструктор условий */

.group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fbfcfd;
}
.group + .group, .cond + .group, .group + .cond { margin-top: 10px; }
.group-all { border-left: 3px solid var(--accent); }
.group-any { border-left: 3px solid #b08a3e; }
.group-not { border-left: 3px solid var(--bad); }

.group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.group-kind {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.group-acts { display: flex; gap: 12px; }
.group-body { display: grid; gap: 8px; padding-left: 12px; }
.group-body > .hint { margin: 0; }

.cond {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.cond select, .cond input[type=text] {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}
.cond select:focus, .cond input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.cond-field { min-width: 170px; }
.cond-op { min-width: 120px; }
.cond-value { min-width: 150px; }
.cond-value.narrow { min-width: 80px; width: 90px; }
.cond-value[multiple] { min-width: 160px; padding: 4px; }
.cond-hint { flex-basis: 100%; font-size: 13px; color: var(--ink-soft); }

.cond.htmx-request, .group.htmx-request { opacity: .6; }

/* Охват */

.numbers { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 12px; }
.number { display: flex; flex-direction: column; gap: 2px; }
.number b { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.number span { font-size: 13px; color: var(--ink-soft); }
.number.warn b { color: #a3701f; }

button.secondary {
  padding: 9px 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
button.secondary:hover { border-color: var(--accent); color: var(--accent); }
.edit .row { gap: 10px; justify-content: flex-start; }
code { background: var(--paper); padding: 1px 6px; border-radius: 4px; font-size: 14px; }
a { color: var(--accent); }

/* Вход */

body.gate { display: grid; place-items: center; min-height: 100vh; }
body.gate .page { padding: 24px; width: 100%; max-width: 380px; }

.login h1 { font-size: 19px; margin-bottom: 22px; }
.login label { display: block; margin-bottom: 14px; }
.login label span { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 5px; }
.login input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}
.login input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.login button {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.login button:hover { background: #26507a; }
.login .hint { margin: 16px 0 0; text-align: center; font-size: 13px; }

.error {
  background: #fdf0ed;
  border: 1px solid #f0cfc7;
  color: var(--bad);
  border-radius: 6px;
  padding: 9px 12px;
  margin: 0 0 16px;
  font-size: 14px;
}

/* Выбор колонок выгрузки. Весь каталог виден сразу галочками в ряд: под какую
   задачу собирают файл, человек решает глазами, а не разворачивая списки. */
.export .columns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 12px 12px;
  margin: 0 0 12px;
}
.export .columns legend { padding: 0 6px; font-size: 14px; color: var(--ink-soft); }
.export label.pick {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.export label.pick span { display: inline; margin: 0; font-size: 14px; color: var(--ink); }

/* Журнал: подробности записи — длинный JSON, который должен переноситься,
   а не растягивать таблицу за край экрана. */
td.break {
  word-break: break-word;
  font-size: 13px;
  line-height: 1.4;
  max-width: 520px;
}
/* Своё имя в шапке — ссылка на смену пароля, но выглядит как было. */
a.who-name { text-decoration: none; }
a.who-name:hover { text-decoration: underline; }