/*
 * modern-floor.css — Floor screen & table management (RestaurantFloorScreen,
 * admin tables, table-select host, drag-to-reorder).
 *
 * Phase 6 split: peeled verbatim off the end of modern-base.css. It is a GLOBAL
 * stylesheet (not Blazor-scoped) loaded via index.html immediately AFTER
 * modern-base.css and BEFORE modern-pos-wireframe.css — that source order is
 * load-bearing (the cascade depends on it). Do not reorder the <link> tags.
 * Tokens (--scale-*) resolve from modern-tokens.css imported by modern-base.css.
 */

/* ===== Order-taking table selection (hosts the real floor screen, selection mode) ===== */
.scale-modern-table-select-host {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.scale-modern-table-select-host .restaurant-floor-screen {
  flex: 1 1 auto;
}

/* ============================================================================
   Table management refresh (Table Design.html): two-card layout, dot-grid
   canvas, revamped table tiles. Scoped strictly to the modern hosts so the
   classic UI keeps its own styling.
   ============================================================================ */

.scale-modern-table-select-host .restaurant-floor-screen,
.scale-modern-admin-tables__body .restaurant-floor-screen {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--scale-bg);
  box-sizing: border-box;
  min-height: 0;
}

/* ── Left sidebar card (Floors + Section) ────────────────────────────────── */

