:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --border: #e2e5eb;
  --text: #1c2126;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-bg: #eff4ff;
  --yellow: #f5c542;
  --yellow-bg: #fef8e7;
  --green: #16a34a;
  --green-bg: #eafaf0;
  --grey-bg: #f0f1f3;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --card: #1d2025;
    --border: #2c3038;
    --text: #e7e9ec;
    --muted: #96a0ac;
    --accent: #6ea8ff;
    --accent-bg: #1c2942;
    --yellow: #e8b93a;
    --yellow-bg: #322b12;
    --green: #3ecf7d;
    --green-bg: #113322;
    --grey-bg: #24272d;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 0 0 60px;
}
header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  padding: 20px 28px; border-bottom: 1px solid var(--border); background: var(--card);
  position: sticky; top: 0; z-index: 10;
}
header h1 { font-size: 18px; margin: 0; }
/* Кнопки шапки — flex с переносом. Раньше это был обычный блок с inline-block кнопками:
   при нехватке ширины они переносились, но высота строки (~22px) меньше кнопки (~34px),
   и ряды наезжали друг на друга. */
.header-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
}
@media (max-width: 640px) {
  header { padding: 14px 16px; }
  header h1 { font-size: 16px; }
  .header-actions { justify-content: flex-start; }
  .header-actions .btn { padding: 7px 12px; font-size: 12px; }
}
.panel {
  max-width: 980px; margin: 20px auto; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px;
}
.panel h2 { margin: 0 0 6px; font-size: 15px; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; }
/* Кнопки фильтров переносятся: на узком окне ряд из шести штук иначе распирает страницу. */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-btn {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  padding: 5px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
}
.filter-btn.active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.hide-completed {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted);
  margin-left: 6px; cursor: pointer; user-select: none;
}
.hide-completed input { cursor: pointer; }

.task-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.task-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* min-width: 0 — иначе колонка с текстом отказывается сжиматься уже своего содержимого
   (у flex-элемента по умолчанию min-width: auto) и на узком окне выталкивает статус за край. */
.task-top > div:first-child { min-width: 0; }
.task-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
/* Описание свёрнуто до двух строк — кнопку «ещё» вешает applyDescCollapse() и только там,
   где текст действительно не влез (замер после отрисовки, см. комментарий в app.js). */
