:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --line: #e1e6ef;
  --text: #1b2130;
  --muted: #697384;
  --accent: #2f6fed;
  --accent-soft: #e4edfd;
  --danger: #d33f3f;
  --ok: #17915f;
  --radius: 10px;
  --accent-fg: #1b4ba8;
  --nav-empty: #9aa3b2;
  --hover-line: #c6cede;
  --owner-fg: #8a6410;
  --owner-bg: #fdf3d8;
  --owner-line: #e6d49a;
  --editor-fg: #1e5b9e;
  --editor-bg: #e2f0ff;
  --editor-line: #b3d6f7;
  --idea-fg: #1b4ba8;
  --idea-line: #b7cdf8;
  --idea-bg: #eef4ff;
  --avatar-accent: #1b4ba8;
  --warn: #b0761a;
  --note: #eab308;
  --memo: #17915f;
  --service-bg: #e4d5f5;
  --service-fg: #6a2d9e;
  --service-line: #9b5ccf;
  --danger-hover-bg: #fdeaea;
  --danger-hover-fg: #a92a2a;
  --shadow: 0 1px 2px rgba(20, 28, 45, .06);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --panel: #161a21;
  --panel-2: #1c212a;
  --line: #262c37;
  --text: #e6e9ef;
  --muted: #8b93a3;
  --accent: #4c8dff;
  --accent-soft: #1e3a75;
  --danger: #ef5f5f;
  --ok: #3fbf7f;
  --accent-fg: #dce8ff;
  --nav-empty: #5d6675;
  --hover-line: #3a4250;
  --owner-fg: #ffd479;
  --owner-bg: #2a2211;
  --owner-line: #5b4a1f;
  --editor-fg: #8fd0ff;
  --editor-bg: #12203a;
  --editor-line: #1e3a75;
  --idea-fg: #cfe0ff;
  --idea-line: #2f4d86;
  --idea-bg: #141c2b;
  --avatar-accent: #cfe0ff;
  --warn: #d8a13a;
  --note: #facc15;
  --memo: #3fbf7f;
  --service-bg: #2a1650;
  --service-fg: #c9a6ff;
  --service-line: #5a2d9e;
  --danger-hover-bg: #3a1f22;
  --danger-hover-fg: #ffffff;
  --shadow: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.muted { color: var(--muted); margin: 0; font-size: 13px; }
.error { color: var(--danger); font-size: 13px; margin: 0 0 8px; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.login-card { width: 340px; display: flex; flex-direction: column; gap: 6px; }
.login-title { margin: 0; font-size: 26px; letter-spacing: .5px; }

label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }

input, select, textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  outline: none;
}

input:focus, select:focus, textarea:focus { border-color: var(--accent); }

select option { background: var(--panel); color: var(--text); }

/* Галочка: общий стиль input дал бы ей рамку на всю ячейку и ширину 100%. */
input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--accent);
  cursor: pointer;
}
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .5; }
.check-wrap { display: flex; align-items: center; gap: 8px; }
.check-wrap label { margin: 0; }

button {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:disabled { opacity: .45; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}

.btn-ghost:hover { color: var(--text); border-color: var(--hover-line); }

.login-card button[type="submit"] { margin-top: 16px; }

.button-link {
  align-self: flex-start;
  margin-top: 14px;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
}

/* ---------- layout ---------- */
.app {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
}

.brand { font-weight: 700; font-size: 17px; padding: 6px 8px 14px; letter-spacing: .5px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}

.nav-item.active { background: var(--accent-soft); color: var(--accent-fg); font-weight: 600; }
.nav-item.nav-empty { color: var(--nav-empty); }
.sidebar-foot { border-top: 1px solid var(--line); padding-top: 8px; }

.workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.page-title { margin: 0; font-size: 18px; }

.userbox { display: flex; align-items: center; gap: 10px; }
.user-name { font-size: 13px; }

.role-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.role-owner { color: var(--owner-fg); border-color: var(--owner-line); background: var(--owner-bg); }
.role-editor { color: var(--editor-fg); border-color: var(--editor-line); background: var(--editor-bg); }
.role-viewer { color: var(--muted); }
.role-sm { font-size: 10px; padding: 1px 6px; }

.canvas { flex: 1; overflow: auto; padding: 20px; }

/* Скрыт атрибутом hidden, а не только правилом display: если таблица стилей
   не догрузилась, неактивная вкладка не должна вываливаться поверх активной. */
.section[hidden] { display: none; }

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.placeholder {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 110px;
}

.placeholder h2 { margin: 0 0 6px; font-size: 15px; color: var(--muted); }

a.placeholder { display: block; text-decoration: none; color: inherit; }
a.placeholder:hover { border-color: var(--accent); }
a.placeholder:hover h2 { color: var(--text); }

/* ---------- chat ---------- */
/* Чат живёт в выдвижной панели поверх страницы, поэтому задаём ему
   собственную геометрию, а не растягиваем на колонку рабочей области. */
.chat-scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(16, 20, 30, .34);
}

