/* Единый стиль сайта: монохром, мягкие карточки, цвет только у статусов. Шрифт Inter лежит у нас (static/fonts, лицензия OFL), без CDN: сервер может быть без интернета. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations"), url("/static/fonts/inter-cyrillic-wght-normal.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-wght-normal.woff2") format("woff2-variations"), url("/static/fonts/inter-latin-wght-normal.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; }
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #eceef1;
  --bg-img: radial-gradient(1100px 520px at 18% -8%, #fff 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, #f1f2f5 0%, #e4e7ec 100%);
  --card: rgba(255, 255, 255, .78);
  --card-solid: #fff;
  --line: rgba(20, 22, 28, .12);
  --line-strong: rgba(20, 22, 28, .22);
  --shadow: 0 1px 2px rgba(16, 18, 24, .04), 0 14px 34px rgba(16, 18, 24, .07);
  --fg: #16171a;
  --fg2: #52555c;
  --muted: #5b5e66;
  --ink: #16171a;
  --ink-fg: #fff;
  --soft: rgba(20, 22, 28, .05);
  --good: #17653d;
  --good-bg: rgba(36, 160, 98, .15);
  --warn: #7a4f00;
  --warn-bg: rgba(226, 160, 30, .2);
  --bad: #a52f2f;
  --bad-bg: rgba(214, 72, 72, .13);
  --acc: #16171a;
  --track: rgba(20, 22, 28, .1);
  --bar: #23252a;
  --r: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f10;
    --bg-img: linear-gradient(180deg, #0f0f10, #0f0f10);
    --card: #18181b;
    --card-solid: #18181b;
    --line: rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .24);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --fg: #f4f4f5;
    --fg2: #b4b4bc;
    --muted: #a1a1aa;
    --ink: #f4f4f5;
    --ink-fg: #0f0f10;
    --soft: rgba(255, 255, 255, .07);
    --good: #6fcf9a;
    --good-bg: rgba(60, 200, 125, .16);
    --warn: #e6b45f;
    --warn-bg: rgba(230, 180, 95, .16);
    --bad: #f08c8c;
    --bad-bg: rgba(240, 110, 110, .16);
    --acc: #f4f4f5;
    color-scheme: dark;
    --track: rgba(255, 255, 255, .12);
    --bar: #e4e4e7;
  }
}
:root[data-theme="dark"] {
  --bg: #0f0f10;
  --bg-img: linear-gradient(180deg, #0f0f10, #0f0f10);
  --card: #18181b;
  --card-solid: #18181b;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .24);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --fg: #f4f4f5;
  --fg2: #b4b4bc;
  --muted: #a1a1aa;
  --ink: #f4f4f5;
  --ink-fg: #0f0f10;
  --soft: rgba(255, 255, 255, .07);
  --good: #6fcf9a;
  --good-bg: rgba(60, 200, 125, .16);
  --warn: #e6b45f;
  --warn-bg: rgba(230, 180, 95, .16);
  --bad: #f08c8c;
  --bad-bg: rgba(240, 110, 110, .16);
  --acc: #f4f4f5;
  color-scheme: dark;
  --track: rgba(255, 255, 255, .12);
  --bar: #e4e4e7;
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--font); background-color: var(--bg); background-image: var(--bg-img); background-attachment: fixed; color: var(--fg); overflow-wrap: break-word; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; }
a { color: var(--fg); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* каркас: боковая карточка + верхняя карточка + рабочая область */
.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; max-width: 1560px; margin: 0 auto; padding: 16px; align-items: start; }
.col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; max-width: 520px; }
.card.wide { max-width: none; }
nav#side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 14px 10px; margin: 0; max-width: none; display: flex; flex-direction: column; gap: 4px; }
.logo { padding: 4px 10px 12px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
nav#side a, nav#side span.item { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--fg2); font-weight: 500; }
nav#side a:hover { background: var(--soft); color: var(--fg); }
nav#side a.active { background: var(--ink); color: var(--ink-fg); font-weight: 600; }
nav#side hr { border: 0; border-top: 1px solid var(--line); margin: 8px 4px; }
nav#side .blocked { color: var(--muted); }
nav#side small { display: block; color: var(--muted); font-size: 12px; }
header.top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 60px; flex-wrap: wrap; margin: 0; max-width: none; border-radius: 20px; }
header.top .grow { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.top form { display: flex; gap: 8px; align-items: center; margin: 0; }
header.top select { width: auto; max-width: 220px; }
main { min-width: 0; }
#menu-toggle { display: none; }

/* формы */
label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 14px; }
label input[type=checkbox], label input[type=radio] { margin-right: 6px; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { padding: 9px 12px; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card-solid); max-width: 100%; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select { width: 100%; }
header.top input, header.top select { width: auto; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--ink); vertical-align: middle; }
input[type=file] { width: 100%; background: var(--soft); }
button, .btn, .btn-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--ink-fg); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
button:hover, .btn-link:hover { opacity: .88; }
button.secondary { background: var(--card-solid); color: var(--fg); border-color: var(--line-strong); }
button.secondary:hover { background: var(--soft); opacity: 1; }
button:disabled { opacity: .45; cursor: not-allowed; }
form.inline { display: inline; margin: 0; }
.code { font-size: 28px; letter-spacing: 8px; text-align: center; }
.filters, .tabs { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0 14px; }
.filters a, .tabs a { margin-right: 0; }
.filters label { margin: 0; }
.tabs strong { padding: 4px 12px; border-radius: 99px; background: var(--ink); color: var(--ink-fg); }
.pager { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.hint { color: var(--muted); display: block; font-size: 13px; font-weight: 400; }
.bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.bulk label { margin: 0; }

/* статусы */
.err { color: var(--bad); font-weight: 600; }
.muted { color: var(--muted); }
.banner { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--fg); padding: 10px 14px; border-radius: 12px; margin-bottom: 16px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--fg2); white-space: nowrap; }
.badge.kind-equipment { background: var(--good-bg); border-color: transparent; color: var(--good); }
.badge[class*="flag-"] { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.badge.dup-similar { font-size: 11px; }
.ask-client { display: inline-block; min-width: 14px; padding: 0 5px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 11px; font-weight: 700; text-align: center; cursor: help; }
.steps ol { display: flex; gap: 6px; list-style: none; padding: 6px; margin: 0 0 16px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.steps li { padding: 8px 14px; border-radius: 11px; color: var(--fg2); font-weight: 600; font-size: 14px; }
.steps li.active { background: var(--ink); color: var(--ink-fg); }
.steps li.active a { color: var(--ink-fg); }
.steps li.soon { color: var(--muted); }
.steps a { text-decoration: none; color: inherit; }

/* таблицы: свой горизонтальный скролл контейнера, страница не раздвигается */
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--card-solid); margin-bottom: 14px; max-width: 100%; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; font-weight: 600; color: var(--fg2); background: var(--soft); letter-spacing: .02em; }
tbody tr:last-child td { border-bottom: 0; }
tr.changed { background: var(--warn-bg); }
tr.inactive { color: var(--muted); background: var(--soft); }
tr.inactive td { pointer-events: none; }
table.prices { min-width: 760px; }
table.prices th:first-child, table.prices td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card-solid); box-shadow: 1px 0 0 var(--line); }
table.prices td.min { background: var(--good-bg); color: var(--good); font-weight: 700; }
table.prices tr.uncovered td { background: var(--warn-bg); }
.fullscreen { position: fixed; inset: 0; z-index: 50; background-color: var(--bg); background-image: var(--bg-img); overflow: auto; padding: 16px; }
dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; }
dt { color: var(--muted); }
dd { margin: 0; }

