/* Эколог.online — фирменный стиль ООО «ЭкоЦентр»:
   кремовая бумага, акварельный росток, свежая листва; серо-графитовый текст как в логотипе.
   Путь «заказчик → объект → отчёт» — маршрут со станциями,
   классы опасности — шкала от тёмно-красного (1) к синему (5). */

@font-face {
  font-family: "Onest";
  src: url("/fonts/onest.woff2") format("woff2"), url("/fonts/onest.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata.woff2") format("woff2"), url("/fonts/literata.ttf") format("truetype");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --paper: #FAF7EE;
  --surface: #FFFFFF;
  --tint: #EEF3E2;
  --forest: #35622A;
  --moss: #457C28;
  --moss-dark: #36651F;
  --lichen: #A9CF5B;
  --leaf-bg: #E6F0D2;
  --ink: #3A414A;
  --muted: #687079;
  --line: #E5E2D5;
  --line-strong: #CCC9BA;
  --ochre: #85570A;
  --ochre-bg: #FBF0D9;
  --error: #A8261B;
  --error-bg: #FBEAE7;
  --ok-bg: #E8F2D8;
  --hz-1: #8E1B1B;
  --hz-2: #B8430D;
  --hz-3: #8F5E00;
  --hz-4: #4A7426;
  --hz-5: #336A8C;
  --r-panel: 14px;
  --r-control: 8px;
  --sans: "Onest", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: "Literata", "PT Serif", Georgia, serif;
  --lift: 0 10px 30px rgba(74, 90, 40, .13);

  font: 400 15px/1.5 var(--sans);
  color: var(--ink);
  background: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
a { color: var(--moss); text-underline-offset: 3px; }
a:hover { color: var(--moss-dark); }
:focus-visible { outline: 3px solid var(--lichen); outline-offset: 2px; border-radius: 4px; }
code { font-size: .92em; background: var(--tint); padding: .1em .35em; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Боковая панель ---------- */
.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 26px;
  padding: 20px 14px 24px;
  background: linear-gradient(180deg, #FFFDF7 0%, #F6F2E3 100%);
  border-right: 1px solid var(--line);
  color: var(--ink);
}
.brand { display: block; padding: 0 6px; text-decoration: none; }
.brand-logo { display: block; width: 100%; max-width: 212px; height: auto; }
.brand-sub { display: block; margin: 4px 0 0 4px; color: var(--muted); font-size: 12.5px; letter-spacing: .02em; }
.rail-nav { display: grid; gap: 2px; }
.rail-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 10px; border-radius: var(--r-control); color: var(--ink); text-decoration: none; font-weight: 500; }
.rail-nav a:hover { background: rgba(169, 207, 91, .16); color: var(--moss-dark); }
.rail-nav a[aria-current] { background: var(--leaf-bg); color: var(--moss-dark); font-weight: 600; }
.rail-nav svg { width: 20px; height: 20px; flex: none; opacity: .75; }
.rail-nav a[aria-current] svg { color: var(--moss); opacity: 1; }
.rail-foot { margin: auto 0 0; padding: 0 10px; font-size: 13px; color: var(--muted); }

/* ---------- Основная колонка ---------- */
.main { padding: 28px 40px 64px; max-width: 1320px; width: 100%; }
h1 { font: 600 30px/1.15 var(--serif); letter-spacing: -.01em; margin: 0; }
h2 { font: 600 19px/1.3 var(--serif); margin: 0 0 14px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 28px; margin-bottom: 26px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 8px 0 0; color: var(--muted); }
.small { font-size: 13.5px; color: var(--muted); font-weight: 400; }
.nowrap { white-space: nowrap; }
.digits { font-variant-numeric: tabular-nums; }

/* ---------- Маршрут «заказчик → объект → отчёт» ---------- */
.route { margin: 0 0 26px; }
.route ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
.route li { position: relative; padding: 24px 18px 0 0; min-width: 0; }
.route li::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--moss); background: var(--paper);
}
.route li::after { content: ""; position: absolute; top: 6px; left: 20px; right: 6px; height: 2px; background: var(--moss); }
.route li:last-child::after { display: none; }
.route .is-done::before { background: var(--moss); }
.route .is-current::before { background: var(--moss); box-shadow: 0 0 0 5px rgba(44, 106, 78, .16); }
.route .is-todo::before { border-color: var(--line-strong); }
.route .is-skip::before { border-style: dashed; border-color: var(--muted); }
.route .is-current::after, .route .is-todo::after {
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
.route-kind { display: block; font-size: 12.5px; color: var(--muted); }
.route-label { display: block; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.route-label:hover { color: var(--moss); text-decoration: underline; }
.route .is-todo .route-label, .route .is-skip .route-label { color: var(--muted); font-weight: 500; }

/* ---------- Кнопки и поля ---------- */
.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--r-control);
  font: 600 14.5px/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn { background: var(--moss); color: #fff; border: 1px solid var(--moss); }
.btn:hover { background: var(--moss-dark); border-color: var(--moss-dark); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--moss-dark); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--moss); color: var(--moss-dark); background: #F7FAF5; }
.btn-danger { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-control); font: 600 14.5px/1.2 var(--sans); cursor: pointer; background: var(--surface); color: var(--error); border: 1px solid var(--error); }
.btn-danger:hover { background: var(--error-bg); }
.icon-btn { border: 0; background: none; font: inherit; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; width: 34px; height: 34px; border-radius: var(--r-control); }
.icon-btn:hover { color: var(--error); background: var(--error-bg); }

