:root{
  /* Back-compat tokens (now driven by sb-floor-theme.css when present) */
  --sb-map-bg: var(--sb-canvas-bg, rgba(255,255,255,.035));
  --sb-map-border: var(--sb-canvas-border, rgba(255,255,255,.10));
  --sb-map-cell: 104px; /* base table unit (scaled to fit) */
  --sb-map-gap: 14px;
  --sb-map-pad: 14px;
  --sb-map-tile: rgba(255,255,255,.055);
  --sb-map-tile-border: var(--sb-tile-border, rgba(255,255,255,.14));
  --sb-map-grid: var(--sb-grid-size, 36px);
  --sb-map-grid-line-1: var(--sb-grid-line-1, rgba(255,255,255,.035));
  --sb-map-grid-line-2: var(--sb-grid-line-2, rgba(255,255,255,.028));
}

.sb-floor-shell{ width:100%; }

.sb-floor-topbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin: 8px 0 12px;
  flex-wrap:wrap;
}

.sb-floor-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.sb-floor-tab{
  border:1px solid var(--sb-map-border);
  background: rgba(255,255,255,.03);
  color: inherit;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  cursor:pointer;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}

.sb-floor-tab[aria-selected="true"]{
  background: rgba(56, 156, 255, .16);
  border-color: rgba(56, 156, 255, .35);
}

.sb-floor-tab:active{ transform: scale(.98); }

.sb-floor-legend{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  font-size: 12px;
}

.sb-leg-item{ display:flex; gap:6px; align-items:center; opacity:.92; }
.sb-dot{ width:10px; height:10px; border-radius:999px; }
.sb-dot.empty{ background: var(--sb-st-empty, rgba(56,156,255,.40)); }
.sb-dot.occupied{ background: var(--sb-st-occupied, rgba(255,90,90,.72)); }
.sb-dot.reserved{ background: var(--sb-st-reserved, rgba(255,196,77,.80)); }
.sb-dot.dirty{ background: var(--sb-st-dirty, rgba(120,155,255,.65)); }

.sb-floor-viewport{
  position: relative;
  width: 100%;
  height: clamp(420px, 62vh, 760px);
  border-radius: var(--sb-canvas-radius, 16px);
  border: 1px solid var(--sb-map-border);
  background:
    url('/floor_assets/floor_brown.svg') center/cover no-repeat,
    /* major grid (every 4 cells) */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.060) 0,
      rgba(255,255,255,.060) 1px,
      transparent 1px,
      transparent calc(var(--sb-map-grid) * 4)
    ),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.045) 0,
      rgba(255,255,255,.045) 1px,
      transparent 1px,
      transparent calc(var(--sb-map-grid) * 4)
    ),
    repeating-linear-gradient(0deg,
      var(--sb-map-grid-line-1) 0,
      var(--sb-map-grid-line-1) 1px,
      transparent 1px,
      transparent var(--sb-map-grid)
    ),
    repeating-linear-gradient(90deg,
      var(--sb-map-grid-line-2) 0,
      var(--sb-map-grid-line-2) 1px,
      transparent 1px,
      transparent var(--sb-map-grid)
    ),
    radial-gradient(900px 540px at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(1000px 520px at 20% 10%, rgba(56,156,255,.10), transparent 60%),
    radial-gradient(900px 520px at 90% 70%, rgba(56,156,255,.06), transparent 60%),
    var(--sb-map-bg);
  overflow: hidden;
  box-shadow: var(--sb-canvas-shadow, 0 16px 44px rgba(0,0,0,.30));
}

/* subtle inner room frame (gives the “architect plan” look) */
.sb-floor-viewport::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: calc(var(--sb-canvas-radius, 18px) - 6px);
  border: 2px solid rgba(0,0,0,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  pointer-events:none;
  opacity:.70;
}

/* HUD / floating controls */
.sb-floor-hud{
  position:absolute;
  right: 14px;
  bottom: 14px;
  z-index: 20;
}

.sb-floor-hud .sb-floor-floatbar{
  left: auto;
  bottom: auto;
  transform: none;
  padding: 8px 10px;
  border-radius: 14px;
}

.sb-floor-hud .sb-floor-floatbtn{
  width: 38px;
  height: 38px;
  border-radius: 13px;
  font-weight: 800;
  font-size: 15px;
}


.sb-floor-stage{
  position:absolute;
  inset:0;
  transform-origin: top left;
  will-change: transform;
}

