/*
 * Вкладка «Партнёрам» кабинета hi.datool.ru (templates/hi/partner*.html) и
 * таблица ставок на странице /partner-program/. Основа — блоки кабинета
 * (cabinet.css: .hi-panel, .hi-facts, .hi-table); здесь только своё.
 *
 * Раскладка «рабочий стол партнёра» (выбор пользователя из 6 вариантов,
 * 15.10.2026): три карточки в ряд (ссылка с «чипами», вознаграждение,
 * ставка для новых клиентов), столбики переходов по дням, карточка таблиц с
 * переключателем, свёртки с формами. Плюс прежнее: ссылка с кнопкой
 * «Скопировать», плитки статистики по четыре, бейдж канала.
 *
 * Экран подключения (templates/hi/partner/join.html) — вариант 1.3 «Обложка с
 * кнопкой + калькулятор под обложкой» (выбор пользователя 17.10.2026):
 * классы .partner-join-* и .partner-calc* в конце файла.
 */

/* ---------- Ссылка для копирования: адрес переносится по словам, кнопка рядом ---------- */
.partner-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 8px 0 12px; }
.partner-copy code { min-width: 0; max-width: 100%; padding: 10px 12px; border-radius: 9px; background: var(--bp-surface-2); font-size: 14px; overflow-wrap: anywhere; word-break: break-all; }
.partner-copy .auth-secondary { width: auto; }
/* В карточке «Ваша ссылка» — компактнее, чтобы влезть в треть ширины */
.partner-copy--compact { margin: 4px 0 10px; gap: 8px 10px; }
.partner-copy--compact code { padding: 8px 10px; font-size: 13px; }
/* В строке таблицы — компактно: адрес мелко, кнопка-ссылка */
.partner-copy--row { margin: 6px 0 0; gap: 4px 10px; }
.partner-copy--row code { padding: 0; background: none; color: var(--bp-muted); font-size: 12px; }
.partner-copy--row .auth-link { border: 0; background: transparent; font: inherit; font-size: 12px; cursor: pointer; }