input, select {
  font: inherit; color: inherit; min-height: 40px; max-width: 100%;
  padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface);
}
input:focus, select:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(44, 106, 78, .18); }
input[type="file"] { border: 0; padding: 0; min-height: 0; font-size: 14px; }
input.year { width: 6.5rem; }
.is-invalid { border-color: var(--error); background: var(--error-bg); }
.field-error, .cell-error { color: var(--error); font-size: 13px; font-weight: 500; }
.cell-error { display: block; margin-top: 4px; max-width: 240px; line-height: 1.35; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.stack { display: grid; gap: 14px; }
.stack label, .toolbar label, .send-method label { display: grid; gap: 5px; font-size: 13px; font-weight: 500; color: var(--muted); }
.stack label input, .stack label select { color: var(--ink); }
.narrow { max-width: 560px; }

/* ---------- Блоки ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 22px; }
.panel h2 { font: 600 15.5px/1.3 var(--sans); margin-bottom: 12px; }
.cols { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
/* Таблица отходов широкая: боковые блоки встают справа только на широких экранах, иначе — под формой */
.report-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.side { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
@media (min-width: 1480px) {
  .report-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
  .side { grid-template-columns: minmax(0, 1fr); position: sticky; top: 24px; }
}
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 16px 18px; margin-bottom: 28px; background: var(--tint); border-radius: var(--r-panel); }
.notice { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; background: var(--ochre-bg); color: var(--ochre); }
.empty { padding: 40px 32px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line-strong); border-radius: var(--r-panel); background: rgba(255, 255, 255, .55); }
.empty p { max-width: 58ch; margin: 0 auto 16px; }
.empty h1 { margin-bottom: 10px; }

.flash { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; font-weight: 500; }
.flash-ok { background: var(--ok-bg); color: var(--moss-dark); }
.flash-info { background: var(--tint); color: var(--ink); }
.flash-error { background: var(--error-bg); color: var(--error); }

