/* Реестр КП и договоры. Размеры в rem — страница растёт вместе с размером шрифта в браузере. */
:root {
  --ink: #1d2433; --ink-2: #4a5466; --muted: #565f70; --line: #dde1e7; --bg: #f4f5f7; --card: #fff;
  --brand: #1f3a5f; --brand-2: #2b4f80; --link: #1f5fa8; --focus: #2f7de1;
  --ok-bg: #eaf7ee; --ok-line: #b9e2c4; --warn-bg: #fff8e6; --warn-line: #f0d58a; --warn-ink: #7a4f00; --err: #b00020;
}
* { box-sizing: border-box }
html { font-size: 100% }
body { margin: 0; font: 0.875rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg) }
h1 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0.4rem 0 0.75rem }
h2 { font-size: 1rem; line-height: 1.25; margin: 0 0 0.6rem }
h3 { font-size: 0.875rem }
a { color: var(--link) }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }

/* шапка и навигация */
header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.25rem 1rem;
  padding: 0.45rem 1.1rem; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20 }
header a { color: var(--brand); text-decoration: none; padding: 0.3rem 0.55rem; border-radius: 6px }
header nav { display: flex; flex-wrap: wrap; gap: 0.15rem }
header nav a:hover { background: #eef3fa }
header nav a[aria-current="page"] { background: var(--brand); color: #fff; font-weight: 600 }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--ink) !important; padding-left: 0; letter-spacing: -0.005em }
.logo img { display: block; height: 2.5rem; width: auto }
.login-logo { display: block; width: 12rem; height: auto; margin: 0 auto 0.6rem }
main { padding: 1rem 1.1rem 2rem; max-width: 94rem; margin: auto }

/* карточки и поля */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem; margin-bottom: 0.9rem }
.narrow { max-width: 24rem; margin: 4rem auto }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0.9rem }
label { display: block; margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--ink-2) }
input, select, textarea { display: block; width: 100%; padding: 0.4rem 0.5rem; border: 1px solid #c2c9d3; border-radius: 6px;
  font: inherit; color: var(--ink); background: #fff }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px rgba(47, 125, 225, .18) }
input:disabled, select:disabled, textarea:disabled { background: #f1f3f6; color: var(--muted) }
.row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: 0.25rem 0.9rem }
.wide { grid-column: 1 / -1 }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0 }
[hidden] { display: none !important }

/* кнопки: отклик сразу при нажатии */
button { padding: 0.45rem 0.9rem; border: 1px solid var(--brand); background: #fff; color: var(--brand); border-radius: 6px;
  cursor: pointer; font: inherit; margin: 2px; transition: background-color 120ms, transform 100ms ease-out }