.scale-modern-table-select-host .restaurant-floor-screen .floor-sidebar,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-sidebar {
  flex: 0 0 210px;
  min-width: 0;
  background: var(--scale-panel);
  border: 0.5px solid var(--scale-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0;
  display: flex;
  flex-direction: column;
  /* The panel is the ONE scroller for the whole sidebar. */
  overflow-x: hidden;
  overflow-y: auto;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-sidebar.collapsed,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-sidebar.collapsed {
  flex-basis: 56px;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-sidebar-header,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-sidebar-header {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--scale-border);
  flex-shrink: 0;
  gap: 0;
  /* Stays put now that the sidebar (rather than each section) is what scrolls. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--scale-panel);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-sidebar-header .icon-button,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-sidebar-header .icon-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--scale-bg) 60%, var(--scale-panel));
  border: 0.5px solid color-mix(in srgb, var(--scale-border) 70%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--scale-text-mute);
  flex: 0 0 auto;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-sidebar-header .icon-button i.material-icons,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-sidebar-header .icon-button i.material-icons {
  font-size: var(--scale-fs-18);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-sidebar-header > span,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-sidebar-header > span {
  flex: 1;
  text-align: center;
  font-family: var(--scale-font-price);
  font-size: var(--scale-fs-16);
  color: var(--scale-text);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-selector,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-selector {
  padding: 16px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}

/* The floor chips now live inside the Floor dropdown's menu, which sits in an already-padded
   .sidebar-section — so the selector's own panel padding would double up. */
.scale-modern-table-select-host .restaurant-floor-screen .filter-dropdown__menu .floor-selector,
.scale-modern-admin-tables__body .restaurant-floor-screen .filter-dropdown__menu .floor-selector {
  padding: 0;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-selector .floor-chip,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-selector .floor-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--scale-chip-height);
  min-height: var(--scale-chip-height);
  padding: 0 12px;
  border: 0.5px solid var(--scale-border);
  border-radius: 9px;
  background: var(--scale-panel);
  color: var(--scale-text);
  font-size: var(--scale-fs-13);
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-selector .floor-chip.active,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-selector .floor-chip.active {
  border: 1.5px solid var(--scale-primary);
  background: color-mix(in srgb, var(--scale-primary) 4%, var(--scale-panel));
  /* Horizontal only (vertical owned by the fixed chip height); 11.5px vs the base 12px
     absorbs the +1px active border so the label doesn't shift. */
  padding: 0 11.5px;
}

.scale-modern-table-select-host .restaurant-floor-screen .sidebar-section,
.scale-modern-admin-tables__body .restaurant-floor-screen .sidebar-section {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 0;
  /* No overflow-y here: each section used to be its own scroller, which produced a separate
     scrollbar per section (Floor, Section, Status, Quick Filters) stacked down the panel. The
     sidebar itself now owns the single scrollbar. */
  min-height: 0;
}

.scale-modern-table-select-host .restaurant-floor-screen .sidebar-section > label,
.scale-modern-admin-tables__body .restaurant-floor-screen .sidebar-section > label {
  font-family: var(--scale-font-price);
  font-size: var(--scale-fs-16);
  color: var(--scale-text);
  margin: 0 0 4px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.scale-modern-table-select-host .restaurant-floor-screen .sidebar-section .filter-row,
.scale-modern-admin-tables__body .restaurant-floor-screen .sidebar-section .filter-row {
  padding: 9px 11px;
  border: 0.5px solid var(--scale-border);
  border-radius: 9px;
  background: var(--scale-panel);
  color: var(--scale-text);
  font-size: var(--scale-fs-13);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  /* Keep rows at their natural (content) height; the .floor-sidebar owns the scroll.
     Without this, flex-shrink compresses each row below its content and the two-line
     section rows overflow and overlap their neighbours. */
  flex-shrink: 0;
  text-align: left;
  box-sizing: border-box;
}

.scale-modern-table-select-host .restaurant-floor-screen .sidebar-section .filter-row.active,
.scale-modern-admin-tables__body .restaurant-floor-screen .sidebar-section .filter-row.active {
  border: 1.5px solid var(--scale-primary);
  background: color-mix(in srgb, var(--scale-primary) 4%, var(--scale-panel));
  padding: 8.5px 10.5px;
}

/* ── Floor chip capacity count + Section rows with status counts — Table Design (1).html ── */
.scale-modern-table-select-host .restaurant-floor-screen .floor-chip__name,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-chip__count,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-chip__count {
  flex: 0 0 auto;
  font-size: var(--scale-fs-11);
  font-weight: 400;
  color: var(--scale-text-mute);
}

.scale-modern-table-select-host .restaurant-floor-screen .sidebar-section .filter-row.section-row,
.scale-modern-admin-tables__body .restaurant-floor-screen .sidebar-section .filter-row.section-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.scale-modern-table-select-host .restaurant-floor-screen .section-row__head,
.scale-modern-admin-tables__body .restaurant-floor-screen .section-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.scale-modern-table-select-host .restaurant-floor-screen .section-row__name,
.scale-modern-admin-tables__body .restaurant-floor-screen .section-row__name {
  font-size: var(--scale-fs-13);
  font-weight: 600;
  color: var(--scale-text);
}

.scale-modern-table-select-host .restaurant-floor-screen .section-row__count,
.scale-modern-admin-tables__body .restaurant-floor-screen .section-row__count {
  font-size: var(--scale-fs-11);
  font-weight: 400;
  color: var(--scale-text-mute);
}

.scale-modern-table-select-host .restaurant-floor-screen .section-row__chips,
.scale-modern-admin-tables__body .restaurant-floor-screen .section-row__chips {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--scale-fs-11);
  font-weight: 500;
  color: var(--scale-text-mute);
}

.scale-modern-table-select-host .restaurant-floor-screen .section-row__chips > span,
.scale-modern-admin-tables__body .restaurant-floor-screen .section-row__chips > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.scale-modern-table-select-host .restaurant-floor-screen .section-row__chips .status-dot,
.scale-modern-admin-tables__body .restaurant-floor-screen .section-row__chips .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.scale-modern-table-select-host .restaurant-floor-screen .section-row__chips .status-dot.status-available,
.scale-modern-admin-tables__body .restaurant-floor-screen .section-row__chips .status-dot.status-available {
  background: var(--scale-success);
}

.scale-modern-table-select-host .restaurant-floor-screen .section-row__chips .status-dot.status-occupied,
.scale-modern-admin-tables__body .restaurant-floor-screen .section-row__chips .status-dot.status-occupied {
  background: var(--scale-danger);
}

.scale-modern-table-select-host .restaurant-floor-screen .section-row__chips .status-dot.status-reserved,
.scale-modern-admin-tables__body .restaurant-floor-screen .section-row__chips .status-dot.status-reserved {
  background: var(--scale-info);
}

/* ── Bar-counter zone + stools (Bar-section RestaurantTables) — Table Design (1).html ── */
.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-zone,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-zone {
  position: relative;
  display: inline-block;
  margin-top: 26px;
  padding: 16px 14px 12px;
  border: 1.5px dashed var(--scale-border-strong);
  border-radius: 14px;
  background: var(--scale-panel-alt);
  box-sizing: border-box;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-zone__label,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-zone__label {
  position: absolute;
  top: -9px;
  left: 14px;
  padding: 2px 8px;
  border-radius: 9px;
  background: var(--scale-text-soft);
  color: var(--scale-text-on-primary);
  font-size: var(--scale-fs-11);
  font-weight: 600;
  white-space: nowrap;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-zone__rail,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-zone__rail {
  height: 16px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--scale-text-soft);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-zone__stools,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-zone__stools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-stool,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-stool {
  flex: 0 0 auto;
  width: 52px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-stool__seat,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-stool__seat {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--scale-panel);
  border: 1.5px solid var(--scale-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--scale-fs-12);
  font-weight: 700;
  color: var(--scale-text);
  box-sizing: border-box;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-stool.status-occupied .floor-bar-stool__seat,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-stool.status-occupied .floor-bar-stool__seat {
  background: color-mix(in srgb, var(--scale-danger) 7%, var(--scale-panel));
  border-color: color-mix(in srgb, var(--scale-danger) 32%, var(--scale-panel));
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-stool.selected .floor-bar-stool__seat,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-stool.selected .floor-bar-stool__seat {
  border-color: var(--scale-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--scale-primary) 30%, transparent);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-stool__seat .status-dot,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-stool__seat .status-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-stool .status-dot.status-available,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-stool .status-dot.status-available {
  background: var(--scale-success);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-stool .status-dot.status-occupied,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-stool .status-dot.status-occupied {
  background: var(--scale-danger);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-stool .status-dot.status-reserved,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-stool .status-dot.status-reserved {
  background: var(--scale-info);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-stool__label,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-stool__label {
  font-size: var(--scale-fs-11);
  color: var(--scale-text-mute);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-bar-stool.status-occupied .floor-bar-stool__label,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-bar-stool.status-occupied .floor-bar-stool__label {
  color: var(--scale-danger);
}

.scale-modern-table-select-host .restaurant-floor-screen .sidebar-section .status-dot,
.scale-modern-admin-tables__body .restaurant-floor-screen .sidebar-section .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Right workspace card ────────────────────────────────────────────────── */

.scale-modern-table-select-host .restaurant-floor-screen .floor-workspace,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-workspace {
  flex: 1;
  min-width: 0;
  background: var(--scale-panel);
  border: 0.5px solid var(--scale-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-toolbar,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-toolbar {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--scale-border);
  flex-shrink: 0;
  gap: 14px;
  background: var(--scale-panel);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-toolbar > div:first-child,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-toolbar > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-toolbar > div:first-child > strong,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-toolbar > div:first-child > strong {
  font-size: var(--scale-fs-14);
  font-weight: 700;
  color: var(--scale-text);
  line-height: 1;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-toolbar > div:first-child > span,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-toolbar > div:first-child > span {
  font-size: var(--scale-fs-12);
  color: color-mix(in srgb, var(--scale-text-mute) 90%, transparent);
  line-height: 1;
}

/* ── Toolbar stats (Tables / Seats / Bar seats) + status legend — Table Design (1).html ── */
.scale-modern-table-select-host .restaurant-floor-screen .floor-stats,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-stats {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-stat,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 18px;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-stat:first-child,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-stat:first-child {
  padding-left: 0;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-stat__label,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-stat__label {
  font-size: var(--scale-fs-12);
  color: var(--scale-text-mute);
  line-height: 1;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-stat__value,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-stat__value {
  font-family: var(--scale-font-price);
  font-size: var(--scale-fs-20);
  font-weight: 700;
  color: var(--scale-success);
  line-height: 1;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-stat__value em,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-stat__value em {
  font-size: var(--scale-fs-14);
  font-weight: 400;
  font-style: normal;
  color: var(--scale-text-mute);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-stat__divider,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-stat__divider {
  width: 1px;
  align-self: stretch;
  background: var(--scale-separator);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-legend,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-legend {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-legend__pill,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-legend__pill {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 18px;
  border: 0.5px solid var(--scale-separator);
  border-radius: 22px;
  background: var(--scale-panel-alt);
  font-size: var(--scale-fs-13);
  color: var(--scale-text-mute);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-legend__pill > span,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-legend__pill > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-legend .status-dot,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-legend .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-legend .status-dot.status-available,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-legend .status-dot.status-available {
  background: var(--scale-success);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-legend .status-dot.status-occupied,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-legend .status-dot.status-occupied {
  background: var(--scale-danger);
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-legend .status-dot.status-reserved,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-legend .status-dot.status-reserved {
  background: var(--scale-info);
}

.scale-modern-table-select-host .restaurant-floor-screen .toolbar-status,
.scale-modern-admin-tables__body .restaurant-floor-screen .toolbar-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Zoom controls sit in their own pill; Fit and close are separate buttons beside it
   (Table Design (1).html toolbar). */
.scale-modern-table-select-host .restaurant-floor-screen .floor-zoom-pill,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-zoom-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--scale-bg-alt, var(--scale-panel-alt));
  border: 0.5px solid color-mix(in srgb, var(--scale-border) 80%, transparent);
  border-radius: 22px;
  padding: 4px;
}

/* Labeled Fit button — slate pill matching the mockup. */
.scale-modern-table-select-host .restaurant-floor-screen .floor-fit-btn,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-fit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background: color-mix(in srgb, var(--scale-info) 55%, var(--scale-text-mute));
  color: var(--scale-text-on-primary);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-fs-13);
  font-weight: 600;
  cursor: pointer;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-fit-btn i.material-icons,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-fit-btn i.material-icons {
  font-size: var(--scale-fs-14);
}

/* Close (✕) button — red circle. */
.scale-modern-table-select-host .restaurant-floor-screen .floor-close-btn,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-close-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--scale-panel);
  border: 0.5px solid var(--scale-border);
  color: var(--scale-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-close-btn i.material-icons,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-close-btn i.material-icons {
  font-size: var(--scale-fs-16);
}

.scale-modern-table-select-host .restaurant-floor-screen .toolbar-status .zoom-button,
.scale-modern-admin-tables__body .restaurant-floor-screen .toolbar-status .zoom-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--scale-panel);
  border: 0.5px solid var(--scale-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  color: var(--scale-text-mute);
}

.scale-modern-table-select-host .restaurant-floor-screen .toolbar-status .zoom-button i.material-icons,
.scale-modern-admin-tables__body .restaurant-floor-screen .toolbar-status .zoom-button i.material-icons {
  font-size: var(--scale-fs-14);
}

.scale-modern-table-select-host .restaurant-floor-screen .toolbar-status .zoom-label,
.scale-modern-admin-tables__body .restaurant-floor-screen .toolbar-status .zoom-label {
  font-family: var(--scale-font-price);
  font-size: var(--scale-fs-15);
  color: var(--scale-text);
  min-width: 52px;
  text-align: center;
  padding: 0 6px;
}

.scale-modern-table-select-host .restaurant-floor-screen .toolbar-status .icon-button,
.scale-modern-admin-tables__body .restaurant-floor-screen .toolbar-status .icon-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--scale-panel);
  border: 0.5px solid var(--scale-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  color: var(--scale-text-mute);
  margin-left: 8px;
}

.scale-modern-table-select-host .restaurant-floor-screen .toolbar-status .offline-pill,
.scale-modern-admin-tables__body .restaurant-floor-screen .toolbar-status .offline-pill {
  padding: 4px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--scale-danger) 12%, transparent);
  color: var(--scale-danger);
  font-size: var(--scale-fs-11);
  font-weight: 600;
}

/* The toolbar keeps ONE row and full-size clusters in every host and every mode —
   the legend stays centred with its Available / Occupied / Reserved labels, and the
   zoom / Fit / refresh / close controls keep their full metrics. The floor-name block
   is the only cluster allowed to give up space, ellipsised rather than dropped. */
.scale-modern-table-select-host .restaurant-floor-screen .floor-toolbar > div:first-child,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-toolbar > div:first-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-toolbar > div:first-child > strong,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-toolbar > div:first-child > strong,
.scale-modern-table-select-host .restaurant-floor-screen .floor-toolbar > div:first-child > span,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-toolbar > div:first-child > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Never let the pill be squeezed narrower than its labels — a crushed legend box was
   what clipped the labels and pushed the neighbouring controls around. min-width on
   the box keeps flexbox from shrinking it past the pill, so any shortfall is taken
   out of the floor-name block above instead. */
.scale-modern-table-select-host .restaurant-floor-screen .floor-legend,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-legend {
  min-width: fit-content;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-legend__pill,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-legend__pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Same reason for the controls: they size to content and never shrink. */
.scale-modern-table-select-host .restaurant-floor-screen .toolbar-status > *,
.scale-modern-admin-tables__body .restaurant-floor-screen .toolbar-status > * {
  flex: 0 0 auto;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-fit-btn,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-fit-btn {
  white-space: nowrap;
}

/* No width-based degradation here. The selection panel is NOT the 65% menu column —
   ModernPOSPage sets `.scale-modern-pos-grid.is-table-select { grid-template-columns: 1fr }`,
   so the panel spans the full grid, same as the Table-Management host. Both have room
   for all five clusters at full size. */

/* ── Canvas with dot-grid background ─────────────────────────────────────── */

.scale-modern-table-select-host .restaurant-floor-screen .floor-canvas,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-canvas {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 22px 20px;
  background: var(--scale-bg-alt, var(--scale-panel-alt));
  background-image:
    linear-gradient(color-mix(in srgb, var(--scale-border) 80%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--scale-border) 80%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
}

.scale-modern-table-select-host .restaurant-floor-screen .floor-empty,
.scale-modern-admin-tables__body .restaurant-floor-screen .floor-empty {
  padding: 32px;
  text-align: center;
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-14);
}

/* ── Table cards (square + circle + status colors) ───────────────────────── */

.scale-modern-table-select-host .restaurant-floor-screen .table-card,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  padding: 8px;
  border: 1.5px solid color-mix(in srgb, var(--scale-border) 90%, transparent);
  border-radius: 12px;
  background: var(--scale-panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  /* Absolute so the inline left/top coordinates place the card in the floor-layer's
     coordinate space (shared with the merge container box). With position:relative those
     coordinates were ignored, so cards and the box never lined up. */
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  color: var(--scale-text);
  font-family: var(--scale-font-sans);
}

.scale-modern-table-select-host .restaurant-floor-screen .table-shape-circle,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-shape-circle {
  border-radius: 50%;
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card-available,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card-available {
  border-color: color-mix(in srgb, var(--scale-success) 40%, var(--scale-border));
  background: var(--scale-panel);
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card-occupied,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card-occupied {
  border-color: color-mix(in srgb, var(--scale-danger) 32%, var(--scale-panel));
  background: color-mix(in srgb, var(--scale-danger) 7%, var(--scale-panel));
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card-reserved,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card-reserved {
  border-color: color-mix(in srgb, var(--scale-info) 32%, var(--scale-panel));
  background: color-mix(in srgb, var(--scale-info) 7%, var(--scale-panel));
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card.selected,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card.selected {
  outline: 2px solid var(--scale-primary);
  outline-offset: 2px;
}

/* Status pulse dot in the top-right corner of every card. */
.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-status-pulse,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-status-pulse {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--scale-success);
  animation: none;
}

.scale-modern-table-select-host .restaurant-floor-screen .table-shape-circle .table-status-pulse,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-shape-circle .table-status-pulse {
  top: 15px;
  right: 15px;
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card-occupied .table-status-pulse,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card-occupied .table-status-pulse {
  background: var(--scale-danger);
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card-reserved .table-status-pulse,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card-reserved .table-status-pulse {
  background: var(--scale-info);
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-main-number,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-main-number {
  font-size: var(--scale-fs-22);
  font-weight: 700;
  color: var(--scale-text);
  line-height: 1;
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-status-label,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-status-label {
  font-size: var(--scale-fs-9);
  font-weight: 600;
  color: var(--scale-success);
  line-height: 1;
  margin-top: 3px;
  text-transform: capitalize;
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card-occupied .table-status-label,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card-occupied .table-status-label {
  color: var(--scale-danger);
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card-reserved .table-status-label,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card-reserved .table-status-label {
  color: var(--scale-info);
}

/* The section-name gets in the way of the number/label stack in the tight tile; hide it. */
.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-section-name,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-section-name,
.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-order-number,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-order-number {
  display: none;
}

/* The metrics row (guests / running time / items) is pinned INSIDE the bottom of the card rather
   than sitting after the surface in the flex column. In the column it was pushed past the card's
   88px content box — the surface alone asks for ~100px of height (min-height:86px plus its 7px
   borders, from RestaurantFloorScreen.razor's own style block) — and the card's overflow:hidden
   then trimmed the row off the bottom.

   Positioning it takes it out of the flow entirely, so it costs the surface no height and the
   tile keeps exactly the face it had before. */
.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-floor-metrics,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-floor-metrics {
  bottom: 4px;
  z-index: 2;
  display: flex;
  gap: 5px;
  margin-top: 0;
  flex-wrap: nowrap;
  justify-content: center;
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-metric,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-metric {
  background: var(--scale-panel-alt);
  border-radius: 9px;
  padding: 2px 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--scale-fs-9);
  color: var(--scale-text-mute);
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-metric i.material-icons,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-metric i.material-icons {
  font-size: var(--scale-fs-11);
}

.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-metric strong,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-metric strong {
  font-weight: 500;
  font-size: var(--scale-fs-9);
}

/* Chairs and drag grip aren't in the new tile spec; keep them out of the flow. */
.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-chair,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-chair,
.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-drag-grip,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-drag-grip {
  display: none;
}

/* Dashed "Merged · N seats" container behind each merged group of tables. The bounding box
   is computed in C# (MergeGroupBoxes) from the primary/child table positions plus 12px pad;
   the label pill floats at top-left. Pointer-events off so tables above still receive clicks.
   Also hide the SVG connector lines the classic UI drew — the dashed box replaces them. */
.scale-modern-table-select-host .restaurant-floor-screen .table-merge-group,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-merge-group {
  position: absolute;
  border: 1.5px dashed var(--scale-primary);
  background: color-mix(in srgb, var(--scale-primary) 4%, transparent);
  border-radius: 14px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0;
}

.scale-modern-table-select-host .restaurant-floor-screen .table-merge-group__label,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-merge-group__label {
  position: absolute;
  top: -9px;
  left: 12px;
  background: var(--scale-primary);
  color: var(--scale-text-on-primary);
  font-size: var(--scale-fs-9);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9px;
  white-space: nowrap;
  line-height: 1.4;
}

/* SVG merge connectors + per-card badges are redundant now that the dashed box shows the
   grouping. Hide them in the modern hosts (classic UI still shows the SVG lines). */
.scale-modern-table-select-host .restaurant-floor-screen .table-card .table-merge-badge,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card .table-merge-badge {
  display: none;
}

/* Connector between merged tables. The SVG (and its C# endpoint maths in GetMergeVisualLinks)
   already existed but was hidden here, leaving only the dashed group box. Endpoints are tile
   centres derived from GetRenderedTableWidth/Height, which match the inline width/height the card
   sets — so the line lands centre-to-centre.

   Drawn in primary rather than the legacy indigo, and it renders BEFORE the cards in markup, so
   at equal z-index the tiles paint over it and the line reads as passing underneath them. */
.scale-modern-table-select-host .restaurant-floor-screen .table-merge-links,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-merge-links {
  display: block;
}

.scale-modern-table-select-host .restaurant-floor-screen .table-merge-link,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-merge-link {
  stroke: var(--scale-primary);
  stroke-width: 3;
  stroke-dasharray: 6 6;
}

.scale-modern-table-select-host .restaurant-floor-screen .table-merge-link-shadow,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-merge-link-shadow {
  stroke: color-mix(in srgb, var(--scale-primary) 14%, transparent);
  stroke-width: 10;
}

/* The dashed group box already carries a "Merged · N seats" label, so the per-link "Combined"
   pill would be a second label for the same thing. */
.scale-modern-table-select-host .restaurant-floor-screen .table-merge-link-label,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-merge-link-label,
.scale-modern-table-select-host .restaurant-floor-screen .table-merge-link-label-bg,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-merge-link-label-bg {
  display: none;
}

/* Tables above the group container. */
.scale-modern-table-select-host .restaurant-floor-screen .table-card,
.scale-modern-admin-tables__body .restaurant-floor-screen .table-card {
  z-index: 1;
}

/* ===== Admin table management (full-screen overlay from the drawer) ===== */
.scale-modern-admin-tables {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  background: var(--scale-bg);
}

.scale-modern-admin-tables__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--scale-surface, var(--scale-panel));
  border-bottom: 1px solid var(--scale-border);
}

.scale-modern-admin-tables__bar strong {
  font-size: var(--scale-fs-17);
  color: var(--scale-text);
}

.scale-modern-admin-tables__bar button {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--scale-text);
}

.scale-modern-admin-tables__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.scale-modern-admin-tables__body .restaurant-floor-screen {
  height: 100%;
  max-height: 100%;
}


/* Drag-to-reorder for menu categories, sub-categories and products */
.scale-modern-pos-category[data-reorder-id],
.scale-modern-pos-subcategory[data-reorder-id],
.scale-modern-pos-product[data-reorder-id] {
  touch-action: manipulation;
}

.scale-modern-pos-category.is-dragging,
.scale-modern-pos-subcategory.is-dragging,
.scale-modern-pos-product.is-dragging {
  opacity: 0.55;
  outline: 2px dashed var(--scale-primary);
  outline-offset: 2px;
  z-index: 2;
}

/* While a drag is active, suppress text selection and use a grabbing cursor */
body.modern-reorder-active {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

body.modern-reorder-active .scale-modern-pos-product,
body.modern-reorder-active .scale-modern-pos-category,
body.modern-reorder-active .scale-modern-pos-subcategory {
  will-change: transform;
}