/* Разделы v2 (05.11.2026): клиенты, выплаты, шаблоны, база знаний, стратегия, вход.
   Вынесено из app-extra.css по гейту размера. Цвета только через токены. */

/* ───────── мои клиенты (P12, P14) ───────── */
.list-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.list-tools .inp { flex: 1 1 240px; }
.people { display: grid; gap: 8px; }
.person { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--r-m); background: var(--glass); border: 1px solid var(--line); }
.person .r { text-align: right; }
@media (max-width: 640px) { .person { grid-template-columns: 1fr 1fr; } .person .r { text-align: left; } }
.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.client-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.client-nums { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.client-nums .r { text-align: right; }

/* ───────── мои выплаты: три шага ───────── */
.steps3 { list-style: none; counter-reset: st; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps3 li { counter-increment: st; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--glass); }
.steps3 li::before { content: counter(st); font: 600 15px/1 var(--f-head); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); margin-bottom: 6px; }
.sec-head-row { align-items: flex-end; margin-bottom: var(--sp-4); }
.sec-head-row .sec-head { margin-bottom: 0; }

/* ───────── шаблоны (P17-P20, A10): свёрнуты, разворачиваются стрелкой ───────── */
.tpl-intro { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.tpl-note { font-size: 14px; color: var(--ink-2); max-width: 72ch; }
.tpl-intro + .chips { margin-bottom: 10px; }
.tpl-list { display: grid; gap: 10px; margin-top: var(--sp-4); }
.tpl { border: 1px solid var(--line); border-radius: var(--r-l); background: linear-gradient(180deg, var(--glass-2), var(--glass)), var(--bg-1); transition: border-color var(--dur) var(--ease); }
.tpl[open] { border-color: var(--line-2); }
.tpl summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 28px; gap: 14px; align-items: center; padding: 16px 20px; cursor: pointer; }
.tpl summary::-webkit-details-marker { display: none; }
.tpl-sum { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tpl-sum .dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl[open] .tpl-sum .dim { display: none; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tpl-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; transition: transform var(--dur) var(--ease); }
.tpl-arrow::before { content: ""; position: absolute; left: 9px; top: 8px; width: 8px; height: 8px; border-style: solid; border-color: var(--ink-2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tpl[open] .tpl-arrow { transform: rotate(180deg); }
.tpl-body { padding: 0 20px 20px; }
.tpl-text { white-space: pre-line; font-size: 14.5px; line-height: 1.65; color: var(--ink-1); max-width: 70ch; }
/* кнопка «Копировать» видна и в свёрнутой карточке; в раскрытой она внизу у текста */
.tpl[open] .tpl-cp { visibility: hidden; }
@media (max-width: 640px) {
  .tpl summary { grid-template-columns: minmax(0, 1fr) auto 28px; gap: 10px 12px; padding: 14px 16px; }
  .tpl-chips { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .tpl-chips:empty { display: none; }
  .tpl-body { padding: 0 16px 16px; }
}
.tpl-text { white-space: pre-line; }
.chips + .chips { margin-top: 10px; }

/* ───────── база знаний (P21, P22) ───────── */
.key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; min-height: 48px; }
.key-row:first-child { border-top: 0; }
.key-row.key-has-cp { grid-template-columns: minmax(0, 1fr) auto 124px; }
.key-v { text-align: right; overflow-wrap: anywhere; }
.key-v.num { font-size: 15px; font-weight: 600; }
.key-v .pill { margin-left: 4px; }
.key-cp { width: 124px; }
.key-row.key-wide { grid-template-columns: minmax(0, 1fr); }
.key-row.key-wide.key-has-cp { grid-template-columns: minmax(0, 1fr) 124px; }
.key-row.key-wide .key-l { grid-column: 1 / -1; }
.key-row.key-wide .key-v { text-align: left; }
.key-row a { color: var(--accent-ink); border-bottom: 1px solid var(--accent-line); }
.key-row .key-cp { color: var(--ink-1); border-bottom: 0; }
/* ссылка или адрес длиннее колонки идёт второй строкой под подписью, кнопка остаётся справа */
.codes-card .key-row.key-has-cp { grid-template-columns: minmax(0, 1fr) 124px; }
.codes-card .key-has-cp .key-l { grid-column: 1 / -1; font-size: 13px; }
.codes-card .key-has-cp .key-v { text-align: left; }
.link-btn { min-width: 112px; }
@media (max-width: 640px) {
  .key-row.key-has-cp { grid-template-columns: minmax(0, 1fr) 124px; }
  .key-row.key-has-cp .key-l { grid-column: 1 / -1; }
  .key-row.key-has-cp .key-v { text-align: left; }
}
.codes-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 32px; align-items: start; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--glass); max-width: 200px; text-align: center; }
.qr-box img { display: block; width: 148px; height: 148px; border-radius: var(--r-s); background: var(--pv-light); padding: 8px; }
@media (max-width: 640px) { .codes-grid { grid-template-columns: 1fr; } .qr-box { max-width: none; } }
.link-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.link-card { display: flex; flex-direction: column; gap: 16px; }
.link-top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.link-act { margin-top: auto; padding-left: 60px; }
@media (max-width: 420px) { .link-act { padding-left: 0; } }
.link-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); }
.link-ic svg { width: 20px; height: 20px; }
.link-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.link-u { overflow-wrap: anywhere; }
.logo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.logo-pair .logo-pv { height: 96px; padding: 16px; }
.logo-pair .logo-pv img { max-height: 40px; }
.logo-card { display: flex; flex-direction: column; gap: 6px; }
.logo-pv { height: 150px; border-radius: var(--r-m); display: grid; place-items: center; padding: 24px; border: 1px solid var(--line); }
.logo-pv img { max-height: 64px; max-width: 100%; }
.logo-dark { background: var(--pv-dark); }
.logo-light { background: var(--pv-light); }
.doc-thumb-link { display: block; max-width: 220px; }
.doc-thumb { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-m); }