.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  width: min(420px, 100vw);
  transform: translateX(100%);
  transition: transform .18s ease;
}

/* Скрыто атрибутом hidden, а не только CSS: если таблица стилей не догрузилась,
   панель не должна «зависать» открытой поверх страницы. */
.chat-drawer[hidden] { display: none; }

.chat-drawer.open { transform: none; }

.chat {
  height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(16, 20, 30, .18);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.chat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  border-bottom: 1px solid var(--line);
}

.chat-bar-title { margin: 0; font-size: 14px; }
.chat-hint { font-size: 11px; }

.chat-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 8px;
}

.chat-close:hover { color: var(--text); border-color: var(--hover-line); }

.sidebar .chat-open {
  width: 100%;
  margin-bottom: 10px;
  text-align: left;
  font-weight: 600;
}

.sidebar .chat-open[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.chat-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}

.chat-members span {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg { display: flex; gap: 8px; }
.msg-main { min-width: 0; flex: 1; }

.msg-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.msg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.msg-author { font-size: 12px; font-weight: 600; }
.msg-time { font-size: 10px; color: var(--muted); margin-left: auto; }

.msg-del {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}

.msg-del:hover { color: var(--danger); }

.msg-body {
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
}

.msg.own .msg-avatar { border-color: var(--accent); color: var(--avatar-accent); }
.msg-deleted .msg-body { color: var(--muted); font-style: italic; background: transparent; border-style: dashed; }

.chat-form { border-top: 1px solid var(--line); padding: 10px 12px 12px; }
.chat-form textarea { resize: vertical; min-height: 40px; }
.chat-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.chat-send-group { display: flex; align-items: center; gap: 6px; }
.chat-noperm { margin-top: 8px; color: var(--warn); }

.idea-toggle { padding: 7px 10px; font-size: 12px; }
.idea-toggle.active { color: var(--accent-fg); border-color: var(--accent); background: var(--accent-soft); }
.chat-form.idea-mode textarea { border-color: var(--accent); }
.chat-form.idea-mode { box-shadow: inset 0 2px 0 var(--accent); }

.idea-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--idea-fg);
  background: var(--idea-bg);
  border: 1px solid var(--idea-line);
}

.msg.idea .msg-body { border-color: var(--idea-line); background: var(--idea-bg); }

.vote-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.vote-btn:hover { color: var(--text); border-color: var(--hover-line); }
.vote-btn.voted { color: var(--accent-fg); border-color: var(--accent); background: var(--accent-soft); }
.vote-btn:disabled { opacity: .5; }

