:root {
  --maxw: 1760px;
  --bg: #f2f4f8;
  --card: #ffffff;
  --text: #1c2230;
  --muted: #6b7385;
  --line: #dfe3ec;
  --accent: #2f6fed;
  --ok: #1e8e3e;
  --err: #d93025;
  --new: #58c3fd;
  --in_progress: #fff429;
  --fixed: #6ee929;
  --rework: #ee6458;
  --verified: #f3b0bf;
  --rejected: #e2e6ec;
}
* { box-sizing: border-box; }

/* Inter (self-hosted): ровная, хорошо читаемая кириллица */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.top { background: #fff; border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.brand { font-weight: 700; color: var(--text); text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 16px; }
.top nav a { color: var(--accent); text-decoration: none; }
.who { color: var(--muted); }
main.wrap { padding-top: 16px; padding-bottom: 40px; }
footer.wrap { padding: 18px 20px 40px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.err { color: var(--err); }
h1 { font-size: 21px; margin: 0 0 10px; }
h2 { font-size: 15px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .04em; color: #47506a; }

.page-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.page-head h1 { margin: 0; }

/* Размер шрифта из настроек аккаунта */
body { --zoom: 1; }
body.font-small { --zoom: 0.9; zoom: 0.9; }
body.font-large { --zoom: 1.15; zoom: 1.15; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 14px;
}
.card.narrow { max-width: 460px; margin: 40px auto; }
.form-narrow { max-width: 1150px; }
.inline-check { flex-direction: row !important; align-items: center; gap: 6px !important; }
.inline-check input { width: auto; }
tr.row-off td { opacity: .55; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.head h1 { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.body { overflow-wrap: anywhere; }
.comment-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.comment-head .author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

.meta { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; color: #3c4355; }
.meta span { white-space: nowrap; }

/* Статусы: одинаковая ширина, жирный чёрный текст на ярком фоне */
.badge {
  display: inline-block; min-width: 124px; text-align: center;
  padding: 4px 10px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .16);
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  color: #0a0e17; white-space: nowrap;
}
.badge.s-new { background: #58c3fd; }
.badge.s-in_progress { background: #fff429; }
.badge.s-fixed { background: #6ee929; }
.badge.s-rework { background: #ee6458; }
.badge.s-verified { background: #f3b0bf; }
.badge.s-rejected { background: #e2e6ec; }

/* Теги объектов: как статус по форме, но всегда один цвет */
.tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag {
  display: inline-block; white-space: nowrap;
  background: #eef2f8; border: 1px solid #c9d2e0; border-radius: 14px;
  padding: 3px 10px; font-size: 12.5px; font-weight: 600; color: #12151c;
}

.prio { font-weight: 700; color: #39415a; }
.prio.prio-high { color: #b45309; }
.prio.prio-urgent { color: #c2261d; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 12px; }
.chips-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.chip {
  display: inline-flex; align-items: center; line-height: 1.2;
  padding: 5px 13px; border-radius: 16px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); color: #444c60; font-size: 13px;
}
button.chip { cursor: pointer; font: inherit; }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Переключатель групп убран: группа выбирается полем с поиском в шапке лукапа */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; align-items: center; }
.filters input { flex: 0 1 auto; }
.filters .tagpick { flex: 0 1 360px; }
.filters .w-sm { width: 130px; }
.filters .w-md { width: 170px; }
.filters .w-lg { width: 240px; }
.filters select[name="priority"] { width: 205px; }
.filters-reset { margin-left: auto; }
.w-sm { width: 150px; }
.w-md { width: 200px; }
.w-lg { width: 340px; }

input, select, textarea {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px;
  font: inherit; background: #fff; color: var(--text);
}
textarea { resize: vertical; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #cddcff; border-color: var(--accent); }
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7385' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  padding-right: 30px; cursor: pointer;
}
select:hover { border-color: var(--accent); }

.btn {
  display: inline-block; padding: 7px 14px; border-radius: 7px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font: inherit; cursor: pointer; text-decoration: none;
}
.btn.small { padding: 5px 11px; font-size: 13px; }
.btn.ghost { background: #fff; color: var(--accent); }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); filter: brightness(.97); }
.chip { transition: border-color .12s ease, color .12s ease, background .12s ease; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active:hover { color: #fff; }
.tab:hover { color: var(--text); }
.att-item:hover { border-color: #b9c6dd; }
.att-dl:hover, .att-del:hover, .js-open:hover { filter: brightness(.85); }
.btn.icon { padding: 5px 9px; line-height: 1; }
.btn .i { display: inline-block; vertical-align: -2px; }
.btn.icon .i { vertical-align: 0; }
.btn.big { padding: 10px 18px; font-size: 15px; border-radius: 8px; }
.btn.big .i { width: 20px; height: 20px; vertical-align: -3px; }
.page-head-actions { margin-left: auto; align-self: center; display: inline-flex; gap: 8px; align-items: center; }

.search-field {
  display: flex; align-items: center; gap: 6px; flex: 1 1 220px;
  border: 1px solid var(--line); border-radius: 7px; padding: 0 8px;
  background: #fff; color: var(--muted);
}
.search-field input { border: none; outline: none; flex: 1; padding: 7px 0; min-width: 0; background: transparent; }
.search-field:focus-within { outline: 2px solid #cddcff; border-color: var(--accent); }

/* Лукап: поле с чипами и модальным окном справочника */
.tagpick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tagpick-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tagpick-chips.grouped { flex-direction: column; align-items: stretch; }

/* Компактное «квадратное» поле тегов в фильтрах */
.tagpick-compact .tagpick-box {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: 7px; padding: 0 10px;
  background: #fff; cursor: pointer; min-width: 132px; height: 35px; font: inherit; color: var(--text);
}
.tagpick-compact .tagpick-box:hover { border-color: var(--accent); }
.tagpick-compact .tagpick-chips { display: inline-flex; gap: 4px; align-items: center; min-width: 0; overflow: hidden; }
.tagpick-compact .tag-chip { display: inline-block; }
.tagpick-compact .tag-chip-more { background: #fff; }
.tagpick-caret { color: var(--muted); font-size: 11px; line-height: 1; }
.tagpick-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px dashed #b9c3d6; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; padding: 0;
}
.tagpick-add:hover { border-color: var(--accent); color: var(--accent); }
.tagpick-add .i { width: 14px; height: 14px; }
.tagpick-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tagpick-group-head { font-size: 11px; color: var(--muted); min-width: 92px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef2f8; border: 1px solid #c9d2e0; border-radius: 14px;
  padding: 2px 4px 2px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: #12151c;
}
.tag-chip-x { border: none; background: none; cursor: pointer; color: #6b7385; font-size: 14px; line-height: 1; padding: 0 2px; }
.tag-chip-x:hover { color: #c2261d; }

/* Модальное окно лукапа */
.tagpick-dialog {
  border: 1px solid var(--line); border-radius: 12px; padding: 0;
  width: min(780px, 94vw); height: min(620px, 86vh);
  box-shadow: 0 24px 70px rgba(18, 26, 48, .28);
}
.tagpick-dialog::backdrop { background: rgba(14, 20, 36, .45); }
.tagpick-form { display: flex; flex-direction: column; height: 100%; }
.tagpick-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tagpick-title { font-size: 16px; }
.tagpick-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.tagpick-search { flex: 1 1 200px; }
.tagpick-table-wrap { overflow: auto; padding: 10px 16px 0; flex: 1 1 auto; }
.tagpick-filters .group-field { flex: 0 1 220px; }
.tagpick-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line); gap: 10px; flex-wrap: wrap; }
.tagpick-foot-buttons { display: inline-flex; gap: 8px; }
.tagpick-empty { padding: 10px 0 16px; }
.tagpick-rows tr { cursor: pointer; }
table.list.compact { min-width: 0; table-layout: auto; border-radius: 8px; }
table.list.compact th, table.list.compact td { padding: 5px 8px; }
table.list.compact td:first-child { border-left: none; }
table.list.compact td, table.list.compact th { white-space: nowrap; overflow: visible; }
.tagpick-dialog table.list.compact { min-width: 100%; }

.stack { display: flex; flex-direction: column; gap: 10px; }
.stack label, .field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #4a5266; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 1100px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
form.inline input[type="file"] { max-width: 240px; }

.sync { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 8px; display: flex; flex-direction: column; gap: 3px; }

.body { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); word-wrap: break-word; max-width: 1200px; }
.body a { color: var(--accent); }
.links a { color: var(--accent); word-break: break-all; }

/* Таблица списка: фиксированная раскладка, полная ширина */
.table-wrap { overflow-x: auto; }
table.list {
  width: 100%; min-width: 1180px; table-layout: fixed;
  border-collapse: separate; border-spacing: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
}
table.list thead th:first-child { border-top-left-radius: 10px; }
table.list thead th:last-child { border-top-right-radius: 10px; }
table.list tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
table.list tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }
table.list td.cell-status { overflow: visible; }
table.list th, table.list td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* Сортировка по клику на название колонки: нет → ▾ → ▴ → нет */
.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.th-sort:hover { color: var(--accent); }
.th-sort.active { color: var(--accent); }
.sort-arr { font-size: 11px; line-height: 1; }
table.list th {
  background: #f8f9fc; font-size: 11.5px; font-weight: 700; color: #3d4560;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
table.list td { overflow: hidden; color: #171b26; font-size: 13px; }
table.list tr:last-child td { border-bottom: none; }
table.list a { color: var(--text); text-decoration: none; }
table.list a:hover { color: var(--accent); }
table.list.grid-table { width: 100%; }
table.list col.c-id { width: 90px; }
/* ширина заголовка — «резиновая»: забирает остаток, минимум задаётся в JS */
table.list col.c-status { width: 150px; }
table.list col.c-author { width: 120px; }
table.list col.c-assignee { width: 120px; }
table.list col.c-tags { width: 260px; }
table.list col.c-prio { width: 105px; }
table.list col.c-due { width: 110px; }
table.list col.c-updated { width: 140px; }
.cell-due { white-space: nowrap; }
.due { font-weight: 600; }
.due-over, .due-today { color: #b3261e; }
.due-soon { color: #96690a; }
.due-ok { color: #3d4560; }
.due-delta { margin-left: 4px; font-size: 11.5px; }
.cell-due .due-delta { margin-left: 3px; }
table.list col.c-actions { width: 130px; }

/* Скрытие колонок грида (меню «Колонки») */
/* скрытие колонок теперь серверное: колонки не рендерятся вовсе */

.cols-menu { position: relative; margin-left: auto; }
.cols-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cols-menu summary::-webkit-details-marker { display: none; }
.cols-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(18, 26, 48, .2); padding: 8px 10px; min-width: 210px;
  display: flex; flex-direction: column; gap: 7px;
}
.cols-item {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text);
  cursor: pointer; border-radius: 6px; padding: 3px 5px;
}
.cols-item:hover { background: #eef2f8; }
.cols-item input { width: auto; }
.cols-actions { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.cols-item.locked { cursor: default; opacity: .75; }
.cols-item.locked:hover { background: none; }
.status-menu-note { display: block; padding: 8px 10px; }

/* Меню переходов у нижних строк раскрывается вверх */
.status-menu-wrap.status-menu-up .status-menu { top: auto; bottom: calc(100% + 6px); }
table.list td.title { overflow-wrap: anywhere; white-space: normal; font-weight: 700; }
table.list td.cell-id, table.list td.cell-author, table.list td.cell-assignee, table.list td.cell-prio, table.list td.cell-updated { white-space: nowrap; }
table.list td.cell-author, table.list td.cell-assignee { text-overflow: ellipsis; }
table.list td.cell-tags { overflow: visible; white-space: normal; }
table.list td.cell-tags .tag { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
@media (min-width: 1300px) { .table-wrap { overflow: visible; } }
table.list td.cell-actions { overflow: visible; white-space: nowrap; text-align: right; }
table.list th:last-child { text-align: right; }
table.list td.cell-actions .btn { margin-left: 4px; }
table.list td:first-child { border-left: 12px solid transparent; }
tr.s-new td:first-child { border-left-color: var(--new); }
tr.s-in_progress td:first-child { border-left-color: var(--in_progress); }
tr.s-fixed td:first-child { border-left-color: var(--fixed); }
tr.s-rework td:first-child { border-left-color: var(--rework); }
tr.s-verified td:first-child { border-left-color: var(--verified); }
tr.s-rejected td:first-child { border-left-color: var(--rejected); }

.sentinel { padding: 12px 4px 30px; }

/* Справочник тегов */
table.list.tags-table { table-layout: auto; min-width: 720px; }
table.list.tags-table th.kind-col, table.list.tags-table td:first-child { width: 140px; }
table.list.tags-table th.use-col { width: 160px; }
.cell-desc { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.list.compact .desc-col { width: 220px; }
table.list.compact td.cell-desc { max-width: 220px; font-size: 12px; }
table.list.tags-table th.act-col { width: 180px; }
table.list.tags-table td { white-space: nowrap; overflow: visible; }
table.list.compact th.pick-col { width: 34px; }
table.list.compact th.kind-col { width: 110px; }
table.list.compact th.use-col { width: 130px; }

/* Лента сообщений: аватары, пузыри, группировка подряд, разделители дней */
#comments-list { padding: 2px 2px 8px; }
.comment { margin-top: 10px; }
.comment-continuation { margin-top: 3px; }
.comment-continuation .comment-head { display: none; }
.comment-main { min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 8px; }
.comment-head .author { font-size: 13px; color: #2b3346; }
.comment-time { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.comment-text {
  margin-top: 3px; font-size: 14px; line-height: 1.45; word-break: break-word;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
}
.comment.mine .comment-text { background: #eef4ff; border-color: #d8e4ff; }
.comment.mine .comment-head .author { color: var(--accent); }
.comment-system .comment-text { background: #eef1f6; border-color: #e0e5ee; color: #4a5266; font-size: 13px; }
.day-sep {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 4px;
  color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
}
.day-sep::before, .day-sep::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--line); }

/* Аудит: история изменений */
.audit { border-top: 1px solid var(--line); padding: 10px 0; }
.audit:first-of-type { border-top: none; }
.audit-head { font-size: 13px; }
.audit-action { color: var(--accent); }
.audit-changes { margin: 6px 0 0 18px; padding: 0; }
.audit-changes li { margin: 4px 0; }
.audit-val { word-break: break-word; }
.audit-created { margin: 4px 0 0 16px; }
.audit-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.audit-diff pre {
  background: #f7f8fb; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 8px; font-size: 12.5px; white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow: auto; margin: 2px 0 0;
}
.files { list-style: none; padding: 0; margin: 0 0 10px; }
.files li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.files a { color: var(--accent); word-break: break-all; }

/* Вложения: панель режимов, скролл, два вида */
.att-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-bottom: 6px; }
.att-modes { display: inline-flex; gap: 4px; }
.att-add { display: inline-flex; align-items: center; }
.att-scroll { max-height: 60vh; overflow-y: auto; overflow-x: hidden; padding: 2px 10px 2px 2px; scrollbar-gutter: stable; }
.att-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Одинаковые плитки: по 2 в ряд */
.att-item {
  position: relative;
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff;
}
.att-item .att-kind { display: none; color: var(--muted); }
.att-item .att-dl-row { display: none; }

.att-thumb {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 110px; border-radius: 6px; background: #f1f3f8; overflow: hidden;
}
.att-thumb .thumb { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.att-icon { color: #9aa3b5; }

.att-name { display: block; margin-top: 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-name a { color: var(--text); }
.att-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.att-dl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255, 255, 255, .92); color: #1c2230;
  border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 2px 8px rgba(20, 30, 60, .18);
}
.att-dl:hover { background: #fff; color: var(--accent); }
.att-dl .i { vertical-align: 0; }
.att-dl-overlay { position: absolute; right: 6px; bottom: 6px; }

.att-del {
  position: absolute; right: 6px; top: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #8a8f9c;
  border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 2px 8px rgba(20, 30, 60, .18);
}
.att-del:hover { color: #c2261d; background: #fff; }
.att-del .i { vertical-align: 0; }
.att-grid.compact .att-del { position: static; width: 22px; height: 22px; box-shadow: none; margin: 0; }

/* Компактный режим: по строке 20px на файл */
.att-grid.compact { display: block; }
.att-grid.compact .att-item {
  display: flex; flex-direction: row; align-items: center; gap: 8px; height: 20px; width: 100%;
  min-width: 0; padding: 0 6px; border: none; border-bottom: 1px dashed var(--line); border-radius: 0;
}
.att-grid.compact .att-thumb { display: none; }
.att-grid.compact .att-kind { display: inline-flex; }
.att-grid.compact .att-name { display: inline-block; margin: 0; flex: 1 1 auto; font-size: 13px; }
.att-grid.compact .att-line { display: inline; font-size: 12.5px; }
.att-grid.compact .att-dl-overlay { display: none; }
.att-grid.compact .att-dl-row { display: inline-flex; margin: 0; width: 22px; height: 22px; }
.att-grid.compact .att-dl { box-shadow: none; }

/* Теги: «Теги ▸» слева, массив справа; развёрнуто — список по группам */
.tags-acc { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.tags-acc-toggle {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.tags-acc-toggle:hover { color: var(--accent); }
.tags-arr { color: var(--muted); }
.tags-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tags-flat { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tags-grouped { display: flex; flex-direction: column; gap: 4px; }
.tags-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tags-head { font-size: 11px; color: var(--muted); min-width: 92px; }
.tags-acc .tags-grouped { display: none; }
.card > .tags-acc { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 16px; }
.tags-acc.open .tags-flat { display: none; }
.tags-acc.open .tags-grouped { display: flex; }

/* Опциональные поля формы: свёрнуты за кнопкой «+», у развёрнутых — «×» */
.opt-field { display: flex; flex-direction: column; gap: 6px; }
.opt-body { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #4a5266; }
.opt-body[hidden] { display: none; }
.opt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opt-del { background: none; border: none; padding: 0 2px; cursor: pointer; color: var(--muted); line-height: 1; }
.opt-del:hover { color: #c2261d; }
.opt-add {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 1px dashed var(--line); border-radius: 7px;
  padding: 5px 10px; cursor: pointer; font: inherit; font-size: 13px; color: var(--muted);
}
.opt-add:hover { border-color: var(--accent); color: var(--text); }
.opt-add[hidden] { display: none; }

/* Правка: форма слева, вложения справа */
.links-auto { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.links-auto .file-ref { cursor: pointer; }
@media (min-width: 1300px) {
  .edit-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(380px, 1fr); gap: 14px; align-items: start; }
}

/* Модальное окно предпросмотра файла */
.filepreview { border: none; padding: 0; background: transparent; max-width: none; max-height: none; }
.filepreview::backdrop { background: rgba(9, 13, 22, .86); }
.filepreview-box { display: flex; flex-direction: column; gap: 10px; align-items: center; max-width: 94vw; }
.filepreview-head { color: #e8ecf5; font-size: 13px; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filepreview-img { max-width: 94vw; max-height: 78vh; border-radius: 8px; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); background: #fff; }
.filepreview-frame { width: min(1100px, 92vw); height: 78vh; border: none; border-radius: 8px; background: #fff; }
.filepreview-text {
  width: min(1100px, 92vw); max-height: 78vh; overflow: auto; margin: 0;
  background: #fff; color: #12151c; border-radius: 8px; padding: 12px;
  font-size: 12.5px; white-space: pre-wrap; word-break: break-word; text-align: left;
}
.filepreview-none { color: #e8ecf5; padding: 28px; }
.filepreview-actions { display: flex; gap: 8px; }

/* Окно merge при конкурентной правке */
.merge-dialog { border: none; padding: 0; border-radius: 12px; width: min(820px, 94vw); max-height: 88vh; }
.merge-dialog::backdrop { background: rgba(9, 13, 22, .6); }
.merge-box { display: flex; flex-direction: column; max-height: 88vh; }
.merge-head { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.merge-body { padding: 10px 16px; overflow-y: auto; }
.merge-field { border-top: 1px solid var(--line); padding: 8px 0; }
.merge-field:first-of-type { border-top: none; }
.merge-label { font-weight: 700; margin-bottom: 4px; }
.merge-choice { display: block; cursor: pointer; margin: 4px 0; }
.merge-choice > span { font-size: 12.5px; color: var(--muted); }
.merge-value {
  background: #f7f8fb; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 8px; margin: 2px 0 0; font-size: 12.5px;
  white-space: pre-wrap; word-break: break-word; max-height: 140px; overflow: auto;
}
.merge-actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }

/* Лента комментариев: тонкий вид переходов статусов (по умолчанию) */
.comments-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 6px; }
.comments-thin .comment-system { margin: 6px 0; }
.comments-thin .comment-system .comment-head { display: none; }
.comments-thin .comment-system .comment-text { background: none; border: none; padding: 0; margin: 0; font-size: 12px; color: var(--muted); }
.comments-thin .comment-system .status-note { display: none; }
.comments-thin .comment-system .status-line { display: flex; align-items: center; gap: 10px; text-align: center; }
.comments-thin .comment-system .status-line::before,
.comments-thin .comment-system .status-line::after { content: ""; flex: 1 1 auto; border-top: 1px dashed var(--line); }

/* Комментарии: список со скроллом, инпут всегда виден */
.comments-panel { display: flex; flex-direction: column; min-height: 0; }
.comments-panel[hidden] { display: none; }
.comments-scroll { overflow-y: auto; max-height: 46vh; }
.comment-form {
  display: flex; gap: 6px; align-items: flex-end; position: relative;
  border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px;
}
.comment-form textarea { flex: 1 1 auto; min-height: 40px; }
.comment-form.drag-over, .card.drag-over, .tab-panel.drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.comment-tools { display: flex; flex-direction: column; gap: 4px; }

/* Ссылка на вложение в тексте: !имя */
.file-ref {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef2f8; border: 1px solid #c9d2e0; border-radius: 12px;
  padding: 1px 8px; font-size: 12.5px; font-weight: 600; color: #12151c !important;
  text-decoration: none;
}
.file-ref:hover { background: #fff; border-color: var(--accent); color: var(--accent) !important; }

/* Автодополнение «!» */
.file-dropdown {
  position: absolute; left: 8px; bottom: calc(100% + 4px);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 30px rgba(20, 30, 60, .18); z-index: 50;
  min-width: 220px; max-height: 220px; overflow-y: auto;
}
.file-dropdown-item {
  display: block; width: 100%; text-align: left; padding: 6px 10px;
  border: none; background: none; cursor: pointer; font: inherit; font-size: 13px;
}
.file-dropdown-item:hover, .file-dropdown-item.active { background: #eef2f8; }

/* Диалог имени файла */
.name-dialog { border: none; padding: 0; border-radius: 12px; width: min(480px, 92vw); }
.confirm-dialog { border: none; padding: 0; border-radius: 12px; width: min(440px, 92vw); box-shadow: 0 24px 70px rgba(18, 26, 48, .28); }
.confirm-dialog::backdrop { background: rgba(14, 20, 36, .45); }
.confirm-box { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.confirm-text { font-size: 14px; color: var(--text); }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.name-dialog::backdrop { background: rgba(9, 13, 22, .6); }
.name-box { display: flex; flex-direction: column; }
.name-head { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.name-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.name-body label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #4a5266; }
.name-actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }

/* Тост-плашки (5 секунд) */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fff; color: var(--text); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 14px;
  font-size: 13.5px; box-shadow: 0 10px 30px rgba(15, 22, 40, .14);
  max-width: 520px; animation: toast-in .18s ease-out;
}
.toast::before { content: "•"; font-weight: 700; color: var(--muted); line-height: 1.35; }
.toast-ok { background: #eef7f1; border-color: #c3ddcb; border-left-color: #6f9f7f; color: #1e5b38; }
.toast-ok::before { content: "✓"; color: #3f8b5c; }
.toast-err { background: #fdf1f0; border-color: #eccdc9; border-left-color: #c47166; color: #8e2f24; }
.toast-err::before { content: "!"; color: #b3453a; }
.toast-hide { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Переходы статуса: блок под бейджем статуса */
.status-box { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* Статус-овал: 85% — текущий статус, 15% — стрелка с дропдауном переходов */
.status-select { position: relative; display: inline-flex; align-items: stretch; width: 150px; border-radius: 14px; }
.status-select.s-new { background: #58c3fd; }
.status-select.s-in_progress { background: #fff429; }
.status-select.s-fixed { background: #6ee929; }
.status-select.s-rework { background: #ee6458; }
.status-select.s-verified { background: #f3b0bf; }
.status-select.s-rejected { background: #e2e6ec; }
.status-select .badge {
  flex: 1 1 auto; min-width: 0; background: transparent;
  border-right: none; border-radius: 14px 0 0 14px;
}
.status-select.solo .badge { border-radius: 14px; border-right: 1px solid rgba(0, 0, 0, .16); }

/* Грид: «три точки» для переходов — в колонке действий, ровно в сетке с другими кнопками */
.status-actions-cell { display: contents; }
.cell-actions .status-menu-wrap { display: inline-flex; flex: none; }
.status-kebab { display: inline-block; list-style: none; }
.status-kebab::-webkit-details-marker { display: none; }
.status-kebab .i { vertical-align: 0; }
.status-select .status-more {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0, 0, 0, .16); border-left: 1px solid rgba(0, 0, 0, .26);
  border-radius: 0 14px 14px 0; cursor: pointer; color: #0a0e17; list-style: none;
}
.status-select .status-more::-webkit-details-marker { display: none; }
.status-select .status-more:hover { background: rgba(255, 255, 255, .38); }
.status-menu-wrap { position: relative; display: flex; flex: 0 0 15%; }
.status-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(18, 26, 48, .2); padding: 4px; min-width: 190px;
  display: flex; flex-direction: column; gap: 2px;
}
.status-form { margin: 0; }
.status-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; border-radius: 7px; padding: 8px 10px;
  cursor: pointer; font: inherit; color: var(--text); text-align: left;
}
.status-menu-item:hover { background: #eef2f8; }

/* Три блока описания ошибки */
.body-block { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.body-block .body { margin: 0; padding: 0; border-top: none; max-width: none; }

.flash { padding: 9px 14px; border-radius: 8px; margin: 0 0 14px; }
.flash.ok { background: #e5f5ea; color: #17632e; }
.flash.err { background: #fdecea; color: #a5271d; }

details.card summary { cursor: pointer; font-weight: 600; }
details.card[open] summary { margin-bottom: 12px; }
.history { padding-left: 18px; }

/* Вкладки: вложения / комментарии / история */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -6px 0 10px; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 10px; cursor: pointer; font: inherit; font-weight: 600;
  color: #5a6376; display: inline-flex; gap: 6px; align-items: center;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-panel[hidden] { display: none; }
.tab-panel .att-scroll { max-height: none; overflow: visible; }

/* Двухколоночная карточка обращения (Full HD): без скролла страницы */
@media (min-width: 1300px) {
  .detail-grid {
    display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(380px, 1fr);
    gap: 14px; align-items: stretch; height: 100%;
  }
  .detail-grid .col-main, .detail-grid .col-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  .detail-grid .col-main > .card { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; }
  .tabs-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
  .tab-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .tab-panel[data-panel="files"] { padding-right: 8px; scrollbar-gutter: stable; }
  .tab-panel.comments-panel { overflow: hidden; }
  .comments-scroll { max-height: none; flex: 1 1 auto; min-height: 0; }
  .page-detail main.wrap { height: calc(100vh / var(--zoom, 1) - 54px); padding-top: 12px; padding-bottom: 12px; overflow: hidden; }
  .page-detail footer.wrap { display: none; }
}

/* ------------------------------------------------------------------
   Единая логика для кликабельных элементов:
   наведение — мягкая подсветка (цвет/рамка/фон),
   нажатие — «вдавливание» (сдвиг/масштаб/более тёмный фон).
   ------------------------------------------------------------------ */
.top nav a, .brand { transition: color .12s ease; }
.top nav a:hover, .brand:hover { color: #24479c; text-decoration: underline; text-underline-offset: 3px; }
.top nav a:active, .brand:active { color: #1b3576; }

.btn:active, .chip:active, .tab:active, .tags-acc-toggle:active,
.tagpick-add:active, .tagpick-box:active, .opt-add:active, .opt-del:active,
.file-ref:active, .file-dropdown-item:active, .status-menu-item:active,
table.list a:active, .merge-choice:active { transform: translateY(1px); }

.status-more:active { background: rgba(255, 255, 255, .62); }
.status-menu-item:active, .file-dropdown-item:active { background: #e2e9f5; }
.att-dl:active, .att-del:active { transform: scale(.92); }
.tagpick-rows tr:hover { background: #f3f6fb; }
.tagpick-rows tr:active { background: #e9eff9; }
input:hover:not(:focus), textarea:hover:not(:focus) { border-color: #c9d2e0; }
.merge-choice:hover { color: var(--text); }
details.card summary:hover { color: var(--accent); }

/* Карта цветов: полоса как в гриде + номер и образец бейджа */
.pal-sub { margin: 10px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.pal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pal-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; }
.pal-stripe { width: 12px; height: 46px; border-radius: 3px; flex: 0 0 12px; }
.pal-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------
   Мобильный UI грида (<= 760px): карточки-аккордеоны на <details>,
   работают без JS. Свёрнуто: полоса, ID, заголовок. Развёрнуто:
   блок кнопок и список атрибутов.
   ------------------------------------------------------------------ */
.mobile-rows { display: none; }
.mobile-batch { display: none; }

@media (max-width: 760px) {
  .top .wrap { height: auto; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .brand { font-size: 14px; }
  .top nav { gap: 10px; font-size: 13px; flex-wrap: wrap; }
  .page-head { flex-wrap: wrap; }
  .cols-menu { display: none; }
  main.wrap { padding-left: 12px; padding-right: 12px; }
  .table-wrap { display: none; }
  .mobile-rows { display: block; }

  .m-card {
    background: #fff; border: 1px solid var(--line); border-left: 12px solid transparent;
    border-radius: 10px; margin-bottom: 8px;
  }
  .m-card.s-new { border-left-color: var(--new); }
  .m-card.s-in_progress { border-left-color: var(--in_progress); }
  .m-card.s-fixed { border-left-color: var(--fixed); }
  .m-card.s-rework { border-left-color: var(--rework); }
  .m-card.s-verified { border-left-color: var(--verified); }
  .m-card.s-rejected { border-left-color: var(--rejected); }
  .m-head {
    display: flex; align-items: center; gap: 8px; padding: 12px;
    cursor: pointer; list-style: none; min-height: 46px;
  }
  .m-head::-webkit-details-marker { display: none; }
  .m-id { flex: 0 0 auto; font-weight: 700; }
  .m-title { flex: 1 1 auto; font-weight: 700; overflow-wrap: anywhere; }
  .m-chevron { margin-left: auto; color: var(--muted); font-size: 12px; }
  .m-chevron::before { content: "▾"; }
  .m-card[open] .m-chevron::before { content: "▴"; }
  .m-body { padding: 0 12px 12px; }
  .m-actions { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
  .m-actions .btn { padding: 8px 12px; margin: 0; }
  .m-attr { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13px; }
  .m-label { flex: 0 0 108px; color: var(--muted); }
  .m-attr .tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
}

/* Упоминания @логин в комментариях и описаниях */
.mention {
  display: inline-block; background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 10px; padding: 0 6px; color: #2f4bd6; font-weight: 600; white-space: nowrap;
}