.task-desc {
  color: var(--muted); font-size: 13px; margin-top: 4px; white-space: pre-wrap;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.task-desc.open { display: block; overflow: visible; }
.desc-toggle {
  border: none; background: transparent; color: var(--accent); cursor: pointer;
  font-size: 12px; padding: 2px 0; margin-top: 1px;
}
.desc-toggle:hover { text-decoration: underline; }
.status-badge {
  font-size: 11px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  border: none;
}
.status-badge.pending { background: var(--yellow-bg); color: #93720b; }
.status-badge.in_progress { background: var(--accent-bg); color: var(--accent); }
.status-badge.completed { background: var(--green-bg); color: var(--green); }
.links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.links a {
  font-size: 12px; color: var(--accent); text-decoration: none; background: var(--accent-bg);
  padding: 3px 9px; border-radius: 6px;
}
.notes-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.note {
  font-size: 13px; background: var(--grey-bg); border-radius: 8px; padding: 8px 10px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
/* Заметка, снятая вручную, гасится, но НЕ зачёркивается: зачёркнутый текст плохо
   читается, а к снятым заметкам возвращаются — там причина решения. */
.note.resolved { opacity: .5; }
/* Ждёт моего разбора — единственное состояние, которое должно бросаться в глаза. */
.note.n-pending { border-left: 3px solid var(--yellow); background: var(--yellow-bg); opacity: 1; }
/* Разобрана мной — видно, что работа сделана, но заметка ещё на виду. */
.note.n-by-claude { opacity: .6; border-left: 3px solid var(--green); }
.note-flag { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.note-flag.wait { background: var(--yellow); color: #3a2e05; }
.note-flag.done { background: var(--green-bg); color: var(--green); }
.note .note-text { flex: 1; white-space: pre-wrap; }
.note .note-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.note button { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.note-form, .new-task-form { display: flex; gap: 8px; margin-top: 10px; }
.new-task-form { flex-direction: column; max-width: 480px; }
textarea, input {
  font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); resize: vertical;
}
.note-form textarea { flex: 1; }
.btn {
  border: none; background: var(--accent); color: #fff; padding: 8px 16px;
  border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn:hover { opacity: .9; }
/* Сбой автозадачи (header-health.js). Молчащий сбор данных не ломает дашборд — он тихо
   подсовывает вчерашние числа, поэтому повод зайти на страницу автозадач должен приходить сам.
   Пульсация затухает через несколько секунд: постоянно мигающий элемент в шапке быстро
   перестаёт замечаться, а красный цвет остаётся. */
/* Текущая вкладка. Подчёркивание внутренней тенью, а не рамкой: оно переживает
   закраску под счётчик — вкладка со сбоем остаётся красной и при этом видно, что ты на ней. */
.btn.nav-current {
  background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent);
  font-weight: 600; cursor: default; box-shadow: inset 0 -3px 0 currentColor;
}
.btn.alarm, .btn.ghost.alarm {
  background: #d64545; color: #fff; border-color: #d64545; font-weight: 600;
  animation: alarm-pulse 1s ease-out 3;
}
/* Жёлтый — «ждёт разбора, но не горит». Отдельный уровень нужен, чтобы красный не обесценился:
   нерешённых предложений по акциям больше сотни, и красными они бы забили настоящий сбой. */
.btn.attn, .btn.ghost.attn {
  background: var(--yellow-bg); color: #93720b; border-color: var(--yellow); font-weight: 600;
}
@media (prefers-color-scheme: dark) { .btn.attn, .btn.ghost.attn { color: var(--yellow); } }
/* Подчёркивание текущей вкладки не должно теряться под заливкой счётчика. */
.btn.nav-current.alarm, .btn.nav-current.attn { box-shadow: inset 0 -3px 0 currentColor; }
@keyframes alarm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214, 69, 69, .55); }
  100% { box-shadow: 0 0 0 9px rgba(214, 69, 69, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn.alarm { animation: none; } }
.reports-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.report-row {
  display: flex; justify-content: space-between; font-size: 13px; padding: 8px 10px;
  background: var(--grey-bg); border-radius: 8px;
}
.report-row a { color: var(--accent); text-decoration: none; font-weight: 500; }
.report-row .report-meta { color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); font-size: 13px; font-style: italic; }
.task-toggle { margin-top: 10px; font-size: 12px; color: var(--accent); cursor: pointer; background: none; border: none; padding: 0; }

/* Изменения условий WB */
.news-badge { background:#fdecec; color:#d64545; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.news-item { border-bottom:1px solid var(--border); padding:10px 0; }
.news-item:last-child { border-bottom:none; }
.news-item.done { opacity:.5; }
.news-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:3px; }
.news-date { color:var(--muted); font-size:12px; min-width:70px; }
.news-title { font-weight:600; font-size:14px; line-height:1.35; }
.news-body { font-size:13px; line-height:1.5; color:var(--muted); margin-top:6px; white-space:pre-wrap; }
.ntag { font-size:11px; padding:1px 7px; border-radius:999px; background:var(--grey-bg); color:var(--muted); }
.ntag.hot { background:#fff4e0; color:#b26a00; font-weight:600; }
/* Во что упирается новость — по этому же признаку список и отсортирован. */
.nimp { font-size:11px; padding:1px 8px; border-radius:999px; white-space:nowrap; font-weight:600; }
.nimp.imp-code { background:#fdecec; color:#d64545; }
.nimp.imp-act  { background:#fff4e0; color:#b26a00; }
.nimp.imp-info { background:var(--grey-bg); color:var(--muted); font-weight:400; }
.news-freshness { font-size:12px; padding:5px 10px; background:var(--grey-bg); border-radius:8px; display:inline-block; }
.news-freshness.stale { background:#fef8e7; color:#93720b; }
@media (prefers-color-scheme: dark) { .news-freshness.stale { background:#322b12; color:var(--yellow); } }
.news-info-toggle { margin-left:14px; font-size:13px; color:var(--muted); }
.news-info-toggle input { vertical-align:-1px; margin-right:4px; }
.news-rev { margin-left:auto; font-size:12px; padding:3px 10px; }

/* ---------- классификация задач: важность / срочность / трудоёмкость / чат ---------- */
.task-toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 10px 0 14px; font-size: 12px; color: var(--muted); }
.task-toolbar label { display: flex; align-items: center; gap: 6px; }
.task-toolbar select { height: 28px; font-size: 12px; }

.task-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
.tag-sel, .chat-input { height: 26px; font-size: 12px; border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; background: var(--card); color: var(--fg); }
.chat-input { min-width: 120px; }
/* цветом выделяем только то, что требует внимания: важное и горящее */
.tag-importance.v-high { background: #fdecec; border-color: #f2c4c4; color: #b42318; font-weight: 600; }
.tag-urgency.v-now { background: #fff4e5; border-color: #ffd8a8; color: #b45309; font-weight: 600; }
.tag-sel.v-none, .chat-input:placeholder-shown { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .tag-importance.v-high { background: #3a1e1e; border-color: #5c2e2e; color: #ffb4a8; }
  .tag-urgency.v-now { background: #3a2e1e; border-color: #5c4a2e; color: #ffd8a8; }
}

/* матрица Эйзенхауэра */
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .matrix { grid-template-columns: 1fr; } }
.quad { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--card); }
.quad-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.quad-head span { font-weight: 400; font-size: 11px; color: var(--muted); }
.quad-head b { margin-left: auto; font-size: 12px; color: var(--muted); }
.quad.q1 { border-color: #f2c4c4; }
.quad.q2 { border-color: #b7e0c2; }
.quad .task-card { margin-bottom: 8px; }
.quad .empty { font-size: 12px; padding: 4px 0; }
.quad.q0 { border-style: dashed; margin-top: 12px; }

/* Блок изменений условий: свёрнут по умолчанию, подсвечен если есть неразобранное */
#newsBox > summary { cursor: pointer; list-style: none; padding: 2px 0; }
#newsBox > summary::-webkit-details-marker { display: none; }
#newsBox > summary::before { content: '▸ '; color: var(--muted); }
#newsBox[open] > summary::before { content: '▾ '; }
#newsBox.attention > summary { color: #b26a00; }
#newsBox.attention { border-left: 3px solid #e0a44a; padding-left: 10px; margin-left: -13px; }

/* ---------- поиск по задачам ---------- */
.search-wrap { display: flex; align-items: center; gap: 6px; }
#taskSearch { height: 28px; min-width: 260px; font-size: 13px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--fg); }
#taskSearch:focus { outline: none; border-color: var(--accent); }
.search-info { font-size: 12px; color: var(--muted); }
.search-info.active { color: var(--accent); font-weight: 600; }
mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 2px; }
@media (prefers-color-scheme: dark) { mark { background: #7a6320; color: #fff; } }
.found-in-notes { font-size: 12px; color: var(--accent); cursor: pointer; margin-top: 4px; }
.found-in-notes:hover { text-decoration: underline; }

/* Новости: этап жизненного цикла, предложения Claude, решение Галины */
.nstage { font-size: 11px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.nstage.st-new  { background: var(--grey-bg); color: var(--muted); }
.nstage.st-prop { background: #fff4e0; color: #b26a00; font-weight: 600; }
.nstage.st-dec  { background: var(--accent-bg); color: var(--accent); }
.nstage.st-done { background: var(--green-bg); color: var(--green); }
.news-prop { margin: 8px 0 4px; padding: 8px 10px; border-left: 3px solid var(--accent, #4a7ec4);
  background: var(--accent-bg, #eef4fc); border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.news-prop-h { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 4px; }
.news-note { display: flex; gap: 6px; margin-top: 6px; align-items: flex-start; }
.news-note textarea { flex: 1; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel, #fff); color: inherit; resize: vertical; }
.news-save { white-space: nowrap; font-size: 12px; }
.nstage.st-rej { background: #fdecec; color: #d64545; }
.news-wait { font-style: italic; margin: 6px 0 2px; }
.news-dec { display: flex; gap: 8px; margin: 8px 0 4px; }
.news-dec .btn { font-size: 12px; padding: 4px 14px; }
.news-acc.on { background: var(--green, #2e7d32); color: #fff; border-color: var(--green, #2e7d32); }
.news-rej.on { background: #d64545; color: #fff; border-color: #d64545; }

/* ---------- статусы: жизненный цикл + чего ждём ---------- */
.status-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.status-badge.new { background: var(--grey-bg); color: var(--muted); }
.status-badge.active { background: var(--accent-bg); color: var(--accent); }
.status-badge.paused { background: #fff4e5; color: #b45309; }
.status-badge.done { background: var(--green-bg); color: var(--green); }
.status-badge.cancelled { background: var(--grey-bg); color: var(--muted); text-decoration: line-through; }
@media (prefers-color-scheme: dark) { .status-badge.paused { background: #3a2e1e; color: #ffd8a8; } }

.stale { font-size: 11px; color: var(--muted); white-space: nowrap; }
.stale.wait { color: #b45309; }
.stale.hot { color: #b42318; font-weight: 600; }

.task-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 2px; }
.task-actions .act {
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.task-actions .act:hover { border-color: var(--accent); color: var(--accent); }
.task-actions .act-done:hover { border-color: var(--green); color: var(--green); }
.task-actions .act-cancelled { color: var(--muted); }
.wait-sel, .wait-until {
  height: 26px; font-size: 12px; border: 1px solid var(--border); border-radius: 999px;
  padding: 0 8px; background: var(--card); color: var(--muted);
}
.wait-sel.on { background: #fff4e5; border-color: #ffd8a8; color: #b45309; font-weight: 600; }
@media (prefers-color-scheme: dark) { .wait-sel.on { background: #3a2e1e; border-color: #5c4a2e; color: #ffd8a8; } }

/* блок «ждут вас» */
.waiting-banner { border: 1px solid #ffd8a8; background: #fff9f0; border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; }
@media (prefers-color-scheme: dark) { .waiting-banner { background: #2e2519; border-color: #5c4a2e; } }
.wb-head { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.wb-row { font-size: 13px; padding: 3px 0; cursor: pointer; }
.wb-row:hover { text-decoration: underline; }
.wb-why { font-size: 11px; color: #b45309; margin-left: 6px; }
@media (prefers-color-scheme: dark) { .wb-why { color: #ffd8a8; } }
.task-card.flash { animation: flashCard 1.5s ease-out; }
@keyframes flashCard { 0% { background: var(--accent-bg); } 100% { background: var(--card); } }

/* расчёты по кнопке */
.calc { border: 1px solid var(--line, #e3e6ea); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.calc-head { margin-bottom: 2px; }
.calc-params { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 8px; }
.calc-params label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.calc-out { margin-top: 10px; }
.calc-log { background: #f6f7f9; border-radius: 6px; padding: 10px 12px; font-size: 12px;
  white-space: pre-wrap; max-height: 22em; overflow: auto; margin: 8px 0 0; }
.calc-err { color: #b3261e; font-weight: 600; }

/* компактные таблицы раздела поставок */
table.mini { border-collapse: collapse; margin-top: 8px; font-size: 13px; width: 100%; }
/* overflow-wrap: длинные артикулы не давали таблице ужаться до width:100% и тянули страницу вбок. */
table.mini th, table.mini td { border-bottom: 1px solid var(--line, #e3e6ea); padding: 5px 10px 5px 0; text-align: left; overflow-wrap: anywhere; }
table.mini th { font-weight: 600; color: #5b6472; font-size: 12px; }

/* Широкие таблицы прокручиваются внутри себя, а не растягивают страницу.
   Общее правило: было только в scheduled.css, из-за чего таблица акций на узком окне
   вылезала за край и тянула за собой горизонтальный скролл всей страницы. */
.tbl-scroll { overflow-x: auto; }

/* Кто вошёл + выход. Когда за дашбордом не один человек, «под кем я сейчас» перестаёт
   быть очевидным. Держим неброско: это справка, а не кнопка действия. */
.who { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.who b { font-weight: 600; color: var(--text); }
.who-out {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 2px 4px; text-decoration: underline;
}
.who-out:hover { color: #d64545; }