/* ---------- users page ---------- */
.page { width: 100%; margin: 0; padding: 24px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.page-head h1 { margin: 0; font-size: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.row-form h2 { margin: 0 0 6px; font-size: 15px; }
.row-form button { margin-top: 14px; }
.row-form .error { margin-top: 10px; }

.table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.table th, .table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.table th { color: var(--muted); font-weight: 500; font-size: 12px; }
.table td { vertical-align: top; }
.table td:last-child { width: 1%; white-space: nowrap; }
.table td.check-cell { width: 1%; text-align: center; }
/* Выключенный сценарий виден, но читается как отложенный. */
.table tr.inactive td { opacity: .55; }

/* ---------- расписание ---------- */
.sch-locations {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px 12px;
  margin-top: 12px;
}
.sch-locations legend { font-size: 12px; color: var(--muted); padding: 0 6px; }
.check-list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sch-title { font-size: 15px; margin: 18px 0 0; }
.slot-chip {
  display: inline-block;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0 6px 6px 0;
  font-size: 12px;
  white-space: nowrap;
}
.sch-left { white-space: nowrap; font-size: 12px; }

.btn-ghost.danger { color: var(--danger); }
.btn-ghost.danger:hover { color: var(--danger-hover-fg); border-color: var(--danger); background: var(--danger-hover-bg); }

.grid-loc { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.grid-scn { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.grid-scn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.row-form textarea { resize: vertical; }

/* ---------- гости ---------- */
/* Четыре счётчика над формой: переносятся на узкий экран колонкой. */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.stat-card { display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-size: 22px; font-weight: 600; }
.stat-label { color: var(--muted); font-size: 12px; }
/* Числа и даты визитов не переносятся по словам. */
.table td.g-num, .table td.g-muted { white-space: nowrap; }
.table td.g-muted { color: var(--muted); }

.lead-cell, .dur-cell { display: flex; align-items: center; gap: 6px; }
.lead-cell span, .dur-cell span { white-space: nowrap; font-size: 12px; }

/* ---------- часы локации ---------- */
/* Строка-панель раскрыта внутри таблицы: общий белый список ячеек
   (nowrap) пришёл бы в конфликт с длинными подписями и кнопками. */
.table td.hours-detail { white-space: normal; width: auto; background: var(--panel-2); }
.hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.hours-group {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}
.hours-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hours-head h3 { margin: 0; font-size: 13px; }
.hours-add { padding: 4px 9px; font-size: 12px; }
.hours-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hours-list li { display: flex; align-items: center; gap: 6px; }
.hours-time { width: auto; flex: 1; min-width: 0; padding: 5px 6px; font-size: 12px; }
.hours-list .muted { font-size: 12px; }
.hours-del { padding: 3px 8px; font-size: 14px; line-height: 1.3; }
.hours-empty { margin-top: 8px; font-size: 12px; }
.hours-badge { font-weight: 600; }

/* ---------- сетка бронирования ---------- */
.bk-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-toolbar .bk-date { width: auto; }
/* Ссылка «на весь экран» уезжает вправо, чтобы не мешать навигации по дате. */
.bk-fullscreen { margin-left: auto; text-decoration: none; }

/* ---------- сетка на отдельной странице ---------- */
/* Автономный экран без сайдбара: шапка с датой и сетка на всю ширину,
   список броней дня скрыт — оператор видит только загрузку. */
.bk-full {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 28px;
}
.bk-full-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bk-full-bar .page-title { font-size: 18px; }
.bk-full-back { text-decoration: none; }
.bk-full-user { margin-left: auto; color: var(--muted); font-size: 13px; }
.bk-full-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bk-full #bookings-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bk-grid-only #bk-list-wrap { display: none; }
.bk-grid-only .bk-wrap { flex: 1; }


.bk-wrap { overflow-x: auto; }
/* Сетка сама подстраивается под ширину окна: часовые колонки делят место
   поровну и сжимаются до минимума. Минимальную ширину таблицы считает
   bookings.js (150 px на сценарий + 72 px на каждый час) — за ней .bk-wrap
   уходит в горизонтальную прокрутку, чтобы на маленьком экране колонки не
   сжимались в нечитаемую полоску. table-layout: fixed — иначе длинные
   имена клиентов и подписи часов раздували бы колонки и не давали им
   сжиматься. */
.bk-grid { table-layout: fixed; width: 100%; }
.bk-grid th, .bk-grid td { padding: 4px 6px; }
/* .table td:last-child задаёт width: 1% (под кнопку действия) — у ячейки
   часа ширина другая: она тянется вместе с колонкой. */
.bk-grid td:last-child { width: auto; }
.bk-grid th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-grid thead th:first-child { width: 150px; }
.bk-grid th.bk-hour { text-align: center; font-size: 10px; }
/* Строка-заголовок локации: часы работы на всю ширину сетки. */
.bk-grid tr.bk-loc th {
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
}
.bk-grid td.bk-scn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-grid td.bk-cell {
  text-align: center;
  vertical-align: middle;
  height: 42px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}
.bk-cell.bk-free { cursor: pointer; font-weight: 500; }
.bk-cell.bk-free:hover {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.bk-cell.bk-busy { background: var(--accent-soft); color: var(--accent-fg); font-weight: 600; }
.bk-cell.bk-continuation { background: var(--accent-soft); color: var(--accent-fg); }
.bk-cell.bk-continuation::after { content: "···"; letter-spacing: 2px; }
/* Недоступные ячейки: вне часов, время прошло, не хватает lead time
   или часы заняты бронью другого сценария — та же штриховка, что у
   закрытых: забронировать в этот час нельзя ни в одной строке локации. */
.bk-cell.bk-closed,
.bk-cell.bk-past,
.bk-cell.bk-lead,
.bk-cell.bk-taken {
  background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--panel-2) 7px 8px);
}
.bk-cell.bk-past { opacity: .6; }
/* Ожидающая подтверждения бронь занимает слот, но пока не подтверждена:
   пунктир поверх той же заливки/штриховки. */
.bk-cell.bk-pending { outline: 1px dashed var(--accent); outline-offset: -3px; }
/* Клиент в виджете оставил пожелания — жёлтая полоска по низу ячейки,
   чтобы оператор заметил это до разговора. */
/* Комментарии у ячейки начала брони: жёлтая полоска — пожелания клиента
   из виджета, зелёная — служебная заметка оператора. При двух полосках
   жёлтая лежит ниже (первой в списке box-shadow — она поверх). */
.bk-cell.bk-note { box-shadow: inset 0 -4px 0 var(--note); }
.bk-cell.bk-memo { box-shadow: inset 0 -4px 0 var(--memo); }
.bk-cell.bk-note.bk-memo {
  box-shadow: inset 0 -4px 0 var(--note), inset 0 -8px 0 var(--memo);
}
/* Служебная бронь: фиолетовый оттенок вместо синего — правило ниже .bk-busy
   по порядку, поэтому перебивает его заливку. Пунктир ожидающей
   подтверждения — свой, по --service-line. */
.bk-cell.bk-service { background: var(--service-bg); color: var(--service-fg); }
.bk-cell.bk-service.bk-pending {
  outline: 1px dashed var(--service-line);
  outline-offset: -3px;
}
/* Карточка брони и форма новой брони выезжают справа — тот же приём,
   что у .chat-drawer, но без затемнения: сетка остаётся видимой, клик по
   другой ячейке просто переключает панель. */
.bk-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  width: min(440px, 100vw);
  padding: 12px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .18s ease;
}

/* Скрыто атрибутом hidden, а не только CSS: если таблица стилей не догрузилась,
   панель не должна «зависать» открытой поверх страницы. */
.bk-drawer[hidden] { display: none; }

.bk-drawer.open { transform: none; }

.bk-drawer > .card {
  margin-top: 0;
  box-shadow: -8px 0 24px rgba(16, 20, 30, .18);
}

/* Уведомление о новой брони: тост сверху справа, поверх drawer. */
.bk-notif {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 50;
  transform: translateX(calc(100% + 24px));
  transition: transform .25s ease;
  max-width: 360px;
}
.bk-notif[hidden] { display: none; }
.bk-notif.open { transform: none; }
.bk-notif-inner { margin-top: 0; }
.bk-notif-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bk-notif-head .muted { font-size: 12px; }
.bk-notif-close { margin-left: auto; padding: 2px 8px; font-size: 14px; }
.bk-notif-body { margin-top: 6px; font-size: 13px; line-height: 1.4; }
.bk-notif-row { margin-bottom: 2px; }
.bk-notif-row.muted { font-size: 12px; color: var(--muted); margin-top: 4px; }

.bk-form { margin-top: 16px; }
.bk-form h2 { margin: 0; font-size: 15px; }
.bk-form textarea { resize: vertical; }
.bk-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
/* Цена билета и итог рядом с числом гостей: считаются на лету по
   цене сценария на эту дату (см. app/static/bookings.js). */
.bk-total { display: flex; flex-direction: column; gap: 2px; }
.bk-total .muted { font-size: 12px; margin: 10px 0 0; }
.bk-total-sum { font-size: 13px; }
.bk-total-sum strong { font-size: 15px; }
.bk-total-no-price { color: var(--danger); font-size: 13px; }
/* Скидка промокода: старый итог зачёркнут рядом с новым, строка «Скидка −N ₽»
   под ним (считает bookings.js, updateTotal). */
.bk-total-sum s { color: var(--muted); font-size: 13px; font-weight: 400; }
.bk-total-discount { color: var(--ok); font-size: 13px; }
/* Поле промокода в форме новой брони: инпут и кнопка в одну строку. */
.bk-promo-row { display: flex; align-items: center; gap: 8px; }
.bk-promo-row input { flex: 1 1 auto; min-width: 0; }
.bk-promo-row button { flex: 0 0 auto; }

/* ---------- карточка брони ---------- */
.bk-details { margin-top: 16px; position: relative; }
.bk-details-head { display: flex; align-items: center; gap: 10px; }
.bk-details-head h2 { margin: 0; font-size: 15px; }
.bk-details-close { margin-left: auto; padding: 3px 9px; }
.bk-d-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
  margin-top: 12px;
}
.bk-d-fields .muted { font-size: 12px; }
.bk-d-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
/* Пожелания клиента из виджета: только чтение, блок скрыт, если их нет. */
.bk-d-client { margin-top: 14px; }
.bk-d-client .muted { font-size: 12px; }
.bk-d-client > div { margin-top: 2px; white-space: pre-wrap; }
.bk-move,
.bk-comment { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 4px; }
.bk-move h3 { margin: 8px 0 0; font-size: 13px; }
.bk-move-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.bk-move-row label { margin-top: 10px; }
.bk-comment textarea { width: 100%; resize: vertical; }
.bk-comment .bk-form-actions { margin-top: 8px; }
/* Подтверждение сохранения — рядом с кнопкой, чтобы было видно результат. */
#bk-comment-saved { color: var(--ok); font-size: 13px; }

/* Редактор гостей в карточке: инпут пошире и кнопка в одну строку,
   прямо под текущим значением. Показывается только у живой брони. */
#bk-d-guests-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
/* Глобальное flex-правило перебило бы [hidden] из UA-стилей — прячем явно. */
#bk-d-guests-form[hidden] { display: none; }
#bk-d-guests-input { flex: 1 1 auto; min-width: 64px; }
#bk-d-guests-save { flex: 0 0 auto; }

/* Статус брони: цветом и подписью, без отдельного столбца в сетке. */
.bk-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--panel-2);
  color: var(--muted);
}
.bk-badge-pending { background: var(--accent-soft); color: var(--accent-fg); }
.bk-badge-confirmed { background: var(--panel-2); color: var(--text); }
.bk-badge-cancelled { background: var(--danger-hover-bg); color: var(--danger-hover-fg); }