.sb-floor-mask{position:absolute;inset:0;pointer-events:none;}
.sb-floor-hole{position:absolute;border-radius:10px;background:rgba(8,12,18,.98);box-shadow:none;}


.sb-floor-table{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  user-select:none;
  border-radius: var(--sb-tile-radius, 18px);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  cursor:pointer;
  transition: transform .08s ease, border-color .2s ease, background .2s ease;
}

.sb-floor-visual{
  position:absolute;
  inset: 0;
  border-radius: inherit;
  display:block;
  pointer-events:none;
}

.sb-floor-asset{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

.sb-floor-chairs{
  position:absolute;
  inset: 0;
}

.sb-floor-chair{
  position:absolute;
  width: 22%;
  height: 22%;
  background: url('/floor_assets/chair.svg') center/contain no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
  opacity: .96;
}

.sb-floor-overlay{
  position: relative;
  z-index: 3;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  width: 100%;
  height: 100%;
  pointer-events:none;
}

/* Decorative/structural objects layer */
.sb-floor-object{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 18px;
  background: transparent;
  border: none;
  color: rgba(234,242,255,.92);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.sb-floor-object .sb-obj-asset{ width: 100%; height: 100%; object-fit: cover; display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
.sb-floor-object .sb-obj-label{ font-size: 12px; opacity: .9; text-align: center; max-width: 92%; }

.sb-floor-object.type-wall{ opacity: .92; }
.sb-floor-object.type-divider{ opacity: .82; }
.sb-floor-object.type-bar{ opacity: .98; }
.sb-floor-object.type-door{ opacity: .95; }
.sb-floor-object.type-plant{ opacity: .95; }


.sb-floor-table::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(96,165,250,.20), rgba(255,255,255,0) 55%, rgba(59,130,246,.12));
  opacity:.55;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000,#000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000,#000);
  padding:1px;
}

.sb-floor-table:hover{ border-color: rgba(255,255,255,.26); transform: translateY(-2px); }
.sb-floor-table:active{ transform: scale(.985); }

.sb-floor-table.selected{
  outline: 2px solid rgba(96,165,250,.95);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(37,99,235,.35), 0 12px 30px rgba(0,0,0,.22);
}

.sb-floor-table .sb-tn{
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .3px;
}

.sb-floor-table .sb-sub{
  margin-top: 4px;
  font-size: 15px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92%;
}

.sb-floor-badge{
  position:absolute;
  top: 10px;
  left: 10px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.22);
}

.sb-floor-statuspill{
  position:absolute;
  top: 9px;
  right: 9px;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,18,28,.48);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  pointer-events:none;
}

.sb-floor-statuspill .sb-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

/* Status badge colors (prefer shared tokens from sb-floor-theme.css) */
.sb-floor-table.empty .sb-floor-badge{ background: var(--sb-st-empty, rgba(56,156,255,.55)); }
.sb-floor-table.occupied .sb-floor-badge{ background: var(--sb-st-occupied, rgba(255,90,90,.78)); }
.sb-floor-table.reserved .sb-floor-badge{ background: var(--sb-st-reserved, rgba(255,196,77,.88)); }
.sb-floor-table.dirty .sb-floor-badge{ background: var(--sb-st-dirty, rgba(120,155,255,.78)); }



/* Shape variants (from editor) */
.sb-floor-table.shape-round{ border-radius: 999px; }
.sb-floor-table.shape-square{ border-radius: 18px; }
.sb-floor-table.shape-rect{ border-radius: 18px; }
.sb-floor-table.shape-booth{ border-radius: 22px; }

/* Seats chip */
.sb-floor-seats{
  position:absolute;
  left: 10px;
  bottom: 10px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,18,28,.50);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  pointer-events:none;
  opacity: .95;
}

@media (max-width: 640px){
  .sb-floor-viewport{ height: clamp(480px, 72vh, 720px); border-radius: 14px; }
  .sb-floor-table{ border-radius: 16px; }
  .sb-floor-table .sb-tn{ font-size: 30px; }
}


/* ================= Logical sizing / centering ================= */
.sb-floor-visual,
.sb-floor-object {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-floor-asset {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--sb-asset-scale, 1));
  transform-origin: center;
}

.sb-obj-asset {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--sb-obj-scale, 1));
  transform-origin: center;
}