/* ---------- Объекты в карточке заказчика ---------- */
.panel-head { display: flex; justify-content: space-between; align-items: baseline; }
.objects { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.objects a { position: relative; display: block; padding: 9px 10px 9px 32px; border-radius: var(--r-control); color: var(--ink); text-decoration: none; font-weight: 500; }
.objects a::before { content: ""; position: absolute; left: 11px; top: 15px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
.objects a:hover { background: #F4F7F2; }
.objects .is-active a { background: var(--tint); font-weight: 600; }
.objects .is-active a::before { border-color: var(--moss); background: var(--moss); }
.obj-meta { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
details.add { border-top: 1px solid var(--line); padding-top: 12px; }
details.add summary { cursor: pointer; color: var(--moss-dark); font-weight: 600; padding: 4px 0; }
details.add form { margin-top: 12px; }

/* ---------- Таблицы ---------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.grid th { text-align: left; vertical-align: bottom; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: #F8FAF6; }
.grid .num { text-align: right; }
.grid td > a:not(.btn):not(.btn-ghost) { color: var(--ink); font-weight: 600; text-decoration: none; }
.grid td > a:not(.btn):not(.btn-ghost):hover { color: var(--moss); text-decoration: underline; }
.grid .zero { color: var(--line-strong); }
.copy-form { display: flex; align-items: center; gap: 8px; }

.grid.entry th { padding: 10px 8px; font-size: 12.5px; white-space: normal; }
.grid.entry td { padding: 6px 4px; vertical-align: top; }
.grid.entry td:first-child, .grid.entry th:first-child { padding-left: 12px; }
.grid.entry tbody tr:hover td { background: none; }
.grid.entry input, .grid.entry select { width: 100%; }
.w-code { min-width: 158px; } .w-wide { min-width: 300px; } .w-tiny { width: 76px; } .w-num { min-width: 116px; } .w-act { width: 46px; }
.add-row { margin-top: 12px; }

/* ---------- Статусы ---------- */
.status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-draft { background: #ECEFEA; color: var(--muted); }
.status-ready { background: var(--ochre-bg); color: var(--ochre); }
.status-sent { background: var(--ok-bg); color: var(--moss-dark); }

/* Жизненный путь отчёта в боковой панели — те же станции, что и в маршруте */
.track { list-style: none; margin: 0 0 16px; padding: 0; }
.track li { position: relative; padding: 0 0 14px 28px; color: var(--muted); }
.track li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
.track li::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.track li:last-child { padding-bottom: 0; }
.track li:last-child::after { display: none; }
.track .is-done { color: var(--ink); }
.track .is-done::before { border-color: var(--moss); background: var(--moss); }
.track .is-done::after { background: var(--moss); }
.track .is-current { color: var(--ink); font-weight: 600; }
.track .is-current::before { border-color: var(--moss); box-shadow: 0 0 0 4px rgba(44, 106, 78, .16); }

/* ---------- Классы опасности ---------- */
.hz { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 13px; background: var(--muted); }
.hz-1 { background: var(--hz-1); } .hz-2 { background: var(--hz-2); } .hz-3 { background: var(--hz-3); } .hz-4 { background: var(--hz-4); } .hz-5 { background: var(--hz-5); }
.hz-scale { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; max-width: 920px; }
.hz-scale li { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 5px solid; font-size: 13px; color: var(--muted); line-height: 1.3; }
.hz-scale li:nth-child(1) { border-color: var(--hz-1); } .hz-scale li:nth-child(2) { border-color: var(--hz-2); }
.hz-scale li:nth-child(3) { border-color: var(--hz-3); } .hz-scale li:nth-child(4) { border-color: var(--hz-4); }
.hz-scale li:nth-child(5) { border-color: var(--hz-5); }
.hz-scale .hz { flex: none; }

/* ---------- Форма отчёта ---------- */
.form-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px 24px 24px; margin-bottom: 18px; scroll-margin-top: 16px; }
.form-section h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 600 19px/1.3 var(--serif); }
.sec-num {
  flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px;
  background: var(--tint); color: var(--moss-dark); font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums;
}
details.form-section > summary { list-style: none; cursor: pointer; }
details.form-section > summary::-webkit-details-marker { display: none; }
details.form-section > summary h3 { margin: 0; }
details.form-section > summary h3::after {
  content: ""; width: 9px; height: 9px; margin-left: auto; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px);
}
details.form-section[open] > summary { margin-bottom: 14px; }
details.form-section[open] > summary h3::after { transform: rotate(-135deg) translateY(-2px); }
.group-title { margin: 34px 0 14px; font: 600 22px/1.25 var(--serif); }
.group-title:first-of-type { margin-top: 8px; }
.section-off { margin-bottom: 14px; }
.form-section .table-wrap { border-radius: 10px; }
.hint { max-width: 72ch; margin: -4px 0 18px; color: var(--muted); font-size: 14px; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13.5px; font-weight: 600; }
.req { color: var(--muted); font-weight: 400; }
.shared { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--moss-dark); font-size: 12px; font-weight: 500; white-space: nowrap; }
.actions {
  position: sticky; bottom: 16px; z-index: 5;
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; padding: 12px;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--lift);
}