/* дубли строк ВРП: значок-кнопка с выпадающим меню */
.dup { position: relative; display: inline-block; margin-left: .25rem; }
.dup-btn { border: 0; font: inherit; font-size: 12px; line-height: 1.4; min-width: 28px; min-height: 28px; padding: 0 8px; border-radius: 8px; cursor: pointer; background: var(--warn-bg); color: var(--warn); }
.dup-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.dup-menu { position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); width: max-content; max-width: min(20rem, 90vw); display: block; padding: .7rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card-solid); color: var(--fg); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.dup-menu[hidden] { display: none; }
.dup-title { display: block; margin-bottom: .4rem; font-size: .85rem; }
.dup-main { display: flex; gap: .5rem; }
.dup-main .dup-primary { flex: 1; min-height: 44px; font-size: 1rem; }
.dup-more { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.dup-more .dup-secondary { font-size: .85rem; min-height: 40px; }
.dup-note, .dup-state { margin-left: .25rem; }

/* загрузка файлов */
.dropzone { border: 2px dashed var(--line-strong); border-radius: 14px; padding: 24px; text-align: center; background: var(--soft); }
.dropzone.drag, .dropzone:focus { border-color: var(--ink); background: var(--card-solid); outline: none; }
.dropzone:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.batch { list-style: none; padding: 0; }
.batch-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; background: var(--card); }
.batch-item.status-rejected { border-color: var(--bad); }
progress { width: 100%; height: 8px; accent-color: var(--ink); }

