/* ГПЗ поверх дизайн-системы станции.

   Экраны собраны на Bootstrap, а цвета и плотность — станционные. Поэтому
   здесь мост: переменные Bootstrap переопределены токенами ds-base.css.
   Тема одна на оба каталога: тёмная по умолчанию, светлая — по выбору.
*/

/* Тройки rgb нужны Bootstrap'у для полупрозрачных фонов: из hex он их не
   выведет, поэтому держим рядом с токенами. */
:root {
  --bg-rgb: 14, 16, 20;
  --text-rgb: 231, 234, 240;
  --accent-rgb: 208, 138, 42;
  --r1-rgb: 63, 140, 90;
  --r3-rgb: 208, 138, 42;
  --r5-rgb: 168, 57, 46;
  --info: #5A8DB0;
  --info-rgb: 90, 141, 176;
  --text-3-rgb: 111, 119, 135;
}
[data-theme="light"] {
  --bg-rgb: 244, 242, 238;
  --text-rgb: 22, 26, 33;
  --accent-rgb: 168, 107, 20;
  --r1-rgb: 47, 122, 72;
  --r3-rgb: 168, 107, 20;
  --r5-rgb: 138, 45, 34;
  --info: #3D6C8E;
  --info-rgb: 61, 108, 142;
  --text-3-rgb: 123, 130, 148;
}

/* --- мост Bootstrap ------------------------------------------------------ */
:root {
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: var(--bg-rgb);
  --bs-body-color: var(--text);
  --bs-body-color-rgb: var(--text-rgb);
  --bs-emphasis-color: var(--text);
  --bs-emphasis-color-rgb: var(--text-rgb);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--text-2);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-color: var(--text-3);
  --bs-tertiary-bg: var(--surface);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-link-color: var(--accent-2);
  --bs-link-color-rgb: var(--accent-rgb);
  --bs-link-hover-color: var(--accent);
  --bs-code-color: var(--accent-2);
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-secondary: var(--text-3);
  --bs-secondary-rgb: var(--text-3-rgb);
  --bs-success: var(--r1);
  --bs-success-rgb: var(--r1-rgb);
  --bs-warning: var(--r3);
  --bs-warning-rgb: var(--r3-rgb);
  --bs-danger: var(--r5);
  --bs-danger-rgb: var(--r5-rgb);
  --bs-info: var(--info);
  --bs-info-rgb: var(--info-rgb);
  --bs-font-sans-serif: var(--font-sans);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-focus-ring-color: rgba(var(--accent-rgb), 0.25);
}

/* Подложки уведомлений: Bootstrap считает их от своих фиксированных цветов,
   а нам нужны фоны из шкалы риска — иначе жёлтый alert светит из тёмного. */
:root {
  --bs-primary-bg-subtle: var(--accent-soft);
  --bs-primary-border-subtle: color-mix(in oklch, var(--accent) 35%, transparent);
  --bs-primary-text-emphasis: var(--accent-2);
  --bs-success-bg-subtle: var(--r1-bg);
  --bs-success-border-subtle: color-mix(in oklch, var(--r1) 35%, transparent);
  --bs-success-text-emphasis: var(--r1);
  --bs-warning-bg-subtle: var(--r3-bg);
  --bs-warning-border-subtle: color-mix(in oklch, var(--r3) 35%, transparent);
  --bs-warning-text-emphasis: var(--r3);
  --bs-danger-bg-subtle: var(--r5-bg);
  --bs-danger-border-subtle: color-mix(in oklch, var(--r5) 35%, transparent);
  --bs-danger-text-emphasis: var(--r5);
  --bs-info-bg-subtle: color-mix(in oklch, var(--info) 18%, var(--surface));
  --bs-info-border-subtle: color-mix(in oklch, var(--info) 35%, transparent);
  --bs-info-text-emphasis: var(--info);
  --bs-secondary-bg-subtle: var(--surface-2);
  --bs-secondary-border-subtle: var(--border);
  --bs-secondary-text-emphasis: var(--text-2);
  --bs-light-rgb: var(--bg-rgb);
  --bs-dark-rgb: var(--text-rgb);
}