/* ---------- Боковая панель отчёта ---------- */
.files { list-style: none; margin: 0 0 14px; padding: 0; }
.files li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.files li a { flex: 1; overflow-wrap: anywhere; }
.log { list-style: none; display: grid; gap: 6px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.log .is-fail { color: var(--error); }

/* ---------- Подсказки ФККО ---------- */
.suggest { position: absolute; z-index: 30; list-style: none; margin: 0; padding: 6px; max-height: 340px; max-width: min(660px, 95vw); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--lift); }
.suggest li { display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-control); font-size: 14px; cursor: pointer; }
.suggest li:hover, .suggest li.is-active { background: var(--tint); }
.suggest .s-code { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Узкие экраны ---------- */
@media (max-width: 1080px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-logo { width: auto; height: 46px; }
  .brand-sub { display: none; }
  .rail-nav { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .rail-nav a { flex: none; white-space: nowrap; }
  .rail-foot { display: none; }
  .main { padding: 22px 16px 48px; }
  h1 { font-size: 25px; }
  .route li { padding-right: 10px; }
  .hz-scale { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* =====================================================================
   Команда: вход, кабинет, задачи, уведомления, сотрудники
   ===================================================================== */

textarea {
  font: inherit; color: inherit; width: 100%; min-height: 84px; resize: vertical;
  padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface);
}
textarea:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(44, 106, 78, .18); }
.btn-block { width: 100%; margin-top: 14px; }
.stack-lg { display: grid; gap: 18px; align-content: start; min-width: 0; }
.two-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; max-width: 1040px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); font-weight: 400; cursor: pointer; }
.check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--moss); }
.checks { display: grid; gap: 10px; }
.prose { margin: 0; max-width: 72ch; overflow-wrap: anywhere; }
.head-controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.hint { max-width: 72ch; color: var(--muted); font-size: 14px; }

/* Боковая панель: счётчики и пользователь */
.rail-nav a .badge, .rail-bell .badge { margin-left: auto; }
.badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--moss); color: #fff; font-size: 12px; font-weight: 700; }
.rail-user { margin-top: auto; display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.rail-bell, .rail-me { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-control); color: var(--ink); text-decoration: none; }
.rail-bell:hover, .rail-me:hover { background: rgba(169, 207, 91, .16); color: var(--moss-dark); }
.rail-bell svg { width: 20px; height: 20px; flex: none; opacity: .8; }
.rail-me-text { display: grid; line-height: 1.3; min-width: 0; }
.rail-me-text strong { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-me-text span { font-size: 12.5px; color: var(--muted); }
.rail-logout { margin-left: 10px; padding: 4px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.rail-logout:hover { color: var(--moss-dark); text-decoration: underline; }

.avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--moss-dark); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.avatar-light { width: 32px; height: 32px; background: var(--leaf-bg); color: var(--moss-dark); }

/* Страница входа */
.auth-body { display: block; min-height: 100vh; background: linear-gradient(180deg, rgba(250, 247, 238, .80) 0%, rgba(250, 247, 238, .93) 55%, var(--paper) 100%), url("/img/leaves.jpg") 50% 0 / cover no-repeat; background-color: var(--paper); }
.auth { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 32px 16px; }
.auth .brand { padding: 0; }
.auth .brand-logo { width: 260px; max-width: 70vw; }
.auth-card { width: min(420px, 92vw); padding: 30px 32px 28px; background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(74, 90, 40, .16); backdrop-filter: blur(4px); }
.auth-card h1 { font-size: 26px; margin-bottom: 18px; }
.auth-card .small { margin: 16px 0 0; }
.auth-card .btn { width: 100%; }
.auth-foot { margin: 0; color: var(--muted); font-size: 13px; }

/* Вкладки-фильтры */
.tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--tint); border-radius: 999px; }
.tabs a { padding: 6px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 63, 49, .12); }
.tabs-under { margin-top: 12px; }

