:root {
  --bg: #10141b; --panel: #171d27; --panel2: #1e2633; --border: #2a3547;
  --text: #dfe6f0; --muted: #8595ac; --accent: #4f9cf0; --accent2: #6fd08c;
  --error: #f0716f; --radius: 10px;
  font-size: 15px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; height: 100vh;
}
/* переносы (ТЗ v4, п. 6): по слогам — нигде, слова не разрываются, текст кнопок — в одну строку */
html, body { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; }
button { white-space: nowrap; }
.nw { white-space: nowrap; }
.muted { color: var(--muted); }
.error { color: var(--error); min-height: 1.2em; margin-top: 8px; font-size: 0.9em; }

/* ---------- login ---------- */
.login-body { align-items: center; justify-content: center; }
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 36px 40px; width: 340px; text-align: center;
}
.login-card h1 { margin: 0 0 4px; font-size: 1.5em; }
.login-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.login-card input {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 10px 12px; font-size: 1em;
}
.login-card button {
  background: var(--accent); border: 0; border-radius: 8px; color: #fff;
  padding: 10px; font-size: 1em; cursor: pointer;
}

/* ---------- layout ---------- */
header {
  display: flex; align-items: center; gap: 20px; padding: 10px 18px;
  background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.brand { font-weight: 600; }
nav#tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav#tabs button {
  background: transparent; border: 0; color: var(--muted); padding: 8px 12px;
  border-radius: 8px; cursor: pointer; font-size: 0.95em;
}
nav#tabs button.active { background: var(--panel2); color: var(--text); }
.user-box { display: flex; align-items: center; gap: 10px; }
button.ghost {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
main { flex: 1; overflow: hidden; display: flex; }
.tab { display: none; flex: 1; overflow: auto; }
.tab.active { display: flex; flex-direction: column; }
.pane { padding: 20px 28px 32px clamp(24px, 2.6vw, 48px); min-width: 0; }   /* ТЗ v4, п. 8 */
.pane p, .pane .notice, .upload-report > .error, .upload-report > .warn, .upload-report > .muted,
.import-panel details, .titles-line { max-width: 900px; }
.pane .fresh-banner, .pane .cards { max-width: 1200px; }

/* ---------- chat ---------- */
#tab-chat { padding: 0 0 12px; }
#chat-log { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 860px; padding: 10px 14px; border-radius: var(--radius); white-space: pre-wrap; line-height: 1.45; }
.msg.user { background: #24406b; align-self: flex-end; }
.msg.assistant { background: var(--panel2); align-self: flex-start; }
.msg.tool {
  background: transparent; border: 1px dashed var(--border); color: var(--muted);
  font-size: 0.85em; align-self: flex-start; padding: 6px 10px;
}
.msg code { background: #0d1117; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.msg pre { background: #0d1117; padding: 10px; border-radius: 8px; overflow-x: auto; }
#chat-form { display: flex; gap: 10px; padding: 10px 22px 0; }
.chat-input-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#chat-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#chat-chips[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; padding: 3px 4px 3px 10px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 14px; font-size: 0.82em; }
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip .muted { white-space: nowrap; }
.chip-busy { opacity: 0.75; }
.chip-x { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1em;
  line-height: 1; padding: 0 6px; }
.chip-x:hover { color: var(--text); }
.chip-warn { font-size: 0.82em; }
#chat-input {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; font-size: 1em; resize: vertical;
  font-family: inherit;
}
.chat-buttons { display: flex; flex-direction: column; gap: 6px; }
#chat-send {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 10px 16px; cursor: pointer; font-size: 1em;
}
#chat-send:disabled { opacity: 0.5; cursor: default; }
#chat-clear { font-size: 0.8em; white-space: nowrap; padding: 6px 8px; }
#chat-footer { display: flex; align-items: center; gap: 12px; padding: 4px 24px; min-height: 1.6em; }
#chat-status { flex: 1; font-size: 0.85em; }
#chat-attach:disabled { opacity: 0.5; cursor: default; }

/* ---------- встроенные сообщения (ТЗ v3, п. 8) ---------- */
.notice { position: relative; max-width: 900px; margin: 10px 0; padding: 10px 36px 10px 14px;
  background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 8px; font-size: 0.92em; line-height: 1.45; }
.notice-ok { border-left-color: var(--accent2); }
.notice-warn { border-left-color: #e8b45f; }
.notice-error { border-left-color: var(--error); }
.notice-title { font-weight: 600; }
.notice-line { margin-top: 3px; }
.notice details { margin-top: 6px; }
.notice summary { cursor: pointer; color: var(--muted); }
.notice details .notice-line { color: var(--muted); font-size: 0.95em; }
.notice .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.notice-x { position: absolute; top: 5px; right: 8px; background: transparent; border: 0; color: var(--muted);
  font-size: 1.2em; line-height: 1; cursor: pointer; padding: 2px 4px; }
.notice-x:hover { color: var(--text); }
.notice.compact { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0;
  padding: 3px 30px 3px 10px; font-size: 0.85em; }
.notice.compact .actions { margin-top: 0; }
.notice.compact .notice-x { top: 3px; }
.notice button.small, .ask-row button.small, .param-save button.small {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 0.85em; }
button.small.primary, .pane button.small.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ask-row { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.9em; }
.param-save { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
tr.hl td { background: #19273a !important; }   /* подсветка непрозрачная — для закреплённой колонки */
table.files td:first-child, table.files th:first-child { width: 28px; text-align: center; }

/* ---------- tables: ширина колонок по тексту (ТЗ v4, п. 6а) ---------- */
table { border-collapse: collapse; width: auto; margin: 10px 0; font-size: 0.92em; }
th, td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; vertical-align: top; }
th { background: var(--panel2); }
tr:nth-child(even) td { background: #151920; }   /* непрозрачный: под закреплённой колонкой не просвечивает */
/* короткое значение — в одну строку; длинный текст — переносится по пробелам в колонке ограниченной ширины */
td.nw, th.nw { white-space: nowrap; }
.cell-long { max-width: 22em; min-width: min-content; }   /* min-width сильнее max-width: неразрывный кусок расширяет колонку */
/* таблица шире экрана прокручивается в своём блоке, колонка кнопок закреплена справа */
.table-scroll { overflow-x: auto; max-width: 100%; margin: 10px 0; }
.table-scroll > table { margin: 0; }
td.act, th.act { position: sticky; right: 0; z-index: 1; background: var(--bg); white-space: nowrap;
  box-shadow: inset 1px 0 var(--border), inset -1px 0 var(--border), inset 0 -1px var(--border),
    -6px 0 6px -6px rgba(0,0,0,0.9); }
/* сообщение в колонке кнопок переносится и не раздувает её (ошибка сохранения, мэппинга) */
td.act div { white-space: normal; max-width: 18em; }
th.act { background: var(--panel2); }
tr:nth-child(even) td.act { background: #151920; }
td.act-left, th.act-left { position: sticky; left: 0; z-index: 1; background: var(--bg);
  box-shadow: inset 1px 0 var(--border), inset -1px 0 var(--border), inset 0 -1px var(--border),
    6px 0 6px -6px rgba(0,0,0,0.9); }
th.act-left { background: var(--panel2); }
tr:nth-child(even) td.act-left { background: #151920; }
.cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.cards.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.cards.grid4 .card { min-width: 0; }
@media (max-width: 760px) { .cards.grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.export-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.fresh-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px;
  border: 1px solid #6b5a2e; background: rgba(232, 180, 95, 0.08); border-radius: var(--radius); margin: 6px 0 12px; }
/* отчёт проверки — обычный текст страницы, без подложки (ТЗ v3, п. 6) */
.upload-report { margin: 16px 0; }
.upload-report h3 { margin: 0 0 6px; font-size: 1em; }
.upload-report > div { margin: 2px 0; font-size: 0.9em; }
.upload-report .table-scroll { margin: 6px 0 10px; font-size: inherit; }
table.datasets td { vertical-align: top; }
.small { font-size: 0.8em; }
a.link { color: var(--accent); font-size: 0.9em; white-space: nowrap; }
.card .num.num-small { font-size: 1.05em; padding-top: 6px; }
#chat-attach { font-size: 0.8em; white-space: nowrap; padding: 6px 8px; }
.pane button.small:disabled { opacity: 0.5; cursor: default; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; min-width: 130px;
}
.card .num { font-size: 1.5em; font-weight: 600; color: var(--accent2); }
.card .lbl { color: var(--muted); font-size: 0.85em; }
.pane h2 { margin: 18px 0 6px; font-size: 1.1em; }
.pane button.small {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 0.85em;
}
/* поле ввода — шириной по значению или подсказке (атрибут size / fitWidth), шрифт как у страницы */
input.inline {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 4px 8px; font: inherit; font-size: 0.92em; max-width: 100%;
}
input.inline:disabled { opacity: 0.55; }
td > input.inline { max-width: none; }
select.inline {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 4px 8px; font: inherit; font-size: 0.92em;
}
.ok { color: var(--accent2); }
td.risks { font-size: 0.85em; }
td.risks > div { max-width: 24em; min-width: min-content; }
td.risks div + div { margin-top: 3px; }
.warn { color: #e8b45f; }
/* история параметров (ТЗ v3, п. 10) */
td.nowrap, .nowrap { white-space: nowrap; }
tr.rollback-row td { background: transparent !important; border-top: 0; }
/* разбор файла с правками (ТЗ v3, п. 4) */
.import-panel { margin: 14px 0; padding-top: 6px; border-top: 1px solid var(--border); }
.import-panel:empty { display: none; }
.import-panel h3 { margin: 4px 0 6px; font-size: 1em; }
.import-panel details { margin: 4px 0; }
.import-panel summary { cursor: pointer; color: var(--muted); }
.import-panel .error-list summary { color: var(--error); }
.import-panel .table-scroll { max-height: 520px; overflow-y: auto; margin: 8px 0; }
.import-table tr.skipped td:not(.act-left) { opacity: 0.45; }
.titles-line { margin: 6px 0; font-size: 0.9em; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.titles-line .small.muted { flex-basis: 100%; }
tr.rollback-row .notice { margin: 4px 0; max-width: none; position: sticky; left: 0; }
/* форма корректировки в две строки (ТЗ v4, п. 3): кнопка выступает за правый край первой строки */
.adj-form { display: grid; grid-template-columns: repeat(5, max-content); gap: 8px 10px; align-items: center;
  margin: 14px 0 4px; }
.adj-form input.inline, .adj-form select.inline { width: 100%; }
.adj-form .f-reason { grid-column: 1 / 4; }
.adj-form .f-author { grid-column: 4; }
.adj-form .f-btn { grid-column: 5; }
@media (max-width: 620px) {
  .adj-form .f-val, .adj-form .f-anchor { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .adj-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .adj-form > * { min-width: 0 !important; }   /* на узком экране поле уже подсказки: подсказка обрежется, ряд — нет */
  .adj-form .f-reason, .adj-form .f-author, .adj-form .f-btn { grid-column: 1 / -1; }
}
/* корректировки (ТЗ v4, пп. 4, 9, 10) */
.adj-intro { max-width: 900px; line-height: 1.5; }
.adj-intro p { margin: 6px 0; }
.adj-intro ul { margin: 2px 0 6px; padding-left: 22px; }
.adj-intro li { margin: 2px 0; }
.adj-intro-head { margin-bottom: 0 !important; }
.queue-bar { display: inline-flex; gap: 8px; margin-left: 18px; }
.pane button.small.danger { border-color: #7a3a3a; }
table.adj-list { font-size: 0.86em; }
table.adj-list th, table.adj-list td { padding: 5px 7px; }
.adj-scroll { max-height: calc(100vh - 170px); overflow: auto; }
.adj-scroll th { position: sticky; top: 0; z-index: 2; }
.adj-scroll th.act { z-index: 3; }
/* в таблице корректировок короткие значения тоже переносятся по пробелам («Изменить частоту / визитов»,
   «30 мин / (норматив)», дата / время) — слова и числа целые, таблица помещается на экран (п. 9) */
table.adj-list td.nw { white-space: normal; }
table.adj-list td:first-child, table.adj-list td:nth-child(3) { white-space: nowrap; }
.recalc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.st-rejected { color: var(--error); }
/* перетаскивание файлов в чат (ТЗ v4, п. 13) */
#chat-form { position: relative; }
#chat-form.drop-on .chat-input-wrap { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: var(--radius); }
#chat-form.drop-on::after { content: "Отпустите, чтобы приложить файлы xlsx (до 5)"; position: absolute; left: 34px; top: 16px;
  padding: 4px 10px; background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; color: var(--text);
  font-size: 0.9em; pointer-events: none; }
#chat-form.drop-busy .chat-input-wrap { outline: 2px dashed var(--muted); outline-offset: 4px; border-radius: var(--radius); }
#chat-form.drop-busy::after { content: "Дождитесь окончания проверки отправленных файлов"; position: absolute; left: 34px;
  top: 16px; padding: 4px 10px; background: var(--panel); border: 1px solid var(--muted); border-radius: 8px;
  color: var(--text); font-size: 0.9em; pointer-events: none; }