/* ═══════════════════════════════════════════════════════════
   Правка брони — разница, а не форма
   ═══════════════════════════════════════════════════════════
   Бланк новой брони спрашивает «что сдаём», и все графы в нём пустые.
   Здесь всё уже заполнено, и вопрос один: что изменится. Поэтому окно
   устроено вокруг разницы — «было → стало», кого ещё это касается и во
   что обойдётся. Эту разницу администратор произносит гостю вслух.

   Оформление — то же, что у бланка: панель у правого края, линейки
   вместо коробок, тихие метки с волосяной линией. Правка не
   должна выглядеть другим продуктом.
   ═══════════════════════════════════════════════════════════ */

.sheet-edit{width:min(452px,calc(100vw - 28px))}

.be-head{
  display:flex;align-items:center;gap:12px;padding:0 14px 0 22px;min-height:58px;
  border-bottom:1px solid var(--rule);background:var(--paper);flex-shrink:0;
}
.be-head div{min-width:0}
.be-head b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.035em}
.be-head span{
  display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.be-head .sh-close{margin-left:auto}

.be-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 22px 24px}

/* Предупреждение о состоянии брони — до всего остального: правка
   прошедшей меняет уже сданную отчётность, и узнать об этом надо
   раньше, чем начать её править. */
.be-note{
  margin-top:14px;padding:9px 11px;border-radius:var(--r);
  background:var(--wait-bg);border:1px solid var(--wait-line);
  font-size:11.5px;line-height:1.45;color:var(--wait-ink);
}

.be-sec{padding-top:20px}

/* ── гость и визит ──
   Бланк, а не форма-простыня: подпись над полем, поля парами. Правка
   брони — это не только «перенести», и всё, чем бронь ведут, стоит здесь
   же, одним сохранением (SPEC §4.3). */
.be-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.be-two+.be-two,.be-two+.be-field,.be-field+.be-field{margin-top:8px}
/* Внутри пары поля стоят рядом, а не под собой: соседний отступ сдвигал
   правое поле на восемь пикселей вниз, и пара переставала быть парой. */
.be-two .be-field+.be-field{margin-top:0}
.be-field{display:block;min-width:0}
.be-field>span{
  display:block;margin-bottom:4px;font-size:11px;color:var(--ink-2);
}
.be-field input{
  width:100%;padding:9px 11px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--card);font-size:12.5px;color:var(--ink);transition:border-color .12s;
}
@media (hover:hover) and (pointer:fine){
  .be-field input:hover{border-color:var(--ink-3)}
}
.be-field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--sunk)}
/* Стёртое обязательное. Не красным: это не тревога, а незакрытая графа —
   красное здесь заняло бы тон конфликта, а это разные беды. */
.be-field.gap input{border-color:var(--wait)}
.be-field.gap input:focus{border-color:var(--wait);box-shadow:0 0 0 3px var(--wait-bg)}

/* Гостей считают кнопками: число из одной цифры, и промахнуться в нём
   мышью дешевле, чем клавиатурой. */
.be-step{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:3px 4px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);
}
.be-step button{
  width:28px;height:28px;flex:none;border-radius:var(--r-sm);
  font-size:15px;line-height:1;color:var(--ink-2);transition:background-color .12s;
}
@media (hover:hover) and (pointer:fine){
  .be-step button:hover{background:var(--sunk);color:var(--ink)}
}
.be-step button:active{background:var(--rule-2)}
.be-step em{
  font-size:13.5px;font-style:normal;font-weight:500;
  letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.be-sec h3{
  display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.be-sec h3::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ── куда ── */
.be-where{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:5px 2px 9px;border-bottom:1px solid var(--rule);
  transition:border-color .13s;text-align:left;
}
@media (hover:hover) and (pointer:fine){
  .be-where:hover{border-color:var(--ink-3)}
}
.be-where.on{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.be-where i{display:flex;color:var(--ink-2);flex-shrink:0}
.be-where i svg{width:17px;height:17px}
.be-where span{flex:1;font-size:15.5px;font-weight:600;letter-spacing:-.03em}
.be-where em{color:var(--ink-3);display:flex}

.be-objs{
  margin:9px 0 2px;padding:6px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--rule);
  max-height:280px;overflow-y:auto;overscroll-behavior:contain;
  transform-origin:top center;animation:beGrow .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes beGrow{from{opacity:0;transform:scaleY(.965) translateY(-5px)}}
.be-objs-g{
  padding:8px 7px 5px;font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.be-objs-g:first-child{padding-top:3px}
.be-obj{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 7px;
  border-radius:var(--r-sm);text-align:left;transition:background-color .1s;
}
.be-obj i{display:flex;color:var(--ink-3);flex-shrink:0}
.be-obj i svg{width:15px;height:15px}
.be-obj b{font-size:12.5px;font-weight:500;color:var(--ink)}
.be-obj u{margin-left:auto;text-decoration:none;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .be-obj:hover{background:var(--sunk)}
}
/* Недоступный объект показан, а не спрятан: спрятанный ищут глазами
   и не находят, а объяснённый — понятен с первого взгляда. */
.be-obj.off{opacity:.5;pointer-events:none}
.be-obj.off u{color:var(--late)}
.be-obj.on{background:var(--accent)}
.be-obj.on b{color:var(--accent-ink)}
.be-obj.on i{color:var(--band-ink-2)}
.be-obj.on u{color:var(--band-ink-3)}

/* ── когда ── */
.be-when{
  display:flex;align-items:center;gap:10px;padding:4px 0 10px;
  border-bottom:1px solid var(--rule);
}
.be-when b{font-size:13px;font-weight:500;letter-spacing:-.01em}
.be-when svg{color:var(--ink-3);flex-shrink:0}
/* Сдвиг шагами, а не выбором даты: правят обычно «на день позже»,
   а не «на 14 сентября», и шаг отвечает на этот вопрос одним нажатием. */
.be-steps{display:flex;gap:5px;margin-top:11px;flex-wrap:wrap}
.be-steps button{
  padding:6px 11px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--card);
  font-size:11.5px;letter-spacing:0;color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .be-steps button:hover{border-color:var(--ink);color:var(--ink)}
}
.be-steps button:active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ── пакет ──
   Одна компания заняла три объекта, и перенос одной части и перенос
   всего визита — разные обещания гостю. Спросить об этом надо до
   «Сохранить», а не после. */
.be-pack{
  margin-top:20px;padding:12px 13px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--rule);
}
.be-pack>b{display:block;font-size:12px;font-weight:600;margin-bottom:9px;line-height:1.4}
.be-pack p{margin-top:7px;font-size:10.5px;line-height:1.45;color:var(--ink-3)}

/* ── что изменится ── */
.be-diff{display:flex;flex-direction:column;gap:2px}
.be-line{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:8px 0;
  border-bottom:1px solid var(--rule-2);
}
.be-line:last-child{border-bottom:0}
.be-line>span{
  font-size:11px;
  color:var(--ink-3);width:62px;flex-shrink:0;
}
/* Было — зачёркнутым: это ушедшее значение, и глаз должен пройти его
   насквозь, а не сравнивать два равновесных. */
.be-line em{font-style:normal;font-size:11.5px;color:var(--ink-3);text-decoration:line-through}
.be-line svg{color:var(--ink-3);flex-shrink:0}
.be-line b{font-size:12.5px;font-weight:600;color:var(--ink)}
.be-line u{
  flex-basis:100%;margin-left:69px;text-decoration:none;
  font-size:10.5px;line-height:1.4;color:var(--ink-3);
}
.be-idle{font-size:12px;color:var(--ink-3);padding:4px 0 2px}

.be-stop,.be-warn{margin-top:11px;display:flex;flex-direction:column;gap:6px}
.be-stop p{
  padding:9px 11px;border-radius:var(--r);
  background:var(--late-bg);border:1px solid var(--late-line);
  font-size:11.5px;line-height:1.45;color:var(--late);
}
.be-stop b{font-weight:600}
.be-warn p{
  padding:9px 11px;border-radius:var(--r);
  background:var(--wait-bg);border:1px solid var(--wait-line);
  font-size:11.5px;line-height:1.45;color:var(--wait-ink);
}

/* ── деньги ──
   Разница названа рублями, а не процентами: доплату и возврат гость
   слышит в рублях, и администратор должен читать то же самое. */
.be-cash{
  margin-top:14px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);padding:10px 12px;
}
.be-cash-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4px 0;
  font-size:12px;color:var(--ink-2);
}
.be-cash-row b{font-size:12.5px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.be-cash-row.sum{
  margin-top:5px;padding-top:8px;border-top:1px solid var(--rule);
  font-size:12.5px;font-weight:600;color:var(--ink);
}
.be-cash-row.sum b{font-size:15.5px}
.be-cash-row.charge b{color:var(--late)}
.be-cash-row.refund b{color:var(--ok)}

.be-check{
  display:flex;align-items:flex-start;gap:9px;margin-top:11px;cursor:pointer;
}
.be-check input{position:absolute;opacity:0;pointer-events:none}
.be-check i{
  width:15px;height:15px;border-radius:var(--r-xs);flex-shrink:0;margin-top:1px;
  border:1px solid var(--rule);background:var(--card);
  display:flex;align-items:center;justify-content:center;color:transparent;transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
.be-check.on i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.be-check span{font-size:12px;color:var(--ink-2);line-height:1.4}
.be-check u{display:block;text-decoration:none;font-size:10.5px;color:var(--ink-3);margin-top:2px}

.be-reason{display:block;margin-top:13px}
.be-reason span{
  display:block;margin-bottom:5px;font-size:11px;
  color:var(--ink-3);
}
.be-reason input{
  width:100%;padding:7px 2px;border:0;border-bottom:1px solid var(--rule);background:none;
  font-family:var(--font);font-size:13px;color:var(--ink);transition:border-color .13s;
}
.be-reason input:focus{outline:none;border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.be-reason u{
  display:flex;align-items:flex-start;gap:6px;margin-top:7px;text-decoration:none;
  font-size:11px;line-height:1.45;color:var(--wait);
}
.be-reason u::before{content:"";flex:none;width:12px;height:12px;margin-top:1.5px;background:currentColor;-webkit-mask:var(--glyph-alert) center/contain no-repeat;mask:var(--glyph-alert) center/contain no-repeat}

.be-foot{
  flex-shrink:0;display:flex;gap:8px;padding:12px 20px 15px;
  border-top:1px solid var(--rule);background:var(--paper);
}
.be-foot .btn{flex:1}
.be-foot .btn:disabled{opacity:.4;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .be-objs{animation:none}
}

/* ── цена ──
   Три ответа на один вопрос, взаимоисключающие: по расчёту, прежняя,
   своя. Чекбокс отвечал только на один из них. */
.be-price{display:inline-flex;margin-top:11px;border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.be-price button{
  padding:6px 12px;font-size:11.5px;color:var(--ink-2);background:var(--card);transition:var(--t-tap) var(--ease);transition-property:color,background-color;
}
.be-price button+button{border-left:1px solid var(--rule)}
@media (hover:hover) and (pointer:fine){
  .be-price button:hover{background:var(--sunk);color:var(--ink)}
}
.be-price button.on{background:var(--accent);color:var(--accent-ink)}
.be-hand{
  display:flex;align-items:center;gap:8px;margin-top:11px;padding:7px 2px;
  border-bottom:1px solid var(--rule);transition:border-color .13s;
}
.be-hand:focus-within{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.be-hand input{
  flex:1;border:0;background:none;padding:0;text-align:right;
  font-size:15px;letter-spacing:-.01em;color:var(--ink);
}
.be-hand input:focus{outline:none}
.be-hand em{font-size:13px;color:var(--ink-3);font-style:normal}
/* Расчёт не прячется за назначенной ценой: разница между ними и есть
   скидка, и исчезнуть из отчёта она не должна. */
.be-hand-why{margin-top:8px;font-size:10.5px;line-height:1.45;color:var(--ink-3)}