/* планшет и телефон: боковое меню прячется, кнопка «Меню» */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 10px; }
  #menu-toggle { display: inline-flex; }
  nav#side { display: none; position: static; max-height: none; }
  nav#side.open { display: flex; order: -1; }
  nav#side a, nav#side span.item { padding: 14px 12px; }
  header.top { gap: 8px; }
  header.top form { flex: 1 1 100%; }
  header.top select { flex: 1 1 140px; max-width: none; }
  header.top .grow { flex-basis: 100%; order: 5; white-space: normal; }
  main { padding: 0; }
  .card { max-width: none; padding: 14px; }
  .steps ol { overflow-x: auto; flex-wrap: nowrap; }
  .steps li { white-space: nowrap; }
}
@media (max-width: 480px) {
  h1 { font-size: 21px; }
  button, .btn-link { min-height: 48px; }
  input, select { min-height: 46px; font-size: 16px; }
  dl { grid-template-columns: minmax(0, 1fr); }
  dt { margin-top: 8px; }
  .dup-menu { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; max-width: none; }
  th, td { padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.brand { display: none; }
body > main { max-width: 480px; margin: 8vh auto; padding: 16px; }
@media (max-width: 900px) { .brand { display: inline; } body > main { margin: 4vh auto; } }

/* общие правила: ряды форм, список с действиями, свой выбор файла, закрытый пункт меню */
.form-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 8px 0; }
.form-row > * { min-width: 0; }
form > button, form > p > button { margin-top: 4px; }
.filepick { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; max-width: 100%; margin: 4px 0 8px; font-weight: 400; }
.filepick label.btn { cursor: pointer; margin: 0; display: inline-flex; }
.filepick-name { pointer-events: none; user-select: none; }
.filepick .filepick-clear { min-height: 36px; min-width: 36px; padding: 0 10px; font-size: 20px; line-height: 1; }
.filepick .filepick-clear[hidden] { display: none; }
.filepick input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }
.filepick .btn { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card-solid); color: var(--fg); font-weight: 600; font-size: 14px; }
.filepick label.btn:hover { background: var(--soft); }
.filepick:focus-within label.btn { outline: 2px solid var(--ink); outline-offset: 2px; }
.filepick-name { color: var(--muted); font-size: 14px; min-width: 0; flex: 0 1 auto; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav#side span.item.blocked { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: not-allowed; }
nav#side .item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
nav#side .lock { flex: none; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--muted); }
li { margin: 6px 0; }
li > form.inline, p > form.inline, td > form.inline { display: inline-block; vertical-align: middle; margin: 2px 0 2px 8px; }
li > form.inline button, p > form.inline button { min-height: 36px; padding: 6px 14px; }
.filters input[type=text], .filters input[type=search], .filters input[type=number], .filters select { width: auto; flex: 0 1 220px; min-width: 0; }
.filters label { flex: none; }
form > p > .hint { margin-top: 4px; }
form:not(.filters):not(.bulk) > :is(input, select, textarea):not([type=hidden]) + :is(input, select, textarea, button, label) { margin-top: 8px; }
.badge.ai-hint { background: var(--soft); color: var(--fg); }
tr.unbought td { background: var(--warn-bg); }
tr.overspend td { background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.badge.flag-over { background: var(--bad-bg); color: var(--bad); }

/* иконки, шапка, меню пользователя, переключатель темы */
.ic { flex: none; vertical-align: -3px; }
nav#side a, nav#side span.item { display: flex; align-items: center; gap: 10px; }
nav#side span.item.blocked .item-label { flex: 1 1 auto; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card-solid); color: var(--fg); cursor: pointer; list-style: none; }
.icon-btn:hover { background: var(--soft); opacity: 1; }
summary.icon-btn::-webkit-details-marker { display: none; }
header.top { flex-wrap: nowrap; gap: 10px; }
header.top .switch { flex: 1 1 auto; min-width: 0; max-width: 420px; }
header.top .sel { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
header.top .sel .ic { position: absolute; left: 12px; pointer-events: none; color: var(--muted); }
header.top .sel select { width: 100%; max-width: none; padding-left: 38px; text-overflow: ellipsis; }
header.top .grow { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
header.top .grow.cur .ic { color: var(--muted); }
.js header.top .go { display: none; }
header.top .user { position: relative; margin-left: auto; flex: none; }
.user-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 260px; max-width: calc(100vw - 24px); padding: 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card-solid); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); display: flex; flex-direction: column; gap: 10px; }
.user-mail { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.theme { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.seg-btn { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 4px; flex-direction: column; gap: 2px; border: 0; border-radius: 9px; background: transparent; color: var(--fg2); font-size: 11.5px; font-weight: 600; }
.seg-btn:hover { background: var(--soft); opacity: 1; }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--ink-fg); }
.user-pop form { margin: 0; }
.user-pop .logout { width: 100%; }
@media (min-width: 901px) { .brand { display: none; } }
@media (max-width: 900px) {
  header.top { padding: 8px 10px; min-height: 0; flex-wrap: nowrap; }
  header.top form, header.top .grow { flex: 1 1 auto; order: 0; white-space: nowrap; }
  .brand { display: none; }
  header.top .switch { max-width: none; }
  header.top .sel select { flex: 1 1 auto; }
  #menu-toggle { display: inline-flex; }
}
@media (max-width: 480px) { .icon-btn { width: 44px; height: 44px; } .user-pop { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; max-width: none; } }

/* карточки показателей и полосы (серверный SVG) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpis .kpi { margin: 0; }
.kpi { padding: 18px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; min-width: 0; }
.kpi .k { font-size: 13px; color: var(--fg2); font-weight: 500; }
.kpi .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.kpi .v { font-size: 24px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.kpi .s { font-size: 12.5px; color: var(--muted); }
.kpi.bad .v { color: var(--bad); }
.kpi.warn .v { color: var(--warn); }
.ring { width: 62px; height: 62px; flex: none; }
.ring .rt { fill: none; stroke: var(--track); stroke-width: 6; }
.ring .rf { fill: none; stroke: var(--bar); stroke-width: 6; stroke-linecap: round; }
.ring text { fill: var(--fg); font-size: 13px; font-weight: 600; font-family: var(--font); }
.bars { display: flex; flex-direction: column; }
.brow { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) minmax(96px, 150px); gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.brow:first-child { border-top: 0; }
.brow .bl { font-size: 13px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.bt { display: block; width: 100%; height: 10px; border-radius: 6px; overflow: hidden; }
.bt .bs { fill: var(--track); }
.bt .bf { fill: var(--bar); }
.bt .bf.over { fill: var(--bad); }
.bv { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--fg2); line-height: 1.25; }
.bv b { display: block; color: var(--fg); font-size: 13px; }
.bv b.over { color: var(--bad); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--fg2); margin-top: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 16px; height: 8px; border-radius: 5px; display: block; }
.legend .lg-track { background: var(--track); }
.legend .lg-bar { background: var(--bar); }
.legend .lg-over { background: var(--bad); }
.empty { padding: 18px 0; text-align: center; color: var(--fg2); }
@media (max-width: 600px) { .brow { grid-template-columns: minmax(0, 1fr); gap: 4px; } .bv { text-align: left; } .bv b { display: inline; margin-right: 8px; } }
@media (max-width: 480px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; min-height: 104px; }
  .kpi .v { font-size: 20px; }
  .kpi .ring { width: 48px; height: 48px; }
  .kpi .s { font-size: 12px; }
}

/* выпадающие списки в стиле сайта; без JS остаётся обычный select с темой в option */
select option, select optgroup { background: var(--card-solid); color: var(--fg); }
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.dd { position: relative; display: inline-block; max-width: 100%; min-width: 0; vertical-align: middle; }
header.top .dd, form > .dd, .form-row > .dd { display: block; }
header.top .sel .dd { flex: 1 1 auto; width: 100%; }
.dd-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.dd-btn { width: 100%; min-height: 40px; justify-content: space-between; gap: 8px; padding: 8px 12px; font-weight: 500; text-align: left; border-radius: 12px; }
header.top .dd-btn { padding-left: 38px; min-height: 44px; }
.dd-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-chev { flex: none; width: 8px; height: 8px; margin: 0 4px 3px 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .12s; }
.dd-btn[aria-expanded="true"] .dd-chev { transform: rotate(225deg); margin-bottom: -3px; }
.dd-pop { position: fixed; z-index: 60; max-width: min(92vw, 480px); max-height: 340px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card-solid); color: var(--fg); box-shadow: 0 14px 40px rgba(0, 0, 0, .28); }
.dd-pop[hidden] { display: none; }
.dd-search { width: 100%; margin: 0 0 6px; min-height: 38px; }
.dd-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; outline: none; }
.dd-list li { margin: 0; padding: 10px 12px; border-radius: 9px; cursor: pointer; overflow-wrap: anywhere; }
.dd-list li.active { background: var(--soft); }
.dd-list li[aria-selected="true"] { font-weight: 700; }
.dd-list li[aria-selected="true"]::after { content: "\2713"; float: right; margin-left: 8px; color: var(--muted); }
.dd-list li[aria-disabled="true"] { color: var(--muted); cursor: default; }
.dd-none { padding: 10px 12px; }

