/* ⛔ СТАРЫЕ ИМЕНА ОСТАЛИСЬ, ЗНАЧЕНИЯ СТАЛИ ТОКЕНАМИ «Витрины» (1.48.0, 08.10.2026).
   На --bg, --panel, --ink, --accent завязаны и этот файл, и инлайн-стили страниц,
   и journal.js. Смена одних значений перекрашивает журнал целиком, не трогая разметку.
   Токены — в assets/vitrina.css, он подключается ПЕРВЫМ (includes/layout.php, login.php).

   ⚠️ --row-h, --time-w, --col-w, --bk-fs — механика масштаба сетки, а не облик:
   их считает journal.js при движении ползунка. Не трогать. */
:root{
  --bg:var(--pw-canvas); --panel:var(--pw-surface); --ink:var(--pw-ink);
  --muted:var(--pw-ink-2); --line:var(--pw-line);
  /* Боковая панель больше не тёмная: она стеклянная на холсте, и текст в ней обычный.
     Имена оставлены — на них ссылается десяток правил ниже. */
  --sidebar:var(--pw-glass); --sidebar-ink:var(--pw-ink-2); --sidebar-on:var(--pw-ink);
  --accent:var(--pw-accent);
  --ok:var(--pw-good); --danger:var(--pw-bad); --radius:var(--pw-r-card);
  --row-h:15px; /* высота слота 15 минут */
  --time-w:56px; --col-w:140px; --bk-fs:11px; /* кегль мини-карточки (зависит от масштаба) */
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* ⚠️ Кегль задаётся BODY, а не HTML: у журнала нет rem-сетки, но правило общее для сети —
   на html он утащил бы за собой всё, что считается в rem. */
/* ⛔ БЕЗ text-rendering:optimizeLegibility. В сетке журнала тысячи ячеек времени, и
   это свойство заставляет браузер пересчитывать кернинг для каждой: страница
   перестаёт успевать отрисовываться (поймано снимком экрана, который переставал
   получаться вовсе). Системный шрифт и без него ставит лигатуры и кернинг. */
body{font-family:var(--pw-f-text);
  color:var(--ink);background:var(--bg);font-size:14px;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ===== Login ===== */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--pw-canvas)}
.login-card{background:var(--pw-surface);padding:32px;border-radius:var(--pw-r-sheet);width:340px;box-shadow:var(--pw-sh-float);display:flex;flex-direction:column;gap:14px}
.login-logo{font-size:20px;font-weight:700;text-align:center;font-family:var(--pw-f-display);letter-spacing:-.01em}
.login-logo span{color:var(--pw-link)}
.login-card h1{font-size:15px;font-weight:500;color:var(--muted);margin:0 0 6px;text-align:center}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
/* ⚠️ 16px у поля — не вкусовщина: кегль мельче заставляет iPhone увеличивать страницу
   при касании, и менеджер теряет из виду половину экрана посреди ввода. */
.login-card input{padding:11px 12px;border:1px solid var(--line);border-radius:var(--pw-r-ctrl);font-size:16px;background:var(--pw-surface);color:var(--ink);min-height:44px}
.login-card input:focus-visible{outline:2px solid var(--pw-focus);outline-offset:1px;border-color:transparent}
.login-card button{margin-top:6px;padding:0 18px;min-height:44px;background:var(--pw-accent);color:var(--pw-on-accent);border:0;border-radius:var(--pw-r-pill);font-size:15px;font-weight:600}
.login-card button:hover{background:var(--pw-accent-press)}
.login-error{background:var(--pw-bad-soft);color:var(--pw-bad);padding:9px 12px;border-radius:var(--pw-r-ctrl);font-size:13px;text-align:center}

/* ===== App shell ===== */
.app{display:flex;height:100vh;overflow:hidden;background:var(--pw-canvas)}
/* ⛔ Боковая панель — СТЕКЛО НА ХОЛСТЕ, а не тёмный столбец во всю высоту (1.48.0).
   Отступ 8 и радиус 12: панель лежит НА холсте, а не делит экран пополам.
   ⚠️ -webkit-backdrop-filter объявлен ПЕРВЫМ — иначе сборщики, которые схлопывают
   пару (Lightning CSS в соседних проектах сети), оставляют только второе свойство,
   и размытие молча пропадает. Здесь сборщика нет, но правило общее для сети. */
.sidebar{width:224px;flex:0 0 224px;margin:8px 0 8px 8px;border-radius:var(--pw-r-panel);
  background:var(--pw-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 0 0 0 1px var(--pw-glass-line);
  color:var(--sidebar-ink);display:flex;flex-direction:column;padding:10px 0;overflow:hidden}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sidebar{background:var(--pw-surface)}
}
.brand{font-weight:700;font-size:17px;padding:4px 14px 12px;color:var(--pw-ink);font-family:var(--pw-f-display);letter-spacing:-.01em}
.brand span{color:var(--pw-link)}
.nav{display:flex;flex-direction:column;gap:2px;padding:6px 8px;overflow-y:auto}
/* ⚠️ min-height, а не height: «Объекты бронирования» в 224 пикселя одной строкой не
   помещаются, и при жёсткой высоте вторая строка уезжала за край пункта. Пусть
   растёт — это единственное длинное имя, и укорачивать его нельзя: тем же словом
   раздел назван в правах и в адресной строке. */
.nav a{display:flex;align-items:center;gap:10px;padding:7px 12px;min-height:36px;border-radius:var(--pw-r-item);color:var(--pw-ink);font-size:14px;line-height:1.25}
.nav a span{width:18px;text-align:center;color:var(--pw-ink-2)}
.nav a:hover{background:var(--pw-fill)}
/* Выбранное — серая заливка и синяя иконка, а не синий прямоугольник: в «Витрине»
   синим залит только главный действующий элемент, и он на экране один. */
.nav a.on{background:var(--pw-fill-2);color:var(--pw-ink);font-weight:600}
.nav a.on span{color:var(--pw-link)}
.nav-sec{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--pw-ink-3);padding:14px 14px 6px}
.user-box{margin-top:auto;padding:12px 16px;border-top:1px solid var(--pw-line);text-align:center}

/* ===== Аватарки ===== */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;object-fit:cover;background:#e7ecf5;color:var(--accent);font-weight:700;overflow:hidden;flex:0 0 auto;vertical-align:middle}
.avatar-lg{width:54px;height:54px;font-size:20px}
.avatar-sm{width:34px;height:34px;font-size:14px}
.avatar-btn{position:relative;display:inline-block;background:none;border:0;padding:0;margin:0 auto 8px;cursor:pointer}
.avatar-btn .avatar-lg{border:2px solid var(--pw-line-2)}
.avatar-edit{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--pw-accent);color:var(--pw-on-accent);font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid var(--pw-surface)}
.emp-avatar{cursor:default}
td .emp-avatar.editable{cursor:pointer}
td .emp-avatar.editable:hover{outline:2px solid var(--accent);outline-offset:1px}
.user-name{font-weight:600;color:var(--pw-ink)}
.user-role{font-size:12px;color:var(--muted)}
.logout{display:inline-block;margin-top:8px;font-size:13px;color:var(--pw-link);position:relative}
/* Невидимая область нажатия: ссылка мелкая, а палец на стойке попадает мимо. */
.logout::before{content:"";position:absolute;inset:-10px -12px}

