/* Floor plan rendering — shared by the public reservation page and the
   back office live view. Depends only on the four variables below, so it can
   be dropped into either stylesheet context. */

.floor-shell,
.floor-legend {
  --fl-line: #e3d9c8;
  --fl-ink: #2b241e;
  --fl-muted: #7c6f62;
  --fl-espresso: #241c16;
  --fl-gold: #c4a777;
  --fl-gold-deep: #a8874f;
}

/* ------------------------------------------------------------- floor map -- */
.floor-shell {
  position: relative; border: 1px solid var(--fl-line); border-radius: 16px;
  background: #f2ebdf; overflow: auto; -webkit-overflow-scrolling: touch;
}
.floor-canvas { position: relative; }
.fo { position: absolute; box-sizing: border-box; }
.fo-table {
  display: grid; place-items: center; text-align: center; cursor: pointer;
  background: #fff; border: 2px solid #cbbba0; color: var(--fl-ink);
  box-shadow: 0 3px 0 rgba(36,28,22,.08); transition: .12s; user-select: none;
}
.fo-table .t-code { font-weight: 800; font-size: .9rem; line-height: 1.1; }
.fo-table .t-seats { font-size: .68rem; color: var(--fl-muted); }
.fo-table.round { border-radius: 50%; }
.fo-table.square, .fo-table.rect { border-radius: 10px; }
.fo-table.booth { border-radius: 10px 10px 26px 26px; }
.fo-table.is-free:hover { border-color: var(--fl-gold-deep); transform: translateY(-2px); }
.fo-table.is-selected { background: var(--fl-espresso); color: var(--cream); border-color: var(--fl-gold); }
.fo-table.is-selected .t-seats { color: var(--fl-gold); }
.fo-table.is-busy { background: #f3e2df; border-color: #d9a89f; color: #8d4034; cursor: not-allowed; }
.fo-table.is-blocked { background: #ece8e1; border-color: #cfc6b8; color: #97897a; cursor: not-allowed; }
.fo-table.is-occupied { background: #fdf0dc; border-color: #e0bd7e; color: #8a6412; }
.fo-table.is-small { opacity: .5; cursor: not-allowed; }

.fo-wall    { background: #3c3129; border-radius: 3px; }
.fo-door    { background: repeating-linear-gradient(45deg, #c4a777, #c4a777 8px, #b3946a 8px, #b3946a 16px); border-radius: 4px; display: grid; place-items: center; font-size: .68rem; color: #241c16; font-weight: 700; }
.fo-counter { background: #6b4f36; color: #f7ecdb; border-radius: 8px; display: grid; place-items: center; font-size: .78rem; font-weight: 700; text-align: center; padding: 4px; }
.fo-toilet  { background: #dfe6ee; border: 2px solid #b9c6d5; border-radius: 8px; display: grid; place-items: center; font-size: .74rem; color: #4a5a6b; font-weight: 700; }
.fo-stage   { background: #4a3b52; color: #f0e6f5; border-radius: 10px; display: grid; place-items: center; font-size: .8rem; font-weight: 700; text-align: center; padding: 4px; }
.fo-stairs  { background: repeating-linear-gradient(180deg, #cdbfa9, #cdbfa9 10px, #b9a88e 10px, #b9a88e 20px); border-radius: 6px; }
.fo-plant   { background: radial-gradient(circle at 50% 45%, #7fa86a, #3f6b34); border-radius: 50%; }
.fo-plant::after { content: "🪴"; display: grid; place-items: center; height: 100%; font-size: 1.1rem; }
.fo-bar     { background: #6b4f36; border-radius: 8px; }
.fo-label   { display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: var(--fl-muted); letter-spacing: .12em; text-transform: uppercase; border: 1px dashed var(--fl-line); border-radius: 8px; }

.floor-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: var(--fl-muted); margin-top: 14px; }
.floor-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; vertical-align: -2px; margin-right: 6px; border: 1px solid #cbbba0; }
.lg-free { background: #fff; }
.lg-sel { background: var(--fl-espresso); border-color: var(--fl-gold); }
.lg-busy { background: #f3e2df; border-color: #d9a89f; }
.lg-blocked { background: #ece8e1; }