body { font-size: 13px; line-height: 19px; }

.card, .modal-content, .list-group-item, .dropdown-menu {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.modal-content { box-shadow: var(--el-3); }
.card { border-radius: 10px; }

.form-control, .form-select {
  background-color: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.form-control::placeholder { color: var(--text-3); }
.form-control:focus, .form-select:focus {
  background-color: var(--surface-3);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.2);
}
.form-control:disabled, .form-control[readonly] {
  background-color: var(--surface); color: var(--text-2);
}
.form-check-input { background-color: var(--surface-2); border-color: var(--border); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

.table { --bs-table-color: var(--text); --bs-table-border-color: var(--border); }
.table > thead { --bs-table-bg: var(--surface-2); }
.table-light {
  --bs-table-color: var(--text-2);
  --bs-table-bg: var(--surface-2);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-striped-color: var(--text-2);
  --bs-table-hover-bg: var(--surface-3);
  --bs-table-hover-color: var(--text);
  --bs-table-active-bg: var(--surface-3);
  --bs-table-active-color: var(--text);
}
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--surface-2);
  color: var(--text);
}
.bg-light { background-color: var(--surface-2) !important; }
.bg-body-tertiary { background-color: var(--surface) !important; }

/* Кнопки: Bootstrap зашил цвета числами, поэтому переписываем те варианты,
   что реально стоят на экранах. */
.btn { --bs-btn-border-radius: 6px; }
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-color: #17110a;
  --bs-btn-hover-bg: var(--accent-2); --bs-btn-hover-border-color: var(--accent-2);
  --bs-btn-hover-color: #17110a;
  --bs-btn-active-bg: var(--accent-2); --bs-btn-active-border-color: var(--accent-2);
  --bs-btn-disabled-bg: var(--surface-3); --bs-btn-disabled-border-color: var(--border);
  --bs-btn-disabled-color: var(--text-3);
}
.btn-secondary {
  --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--border);
  --bs-btn-color: var(--text);
  --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--border);
}
.btn-success {
  --bs-btn-bg: var(--r1); --bs-btn-border-color: var(--r1); --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in oklch, var(--r1) 85%, #fff);
  --bs-btn-hover-border-color: var(--r1); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--r1); --bs-btn-active-border-color: var(--r1);
}
.btn-outline-primary {
  --bs-btn-color: var(--accent-2); --bs-btn-border-color: color-mix(in oklch, var(--accent) 45%, var(--border));
  --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: #17110a;
  --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent);
  --bs-btn-active-color: #17110a;
  --bs-btn-disabled-color: var(--text-3); --bs-btn-disabled-border-color: var(--border);
}
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark {
  --bs-btn-color: var(--text-2); --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--border);
  --bs-btn-active-color: var(--text);
  --bs-btn-disabled-color: var(--text-3); --bs-btn-disabled-border-color: var(--border);
}
.btn-outline-danger {
  --bs-btn-color: var(--r5); --bs-btn-border-color: color-mix(in oklch, var(--r5) 45%, var(--border));
  --bs-btn-hover-bg: var(--r5); --bs-btn-hover-border-color: var(--r5); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--r5); --bs-btn-active-border-color: var(--r5);
}
.btn-outline-success {
  --bs-btn-color: var(--r1); --bs-btn-border-color: color-mix(in oklch, var(--r1) 45%, var(--border));
  --bs-btn-hover-bg: var(--r1); --bs-btn-hover-border-color: var(--r1); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--r1); --bs-btn-active-border-color: var(--r1);
}
.btn-outline-warning {
  --bs-btn-color: var(--r3); --bs-btn-border-color: color-mix(in oklch, var(--r3) 45%, var(--border));
  --bs-btn-hover-bg: var(--r3); --bs-btn-hover-border-color: var(--r3); --bs-btn-hover-color: #17110a;
  --bs-btn-active-bg: var(--r3); --bs-btn-active-border-color: var(--r3);
}