/* ===== Сворачиваемое боковое меню (до иконок) ===== */
.side-head{display:flex;align-items:flex-start;gap:6px;padding:4px 10px 8px}
.side-head .brand{flex:1;padding:0}
.side-toggle{flex:0 0 auto;background:none;border:0;color:var(--pw-ink-2);font-size:18px;line-height:1;padding:4px 8px;border-radius:var(--pw-r-item);cursor:pointer}
.side-toggle:hover{background:var(--pw-fill);color:var(--pw-ink)}
.sidebar{transition:width .15s ease,flex-basis .15s ease}
html.side-collapsed .sidebar{width:66px;flex-basis:66px}
html.side-collapsed .side-head{justify-content:center;padding:6px 0}
html.side-collapsed .brand{display:none}
html.side-collapsed .side-toggle{transform:rotate(180deg)}
html.side-collapsed .side-venue,
html.side-collapsed .mini-cal{display:none}
html.side-collapsed .nav{padding:6px 8px}
html.side-collapsed .nav a{justify-content:center;gap:0;font-size:0;padding:10px 0}
html.side-collapsed .nav a span{font-size:18px;width:auto}
html.side-collapsed .nav-sec{font-size:0;padding:8px 0 4px}
html.side-collapsed .user-box{padding:12px 6px}
html.side-collapsed .user-name,
html.side-collapsed .user-role,
html.side-collapsed .logout{display:none}

/* Селектор заведения под логотипом */
.side-venue{padding:2px 12px 8px;margin:0 6px}
.side-venue:empty{display:none}
.side-venue .venue-sel{width:100%;min-width:0;background:var(--pw-surface);color:var(--pw-ink);border-color:var(--pw-line);font-size:13px;font-weight:600;padding:0 10px;min-height:36px}
.side-venue .ro-badge:not([hidden]){display:inline-block;margin-top:8px}

.main{flex:1;overflow:auto;padding:22px 26px}
.main-full{padding:0;display:flex;flex-direction:column;overflow:hidden}

/* mini calendar */
.mini-cal{padding:4px 12px 8px;margin:0 6px 4px}
.mc-head{display:flex;justify-content:space-between;align-items:center;color:var(--pw-ink);font-size:13px;font-weight:600;margin-bottom:6px}
.mc-head button{background:none;border:0;color:var(--pw-ink-2);font-size:15px;padding:2px 6px;border-radius:var(--pw-r-item)}
.mc-head button:hover{background:var(--pw-fill)}
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mc-grid .dow{font-size:10px;color:var(--pw-ink-3);text-align:center;padding:2px 0}
.mc-grid .day{font-size:11px;text-align:center;padding:4px 0;border-radius:var(--pw-r-item);color:var(--pw-ink);cursor:pointer}
.mc-grid .day:hover{background:var(--pw-fill)}
.mc-grid .day.today{outline:1px solid var(--pw-link)}
.mc-grid .day.sel{background:var(--pw-accent);color:var(--pw-on-accent);font-weight:600}
.mc-grid .day.empty{visibility:hidden}

/* ===== Buttons / common ===== */
/* ⛔ Нажимаемое — «таблетка». Рост 36 на мыши и 44 на пальце: журнал открывают и на
   стойке с сенсорным экраном, где 32 означают промах, а промах — чужая бронь. */
.btn{border:1px solid var(--line);background:var(--pw-surface);padding:0 16px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--pw-r-pill);font-size:13px;font-weight:500;color:var(--ink);transition:background var(--pw-t-fast) var(--pw-ease)}
.btn:hover{background:var(--pw-fill)}
.btn:focus-visible{outline:2px solid var(--pw-focus);outline-offset:2px}
.btn-primary{background:var(--pw-accent);color:var(--pw-on-accent);border-color:transparent}
.btn-primary:hover{background:var(--pw-accent-press)}
.btn:disabled,.btn:disabled:hover{opacity:.5;cursor:default;background:var(--pw-fill);color:var(--pw-ink-faint);border-color:transparent}
.btn-danger{background:var(--pw-bad-soft);color:var(--pw-bad);border-color:transparent}
.btn-danger:hover{background:var(--pw-bad-soft);filter:brightness(.97)}
.btn-light{background:var(--pw-fill);border-color:transparent}
.btn-light:hover{background:var(--pw-fill-2)}
.btn-icon{padding:0 10px;min-width:36px;font-size:16px;line-height:1}
@media (pointer:coarse){.btn{min-height:44px}.btn-icon{min-width:44px}}
/* ⚠️ Класс `nowrap` разметка использовала и раньше (колонка «Где» в истории), а в
   стилях его не было вовсе — то есть он ничего не делал. Объявлен 08.10.2026. */
.nowrap{white-space:nowrap}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}
.page-head h1{font-size:22px;margin:0;font-family:var(--pw-f-display);font-weight:700;letter-spacing:-.015em}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--pw-r-panel);padding:18px}

/* ===== Journal top ===== */
.journal{display:flex;flex-direction:column;height:100%}
.journal-top{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--pw-surface);gap:12px;flex-wrap:wrap}
.jt-left,.jt-right{display:flex;align-items:center;gap:8px}
.jt-date{font-size:17px;font-weight:600;margin-left:6px;font-family:var(--pw-f-display);letter-spacing:-.01em}
.date-pick{border:1px solid var(--line);border-radius:var(--pw-r-ctrl);padding:0 10px;min-height:36px;font-size:13px;background:var(--pw-surface);color:var(--ink);font-variant-numeric:tabular-nums}
.venue-sel{border:1px solid var(--line);border-radius:var(--pw-r-ctrl);padding:0 12px;min-height:36px;font-size:14px;font-weight:500;min-width:200px;background:var(--pw-surface);color:var(--ink)}
.ro-badge{background:var(--pw-warn-soft);color:var(--pw-warn);border:0;padding:4px 10px;border-radius:var(--pw-r-pill);font-size:12px;font-weight:500}