/* таблицы «На весь экран»: перенос длинных названий, залипающие шапка и первая колонка, ширина колонок, кнопка закрытия */
.table-wrap { max-height: 72vh; }
.table-wrap.fullscreen { max-height: none; border: 0; border-radius: 0; margin: 0; }
.table-wrap table { width: 100%; }
.table-wrap table.col-fixed { table-layout: fixed; min-width: 0; }
.table-wrap th, .table-wrap td { overflow-wrap: anywhere; word-break: normal; white-space: normal; }
.table-wrap table.measure th, .table-wrap table.measure td { white-space: nowrap; overflow-wrap: normal; }
.table-wrap th { position: sticky; top: 0; z-index: 3; min-width: 84px; padding-right: 16px; line-height: 1.25; vertical-align: bottom; background-color: var(--card-solid); background-image: linear-gradient(var(--soft), var(--soft)); }
.table-wrap table:not(.col-fixed) th:first-child, .table-wrap table:not(.col-fixed) td:first-child { max-width: 420px; }
.table-wrap[data-fs-target] table:not(.col-fixed) th:first-child, .table-wrap[data-fs-target] table:not(.col-fixed) td:first-child { min-width: 240px; }
.table-wrap[data-fs-target] th:first-child, .table-wrap[data-fs-target] td:first-child { position: sticky; left: 0; z-index: 2; background-color: var(--card-solid); box-shadow: 1px 0 0 var(--line); }
.table-wrap[data-fs-target] th:first-child { z-index: 4; background-image: linear-gradient(var(--soft), var(--soft)); }
.table-wrap[data-fs-target] tr.unbought td:first-child { background-image: linear-gradient(var(--warn-bg), var(--warn-bg)); }
.table-wrap[data-fs-target] tr.overspend td:first-child { background-image: linear-gradient(var(--bad-bg), var(--bad-bg)); }
.table-wrap[data-fs-target] tr.changed td:first-child { background-image: linear-gradient(var(--warn-bg), var(--warn-bg)); }
.col-grip { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: col-resize; touch-action: none; user-select: none; }
.col-grip::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 4px; width: 2px; border-radius: 2px; background: var(--line-strong); }
.col-grip:hover::after, .col-grip.drag::after, .col-grip:focus-visible::after { background: var(--ink); }
@media (pointer: coarse) { .col-grip { width: 22px; } }
.fs-close { position: fixed; top: 12px; right: 16px; z-index: 70; width: 44px; min-width: 44px; padding: 0; font-size: 26px; line-height: 1; box-shadow: var(--shadow); }
html.fs-open { overflow: hidden; }