/* ================= Grid parquet tiles (Stage 3) ================= */
.sb-floor-cell{
  background-image: url('/floor_assets/floor_brown.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/* Optional overlay grid texture (enable by adding .has-grid-texture on .sb-floor-grid) */
.sb-floor-grid.has-grid-texture{
  background-image: url('/floor_assets/floor_tile_grid_6x6.svg');
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.9;
}



/* === SpotBook: Stage3 fixes (centering, clean square grid, no outside squares, no asset clipping) === */

/* Make viewport center its content and avoid accidental clipping */
.sb-floor-viewport{
  overflow: hidden; /* keep pan/zoom clean */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Clean square grid lines derived from --sb-map-cell (no texture SVG that can distort) */
.sb-floor-grid{
  position: relative;
  --sb-floor-bg: #0b1a2a;
  --sb-floor-bg-size: auto;
  --sb-floor-bg-repeat: repeat;
  --sb-floor-bg-position: center;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.10) 0,
      rgba(255,255,255,.10) 1px,
      transparent 1px,
      transparent var(--sb-map-cell)
    ),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.10) 0,
      rgba(255,255,255,.10) 1px,
      transparent 1px,
      transparent var(--sb-map-cell)
    ),
    var(--sb-floor-bg);
  background-size:
    auto,
    auto,
    var(--sb-floor-bg-size, auto);
  background-repeat:
    repeat,
    repeat,
    var(--sb-floor-bg-repeat, repeat);
  background-position:
    0 0,
    0 0,
    var(--sb-floor-bg-position, center);
}

/* Remove the old texture class effect if present */
.sb-floor-grid.has-grid-texture{
  background-image: none !important;
}

/* Holes: fully hide grid outside the restaurant shape (no visible squares) */
.sb-hole{
  background: rgba(8,12,18,.98) !important;
  border: none !important;
}

/* Prevent asset clipping: show full SVG even if it leaves margins */
.sb-floor-asset,
.sb-obj-asset{
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
  padding: 6px;
  box-sizing: border-box;
}

/* Floor background themes (active area) */
.sb-floor-root{
  --sb-floor-bg: url('/floor_assets/floor_parquet_blue.svg');
  --sb-floor-bg-size: 240px 240px;
  --sb-floor-bg-repeat: repeat;
  --sb-floor-bg-position: center;
}
.sb-floor-root[data-floor-theme="parquet_blue"]{
  --sb-floor-bg: url('/floor_assets/floor_parquet_blue.svg');
}
.sb-floor-root[data-floor-theme="parquet_brown"]{
  --sb-floor-bg: url('/floor_assets/floor_parquet_brown.svg');
}
.sb-floor-root[data-floor-theme="slate_dark"]{
  --sb-floor-bg: url('/floor_assets/floor_slate_dark.svg');
}
.sb-floor-root[data-floor-theme="navy_carpet"]{
  --sb-floor-bg: url('/floor_assets/floor_navy_carpet.svg');
}
.sb-floor-root[data-floor-theme="teal_terrazzo"]{
  --sb-floor-bg: url('/floor_assets/floor_teal_terrazzo.svg');
}
.sb-floor-visual[data-asset='round_table4.svg'] img,
.sb-floor-visual[data-asset='square_table2.svg'] img{
  transform: scale(1.05);
  transform-origin: center;
}



/* === Hostess map: match waiter look (no opaque plates / no blur overlays) === */
.host .sb-floor-table{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.host .sb-floor-table:hover{
  transform: none !important;
  border-color: transparent !important;
}
.host .sb-floor-table:active{
  transform: none !important;
}

/* Show outline ONLY when selected, and color it by status */
.host .sb-floor-table.selected{
  box-shadow: none !important;            /* remove glow */
  outline-width: 2px !important;
  outline-style: solid !important;
  outline-offset: 3px !important;
}
.host .sb-floor-table.selected.empty{ outline-color: var(--sb-st-empty, rgba(56,156,255,.75)) !important; }
.host .sb-floor-table.selected.occupied{ outline-color: var(--sb-st-occupied, rgba(255,90,90,.85)) !important; }
.host .sb-floor-table.selected.reserved{ outline-color: var(--sb-st-reserved, rgba(255,196,77,.90)) !important; }
.host .sb-floor-table.selected.dirty{ outline-color: var(--sb-st-dirty, rgba(120,155,255,.85)) !important; }

/* Pills/chips should not be opaque or blurred (so they won't cover nearby statuses) */
.host .sb-floor-statuspill,
.host .sb-floor-seats{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55) !important; /* keep readable without a background */
}