/* ---------- Базовая раскладка ---------- */
:root{
  --bg:#f7f2e9;
  --btn:#cdac6b;
  --btn-text:#1b1b1b;

  /* Палитра под легенду/места */
  --seat-free-bg:#8ccf8f; /* свободно (зелёный) */
  --seat-free-brd:#66b76a;
  --seat-busy-bg:#3e292a; /* занято (тёмно-коричневый) */
  --seat-mine-bg:#7a1b2c; /* ваши (бордовый) */
  --seat-selected-bg:#e74c3c; /* временный выбор */
  --seat-text:#1b1b1b;
}

html,body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
}
.container {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* ---------- Карточки/сетка/утилиты ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; }
.table-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.table-card h3 { margin:0 0 10px; font-size:16px; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.muted { color:#666; font-size:0.9em; }
.nowrap { white-space:nowrap; }
.danger { color:#b00020; }
.ok { color:#0a7f2e; }
.w100 { width:100%; }
.small { font-size:.9em; }

.alert { background:#fff3cd; border:1px solid #ffe69c; padding:12px; border-radius:8px; margin:12px 0; }
.alert.alert-danger { background:#fdecea; color:#b00020; border:1px solid #b00020; }

/* ---------- Лого вверху ---------- */
.top-logo { display:flex; justify-content:center; padding:24px 0 8px; }
.top-logo img { max-width:200px; height:auto; }

/* ---------- Легенда ---------- */
.zone-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 12px; }
.zone-head h2 { margin:0; }

.legend { display:flex; gap:16px; align-items:center; color:#4b5563; }
.legend .item { display:flex; gap:8px; align-items:center; }
.legend .dot { width:14px; height:14px; border-radius:4px; border:1px solid var(--seat-free-brd); }
.legend .dot.free { background:var(--seat-free-bg); border-color:var(--seat-free-brd); }
.legend .dot.busy { background:var(--seat-busy-bg); border-color:var(--seat-busy-bg); }
.legend .dot.mine { background:var(--seat-mine-bg); border-color:var(--seat-mine-bg); }

/* ---------- План (картинка) ---------- */
.plan { display:flex; justify-content:center; margin:8px 0 18px; }
.plan img { max-width: min(1100px, 95vw); height:auto; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.07); }

/* ---------- Блоки зон / сетка столов ---------- */
.zone-block { margin-bottom:18px; }
.zone-block > h2 { margin:0 0 12px; }

.tables-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.table-card.span-2 { grid-column: span 2; } /* большие столы занимают 2 колонки */

/* ---------- Кнопки-места ---------- */
.seats { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.seat{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--seat-free-brd);
  background:var(--seat-free-bg);
  color:var(--seat-text);
  padding:0;
  min-width:38px; min-height:38px;
  border-radius:8px;
  cursor:pointer; user-select:none;
  font-weight:700; line-height:1;
  transition: transform .08s, box-shadow .08s, background .1s, border .1s, color .1s;
}
.seat.free   { background:var(--seat-free-bg);   border-color:var(--seat-free-brd); color:#1b1b1b; }
.seat.busy   { background:var(--seat-busy-bg);  border-color:var(--seat-busy-bg);  color:#fff; }
.seat.mine   { background:var(--seat-mine-bg);  border-color:var(--seat-mine-bg);  color:#fff; }
.seat.foreign{ background:#f0f0f0; border-color:#ddd; color:#999; cursor:not-allowed; }
.seat.selected{ background:var(--seat-selected-bg); border-color:var(--seat-selected-bg); color:#fff; outline:2px solid #ef4444; }
.seat:disabled { opacity:.45; cursor:not-allowed; }
.seat.busy[disabled] { box-shadow: inset 0 0 0 2px rgba(0,0,0,.05); }
.seat.free[disabled]:hover { transform:none; }
/* ---------- Геометрия столов ---------- */
/* круглый */
.round-wrap { position:relative; width:240px; height:240px; margin:0 auto; }
.round-desk { position:absolute; left:50%; top:50%; width:120px; height:120px; margin-left:-60px; margin-top:-60px; border-radius:50%; background:#f3f4f6; border:2px solid #e5e7eb; }
.round-seat { position:absolute; transform:translate(-50%, -50%); }

/* прямоугольные */
.rect-h { display:grid; grid-template-rows:auto auto; gap:8px; justify-items:center; min-width:360px; }
.rect-h.big{ width:fit-content; min-width:520px; margin:0 auto; }
.rect-row{ display:flex; gap:8px; flex-wrap:nowrap; }

.rect-v{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; align-items:start; justify-items:center; min-width:300px; }
.rect-col{ display:grid; gap:8px; }

/* ---------- Диалог бронирования ---------- */
.dialog { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px; max-width:600px; margin:16px auto; }
.dialog label { display:block; margin-top:8px; margin-bottom:6px; }
.dialog input[type="text"], .dialog input[type="email"] { width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; }
.dialog .actions { display:flex; gap:8px; margin-top:10px; }
.dialog .actions button { background:var(--btn); color:var(--btn-text); border:0; padding:10px 12px; border-radius:10px; cursor:pointer; }

/* ---------- Доп. класс из старых страниц ---------- */
.table-card.round { border-radius:999px; }

/* ---------- Мелочи для админки, которые пригодятся и на фронте ---------- */
.plan-thumb { max-width:100%; border:1px solid #e5e7eb; border-radius:8px; }

/* Всегда считаем padding/border внутри ширины элемента */
*, *::before, *::after { box-sizing: border-box; }

/* Форма подтверждения: поля точно вписываются в .dialog */
.dialog input[type="text"],
.dialog input[type="email"] { box-sizing: border-box; }