/* полосы прокрутки в стиле сайта: тонкие, без стрелок, цвета темы */
html, body, * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* панели действий и переключатели-сегменты: одинаковые на всех страницах */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 8px 0 14px; }
.toolbar form.inline { display: inline-flex; margin: 0; }
.toolbar > .muted { font-size: 14px; }
a.btn-link.secondary { background: var(--card-solid); color: var(--fg); border-color: var(--line-strong); }
a.btn-link.secondary:hover { background: var(--soft); opacity: 1; }
.seg-group { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); max-width: 100%; }
.seg-group a, .seg-group strong { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 9px; text-decoration: none; color: var(--fg2); font-size: 14px; font-weight: 600; }
.seg-group a:hover { background: var(--soft); color: var(--fg); }
.seg-group strong { background: var(--ink); color: var(--ink-fg); }
.tabs.seg-group { margin: 8px 0 14px; display: flex; width: max-content; }

/* единая таблица как в Google Таблицах: сетка, чередование строк, режимы текста; перекрывает прежние правила таблиц */
.table-wrap table.xt { width: 100%; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.table-wrap table.xt th, .table-wrap table.xt td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 12px; }
.table-wrap table.xt th:last-child, .table-wrap table.xt td:last-child { border-right: 0; }
.table-wrap table.xt thead th { border-bottom: 1px solid var(--line-strong); font-weight: 700; }
.table-wrap table.xt tbody tr:nth-child(even) td { background-image: linear-gradient(var(--soft), var(--soft)); background-color: transparent; }
.table-wrap table.xt tbody tr:nth-child(even) td:first-child { background-color: var(--card-solid); }
.table-wrap table.xt td.nw, .table-wrap table.xt th.nw { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.table-wrap table.xt td.num, .table-wrap table.xt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap table.xt.tx-clip td:not(.nw), .table-wrap table.xt.tx-clip th:not(.nw) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; overflow-wrap: normal; }
.table-wrap table.xt.tx-clip:not(.col-fixed) td:first-child:not(.nw) { max-width: 360px; }
.table-wrap table.xt.tx-wrap td:not(.nw), .table-wrap table.xt.tx-wrap th:not(.nw) { white-space: normal; overflow-wrap: break-word; word-break: normal; max-width: 420px; }
.table-wrap table.xt.col-fixed td, .table-wrap table.xt.col-fixed th { max-width: none; }
.table-wrap table.xt td:first-child, .table-wrap table.xt th:first-child { left: 0; z-index: 2; background-color: var(--card-solid); box-shadow: 1px 0 0 var(--line); }
.table-wrap table.xt th:first-child { z-index: 4; background-image: linear-gradient(var(--soft), var(--soft)); }
.table-wrap table.xt tr.unbought td:first-child { background-image: linear-gradient(var(--warn-bg), var(--warn-bg)); }
.table-wrap table.xt tr.overspend td:first-child { background-image: linear-gradient(var(--bad-bg), var(--bad-bg)); }
.table-wrap table.xt tr.changed td:first-child { background-image: linear-gradient(var(--warn-bg), var(--warn-bg)); }
.table-wrap table.xt th { position: sticky; top: 0; }
.table-wrap table.xt td:first-child, .table-wrap table.xt th:first-child { position: sticky; }
.tbl-bar { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.tbl-bar .theme { width: auto; }
.tbl-bar .seg-btn { flex: 0 0 auto; flex-direction: row; gap: 6px; padding: 6px 12px; min-height: 34px; font-size: 12.5px; }
html.fs-open .tbl-bar:not(.fs) { display: none; }
html.fs-open .tbl-bar.fs { position: fixed; top: 12px; right: 68px; z-index: 70; margin: 0; }
@media (max-width: 480px) { .tbl-bar .seg-btn span { display: none; } }

header.top .sel .ic { z-index: 2; }

tr.line-pending td, tr.line-none td { background-color: var(--warn-bg); }

/* Страница пользователей: роль + «Сохранить» в одной колонке, статус и действия без наложений */
.users-table td { vertical-align: middle; }
.users-table .role-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.users-table .role-form select { width: auto; min-width: 150px; flex: 1 1 150px; }
.users-table .role-form button { flex: 0 0 auto; min-height: 40px; }
.users-table td.st { white-space: nowrap; overflow-wrap: normal; }
.users-table .row-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.users-table .row-actions form.inline { display: inline-flex; margin: 0; }
.users-table .row-actions a { white-space: nowrap; }

/* ширина колонок: таблица = сумма колонок (table-layout: fixed), не 100%; уже контейнера - свободное место справа, шире - прокрутка */
.table-wrap table.xt.col-fixed { table-layout: fixed; width: auto; min-width: 0; }
.table-wrap table.xt.col-fixed th { min-width: 0; }
/* узкий экран: первая колонка не закреплена и не перекрывает соседние */
@media (max-width: 600px) {
  .table-wrap table.xt td:first-child, .table-wrap table.xt th:first-child { position: static; box-shadow: none; }
  .table-wrap table.xt th { position: sticky; }
  .table-wrap[data-fs-target] table.xt th:first-child, .table-wrap[data-fs-target] table.xt td:first-child { position: sticky; box-shadow: 1px 0 0 var(--line); }
}

/* содержимое ячейки не выходит за свою колонку: текст обрезается/переносится, элементы управления сжимаются до минимума колонки */
.table-wrap table.xt.col-fixed td, .table-wrap table.xt.col-fixed th { overflow: hidden; }
.table-wrap table.xt td select, .table-wrap table.xt td form { max-width: 100%; }
.table-wrap table.xt.col-fixed td:not(.nw), .table-wrap table.xt.col-fixed th:not(.nw) { text-overflow: ellipsis; }

/* по умолчанию ничего не растягивается: таблица по содержимому, свободное место справа остаётся пустым */
.table-wrap table.xt { width: auto; min-width: 0; }
.table-wrap { scrollbar-gutter: stable; }
/* колонка действий: все элементы видны; «Переносить» - стопкой, «Обрезать» - в одну строку (строка = один ряд элементов) */
.table-wrap table.xt td.acts { overflow: visible; text-overflow: clip; max-width: none; }
.table-wrap table.xt td.acts form { display: flex; margin: 0 0 6px; gap: 6px; align-items: center; }
.table-wrap table.xt td.acts form:last-child { margin-bottom: 0; }
.table-wrap table.xt td.acts input[type=text] { width: 100%; min-width: 180px; }
.table-wrap table.xt.tx-wrap td.acts form { flex-direction: column; align-items: stretch; }
.table-wrap table.xt.tx-clip td.acts { white-space: nowrap; }
.table-wrap table.xt.tx-clip td.acts form { display: inline-flex; flex-direction: row; margin: 0 8px 0 0; vertical-align: middle; }
.table-wrap table.xt.tx-clip td.acts input[type=text] { width: 180px; }
.table-wrap table.xt.col-fixed td:not(.acts), .table-wrap table.xt.col-fixed th { text-overflow: ellipsis; }
.table-wrap table.xt.col-fixed td:not(.acts) { overflow: hidden; }
.table-wrap.row-rs-hot { cursor: row-resize; }

/* боковое меню: кнопка свернуть/развернуть; свёрнуто - только иконки (подсказка title) */
.logo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#side-collapse { display: none; }
nav#side a { display: flex; align-items: center; gap: 10px; }
@media (min-width: 901px) {
  #side-collapse { display: inline-flex; width: 32px; height: 32px; min-height: 0; padding: 0; background: transparent; color: var(--fg2); border-color: transparent; }
  body.side-collapsed .app { grid-template-columns: 68px minmax(0, 1fr); }
  body.side-collapsed nav#side { padding: 14px 6px; align-items: center; overflow-x: hidden; }
  body.side-collapsed nav#side .logo-t, body.side-collapsed nav#side a > span, body.side-collapsed nav#side .item-label, body.side-collapsed nav#side .lock { display: none; }
  body.side-collapsed nav#side .logo { justify-content: center; padding: 4px 0 12px; }
  body.side-collapsed nav#side a, body.side-collapsed nav#side span.item { justify-content: center; padding: 10px; }
}

/* сетка продолжается до краёв: пустые колонки справа и пустые строки внизу (только оформление, не данные) */
.table-wrap.gridfill { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; --rh: 38px; --hh: 38px; --cw: 110px; }
.table-wrap.gridfill > table.xt { grid-column: 1; grid-row: 1; align-self: start; }
.table-wrap.gridfill > .fill-r, .table-wrap.gridfill > .fill-b { pointer-events: none; user-select: none; }
.fill-r { grid-column: 2; grid-row: 1; min-width: 0;
  background-image:
    linear-gradient(to right, var(--line) 0 1px, transparent 1px),
    linear-gradient(to bottom, transparent calc(var(--rh) - 1px), var(--line) calc(var(--rh) - 1px) var(--rh)),
    linear-gradient(to bottom, transparent 0 var(--rh), var(--soft) var(--rh) calc(2 * var(--rh))),
    linear-gradient(var(--soft), var(--soft)),
    linear-gradient(to bottom, transparent calc(var(--hh) - 1px), var(--line-strong) calc(var(--hh) - 1px) var(--hh));
  background-size: var(--cw) 100%, 100% var(--rh), 100% calc(2 * var(--rh)), 100% var(--hh), 100% var(--hh);
  background-position: 0 0, 0 var(--hh), 0 var(--hh), 0 0, 0 0;
  background-repeat: repeat-x, repeat-y, repeat-y, no-repeat, no-repeat; }
.fill-b { grid-column: 1 / -1; grid-row: 2; min-height: calc(3 * var(--rh)); background-repeat: repeat-y;
  background-image: linear-gradient(to bottom, transparent calc(var(--rh) - 1px), var(--line) calc(var(--rh) - 1px) var(--rh)), linear-gradient(to bottom, var(--soft) 0 var(--rh), transparent var(--rh) calc(2 * var(--rh))); background-size: 100% var(--rh), 100% calc(2 * var(--rh)); }
.fill-b.odd { background-image: linear-gradient(to bottom, transparent calc(var(--rh) - 1px), var(--line) calc(var(--rh) - 1px) var(--rh)), linear-gradient(to bottom, transparent 0 var(--rh), var(--soft) var(--rh) calc(2 * var(--rh))); }
.table-wrap.fullscreen.gridfill { min-height: 100vh; }
/* подсветка строки идёт и на закреплённую первую колонку */
.table-wrap table.xt tr.uncovered td:first-child { background-image: linear-gradient(var(--warn-bg), var(--warn-bg)); }
.table-wrap table.xt tr.inactive td:first-child { background-image: linear-gradient(var(--soft), var(--soft)); }

/* FIN-671: телефон (375 px) - зона нажатия >= 44 px у вкладок шагов, ссылок в таблицах/списках и кнопок таблицы */
@media (max-width: 600px) {
  main .steps li { padding: 0; }
  main .steps li a, main .steps li span { display: flex; align-items: center; min-height: 44px; padding: 0 14px; }
  main td a:not(.btn-link), main li:not(.steps li) a:not(.btn-link), .brow a.bl { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; padding: 11px 4px; margin: 0 2px; }
  .tbl-bar .seg-btn { min-height: 44px; min-width: 44px; }
  .seg-group a, .seg-group strong { min-height: 44px; }
}