/* ---------- Три карточки сверху ---------- */
.partner-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.partner-top > .hi-panel { display: flex; flex-direction: column; }
.partner-top > .hi-panel > .hi-details { margin-top: auto; padding-top: 14px; }
/* Сумма и ставка крупно — отступы меньше, чем у .hi-usage по умолчанию */
.partner-sum { margin: 6px 0 8px; }
.partner-sum strong { font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* «Чипы» ссылок: основная — цветом бренда, «+ новая» — пунктиром */
.partner-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.partner-chip { display: inline-flex; align-items: center; max-width: 100%; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bp-surface-2); color: var(--bp-ink-2); font-size: 13px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.partner-chip:hover, .partner-chip:focus-visible { border-color: var(--brand); color: var(--text-purple); outline: none; }
.partner-chip.is-main { border-color: transparent; background: color-mix(in srgb, var(--brand) 14%, var(--bp-surface)); color: var(--text-purple); font-weight: 700; }
.partner-chip.is-add { border-style: dashed; background: transparent; color: var(--bp-muted); }
/* Кнопки вывода: «На баланс» — ссылка видом кнопки, «На счёт» — рядом */
.partner-actions { margin-top: 14px; }
.partner-actions .auth-submit { display: inline-flex; width: auto; text-decoration: none; }
.partner-actions + .auth-hint { margin-top: 10px; }
/* «Клиентов / платят сейчас» в карточке ставки — две плитки, ссылка к таблице клиентов под ними */
.partner-rate-facts { margin: 14px 0 0; padding-top: 14px; }
.partner-rate-facts dd { font-size: 20px; }
.partner-rate-facts + .auth-link { display: inline-block; margin-top: auto; padding-top: 14px; font-size: 14px; }

/* ---------- Столбики переходов по дням ---------- */
/* Ширина делится поровну между столбиками (--bars задаёт шаблон), высота — доля от пика (--h) */
.partner-bars { display: grid; grid-template-columns: repeat(var(--bars, 30), minmax(0, 1fr)); align-items: end; gap: 3px; height: 120px; margin-top: 4px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.partner-bar { display: block; min-height: 2px; height: var(--h, 0%); border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--brand) 45%, var(--bp-surface)); transition: background .15s; }
.partner-bar:hover { background: var(--brand); }
.partner-bar.is-peak { background: var(--brand); }
.partner-bars__legend { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 0; color: var(--bp-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.partner-bars__peak { color: var(--text-purple); text-align: center; }
.partner-bars__empty { margin: 0; }
/* Итоги периода: по четыре плитки в ряд, на телефоне — по две */
.partner-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.partner-facts dd { font-size: 20px; }

/* ---------- Карточка таблиц ---------- */
.partner-tables .hi-panel-head { margin-bottom: 0; }
.partner-tables .hi-panel-head > .dt-tabs-shell { max-width: 100%; }
.partner-tables__aside { font-size: 14px; }
.partner-tables .hi-table-scroll { margin-top: 16px; }
.partner-tables [data-partner-panel] > .auth-hint:first-child { margin-top: 16px; }
.partner-tables__links { margin-top: 18px; }
/* Формы вывода в панели «Выводы»: две колонки, под ними история */
.partner-payout-forms { margin-top: 18px; }
.partner-payout-forms h4, .partner-history-title { margin: 0 0 6px; font-size: 17px; }
.partner-history-title { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.partner-payout-forms .hi-actions { align-items: center; margin-top: 14px; }
/* «На баланс»: поле суммы и кнопка в одну строку (просьба пользователя 15.10.2026),
   на телефоне — друг под другом во всю ширину. Поле тянется, кнопка своей ширины */
.partner-amount-row { display: flex; align-items: center; gap: 10px; }
.hi-cabinet main form .partner-amount-row input { flex: 1 1 auto; min-width: 0; }
.partner-amount-row .auth-submit { width: auto; margin: 0; flex-shrink: 0; }

/* ---------- Свёртки с формами ---------- */
.partner-forms { display: grid; gap: 20px; }
.partner-fold { padding: 0; }
.partner-fold > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 22px 28px; cursor: pointer; list-style: none; }
.partner-fold > summary::-webkit-details-marker { display: none; }
.partner-fold > summary::before { content: ''; align-self: center; width: 8px; height: 8px; margin-right: 2px; border-right: 2px solid var(--bp-muted); border-bottom: 2px solid var(--bp-muted); transform: rotate(-45deg); transition: transform .15s; }
.partner-fold[open] > summary::before { transform: rotate(45deg); }
.partner-fold > summary h3 { margin: 0; font-size: 19px; }
.partner-fold > summary .auth-hint { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.partner-fold__body { padding: 0 28px 28px; }
.partner-link-form { margin-top: 4px; }

/* ---------- Прежние блоки ---------- */
/* «Ссылка на страницу и бейдж канала»: код — моноширинным блоком, превью бейджа */
.partner-code { display: block; margin: 8px 0; padding: 12px; border-radius: 9px; background: var(--bp-surface-2); font-size: 13px; overflow-wrap: anywhere; word-break: break-all; white-space: pre-wrap; }
.partner-badge-preview { display: block; margin: 12px 0; max-width: 100%; height: auto; }
.partner-page-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.partner-page-form > div { flex: 1 1 260px; min-width: 0; }
.partner-page-form .auth-submit { width: auto; }

/* ---------- Экран подключения: обложка ---------- */
/* Обложка: слева ставка крупно, справа форма. Фон — лёгкий оттенок бренда к белому,
   через color-mix: в тёмной теме он сам становится тёмным */
.partner-join-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 32px; border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--bp-surface)), var(--bp-surface) 70%); }
.partner-join-hero__main { display: grid; gap: 10px; justify-items: start; }
.partner-join-pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--bp-hover); color: var(--text-purple); font-size: 12.5px; font-weight: 700; }
.partner-join-hero__rate { margin: 0; color: var(--text-purple); font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.partner-join-hero__lead { max-width: 440px; margin: 0; color: var(--bp-ink); font-size: 18px; line-height: 1.5; }
/* Форма в обложке: белая карточка, кнопка во всю ширину карточки */
.partner-join-box { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--bp-surface); }
.partner-join-box form { display: grid; gap: 14px; }
.partner-join-box .auth-submit { width: 100%; }
.partner-join-box .auth-hint { margin: 0; }
.partner-join-box .hi-notice { margin: 0; }
/* Кто станет партнёром: кружок организации и подпись, как в переключателе кабинета */
.partner-join-org { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bp-surface-2); }
.partner-join-org b { display: block; font-size: 14px; }
.partner-join-org span:not(.hi-identity__profile-mark) { color: var(--bp-muted); font-size: 12.5px; }

