/* Стиль платформы контроля демпинга ГК «АЯК».
   Основание — мокапы MVP 1 v4: светлый минимализм, чёрный текст,
   фирменный красный #E20E17 акцентом. Внешних ресурсов нет ни одного:
   платформа работает на VPS, доступ к сторонним CDN не гарантирован. */

:root {
  --bg: #f7f7f8;
  --card: #fff;
  --ink: #1c1c1e;
  --muted: #6b7280;
  --line: #e5e7eb;
  --ayak: #E20E17;
  --ayak-dark: #b30b12;
  --soft: #f3f4f6;
  --bad: #d7263d;
  --warn: #e0912f;
  --good: #1f9d6b;
  --night: #4c5687;
}

* { box-sizing: border-box; }

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

body.centered {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 16px 20px 60px; }

/* ── Шапка ─────────────────────────────────────────────────────────────── */
.app {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ayak);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
}
.app .logo { font-weight: 800; font-size: 15px; white-space: nowrap; }
.app .logo small { display: block; font-weight: 600; color: var(--muted); font-size: 10.5px; }
.red { color: var(--ayak); }
.app .user { font-size: 12px; color: var(--muted); margin-left: auto; text-align: right; }
.app .user b { color: var(--ink); display: block; font-size: 13px; }
.app .logout { margin: 0; }

.gear {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 20px;
  padding: 6px 12px;
  font: 600 12.5px inherit;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}
.gear:hover, .gear.on { border-color: var(--ayak); color: var(--ayak); }

/* ── Навигация разделами ───────────────────────────────────────────────── */
.nav { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.nav a {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 9px;
  padding: 8px 16px;
  font: 700 13px inherit;
  color: var(--muted);
  text-decoration: none;
}
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--ayak); border-color: var(--ayak); box-shadow: inset 0 -2px 0 var(--ayak); }

/* ── Карточки и текст ──────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  overflow-x: auto;
}
h1 { font-size: 18px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 13.5px; margin: 14px 0 8px; }
.sub { color: var(--muted); font-size: 12.5px; }
.info {
  border-left: 4px solid var(--night);
  background: #eef0f8;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  margin: 0 0 10px;
}
.code {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: auto;
  white-space: pre;
}

/* ── Кнопки ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 8px;
  padding: 6px 13px;
  font: 600 12.5px inherit;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.btn.pri { background: var(--ayak); border-color: var(--ayak); color: #fff; }
.btn.pri:hover { background: var(--ayak-dark); }

/* ── Вход ──────────────────────────────────────────────────────────────── */
.login {
  width: 380px;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ayak);
  border-radius: 14px;
  padding: 26px 28px;
}
.login label { display: block; font-size: 12px; font-weight: 600; margin: 10px 0 4px; }
.login input[type=text], .login input[type=password] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
}
.login input[type=text]:focus, .login input[type=password]:focus {
  outline: 2px solid var(--ayak);
  outline-offset: 1px;
}
.login .pol { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 10px; }
.login .pol input[type=checkbox] { flex: 0 0 auto; margin: 2px 0 0; }
.login .pol label {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}
.login .btn { width: 100%; text-align: center; padding: 10px; margin-top: 4px; }
.login .hint { color: var(--muted); font-size: 11px; margin: 12px 0 0; }
.login .error {
  border-left: 4px solid var(--bad);
  background: #fbe9eb;
  color: var(--bad);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 4px;
}
.errcode { font-size: 34px; font-weight: 800; color: var(--ayak); margin: 6px 0 0; }

/* ── Журнал партнёров ───────────────────────────────────────────────────── */
/* Флаги показываются словами, а не значками: требование владельца процесса —
   «у иконок есть проблема, они должны быть читаемыми без пояснений». */

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ayak); border-color: var(--ayak); }
.tabs b {
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
}
.tabs a.on b { background: var(--ayak); color: #fff; }

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.filters input[type="search"] { min-width: 320px; flex: 1 1 320px; }
.filters input, .filters select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.filters input:focus, .filters select:focus { outline: 2px solid var(--ayak); outline-offset: 1px; }
.reset { color: var(--muted); font-size: 12.5px; }

.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.grid th, .grid td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.grid th { background: var(--soft); font-size: 12px; color: var(--muted); font-weight: 600; }
.grid tbody tr:last-child td { border-bottom: none; }
.grid tbody tr:hover { background: #fafafb; }
.grid .num { text-align: right; white-space: nowrap; }
.grid small { display: block; color: var(--muted); font-size: 12px; }
.grid.inner { margin: 10px 0 4px; }
.name { color: var(--ink); font-weight: 600; text-decoration: none; }
.name:hover { color: var(--ayak); text-decoration: underline; }
.quiet { color: var(--muted); font-weight: 400; }

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 12.5px;
  white-space: nowrap;
}
.flag {
  display: inline-block;
  margin: 1px 4px 1px 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fdf1f2;
  color: var(--bad);
  border: 1px solid #f6d7da;
  font-size: 12px;
}

/* ── Карточка партнёра ──────────────────────────────────────────────────── */

.crumbs { margin: 0 0 12px; font-size: 13px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ayak); }

.passport { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; margin: 14px 0; }
.passport div { border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.passport dt { color: var(--muted); font-size: 12px; }
.passport dd { margin: 2px 0 0; font-size: 13.5px; }

.ladder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.ladder .step {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-size: 12.5px;
}
.ladder .step.passed { color: var(--good); border-color: #cceadd; background: #f2fbf7; }
.ladder .step.current { color: var(--ayak); border-color: var(--ayak); font-weight: 600; }
.ladder .arrow { color: var(--muted); }

.events { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.events li { margin-bottom: 4px; }

details { border-top: 1px solid var(--line); padding: 10px 0; }
details:first-of-type { border-top: none; }
summary { cursor: pointer; padding: 4px 0; }
summary .quiet { margin-left: 8px; font-size: 12.5px; }

/* ── Объяснение незакрытой работы ───────────────────────────────────────────
   Правило «карточка не закрывается сама» новое и неочевидное. Блок сделан
   заметным намеренно: без прямого текста ни администратор, ни владелец процесса
   не поймут, почему дело висит, когда нарушений уже нет. */

.vnimanie {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid #f6d7da;
  border-left: 3px solid var(--ayak);
  border-radius: 10px;
  background: #fdf1f2;
  font-size: 13.5px;
}
.vnimanie .vyhod { margin-top: 8px; color: var(--muted); font-size: 12.5px; }
.vstroka { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vstroka input[type="text"] {
  flex: 1 1 320px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

/* ── Правка карточки ────────────────────────────────────────────────────────── */

.pravka { border-top: 1px solid var(--line); margin-top: 14px; }
.pravka > summary { font-weight: 600; }
.pole-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 16px;
  margin-top: 10px;
}
.pole-set label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.pole-set label.shirokoe { grid-column: 1 / -1; }
.pole-set input {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px;
}
.pole-set input:focus { outline: 2px solid var(--ayak); outline-offset: 1px; }
.knopki { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }