/* Квитанция выбора слотов журнала: карточка на бумаге брендбука, абсолютно
   спозиционирована ВНУТРИ .timetable-grid у последнего выделенного блока
   (selectionBarStyle) — оператор не тянется в другой конец экрана.

   Своим файлом, а не куском timetable.css: у квитанции свои кнопки и своя
   раскладка, а общий файл экрана давно упирается в потолок длины. */
.journal-selection-bar {
    position: absolute;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 264px;
    padding: 10px 12px 12px;
    background: var(--bp-sheet);
    color: var(--bp-ink);
    border: 1px solid var(--bp-line);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow-pop);
    animation: jsb-pop .12s ease-out;
}
@keyframes jsb-pop {
    from { transform: scale(.96); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .journal-selection-bar { animation: none; }
}
.journal-selection-bar::before {
    content: 'Выбор слотов';
    font-family: var(--ff-ui);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--bp-muted);
}
.journal-selection-bar .jsb-summary {
    display: flex;
    flex-direction: column;
    font-family: var(--ff-ui);
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    line-height: 1.5;
}
.journal-selection-bar .jsb-line {
    border-bottom: 1px dashed var(--bp-line);
    padding: 2px 0;
    overflow-wrap: anywhere;
}
.journal-selection-bar .jsb-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.jsb-btn-create {
    background: var(--bp-blue);
    color: #fff;
    border: 1px solid var(--bp-blue);
    border-radius: var(--bp-radius-sm);
    font-family: var(--ff-ui);
    font-weight: 600;
    font-size: .8rem;
    padding: 7px 16px;
    cursor: pointer;
    transition: background .12s ease;
}
.jsb-btn-create:hover {
    background: var(--bp-blue-ink);
    border-color: var(--bp-blue-ink);
}
/* Снятие часов у тренера — разрушающее действие, и выглядит оно так же:
   рамка, а не заливка «создать», и красный цвет вместо синего. Взведённая
   кнопка (первое нажатие) заливается — второе нажатие уже снимает. */
.jsb-btn-cut {
    background: none;
    color: var(--bp-stamp-red);
    border: 1px solid var(--bp-stamp-red);
    border-radius: var(--bp-radius-sm);
    font-family: var(--ff-ui);
    font-weight: 600;
    font-size: .8rem;
    padding: 7px 16px;
    cursor: pointer;
}
.jsb-btn-cut.is-armed {
    background: var(--bp-stamp-red);
    color: #fff;
}
.jsb-btn-clear {
    background: none;
    border: none;
    padding: 0;
    color: var(--bp-ink-soft);
    font-size: .75rem;
    text-decoration: underline dotted;
    cursor: pointer;
}
.jsb-btn-clear:hover { color: var(--bp-ink); }
.jsb-kbd {
    font-family: var(--ff-ui);
    font-size: .66rem;
    border: 1px solid var(--bp-line-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 5px;
    background: var(--bp-sheet);
    text-decoration: none;
    display: inline-block;
}

/* Телефон: квитанция с «липучки» у ячейки переезжает на панель внизу экрана —
   у сетки в потоке страницы абсолютная позиция уезжает вместе с прокруткой.
   top/left приходят inline из selectionBarStyle(), поэтому !important.
   Кнопка снятия часов занимает свою строку целиком: рядом с «Создать бронь»
   её и путали. */
@media (max-width: 767.98px) {
    .journal-selection-bar {
        position: fixed !important;
        top: auto !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        z-index: 1055;
    }
    .journal-selection-bar .jsb-actions { flex-wrap: wrap; }
    .jsb-btn-create,
    .jsb-btn-cut { flex: 1 1 auto; min-height: 44px; }
}