/* ───────── стратегия (P16, A9) ───────── */
.per-bar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 14px 18px; }
.per-dates { gap: 8px; }
.per-dates .inp { min-height: 36px; }
.amt-in { display: block; width: 100%; margin-top: 6px; font-size: 16px; }
.me-pair label.fs-12 { display: block; margin-top: 14px; }
.mon-links { display: grid; gap: 8px; }
.mon-link { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--r-m); border: 1px solid var(--line-2); background: var(--glass); transition: border-color var(--dur) var(--ease); }
.mon-link b { color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .mon-link:hover { border-color: var(--accent-line); } }
.mo-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.mo { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 18px; border-radius: var(--r-m); border: 1px solid var(--line); overflow: hidden; cursor: default; }
.mo b { font-size: 18px; }
.mo i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--w, 10%); border-radius: 0 4px 4px 0; }
.mo-pos { background: var(--pos-tint); } .mo-pos b { color: var(--pos); } .mo-pos i { background: var(--pos-mark); }
.mo-neg { background: var(--neg-tint); } .mo-neg b { color: var(--neg); } .mo-neg i { background: var(--neg-mark); }

/* ───────── вход (админка) ───────── */
.login-form { display: grid; gap: 12px; max-width: 340px; }
.login-form label { display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.login-form .inp { width: 100%; font-size: 15px; min-height: 46px; }
.login-form .login-remember { display: flex; align-items: center; gap: 8px; }
.login-form .login-remember input { width: 18px; height: 18px; accent-color: var(--accent); }
.login-form .btn { min-height: 46px; }
.login-msg:empty { display: none; }
.sites-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.site-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.site-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.site-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.site-list li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.site-list li:first-child { border-top: 0; }
.site-list .num { white-space: nowrap; }


/* ───── admin v2 (05.11.2026): «Требует внимания» с делом, ссылки, счета (A4, A5, A8) ───── */
.att { display: flex; flex-direction: column; gap: 10px; }
.att-on { border-color: var(--line-2); }
.att-n { font-size: 30px; line-height: 1; }
.att-do b { color: var(--ink-1); font-weight: 600; }
.att .btn { align-self: flex-start; margin-top: auto; }
/* 09.11 (hubfix-1109): у кнопок white-space: nowrap, а надпись приходит из данных; в узкой карточке
   (три в ряд на 768 и 1024) «Открыть счета к выставлению» вылезала за край на 6-10 px. Переносим внутри карточки. */
.att .btn { max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; padding-block: 8px; }
.lnk { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .lnk:hover { text-decoration-color: currentColor; } }
.mb-3 { margin-bottom: var(--sp-3); }
.inv-list { padding: 0; overflow: hidden; }
.inv-row { display: grid; grid-template-columns: 130px 170px minmax(0, 1fr) minmax(120px, auto) auto; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }
.inv-row:first-child { border-top: 0; }
.inv-row .r { text-align: right; }
/* 09.11 вечер (Саша: «отмечать статус счёта»): статус выбором прямо в строке, под ним кто и когда отметил */
.inv-st { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.inv-st .sel { min-height: 34px; font-size: 13px; padding: 0 10px; }
.inv-row .inv-st { margin-top: 6px; }
.inv-row.is-hit { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line); }
@media (max-width: 760px) {
  .inv-row { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 16px; }
  .inv-do { grid-column: 1 / -1; }
  .inv-row .r { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; text-align: left; }
}
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-5) var(--sp-4); }
.login-card { width: 100%; max-width: 420px; }
.login-brand { padding: 0 0 var(--sp-4); }
.chip .num { margin-left: 6px; }

/* ───── правка карточки партнёра (09.11, пункт 9; js/sections-edit.js) ───── */
.edit-card { margin-bottom: var(--sp-6); }
.mt-1 { margin-top: 4px; }
.edit-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; }
.edit-form label, .edit-ex { display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.edit-form .inp, .edit-form .sel { width: 100%; }
.edit-ex { border: 0; grid-auto-flow: column; justify-content: start; gap: 6px 16px; align-items: center; }
.edit-ex legend { font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; }
.edit-chk { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 8px; color: var(--ink-1) !important; min-height: 40px; }
.edit-chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.edit-wide { grid-column: 1 / -1; }
.edit-note { border-radius: var(--r-m); padding: 10px 14px; min-height: 80px; resize: vertical; font-family: var(--f-body); }
.edit-list { list-style: none; margin-top: 8px; }
.edit-list li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.edit-list li:first-child { border-top: 0; }
@media (max-width: 640px) { .edit-list li { grid-template-columns: 1fr; } }
.mb-4 { margin-bottom: var(--sp-4); }

/* 10.11.2026: настоящие партнёры и один демо в Админском хабе. Демо подписан везде одной пилюлей
   с пунктирной рамкой (не путать с «Пилотом», у того сплошная) и карточкой-пояснением сверху */
.pill-demo { color: var(--warn); background: var(--warn-tint); border: 1px dashed var(--warn); }
.demo-card { border: 1px dashed var(--warn); background: var(--warn-tint); }
.demo-card p { color: var(--ink-1); }
.real-item { display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-3); align-items: baseline; }
@media (max-width: 480px) { .real-item { grid-template-columns: 1fr; gap: 2px; } }
.kpi-val.kpi-wrap { white-space: normal; overflow-wrap: anywhere; }