/* Согласование счетов — «бухгалтерская книга»
   Палитра: paper #F3F5F4 · ink #1B2A2F · ledger green #0E6E5C ·
   stamp red #A32D2D · line #D6DCDA */

:root {
  --paper: #F3F5F4;
  --card: #FFFFFF;
  --ink: #1B2A2F;
  --muted: #5F6E6B;
  --line: #D6DCDA;
  --green: #0E6E5C;
  --green-dark: #085041;
  --red: #A32D2D;
  --amber: #854F0B;
  --amber-bg: #FAEEDA;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}
.mono, td.mono, .mono a { font-family: "IBM Plex Mono", monospace; font-size: 0.92em; }
a { color: var(--green-dark); }
h1, h2, h3 { font-weight: 600; margin: 0 0 12px; }
h2 { font-size: 17px; letter-spacing: 0.01em; }
.muted { color: var(--muted); }
.error { color: var(--red); }

/* Шапка */
.topbar {
  display: flex; align-items: center; gap: 28px;
  background: var(--card); border-bottom: 2px solid var(--ink);
  padding: 10px 28px;
}
.brand { font-weight: 600; text-decoration: none; color: var(--ink); }
.topbar nav { display: flex; gap: 18px; flex: 1; }
.topbar nav a { text-decoration: none; color: var(--muted); padding: 4px 2px; }
.topbar nav a.on { color: var(--ink); border-bottom: 2px solid var(--green); }
.who { display: flex; align-items: center; gap: 12px; }
.nomax { font-size: 12px; color: var(--amber); background: var(--amber-bg);
  padding: 2px 8px; border-radius: 3px; }

.wrap { max-width: 1080px; margin: 28px auto; padding: 0 20px; }

/* Панели */
.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; padding: 20px 24px; margin-bottom: 22px;
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.count { font-family: "IBM Plex Mono", monospace; color: var(--green-dark); }

/* «Гроссбух» — таблицы с горизонтальными линиями */
table.ledger { width: 100%; border-collapse: collapse; }
.ledger th { text-align: left; font-weight: 500; color: var(--muted);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 6px 10px; border-bottom: 2px solid var(--ink); }
.ledger td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger tr:hover td { background: #FAFBFB; }

/* Фирменный элемент — штампы статусов */
.stamp {
  display: inline-block; font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 2px 10px;
  border: 1.5px solid currentColor; border-radius: 3px;
  transform: rotate(-1.2deg); white-space: nowrap;
}
.stamp.big { font-size: 14px; padding: 5px 16px; border-width: 2px; transform: rotate(-2deg); }
.stamp-pending  { color: var(--amber); background: var(--amber-bg); }
.stamp-approved { color: var(--green-dark); background: #E1F5EE; }
.stamp-rejected { color: var(--red); background: #FCEBEB; }
.stamp-neutral  { color: var(--muted); background: var(--paper); }

.tag { font-size: 12px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 7px; color: var(--muted); }
.tag.warn { color: var(--amber); background: var(--amber-bg); border-color: transparent; }

/* Формы */
input, select, button, textarea {
  font: inherit; color: inherit;
}
input, select {
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px;
  background: #fff; width: 100%;
}
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
label input, label select { margin-top: 4px; }
button { cursor: pointer; border-radius: 4px; border: 1px solid transparent; padding: 9px 18px; }
button.primary { background: var(--green); color: #fff; font-weight: 500; }
button.primary:hover { background: var(--green-dark); }
button.danger { background: var(--red); color: #fff; }
button.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
button.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn { display: inline-block; text-decoration: none; border: 1px solid var(--line);
  border-radius: 4px; padding: 6px 14px; color: var(--ink); background: #fff; }
.btn:hover { border-color: var(--ink); }
.small { padding: 5px 12px; font-size: 13.5px; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; }

.stack { display: grid; gap: 14px; }
.filters { display: flex; gap: 10px; align-items: end; margin-bottom: 16px; flex-wrap: wrap; }
.filters select, .filters input { width: auto; min-width: 180px; }

/* Вход */
.login-card {
  max-width: 400px; margin: 10vh auto; background: var(--card);
  border: 1px solid var(--line); border-top: 3px solid var(--green);
  border-radius: 6px; padding: 34px 36px;
}
.login-card .stamp { margin-bottom: 18px; }

/* Карточка счёта */
.props { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin: 14px 0; }
.props dt { color: var(--muted); }
.props dd { margin: 0; }
.preview { max-width: 100%; border: 1px solid var(--line); border-radius: 4px; margin-top: 8px; }
.preview.pdf { width: 100%; height: 700px; background: #fff; }

/* Цепочка согласования */
ol.chain { list-style: none; counter-reset: step; padding: 0; margin: 0 0 16px; }
ol.chain li {
  counter-increment: step; padding: 8px 0 8px 42px; position: relative;
  border-bottom: 1px dashed var(--line);
}
ol.chain li::before {
  content: counter(step); position: absolute; left: 4px; top: 7px;
  width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 22px;
  border: 1.5px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: 12px;
  color: var(--muted); background: #fff;
}
ol.chain li.done::before { content: "✓"; color: #fff; background: var(--green); border-color: var(--green); }
ol.chain li.current { font-weight: 600; }
ol.chain li.current::before { border-color: var(--amber); color: var(--amber); }

.actions { display: flex; gap: 14px; align-items: start; flex-wrap: wrap; margin-top: 8px; }
.reject-form { display: flex; gap: 10px; flex: 1; min-width: 320px; }
.reminder-form { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.reminder-form label { min-width: 200px; }

.city-block { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.city-block.inactive { opacity: 0.55; }

/* FullCalendar подгонка */
#calendar { --fc-border-color: var(--line); --fc-button-bg-color: var(--green);
  --fc-button-border-color: var(--green); --fc-button-hover-bg-color: var(--green-dark);
  --fc-button-hover-border-color: var(--green-dark); --fc-today-bg-color: #E1F5EE; }
.fc a { color: var(--ink); text-decoration: none; }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .props { grid-template-columns: 1fr; }
  .wrap { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Доработки: фото, оплата, цепочка, суммы --- */

/* Маленькое превью документа с увеличением по клику */
.thumb {
  display: block;
  width: auto !important; height: auto !important;
  max-width: 180px !important; max-height: 180px !important;
  border: 1px solid var(--line);
  border-radius: 6px; cursor: zoom-in; margin-top: 8px; object-fit: contain;
  transition: max-width .2s, max-height .2s;
}
.thumb.zoomed {
  max-width: 520px !important; max-height: 70vh !important; cursor: zoom-out;
}

/* Кнопки под свойствами счёта (выгрузить / удалить) */
.doc-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 4px 0 12px;
}

/* Колонки с числами — вправо */
.ledger .num, td.num { text-align: right; white-space: nowrap; }
.ledger tfoot td { border-top: 2px solid var(--ink); border-bottom: none; padding-top: 10px; }

/* Теги оплаты */
.tag.paid   { color: var(--green-dark); background: #E1F5EE; border-color: transparent; white-space: nowrap; }
.tag.unpaid { color: var(--amber); background: var(--amber-bg); border-color: transparent; white-space: nowrap; }

/* Разделитель групп в таблице счетов */
.ledger tr.group-divider td {
  background: var(--paper); color: var(--muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 6px 10px; border-bottom: 2px solid var(--ink);
}

/* Массовые действия под таблицей */
.bulk-actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}

/* Цепочка согласования: drag-хэндл и кнопки строки */
ol.chain.picked li {
  display: flex; align-items: center; gap: 10px;
  background: #fff; padding-left: 8px;
}
ol.chain.picked li .drag {
  cursor: grab; color: var(--muted); font-size: 18px; line-height: 1;
  user-select: none;
}
ol.chain.picked li .who-name { flex: 1; }
ol.chain.picked li .row-btns { display: flex; gap: 4px; }
ol.chain.picked li.sortable-ghost { opacity: .4; }
ol.chain.picked li.sortable-chosen { background: #F0F7F5; }

/* Легенда календаря */
.cal-legend { display: flex; gap: 18px; margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.cal-legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle; }

/* --- Переписка по счёту (вопрос согласующего ↔ ответ инициатора) --- */
.thread { list-style: none; margin: 0 0 16px; padding: 0; }
.thread li {
  border-left: 3px solid var(--line, #d8dee6);
  padding: 8px 12px; margin: 0 0 10px; border-radius: 0 6px 6px 0;
  background: rgba(0, 0, 0, .02);
}
.thread li.from-approver { border-left-color: #d09a2c; }
.thread li.from-initiator { border-left-color: #3a7bd5; }
.thread-head { display: flex; gap: 8px; align-items: baseline;
               flex-wrap: wrap; font-size: .9em; margin-bottom: 4px; }
.thread-body { white-space: pre-wrap; word-break: break-word; }

/* --- Список счетов: кликабельные строки, сортировка, комментарий --- */
tr.row-link { cursor: pointer; }
tr.row-link:hover { background: rgba(58, 123, 213, .07); }
tr.row-link:focus-visible { outline: 2px solid #3a7bd5; outline-offset: -2px; }
.row-title { color: inherit; text-decoration: none; }
tr.row-link:hover .row-title { text-decoration: underline; }
a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
a.sort:hover { text-decoration: underline; }
a.sort.active { color: #3a7bd5; }
/* Комментарий: полный текст с переносами. Ширину держит div, а не td:
   у таблиц с авто-раскладкой браузеры игнорируют max-width на ячейке. */
.comment-cell { max-width: 190px; font-size: .88em; color: var(--muted); }
.comment-cell .clip {
  max-width: 190px; white-space: normal; word-break: break-word;
}
/* Колонки, которые не должны переносить текст и раздувать строку */
.ledger td.mono, .ledger th.num { white-space: nowrap; }

/* Список счетов шире прочих страниц: 11 колонок в 1080px не помещаются.
   table-scroll — страховка: на узком экране таблица прокручивается внутри
   панели, а не вылезает за её край. */
.wrap.wide { max-width: 1560px; }
.table-scroll { overflow-x: auto; }
@media (max-width: 720px) { .wrap.wide { max-width: 100%; } }

/* --- Несколько файлов у счёта --- */
ul.files { list-style: none; margin: 0; padding: 0; }
ul.files li { display: flex; gap: 8px; align-items: center; margin: 2px 0; }
.file-caption { margin: 14px 0 4px; color: var(--muted); font-size: 12.5px; }

/* --- Стрелка «Назад» --- */
.back-arrow {
  display: inline-block; margin: 0 0 10px; color: var(--muted);
  text-decoration: none; font-size: 14px;
}
.back-arrow:hover { color: inherit; text-decoration: underline; }

/* --- Три группы списка счетов --- */
tr.group-divider.gd-pending td { color: #9a6b00; }
tr.group-divider.gd-rejected td { color: #a33; }

/* --- Раскрывающаяся цепочка согласования --- */
/* Кнопка выглядит ровно как обычный штамп статуса: сбрасываем только
   браузерные стили button, всё остальное наследуется от .stamp */
button.stamp-btn {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; font-weight: 500; line-height: normal;
  margin: 0;
}
button.stamp-btn:focus { outline: none; }
button.stamp-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.stamp-btn .caret { display: inline-block; transition: transform .3s ease;
                    margin-left: 3px; font-size: 10px; }
.stamp-btn.open .caret { transform: rotate(180deg); }
/* Плавное раскрытие без фиксированной высоты: grid 0fr -> 1fr.
   Скрытие по умолчанию — атрибутом hidden в разметке, поэтому цепочка
   не видна даже при устаревшем CSS из кэша. */
tr.chain-row > td { padding: 0 12px; border-bottom: 0; }
tr.chain-row.open > td { border-bottom: 1px solid var(--line, #e3e7ee); }
.chain-wrap { display: grid; grid-template-rows: 0fr;
              transition: grid-template-rows .35s ease; }
tr.chain-row.open .chain-wrap { grid-template-rows: 1fr; }
.chain-inner { overflow: hidden; min-height: 0; }
/* Карточка-«квадратик», которая и выезжает */
.chain-card {
  margin: 8px 0 12px; padding: 10px 16px 12px;
  background: #fbf7ee; border: 1px solid #ecdfc0; border-radius: 8px;
  width: max-content; max-width: 420px;
  /* margin-left выставляет JS — карточка встаёт под кнопкой статуса */
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity .3s ease, transform .3s ease, margin-left .2s ease;
}
tr.chain-row.open .chain-card { opacity: 1; transform: none; }
.chain-title { font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
               color: #9a6b00; margin-bottom: 6px; }
ul.chain { list-style: none; margin: 0; padding: 0; }
ul.chain li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
/* Скрытие «до раскрытия» — ТОЛЬКО внутри раскрывающейся строки списка счетов.
   Без этой привязки та же цепочка на карточке счёта оставалась невидимой. */
tr.chain-row ul.chain li { opacity: 0; transform: translateY(-4px);
                           transition: opacity .3s ease, transform .3s ease; }
tr.chain-row.open ul.chain li { opacity: 1; transform: none; }
/* лёгкий каскад появления имён */
tr.chain-row.open ul.chain li:nth-child(2) { transition-delay: .05s; }
tr.chain-row.open ul.chain li:nth-child(3) { transition-delay: .1s; }
tr.chain-row.open ul.chain li:nth-child(4) { transition-delay: .15s; }
tr.chain-row.open ul.chain li:nth-child(n+5) { transition-delay: .2s; }
ul.chain .mark { width: 18px; text-align: center; font-weight: 600; flex: 0 0 18px; }
ul.chain li.st-done .mark { color: #1f7a3f; }
ul.chain li.st-rejected .mark { color: var(--red, #c0392b); }
ul.chain li.st-skipped .mark, ul.chain li.st-none .mark,
ul.chain li.st-current .mark { color: #b9c0ca; }
ul.chain li.st-current .name, ul.chain li.st-rejected .name { font-weight: 600; }
ul.chain li.st-none .name { color: #9aa2ad; }
ul.chain .tag.now { background: #fff3d6; color: #9a6b00; }
ul.chain .tag.no { background: #fbe4e2; color: var(--red, #c0392b); }
ul.chain .note { color: #9aa2ad; font-size: .88em; }
ul.chain .cmt { color: #667; font-size: .9em; }
ul.chain li { flex-wrap: wrap; }
/* Карточка цепочки у согласованных/отклонённых — в тон статусу */
tr.chain-row .chain-card { background: #fbf7ee; border-color: #ecdfc0; }
tr.chain-row.for-approved .chain-card { background: #f2f8f4; border-color: #cfe4d6; }
tr.chain-row.for-approved .chain-title { color: #1f7a3f; }
tr.chain-row.for-rejected .chain-card { background: #fdf3f2; border-color: #f0d4d1; }
tr.chain-row.for-rejected .chain-title { color: var(--red, #c0392b); }

/* --- Бюджеты --- */
.budget-list { list-style: none; margin: 8px 0 0; padding: 0;
               display: flex; flex-wrap: wrap; gap: 8px; }
table.budget { font-size: 12.5px; border-collapse: collapse; }
table.budget th, table.budget td { padding: 3px 6px; white-space: nowrap; }
table.budget th.mon { text-align: center; border-left: 1px solid var(--line, #e3e7ee); }
table.budget tr.sub th { font-size: 10.5px; color: var(--muted); font-weight: 500; }
table.budget td.sticky, table.budget th.sticky {
  position: sticky; left: 0; background: #fff; z-index: 2;
  min-width: 220px; max-width: 280px; white-space: normal;
  border-right: 1px solid var(--line, #e3e7ee);
}
table.budget tr.bgroup td { background: #f3f1ea; font-weight: 600;
  text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
table.budget tr.bsub td { border-top: 1px solid var(--line, #e3e7ee);
  font-weight: 600; background: #fbfaf6; }
table.budget tr.bsub td.sticky { background: #fbfaf6; }
table.budget tr.bgrand td { border-top: 2px solid #333; font-weight: 700;
  background: #f6f4ee; }
table.budget tr.bgrand td.sticky { background: #f6f4ee; }
table.budget td.fact { color: #556; border-right: 1px solid var(--line, #e3e7ee); }
table.budget td.fact.over { color: var(--red, #c0392b); font-weight: 600; }
table.budget td.total { border-left: 2px solid var(--line, #e3e7ee); }
input.plan { width: 74px; border: 1px solid transparent; border-radius: 3px;
  padding: 1px 4px; font: inherit; text-align: right; background: transparent; }
input.plan:hover { border-color: var(--line, #dce1e8); background: #fff; }
input.plan:focus { border-color: var(--amber, #d09a2c); background: #fff; outline: none; }
input.plan.saved { background: #e1f5ee; }
input.plan.err { background: #fcebeb; border-color: var(--red, #c0392b); }


/* --- Список счетов: ужимаем колонки, чтобы таблица влезала без прокрутки --- */
table.ledger { table-layout: auto; }
.ledger th, .ledger td { padding-left: 7px; padding-right: 7px; }
/* Длинные текстовые колонки переносим, а не растягиваем таблицу */
.ledger .cell-sender { max-width: 130px; white-space: normal; word-break: break-word; }
.ledger .cell-desc   { max-width: 230px; white-space: normal; word-break: break-word; }
.ledger .cell-city   { max-width: 110px; white-space: normal; }
.ledger .cell-now    { max-width: 130px; white-space: normal; word-break: break-word;
                       font-size: .92em; }
.ledger .stamp, .ledger .stamp-btn { font-size: 10.5px; padding: 2px 6px; }

/* Цепочка на карточке счёта — те же отметки, что и в списке, но крупнее */
.panel > ul.chain { margin: 0 0 4px; }
.panel > ul.chain li { padding: 5px 0; font-size: 14px;
                       border-bottom: 1px dashed var(--line, #e8ebf0); }
.panel > ul.chain li:last-child { border-bottom: 0; }
.panel > ul.chain .mark { font-size: 15px; }

/* --- Галочки: статья бюджета, чеки подотчёта --- */
.chk { font-size: 16px; line-height: 1; color: #b9c0ca; border: 0;
       background: none; padding: 0 2px; cursor: default; }
button.chk { cursor: pointer; }
.chk.on { color: #1f7a3f; }
td .overdue, .overdue { color: var(--red, #c0392b); font-weight: 600; }

/* --- Высокий приоритет --- */
.urgent { color: var(--red, #c0392b); font-weight: 700; margin-right: 2px; }
tr.urgent-row { background: #fff8f7; }
tr.urgent-row:hover { background: #ffecea; }
.btn.danger { background: var(--red, #c0392b); color: #fff; border-color: transparent; }

/* --- Бюджет: аккуратная таблица + режим «Структура» --- */
table.budget { font-size: 13px; }
table.budget th, table.budget td { padding: 5px 8px; }
/* Обе строки шапки прилипают при вертикальной прокрутке */
table.budget thead th { position: sticky; top: 0; background: #fff; z-index: 3; }
table.budget thead tr.sub th { top: 29px; border-bottom: 2px solid var(--ink); }
table.budget thead th.sticky { z-index: 4; }
table.budget thead tr:first-child th { border-bottom: 0; }
table.budget th.mon { border-bottom: 0; padding-bottom: 1px; }
/* Граница между месяцами и лёгкая полоска между строками */
table.budget td.plan-cell { border-left: 1px solid var(--line, #e3e7ee); }
table.budget tbody tr:hover td { background: #F6FAF8; }
table.budget tbody tr:hover td.sticky { background: #F6FAF8; }
table.budget td.fact { color: #6b7a76; font-size: 12px; }
table.budget td.fact.over { color: var(--red, #c0392b); font-weight: 600; }
table.budget td.total { font-weight: 600; background: #FBFCFB; }
/* Разделы: зелёная плашка с акцентом */
table.budget tr.bgroup td {
  background: #EAF3EF; color: var(--green-dark);
  border-top: 2px solid var(--green); border-bottom: 1px solid var(--line);
  font-weight: 600; text-transform: uppercase; font-size: 11.5px;
  letter-spacing: .05em; padding: 6px 8px;
}
table.budget tr.bgroup td.sticky { background: #EAF3EF; }
table.budget tr.bgroup:hover td { background: #E1EEE8; }
table.budget tr.bsub td { background: #F4F6F5; }
table.budget tr.bsub td.sticky { background: #F4F6F5; }
table.budget tr.bgrand td { background: #EFF2F0; border-top: 2px solid var(--ink); }
table.budget tr.bgrand td.sticky { background: #EFF2F0; }
/* Имя статьи/раздела: флекс, чтобы кнопки управления вставали справа */
table.budget td.bname, table.budget tr.bgroup td {
  vertical-align: middle;
}
table.budget td.bname .grow, table.budget tr.bgroup .grow { margin-right: 8px; }
/* Кнопки управления структурой — видны только в режиме «Структура» */
.bctl { display: none; gap: 3px; vertical-align: middle; white-space: nowrap; }
.managing .bctl { display: inline-flex; }
.managing td.bname, .managing tr.bgroup td.sticky {
  min-width: 300px; max-width: 340px;
}
table.budget td.bname .grow { display: inline-block; }
button.ico {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 4px; padding: 1px 7px; font-size: 12px; line-height: 1.5;
  cursor: pointer; text-transform: none; letter-spacing: normal;
}
button.ico:hover { border-color: var(--ink); color: var(--ink); }
button.ico.del:hover { border-color: var(--red); color: var(--red); background: #FCEBEB; }
button.ico.add { color: var(--green-dark); }
button.ico.add:hover { border-color: var(--green); background: #E1F5EE; }
.bctl-footer { margin-top: 10px; }
/* Список разделов при переносе статьи (⇄) */
select.grp-pick {
  width: auto; min-width: 130px; margin-left: 4px;
  padding: 1px 4px; font-size: 12px; border-color: var(--green);
}
#manage-toggle.primary { background: var(--green); color: #fff; border-color: var(--green); }