.badge { font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; }
.badge.bg-secondary { background-color: var(--surface-3) !important; color: var(--text-2); }
.badge.bg-danger { background-color: var(--r5) !important; }
.badge.bg-info { background-color: var(--info) !important; color: #0d1519; }
.badge.bg-primary { background-color: var(--accent) !important; color: #17110a; }

.pagination {
  --bs-pagination-bg: var(--surface);
  --bs-pagination-color: var(--text-2);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-bg: var(--surface-2);
  --bs-pagination-hover-color: var(--text);
  --bs-pagination-hover-border-color: var(--border);
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-active-color: #17110a;
  --bs-pagination-disabled-bg: var(--surface);
  --bs-pagination-disabled-color: var(--text-3);
  --bs-pagination-disabled-border-color: var(--border);
}
.nav-tabs {
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-link-active-bg: var(--surface);
  --bs-nav-tabs-link-active-color: var(--text);
  --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface);
  --bs-nav-link-color: var(--text-2);
  --bs-nav-link-hover-color: var(--text);
}

/* Плитки в ряду одной высоты: иначе итоги дашборда скачут по вертикали. */
.row > [class*="col-"] > .card { height: 100%; }
/* Подпись плитки дашборда («ГОДОВОЙ БЮДЖЕТ» над цифрой) — капслоком. Узнаём
   её по соседству с самой цифрой: без этого условия правило ловило первый
   абзац любой карточки и целые пояснения на экране «Ценник» шли криком. */
.card-body > div.text-muted.small:first-child:has(+ .h5) {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: var(--text-3);
}
.card-body .h5 { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* --- шапка сервиса ------------------------------------------------------- */
.hdr { grid-template-columns: auto auto 1fr auto; }
.hdr__logo { font-weight: 700; font-size: 13px; }
.svc-switch { flex-wrap: wrap; }
.svc-switch__btn { text-decoration: none; }
.svc-switch__btn:hover { color: var(--text); }
.hdr-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--r5); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px;
}
.subnav__item { text-decoration: none; }
.subnav__count--alert { background: var(--r5); color: #fff; border-color: var(--r5); }
.user-chip__meta { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.viewing-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 20px;
  background: var(--r3-bg);
  border-bottom: 1px solid color-mix(in oklch, var(--r3) 40%, transparent);
  color: var(--r3);
  font-size: 12px;
}

.helpbar { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.helpbar__what { color: var(--text-2); font-size: 12px; flex: 1 1 auto; }
.help-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
}
.help-panel ol { margin: 0 0 6px; padding-left: 18px; }
.help-panel li { margin-bottom: 3px; }
.help-panel__note { color: var(--text-3); }

/* --- справка окном -------------------------------------------------------
   Раньше справка разворачивалась прямо в странице и сдвигала таблицу, из-за
   чего её читали второпях и закрывали. Окно ничего не двигает: прочитал —
   закрыл, экран остался там же, где был. */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--el-3);
}
.modal-header, .modal-footer { border-color: var(--border-soft); }
.modal-title { font-size: 14px; font-weight: 600; }
.modal-body.help-panel {
  border: 0; border-left: 0; border-radius: 0;
  background: transparent; font-size: 12.5px;
}
.help-what { color: var(--text); margin-bottom: 12px; }
.help-block { margin-bottom: 12px; }
.help-block__title {
  color: var(--text-3); text-transform: uppercase; font-size: 10px;
  letter-spacing: 0.06em; font-weight: 600; margin-bottom: 4px;
}
.help-steps { color: var(--text-2); }
.help-howto { margin: 0; }
.help-howto dt {
  color: var(--text); font-weight: 600; margin-top: 6px;
}
.help-howto dt::before { content: "→ "; color: var(--accent); }
.help-howto dd { margin: 0 0 0 16px; color: var(--text-2); }