/* ---------- Экран подключения: калькулятор ---------- */
/* Слева ползунки с полями, справа итог на сиреневой плашке */
.partner-calc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 20px; }
.partner-calc__inputs { display: grid; gap: 14px; }
.partner-calc__inputs h3 { margin: 0; }
.partner-calc__inputs .auth-hint { margin: 0; }
.partner-calc__row { display: grid; gap: 6px; }
.partner-calc__row label { color: var(--bp-ink); font-size: 14.5px; font-weight: 400; }
/* Ползунок и поле в одну строку: поле узкое, на 4 цифры (просьба пользователя 17.10.2026) */
.partner-calc__ctrl { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; align-items: center; }
/* Деления 0 · 50 · 100 — под дорожкой, правый край — под концом ползунка, а не под полем */
.partner-calc__ticks { display: flex; justify-content: space-between; margin-top: -4px; padding-right: 76px; color: var(--bp-muted); font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
/* Дорожка как у ползунка мест (plans.css .seats-slider__range): закрашено до ползунка, --fill ставит partner-calc.js */
.partner-calc__range { --fill: 0%; width: 100%; height: 20px; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.partner-calc__range:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.partner-calc__range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--brand) var(--fill), var(--bp-surface-2) var(--fill)); }
.partner-calc__range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--bp-surface-2); }
.partner-calc__range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--brand); }
.partner-calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 2px solid var(--brand); border-radius: 50%; background: var(--bp-surface); box-shadow: 0 2px 6px rgba(31,35,40,.18); }
.partner-calc__range::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--brand); border-radius: 50%; background: var(--bp-surface); box-shadow: 0 2px 6px rgba(31,35,40,.18); }
/* Поле числа: 64×30, без стрелок браузера, фокус — рамка бренда и тонкий ореол
   (просьба пользователя 17.10.2026: «поле чуть меньше, фокус большой»). Калькулятор
   не форма, поэтому общий вид полей (fields.css) сюда не доходит — вид свой */
.partner-calc__num { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bp-surface); color: var(--bp-ink); font: inherit; font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.partner-calc__num::-webkit-outer-spin-button, .partner-calc__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.partner-calc__num:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent); }
/* Число больше конца ползунка — поле подсвечено: ползунок в упоре, считаем по полю */
.partner-calc__num.is-over { border-color: var(--brand); background: var(--bp-hover); color: var(--text-purple); }
.partner-calc__result { display: grid; gap: 10px; padding: 20px; border-radius: 16px; background: var(--bp-hover); }
.partner-calc__result > div { display: grid; gap: 2px; }
.partner-calc__result > div > span { color: var(--bp-muted); font-size: 13px; }
.partner-calc__result strong { color: var(--text-purple); font-size: 34px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.partner-calc__year { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.partner-calc__year strong { color: var(--bp-ink); font-size: 22px; }

/* ---------- Экран подключения: три карточки условий ---------- */
.partner-join-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.partner-join-card { display: flex; align-items: flex-start; gap: 12px; padding: 24px; }
.partner-join-card h3 { margin: 0 0 4px; font-size: 16px; }
.partner-join-card p { margin: 0; color: var(--bp-muted); font-size: 14px; line-height: 1.5; }
.partner-join-card__icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--bp-hover); color: var(--text-purple); }
.partner-join-card__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1100px) {
  .partner-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-top > .hi-panel:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .partner-top { grid-template-columns: minmax(0, 1fr); }
  .partner-join-hero, .partner-calc, .partner-join-cards { grid-template-columns: minmax(0, 1fr); }
  .partner-top > .hi-panel:first-child { grid-column: auto; }
}
@media (max-width: 760px) {
  .partner-join-hero { padding: 22px; }
  .partner-join-hero__rate { font-size: 52px; }
  .partner-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-amount-row { flex-direction: column; align-items: stretch; }
  .partner-amount-row .auth-submit { width: 100%; }
  .partner-bars { height: 80px; gap: 2px; }
  .partner-bars__peak { order: 3; flex-basis: 100%; text-align: left; }
  .partner-fold > summary { padding: 18px; }
  .partner-fold__body { padding: 0 18px 18px; }
}