/* Журнал инцидентов — оформление.
   Без внешних библиотек: CSP запрещает сторонние источники, да и грузится
   журнал с постовых компьютеров, где канал узкий. */

:root {
    --bg: #f4f6f8;
    --panel: #fff;
    --ink: #1d2430;
    --muted: #6b7684;
    --line: #dde3ea;
    --accent: #1f6feb;
    --accent-ink: #fff;
    --danger: #b42318;
    --danger-bg: #fef3f2;
    --warn-bg: #fffaeb;
    --ok: #067647;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body.plain { display: flex; align-items: center; min-height: 100vh; }

a { color: var(--accent); }

/* --- Шапка --- */

.top {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.brand { font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; }

.nav { display: flex; gap: 18px; }
.nav a { color: var(--muted); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--ink); border-bottom-color: var(--accent); }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who { line-height: 1.2; text-align: right; }
.who small { display: block; color: var(--muted); font-size: 12px; }

/* --- Каркас --- */

.wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
.wrap-narrow { max-width: 520px; margin: 0 auto; padding: 24px; }

.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head-actions, .page-head form { margin-left: auto; }

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.card h2 { font-size: 17px; margin: 0 0 14px; }
.card h3 { font-size: 15px; margin: 18px 0 6px; }

/* margin-bottom равен gap: иначе карточка, идущая за сеткой, прилипала к ней
   вплотную, а внутри сетки между рядами было 16px. */
.cards-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.cards-2 .card { margin: 0; }

/* --- Типовые элементы --- */

.muted { color: var(--muted); }
.small, .small-text { font-size: 13px; }
.nowrap { white-space: nowrap; }
.count { margin: 8px 0 12px; }
.hint { color: var(--muted); font-size: 13px; display: block; margin-top: 4px; }
.text { white-space: pre-wrap; margin: 0 0 10px; }

.notice {
    background: var(--warn-bg);
    border: 1px solid #f5d99a;
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 0 0 16px;
}
.notice-pd { background: #eef6ff; border-color: #bcd9ff; }

.alert {
    background: var(--danger-bg);
    border: 1px solid #f3b9b4;
    color: var(--danger);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 0 0 16px;
}

.empty { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); padding: 32px; text-align: center; }

.tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef1f5;
    color: var(--muted);
    vertical-align: middle;
}
.tag-danger { background: var(--danger-bg); color: var(--danger); }

