/* ============================================================
   Пергамент под чистым стеклом.
   Тёплая бумага вместо белого, плоские поверхности, волосяные
   линии вместо теней, начертания только 400 и 500.
   ============================================================ */

:root{
  /* Системные элементы — выпадающие списки, выбор даты, полосы прокрутки —
     браузер рисует сам. Без этой строки в тёмной теме они остаются светлыми
     и текст в них пропадает. */
  color-scheme:light;

  /* поверхности */
  --parchment:#faf8f5;      /* холст страницы */
  --paper:#fdfbfa;          /* карточка — на шаг светлее холста */
  --parchment-deep:#f4f1ea;  /* боковая панель, шапка таблиц */

  /* линии и текст */
  --mist:#d1d1cd;           /* волосяная граница */
  --ash:#92918b;            /* третичный текст */
  --graphite:#72706b;       /* вторичный текст, иконки */
  --ink:#27251e;            /* основной текст, заливка кнопок */

  /* единственный хроматический акцент */
  --teal:#016a71;
  --teal-soft:#e6f0f0;

  /* служебные состояния — приглушённые под бумагу */
  --ok:#2f6b4f;
  --warn:#7a5c15;
  --danger:#9b3b32;
  --ok-bg:#eaf1ec;
  --warn-bg:#f5efe1;
  --danger-bg:#f6eae8;

  --r-card:16px; --r-input:12px; --r-btn:6px; --r-pill:9999px;
  --shadow:0 1px 2px rgba(0,0,0,.08);
  --ease:cubic-bezier(.32,.72,0,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--parchment);color:var(--ink);
  font:400 16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button,input,select,textarea{font:inherit}
h1,h2,h3{font-weight:500;letter-spacing:0;margin:0}
/* Браузерный <b> тянет 700 — система заканчивается на 500. */
b,strong{font-weight:500}
.screen{display:none}
.screen.active{display:block}
.hidden{display:none !important}

/* ---------- вход ---------- */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.auth__brand{
  background:var(--parchment-deep);border-right:1px solid var(--mist);
  padding:48px;display:flex;flex-direction:column;justify-content:center
}
/* Знак Buhless нарисован собственным градиентом и одинаково читается
   на светлом и тёмном фоне — перекрашивать его не нужно. */
.logo-img{height:34px;width:auto;flex:none;object-fit:contain;display:block}
.auth__brand .logo-img{height:48px;align-self:flex-start;margin-bottom:32px}
.brand__mid{max-width:420px}
.brand__mid h1{font-size:28px;line-height:1.25;margin:0 0 12px;font-weight:500}
.brand__mid p{color:var(--graphite);margin:0 0 24px;font-size:16px}
.feat{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--mist)}
.feat svg{flex:none;margin-top:3px;stroke:var(--graphite)}
.feat b{display:block;font-size:14px;font-weight:500;color:var(--ink)}
.feat span{font-size:14px;line-height:1.43;color:var(--graphite)}
.brand__foot{font-size:12px;line-height:1.5;color:var(--graphite);margin-top:auto;padding-top:36px}
.brand__foot a{color:var(--graphite);text-decoration:none}

.auth__form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.card{
  width:100%;max-width:420px;background:var(--paper);
  border:1px solid var(--mist);border-radius:var(--r-card);padding:28px
}
.card h2{margin:0 0 6px;font-size:20px;font-weight:500}
.card .sub{margin:0 0 20px;color:var(--graphite);font-size:14px}

/* ---------- поля ---------- */
label{display:block;font-size:12px;font-weight:500;margin:0 0 6px;color:var(--graphite)}
.field{margin-bottom:16px}
input[type=text],input[type=date],input[type=number],input[type=file],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--mist);border-radius:var(--r-input);
  background:var(--parchment);color:var(--ink);font-size:14px;
  transition:border-color .15s var(--ease)
}
input::placeholder,textarea::placeholder{color:var(--graphite)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);background:var(--paper)}
input.bad{border-color:var(--danger)}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2372706b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
#key{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:14px;line-height:1.5;
  word-break:break-all;resize:vertical;min-height:76px}
/* Подсказки и пустые состояния — функциональный текст, поэтому вторичный
   серый, а не третичный: на тёплом фоне тот не проходит порог читаемости. */
.hint{font-size:12px;line-height:1.43;color:var(--graphite);margin-top:6px}