/* Сроки и пометки */
.due { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: #ECEFEA; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.due.is-soon { background: var(--ochre-bg); color: var(--ochre); }
.due.is-late { background: var(--error-bg); color: var(--error); }
.flag { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: var(--error-bg); color: var(--error); font-size: 12px; font-weight: 600; white-space: nowrap; }
.flag-muted { background: #ECEFEA; color: var(--muted); }

/* Кабинет «Мой день» */
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dash-wide { grid-column: 1 / -1; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.rows li:first-child { padding-top: 0; }
.rows-tight li { padding: 8px 0; }
.row-main { display: grid; min-width: 0; }
.row-title { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.row-title:hover { color: var(--moss); text-decoration: underline; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }

/* Лента событий */
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; font-size: 14px; }
.feed-who { grid-column: 1; font-weight: 600; }
.feed-what { grid-column: 1; color: var(--ink); overflow-wrap: anywhere; }
a.feed-what { text-decoration: none; }
a.feed-what:hover { color: var(--moss); text-decoration: underline; }
.feed-when { grid-column: 2; grid-row: 1; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.side .feed li, .cols .feed li { grid-template-columns: minmax(0, 1fr); }
.side .feed-when, .cols .feed-when { grid-column: 1; grid-row: auto; }

/* Доска задач */
.board-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.new-task { margin-bottom: 22px; }
.new-task summary { cursor: pointer; font-weight: 600; color: var(--moss-dark); }
.new-task[open] summary { margin-bottom: 16px; }
.task-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 16px; margin-bottom: 16px; }
.task-fields label { display: grid; gap: 5px; font-size: 13px; font-weight: 500; color: var(--muted); }
.task-fields label input, .task-fields label select, .task-fields label textarea { color: var(--ink); width: 100%; }
.task-fields .span-all { grid-column: 1 / -1; }
.board { display: grid; grid-template-columns: repeat(6, minmax(232px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.column { background: var(--tint); border-radius: var(--r-panel); padding: 12px; min-width: 0; }
.column-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; }
.column-head h2 { margin: 0; font: 600 14.5px/1.3 var(--sans); }
.count { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: center; }
.column-list { display: grid; gap: 10px; min-height: 120px; align-content: start; border-radius: 10px; }
.column-list.is-over { outline: 2px dashed var(--moss); outline-offset: 3px; }
.column-note { margin: 10px 4px 0; }
.card { display: grid; gap: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: grab; }
.card:hover { border-color: var(--line-strong); }
.card.is-dragging { opacity: .45; }
.card-title { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; line-height: 1.35; }
.card-title:hover { color: var(--moss); text-decoration: underline; }
.card-client { font-size: 13px; color: var(--muted); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.card-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.icon { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.board-note { margin-top: 14px; }

/* Задача */
.tstatus { display: inline-flex; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #ECEFEA; color: var(--muted); }
.task-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: -10px 0 22px; color: var(--muted); }
.task-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.side-fixed { grid-template-columns: minmax(0, 1fr); position: sticky; top: 24px; }
.comments { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 16px; }
.comments li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.comment-head { margin: 0 0 2px; }
.comment-form { padding-top: 16px; border-top: 1px solid var(--line); }

/* Уведомления */
.notes { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); max-width: 860px; }
.notes li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.notes li:last-child { border-bottom: 0; }
.notes a { color: var(--muted); text-decoration: none; }
.notes a:hover { color: var(--moss); text-decoration: underline; }
.notes .is-unread a { color: var(--ink); font-weight: 600; }
.notes .is-unread a::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--moss); vertical-align: 1px; }

@media (max-width: 1080px) {
  .dash, .task-layout { grid-template-columns: minmax(0, 1fr); }
  .side-fixed { position: static; }
}
@media (max-width: 860px) {
  .rail-user { margin-top: 0; padding-top: 0; border-top: 0; grid-auto-flow: column; align-items: center; }
  .rail-me-text, .rail-bell span:not(.badge) { display: none; }
  .board { grid-template-columns: repeat(4, 82vw); }
}


/* =====================================================================
   Официальные формы: оглавление, карточки записей, предупреждения, справочники
   ===================================================================== */

.notice-warn { background: var(--ochre-bg); color: var(--ochre); }
.field-warn, .cell-warn { color: var(--ochre); font-size: 13px; font-weight: 500; line-height: 1.35; }
.cell-warn { display: block; margin-top: 4px; max-width: 260px; }
.field-wide { grid-column: 1 / -1; }
.shared-calc { background: #ECEFEA; color: var(--muted); }
input.is-computed { background: var(--paper); border-style: dashed; color: var(--muted); }
.table-block { display: grid; gap: 0; }

/* Оглавление длинной формы */
.form-toc { columns: 2 280px; column-gap: 28px; margin-bottom: 20px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.form-toc ul { list-style: none; margin: 0 0 12px; padding: 0; }
.toc-group { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); break-after: avoid; }
.form-toc li { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; break-inside: avoid; font-size: 14px; }
.form-toc li a { color: var(--ink); text-decoration: none; }
.form-toc li a:hover { color: var(--moss); text-decoration: underline; }
.form-toc li.is-off a { color: var(--muted); text-decoration: line-through; }
.toc-num { display: inline-block; min-width: 2.2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.toc-badge { padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.toc-error { background: var(--error-bg); color: var(--error); }
.toc-warn { background: var(--ochre-bg); color: var(--ochre); }

/* Записи-карточки для широких разделов */
.cards { display: grid; gap: 14px; }
.card-row { position: relative; margin: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 12px; background: #FBFCFA; min-width: 0; }
.card-row legend { padding: 0 6px; margin-left: -6px; font-weight: 600; font-size: 14px; }
.card-no { color: var(--muted); font-variant-numeric: tabular-nums; }
.card-remove { position: absolute; top: 6px; right: 6px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; }
.card-grid .field-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.card-grid input, .card-grid select { width: 100%; }
.card-sub { grid-column: 1 / -1; margin: 8px 0 -4px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; font-weight: 700; color: var(--moss-dark); }
.card-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cards-empty { margin: 0 0 4px; }

/* Справочники */
.dict-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dict-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--tint); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.dict-tabs a:hover { background: #DCE5D6; }
.dict-tabs a[aria-current] { background: var(--forest); color: #fff; }
.dict-tabs a[aria-current] .count { background: rgba(255, 255, 255, .18); color: #fff; }
.dict-stats { margin: 0 0 18px; }
.grid tr.is-inactive td { color: var(--muted); }
.grid tr.is-inactive strong { text-decoration: line-through; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--moss); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--moss-dark); }
.link-btn:disabled, .btn:disabled { opacity: .55; cursor: default; }

/* Загрузка справочников из Росприроднадзора */
.nsi-import { margin: -8px 0 22px; }
.nsi-import-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.nsi-import-head .meta { margin: 0; }
.nsi-import progress { display: block; width: 100%; height: 8px; margin: 14px 0 12px; border: 0; border-radius: 999px; background: var(--tint); overflow: hidden; appearance: none; }
.nsi-import progress::-webkit-progress-bar { background: var(--tint); border-radius: 999px; }
.nsi-import progress::-webkit-progress-value { background: var(--moss); border-radius: 999px; transition: width .3s; }
.nsi-import progress::-moz-progress-bar { background: var(--moss); border-radius: 999px; }
.nsi-import-list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.nsi-import-list li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.nsi-import-list li:last-child { border-bottom: 0; }
.nsi-import-list .nsi-state { text-align: right; font-variant-numeric: tabular-nums; }
.nsi-import-list li.is-running { color: var(--ink); font-weight: 500; }
.nsi-import-list li.is-done .nsi-state { color: var(--moss-dark); }
.nsi-import-list li.is-error .nsi-state { color: var(--error); max-width: 70%; overflow-wrap: anywhere; }
.nsi-import [data-nsi-reload] { margin-top: 12px; }
.nsi-import [hidden] { display: none; }

/* Таблицы с постоянными строками (2-ТП): код строки, итоги */
.grid.fixed .row-head { text-align: left; font-weight: 500; font-size: 14px; color: var(--ink); padding: 8px 12px; min-width: 240px; white-space: normal; background: none; border-bottom: 1px solid var(--line); }
.grid.fixed .row-code { display: inline-block; min-width: 2.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.grid.fixed tr.is-sum .row-head { font-weight: 700; }
.grid.fixed tr.is-sum td { background: #F8FAF6; }

/* Карточки реквизитов заказчика и объекта */
.back-link { display: inline-block; margin-bottom: 6px; color: var(--muted); font-size: 14px; text-decoration: none; }
.back-link:hover { color: var(--moss-dark); }
.flag-warn { background: var(--ochre-bg); color: var(--ochre); }
.section-tools { margin: -6px 0 14px; font-size: 14px; }
.card-form .actions { justify-content: flex-end; }
.req-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.req-summary .small { color: var(--muted); }
.obj-actions { display: grid; gap: 8px; margin-top: 12px; }
.obj-actions > a { width: 100%; }

/* Заполнение по ИНН (DaData) */
.party-lookup { grid-column: span 2; }
.party-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 44px; }
.party-status { color: var(--muted); font-size: 13.5px; line-height: 1.4; max-width: 60ch; }
.party-status.is-ok { color: var(--moss-dark); }
.party-status.is-warn { color: var(--ochre); font-weight: 500; }
.party-status.is-error { color: var(--error); font-weight: 500; }
.field.is-filled input, .field.is-filled select { border-color: var(--moss); background: #F3F8EC; }
@media (max-width: 860px) { .party-lookup { grid-column: auto; } }

/* Декларация о плате: сводка по ОКТМО */
.pay-summary { margin-top: 18px; }
.pay-summary .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-summary tfoot th { text-align: right; }
.pay-summary tfoot th:first-child { text-align: left; }

/* Баннер «Мой день»: листва ЭкоЦентра */
.hero { position: relative; margin: 0 0 26px; padding: 30px 32px; min-height: 168px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap;
  border-radius: 20px; overflow: hidden; color: var(--ink);
  background: linear-gradient(90deg, rgba(255, 253, 246, .96) 0%, rgba(255, 253, 246, .85) 38%, rgba(255, 253, 246, 0) 72%), url("/img/leaves.jpg") 70% 40% / cover; }
.hero h1 { font-size: 32px; }
.hero .meta { margin-top: 8px; }
.hero .btn { box-shadow: var(--lift); }
@media (max-width: 860px) { .hero { padding: 22px 18px; min-height: 140px; background-position: 80% 40%; } .hero h1 { font-size: 25px; } }

/* Статусы работы и этапы задач */
.board { grid-template-columns: repeat(6, minmax(232px, 1fr)); }
.tstatus-collecting { background: #F3EEDC; color: #7A5F12; }
.tstatus-in_progress { background: #E3ECF3; color: #2F5E7E; }
.tstatus-approval { background: var(--ochre-bg); color: var(--ochre); }
.tstatus-done { background: var(--ok-bg); color: var(--moss-dark); }
.tstatus-handed { background: var(--leaf-bg); color: var(--forest); }
.card-org { font-size: 13px; color: var(--ochre); font-weight: 500; }
.card-stage { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.stage-dots { display: inline-flex; gap: 3px; flex: none; }
.stage-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.stage-dots i.is-done { background: var(--moss); }
.stage-dots i.is-current { background: var(--surface); box-shadow: inset 0 0 0 2px var(--moss); }

.status-panel { margin-bottom: 18px; }
.status-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.status-step { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 14px/1.2 var(--sans); cursor: pointer; }
.status-step:hover { border-color: var(--moss); color: var(--moss-dark); }
.status-step[aria-pressed="true"] { background: var(--moss); border-color: var(--moss); color: #fff; font-weight: 600; }
.status-org { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; font-size: 14px; color: var(--muted); }
.status-org input { flex: 1; min-width: 0; }

.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stages li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.stages li:last-child { border-bottom: 0; }
.stage-num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--muted); font-weight: 700; font-size: 13px; }
.stages li.is-done .stage-num { background: var(--moss); color: #fff; }
.stages li.is-done strong { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.stages li.is-current .stage-num { background: var(--surface); box-shadow: inset 0 0 0 2px var(--moss); color: var(--moss-dark); }
.stage-main { display: grid; gap: 2px; min-width: 0; }

.stages-fieldset { margin: 4px 0 0; padding: 12px 14px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.stages-fieldset legend { padding: 0 6px; font-weight: 600; font-size: 14px; }
.stage-list { display: grid; gap: 10px; margin-bottom: 10px; }
.stage-edit { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) 150px auto auto; gap: 8px 10px; align-items: end; }
.stage-edit label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.stage-done { display: flex !important; align-items: center; gap: 6px; padding-bottom: 10px; white-space: nowrap; }
.stage-edit .icon-btn { margin-bottom: 4px; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
@media (max-width: 860px) {
  .stage-edit { grid-template-columns: 1fr 1fr; }
  .stage-edit label:first-of-type { grid-column: 1 / -1; }
  .stages li { grid-template-columns: 30px minmax(0, 1fr); }
  .stages li > :nth-child(n+3) { grid-column: 2; justify-self: start; }
}

/* Выгрузки журнала */
.download-form { margin: 0 0 14px; }
.download-title { margin: 0 0 6px; }
.download-row { display: flex; gap: 8px; align-items: center; }
.download-row select { flex: 1; min-width: 0; }
.grid.fixed td.is-crossed { text-align: center; color: var(--muted, #8a8f96); background: rgba(0, 0, 0, .03); }

/* Консультант */
.chat { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.chat-context { margin: 0; padding: 10px 14px; border-radius: var(--r-control); background: var(--tint); font-size: 14px; }
.chat-log { display: flex; flex-direction: column; gap: 12px; min-height: 160px; }
.chat-empty p { margin: 0 0 10px; color: var(--muted); }
.chat-hints { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-hint { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 999px;
  padding: 7px 14px; font: 500 14px/1.3 var(--sans); cursor: pointer; text-align: left; }
.chat-hint:hover { border-color: var(--moss); color: var(--moss-dark); }
.chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; overflow-wrap: anywhere; }
.chat-msg p { margin: 0 0 8px; } .chat-msg p:last-child, .chat-msg ul:last-child, .chat-msg ol:last-child { margin-bottom: 0; }
.chat-msg ul, .chat-msg ol { margin: 0 0 8px; padding-left: 20px; }
.chat-msg h3 { font: 600 15px/1.3 var(--sans); margin: 6px 0; }
.chat-msg.is-user { align-self: flex-end; background: var(--moss); color: #fff; white-space: pre-wrap; }
.chat-msg.is-bot { align-self: flex-start; background: #F4F2EA; color: var(--ink); }
.chat-msg.is-error { align-self: flex-start; background: var(--error-bg); color: var(--error); }
.chat-msg.is-pending { color: var(--muted); font-style: italic; }
.chat-form { display: flex; gap: 10px; align-items: flex-end; }
.chat-form textarea { flex: 1; min-height: 48px; resize: vertical; }
@media (max-width: 640px) { .chat-form { flex-direction: column; align-items: stretch; } .chat-msg { max-width: 100%; } }

/* Справочники: источник и добавление записи */
.dict-source { margin: -6px 0 18px; font-size: 14px; color: var(--muted); max-width: 900px; }
.dict-source strong { color: var(--ink); font-weight: 600; }
.dict-add { margin: -12px 0 24px; }
.dict-add summary { cursor: pointer; font-weight: 600; color: var(--moss-dark); }
.dict-add-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 14px; }
.dict-add-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 500; color: var(--muted); }
.dict-add-name { flex: 1 1 320px; }
.inline-form { display: inline; }
.inline-form .icon-btn { width: 26px; height: 26px; font-size: 17px; vertical-align: middle; }

.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.chat-sources { margin: 8px 0 0 !important; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.kb-add { margin-bottom: 24px; max-width: 900px; }
.kb-add summary { cursor: pointer; font-weight: 600; color: var(--moss-dark); }
.kb-form { margin-top: 14px; }
.kb-form textarea { width: 100%; }
.kb-tag { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: var(--tint); color: var(--moss-dark); font-size: 12px; font-weight: 600; white-space: nowrap; }
.kb-text { max-width: 900px; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.kb-form label.check { display: flex; font-size: 14px; color: var(--ink); }

/* Пароль: кнопка-глаз внутри поля */
.pass-wrap { position: relative; display: block; }
.pass-wrap input { width: 100%; padding-right: 44px; }
.pass-eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; background: none; border-radius: var(--r-control); color: var(--muted); cursor: pointer; }
.pass-eye:hover { color: var(--moss-dark); background: var(--tint); }
.pass-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pass-eye[aria-pressed="false"] .pass-eye-off { display: none; }
.handover { max-width: 1040px; margin-top: 20px; }