/* Масштаб журнала */
.zoom{display:flex;align-items:center;gap:6px}
.zoom-cap{font-size:12px;color:var(--muted)}
.zoom-level{font-size:12px;color:var(--muted);min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.zoom-range{width:120px;accent-color:var(--pw-accent);cursor:pointer}
.btn-icon:disabled{opacity:.4;cursor:default}

/* ===== Grid ===== */
.grid-wrap{flex:1;overflow:auto;position:relative;background:var(--pw-surface)}
.grid-loading{padding:40px;color:var(--muted)}
.grid{position:relative;display:grid}
.grid-corner{position:sticky;top:0;left:0;z-index:22;background:var(--pw-surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

/* header row (groups + objects) */
.ghead{position:sticky;top:0;z-index:21;background:var(--pw-surface);border-bottom:1px solid var(--line);display:flex}
.ghead-main{display:flex;flex-direction:column;flex:0 0 auto}
.ghead-groups{display:flex}
/* ⛔ Вид объектов — ЦВЕТНОЙ ТЕКСТ НА БЛЕДНОЙ ЗАЛИВКЕ ТОГО ЖЕ ЦВЕТА, без капса (1.48.0).
   Капс белым по насыщенной заливке читался как заголовок сайта, а не как подпись
   колонок, и спорил за внимание с самими бронями — ради них журнал и открывают.
   Цвет вида остаётся прежним: по нему менеджер находит боулинг среди залов. */
.ghead-group{border-right:2px solid var(--line);border-left:0;text-align:center;font-weight:600;font-size:12px;padding:6px 4px;letter-spacing:0}
.ghead-objs{display:flex}
.gobj{flex:0 0 var(--col-w);width:var(--col-w);display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.15;font-weight:600;color:var(--ink);padding:6px 3px;border-right:1px solid var(--line);background:var(--pw-surface);word-break:break-word;hyphens:auto}
.gobj.gsep{border-right:2px solid var(--pw-line-2)}
/* Пара дорожек (1-2, 3-4, …): на тон темнее обычной линии и на пиксель шире.
   Заметно ровно настолько, чтобы менеджер видел пары, не вглядываясь. */
.gobj.psep,.col.psep{border-right:2px solid rgb(0 0 0 / .12)}

/* Текст — сам цвет вида (тёмный, проходит 4,5 : 1 на бледной подложке), подложка —
   он же на 10 %. Значения взяты темнее прежних заливок ровно затем, чтобы
   подпись читалась текстом, а не белым по насыщенному. */
.kind-bowling{background:rgb(47 94 173 / .10);color:#2f5ead}
.kind-vip{background:rgb(118 54 168 / .10);color:#7636a8}
.kind-restaurant{background:rgb(154 88 17 / .10);color:#9a5811}

/* body */
.gbody{display:flex;position:relative}
.cols-area{display:flex;flex:0 0 auto;position:relative}
.time-col{position:sticky;left:0;z-index:20;background:var(--pw-surface);border-right:1px solid var(--line);flex:0 0 var(--time-w);width:var(--time-w)}
.time-cell{height:var(--row-h);font-size:11px;color:var(--pw-ink-2);text-align:right;padding-right:6px;position:relative;font-variant-numeric:tabular-nums}
.time-cell.hour{border-top:1px solid var(--line)}
.time-cell.hour::after{content:attr(data-h);position:absolute;right:6px;top:-7px;background:var(--pw-surface);padding:0 2px}

.col{flex:0 0 var(--col-w);width:var(--col-w);position:relative;border-right:1px solid var(--line)}
.col.gsep{border-right:2px solid var(--pw-line-2)}
.slot{height:var(--row-h);border-top:1px dotted var(--pw-line)}
.slot.hour{border-top:1px solid var(--line)}
/* нерабочие часы — серые, без курсора-указателя */
.slot.off{background:repeating-linear-gradient(135deg,#eeeef0,#eeeef0 6px,#e6e6e9 6px,#e6e6e9 12px)}
.col:hover .slot{cursor:pointer}
.col:hover .slot.off{cursor:not-allowed}

/* подсказка времени при наведении: полупрозрачная подсветка будущей брони */
.hover-hint{position:absolute;z-index:1;pointer-events:none;background:var(--pw-accent-soft);border:1px solid var(--pw-accent);border-radius:var(--pw-r-item);box-sizing:border-box}
.hover-hint .hh-time{position:absolute;top:1px;left:3px;font-size:10px;font-weight:600;color:var(--pw-link-strong);background:rgb(255 255 255 / .9);padding:0 3px;border-radius:4px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* тонкая линия текущего времени — некликабельна */
/* Линия «сейчас» — красная: в «Витрине» это отдельная роль (время), а не ошибка.
   Чёрная терялась среди часовых линий сетки. */
.now-line{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--pw-now);z-index:5;pointer-events:none}
.now-line .now-time{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:#fff;background:var(--pw-now);padding:1px 5px;border-radius:var(--pw-r-pill);white-space:nowrap;font-variant-numeric:tabular-nums}

/* booking card — две горизонтальные части: верх (время+статус), низ (данные+цвет записи) */
/* ⚠️ Цвета плитки НЕ трогаем: верх — светлый цвет статуса, низ — цвет категории
   (journal.js, справочники в config.php). Менеджер читает журнал по ним, и смена
   палитры стоила бы переучивания смены. Меняются только углы, граница и тень:
   тень под каждой из сорока плиток превращала сетку в кашу. */
.bk{position:absolute;left:2px;right:2px;border-radius:var(--pw-r-card);overflow:hidden;font-size:var(--bk-fs);line-height:1.3;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:none;border:1px solid rgb(0 0 0 / .10);display:flex;flex-direction:column}
/* во время перетаскивания брони гасим выделение текста по всей странице */
body.dragging-noselect,body.dragging-noselect *{user-select:none!important;-webkit-user-select:none!important}
.bk:hover{filter:brightness(1.03);z-index:3}
.bk.dragging{cursor:grabbing;pointer-events:none;opacity:.9;z-index:60;box-shadow:var(--pw-sh-float)}
.bk-top{flex:0 0 auto;font-weight:600;font-size:var(--bk-fs);text-align:center;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.bk-bot{flex:1 1 auto;padding:2px 4px;overflow:hidden;min-height:0}
.bk-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-phone{opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.bk-prepay{font-weight:500;white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.2}
.bk-comment{opacity:.85;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
/* «бронь на другое имя» — под именем мелко показываем владельца номера из базы */
.bk-altname{opacity:.8;font-size:11px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk.ro{cursor:pointer}
/* бронь-«ремонт»: серая штриховка, чтобы визуально отличалась от гостевых */
.bk-repair{background:repeating-linear-gradient(45deg,#ebebee,#ebebee 6px,#e1e1e5 6px,#e1e1e5 12px);color:var(--pw-ink)}
.bk-repair .bk-top{background:#8a8a8e !important;color:#fff !important}
.bk-repair .bk-name{font-weight:700}
/* ручки растягивания брони */
.bk-rs{position:absolute;left:0;right:0;height:8px;cursor:ns-resize;z-index:4}
.bk-rs-top{top:0}
.bk-rs-bot{bottom:0}
.bk:hover .bk-rs{background:rgb(0 0 0 / .14)}
#confirmText{white-space:pre-line;font-size:14px;line-height:1.5}

/* выбор времени списками */
.time-pick{display:flex;align-items:center;gap:4px}
.time-pick select{padding:0 6px;min-height:40px;border:1px solid var(--line);border-radius:var(--pw-r-ctrl);font-size:14px;font-family:inherit;color:var(--ink);background:var(--pw-surface)}

/* кастомный выбор цвета записи со свотчем у каждого пункта */
.color-picker{position:relative}
.cp-trigger{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:var(--pw-r-ctrl);background:var(--pw-surface);font-size:14px;color:var(--ink);text-align:left}
.cp-trigger:disabled{opacity:.6}
.cp-sw{width:18px;height:18px;border-radius:var(--pw-r-item);border:1px solid var(--pw-line-2);flex:0 0 auto;display:inline-block}
.cp-name{flex:1}
.cp-caret{color:var(--muted);font-size:12px}
.cp-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--pw-surface);border:1px solid var(--line);border-radius:var(--pw-r-panel);box-shadow:var(--pw-sh-float);z-index:10;max-height:220px;overflow:auto;padding:4px}
.cp-list[hidden]{display:none}
.cp-opt{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;background:none;font-size:14px;color:var(--ink);text-align:left;border-radius:6px;cursor:pointer}
.cp-opt:hover{background:#f0f4ff}

/* статус-кнопки в модалке брони — четыре в одну строку */
.status-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.st-btn{border:1px solid var(--line);background:var(--pw-surface);border-radius:var(--pw-r-ctrl);padding:7px 6px;font-size:12px;line-height:1.15;color:var(--ink);font-weight:500;text-align:center;display:flex;align-items:center;justify-content:center;min-height:44px}
.st-btn:hover{background:#f6f7f9}
.st-btn.on{background:var(--st-light);border-color:rgba(0,0,0,.2);font-weight:700;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.st-btn:disabled{opacity:.6;cursor:default}

/* ===== Modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(15,20,30,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal-overlay[hidden]{display:none}
.modal{background:var(--pw-surface);border-radius:var(--pw-r-sheet);width:800px;max-width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--pw-sh-float)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:17px;margin:0}
.modal-close{background:none;border:0;font-size:24px;color:var(--muted);line-height:1}
/* тело модалки — две колонки: слева поля брони, справа комментарии */
/* по умолчанию поля модалки идут в столбик (сотрудник/клиент/объект) */
.modal-body{padding:18px 22px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.modal-body label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:500}
.modal-body label[hidden]{display:none}            /* hidden должен скрывать поле, несмотря на правило выше */
/* окно брони — три колонки в ряд (предыдущие клиенты · поля · комментарии) */
#modal .modal-body{flex-direction:row;gap:18px;align-items:stretch}
.modal-body input,.modal-body select,.modal-body textarea{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;color:var(--ink)}
.modal-body input,.modal-body select{height:40px}
.modal-body textarea{min-height:72px;resize:vertical;line-height:1.4}
.m-main{flex:1 1 56%;min-width:0;display:flex;flex-direction:column;gap:14px}
.m-side{flex:1 1 44%;min-width:0;display:flex;flex-direction:column;gap:12px;background:#f8f9fc;border:1px solid var(--line);border-radius:10px;padding:14px}
.m-side>label{flex:1 1 auto;min-height:0}
.m-side textarea{flex:1 1 auto}
.m-status{display:flex;flex-direction:column;gap:5px}
.m-cap{font-size:12px;color:var(--muted);font-weight:500}
.req{color:#e53935;font-weight:700}   /* обязательное поле — красная звёздочка */
/* Денежное поле предоплаты: число справа + суффикс валюты */
.money-field{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;height:40px;overflow:hidden}
.money-field input{border:0!important;flex:1;min-width:0;height:100%;padding:9px 11px;text-align:right;font-variant-numeric:tabular-nums;border-radius:0}
.money-field input:focus{outline:none}
.money-cur{flex:0 0 auto;padding:0 12px;color:var(--ink);font-weight:700;background:#eef1f6;align-self:stretch;display:flex;align-items:center;border-left:1px solid var(--line)}

/* ===== Предоплаты в карточке брони (может быть несколько, у каждой свой менеджер) ===== */
.m-prepays{display:flex;flex-direction:column;gap:8px}
.m-prepays[hidden]{display:none}
.mp-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mp-total{font-size:12px;color:var(--muted);font-weight:500;text-align:right}
.mp-list{display:flex;flex-direction:column;gap:6px}
.mp-row{display:flex;gap:6px;align-items:center;position:relative;flex-wrap:wrap}
.mp-row .money-field{flex:1 1 130px;min-width:110px}
/* Название компании — появляется под строкой только у способа «Перечисление».
   Занимает всю ширину (flex-basis:100%), поэтому переносится на новую строку и
   не сжимает сумму со способом оплаты. */
.mp-company{flex:1 0 100%}
.mp-company-in{width:100%;height:36px;padding:0 10px;font-size:13px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.mp-company-in::placeholder{color:var(--muted)}
.mp-company-in:focus{outline:none;border-color:var(--accent,#4f46e5)}
.mp-method{flex:0 1 140px;min-width:110px;height:40px}
/* Иконка менеджера, за которым закреплена эта предоплата (клик — сменить) */
.mp-mgr{flex:0 1 auto;max-width:150px;display:flex;align-items:center;gap:6px;height:40px;padding:0 10px 0 5px;
  border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:12px;color:var(--ink)}
.mp-mgr:hover{background:#f6f7f9}
.mp-mgr.is-empty{border-style:dashed;color:var(--muted)}
.mp-mgr-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-mgr[disabled]{cursor:default;opacity:.7}
.avatar-xs{width:28px;height:28px;font-size:12px}
.avatar.is-empty{background:#eef1f6;color:var(--muted)}
.mp-del{flex:0 0 auto;width:32px;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.mp-del:hover{background:#fdecec;border-color:#f1b9b9;color:#b3261e}
.mp-del[hidden]{display:none}
.mp-add{align-self:flex-start;border:1px dashed var(--line);border-radius:8px;background:#fff;color:var(--accent);
  font-size:12px;font-weight:600;padding:7px 11px;cursor:pointer}
.mp-add:hover{background:#f2f7ff}
.mp-add[hidden]{display:none}
.mp-lock{font-size:12px;color:#8a6d1a;background:#fdf6e3;border:1px solid #f0e0a8;border-radius:8px;padding:8px 10px}
.mp-lock[hidden]{display:none}
/* Выпадающий выбор менеджера предоплаты */
.mp-picker{position:absolute;right:34px;top:44px;z-index:30;width:240px;max-height:260px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.16);padding:6px}
.mp-opt{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px 8px;border-radius:8px;
  cursor:pointer;font-size:13px;color:var(--ink);text-align:left}
.mp-opt:hover{background:#f2f7ff}
.mp-opt.on{background:#e8f0fe;font-weight:600}
.mp-opt small{margin-left:auto;color:var(--muted);font-size:11px}
/* «Зал» — не сотрудник, а способ не закреплять предоплату ни за кем. Отделяем его
   чертой от списка людей, иначе он читается как ещё один менеджер. */
.mp-opt.is-hall{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px;padding-bottom:8px}
.mp-opt.is-hall .avatar{background:#eef1f6;color:var(--muted)}
.mp-opt.is-hall small{font-size:10px;max-width:110px;text-align:right;line-height:1.2}
.mp-note{padding:6px 8px;color:var(--muted);font-size:11px;line-height:1.35}
/* Предоплата зала в строке карточки: приглушённая, чтобы не путалась с именем менеджера. */
.mp-mgr.is-hall{border-style:dashed;color:var(--muted)}

/* Кнопки вида оплаты и типа сервиса */
.pay-btns,.svc-btns{display:flex;gap:6px;flex-wrap:wrap}
.pay-btn,.svc-btn{flex:1 1 auto;min-width:max-content;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap}
.pay-btn:hover,.svc-btn:hover{background:#f6f7f9}
.pay-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.svc-btn.on{background:#fdecec;border-color:#f1b9b9;color:#b3261e}
.svc-btn[hidden]{display:none}

.m-row{display:flex;gap:10px;flex-wrap:wrap}
.m-row[hidden]{display:none}            /* hidden перекрывает display:flex (для режима «Сервис») */
.m-row label{flex:1;min-width:96px}
.m-row label.grow{flex:1}
/* строки времени: по два поля в ряд (дата·длительность / начало·конец) —
   широкие, чтобы значения были видны целиком */
.m-row-time label{flex:1 1 0;min-width:130px}
.m-row-time .time-pick{height:40px;min-width:0}
.m-row-time .time-pick select{height:38px;flex:1 1 0;min-width:0;text-align:center;padding:0 6px}
.m-row-time input[type=date]{width:100%}
/* тумблер «Ремонт» — внизу карточки брони */
.m-repair-toggle{flex-direction:row !important;align-items:center;gap:8px;font-size:13px;
  color:var(--ink);font-weight:500;background:#f6f7fb;border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;cursor:pointer}
.m-repair-toggle input{width:16px;height:16px;flex:0 0 auto;cursor:pointer}
.modal.is-repair .m-repair-toggle{background:#fdecec;border-color:#f1b9b9;color:#b3261e}
/* «Гость по факту» — переключатель под именем/телефоном */
.m-walkin-toggle{flex-direction:row !important;align-items:center;gap:8px;font-size:13px;
  color:var(--ink);font-weight:500;background:#f2f7ff;border:1px solid #cfe0f5;
  border-radius:8px;padding:10px 12px;cursor:pointer}
.m-walkin-toggle input{width:16px;height:16px;flex:0 0 auto;cursor:pointer}
.m-row.walkin-off{opacity:.5}
/* низ левого меню карточки: блокировка слота (ремонт/сервис) */
.mc-recent{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px}
.mc-recent[hidden]{display:none}
.mc-bottom{display:flex;flex-direction:column;gap:8px;padding-top:12px;margin-top:auto;border-top:1px solid var(--line)}
.mc-empty{font-size:12px;padding:2px}
.m-place{font-size:16px;font-weight:700;background:#f0f4ff;color:var(--accent);padding:10px 14px;border-radius:8px}
.m-place small{display:block;color:var(--muted);font-weight:500;font-size:12px;margin-top:2px}
.m-meta{font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px;margin-top:auto}
@media(max-width:760px){
  .modal{width:560px}
  #modal>.modal{width:560px}
  .modal-body{flex-direction:column}
  .m-side{flex:none}
  .m-clients{flex:none;border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:12px}
  .mc-list{flex-direction:row;flex-wrap:wrap;gap:6px}
  .mc-item{width:auto;border:1px solid var(--line)}
  .status-btns{grid-template-columns:repeat(2,1fr)}
}
.modal-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}
.modal-foot .spacer{flex:1}
/* панель «Предыдущие клиенты» — крайняя левая колонка карточки брони */
#modal>.modal{width:940px}
/* окно «История изменений» — широкое, чтобы «что было → что стало» читалось в строку */
#historyModal>.modal{width:1100px;max-width:96vw}
/* Маршрут истории: «Бронь #758 → Возврат #12 → Бронь #802». Появляется только когда
   звеньев больше одного, то есть бронь проходила через «Возвраты». */
.hist-route{font-size:13px;color:var(--muted);padding:2px 0 8px;line-height:1.6}
.hist-route b{color:var(--ink)}
/* Записи соседних звеньев приглушены: это история того же гостя, но другого номера —
   видно, что строка относится не к открытой броне, а к её прошлому. */
.hist-table tr.hist-other td{background:var(--bg,#fafbfd);color:var(--muted)}
.hist-table tr.hist-other td .tag{opacity:.75}
.m-clients{flex:0 0 188px;min-width:0;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line);padding-right:14px}
.m-clients[hidden]{display:none}
.mc-title{font-size:13px;font-weight:700;color:var(--ink)}
.mc-list{display:flex;flex-direction:column;gap:2px;overflow:auto}
.mc-item{display:block;text-align:left;border:0;background:none;padding:7px 9px;border-radius:8px;cursor:pointer;width:100%}
.mc-item:hover{background:#f0f4ff}
.mc-name{font-weight:600;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-phone{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
/* подпись-пояснение (страница возвратов, мелкий филиал под объектом) */
.muted{color:var(--muted)}
.muted-note{color:var(--muted);font-size:12px;margin:0 0 14px}
td .muted-note{margin:2px 0 0}
.color-sel{}
.color-opt-row{display:flex;align-items:center;gap:8px}
/* заметка о госте (постоянная, по номеру телефона) */
.guest-note .gn-label{display:flex;flex-direction:column;gap:1px}
.guest-note .gn-label small{font-weight:400;color:var(--muted);font-size:11px}
.guest-note textarea{border-color:#d7c089;background:#fffdf4}
.guest-note.has-note textarea{border-color:#e0a800;background:#fff7df;box-shadow:0 0 0 2px rgba(224,168,0,.15)}
/* подсказка «в базе номер записан на другое имя» под полем имени гостя */
.name-alt{margin-top:4px;font-size:12px;color:var(--muted);line-height:1.35}
.link-btn{background:none;border:0;padding:0;color:#2563eb;font:inherit;cursor:pointer;text-decoration:underline}
.link-btn:hover{color:#1d4ed8}

.suggest{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;margin-top:2px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:5;max-height:200px;overflow:auto}
.suggest div{padding:8px 11px;cursor:pointer;font-size:13px;color:var(--ink)}
.suggest div:hover{background:#f0f4ff}
.suggest small{color:var(--muted)}

/* ===== Tables (clients, employees) ===== */
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table th,.table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
.table th{background:#fafbfc;color:var(--muted);font-weight:600;font-size:12px}
.table th.sortable{cursor:pointer;user-select:none}
.table th.sortable:hover{color:var(--ink)}
.sort-ind{font-size:10px;color:var(--accent)}
/* Сотрудники: сворачиваемые группы по заведениям */
.emp-group{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;background:#fff}
.emp-group>summary{cursor:pointer;padding:12px 16px;font-weight:700;font-size:14px;list-style:none;display:flex;align-items:center;gap:10px;user-select:none;background:#fafbfc}
.emp-group>summary::-webkit-details-marker{display:none}
.emp-group>summary::before{content:'▸';color:var(--muted);transition:transform .15s}
.emp-group[open]>summary::before{content:'▾'}
.emp-group .emp-cnt{background:#eef2f8;color:var(--muted);border-radius:20px;padding:1px 9px;font-size:12px;font-weight:600}
.emp-group .table{border:0;border-radius:0;margin:0}
.emp-group[open]>summary{border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:#eef4ff}
.row-actions{display:flex;gap:6px;align-items:center}
/* В таблицах .row-actions — это <td>: оставляем его табличной ячейкой (иначе display:flex
   выключает поведение ячейки, и она не тянется на высоту строки / не подсвечивается). */
td.row-actions{display:table-cell;white-space:nowrap}
td.row-actions .btn+.btn{margin-left:6px}
/* перетаскивание объектов на странице «Объекты бронирования» */
.objects-table tr[draggable]{cursor:default}
.objects-table .drag-cell{text-align:center;width:34px}
.drag-handle{cursor:grab;color:var(--muted);font-size:16px;line-height:1;user-select:none}
.drag-handle:active{cursor:grabbing}
.objects-table tr.row-dragging{opacity:.45;background:#eef3ff}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;background:#eef1f6;color:#555}
.tag.admin{background:#e7f0ff;color:#2861e0}
.tag.off{background:#fde8e8;color:#c0392b}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.search{min-width:240px}

/* analytics */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat .v{font-size:26px;font-weight:700}
.stat .l{color:var(--muted);font-size:13px;margin-top:4px}
.bar-wrap{background:#eef1f6;border-radius:6px;height:10px;overflow:hidden}
.bar{height:100%;background:var(--accent)}

/* ===== Обращения (предложения) ===== */
.tag.st-new{background:#eef1f6;color:#555}
.tag.st-prog{background:#e7f0ff;color:#2861e0}
.tag.st-done{background:#e3f6e8;color:#1f8a4c}
.tag.st-rej{background:#fde8e8;color:#c0392b}

/* Шапка «Обращений»: канал Telegram + памятка как писать */
.sugg-intro{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;margin-bottom:18px}
@media(max-width:760px){.sugg-intro{grid-template-columns:1fr}}
.sugg-tg{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:linear-gradient(135deg,#2aabee,#229ed9);color:#fff;border-radius:var(--radius);padding:16px 18px;box-shadow:0 4px 14px rgba(34,158,217,.28);transition:transform .12s ease,box-shadow .12s ease}
.sugg-tg:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(34,158,217,.38)}
.sugg-tg-ic{flex:0 0 auto;color:#fff}
.sugg-tg-txt{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.92)}
.sugg-tg-txt b{font-size:15px;color:#fff}
.sugg-tg-go{margin-top:auto;font-weight:600;font-size:13px;color:#fff}
.sugg-tips{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px}
.sugg-tips>b{display:block;font-size:14px;color:var(--ink);margin-bottom:8px}
.sugg-tips ul{margin:0;padding-left:18px}
.sugg-tips li{font-size:13px;line-height:1.5;color:var(--ink);margin-bottom:5px}
.sugg-tips-note{font-size:12px;color:var(--muted);margin:10px 0 0}

.sg-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px}
.sg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.sg-subject{font-size:16px;font-weight:700;color:var(--ink);word-break:break-word}
.sg-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:10px}
.sg-meta b{color:var(--ink)}
.sg-login{background:#f0f2f6;border-radius:12px;padding:1px 8px}
.sg-stmeta{margin-left:auto}
.sg-msg{font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.sg-attach{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.sg-img{display:block;width:120px;height:120px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#f6f7f9}
.sg-img img{width:100%;height:100%;object-fit:cover;display:block}
.sg-media{width:220px;max-height:160px;border-radius:8px;border:1px solid var(--line);background:#000}
.sg-admin{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.sg-stbtn{font-size:12px;padding:6px 12px}
.sg-stbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.sg-del{margin-left:auto}
/* комментарий разработчика к обращению */
.sg-comment{margin-top:12px;padding:10px 12px;border-radius:10px;background:#f4f8ff;border:1px solid #dbe6f7}
.sg-comment-label{font-size:12px;color:var(--muted);margin-bottom:3px}
.sg-comment-text{font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.sg-comment-edit{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sg-comment-input{width:100%;resize:vertical;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.sg-comment-input:focus{outline:none;border-color:#bcd3f5;box-shadow:0 0 0 2px rgba(70,120,200,.12)}
.sg-comment-save{align-self:flex-start;font-size:12px;padding:6px 12px}

/* Логи: карточка-сводка найденной по номеру брони */
.lk-card{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.lk-card .lk-main{flex:1 1 auto;min-width:0}
.lk-card .lk-main p{margin:3px 0;font-size:14px;line-height:1.5}
.lk-card>.btn{flex:0 0 auto;white-space:nowrap}
/* Бронь удалена: данные восстановлены из снимка в журнале — помечаем красной кромкой */
.lk-card.lk-gone{border-left:3px solid #e11d1d}
@media(max-width:640px){.lk-card{flex-direction:column}.lk-card>.btn{width:100%;text-align:center}}

/* profile — инфо о клиенте сверху, история броней снизу (не делим на лево/право) */
.profile-grid{display:flex;flex-direction:column;gap:18px}
.client-info .ci-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 32px}
.client-info .ci-grid p{margin:0}
.client-info .ci-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid #eee}
.empty{color:var(--muted);padding:30px;text-align:center}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1f2430;color:#fff;padding:11px 18px;border-radius:10px;font-size:14px;z-index:100;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.toast.err{background:#c0392b}

/* ===== v1.6: ответственный, наложение, моргание, тот же день, бонусы, возвраты, рейтинг, оффлайн ===== */

/* Ответственный менеджер на мини-карточке */
.bk-resp{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92em;font-weight:500}

/* Гость с несколькими бронями в этот день: бейдж-индикатор. Обводка — только при
   наведении (.bk-hl), и подсвечивает все брони этого гостя сразу. */
.bk-sameday{display:inline-block;background:var(--pw-warn-fill);color:#fff;font-size:.82em;font-weight:700;border-radius:var(--pw-r-pill);padding:0 5px;margin-right:3px;line-height:1.4;vertical-align:baseline}
.bk-hl{outline:2px solid var(--pw-warn-fill);outline-offset:-2px;z-index:4}

/* Наложение броней: вторая прижата вправо и поверх первой */
.bk-stacked{box-shadow:-3px 0 8px rgb(0 0 0 / .18);border-left:2px solid rgb(0 0 0 / .20)}

/* Красное моргание у брони, чьё время подошло (статус ожидание/подтверждено).
   ⛔ Это СИГНАЛ, а не украшение: гость уже пришёл, а бронь не отметили. Убирать нельзя. */
@keyframes bkBlink{0%,100%{box-shadow:0 0 0 0 rgb(224 37 27 / 0)}50%{box-shadow:0 0 0 3px rgb(224 37 27 / .95)}}
.bk-due{animation:bkBlink 1s ease-in-out infinite;border-color:var(--pw-now)!important}
.bk-due.bk-stacked{border-left-color:var(--pw-now)}
/* ⛔ «Меньше движения» ОСТАВЛЯЕТ сигнал, просто перестаёт мигать: общее правило
   «выключить анимации» сняло бы с экрана предупреждение, а не украшение. */
@media (prefers-reduced-motion: reduce){
  .bk-due{animation:none!important;box-shadow:0 0 0 3px rgb(224 37 27 / .95)!important}
}

/* Бонусы iiko под телефоном в карточке брони */
.iiko-bonus{font-size:12px;color:#1a7f37;font-weight:600;margin-top:2px}
.iiko-bonus[hidden]{display:none}

/* Ответственный — статичный текст (для менеджера, без права менять) */
.resp-static{font-size:14px;color:var(--ink);padding:9px 11px;border:1px dashed var(--line);border-radius:8px;background:#fafbfc}
.resp-static[hidden]{display:none}

/* Кнопка «Окей» (гасит моргание) */
.btn-ok{background:#fff;color:var(--ok);border-color:#bfe3c1}
.btn-ok:hover{background:#eef8ef}

/* Выбор типа при отправке в «Возвраты» */
.rk-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.rk-btn{flex:1 1 0;min-width:100px;padding:16px 10px;font-size:14px;font-weight:600;cursor:pointer}
.rk-btn:hover{background:#f6f7f9}
.rk-btn.kind-move{border-color:#bcd3f5;color:var(--accent)}
.rk-btn.kind-refund{border-color:#f1c6c6;color:var(--danger)}
.rk-btn.kind-close{border-color:#d8d8d8;color:#555}

/* Метка типа в таблице возвратов */
.ret-kind{padding:5px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px;font-weight:600;background:#fff;cursor:pointer}
.ret-kind.kind-move{color:var(--accent);border-color:#bcd3f5}
.ret-kind.kind-refund{color:var(--danger);border-color:#f1c6c6}
.ret-kind.kind-close{color:#555}
/* комментарий возврата: текст + кнопка редактирования (правка в отдельном окне).
   Flex — на внутреннем div, а не на <td>, чтобы ячейка осталась табличной.
   Достаточно широкая колонка и перенос по словам (а не по буквам), чтобы читалось. */
.ret-comment-box{display:flex;align-items:center;gap:6px;min-width:0}
.ret-comment-text{flex:1 1 auto;min-width:0;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;line-height:1.4}
.ret-comment-edit{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:7px;padding:2px 6px;cursor:pointer;line-height:1;font-size:13px}
.ret-comment-edit:hover{border-color:#bcd3f5;background:#f4f8ff}
/* Таблица возвратов подгоняется под ширину страницы (как «Клиенты»): фиксированная
   раскладка, колонки делят 100% ширины, длинный текст переносится — без гориз. прокрутки. */
.ret-wrap{overflow-x:auto}                       /* страховка на очень узких экранах */
.ret-table{table-layout:fixed;width:100%}
/* Содержимое строк выровнено по центру по высоте: строки разной высоты (длинный
   комментарий, три кнопки в действиях), и при выравнивании по верху короткие ячейки
   «висели» вверху. Заголовки остаются прижатыми к низу шапки. */
.ret-table th{padding:9px 8px;white-space:normal;overflow-wrap:break-word;word-break:normal;vertical-align:bottom}
.ret-table td{padding:9px 8px;white-space:normal;overflow-wrap:break-word;word-break:normal;vertical-align:middle}
/* ⚠️ Сумма процентов = 100 и колонок ровно столько, сколько <th> в pages/returns.php.
   Раскладка фиксированная: добавили колонку и забыли правило — последняя получает
   ОСТАТОК, то есть почти ноль, и её содержимое (кнопки) пропадает с экрана. Так и
   вышло 02.09.2026 с колонкой «Итог». Меняете колонки — правьте и этот блок. */
.ret-table th:nth-child(1),.ret-table td:nth-child(1){width:10%}   /* Гость — имя и отчество не должны рваться по слогам */
.ret-table th:nth-child(2),.ret-table td:nth-child(2){width:9%}    /* Телефон */
.ret-table th:nth-child(3),.ret-table td:nth-child(3){width:9%}    /* Тип — тут выпадающий список, уже нельзя: подписи обрезаются */
.ret-table th:nth-child(4),.ret-table td:nth-child(4){width:8%}    /* Филиал */
.ret-table th:nth-child(5),.ret-table td:nth-child(5){width:8%}    /* Объект */
.ret-table th:nth-child(6),.ret-table td:nth-child(6){width:8%}    /* Бронь была */
.ret-table th:nth-child(7),.ret-table td:nth-child(7){width:7%}    /* Предоплата */
.ret-table th:nth-child(8),.ret-table td:nth-child(8){width:13%}   /* Комментарий — самая длинная колонка, от её ширины растёт вся строка */
.ret-table th:nth-child(9),.ret-table td:nth-child(9){width:8%}    /* Добавлено */
.ret-table th:nth-child(10),.ret-table td:nth-child(10){width:20%} /* Итог: кнопки либо чем кончилось */
.ret-table select.ret-kind{max-width:100%}
/* ячейка действий остаётся табличной (иначе ломается фикс. ширина колонки); кнопки
   растягиваем на всю ширину колонки и разрешаем перенос текста — не вылезают даже на узком
   экране. Мельче и плотнее обычных: их тут четыре, и строка иначе вырастает вдвое. */
.ret-table td.row-actions{white-space:normal}
/* Кнопки — сеткой: четыре штуки в столбик делали строку вдвое выше всех остальных.
   «Поставить бронь» и «История брони» делят строку, а обе денежные кнопки идут во всю
   ширину: их подписи длиннее и рвать их на две строки нельзя — именно по подписи
   отличают «деньги у нас» от «деньги отдали». minmax + auto-fit схлопывает сетку в одну
   колонку на узком экране. */
.ret-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:4px}
.ret-actions .btn[data-res]{grid-column:1 / -1}
.ret-table td.row-actions .btn{display:block;width:100%;margin:0;padding:5px 8px;
  font-size:12px;line-height:1.25;white-space:normal}
/* ⛔ Обрезать подпись многоточием тут нельзя: «Закрыто под депозит» и «Сделали возврат»
   означают разные вещи с деньгами, и «Закрыто под…» на узком экране их не различает.
   Пусть лучше строка станет выше. */
.ret-table td.row-actions .btn+.btn{margin-left:0}
/* «История» у закрытой записи: одна кнопка под итогом, а не сетка из четырёх */
.ret-table td.row-actions .ret-hist{margin-top:6px}

/* Рейтинг менеджеров */
.tb-field{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.tb-field input{margin:0}
.mr-rank{font-weight:700;color:var(--muted);width:36px;text-align:center}
.mr-table td,.mr-table th{white-space:nowrap}
.mr-table tbody tr:first-child .mr-rank{color:#f5a623;font-size:16px}

/* Карточка брони: левая колонка «Предыдущие клиенты» — серая граница до самого низа */
#modal .modal-body{align-items:stretch}
.m-clients{align-self:stretch}
.mc-list{flex:1 1 auto;min-height:0}

/* Карточка клиента: комфортный фиксированный размер (раньше наследовался от масштаба
   журнала и получался слишком мелким). */
#profileView .card{font-size:14px}
#profileView .card p{font-size:1em;line-height:1.6}
#profileView .card h3{font-size:16px}
#profileView .card button{font-size:14px}
#profileView .table{font-size:13px}
#profileView .table th,#profileView .table td{font-size:1em}
#profileView .page-head h1{font-size:22px}

/* Окно карточки клиента (поверх брони) */
.cl-info p{margin:4px 0;font-size:14px}
.cl-stats{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0 4px;padding:10px 12px;background:#f8f9fc;border:1px solid var(--line);border-radius:10px;font-size:13px}
.cl-stats b{font-size:14px}
.cl-history h3{font-size:14px}

/* Кнопка «Отменить» в верхней панели журнала */
.btn-undo{padding:7px 12px}
.btn-undo:disabled{opacity:.45;cursor:default}

/* Оффлайн-баннер (только просмотр) */
.offline-banner{position:fixed;left:0;right:0;bottom:0;background:#b3261e;color:#fff;text-align:center;padding:8px 14px;font-size:13px;font-weight:600;z-index:9999;transform:translateY(100%);transition:transform .2s ease;pointer-events:none}
.offline-banner.on{transform:translateY(0)}

/* ===== Обучение (учебный курс) ===== */
.edu-intro{background:linear-gradient(135deg,#2f6df6,#1b2030);color:#fff;border-radius:14px;padding:22px 24px;margin-bottom:22px}
.edu-intro h1{margin:0 0 8px;font-size:22px}
.edu-intro p{margin:0;opacity:.92;font-size:14px;line-height:1.55;max-width:760px}
.edu-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.edu-toc a{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--ink)}
.edu-toc a:hover{border-color:var(--accent);color:var(--accent)}
.edu-module{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:16px;overflow:hidden}
.edu-mhead{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);background:#fafbfd}
.edu-mnum{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:#e7f0ff;color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
.edu-mhead h2{margin:0;font-size:17px}
.edu-mhead .edu-msub{margin:2px 0 0;color:var(--muted);font-size:13px}
.edu-lessons{padding:8px 14px 14px}
.edu-lesson{border-bottom:1px solid var(--line)}
.edu-lesson:last-child{border-bottom:0}
.edu-lesson>summary{list-style:none;cursor:pointer;padding:14px 10px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:10px;user-select:none}
.edu-lesson>summary::-webkit-details-marker{display:none}
.edu-lesson>summary::before{content:'▸';color:var(--accent);font-size:13px;transition:transform .15s}
.edu-lesson[open]>summary::before{transform:rotate(90deg)}
.edu-lesson>summary:hover{color:var(--accent)}
.edu-body{padding:2px 12px 18px 32px;font-size:14px;line-height:1.6;color:#333}
.edu-body p{margin:0 0 10px}
.edu-body ul,.edu-body ol{margin:0 0 12px;padding-left:20px}
.edu-body li{margin:4px 0}
.edu-body h4{margin:16px 0 8px;font-size:14px}
.edu-body code,.edu-kbd{background:#eef1f6;border-radius:5px;padding:1px 7px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.edu-step{counter-reset:none}
.edu-note{background:#fff8e6;border:1px solid #f3e3b3;border-radius:10px;padding:10px 14px;margin:12px 0;font-size:13px}
.edu-note.tip{background:#e9f7ee;border-color:#bfe6cd}
.edu-note.warn{background:#fdecec;border-color:#f4c7c7}
.edu-note b{display:block;margin-bottom:2px}
.edu-chip{display:inline-block;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600;margin:2px 4px 2px 0}
.edu-chip.s-wait{background:#dcebdd;color:#3a6b3d}
.edu-chip.s-conf{background:#dce7f2;color:#3a5f87}
.edu-chip.s-arr{background:#f6e6cd;color:#8a5a1c}
.edu-chip.s-no{background:#eed5d5;color:#9a3b3b}

/* Иконки бокового меню (Lucide, ISC) + лого-марка бренда */
.nav a span{display:flex;align-items:center;justify-content:center}
.nav a span svg{width:18px;height:18px;display:block;flex:0 0 auto}
.brand-logo{width:22px;height:22px;border-radius:6px;vertical-align:-5px;margin-right:7px}
.login-logo .brand-logo{width:30px;height:30px;border-radius:8px;vertical-align:-8px;margin-right:8px}
html.side-collapsed .nav a span svg{width:20px;height:20px}

/* ===== Онлайн-бронь: кнопка в шапке журнала и окно заявок ===== */
/* Кнопка стоит слева от «Масштаб» и горит, пока есть необработанные заявки. */
.btn-online{position:relative;display:inline-flex;align-items:center;gap:6px}
.btn-online.has-new{border-color:var(--accent);color:var(--accent);font-weight:600}
.ob-ic{font-size:13px;line-height:1}
/* Кнопка мигает, когда заявок стало больше прямо на глазах: цифра в углу шапки
   взгляд не ловит, а гость уже ждёт ответа. */
@keyframes ob-ping{0%{box-shadow:0 0 0 0 rgba(214,69,69,.55)}70%{box-shadow:0 0 0 12px rgba(214,69,69,0)}100%{box-shadow:0 0 0 0 rgba(214,69,69,0)}}
.btn-online.ob-ping{animation:ob-ping 1.1s ease-out 3}
@media (prefers-reduced-motion: reduce){.btn-online.ob-ping{animation:none}}
.ob-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;background:var(--danger,#d64545);color:#fff;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}

.ob-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ob-filters select,.ob-filters input[type=search]{padding:7px 9px;border:1px solid var(--line,#e3e6ea);
  border-radius:8px;font:inherit;background:#fff}
.ob-filters input[type=search]{min-width:190px}
.ob-filters .spacer{flex:1 1 auto}
/* ⚠️ Селектор с .modal-body не для красоты: правило `.modal-body label` ставит
   flex-direction:column, и без перебивки галочка вставала НАД своей подписью. */
.modal-body .ob-check{display:inline-flex;flex-direction:row;align-items:center;gap:6px;
  font-size:13px;white-space:nowrap;cursor:pointer;flex:0 0 auto;color:inherit;font-weight:400}
.modal-body .ob-check input{width:auto;margin:0}

.ob-list{display:flex;flex-direction:column;gap:8px;overflow:auto;max-height:62vh}
.ob-empty{padding:26px;text-align:center;color:var(--muted,#8a94a6)}
.ob-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 12px;
  border:1px solid var(--line,#e3e6ea);border-radius:10px;background:#fff}
.ob-row .ob-form{grid-column:1 / -1}
.ob-line1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ob-line2,.ob-line3{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted,#8a94a6);margin-top:3px}
.ob-line3{color:#5c6472}
.ob-cmt{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-objs{font-size:12px;color:#5c6472;margin-top:3px}
.ob-gone{color:var(--danger,#d64545)}
.ob-mcmt,.ob-who{font-size:12px;color:var(--muted,#8a94a6);margin-top:3px}
.ob-flag{font-size:11px;padding:1px 7px;border-radius:999px;background:#f2f4f7;color:#5c6472}
.ob-flag-nc{background:#fdf0d8;color:#8a6318}
.ob-flag-ok{background:#e6f4e9;color:#2f6b3c}
.ob-badge-st{font-size:11px;padding:1px 8px;border-radius:999px;background:#f2f4f7;color:#5c6472}
.on-new{background:#e7effb;color:#22508f}
.on-inv{background:#fdf0d8;color:#8a6318}
.on-ok{background:#e6f4e9;color:#2f6b3c}
.on-rej{background:#f7e7e7;color:#8f2222}
/* Кнопки в две колонки: столбиком из четырёх они растягивали строку до 176 px —
   на это уже наступали в «Возвратах» 1.29.1. */
.ob-acts{display:grid;grid-template-columns:repeat(2,minmax(112px,1fr));gap:6px;
  align-content:start;min-width:236px}
.ob-acts .btn{white-space:nowrap;padding:7px 10px}

.ob-form{margin-top:8px;padding:10px;border-top:1px dashed var(--line,#e3e6ea)}
.ob-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.ob-f label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted,#8a94a6)}
.ob-f .ob-wide{grid-column:1 / -1}
.ob-f input,.ob-f select{padding:7px 9px;border:1px solid var(--line,#e3e6ea);border-radius:8px;font:inherit}
.ob-fbtns{display:flex;gap:8px;margin-top:10px}

/* Плитка брони, пришедшей с сайта: пунктирная рамка + значок 🌐 у имени. */
.bk.bk-online{outline:2px dashed rgba(34,80,143,.55);outline-offset:-2px}
.bk-on-ic{margin-right:3px}

/* Метки у объекта в «Объектах бронирования»: вместимость и «не онлайн». */
.obj-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  background:#f2f4f7;color:#5c6472;font-size:11px;font-weight:500;vertical-align:1px}
.obj-tag-off{background:#f7e7e7;color:#8f2222}
/* «Нет цены» / «нет вместимости» — не украшение: пока их не закрыть, объект молча
   отсутствует в форме гостя, и узнать об этом больше неоткуда. */
.obj-tag-gap{background:#fdf0d9;color:#8a5b12}
.ob-gaps{margin:10px 0 0;padding:9px 12px;border-radius:10px;background:#fdf0d9;
  color:#6f4a0f;font-size:12.5px;line-height:1.5}
.ob-gaps b{font-weight:600}
.ob-sum{font-weight:600;color:#2f6b3c}
.ob-hint{margin:8px 0 0;font-size:12px;color:var(--muted,#8a94a6)}