/* Список дня: строка открывает те же детали, что и ячейка сетки. */
.bk-row { cursor: pointer; }
.bk-row:hover { background: var(--panel-2); }
.bk-row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- theme toggle ---------- */
/* Выше шторки чата (z-index 30): обе кнопки живут в правом нижнем углу. */
.theme-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 50%;
}

.theme-toggle:hover { color: var(--text); border-color: var(--hover-line); }

/* Вкладка «Виджеты»: раскрытая строка с кодом вставки. td остаётся ячейкой
   таблицы (как у .hours-detail): с display:flex на нём колонку обнуляет
   правило :last-child (width:1%) и не работает colSpan, — flex живёт на
   внутреннем контейнере .wdg-code-row. */
.table td.wdg-code {
  width: auto;
  white-space: normal;
  background: var(--panel-2);
}

.wdg-code-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wdg-code code {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  overflow-x: auto;
}

.table td.wdg-status { white-space: nowrap; }

/* ---------- мобильная версия сетки ---------- */
/* На узком экране таблица .bk-grid заменяется списком сценариев со
   сгруппированными по ним слотами — это renderMobile() в bookings.js. */
.bk-mobile-grid {
  display: none;
  flex: 1;
  padding: 0 0 12px;
}
.bk-mobile-group {
  margin: 0 0 14px;
}
.bk-mobile-location {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 8px 12px;
  background: var(--panel-2);
  border-radius: var(--radius);
  margin: 0;
}
.bk-mobile-scn {
  margin: 0 0 8px;
}
.bk-mobile-scn-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 0;
  font-size: 13px;
  color: var(--muted);
}
.bk-mobile-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 12px 6px;
}
.bk-mobile-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 56px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  transition: background .12s;
}
.bk-mobile-slot:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.bk-mobile-slot.bk-free {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.bk-mobile-slot.bk-free:active {
  background: var(--accent);
  color: #fff;
}
.bk-mobile-slot.bk-busy {
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
.bk-mobile-slot.bk-busy .bk-mobile-sub {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.bk-mobile-slot.bk-pending {
  outline: 1px dashed var(--accent);
  outline-offset: -2px;
}
/* Служебная бронь: фиолетовый слот вместо серого. */
.bk-mobile-slot.bk-service {
  background: var(--service-bg);
  color: var(--service-fg);
  border-color: var(--service-line);
}
.bk-mobile-slot.bk-closed,
.bk-mobile-slot.bk-past,
.bk-mobile-slot.bk-lead,
.bk-mobile-slot.bk-taken {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.bk-mobile-slot.bk-past { opacity: .3; }
/* Комментарии: полоска не нужна, но значок для занятых слотов. */
.bk-mobile-slot.bk-note::after,
.bk-mobile-slot.bk-memo::after {
  content: "💬";
  font-size: 9px;
  margin-left: 2px;
}

@media (max-width: 900px) {
  .app { grid-template-columns: 60px 1fr; }
  .brand, .nav-item { font-size: 12px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-loc { grid-template-columns: 1fr; }
  .grid-scn, .grid-scn-pair { grid-template-columns: 1fr; }
  .grid-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* В свёрнутом сайдбаре подпись не помещается — оставляем кнопку-иконку. */
  .chat-open-label { display: none; }
  .sidebar .chat-open { padding: 8px 0; text-align: center; font-size: 13px; }
}

@media (max-width: 480px) {
  .chat-drawer { width: 100vw; }
}

/* ---------- мобильная версия сетки ---------- */
/* Уже 768 — типичный планшет и телефон в ландшафте; таблица ещё читается,
   а на 640 — только список. */
@media (max-width: 768px) {
  .bk-drawer { width: 100vw; }
  .bk-full-bar { gap: 8px; }
  .bk-full-bar .page-title { font-size: 16px; }
  .bk-full { padding: 10px 12px 20px; }
  .bk-toolbar { gap: 6px; }
  .bk-toolbar button,
  .bk-toolbar .bk-fullscreen { min-height: 40px; padding: 6px 10px; }
  .bk-toolbar .bk-date input { font-size: 14px; }
  .bk-d-fields { grid-template-columns: 1fr; }
  .bk-move-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Мобила: таблицу прячем, показываем список слотов. */
  #bookings-page #bk-wrap { display: none; }
  #bookings-page #bk-mobile-grid { display: block; }
  .bk-full-user { font-size: 12px; }
  /* Форма и детали на всю ширину без тени. */
  .bk-drawer > .card { box-shadow: none; }
  /* Палец не промахивается: кнопки тулбара крупнее. */
  .bk-toolbar button,
  .bk-toolbar .bk-fullscreen { min-height: 44px; padding: 8px 14px; font-size: 14px; }
}

/* Минимальное количество гостей в локации */
.mg-wrap { display: flex; align-items: center; gap: 0.5em; margin: 0.5em 0; }
/* Общее правило label даёт label отступ сверху — внутри flex он лишний. */
.mg-wrap label { margin: 0; font-size: 0.9em; color: var(--muted); }
.mg-input {
  width: 5em;
  padding: 0.3em;
  font-size: 0.9em;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* ---------- отдельная мобильная страница сетки (mobile-first) ---------- */
/* Страница на весь экран, без сайдбара, оптимизирована для телефонов 320px+. */
.bk-mobile-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 8px 10px 20px;
  gap: 8px;
}
/* Шапка: назад, заголовок, пользователь */
.bk-mob-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bk-mob-bar .page-title { margin: 0; font-size: 16px; }
.bk-mob-back { text-decoration: none; padding: 6px 10px; font-size: 16px; }
.bk-mob-user { margin-left: auto; color: var(--muted); font-size: 12px; }

/* Навигация по дате: компактная строка */
.bk-mob-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bk-mob-nav button { min-height: 40px; min-width: 40px; padding: 6px 12px; font-size: 14px; }
.bk-mob-date-input { width: auto; font-size: 14px; text-align: center; flex: 1; }
.bk-mob-nav .muted { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bk-mob-today-btn { font-size: 12px; padding: 4px 10px; min-height: 36px; }

/* Фильтр по локациям */
.bk-mob-loc-filter {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  margin: 0 0 8px;
}

/* Контент: карточки локаций */
.bk-mob-content {
  flex: 1;
  min-height: 0;
}
.bk-mob-empty { font-size: 13px; color: var(--muted); padding: 16px; text-align: center; }

/* Группа локации — карточка */
.bk-mob-loc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 10px;
  overflow: hidden;
}
.bk-mob-loc-header {
  background: var(--panel-2);
  padding: 10px 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

/* Сценарий внутри локации */
.bk-mob-scn { padding: 0; }
.bk-mob-scn-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 2px;
  font-size: 13px;
  color: var(--muted);
}

/* Слоты-кнопки: крупные, на всю ширину, в виде сетки */
.bk-mob-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  padding: 4px 12px 8px;
}
.bk-mob-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 4px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  line-height: 1.2;
  word-break: break-word;
}
.bk-mob-slot:active { transform: scale(.97); }
.bk-mob-slot .bk-mob-slot-time { font-size: 14px; font-weight: 600; }
.bk-mob-slot .bk-mob-slot-sub {
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
}
/* Свободный слот — акцентный */
.bk-mob-slot.bk-free {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.bk-mob-slot.bk-free:active {
  background: var(--accent);
  color: #fff;
}
/* Занятый слот */
.bk-mob-slot.bk-busy {
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
.bk-mob-slot.bk-busy .bk-mob-slot-name {
  font-size: 11px;
  color: var(--accent-fg);
}
/* Ожидающая подтверждения */
.bk-mob-slot.bk-pending {
  outline: 1px dashed var(--accent);
  outline-offset: -2px;
}
/* Служебная бронь */
.bk-mob-slot.bk-service {
  background: var(--service-bg);
  color: var(--service-fg);
  border-color: var(--service-line);
}
/* Недоступные слоты */
.bk-mob-slot.bk-closed,
.bk-mob-slot.bk-past,
.bk-mob-slot.bk-lead,
.bk-mob-slot.bk-taken {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}
.bk-mob-slot.bk-past { opacity: .25; }
.bk-mob-slot.bk-continuation { opacity: .5; cursor: default; pointer-events: none; }

/* Модальное окно на весь экран */
.bk-mob-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(16, 20, 30, .34);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.bk-mob-modal[hidden] { display: none; }
.bk-mob-modal.open { opacity: 1; }
.bk-mob-modal-inner {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -4px 20px rgba(16, 20, 30, .12);
}
.bk-mob-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.bk-mob-modal-head h2 { margin: 0; font-size: 16px; }
.bk-mob-modal-close { margin-left: auto; padding: 4px 10px; font-size: 16px; }
.bk-mob-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.bk-mob-modal-actions button { min-height: 44px; font-size: 15px; }
.bk-mob-modal-inner label { margin-top: 8px; }
.bk-mob-modal-inner input { font-size: 14px; }
.bk-mob-d-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 8px;
}
.bk-mob-d-fields .muted { font-size: 12px; }
.bk-mob-d-client { margin-top: 10px; }
.bk-mob-d-client .muted { font-size: 12px; }
.bk-mob-d-client > div { margin-top: 2px; white-space: pre-wrap; font-size: 13px; }
#bk-mob-d-actions { margin-top: 12px; }
#bk-mob-d-confirm { min-height: 44px; }
button.danger { color: var(--danger); }

/* На очень маленьких экранах — ещё плотнее */
@media (max-width: 360px) {
  .bk-mobile-page { padding: 4px 6px 12px; }
  .bk-mob-slots { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 4px; }
  .bk-mob-slot { min-height: 42px; font-size: 13px; padding: 6px 2px; }
  .bk-mob-nav button { min-height: 38px; min-width: 38px; padding: 5px 8px; }
}

/* ---------- политики (исключения из правил ценообразования) ---------- */
#pp-add-btn, #pp-create { margin-top: 12px; }
.pp-form-actions { display: flex; align-items: center; gap: 10px; }
.pp-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pp-name { font-weight: 600; }
.pp-range { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pp-source { font-size: 12px; }
.pp-actions { display: flex; gap: 8px; margin-left: auto; }
#pp-empty { margin-top: 12px; }

/* ---------- промокоды (скидка на бронь) ---------- */
#pc-add-btn, #pc-error, #pc-create { margin-top: 12px; }
.pc-form-actions { display: flex; align-items: center; gap: 10px; }
.pc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pc-code { font-weight: 600; }
.pc-discount { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pc-active { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pc-actions { display: flex; gap: 8px; margin-left: auto; }
/* Выключенный код виден, но читается как неактивный (как строка сценария). */
.pc-row.inactive { opacity: .55; }
#pc-empty { margin-top: 12px; }