:root{
  --sb-waiter-left-w: 360px;
  --sb-waiter-gap: 16px;
  --sb-waiter-radius: 18px;
  --sb-waiter-sticky-top: 12px;
}

/* === Waiter lobby shell (Stage 3.2a foundation) === */
.sb-waiter-shell{
  width: 100%;
  display: grid;
  grid-template-columns: var(--sb-waiter-left-w) 1fr;
  gap: var(--sb-waiter-gap);
  align-items: start;
}

.sb-waiter-left{
  position: sticky;
  top: var(--sb-waiter-sticky-top);
  align-self: start;
}

.sb-waiter-right{
  min-width: 0;
}

/* Mobile toggle button */
.sb-waiter-panel-toggle{
  display:none;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: inherit;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
}
.sb-waiter-panel-toggle:active{ transform: translateY(1px); }

.sb-waiter-mobile-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  z-index: 60;
}

/* Make the map card fill nicely */
.sb-waiter-map-card .floor-wrapper{
  height: min(72vh, 860px);
  border-radius: var(--sb-waiter-radius);
  overflow:hidden;
}

/* === Waiter lobby: list selection polish (Stage 3.2b) === */
.open-tables-list .open-item.is-selected{
  background: linear-gradient(90deg, rgba(96,165,250,.16), rgba(0,0,0,0));
  border-radius: 14px;
  padding-inline: 10px;
  margin-inline: -10px;
}

/* Table info drawer/backdrop layering (only exists on waiter lobby template) */
.table-info-backdrop{ z-index: 80; }
.table-info-panel{ z-index: 81; }

/* Mobile: make the table info panel a bottom-sheet */
@media (max-width: 820px){
  .table-info-panel{
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: auto;
    max-height: 72vh;
    transform: translateY(105%);
    transition: transform .22s ease-out;
  }
  .table-info-panel.open{ transform: translateY(0); }
  .table-info-inner{
    border-left: none;
    border-top: 1px solid rgba(148,163,184,0.35);
    border-radius: 18px 18px 0 0;
  }
}

/* Tablet */
@media (max-width: 1100px){
  :root{ --sb-waiter-left-w: 320px; }
  .sb-waiter-map-card .floor-wrapper{ height: min(70vh, 760px); }
}

/* Mobile */
@media (max-width: 820px){
  .sb-waiter-shell{
    grid-template-columns: 1fr;
  }
  .sb-waiter-panel-toggle{ display:inline-flex; }
  .sb-waiter-left{
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(92vw, 420px);
    z-index: 70;
    transform: translateX(calc(-100% - 10px));
    transition: transform .22s ease;
    padding: 12px;
    overflow:auto;
  }
  html[dir="rtl"] .sb-waiter-left{
    transform: translateX(calc(100% + 10px));
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .sb-waiter-right{ width:100%; }
  .sb-waiter-map-card .floor-wrapper{ height: min(72vh, 720px); }

  /* Open state */
  .sb-waiter-mobile-backdrop{ display:block; opacity:0; pointer-events:none; transition: opacity .18s ease; }
  html.sb-waiter-left-open .sb-waiter-mobile-backdrop{ opacity:1; pointer-events:auto; }
  html.sb-waiter-left-open .sb-waiter-left{ transform: translateX(0); }
}