.col-sizes {
    width: 10.499999995%;
    flex: 0 0 10.499%;
    max-width: 10.499%;
}

.delimit {
    text-align: center;
    flex: 0 0 5%;
}

.hover-pointer {
    cursor: pointer;
}

.control-label {
    display: flex;
    align-items: center;
}

.calc-wrap {
    position: relative;
}

#submit-button.is-submitting {
    pointer-events: none;
    opacity: 0.75;
    cursor: default;
}

#submit-button .order-loader {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: calc-loader-spin 0.8s linear infinite;
}

@keyframes calc-loader-spin {
    to { transform: rotate(360deg); }
}

/* Шаг «Форма и размер»: поля слева, справа — примерный вид ленты готового рулона
   на всю высоту блока (рисует main_calc.js). */
.calc-step-fields {
    min-width: 0;
}

.calc-size-input .form-control {
    width: 96px;
}

#id_winding_rows {
    width: auto;
    min-width: 120px;
}

.calc-roll-preview {
    flex: 0 0 120px;
    align-self: stretch;
    min-height: 180px;
}

.calc-roll-preview svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* График «с/с на тысячу штук от тиража» (менеджер и технолог). */
.cost-curve {
    position: relative;
}

.cost-curve__svg {
    display: block;
    width: 100%;
    height: 260px;
}