/* ---------- кнопки ---------- */
.btn{
  width:100%;padding:10px 12px;border:1px solid transparent;border-radius:var(--r-input);
  cursor:pointer;font-weight:500;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s var(--ease),color .15s
}
.btn[disabled]{opacity:.45;cursor:default}
/* Единственная заливная кнопка в системе — тёмная тушь по пергаменту. */
.btn--primary{background:var(--ink);color:var(--parchment)}
.btn--primary:hover{background:#3a372e}
.btn--ghost{background:transparent;color:var(--graphite);border-color:var(--mist);border-radius:var(--r-btn)}
.btn--ghost:hover{color:var(--ink);border-color:var(--graphite)}

.note{margin-top:16px;padding:10px 12px;border-radius:var(--r-input);font-size:12px;line-height:1.43;
  border:1px solid var(--mist)}
.note--edge{background:var(--parchment);color:var(--graphite)}
.note--err{background:var(--danger-bg);border-color:#e2cdc9;color:var(--danger)}
.note--ok{background:var(--ok-bg);border-color:#cfdfd4;color:var(--ok)}

/* ---------- блокировка ---------- */
.block{max-width:440px;margin:88px auto;background:var(--paper);border:1px solid var(--mist);
  border-radius:var(--r-card);padding:32px;text-align:center}
.block h2{margin:14px 0 8px;font-size:20px;color:var(--danger);font-weight:500}
.block p{color:var(--graphite);font-size:14px;margin:0 0 16px}
.block .cd{font-family:ui-monospace,Consolas,monospace;font-size:30px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.block svg{stroke:var(--danger)}

/* ---------- шапка ---------- */
.top{
  background:var(--parchment-deep);border-bottom:1px solid var(--mist);
  padding:0 20px;display:flex;align-items:center;gap:16px;height:52px;
  position:sticky;top:0;z-index:20
}
.top .logo-img{height:30px}
nav{display:flex;gap:4px;flex:1;margin-left:8px;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{
  background:none;border:0;color:var(--graphite);padding:6px 12px;border-radius:var(--r-input);
  font-size:14px;font-weight:400;cursor:pointer;white-space:nowrap;transition:color .15s,background .15s
}
nav button:hover{color:var(--ink)}
nav button.on{background:var(--teal);color:#fff}
.session{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--graphite)}
.avatar{width:26px;height:26px;border-radius:var(--r-pill);background:var(--ink);
  display:grid;place-items:center;font-size:11px;font-weight:500;color:var(--parchment)}
.leave{background:transparent;border:1px solid var(--mist);color:var(--graphite);
  padding:5px 10px;border-radius:var(--r-btn);font-size:12px;cursor:pointer;transition:.15s}
.leave:hover{color:var(--ink);border-color:var(--graphite)}

/* ---------- каркас ---------- */
/* Эталон держит колонку в 900px, но здесь живут таблицы на семь столбцов —
   в 900px они складываются. Расширено ровно настолько, чтобы сроки
   и расчёт зарплаты читались без переносов. */
.wrap{max-width:1400px;margin:0 auto;padding:32px 20px 48px}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.page-h h1{margin:0 0 4px;font-size:20px;font-weight:500}
.page-h p{margin:0;color:var(--graphite);font-size:14px}
/* minmax(0,…) обязателен: без него ячейка сетки не может стать уже своего
   содержимого, и одна длинная строка в таблице слева съедает правую колонку. */
.cols{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
.cols > *{min-width:0}
.stack{display:flex;flex-direction:column;gap:16px}

.panel{background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-card);overflow:hidden}
.panel__h{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1px solid var(--mist)}
.panel__h h3{margin:0;font-size:14px;font-weight:500}
.panel__b{padding:16px}
/* Если колонок больше, чем помещается, панель прокручивается вбок —
   это честнее, чем расплющивать содержимое ячеек. */
.panel{overflow-x:auto}

.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--mist)}
.row:last-child{border-bottom:0}
.row__t{flex:1;min-width:0}
.row__t b{display:block;font-size:14px;font-weight:500}
.row__t span{font-size:12px;color:var(--graphite);display:block;overflow:hidden;text-overflow:ellipsis}

/* Метки — пилюли. Заливка только у активного состояния и «нового». */
.tag{font-size:11px;font-weight:500;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap;
  border:1px solid transparent}
.tag--ok{background:var(--ok-bg);color:var(--ok)}
.tag--warn{background:var(--warn-bg);color:var(--warn)}
.tag--danger{background:var(--danger-bg);color:var(--danger)}
.tag--mute{background:transparent;border-color:var(--mist);color:var(--graphite)}
.tag--tint{background:var(--teal);color:#fff}

.mini{padding:6px 12px;border:1px solid var(--mist);background:transparent;border-radius:var(--r-btn);
  font-size:12px;font-weight:400;color:var(--graphite);cursor:pointer;white-space:nowrap;transition:.15s}
.mini:hover{color:var(--ink);border-color:var(--graphite)}
.mini--go{background:var(--ink);border-color:var(--ink);color:var(--parchment)}
.mini--go:hover{background:#3a372e;color:var(--parchment)}
.mini--del{color:var(--danger);border-color:#e2cdc9}
.mini--del:hover{color:var(--danger);border-color:var(--danger)}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;font-weight:500;color:var(--graphite);letter-spacing:0;
  padding:10px 16px;background:var(--parchment-deep);border-bottom:1px solid var(--mist)}
td{padding:12px 16px;border-bottom:1px solid var(--mist);font-size:14px;vertical-align:middle;
  overflow-wrap:break-word}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--parchment)}
/* БИН, ИИН, РНН, адреса и маски ключей — это коды: перенос внутри них
   делает их нечитаемыми, поэтому строка всегда одна. */
.mono{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:12px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Исключение — сырой ответ службы: его переносить как раз нужно. */
pre.mono{white-space:pre-wrap;font-size:12px;margin:0}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sub2{color:var(--graphite);font-size:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.empty{padding:32px 16px;text-align:center;color:var(--graphite);font-size:14px}

.out{margin-top:12px;padding:12px;background:var(--parchment);border:1px solid var(--mist);
  border-radius:var(--r-input);font-size:14px}
.out dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.out dt{color:var(--graphite);font-size:12px}
.out dd{margin:0;font-weight:500;word-break:break-word;font-size:14px}
.keyout{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:14px;font-weight:500;
  word-break:break-all;line-height:1.6}

/* Плитки-показатели: та же карточка, единственная тень системы. */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.tile{background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-card);
  padding:16px;box-shadow:var(--shadow)}
.tile b{display:block;font-size:28px;font-weight:400;line-height:1.25;font-variant-numeric:tabular-nums;
  color:var(--ink);margin-bottom:2px}
.tile span{font-size:12px;color:var(--graphite)}
.tile--warn b{color:var(--warn)}
.tile--danger b{color:var(--danger)}
.tile--ok b{color:var(--ok)}

/* Счётчик открытых уведомлений на вкладке: если их нет, метка скрыта. */
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:6px;border-radius:var(--r-pill);background:var(--danger);color:#fff;
  font-size:11px;font-weight:500;vertical-align:middle}
nav button.on .badge{background:rgba(255,255,255,.25)}

/* Строка фильтров: слева — вид работы (главная ось), справа — уточнения.
   Раньше оба набора выглядели одинаковыми пилюлями и путались между собой. */
.filters{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:20px}
.filters__side{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Именно background-color: сокращённое background сбросило бы картинку
   стрелки и запрет её повторения — стрелка размножилась бы в полоску. */
.filters__side .select-inline{background-color:var(--paper)}

/* Сегменты — пилюли, активный залит акцентом. */
.seg{display:inline-flex;gap:4px}
.seg button{border:1px solid var(--mist);background:transparent;padding:6px 12px;
  border-radius:var(--r-pill);font-size:14px;font-weight:400;color:var(--ink);cursor:pointer;
  transition:.15s}
.seg button:hover{border-color:var(--graphite)}
.seg button.on{background:var(--teal);border-color:var(--teal);color:#fff}

.switch{position:relative;display:inline-block;width:40px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--mist);border-radius:var(--r-pill);cursor:pointer;
  transition:background .2s var(--ease)}
.switch i::before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;
  background:var(--paper);border-radius:50%;transition:transform .2s var(--ease)}
.switch input:checked + i{background:var(--teal)}
.switch input:checked + i::before{transform:translateX(16px)}

.verdict{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:500;font-size:14px}
.verdict--clean{color:var(--ok)}
.verdict--risk{color:var(--danger)}
.flags{margin:0;padding-left:18px;font-size:12px;color:var(--danger)}
.flags li{margin-bottom:4px}

.fold{background:none;border:0;cursor:pointer;color:var(--graphite);padding:4px 8px;
  border-radius:var(--r-btn);display:inline-flex;align-items:center;gap:6px;font-size:12px;transition:.15s}
.fold:hover{color:var(--ink)}
.fold svg{transition:transform .2s var(--ease)}
.panel.folded .fold svg{transform:rotate(-90deg)}
.panel.folded table,.panel.folded .panel__b,.panel.folded .empty{display:none}

.steps{counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;padding:0 0 12px 32px;font-size:14px;line-height:1.43;
  color:var(--graphite)}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:var(--r-pill);
  border:1px solid var(--mist);color:var(--graphite);display:grid;place-items:center;
  font-size:11px;font-weight:500
}
.steps li:last-child{padding-bottom:0}
.steps a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* служебные */
.mt-s{margin-top:8px}
.mt-m{margin-top:12px}
.mt-l{margin-top:20px}
.mb-s{margin-bottom:8px}
.mb-xs{margin-bottom:4px}
.pt-xs{padding-top:4px}
.nowrap{white-space:nowrap}
.err{color:var(--danger)}
.good{color:var(--ok)}
.link-plain{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* Селектор input[type=…] весит больше простого класса, поэтому короткое
   .select-inline проигрывало общему правилу полей и поля в строке фильтров
   растягивались на всю ширину, ложась друг под друга. Добавляем имя тега —
   вес сравнивается, и побеждает правило, которое ниже. */
input.select-inline,select.select-inline,.select-inline{
  width:auto;padding:6px 30px 6px 12px;font-size:14px
}
input.select-inline{padding-right:12px}
.inline-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

footer{margin-top:32px;padding:20px;color:var(--graphite);font-size:12px;border-top:1px solid var(--mist)}
footer .in{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--graphite);text-decoration:none}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:var(--parchment);padding:10px 16px;border-radius:var(--r-input);
  font-size:14px;z-index:60;max-width:min(420px,90vw);box-shadow:var(--shadow)
}
.toast--err{background:var(--danger)}


/* ============================================================
   Ночная тема. Та же система, но роли цветов перевёрнуты:
   тёмная тушь становится фоном, пергамент — текстом. Почти всё
   переключается сменой переменных; отдельно правится только то,
   где цвет пришлось задать числом.
   ============================================================ */
:root[data-theme="dark"]{
  color-scheme:dark;

  --parchment:#191712;
  --paper:#211e18;
  --parchment-deep:#141210;

  --mist:#38342c;
  --ash:#7d786e;
  --graphite:#a29c90;
  --ink:#ece7dd;

  --teal:#0a7a81;

  --ok:#6fbf95;
  --warn:#d5aa5a;
  --danger:#e08b82;
  --ok-bg:#1c2a22;
  --warn-bg:#2b2419;
  --danger-bg:#2e1f1d;

  --shadow:0 1px 2px rgba(0,0,0,.5);
}

/* Стрелка выпадающего списка нарисована в data-URI, цвет там числом. */
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a29c90' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")}

/* Наведение на заливные кнопки: в светлой теме темнее, в тёмной светлее. */
:root[data-theme="dark"] .btn--primary:hover,
:root[data-theme="dark"] .mini--go:hover{background:#d8d2c6}

:root[data-theme="dark"] .note--err,
:root[data-theme="dark"] .mini--del{border-color:#4a2f2b}
:root[data-theme="dark"] .note--ok{border-color:#2a4436}

/* Переключатель темы */
.icon-btn{
  background:transparent;border:1px solid var(--mist);color:var(--graphite);
  width:30px;height:30px;border-radius:var(--r-btn);cursor:pointer;
  display:grid;place-items:center;transition:.15s;flex:none
}
.icon-btn:hover{color:var(--ink);border-color:var(--graphite)}
.icon-sun{display:none}
:root[data-theme="dark"] .icon-moon{display:none}
:root[data-theme="dark"] .icon-sun{display:block}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media(max-width:1180px){
  .auth{grid-template-columns:1fr}
  .auth__brand{padding:32px 20px;border-right:0;border-bottom:1px solid var(--mist)}
  .cols,.two,.three{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:20px 16px 40px}
  .top{padding:0 12px;gap:8px}
}

/* ============================================================
   Окно подробностей
   В таблицу помещается только начало текста уведомления, а читать
   его нужно целиком — поэтому полный текст выносится в окно.
   ============================================================ */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:rgba(20,18,14,.45)}
.modal__box{background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-card);
  width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.modal__h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--mist)}
.modal__h h3{margin:0;font-size:15px;font-weight:500;line-height:1.45}
.modal__b{padding:16px 20px;overflow:auto;font-size:14px;line-height:1.65;overflow-wrap:break-word}
.modal__b table{margin:0}
.modal__f{padding:12px 20px;border-top:1px solid var(--mist);
  display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.modal__f:empty{display:none}

/* Пары «поле — значение»: одна колонка под подпись, вторая тянется. */
.kv{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px}
.kv dt{color:var(--graphite);font-size:12px;padding-top:2px}
.kv dd{margin:0;overflow-wrap:break-word}

/* Две строки текста в ячейке — дальше обрезаем, продолжение читается в окне. */
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Заголовок-кнопка: выглядит текстом, ведёт себя кнопкой. */
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--ink);font-weight:500;
  text-align:left;cursor:pointer;border-bottom:1px solid transparent;transition:.15s}
.linklike:hover{border-bottom-color:var(--graphite)}

/* Итоговая строка таблицы. */
.total td{border-top:1px solid var(--mist);border-bottom:0;font-weight:500}

/* Число операций правится прямо в таблице расчёта — поле должно быть
   узким, чтобы не растягивать колонку. */
.ops{width:78px;padding:6px 8px;border:1px solid var(--mist);border-radius:var(--r-btn);
  background:var(--paper);color:var(--ink);font:inherit;font-size:13px;text-align:right}
.ops:focus{outline:none;border-color:var(--teal)}

/* Поле суммы в строке фильтров: по содержимому оно шире, чем нужно. */
input.w-amount{width:150px}