/* «Продажа» без записи — стили общего компонента.
 *
 * Модалка (partials/_sale_modal.html), блок оплаты (partials/_sale_pay.html)
 * и кнопка «Продажа» в тулбаре журнала. Подключают /timetable, /sales и
 * /sales/{id}. Цвета, радиусы и шрифты — только токены брендбука.
 */

/* ── Кнопка «Продажа» в тулбаре журнала ──
   Тулбар перекрашивает любую `.btn` при наведении в синий тинт — это язык его
   сегментов. Кнопка продажи — действие, а не сегмент: зелёная, как остальные
   кнопки продажи в CRM, и при наведении остаётся зелёной. */
.tt-toolbar .btn.sale-open-btn,
.tt-toolbar .btn.sale-open-btn:hover:not(:disabled) {
    background: var(--bp-green-dark);
    border-color: var(--bp-green-dark);
    color: var(--bp-paper);
}
.tt-toolbar .btn.sale-open-btn:hover:not(:disabled) {
    filter: brightness(1.08);
}
.sale-open-btn__label {
    margin-left: 0.25rem;
}
/* Телефон: тулбар журнала — одна строка без переноса (дата + «Вид»), и
   подпись выталкивала «Вид» за край экрана. Остаётся зелёная иконка;
   название несут aria-label и подсказка. */
@media (max-width: 767.98px) {
    .tt-toolbar .btn.sale-open-btn {
        flex: none;
        padding: 0 10px;
    }
    .tt-toolbar .sale-open-btn__label {
        display: none;
    }
}

/* ── Строки черновика ── */
.sale-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sale-lines__head,
.sale-line {
    display: grid;
    /* Сумма растёт по содержимому: восьмизначная не должна наезжать на крестик. */
    grid-template-columns: minmax(0, 1fr) 4.5rem 6rem minmax(6.5rem, max-content) 2rem;
    gap: 0.5rem;
    align-items: start;
}
.sale-lines__head {
    font-size: 0.75rem;
    color: var(--bp-muted);
}
.sale-line__svc {
    position: relative;
    min-width: 0;
}
.sale-line__options {
    position: absolute;
    z-index: 1060;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
    box-shadow: var(--bp-shadow-pop);
}
.sale-option {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.65rem;
}
.sale-option__title {
    white-space: normal;
    overflow-wrap: anywhere;
}
.sale-option__meta {
    font-size: 0.78rem;
    color: var(--bp-muted);
}
.sale-line__list {
    font-size: 0.75rem;
    color: var(--bp-muted);
    margin-top: 0.15rem;
}
.sale-line__list .btn-link {
    font-size: inherit;
}
/* Цена прайса — текст, а не поле: колонка выровнена по сумме справа, и цифры
   стоят на одной линии с ней. */
.sale-line__price {
    padding-top: 0.3rem;
    text-align: right;
    white-space: nowrap;
}
.sale-line__sum {
    text-align: right;
    padding-top: 0.3rem;
    font-weight: 600;
    white-space: nowrap;
}
.sale-line__drop {
    padding: 0.2rem 0;
}

.sale-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.sale-extra__total {
    margin-left: auto;
    font-size: 1rem;
}

/* ── Шаг оплаты: что продано ── */
.sale-summary {
    border: 1px solid var(--bp-line);
    border-radius: var(--bp-radius-sm);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.75rem;
    background: var(--bp-paper-2);
}
.sale-summary__client {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.sale-summary__line,
.sale-summary__total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.sale-summary__line > span:first-child {
    overflow-wrap: anywhere;
}
.sale-summary__total {
    border-top: 1px solid var(--bp-line);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
}

/* ── Блок оплаты ──
   Ряд способов оплаты — общий `bk-pay-quick` / `bk-pay-card` (`pay-card.css`):
   тот же, что в карточке записи и кассе визита. Своей раскладки у продажи
   больше нет. */
.sale-points {
    margin-top: 0.5rem;
    max-width: 22rem;
}
.sale-pay__msg {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ── Журнал продаж: позиция в ячейке «Что продали» ── */
.sale-cell-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
}
.sale-cell-line > span:first-child {
    overflow-wrap: anywhere;
}

.sale-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* Телефон: строка черновика в две линии — услуга во всю ширину, под ней
   количество, цена и сумма. Шапка колонок там не нужна: подписи дают поля. */
@media (max-width: 575.98px) {
    .sale-lines__head {
        display: none;
    }
    .sale-line {
        grid-template-columns: 4.5rem minmax(0, 1fr) auto 2rem;
    }
    .sale-line__svc {
        grid-column: 1 / -1;
    }
}