.cost-curve__axis text {
    font-size: 11px;
    fill: var(--text-muted, #4B5563);
}

.cost-curve__axis .cost-curve__unit {
    font-size: 11px;
}

.cost-curve__grid {
    stroke: var(--line, #E2E5EA);
}

.cost-curve__tick {
    stroke: var(--color-mgray, #ccc);
}

.cost-curve__current {
    stroke: var(--color-muted-gray, #575756);
    stroke-dasharray: 4 3;
}

/* Две линии итога: готовая пластина и своя; активная (по переключателю) — ярче. */
.cost-curve__line {
    fill: none;
    stroke-width: 1.5;
    opacity: 0.45;
}

.cost-curve__line.is-active {
    stroke-width: 2.25;
    opacity: 1;
}

.cost-curve__line--ready,
.cost-curve__dot--ready {
    stroke: var(--color-secondary, #EC1E79);
}

.cost-curve__line--own,
.cost-curve__dot--own {
    stroke: var(--color-blue-navy-dark, #022f74);
}

.cost-curve__line--labels,
.cost-curve__dot--labels {
    stroke: var(--color-blue-bright, #0090C9);
}

.cost-curve__point:not(.is-active) .cost-curve__dot {
    opacity: 0.55;
}

.cost-curve__mode .btn {
    white-space: nowrap;
}

.cost-curve__dot {
    fill: #fff;
    stroke-width: 1.5;
}

.cost-curve__hit {
    fill: transparent;
}

.cost-curve__point {
    cursor: pointer;
    outline: none;
}

.cost-curve__point:hover .cost-curve__dot,
.cost-curve__point:focus .cost-curve__dot,
.cost-curve__point.is-selected .cost-curve__dot {
    r: 5;
}

.cost-curve__point.is-selected .cost-curve__dot--ready {
    fill: var(--color-secondary, #EC1E79);
}

.cost-curve__point.is-selected .cost-curve__dot--own {
    fill: var(--color-blue-navy-dark, #022f74);
}

.cost-curve__point.is-selected .cost-curve__dot--labels {
    fill: var(--color-blue-bright, #0090C9);
}

.cost-curve__tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    transform: translate(-50%, -100%);
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--line, #E2E5EA);
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
}

.cost-curve__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    color: var(--text-muted, #4B5563);
}

.cost-curve__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin-top: 0.25rem;
}

.cost-curve__key {
    display: inline-block;
    width: 18px;
    height: 3px;
    margin-right: 0.35rem;
    border-radius: 2px;
    vertical-align: middle;
}

.cost-curve__key--ready {
    background: var(--color-secondary, #EC1E79);
}

.cost-curve__key--own {
    background: var(--color-blue-navy-dark, #022f74);
}

.cost-curve__key--labels {
    background: var(--color-blue-bright, #0090C9);
}

/* Боковая панель сотрудника (решение пользователя 2026-10-21): едет по экрану сбоку от
   страницы, положение и ширину ставит main_calc.js. Белая; рамка малиновая — есть
   несохранённые изменения, зелёная — расчёт сохранён. */
.staff-panel {
    position: fixed;
    top: var(--staff-panel-top, 120px);   /* ниже шапки, считает placeStaffPanels */
    z-index: 20;
    max-height: calc(100vh - var(--staff-panel-top, 120px) - 20px);
    overflow-y: auto;
    padding: 14px 16px;
    background: #fff;
    border: 2px solid var(--color-secondary, #EC1E79);
    border-left-width: 0;   /* прижата к левому краю экрана */
    border-radius: 0 12px 12px 0;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08);
    font-size: 0.875rem;
    line-height: 1.35;
}

.staff-panel.is-saved {
    border-color: #2E9E5B;
}

/* Заголовок и стрелки истории — одна строка (решение пользователя 2026-10-26). */
.staff-panel__title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.staff-panel__title {
    min-width: 0;
    font-weight: 700;
    font-size: 1rem;
}

/* Шапка — пастельный цвет расчёта (records.PANEL_COLORS) во всю ширину панели: по нему
   расчёт узнаётся во вкладке (решение пользователя 2026-10-23). */
.staff-panel__head {
    margin: -14px -16px 10px;
    padding: 12px 16px 8px;
    background: var(--panel-color, #fff);
    border-radius: 0 10px 0 0;
}

.staff-panel.is-narrow .staff-panel__head {
    margin: -10px -10px 8px;
    padding: 10px 10px 6px;
}

.staff-panel.is-one-col .staff-panel__head {
    margin: -8px -8px 8px;
    padding: 8px;
}

.staff-panel__what {
    margin-top: 2px;
}

/* Иконки undo/redo рядом с заголовком. Нет перехода — серая, не ссылка. */
.staff-panel__back,
.staff-panel__fwd {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-blue-navy-dark, #0B2A5B);
    font: inherit;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.staff-panel__back.is-off,
.staff-panel__fwd.is-off {
    color: #B8BCC6;
    cursor: default;
}

/* Правки расчёта — всплывающее окно справа от панели, поверх формы; место ставит
   main_calc.js у кнопки redo (решение пользователя 2026-10-23). */
.staff-panel__children {
    position: fixed;
    z-index: 30;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 6px solid var(--panel-color, #fff);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.18);
    font-size: 0.875rem;
}

.staff-panel__children[hidden] {
    display: none;
}

.staff-panel__children-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px 8px;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.staff-panel__children-close {
    padding: 0 2px;
    border: 0;
    background: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.staff-panel__child {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 0.8rem;
    text-decoration: none;
}

.staff-panel__child:last-child {
    border-bottom: 0;
}

.staff-panel__child:hover {
    background: var(--panel-color, #f3f4f6);
    color: inherit;
}

.staff-panel__child-head {
    font-weight: 700;
}

.staff-panel__child-diff {
    color: #444851;
}

/* «Сохранить» — ниже обычной; сохранено — та же кнопка, недоступная: панель не прыгает. */
.staff-panel #staff_panel_save {
    padding: 4px 8px;
    font-size: 0.8rem;
    line-height: 1.3;
    min-height: 0;
    height: auto;
}

.staff-panel #staff_panel_save:disabled {
    opacity: 0.45;
}

.staff-panel__subtitle {
    display: block;
    font-weight: 700;
    margin: 12px 0 4px;
}

/* Характеристики в две колонки, подпись над значением; is-wide — во всю ширину. */
.staff-panel__params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    margin: 0;
}

.staff-panel__params .is-wide {
    grid-column: 1 / -1;
}

.staff-panel__params dt,
.staff-panel__money-label {
    font-weight: 400;
    font-size: 0.65rem;
    color: #444851;
}

/* Цены: колонки «с/с» и «РЦ». Серая черта отделяет их от раскладки. Подписи строк —
   по центру, заголовки колонок и суммы — по правому краю своей колонки
   (решение пользователя 2026-10-26). */
.staff-panel__money {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #dee2e6;
}

/* Заголовки колонок — по правому краю, над суммами (решение пользователя 2026-10-26). */
.staff-panel__money-head {
    font-weight: 700;
    text-align: right;
}

.staff-panel__money-label {
    grid-column: 1 / -1;
    margin-top: 4px;
    text-align: center;
}

.staff-panel__money-value {
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}

.staff-panel__money [hidden] {
    display: none;
}

.staff-panel__params dd {
    margin: 0;
    font-weight: 600;
}

/* Пока панель видна, цены карточки и сноска к ним спрятаны: они в панели (решение
   пользователя 2026-10-22). Без панели (узкий экран) — на месте. */
body.staff-panel-on #cost_div,
body.staff-panel-on #price_note {
    display: none !important;
}

/* Узкая панель (около 185 px слева от страницы на 1920 px): мельче и плотнее. */
.staff-panel.is-narrow {
    padding: 10px;
    font-size: 0.8rem;
}

/* Места 110–150 px: в одну колонку; у цен подпись колонки — перед суммой. */
.staff-panel.is-one-col {
    padding: 8px;
    font-size: 0.75rem;
}

.staff-panel.is-one-col .staff-panel__params,
.staff-panel.is-one-col .staff-panel__money {
    grid-template-columns: 1fr;
}

.staff-panel.is-one-col .staff-panel__money-head {
    display: none;
}

.staff-panel.is-one-col .staff-panel__money-value::before {
    content: attr(data-col) ' ';
    font-weight: 400;
    font-size: 0.65rem;
    color: #444851;
}

/* Места меньше 110 px: ярлык у края экрана, по нажатию панель открывается поверх формы
   (решение пользователя 2026-10-22). Рамка ярлыка — та же: сохранено ли. */
.staff-panel__tab {
    display: none;
}

.staff-panel.is-collapsed .staff-panel__tab {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

.staff-panel.is-collapsed:not(.is-open) {
    padding: 12px 6px;
}

.staff-panel.is-collapsed:not(.is-open) > :not(.staff-panel__tab) {
    display: none !important;
}

.staff-panel.is-collapsed:not(.is-open) .staff-panel__tab {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.75rem;
}

.staff-panel.is-collapsed.is-open {
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25);
}

.staff-panel.is-collapsed.is-open .staff-panel__tab {
    position: absolute;
    top: 4px;
    right: 10px;
    font-size: 1.25rem;
    line-height: 1;
}

/* Крестик ярлыка — справа сверху; строка заголовка не заходит под него. */
.staff-panel.is-collapsed.is-open .staff-panel__title-row {
    padding-right: 20px;
}

.staff-panel__state {
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-secondary, #EC1E79);
}

.staff-panel.is-saved .staff-panel__state {
    color: #2E9E5B;
}

/* КП справа — колонка окон, зеркально «Текущему расчёту»: прижата к правому краю экрана,
   положение и ширину ставит offers.js по месту справа от формы. Сверху — «+ КП», под ней
   у каждого КП своё окно (решение пользователя 2026-10-24). Сама колонка без рамки и фона;
   выше экрана — прокручивается целиком (max-height и overflow — от .staff-panel). Отступ
   слева и снизу — место тени окон: прокрутка колонки её обрезает. */
.staff-panel.offers-panel {
    --panel-color: #E6F4FA;
    padding: 0 0 16px 12px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.staff-panel.offers-panel.is-narrow {
    padding: 0 0 12px 8px;
}

/* Мало места — колонка свёрнута в ярлык «КП» с рамкой окна; открытая поверх формы —
   те же окна, крестик ярлыка — слева от «+ КП». */
.staff-panel.offers-panel.is-collapsed:not(.is-open) {
    padding: 12px 6px;
    background: #fff;
    border: 2px solid var(--color-blue-bright, #0090C9);
    border-right-width: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08);
}

/* Поверх формы тень окон гуще — отступы колонки шире, чтобы прокрутка её не резала. */
.staff-panel.offers-panel.is-collapsed.is-open {
    padding: 0 0 24px 16px;
    box-shadow: none;
}

.staff-panel.offers-panel.is-collapsed.is-open .staff-panel__tab {
    position: static;
    float: left;
    margin-bottom: 8px;
    padding: 4px 9px;
    background: #fff;
    border: 1px solid #6c757d;
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1.05;
}

.offers-panel.is-collapsed.is-open .offers-panel__offer {
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.22);
}

.offers-panel > .offers-panel__message,
.offers-panel__list {
    clear: both;
}

/* «+ КП» — своя кнопка над окнами, правым краем к краю окон (у края экрана). */
.offers-panel__bar {
    display: flex;
    justify-content: flex-end;
}

.offers-panel__new {
    margin-bottom: 8px;
    background: #fff;
    border-right-width: 0;
    /* Скругление — как у кнопок сайта, справа его нет: кнопка прижата к краю экрана. */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* «Сброс» — обводная кнопка сайта, но компактная: в шапке шага рядом с заголовком. */
#reset-calc-button {
    padding: 4px 14px;
    font-size: 0.875rem;
    line-height: 1.3;
    min-height: 0;
    height: auto;
}

.offers-panel__new,
.offers-panel__add,
.offers-panel__open,
.offers-panel__copy {
    padding: 4px 8px;
    font-size: 0.8rem;
    line-height: 1.3;
    min-height: 0;
    height: auto;
}

.offers-panel__add {
    margin-top: 8px;
}

/* «Открыть КП» и «Скопировать всё КП» — одна строка; открытие забирает остаток ширины. */
.offers-panel__actions {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 6px;
}

.offers-panel__open {
    flex: 1 1 auto;
    text-align: center;
}

.offers-panel__copy {
    flex: 0 0 auto;
}

.offers-panel__add:disabled {
    opacity: 0.45;
}

/* Сообщение колонки («КП не найден») — над окнами, на своей подложке: открытая поверх
   формы колонка прозрачна. */
.offers-panel > .offers-panel__message {
    margin: 0 0 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
}

/* Окно КП — как «Текущий расчёт»: белое, синяя рамка, прижато к правому краю экрана.
   Окна идут в порядке сессии, развёрнутое на своём месте. */
.offers-panel__offer {
    padding: 14px 16px;
    background: #fff;
    border: 2px solid var(--color-blue-bright, #0090C9);
    border-right-width: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08);
}

.offers-panel__offer + .offers-panel__offer {
    margin-top: 8px;
}

.offers-panel.is-narrow .offers-panel__offer {
    padding: 10px;
}

/* Свёрнутое окно — одна шапка: кому или дата, позиций и итог, крестик; нажатие в любом
   месте окна, кроме крестика, разворачивает его. */
.offers-panel__offer:not(.is-active) {
    padding: 8px 12px;
    cursor: pointer;
}

.offers-panel.is-narrow .offers-panel__offer:not(.is-active) {
    padding: 6px 8px;
}

.offers-panel__offer:not(.is-active):hover {
    background: var(--panel-color, #E6F4FA);
}

.offers-panel__offer-head {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

/* Шапка развёрнутого — пастельная полоса во всю ширину окна, как у «Текущего расчёта». */
.offers-panel__offer.is-active .offers-panel__offer-head {
    margin: -14px -16px 10px;
    padding: 12px 16px 8px;
    background: var(--panel-color, #E6F4FA);
    border-radius: 10px 0 0 0;
}

.offers-panel.is-narrow .offers-panel__offer.is-active .offers-panel__offer-head {
    margin: -10px -10px 8px;
    padding: 10px 10px 6px;
}

.offers-panel__body > .staff-panel__subtitle:first-child {
    margin-top: 0;
}

.offers-panel__toggle {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.offers-panel__offer.is-active .offers-panel__toggle {
    cursor: default;
}

.offers-panel__offer-title {
    display: block;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.offers-panel__offer:not(.is-active) .offers-panel__offer-title {
    color: var(--color-blue-navy-dark, #0B2A5B);
}

.offers-panel__offer-meta {
    display: block;
    font-size: 0.75rem;
    color: #444851;
}

.offers-panel__client,
.offers-panel__close,
.offers-panel__remove {
    padding: 0 2px;
    border: 0;
    background: none;
    color: #444851;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

/* Карандаш мельче крестика: иконка шрифта при том же размере выглядит крупнее «×». */
.offers-panel__client {
    padding-top: 3px;
    font-size: 0.75rem;
}

.offers-panel [hidden] {
    display: none !important;
}

/* Позиции: ссылка охватывает сводку и цену, полное описание — в подсказке. Позиция
   открытой записи — пастельным цветом шапки «Текущего расчёта» (--current-color). */
.offers-panel__items {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.offers-panel__item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 0 -6px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.8rem;
}

.offers-panel__item.is-current {
    background: var(--current-color, var(--panel-color, #E6F4FA));
}

.offers-panel__item-link {
    flex: 1;
    min-width: 0;
    display: block;
    color: inherit;
    overflow-wrap: anywhere;
}

.offers-panel__item-text {
    display: block;
    color: var(--color-blue-navy-dark, #0B2A5B);
}

.offers-panel__item-price {
    font-weight: 600;
}

.offers-panel__message {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--color-secondary, #EC1E79);
}

.offers-panel__message:empty {
    display: none;
}

.offer-page {
    margin-bottom: 2rem;
}

.offer-page h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.offer-page__meta {
    max-width: 40rem;
}

.offer-page__table {
    font-size: 0.875rem;
}

/* Суммы, тираж, «—» и заголовки «с/с» не рвутся по пробелу и по слэшу.
   Описание позиции переносится. Проверка в браузере 2026-10-24. */
.offer-page__num {
    white-space: nowrap;
}

.offer-page__desc {
    min-width: 16rem;
    white-space: normal;
}

.offer-page__actions {
    margin-top: 0.75rem;
}