.status { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #eef1f5; color: var(--muted); }
.status-new { background: #e8f1ff; color: #14509b; }
.status-triage { background: #f0ecff; color: #5533b8; }
.status-investigation { background: var(--warn-bg); color: #8a5a00; }
.status-actions { background: #eaf7ef; color: var(--ok); }
.status-closed { background: #eef1f5; color: var(--muted); }
.status-rejected { background: var(--danger-bg); color: var(--danger); }

/* --- Кнопки --- */

.btn {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}
.btn:hover { border-color: #c2cbd6; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #1a5fd0; }
.btn-quiet { background: transparent; }
.btn-big { padding: 12px 20px; font-size: 16px; }
.btn-small { padding: 4px 9px; font-size: 13px; }

/* --- Формы --- */

.form { display: block; }
.form.compact { margin-top: 16px; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 16px; }
legend { font-weight: 600; padding: 0 6px; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-weight: 500; margin-bottom: 5px; }
.field > span b { color: var(--danger); }
.field.grow { flex: 1 1 260px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 13px; margin-top: 4px; }

/* Типы перечислены поимённо, а не через :not([type=checkbox]) — иначе под
   правило попадут кнопки и флажки. Добавляя новое поле в форму, проверьте,
   что его тип есть здесь: пропущенный тип рисуется браузерной шириной по
   умолчанию и в строке выглядит вдвое уже соседей. */
input[type=text], input[type=search], input[type=number], input[type=date],
input[type=datetime-local], input[type=email], input[type=url],
input[type=password], input[type=tel], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    background: #fff;
    color: var(--ink);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd9ff; outline-offset: -1px; border-color: var(--accent); }

.w-narrow { width: 5em; }

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > .field { flex: 1 1 220px; }

.check { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.check input { width: auto; }

.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }

.inline-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }
/* Пояснение ко всей строке — отдельной строкой под полями. Внутри поля оно
   ломает выравнивание по нижнему краю: поле с подсказкой поднимается на её
   высоту, и подписи соседних полей встают на разные уровни. */
.inline-form .row-hint { flex: 1 0 100%; }
.inline-form.tight { gap: 6px; }
.inline-form.tight input[type=text] { width: 12em; }
.inline-form.tight select { width: auto; }

/* --- Фильтры --- */

.filters {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}
/* Поля — сеткой, а не flex-wrap: в строке переменной ширины селекты вставали
   лесенкой, и подписи соседних полей оказывались на разных уровнях. */
.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px 14px;
    align-items: end;
}
.filters label { font-size: 13px; color: var(--muted); }
.filters label > span { display: block; }
/* min-width: 0 — иначе ячейка сетки не ужимается уже содержимого поля. */
.filters-grid > label, .filters-dates { min-width: 0; }
.filters input, .filters select { width: 100%; min-width: 0; margin-top: 4px; }

.filters-dates { display: flex; gap: 10px; grid-column: span 2; }
.filters-dates > label { flex: 1 1 0; min-width: 0; }

.filters-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.filters-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.filters .check { color: var(--ink); font-size: 14px; margin: 0; gap: 8px; }
/* Без этого флажок наследует ширину поля из .filters input и растягивается
   на всю колонку — подпись уезжает от квадратика на полстроки. */
.filters .check input[type=checkbox] {
    flex: none;
    width: 16px;
    height: 16px;
    min-width: 0;
    margin: 0;
}
.filters-actions { display: flex; gap: 8px; margin-left: auto; }


/* Доли диаграмм — классами, а не style="width: 40%": CSP запрещает
   инлайновые стили (style-src 'self'), браузер выбрасывал их молча — от этого
   полосок и не было видно. Шаг 2%: на полоске в 300px разница в один процент
   не различима, а таблица классов остаётся обозримой. */
.w0{width:0%}.w2{width:2%}.w4{width:4%}.w6{width:6%}.w8{width:8%}.w10{width:10%}
.w12{width:12%}.w14{width:14%}.w16{width:16%}.w18{width:18%}.w20{width:20%}.w22{width:22%}
.w24{width:24%}.w26{width:26%}.w28{width:28%}.w30{width:30%}.w32{width:32%}.w34{width:34%}
.w36{width:36%}.w38{width:38%}.w40{width:40%}.w42{width:42%}.w44{width:44%}.w46{width:46%}
.w48{width:48%}.w50{width:50%}.w52{width:52%}.w54{width:54%}.w56{width:56%}.w58{width:58%}
.w60{width:60%}.w62{width:62%}.w64{width:64%}.w66{width:66%}.w68{width:68%}.w70{width:70%}
.w72{width:72%}.w74{width:74%}.w76{width:76%}.w78{width:78%}.w80{width:80%}.w82{width:82%}
.w84{width:84%}.w86{width:86%}.w88{width:88%}.w90{width:90%}.w92{width:92%}.w94{width:94%}
.w96{width:96%}.w98{width:98%}.w100{width:100%}

.h0{height:0%}.h2{height:2%}.h4{height:4%}.h6{height:6%}.h8{height:8%}.h10{height:10%}
.h12{height:12%}.h14{height:14%}.h16{height:16%}.h18{height:18%}.h20{height:20%}.h22{height:22%}
.h24{height:24%}.h26{height:26%}.h28{height:28%}.h30{height:30%}.h32{height:32%}.h34{height:34%}
.h36{height:36%}.h38{height:38%}.h40{height:40%}.h42{height:42%}.h44{height:44%}.h46{height:46%}
.h48{height:48%}.h50{height:50%}.h52{height:52%}.h54{height:54%}.h56{height:56%}.h58{height:58%}
.h60{height:60%}.h62{height:62%}.h64{height:64%}.h66{height:66%}.h68{height:68%}.h70{height:70%}
.h72{height:72%}.h74{height:74%}.h76{height:76%}.h78{height:78%}.h80{height:80%}.h82{height:82%}
.h84{height:84%}.h86{height:86%}.h88{height:88%}.h90{height:90%}.h92{height:92%}.h94{height:94%}
.h96{height:96%}.h98{height:98%}.h100{height:100%}

/* --- Таблицы --- */

.table-wrap { overflow-x: auto; }

.grid { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); overflow: hidden; }
.grid th, .grid td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid th { background: #f7f9fb; font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.grid tbody tr:hover { background: #fbfcfe; }
.grid .num { text-align: right; }
.grid .no { font-weight: 600; }
.grid .nature { font-size: 13px; color: var(--muted); }

.row-sentinel { background: var(--danger-bg); }
.row-overdue { background: var(--warn-bg); }
.row-muted { opacity: .55; }

.matrix th { white-space: normal; }
.cell-zero { color: var(--muted); }
.cell-negligible, .cell-minor { background: #f2f8f4; }
.cell-moderate { background: var(--warn-bg); }
.cell-major { background: #fdece9; }
.cell-catastrophic { background: #fbdbd6; font-weight: 600; }

.pager { display: flex; gap: 6px; margin: 16px 0; flex-wrap: wrap; align-items: center; }
.pager a, .pager span { padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; background: var(--panel); }
.pager .on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* Многоточие и счётчик — подписи, а не кнопки: рамка и фон сбивали бы с толку. */
.pager .gap { border-color: transparent; background: none; color: var(--muted); padding-left: 2px; padding-right: 2px; }
.pager .step.off { color: var(--muted); opacity: .5; }
.pager-count { border-color: transparent; background: none; color: var(--muted); font-size: 13px; margin-left: auto; }

/* --- Карточка инцидента --- */

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.matrix-hint {
    background: #f7f9fb;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 0 0 14px;
    font-size: 13px;
}
.matrix-hint ul { margin: 6px 0 0; padding-left: 18px; }

.comments { list-style: none; padding: 0; margin: 0 0 8px; }
.comments li { border-top: 1px solid var(--line); padding: 12px 0; }
.comments li.internal { background: var(--warn-bg); padding-left: 12px; padding-right: 12px; border-radius: 8px; }
.comments .meta { display: flex; gap: 10px; align-items: center; font-size: 13px; margin-bottom: 4px; flex-wrap: wrap; }

.history { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.history li { padding: 5px 0; border-bottom: 1px solid var(--line); }

.files { list-style: none; padding: 0; margin: 0 0 12px; }
.files li { padding: 5px 0; }

/* --- Сводка --- */

/* Полоска лежит в дорожке на всю ширину, а подпись — строкой над ней. Раньше
   .bar стоял прямо во flex-строке рядом с подписью: ширина в процентах
   считалась от неизвестной ширины, flex дожимал полоску до min-width, и
   диаграммы фактически не было видно. Подпись сверху заодно снимает вопрос
   длинных названий последствий — их не нужно резать под узкую колонку. */
.bars { list-style: none; padding: 0; margin: 0; }
.bars li { padding: 6px 0; }
.bars li + li { border-top: 1px solid var(--line); }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.bar-head b { font-variant-numeric: tabular-nums; }
.bar-track { height: 10px; margin-top: 5px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.bar { display: block; height: 100%; background: var(--accent); border-radius: 5px; }

/* Динамика по месяцам — столбчатая диаграмма. Высота столбика — процент от
   .chart-area, поэтому у неё задана явная высота: от растянутой флексом
   (height: auto) проценты не считаются, и все столбики выходили нулевыми. */
.chart { display: flex; align-items: flex-end; gap: 4px; }
.chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chart-col.year-start { border-left: 1px solid var(--line); }
.chart-area { height: 130px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart-bar { width: 100%; max-width: 30px; min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0; }
.chart-num, .chart-tick { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.kv { list-style: none; padding: 0; margin: 0; }
.kv li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.kv li:last-child { border-bottom: 0; }

.tabs { display: flex; gap: 16px; margin-bottom: 16px; }
.tabs a { color: var(--muted); text-decoration: none; padding-bottom: 5px; border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }

.lang-switch {
    color: var(--muted);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
}
.lang-switch:hover { color: var(--ink); border-color: #c2cbd6; }

/* Счётчик непрочитанных в шапке */
.badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    vertical-align: text-top;
}

.notifications { list-style: none; padding: 0; margin: 0; }
.notifications li { border-bottom: 1px solid var(--line); padding: 12px 0; }
.notifications li:last-child { border-bottom: 0; }
.notifications li.unread { background: #f4f8ff; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.notifications .meta { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; font-size: 13px; }
.notifications .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
}

/* Полоса контура разработки. Намеренно кричащая: пока она видна, в журнал
   можно войти без SSO. */
.dev-banner {
    background: repeating-linear-gradient(45deg, #b42318, #b42318 12px, #8f1a12 12px, #8f1a12 24px);
    color: #fff;
    text-align: center;
    padding: 6px 16px;
    font-size: 13px;
    letter-spacing: .02em;
}
.dev-banner code { background: rgba(255, 255, 255, .2); padding: 1px 5px; border-radius: 4px; }

/* Ловушка для ботов. Не display:none: часть ботов пропускает скрытые так
   поля. Уводим за пределы экрана, оставляя элемент «настоящим». */
.trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Код обращения: его переписывают с экрана на бумажку — крупно и моноширинно */
.access-code {
    font: 700 28px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
    letter-spacing: .06em;
    text-align: center;
    padding: 18px;
    margin: 18px 0;
    background: #f7f9fb;
    border: 2px dashed var(--accent);
    border-radius: var(--radius);
    user-select: all;
}

/* Кнопка под кодом обращения — по центру, как сам код. */
.code-actions { display: flex; justify-content: center; margin: -8px 0 18px; }

.lang-choice { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.lang-choice a {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--muted);
    font-size: 13px;
}
.lang-choice a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Пять «почему» и оценка вовлечённых */
.why-row { align-items: flex-end; margin-bottom: 6px; }
.why-no {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: #eef1f5;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-bottom: 8px;
}
.involved-row { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.who-name { font-weight: 600; align-self: center; min-width: 12em; }

/* --- Вход --- */

.login-card { text-align: center; }
.login-card h1 { font-size: 20px; margin: 0 0 8px; }
.login-note { text-align: left; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.login-note p { margin: 0 0 8px; }

@media (max-width: 720px) {
    .top { gap: 12px; }
    .top-right { width: 100%; }
    .facts { grid-template-columns: 1fr; }
    .facts dt { margin-top: 8px; }
}