/* Плитка на общей странице справки — это кнопка, а не карточка-ссылка:
   статья открывается тем же окном, что и с экрана. */
.help-card {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; height: 100%; text-align: left;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  color: inherit;
}
.help-card:hover { border-left-color: var(--accent); background: var(--surface-2); }
.help-card__section {
  color: var(--text-3); text-transform: uppercase; font-size: 10px;
  letter-spacing: 0.06em;
}
.help-card__title { font-weight: 600; font-size: 13px; }
.help-card__what { color: var(--text-2); font-size: 11.5px; line-height: 1.35; }
.help-card__count { color: var(--text-3); font-size: 10.5px; margin-top: auto; }

/* --- плотная таблица: с ней работают часами, как с Excel ------------------ */
.table-dense { font-size: 12px; }
.table-dense > :not(caption) > * > * { padding: 2px 6px; }
.table-dense input, .table-dense select { font-size: 12px; padding: 1px 4px; height: 22px; }

.grid-wrap {
  max-height: calc(100vh - 260px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.grid-wrap thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  /* заголовок не переносим: перенос съедал ширину у колонки цены, и число
     обрезалось прямо в ячейке */
  white-space: nowrap;
}
.grid-wrap tbody tr.total-row td {
  position: sticky; top: 24px; z-index: 2;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}
.col-freeze-1 { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 92px; }
.col-freeze-2 { position: sticky; left: 92px; z-index: 2; background: var(--surface); min-width: 240px; }
thead .col-freeze-1, thead .col-freeze-2 { z-index: 4; background: var(--surface-2); }
.grid-wrap tbody tr:hover > td { background: var(--surface-2); }
.grid-wrap tbody tr:hover > td.col-freeze-1,
.grid-wrap tbody tr:hover > td.col-freeze-2 { background: var(--surface-2); }

td.cell-month { text-align: right; min-width: 62px; }
/* Цену не даём сжимать: таблица шире экрана, и авторазметка отбирала ширину
   именно у неё — число обрезалось на последней цифре. */
.cell-price { min-width: 104px; }
td.cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-input {
  width: 100%; border: 1px solid transparent; background: transparent;
  text-align: right; color: inherit;
}
.cell-input:focus {
  border-color: var(--accent); background: var(--surface-3);
  color: var(--text); outline: none;
}
.cell-active { background: color-mix(in oklch, var(--accent) 18%, transparent); }

.badge-priority-Высокий { background: var(--r5) !important; }
.badge-priority-Средний { background: var(--r3) !important; color: #17110a; }
.badge-priority-Низкий  { background: var(--surface-3) !important; color: var(--text-2); }

.suggest {
  position: absolute; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  max-height: 320px; overflow: auto; min-width: 520px;
  box-shadow: var(--el-2);
}
.suggest div { padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.suggest div.active, .suggest div:hover {
  background: color-mix(in oklch, var(--accent) 18%, transparent);
}

.bar { height: 14px; background: var(--surface-3); position: relative; border-radius: 3px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); }
.bar.over > span { background: var(--r5); }

/* --- советчик ------------------------------------------------------------
   Подсказка живёт в панели добавления, и её легко принять за уже добавленные
   строки. Поэтому у блока своя подложка и охряная полоса слева: видно, что
   это предложение, а не заявка. */
.advice-box {
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
}
.advice-list {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .advice-list { grid-template-columns: 1fr 1fr; }
}
.advice-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--space-2);
  align-items: start;
  padding: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.advice-item__head { grid-column: 1; }
.advice-item__why {
  grid-column: 1;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.35;
}
.advice-item .take { grid-column: 2; grid-row: 1 / span 2; align-self: center; }