button:hover { background: #eef3fa }
button:active { transform: scale(0.97) }
button.main, form.narrow button[type=submit], form.narrow > button { background: var(--brand); color: #fff }
button.main:hover, form.narrow > button:hover { background: var(--brand-2) }
button:disabled { opacity: .45; cursor: default; transform: none }
button.x { padding: 0.15rem 0.55rem; border-color: #c33; color: #c33 }
button.x:hover { background: #fdecec }
button.busy::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.45em; vertical-align: -0.05em;
  border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* фильтры реестра */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem }
.filters input[name=q] { width: 19rem; max-width: 100% }
.filters select, .filters input { width: auto; display: inline-block }
.chk { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0; color: var(--ink) }
.chk input { width: auto }
.radio { display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem; color: var(--ink); margin: 0.35rem 0; cursor: pointer }
.radio input { width: auto; margin: 0 }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.25rem 0 0.6rem; color: var(--muted); font-size: 0.8125rem }

/* таблицы */
.scroll { overflow-x: auto }
table.grid { border-collapse: collapse; width: 100%; background: #fff }
.grid th, .grid td { border: 1px solid #e0e3e8; padding: 0.35rem 0.45rem; vertical-align: top; text-align: left }
.grid th { background: #eef1f5 }
.grid tbody tr.link { cursor: pointer }
.grid tbody tr.link:hover { background: #f0f6ff }
.grid a.rowlink { font-weight: 600; text-decoration: none }
.grid a.rowlink:hover { text-decoration: underline }
.edit td { padding: 0.2rem }
.edit textarea { min-width: 14rem }
.edit td.del { width: 2.5rem; text-align: center }
.r, th.r { text-align: right }
.nw { white-space: nowrap }
.small { font-size: 0.75rem }
.muted { color: var(--muted) }
.kv th { text-align: left; padding: 0.2rem 0.6rem 0.2rem 0; color: var(--muted); font-weight: normal; vertical-align: top }

/* статусы: цвет + подпись */
.status { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.8125rem; white-space: nowrap; background: #eef1f5 }
.status.s-договор { background: #d9f2e1; color: #135c2c }
.status.s-отказ, .status.s-не-актуально { background: #f1f1f1; color: #666 }
.status.s-думает, .status.s-перезвонить { background: #e6eefb; color: #1f4a8a }
.due-mark { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: #ffe7c2; color: var(--warn-ink); font-size: 0.75rem }
tr.st-отказ td, tr.st-не-актуально td { color: #777 }

/* сообщения */
.err { color: var(--err) }
.ok { background: var(--ok-bg); border: 1px solid var(--ok-line); padding: 0.5rem 0.75rem; border-radius: 8px }
.warn { color: var(--warn-ink) }
.warnbox { background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 0.5rem 0.9rem; border-radius: 8px; margin-bottom: 0.9rem }
.warnbox ul { margin: 0.25rem 0 }
.mismatch { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); padding: 0.45rem 0.7rem; border-radius: 8px; margin: 0.5rem 0 }
.badge { font-size: 0.75rem; background: #eef1f5; border-radius: 999px; padding: 0.1rem 0.5rem; vertical-align: middle }
.badge.new { background: var(--ok-bg); color: #135c2c }
.file { margin: 0.3rem 0 }
.sum-line { margin: 0.6rem 0 0 }
.actions { margin: 0.6rem 0 }
form.inline { display: inline }
.toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); background: #1d2433; color: #fff;
  padding: 0.55rem 0.9rem; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); z-index: 40 }
.toast button { background: transparent; color: #9cc8ff; border-color: #9cc8ff; margin-left: 0.4rem }

/* закреплённая панель действий договора */
.bar { position: sticky; bottom: 0; z-index: 15; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between;
  margin: 0.9rem -0.4rem 0; padding: 0.6rem 0.9rem; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 -4px 18px rgba(20, 30, 50, .08) }
.bar-sum { font-size: 1rem }
.bar-sum b { font-size: 1.125rem }
.bar-warn { color: var(--warn-ink); font-size: 0.875rem }
.bar-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem }

/* вход */
.pw { position: relative; display: block }
.pw button { position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); padding: 0.15rem 0.5rem; font-size: 0.75rem; border-color: #c2c9d3; color: var(--ink-2) }
.pw button:active { transform: translateY(-50%) scale(0.97) }

/* телефон: таблицы превращаются в карточки */
@media (max-width: 760px) {
  main { padding: 0.75rem 0.6rem 2rem }
  .card { padding: 0.75rem }
  .filters input[name=q], .filters select { width: 100% }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100% }
  table.cards thead { display: none }
  table.cards tr { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 0.6rem; padding: 0.4rem 0.6rem; background: #fff }
  table.cards td { border: 0; padding: 0.15rem 0 }
  table.cards td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--muted) }
  table.cards td.del { text-align: right }
  .edit textarea { min-width: 0 }
  header { position: static }
  .logo span { font-size: 0.875rem }
  table.cards.reg td.opt, table.cards.reg td:empty { display: none }
  table.cards.reg td[data-label]::before { display: inline; margin-right: 0.4rem }
  table.cards.reg tr { display: grid; grid-template-columns: 1fr auto; gap: 0 0.6rem }
  table.cards.reg td { grid-column: 1 }
  table.cards.reg td.cell-sum, table.cards.reg td.cell-status { grid-column: 2; text-align: right }
  table.cards.reg td.cell-sum { grid-row: 1 }
  table.cards.reg td.cell-status { grid-row: 2 }
  table.cards.reg td.cell-num::before, table.cards.reg td.cell-client::before, table.cards.reg td.cell-sum::before,
  table.cards.reg td.cell-status::before { display: none }
  .bar { margin: 0.75rem -0.2rem 0; padding: 0.5rem 0.6rem }
  .bar-act { width: 100% }
  .bar-act button { flex: 1 }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 0s !important } button:active { transform: none } }
@media (prefers-contrast: more) { :root { --line: #8a93a3; --muted: #333 } .card, .grid th, .grid td { border-color: #8a93a3 } }
@media print { header, .bar, .filters, .toast { display: none } }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.1rem; margin: 0.6rem 0 0.3rem }
.presets p { flex-basis: 100%; margin: 0 }

/* новый КП */
.titlebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap }
a.btn { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid var(--brand); border-radius: 6px; color: var(--brand); text-decoration: none; margin: 2px }
a.btn.main { background: var(--brand); color: #fff }
a.btn:hover { background: #eef3fa } a.btn.main:hover { background: var(--brand-2) }
a.btn:active { transform: scale(0.97) }
.kpnew { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem); gap: 0.9rem; align-items: start }
.kp-calc { position: sticky; top: 3.6rem; max-height: calc(100vh - 4.5rem); overflow: auto }
.seg { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0.4rem }
.seg label { margin: 0; color: var(--ink) }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px }
.seg span { display: inline-block; padding: 0.4rem 0.75rem; border: 1px solid #c2c9d3; border-radius: 999px; background: #fff; cursor: pointer;
  transition: background-color 120ms, border-color 120ms, transform 100ms ease-out; user-select: none }
.seg span:hover { border-color: var(--brand) }
.seg label:active span { transform: scale(0.97) }
.seg input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px }
.mt { margin-top: 0.6rem }
.placebox:empty { display: none }
.placebox { margin: 0.2rem 0 0.6rem }
table.calc td { font-size: 0.8125rem }
table.calc tr.sec td { background: #f6f7f9; font-weight: 600 }
table.calc td.adj { width: 5.5rem; padding: 0.2rem }
table.calc td.adj input { padding: 0.2rem 0.35rem; font-size: 0.8125rem }
.calc-total { font-size: 1.125rem; margin: 0.6rem 0 }
.calc-total b { font-size: 1.375rem }
.wide-btn { width: 100%; padding: 0.65rem; font-size: 1rem }
@media (max-width: 1000px) { .kpnew { grid-template-columns: 1fr } .kp-calc { position: static; max-height: none } }