* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Theme variables */
:root {
  --bg-primary: #e3e0db; /* Subtle warm gray background - hint of cream */
  --bg-secondary: #f8f7f5; /* Very light warm white for cards - barely warm */
  --bg-tertiary: #efece8; /* Light warm gray */
  --text-primary: #2d2d2d; /* Soft black (not pure black) - WCAG AA */
  --text-secondary: #5a5a5a; /* Medium gray - WCAG AA */
  --text-tertiary: #8a8a8a; /* Lighter gray - WCAG AA */
  --border-color: #d3cfc8; /* Subtle warm gray border */
  --border-color-dark: #b8b4ad; /* Darker warm gray */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg:
    0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.06);
  --column-even: #d8d4cd; /* Subtle warm gray stripe */
  --column-odd: #e8e5df; /* Light warm gray stripe */
  --hover-bg: #e7f3ff;
  --active-bg: #cfe2ff;
  --missed-round-opacity: 0.5;
  --table-btn-default: #6c757d;
  --break-green: #198754;
  --break-yellow: #ffcc00;
  --break-orange: #ff9500;
  --break-red: #ff3b30;

  /* Typography scale */
  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 14px;
  --font-md: 15px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-2xl: 20px;
  --font-3xl: 24px;
  --font-4xl: 26px;

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
}

[data-theme="dark"] {
  --bg-primary: #0a0a0a; /* Deep black background */
  --bg-secondary: #141414; /* Subtle dark gray for cards/modals */
  --bg-tertiary: #1c1c1c; /* Slightly lighter gray for tertiary elements */
  --text-primary: #e8e6e3; /* Soft white (warm, not pure white) */
  --text-secondary: #b8b6b3; /* Medium warm gray */
  --text-tertiary: #9a9895; /* Lighter warm gray - improved contrast */
  --border-color: #333333; /* Dark gray border */
  --border-color-dark: #4a4a4a; /* Lighter gray border */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:
    0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --column-even: #0f0f0f; /* Very dark column stripe */
  --column-odd: #141414; /* Slightly lighter column */
  --hover-bg: #1a3a5a;
  --active-bg: #2d4a6a;
  --missed-round-opacity: 0.45;
  --table-btn-default: #8a8a8a;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  background: var(--bg-primary);
  padding-top: 44px;
  padding-bottom: 20px;
  overflow-x: hidden;
  color: var(--text-primary);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Status bar at top */
.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 4px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 140;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.status-stats-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 8px;
}

.status-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1;
}

.status-stat-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-tertiary);
  line-height: 1;
  opacity: 0.8;
}

/* Auto-reset countdown box hover/active states */
#autoResetTimer > div:first-child:active {
  background: rgba(220, 53, 69, 0.2);
  transform: scale(0.98);
}

.status-icon-btn {
  padding: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--text-primary);
  border-radius: 6px;
}

[data-theme="dark"] .status-icon-btn {
  color: var(--text-primary);
}

.status-icon-btn:active {
  transform: scale(0.95);
}

.status-icon-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Header section - just the table */
.header-section {
  position: sticky;
  top: 36px;
  background: var(--bg-primary);
  z-index: 100;
  padding: 8px 20px 0 20px;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.header-section > * {
  pointer-events: auto;
  background: var(--bg-primary);
}

.rotation-board {
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-secondary);
  position: relative;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  margin-bottom: 8px;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
  min-height: 120px;
}

/* Main content area with table picker and toolbar side by side */
.content-layout {
  display: flex;
  gap: 16px;
  padding: 12px 20px 20px 20px;
  align-items: flex-start;
  background: var(--bg-primary);
  transition: background-color 0.3s ease;
}

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 220px;
  flex-shrink: 0;
}

.toolbar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.toolbar-section-label {
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  opacity: 0.7;
  transition: color 0.3s ease;
}

/* ===== BUTTON STANDARDS =====
 * PRIMARY (.btn): Black bg + white text (light) / White bg + black text (dark)
 * SECONDARY (.btn-secondary, .btn-ghost): Transparent bg + border
 * DANGER (.btn-danger): Solid red #dc3545 on both themes
 * SKIP (.btn-skip): EXCEPTION - Solid orange #ff9500 on both themes
 * ============================ */

.btn {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: #1a1a1a;
  color: white;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .btn {
  background: #f5f5f5;
  color: #1a1a1a;
}

.btn:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

[data-theme="dark"] .btn:focus-visible {
  outline: 3px solid #f5f5f5;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.toolbar-section .btn {
  flex-direction: row;
}

.toolbar-section .btn.btn-secondary {
  flex-direction: column;
  min-height: 64px;
}

.toolbar-section .btn.toolbar-btn-inline {
  flex-direction: row;
  min-height: 48px;
}

.btn svg {
  flex-shrink: 0;
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  filter: brightness(0.92);
}

[data-theme="dark"] .btn:active {
  filter: brightness(0.85);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: none;
}

[data-theme="dark"] .btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.btn-secondary:active {
  filter: brightness(0.95);
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .btn-secondary:active {
  background: rgba(255, 255, 255, 0.08);
}

.btn-danger {
  background: #dc3545;
  color: white;
}

[data-theme="dark"] .btn-danger {
  background: #dc3545;
  color: white;
}

.btn-danger:active {
  filter: brightness(0.88);
}

/* Skip button - EXCEPTION: Solid orange on both themes */
.btn-skip {
  background: #ff9500;
  color: white;
  border: none;
  box-shadow: 0 1px 3px rgba(255, 149, 0, 0.3);
}

[data-theme="dark"] .btn-skip {
  background: #ff9500;
  color: white;
}

.btn-skip:active {
  filter: brightness(0.88);
  background: #e68600;
}

.rotation-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 18px;
  position: relative;
  table-layout: auto;
  width: auto;
  min-width: 100%;
}

.rotation-table tbody tr {
  height: 56px;
}

.rotation-table th,
.rotation-table td {
  border: none;
  border-bottom: 1px solid var(--border-color);
  padding: 8px;
  text-align: center;
  width: 11.11vw;
  min-width: 11.11vw;
  max-width: 11.11vw;
  vertical-align: middle;
  height: 56px;
  background: transparent;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
  box-sizing: border-box;
}

.rotation-table th:first-child,
.rotation-table td:first-child {
  width: 11.11vw;
  min-width: 11.11vw;
  max-width: 11.11vw;
  border-right: 1px solid var(--border-color);
}

.rotation-table th {
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  text-transform: uppercase;
  line-height: 1;
  height: 28px;
}

/* Rows are 56px: a 46px square table (or server badge), 4px above and below, and the 1px row line */
.rotation-table td {
  padding: 4px 8px;
}

.rotation-table thead tr {
  border-bottom: 2px solid var(--border-color);
}

.round-time {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 1px;
  min-height: 10px;
  letter-spacing: 0.1px;
  opacity: 0.7;
  text-transform: none;
  line-height: 1;
}

/* Freeze first column (server names) - match rotation-board background */
.rotation-table th:first-child,
.rotation-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 20;
  background: var(--bg-secondary) !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.rotation-table th:first-child {
  background: var(--bg-secondary) !important;
  z-index: 30;
  color: var(--text-secondary);
  font-weight: 600;
}

.rotation-table tbody tr.paused-server-row {
  position: relative;
}

.rotation-table tbody tr.paused-server-row td:not(:first-child) {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.03) !important;
}

[data-theme="dark"]
  .rotation-table
  tbody
  tr.paused-server-row
  td:not(:first-child) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.rotation-table tbody tr.paused-server-row td:first-child {
  opacity: 1;
}

.rotation-table tbody tr.paused-server-row td:first-child * {
  opacity: 1 !important;
}

/* Zebra striping for columns - exclude first column (server names) */
.rotation-table td:not(:first-child).column-even {
  background: var(--column-even);
}

.rotation-table td:not(:first-child).column-odd {
  background: var(--column-odd);
}

/* Don't apply hover to empty cells or paused server cells */

.server-cell {
  font-weight: 700;
  font-size: 20px;
  min-width: 140px;
}

.pause-btn {
  min-height: 32px;
  min-width: 32px;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: 500;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  line-height: 1;
}

.pause-btn svg {
  display: block;
}

.pause-btn:active {
  background: var(--text-primary);
  color: var(--bg-secondary);
}

.pause-btn:active svg {
  fill: var(--bg-secondary);
}

.pause-btn.paused {
  color: white;
  background: #198754;
  border-color: #198754;
  opacity: 1 !important;
}

.pause-btn.paused svg {
  fill: white;
}

.pause-btn.paused:active {
  background: #157347;
  border-color: #157347;
}

.pause-btn.paused:active svg {
  fill: white;
}

.assignment-cell {
  font-size: 16px;
  color: var(--text-primary);
  word-wrap: break-word;
  max-width: 160px;
  padding: 6px;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.3s ease;
  box-sizing: border-box;
}

.assignment-cell.empty-current-round:active {
  background: var(--active-bg) !important;
}

/* Regular table cursor - BLUE */
.assignment-cell.next-assignment-cell {
  background: rgba(13, 110, 253, 0.08) !important;
  box-shadow: inset 0 0 0 2px #0d6efd;
  position: relative;
}

[data-theme="dark"] .assignment-cell.next-assignment-cell {
  background: rgba(59, 130, 246, 0.12) !important;
  box-shadow: inset 0 0 0 2px #3b82f6;
}

.assignment-cell.next-assignment-cell::after {
  content: "NEXT";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 700;
  color: #0d6efd;
  opacity: 0.6;
  letter-spacing: 1px;
}

[data-theme="dark"] .assignment-cell.next-assignment-cell::after {
  color: #3b82f6;
}

.assignment-cell.skipped-turn {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 149, 0, 0.08) 10px,
    rgba(255, 149, 0, 0.08) 20px
  ) !important;
  position: relative;
}

.assignment-cell.skipped-turn::after {
  content: "SKIPPED";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  color: #ff9500;
  opacity: 0.6;
  letter-spacing: 0.5px;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.server-badge-next {
  position: relative;
}

@keyframes cellPop {
  0% {
    box-shadow: inset 0 0 0 0 rgba(34, 197, 94, 0);
    transform: scale(1);
  }
  20% {
    box-shadow: inset 0 0 40px 10px rgba(34, 197, 94, 0.4);
    transform: scale(1.08);
  }
  80% {
    box-shadow: inset 0 0 0 0 rgba(34, 197, 94, 0);
    transform: scale(1);
  }
  100% {
    box-shadow: none;
    transform: scale(1);
  }
}

@keyframes cellPopGold {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 193, 7, 0);
    transform: scale(1);
  }
  20% {
    box-shadow: inset 0 0 40px 10px rgba(255, 193, 7, 0.5);
    transform: scale(1.08);
  }
  80% {
    box-shadow: inset 0 0 0 0 rgba(255, 193, 7, 0);
    transform: scale(1);
  }
  100% {
    box-shadow: none;
    transform: scale(1);
  }
}

.rotation-table tbody tr td.just-assigned-cell {
  animation: cellPop 2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
  z-index: 5;
}

.rotation-table tbody tr td.just-edited-cell {
  animation: cellPopGold 2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
  z-index: 5;
}

.missed-round {
  position: relative;
  cursor: not-allowed;
  opacity: var(--missed-round-opacity);
}

.missed-round::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--text-secondary);
}

.table-assignment {
  /* A 46px square: table number over the cover count */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 46px;
  height: 46px;
  background: #0d6efd;
  color: white;
  padding: 0;
  border-radius: 8px;
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  position: relative;
  box-sizing: border-box;
}

/* Large party indicator (7+ people) - golden border */
.table-assignment.large-party {
  border: 3px solid #daa520;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 0 1px #daa520 inset;
}

[data-theme="dark"] .table-assignment.large-party {
  border: 3px solid #ffd700;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 1px #ffd700 inset;
}

.table-assignment .edit-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ffc107;
  color: #000;
  font-size: 8px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.2px;
}

.table-assignment .edit-badge.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  padding: 0;
  font-size: 0;
}

.table-number {
  font-size: 20px;
  display: block;
  line-height: 1;
}

.party-size {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 0;
  font-weight: 600;
  line-height: 1;
}

.party-size svg {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}

/* Table picker */
.table-picker-section {
  flex: 1;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.flip-floor-plan-btn {
  padding: 6px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--text-primary);
  overflow: hidden;
}

[data-theme="dark"] .flip-floor-plan-btn {
  border: 1px solid #ffffff;
  color: #ffffff;
}

.flip-floor-plan-btn:active {
  transform: scale(0.95);
}

.flip-floor-plan-btn.active {
  border-color: #000000;
  border-width: 2px;
  color: #000000;
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .flip-floor-plan-btn.active {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* Flip arrows flying animation */
.flip-arrow-top,
.flip-arrow-bottom {
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease;
  transform-origin: center;
}

/* Inactive state - normal arrows pointing right/left */
.flip-arrow-top {
  transform: translateX(0) scaleX(1);
  opacity: 1;
}

.flip-arrow-bottom {
  transform: translateX(0) scaleX(1);
  opacity: 1;
}

/* Active state - arrows flew out and returned flipped */
.flip-floor-plan-btn.active .flip-arrow-top {
  transform: translateX(0) scaleX(-1);
  opacity: 1;
}

.flip-floor-plan-btn.active .flip-arrow-bottom {
  transform: translateX(0) scaleX(-1);
  opacity: 1;
}

/* Animation keyframes for smooth exit and entrance */
@keyframes flyOutRight {
  0% {
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
  50% {
    transform: translateX(30px) scaleX(1);
    opacity: 0;
  }
  50.01% {
    transform: translateX(30px) scaleX(-1);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleX(-1);
    opacity: 1;
  }
}

@keyframes flyOutLeft {
  0% {
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-30px) scaleX(1);
    opacity: 0;
  }
  50.01% {
    transform: translateX(-30px) scaleX(-1);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleX(-1);
    opacity: 1;
  }
}

@keyframes flyBackRight {
  0% {
    transform: translateX(0) scaleX(-1);
    opacity: 1;
  }
  50% {
    transform: translateX(30px) scaleX(-1);
    opacity: 0;
  }
  50.01% {
    transform: translateX(30px) scaleX(1);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
}

@keyframes flyBackLeft {
  0% {
    transform: translateX(0) scaleX(-1);
    opacity: 1;
  }
  50% {
    transform: translateX(-30px) scaleX(-1);
    opacity: 0;
  }
  50.01% {
    transform: translateX(-30px) scaleX(1);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
}

/* Theme icon button - animated sun/moon transition */
.theme-icon-btn {
  position: relative;
  width: 32px;
  height: 32px;
}

/* Slide Panel Styles */
.slide-panel-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.slide-panel-overlay.open {
  display: block;
}

.slide-panel {
  position: fixed;
  top: 0;
  right: -650px;
  width: 650px;
  max-width: 90vw;
  height: 100%;
  background: var(--bg-primary);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  overflow: hidden;
}

.slide-panel-overlay.open .slide-panel {
  right: 0;
}

.slide-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.slide-panel-title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.slide-panel-close {
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-panel-close:active {
  transform: scale(0.95);
  background: var(--bg-tertiary);
}

.slide-panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Custom Settings Dropdown */

/* Settings Cards */
.settings-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

.settings-card-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

/* Number Input Group - matches Default Party Size button height */
#breakDurationContainer {
  opacity: 1;
  transition: opacity 0.2s ease;
}

#breakDurationContainer.disabled {
  opacity: 0.4;
  pointer-events: none;
}

#breakDurationContainer.disabled .number-btn {
  cursor: not-allowed;
}

.number-input-group {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: fit-content;
  height: 40px;
}

.number-display {
  min-width: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border: 1.5px solid var(--border-color);
  border-radius: 8px 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  height: 100%;
}

.number-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.number-btn-minus {
  border-left: none;
  border-radius: 0;
}

.number-btn-plus {
  border-left: none;
  border-radius: 0 8px 8px 0;
}

.number-btn:active {
  transform: scale(0.95);
}

.number-btn svg {
  display: block;
}

/* Settings Tabs - Touch-optimized pill design */
.settings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--bg-primary);
  border-radius: 12px;
}

.settings-tab {
  flex: 1;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-tab.active {
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.settings-tab-content {
  display: none;
}

.settings-tab-content.active {
  display: block;
}

/* Setting Option Buttons */

/* Slider Styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  outline: none;
  transition: background 0.2s ease;
}

/* Slider thumb - WebKit (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #1a1a1a;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(0.95);
}

/* Slider thumb - Firefox */
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #1a1a1a;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-moz-range-thumb:active {
  transform: scale(0.95);
}

/* Dark theme slider thumb */
[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
  background: #f5f5f5;
}

[data-theme="dark"] input[type="range"]::-moz-range-thumb {
  background: #f5f5f5;
}

/* Dark theme slider */
[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
  background: #f5f5f5;
}

[data-theme="dark"] input[type="range"]::-moz-range-thumb {
  background: #f5f5f5;
}

/* Toggle Switch Styling */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border: 1px solid #ccc;
  transition: 0.3s;
  border-radius: 24px;
  box-sizing: border-box;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: #595959;
  border-color: #595959;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateY(-50%) translateX(16px);
}

/* Dark theme toggle */
[data-theme="dark"] .toggle-slider {
  background: transparent;
  border-color: #707070;
}

[data-theme="dark"] .toggle-switch input:checked + .toggle-slider {
  background: #606060;
  border-color: #606060;
}

[data-theme="dark"] .toggle-slider:before {
  background: #e5e5e5;
}

[data-theme="dark"] .toggle-switch input:checked + .toggle-slider:before {
  background: #e5e5e5;
}

/* Large Primary Button */

/* Ghost Button */
.btn-ghost {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  box-shadow: none;
}

[data-theme="dark"] .btn-ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.btn-ghost:active {
  transform: scale(0.98);
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .btn-ghost:active {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-ghost:active {
  background: rgba(255, 255, 255, 0.08);
}

/* Danger Outline Button */

/* Passcode Boxes */
.passcode-box {
  width: 56px;
  height: 64px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.passcode-box.filled {
  border-color: var(--text-primary);
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .passcode-box.filled {
  background: rgba(255, 255, 255, 0.08);
}

.passcode-box.active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .passcode-box.active {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .passcode-box.filled {
  border-color: #ffffff;
  background: rgba(123, 142, 227, 0.12);
}

[data-theme="dark"] .passcode-box.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(123, 142, 227, 0.2);
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}

.theme-sun-icon,
.theme-moon-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* Sun icon (light theme active) */
.theme-sun-icon {
  stroke: #ffb800;
  opacity: 1;
}

.theme-moon-icon {
  stroke: #ffffff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8) rotate(90deg);
}

/* Sun rays animation */
.sun-rays {
  transform-origin: center;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.sun-circle {
  transition: r 0.3s ease;
}

/* Dark theme (moon visible) */
[data-theme="dark"] .theme-sun-icon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8) rotate(-90deg);
}

[data-theme="dark"] .theme-sun-icon .sun-rays {
  opacity: 0;
  transform: scale(0.5);
}

[data-theme="dark"] .theme-moon-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

/* Click animation */
.theme-icon-btn:active .theme-sun-icon {
  transform: translate(-50%, -50%) scale(0.9);
}

.theme-icon-btn:active .theme-moon-icon {
  transform: translate(-50%, -50%) scale(0.9) rotate(0deg);
}

.table-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
  padding-top: 24px;
}

.table-grid-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.table-grid-labels {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
}

.table-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  opacity: 0.7;
  text-align: center;
}

.section-divider {
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--border-color) 10%,
    var(--border-color) 90%,
    transparent
  );
  flex-shrink: 0;
  align-self: stretch;
}

.label-divider {
  width: 1px;
  flex-shrink: 0;
}

/* Floor plan areas (floorplan.js): every table sits at its saved position on
   a canvas drawn in floor px, scaled down as one piece on narrow screens */
.floor-area {
  position: relative;
  flex: 0 0 auto;
}

.floor-area-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.floor-area-canvas .table-btn {
  position: absolute;
}

.floor-area-label {
  flex: 0 0 auto;
}

/* Thin divider across an area, e.g. between rows of tables */
.floor-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--border-color) 20%,
    var(--border-color) 80%,
    transparent
  );
}

/* A line placed in the editor: its own position and length */
.floor-line.floor-line-placed {
  right: auto;
  background: var(--border-color);
}

.floor-line.floor-line-vertical {
  width: 1px;
}

.floor-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: var(--font-base);
  color: var(--text-secondary);
}

.table-btn {
  /* Base unit: 33px so that 2 units = 66px and 3 units = 88px (with gaps) */
  --base-unit: 33px;
  min-height: var(--base-unit);
  min-width: var(--base-unit);
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 700;
  background: transparent;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .table-btn {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.table-btn:active {
  filter: brightness(0.85);
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.table-btn:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 2px;
}

[data-theme="dark"] .table-btn:focus-visible {
  outline: 3px solid #ffffff;
}

.table-btn-number {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.seat-indicator {
  position: absolute;
  width: 4px;
  height: 20px;
  background: var(--table-btn-default);
  opacity: 0.7;
  transition: background-color 0.3s ease;
}

.seat-indicator.occupied {
  background: var(--indicator-color);
  opacity: 1;
}

/* Rounded corners on seat backs (outer edge) */
.seat-indicator.left {
  border-radius: 2px 0 0 2px;
}

.seat-indicator.right {
  border-radius: 0 2px 2px 0;
}

.seat-indicator.top {
  border-radius: 2px 2px 0 0;
}

.seat-indicator.bottom {
  border-radius: 0 0 2px 2px;
}

/* Left side seats - distribute evenly */
.seat-indicator.left {
  left: -8px;
}

.seat-indicator.left.count-1 {
  top: 50%;
  transform: translateY(-50%);
}

.seat-indicator.left.count-2.seat-1 {
  top: 30%;
  transform: translateY(-50%);
}
.seat-indicator.left.count-2.seat-2 {
  top: 70%;
  transform: translateY(-50%);
}

.seat-indicator.left.count-3.seat-1 {
  top: 20%;
  transform: translateY(-50%);
}
.seat-indicator.left.count-3.seat-2 {
  top: 50%;
  transform: translateY(-50%);
}
.seat-indicator.left.count-3.seat-3 {
  top: 80%;
  transform: translateY(-50%);
}

/* Right side seats - distribute evenly */
.seat-indicator.right {
  right: -8px;
}

.seat-indicator.right.count-1 {
  top: 50%;
  transform: translateY(-50%);
}

.seat-indicator.right.count-2.seat-1 {
  top: 30%;
  transform: translateY(-50%);
}
.seat-indicator.right.count-2.seat-2 {
  top: 70%;
  transform: translateY(-50%);
}

.seat-indicator.right.count-3.seat-1 {
  top: 20%;
  transform: translateY(-50%);
}
.seat-indicator.right.count-3.seat-2 {
  top: 50%;
  transform: translateY(-50%);
}
.seat-indicator.right.count-3.seat-3 {
  top: 80%;
  transform: translateY(-50%);
}

/* Top side seats - distribute evenly (horizontal) */
.seat-indicator.top {
  top: -8px;
  width: 20px;
  height: 4px;
}

.seat-indicator.top.count-1 {
  left: 50%;
  transform: translateX(-50%);
}

.seat-indicator.top.count-2.seat-1 {
  left: 30%;
  transform: translateX(-50%);
}
.seat-indicator.top.count-2.seat-2 {
  left: 70%;
  transform: translateX(-50%);
}

/* Bottom side seats - distribute evenly (horizontal) */
.seat-indicator.bottom {
  bottom: -8px;
  width: 20px;
  height: 4px;
}

.seat-indicator.bottom.count-1 {
  left: 50%;
  transform: translateX(-50%);
}

.seat-indicator.bottom.count-2.seat-1 {
  left: 30%;
  transform: translateX(-50%);
}
.seat-indicator.bottom.count-2.seat-2 {
  left: 70%;
  transform: translateX(-50%);
}

/* Dynamic sizing based on width and height units */
.table-btn[data-width="1"] {
  width: calc(var(--base-unit) * 1 + 7px);
}
.table-btn[data-width="2"] {
  width: calc(var(--base-unit) * 2);
}
.table-btn[data-width="3"] {
  width: calc(var(--base-unit) * 3 - 11px);
}

.table-btn[data-height="1"] {
  height: calc(var(--base-unit) * 1 + 7px);
}
.table-btn[data-height="2"] {
  height: calc(var(--base-unit) * 2);
}
.table-btn[data-height="3"] {
  height: calc(var(--base-unit) * 3 - 11px);
}
.table-btn[data-width="4"] {
  width: calc(var(--base-unit) * 4 - 22px);
}
.table-btn[data-height="4"] {
  height: calc(var(--base-unit) * 4 - 22px);
}

/* Round table */
.table-btn.is-round {
  border-radius: 50%;
}

/* 3 and 4 chairs along the top / bottom (sideways 6- and 8-tops) */
.seat-indicator.top.count-3.seat-1,
.seat-indicator.bottom.count-3.seat-1 {
  left: 20%;
  transform: translateX(-50%);
}
.seat-indicator.top.count-3.seat-2,
.seat-indicator.bottom.count-3.seat-2 {
  left: 50%;
  transform: translateX(-50%);
}
.seat-indicator.top.count-3.seat-3,
.seat-indicator.bottom.count-3.seat-3 {
  left: 80%;
  transform: translateX(-50%);
}
.seat-indicator.top.count-4.seat-1,
.seat-indicator.bottom.count-4.seat-1 {
  left: 15%;
  transform: translateX(-50%);
}
.seat-indicator.top.count-4.seat-2,
.seat-indicator.bottom.count-4.seat-2 {
  left: 38%;
  transform: translateX(-50%);
}
.seat-indicator.top.count-4.seat-3,
.seat-indicator.bottom.count-4.seat-3 {
  left: 62%;
  transform: translateX(-50%);
}
.seat-indicator.top.count-4.seat-4,
.seat-indicator.bottom.count-4.seat-4 {
  left: 85%;
  transform: translateX(-50%);
}
/* 4 chairs along the left / right (upright 8-tops) */
.seat-indicator.left.count-4.seat-1,
.seat-indicator.right.count-4.seat-1 {
  top: 15%;
  transform: translateY(-50%);
}
.seat-indicator.left.count-4.seat-2,
.seat-indicator.right.count-4.seat-2 {
  top: 38%;
  transform: translateY(-50%);
}
.seat-indicator.left.count-4.seat-3,
.seat-indicator.right.count-4.seat-3 {
  top: 62%;
  transform: translateY(-50%);
}
.seat-indicator.left.count-4.seat-4,
.seat-indicator.right.count-4.seat-4 {
  top: 85%;
  transform: translateY(-50%);
}

.table-grid.animate-layout-change.layout-reversed .table-btn {
  animation: slideFromRight 0.4s ease-out;
}

.table-grid.animate-layout-change:not(.layout-reversed) .table-btn {
  animation: slideFromLeft 0.4s ease-out;
}

@keyframes slideFromRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.table-btn:active {
  filter: brightness(0.85);
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Floorplan Section Highlighting - Current Server Active */
/* Light theme - single highlight color */
.table-btn.section-highlighted {
  background: rgba(59, 130, 246, 0.12);
  border-color: #3b82f6;
  color: #1e3a8a;
}

.table-btn.section-highlighted {
  background: rgba(59, 130, 246, 0.12);
  border-color: #3b82f6;
  color: #1e3a8a;
}

/* Dark theme - bright highlight color */
[data-theme="dark"] .table-btn.section-highlighted {
  background: rgba(59, 130, 246, 0.2);
  border-color: #60a5fa;
  color: #93c5fd;
}

/* Section Picker in Edit Modal */
#sectionPicker {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.section-btn {
  flex: 0 1 auto;
  min-width: 70px;
  width: 70px;
  padding: 10px 12px;
  border: 3px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.section-btn:hover:not(.active) {
  border-color: var(--text-primary);
  background: var(--bg-primary);
}

.section-btn.active {
  background: #1a1a1a;
  border-color: #000000;
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .section-btn.active {
  background: #f5f5f5;
  border-color: #ffffff;
  color: #000000;
}

.section-btn:active {
  transform: scale(0.96);
}

#sectionAlert {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--warning-color, #f59e0b);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  min-height: 0;
  visibility: hidden;
}

#sectionAlert.active {
  display: block;
  visibility: visible;
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000 !important;
  align-items: flex-start;
  justify-content: center;
  animation: fadeIn 0.2s ease;
  padding-top: 10vh;
  overflow-y: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-overlay.active {
  display: flex;
}

/* Sign-in (cloud mode): covers the app until the iPad is signed in */
.signin-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-primary);
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.signin-screen.active {
  display: flex;
}

.signin-card {
  max-width: 400px;
}

.signin-note {
  margin: -8px 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.signin-error {
  display: none;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: #dc3545;
}

/* "Offline" pill in the status bar (cloud mode) */
.cloud-status {
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Cloud mode: the gear opens a small manager menu (settings live in Admin) */
.manager-stats-card,
.manager-menu-note {
  display: none;
}

.is-manager-menu .settings-tabs,
.is-manager-menu .export-card {
  display: none;
}

.is-manager-menu .manager-stats-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.is-manager-menu .manager-stats-card > div {
  flex: 1;
  min-width: 0;
}

.is-manager-menu .manager-stats-card .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 160px;
}

.is-manager-menu .manager-menu-note {
  display: block;
  margin: 16px 4px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

.is-manager-menu #dataTabContent.active {
  display: flex;
  flex-direction: column;
}

.is-manager-menu #dataTabContent .manager-stats-card {
  order: -1;
}

.is-manager-menu #dataTabContent > div:first-child {
  margin-bottom: 12px !important;
}

/* Clear All sits alone in the manager menu: full width */
.is-manager-menu #dataTabContent > div:first-child {
  grid-template-columns: 1fr !important;
}

/* Settings > Data: who this iPad is signed in as */
.account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.account-card > div {
  flex: 1;
  min-width: 0;
}

.account-card .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 160px;
}

.modal {
  background: var(--bg-secondary);
  border-radius: 20px;
  padding: 28px;
  max-width: 420px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s ease;
  transition: background-color 0.3s ease;
  position: relative;
  z-index: 10000;
}

/* Landscape modal for edit assignment */
.modal-landscape {
  background: var(--bg-secondary);
  border-radius: 20px;
  padding: 28px;
  max-width: 720px;
  width: 95%;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s ease;
  transition: background-color 0.3s ease;
  position: relative;
  z-index: 10000;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-title {
  font-size: var(--font-4xl);
  font-weight: var(--font-bold);
  margin-bottom: 20px;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

.modal-content {
  margin-bottom: 24px;
}

.input-group {
  margin-bottom: 18px;
}

.input-group label {
  display: block;
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  margin-bottom: 8px;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.input-group input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  font-size: var(--font-xl);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  transition: all 0.2s ease;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.input-group input:focus {
  outline: none;
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .input-group input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.input-group textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  font-size: var(--font-xl);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  transition: all 0.2s ease;
  background: var(--bg-secondary);
  color: var(--text-primary);
  resize: vertical;
}

.input-group textarea:focus {
  outline: none;
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .input-group textarea:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.input-group textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.5;
}

.party-size-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.party-size-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Edit table selector - center the block, left-align buttons within */
#editTableSelector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  margin: 0 auto;
}

#editTableSelector .party-size-row {
  justify-content: flex-start;
}

.party-size-btn {
  min-width: 54px;
  min-height: 54px;
  font-size: 20px;
  font-weight: 700;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 3px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.party-size-btn.active {
  background: #1a1a1a;
  color: white;
  border-color: #000000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .party-size-btn.active {
  background: #f5f5f5;
  color: #000000;
  border-color: #ffffff;
}

.party-size-btn:active {
  transform: scale(0.96);
}

.party-size-btn:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 2px;
}

[data-theme="dark"] .party-size-btn:focus-visible {
  outline: 3px solid #ffffff;
}

.modal-actions {
  display: flex;
  gap: 12px;
}

.modal-actions .btn {
  flex: 1;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #198754;
  color: white;
  padding: 16px 28px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 10001; /* above open windows */
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s ease;
}

.toast.is-error {
  background: #dc3545;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Activity log */

/* Assignment count in modal */

/* Theme toggle */

/* Color picker */
.color-picker {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  gap: 10px;
  padding: 8px 0;
  justify-content: center;
}

.color-swatch {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  position: relative;
}

.color-swatch.active {
  border-color: var(--text-primary);
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px var(--bg-secondary),
    0 0 0 4px var(--text-primary);
}

/* Stats display */

.stat-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  min-width: 0;
  box-sizing: border-box;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #14b8a6;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 600;
}

.server-stats-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  table-layout: fixed;
  box-sizing: border-box;
}

.server-stats-table th {
  background: var(--bg-tertiary);
  padding: 6px 8px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid var(--border-color);
}

.server-stats-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}

.server-stats-table tr:last-child td {
  border-bottom: none;
}

.time-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  margin-top: 12px;
}

.time-bar {
  flex: 1;
  background: #14b8a6;
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.time-bar-value {
  position: absolute;
  top: -20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

.time-bar-label {
  position: absolute;
  bottom: -20px;
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Status bar */
.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 140;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.status-icon-btn {
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  color: #9ca3af;
  opacity: 0.5;
}

[data-theme="dark"] .status-icon-btn {
  color: #6b7280;
}

.status-icon-btn:active {
  opacity: 1;
}

/* Empty state */
.empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  pointer-events: none;
  width: calc(100% - 24px);
  max-width: 400px;
  padding: 12px;
}

.empty-state-icon {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-state-icon svg {
  width: 48px;
  height: 48px;
  color: #0d6efd;
  opacity: 0.4;
}

[data-theme="dark"] .empty-state-icon svg {
  color: #4d9fff;
  opacity: 0.6;
}

.rotation-table-container {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  opacity: 0.8;
}

.empty-state-text {
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.7;
  line-height: 1.4;
}

.table-picker-section.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Host Break Item */
.host-break-item {
  background-color: var(--bg-secondary);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 4px solid var(--break-green);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08);
  transition:
    border-color 0.5s ease,
    opacity 0.3s ease,
    box-shadow 0.3s ease;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

[data-theme="dark"] .host-break-item {
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.3);
}

.host-break-info {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  min-width: 0;
  align-items: center;
}

.host-name-timer {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.host-name-timer strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.host-break-timer {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.host-break-timer.completed {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.host-break-start-time {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.host-break-start-time svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-secondary);
}

.host-break-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.break-action-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.break-action-btn:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

.break-action-btn svg {
  width: 14px;
  height: 14px;
  fill: var(--text-primary);
}

.break-action-btn.stop-btn {
  background-color: var(--break-red);
  border-color: var(--break-red);
}

.break-action-btn.stop-btn:active {
  filter: brightness(0.85);
}

.break-action-btn.stop-btn svg {
  fill: white;
}

.break-action-btn.resume-btn {
  background-color: #198754;
  border-color: #198754;
}

.break-action-btn.resume-btn:active {
  filter: brightness(0.85);
}

.break-action-btn.resume-btn svg {
  fill: white;
}

/* Completed Break Styles */
.host-break-item.completed {
  opacity: 0.6;
  background-color: transparent;
  border-left-color: var(--text-secondary);
}
.host-break-item.completed.stopped-late {
  border-left-color: var(--break-orange);
}

/* Overtime glowing alert */
@keyframes red-glow {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 59, 48, 0.8);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 59, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(255, 59, 48, 0);
  }
}
.host-break-item.overtime-alert {
  animation: red-glow 1.5s infinite;
  position: relative;
  z-index: 10;
}

/* Auto-reset timer urgent alert (under 1 minute) */
#autoResetTimer.urgent-alert > div:first-child {
  animation: red-glow 1.5s infinite;
}

/* Late break stats */

/* ===========================================================================
   Insights page (insights.html) — remote dashboard
   Scoped to classes only used on that page, so none of this touches the
   main kiosk app. Built responsive-first (phone/tablet/laptop) since this
   page is meant to be checked from anywhere, unlike the iPad-fixed kiosk.
   =========================================================================== */

body.insights-page {
  padding-top: 0;
  padding-bottom: 40px;
}

/* --- Passcode gate screen --- */
.insights-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.insights-gate-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.insights-gate-title {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: 4px;
}

.insights-gate-subtitle {
  font-size: var(--font-base);
  color: var(--text-secondary);
}

/* Sign-in form inside the gate card */
.insights-gate-card .insights-gate-subtitle {
  margin-bottom: 24px;
}

.insights-gate-card .input-group {
  text-align: left;
}

.insights-signin-btn {
  width: 100%;
  justify-content: center;
}

.insights-gate-card .signin-error {
  text-align: left;
}

.insights-location-name:not(:empty)::before {
  content: "·";
  margin: 0 8px;
  color: var(--text-tertiary);
}

.insights-location-name {
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

/* Locations (admin): list + add form */
.insights-locations {
  margin-top: 28px;
}

.insights-locations-table td {
  vertical-align: middle;
}

.insights-rot-table.insights-locations-table th,
.insights-rot-table.insights-locations-table td {
  text-align: left;
  padding-left: 0;
  padding-right: 12px;
}

.insights-rot-table.insights-locations-table th:last-child,
.insights-rot-table.insights-locations-table td:last-child {
  text-align: right;
  padding-right: 0;
}

.insights-loc-name {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.insights-loc-you {
  margin-left: 6px;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-tertiary);
}

.insights-loc-actions {
  text-align: right;
  white-space: nowrap;
}

.insights-loc-delete {
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--font-sm);
}

.insights-locations-add {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 16px;
  align-items: end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.insights-locations-add .btn {
  margin-bottom: 18px;
  min-height: 50px;
  justify-content: center;
}

.input-group select {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  font-size: var(--font-lg);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-sizing: border-box;
}

.insights-locations-message {
  min-height: 20px;
  font-size: var(--font-base);
  line-height: 1.5;
  color: var(--text-secondary);
}

.insights-locations-message.is-error {
  color: #dc3545;
}

/* --- Dashboard shell --- */
.insights-dashboard {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 40px 16px;
  box-sizing: border-box;
}

.insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  /* Pinned to the top while scrolling; bleeds to the page padding so nothing
     shows through at the sides */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-primary);
  margin: 0 -16px 20px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

.insights-header-title {
  font-size: var(--font-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.insights-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.insights-fresh-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}
.insights-fresh-dot.is-fresh { background: var(--break-green); }
.insights-fresh-dot.is-aging { background: var(--break-orange); }
.insights-fresh-dot.is-old { background: var(--break-red); }

.insights-summary {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

/* Reuses the kiosk's .status-stat-card look (number over small caps label),
   a touch larger and left-aligned to the page edge */
.insights-summary .status-stat-card {
  padding: 2px 0;
  align-items: center;
  text-align: center;
  gap: 3px;
  min-width: 56px;
}

.insights-summary .status-stat-value {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.insights-summary .status-stat-label {
  font-size: 10px;
}

/* Pull-to-refresh indicator */
.insights-pull {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 40;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -36px);
  pointer-events: none;
}
.insights-pull.is-pulling { display: flex; }
.insights-pull svg { transition: transform 0.15s ease; }
.insights-pull.is-ready svg { transform: rotate(180deg); }

/* Stop the browser's own pull-to-refresh (it would reload to the passcode) */
html:has(body.insights-page),
body.insights-page {
  overscroll-behavior-y: none;
}

.insights-updated-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.insights-updated-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.insights-kiosk-age {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.insights-last-updated {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.insights-refresh-btn.spinning svg {
  animation: insights-spin 0.8s linear infinite;
}

@keyframes insights-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Notices: one standard component for every page-level message
   (loading, not set up, no data, out of date, connection/server error).
   Severity sets the colour: info = neutral, warning = orange, error = red. --- */
.insights-notice {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.insights-notice--warning {
  border-color: rgba(255, 149, 0, 0.4);
  background: rgba(255, 149, 0, 0.1);
}

.insights-notice--error {
  border-color: rgba(220, 53, 69, 0.35);
  background: rgba(220, 53, 69, 0.08);
}

.insights-notice-icon {
  flex-shrink: 0;
  display: flex;
  margin-top: 1px;
  color: var(--text-secondary);
}

.insights-notice--warning .insights-notice-icon {
  color: #ff9500;
}

.insights-notice--error .insights-notice-icon {
  color: #dc3545;
}

.insights-notice-icon.spinning svg {
  animation: insights-spin 0.8s linear infinite;
}

.insights-notice-body {
  flex: 1 1 200px;
  min-width: 0;
}

.insights-notice-title {
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.insights-notice-text {
  font-size: var(--font-sm);
  line-height: 1.5;
}

.insights-notice-detail {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-tertiary);
  word-break: break-word;
}

/* Retry button: the app's ghost button, sized to its label instead of
   stretching full width */
.insights-notice-action {
  width: auto;
  min-height: 40px;
  padding: 8px 16px;
  flex-shrink: 0;
}

/* --- Per-section "nothing here yet" box, shared by every chart/table --- */
.insights-empty {
  flex: 1 1 100%;
  box-sizing: border-box;
  padding: 20px 16px;
  margin-bottom: 28px;
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  text-align: center;
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* --- Stat cards grid (reuses .stat-card / .stat-value / .stat-label) --- */
.insights-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.insights-section-title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

/* --- Waitlist accordion --- */
.insights-acc {
  margin-bottom: 20px;
}

.insights-acc-head {
  width: 100%;
  min-height: 44px;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.insights-acc-head .insights-section-title {
  margin: 0;
}

.insights-acc-summary {
  margin-left: auto;
  font-size: var(--font-base);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.insights-acc-chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.insights-acc.is-open .insights-acc-chevron {
  transform: rotate(180deg);
}

.insights-acc-head:focus-visible {
  outline: 3px solid var(--text-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Server performance table: scrolls horizontally instead of squeezing
   columns unreadably small on narrow screens --- */
.insights-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 28px;
  border-radius: 10px;
}

.insights-table-wrap .server-stats-table {
  table-layout: auto;
  min-width: 420px;
}

/* --- Insights text list --- */

/* --- Covers Served donut chart + legend --- */
.insights-covers-chart-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 28px;
}

.insights-covers-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insights-covers-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* --- Top Tables chips --- */
.insights-top-tables {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* --- Floor plan (schematic) --- */
.insights-floorplan {
  margin-bottom: 28px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.insights-floorplan svg {
  display: block;
  width: 100%;
  height: auto;
}

.insights-floorplan .fp-table {
  fill: var(--bg-tertiary);
  stroke: var(--border-color);
  stroke-width: 0.05;
}

.insights-floorplan .fp-table.fp-occupied {
  stroke: none;
}

.insights-floorplan .fp-num {
  font-size: 0.5px;
  font-weight: 600;
  fill: var(--text-tertiary);
  text-anchor: middle;
  pointer-events: none;
}

.insights-floorplan .fp-num.fp-num-on {
  fill: #ffffff;
  font-weight: 700;
}

.insights-floorplan .fp-line {
  stroke: var(--border-color);
  stroke-width: 0.04;
}

.insights-floorplan .fp-divider {
  stroke: var(--border-color);
  stroke-width: 0.05;
}

.insights-floorplan .fp-label {
  font-size: 0.42px;
  font-weight: 600;
  letter-spacing: 0.08px;
  fill: var(--text-tertiary);
  text-anchor: middle;
}

.insights-fp-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 12px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.insights-fp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.insights-fp-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.insights-fp-swatch-open {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
}

.insights-floorplan .fp-cov {
  display: none;
  font-size: 0.3px;
  font-weight: 600;
  fill: rgba(255, 255, 255, 0.85);
  text-anchor: middle;
  pointer-events: none;
}

/* Desktop / tablet: smaller plan, with covers under the table number */
@media (min-width: 768px) {
  .insights-floorplan {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .insights-floorplan .fp-num.fp-num-on {
    font-size: 0.42px;
    transform: translateY(-0.17px);
  }

  .insights-floorplan .fp-cov {
    display: block;
    transform: translateY(0.2px);
  }
}

/* --- On Break cards --- */
.insights-breaks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.insights-break {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--break-green);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.insights-break--green { border-left-color: var(--break-green); }
.insights-break--yellow { border-left-color: var(--break-yellow); }
.insights-break--orange { border-left-color: var(--break-orange); }
.insights-break--red { border-left-color: var(--break-red); }

.insights-break-name {
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text-primary);
}

.insights-break-meta {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.insights-break-time {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
}

.insights-break-clock {
  font-size: var(--font-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.insights-break-status {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.insights-break.is-over .insights-break-clock {
  color: var(--break-red);
}

/* Tap tooltip on the floor plan */
.insights-floorplan {
  position: relative;
}

.insights-floorplan .fp-group {
  cursor: pointer;
}

.insights-fp-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--text-primary);
  color: var(--bg-primary);
  font-size: var(--font-xs);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.insights-fp-tip strong {
  font-size: var(--font-sm);
}

/* --- Rotation table (plain text, no colors) --- */
.insights-rot-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 28px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.insights-rot-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

.insights-rot-table th,
.insights-rot-table td {
  min-width: 64px;
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.insights-rot-table tbody tr:last-child th,
.insights-rot-table tbody tr:last-child td {
  border-bottom: none;
}

.insights-rot-table thead th {
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.insights-rot-table thead th span {
  display: block;
  margin-top: 1px;
  font-weight: 400;
}

.insights-rot-table thead th.is-current {
  font-weight: 700;
  color: var(--text-primary);
}

.insights-rot-table td strong {
  display: block;
  font-size: var(--font-md);
  font-weight: 700;
  line-height: 1.2;
}

.insights-rot-covers {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  line-height: 1.2;
}

/* Server column stays put while the rounds scroll */
.insights-rot-table .insights-rot-server {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 56px;
  text-align: left;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-primary);
}

.insights-rot-skip,
.insights-rot-dash {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.insights-rot-next {
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--text-primary);
}

.insights-rot-table tr.insights-row-paused > * {
  opacity: 0.5;
}

/* Server Performance uses the same table with tighter columns */
.insights-rot-table.is-compact th,
.insights-rot-table.is-compact td {
  min-width: 0;
  padding: 10px 8px;
}

.insights-rot-table.is-compact thead th {
  white-space: normal;
  line-height: 1.2;
}

.insights-rot-table.is-compact td strong {
  display: inline;
  font-size: inherit;
}

.insights-paused-text {
  display: block;
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-tertiary);
}

/* --- History --- */
.insights-history-compare {
  margin: -12px 0 16px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.insights-history-compare strong {
  color: var(--text-primary);
}

.insights-rot-table .insights-history-date {
  white-space: nowrap;
}

.insights-history-more {
  display: block;
  margin: -12px auto 28px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  text-decoration: underline;
  cursor: pointer;
}

/* --- Narrow phones: tighten up spacing a bit further --- */
@media (max-width: 420px) {
  .insights-dashboard {
    padding: 16px 12px 32px 12px;
  }

  .insights-header {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .insights-header-title {
    font-size: var(--font-2xl);
  }

  .insights-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* An odd last card spans the full row instead of sitting alone */
  .insights-stat-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Waitlist (kiosk) — a small add-on card in the right-hand column.
   Lives on this device only and is cleared with the 2 AM reset.
   ========================================================================== */
.waitlist-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.waitlist-count {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.waitlist-list {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.waitlist-list:empty {
  display: none;
}

.waitlist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  cursor: pointer;
}

.waitlist-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.waitlist-name {
  min-width: 0;
  font-size: 17px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waitlist-covers {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 20px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.waitlist-covers svg {
  width: 15px;
  height: 15px;
}

.waitlist-timer {
  font-size: 14px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.waitlist-timer.warn {
  color: #8a4b00;
  font-weight: 650;
}

.waitlist-timer.late {
  color: #9b1c1c;
  font-weight: var(--font-bold);
}

[data-theme="dark"] .waitlist-timer.warn {
  color: #ffb340;
}

[data-theme="dark"] .waitlist-timer.late {
  color: #ff7a70;
}

.waitlist-seat-btn {
  position: relative;
  color: #fff;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background: #198754; /* same green as the toast */
  cursor: pointer;
  transition: transform 0.15s ease;
}

.waitlist-seat-btn::before {
  /* invisible padding: the tap area stays 48px */
  content: "";
  position: absolute;
  inset: -4px;
}

.waitlist-seat-btn:active {
  background: #146c43;
  transform: scale(0.94);
}

.waitlist-seat-btn:focus-visible,
.waitlist-undo-btn:focus-visible {
  outline: 3px solid var(--text-primary);
  outline-offset: 2px;
}

.waitlist-seated-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 6px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--border-color);
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.waitlist-seated-header span:last-child {
  font-size: var(--font-sm);
  font-weight: var(--font-normal);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.waitlist-seated-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-base);
  color: var(--text-secondary);
}

/* Waitlist glide: the party moving between Waiting and Seated slides over
   the rows it passes, so it needs the card's own background */
.waitlist-gliding {
  position: relative;
  z-index: 1;
  background: var(--bg-secondary);
}

.waitlist-seated-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.waitlist-seated-name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waitlist-seated-covers {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: var(--font-semibold);
}

.waitlist-seated-covers svg {
  width: 12px;
  height: 12px;
}

.waitlist-seated-waited {
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
}

.waitlist-undo-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin-right: -4px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

/* Add to Waitlist window */
.waitlist-fields {
  display: flex;
  gap: 10px;
}

.waitlist-field-name {
  flex: 0 0 150px;
  min-width: 0;
}

.waitlist-field-phone {
  flex: 1 1 0;
  min-width: 0;
}

.waitlist-optional {
  font-weight: var(--font-normal);
}

.waitlist-needs {
  display: flex;
  gap: 10px;
  margin: 2px 0 18px;
}

.waitlist-need-btn {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 3px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.waitlist-need-btn.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .waitlist-need-btn.active {
  background: #f5f5f5;
  color: #000;
  border-color: #fff;
}

.waitlist-need-btn:active {
  transform: scale(0.96);
}

.waitlist-need-btn:focus-visible {
  outline: 3px solid var(--text-primary);
  outline-offset: 2px;
}

/* Icons shown on a waiting row and in the details window */
.waitlist-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.waitlist-needs-strip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
}

.waitlist-need {
  display: inline-flex;
}

.waitlist-info-needs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 16px;
  color: var(--text-primary);
}

.waitlist-info-needs .waitlist-need {
  align-items: center;
  gap: 8px;
}

.waitlist-need-label {
  font-size: var(--font-lg, 17px);
  font-weight: var(--font-semibold);
}

.waitlist-remove-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#waitlistNameInput.is-invalid {
  border-color: #dc3545;
}

#waitlistNameInput.is-invalid::placeholder {
  color: #dc3545;
  opacity: 1;
}

/* Party details window: name, two big figures, one tap-to-call row */
#waitlistInfoTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 18px;
}

.waitlist-info-figures {
  display: flex;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.waitlist-info-figure {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 44px;
  font-weight: var(--font-bold);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.waitlist-info-figure + .waitlist-info-figure {
  border-left: 1px solid var(--border-color);
}

.waitlist-info-figure svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.waitlist-info-time svg {
  color: var(--text-secondary);
}

.waitlist-info-time.warn,
.waitlist-info-time.warn svg {
  color: #8a4b00;
}

.waitlist-info-time.late,
.waitlist-info-time.late svg {
  color: #9b1c1c;
}

[data-theme="dark"] .waitlist-info-time.warn,
[data-theme="dark"] .waitlist-info-time.warn svg {
  color: #ffb340;
}

[data-theme="dark"] .waitlist-info-time.late,
[data-theme="dark"] .waitlist-info-time.late svg {
  color: #ff7a70;
}

.waitlist-info-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin-top: 16px;
  padding: 0 16px;
  border: 1px solid var(--border-color-dark);
  border-radius: 12px;
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.waitlist-info-phone svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.waitlist-info-phone span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.waitlist-info-phone:active {
  background: var(--bg-tertiary, rgba(128, 128, 128, 0.15));
}

.waitlist-info-phone.is-empty {
  border-style: dashed;
  border-color: var(--border-color);
  font-weight: var(--font-normal);
  color: var(--text-secondary);
}

/* Insights: waitlist */
.insights-rot-table th.insights-wait-name,
.insights-rot-table td.insights-wait-name {
  text-align: left;
  padding-left: 12px;
}

.insights-rot-table td.insights-wait-name {
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insights-rot-table td.insights-wait-time {
  font-variant-numeric: tabular-nums;
}

.insights-rot-table td.insights-wait-time.is-warn {
  color: #8a4b00;
  font-weight: 650;
}

.insights-rot-table td.insights-wait-time.is-late {
  color: #9b1c1c;
  font-weight: 700;
}

[data-theme="dark"] .insights-rot-table td.insights-wait-time.is-warn {
  color: #ffb340;
}

[data-theme="dark"] .insights-rot-table td.insights-wait-time.is-late {
  color: #ff7a70;
}

.insights-wait-note {
  margin: 10px 2px 18px;
  font-size: var(--font-base);
  color: var(--text-secondary);
}

/* ==========================================================================
   Admin (admin.html): left menu + pages. Phones: the menu folds into a
   button in a top bar and opens as a drawer.
   ========================================================================== */
.admin-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

.admin-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 12px 16px;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
}

.admin-brand {
  padding: 0 12px 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.admin-brand-title {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.admin-brand-location {
  margin-top: 2px;
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.admin-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 15px;
  font-weight: var(--font-semibold);
  text-align: left;
  cursor: pointer;
}

.admin-nav-item[hidden] {
  display: none;
}

.admin-nav-item:active,
.admin-nav-item.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.admin-nav-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-nav-foot .admin-signout {
  flex: 1;
}

.admin-topbar {
  display: none;
}

/* Phones: dims the page behind the open menu; a tap closes the menu */
.admin-backdrop {
  display: none;
  position: fixed;
  inset: 57px 0 0 0;
  z-index: 35;
  background: rgba(0, 0, 0, 0.35);
}

.admin-main {
  min-width: 0;
}

.admin-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 28px 48px;
  box-sizing: border-box;
}

.admin-section[hidden] {
  display: none;
}

.admin-section.insights-dashboard {
  padding-top: 8px;
}

.admin-title {
  margin: 0 0 6px;
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.admin-lead {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.admin-group {
  margin-top: 28px;
}

.admin-group-title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.admin-row.is-off {
  opacity: 0.45;
}

.admin-row-text {
  flex: 1;
  min-width: 0;
}

.admin-row-label {
  font-size: 15px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.admin-row-help {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-tertiary);
}

.admin-row-help.is-warning {
  color: #d97706;
  font-weight: 500;
}

.admin-row-value {
  font-size: 15px;
  color: var(--text-primary);
  text-align: right;
  overflow-wrap: anywhere;
}

.admin-row .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 140px;
  justify-content: center;
}

.admin-stepper {
  flex: 0 0 auto;
}

.admin-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.admin-actions .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 160px;
  justify-content: center;
}

.admin-actions .btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.admin-pin {
  margin-top: 40px;
}

.admin-pin-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 16px;
  align-items: end;
  margin-top: 16px;
}

.admin-pin-form .btn {
  margin-bottom: 18px;
  min-height: 50px;
  justify-content: center;
}

.admin-message {
  min-height: 20px;
  font-size: var(--font-base);
  color: var(--text-secondary);
}

.admin-message.is-error {
  color: #dc3545;
}

.admin-layout-note {
  margin-top: 16px;
}

.admin-modal-text {
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.admin-page .insights-locations {
  margin-top: 0;
}

/* Phones and narrow windows: top bar + drawer */
@media (max-width: 820px) {
  .admin-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
  }

  .admin-topbar-title {
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
  }

  .admin-nav {
    position: fixed;
    top: 57px;
    left: 0;
    bottom: 0;
    z-index: 40;
    width: min(280px, 82vw);
    height: auto;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }

  .admin-shell.menu-open .admin-nav {
    transform: none;
  }

  .admin-shell.menu-open .admin-backdrop {
    display: block;
  }

  .admin-section {
    padding: 20px 16px 40px;
  }

  .admin-row {
    flex-wrap: wrap;
  }

  .admin-section.insights-dashboard .insights-header {
    top: 57px;
  }
}

/* Desktop: the menu's background runs the full height of a long page */
@media (min-width: 821px) {
  .admin-shell {
    background: linear-gradient(to right, var(--bg-secondary) 231px, var(--border-color) 231px, var(--border-color) 232px, transparent 232px);
  }
}

body.insights-page.admin-page {
  padding-bottom: 0;
}

/* ==========================================================================
   Admin > Table Layout: view + editor (layout-editor.js)
   ========================================================================== */
.admin-section-wide {
  max-width: 1600px;
}

.admin-modal-actions-3 {
  flex-wrap: wrap;
}

.admin-modal-actions-3 .btn {
  flex: 1 1 120px;
}

/* Kiosk: Turns / Sections switch on the floor plan card */
.mode-switch-wrap {
  position: absolute;
  top: 12px;
  right: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.mode-switch {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

[data-theme="dark"] .mode-switch {
  border-color: #ffffff;
}

.mode-switch button {
  min-height: 34px;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mode-switch button + button {
  border-left: 1px solid var(--border-color);
}

.mode-switch button.active {
  background: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .mode-switch button.active {
  background: #f5f5f5;
  color: #000000;
}

.mode-switch.no-sections button[data-mode="sections"] {
  opacity: 0.45;
}

/* Edit Server: the "None" choice reads quieter */
.section-btn.section-btn-none:not(.active) {
  color: var(--text-tertiary);
}

.section-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.section-picker .section-btn {
  width: auto;
  min-width: 70px;
}

/* ===================== Admin > Table Layout editor ===================== */
.le-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.le-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.le-title-row .admin-title {
  margin: 0;
}

.le-head-text .admin-lead {
  margin: 6px 0 0;
}

.le-head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.le-head-actions .btn {
  width: auto;
  min-width: 110px;
  justify-content: center;
}

.le-head-actions .le-icon-btn {
  min-width: 44px;
}

.le-unsaved {
  color: #d97706;
  font-weight: 600;
}

.le-mode button {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 14px;
}

/* One card: toolbar on top, the floor below */
.le-board {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.le-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  min-height: 64px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  box-sizing: border-box;
}

.le-tools,
.le-context {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.le-context {
  gap: 8px;
}

.le-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.le-tool:hover {
  background: var(--bg-tertiary);
}

.le-tool:active {
  border-color: var(--border-color);
}

.le-tool-line {
  cursor: pointer;
}

/* The table drawn small inside its button */
.le-tool-demo {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.72);
  pointer-events: none;
}

.le-tool-sep {
  width: 1px;
  height: 28px;
  margin: 0 6px;
  background: var(--border-color);
}

.le-ctx-title {
  font-size: 14px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-right: 4px;
}

.le-field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.le-field-inline > span {
  font-size: 14px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.le-context input,
.le-context select,
.le-add-area input {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 15px;
  box-sizing: border-box;
}

.le-context input[type="number"] {
  width: 76px;
}

.le-context #leSectionName {
  width: 180px;
}

.le-toolbar .btn,
.le-head-actions .btn {
  min-height: 40px;
  padding: 8px 14px;
  gap: 6px;
  flex-direction: row;
  align-items: center;
}

.le-toolbar .btn {
  width: auto;
}

.le-icon-btn {
  width: 40px !important;
  min-width: 40px;
  padding: 0 !important;
  justify-content: center;
}

.le-toolbar .btn:disabled,
.le-head-actions .btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.le-add-area {
  display: flex;
  gap: 8px;
}

.le-add-area .btn {
  width: auto;
}

/* Section chips */
.le-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.le-chip.active {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.le-chip-add {
  gap: 4px;
  color: var(--text-tertiary);
  border-style: dashed;
}

.le-tab-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

/* The floor */
.le-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 58px 20px 72px;
  box-sizing: border-box;
  overflow: hidden;
}

.le-canvas {
  position: relative;
  margin: 0 auto;
  flex: none;
}

.le-empty {
  padding: 32px 16px;
  margin: 0;
}

.le-inner {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.le-area {
  position: absolute;
  top: 0;
  outline: 1px dashed var(--border-color);
  background-image: radial-gradient(circle, var(--border-color) 1px, transparent 1.3px);
  background-size: 20px 20px;
}

.le-area.is-active {
  outline: 1px solid var(--text-tertiary);
}

.le-gap {
  position: absolute;
  top: 0;
  cursor: ew-resize;
  touch-action: none;
}

.le-gap-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--border-color);
}

.le-gap:hover .le-gap-mark,
.le-gap.is-dragging .le-gap-mark {
  width: 3px;
  margin-left: -1px;
  background: var(--text-tertiary);
}

/* Area names above the floor */
.le-labels {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 44px;
}

.le-area-label {
  position: absolute;
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
}

.le-area-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.le-area-name:hover {
  background: var(--bg-tertiary);
}

.le-area-label input {
  width: 150px;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--text-tertiary);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
}

.le-area-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.le-area-delete:hover {
  color: #dc3545;
  border-color: #dc3545;
}

.le-area-delete.is-confirm {
  background: #dc3545;
  border-color: #dc3545;
  color: #ffffff;
}

/* Tables */
.le-inner .le-table {
  position: absolute;
  z-index: 2; /* above divider lines, so a line never blocks a tap on a table */
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.le-inner .le-table.is-selected {
  outline: 3px solid var(--text-primary);
  outline-offset: 5px;
}

.le-inner .le-table.is-dragging {
  z-index: 4;
  opacity: 0.85;
  cursor: grabbing;
}

.le-inner .le-table.is-marked {
  outline: 2px dashed var(--text-secondary);
  outline-offset: 5px;
}

.le-inner .le-table.le-in-other {
  opacity: 0.35;
}

.le-table.is-invalid,
.le-ghost.is-invalid {
  outline: 3px solid #dc3545 !important;
  outline-offset: 5px;
}

/* Divider lines: a 12 px hit area around a 1 px line */
.le-line {
  position: absolute;
  z-index: 1;
  height: 12px;
  cursor: move;
  touch-action: none;
}

.le-line.is-vertical {
  width: 12px;
  height: auto;
}

.le-line-mark {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 1px;
  background: var(--border-color);
}

.le-line.is-vertical .le-line-mark {
  top: 0;
  bottom: 0;
  left: 6px;
  right: auto;
  width: 1px;
  height: auto;
}

.le-line:hover .le-line-mark {
  background: var(--text-tertiary);
}

.le-line.is-selected .le-line-mark,
.le-line.is-marked .le-line-mark {
  height: 2px;
  background: var(--text-primary);
}

.le-line.is-vertical.is-selected .le-line-mark,
.le-line.is-vertical.is-marked .le-line-mark {
  width: 2px;
  height: auto;
}

.le-line.is-invalid .le-line-mark {
  background: #dc3545;
}

.le-line-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-primary);
  border-radius: 50%;
  background: var(--bg-primary);
  box-sizing: border-box;
  touch-action: none;
}

.le-line:not(.is-vertical) .le-line-handle {
  top: -1px;
  cursor: ew-resize;
}

.le-line:not(.is-vertical) .le-line-handle-start {
  left: -7px;
}

.le-line:not(.is-vertical) .le-line-handle-end {
  right: -7px;
}

.le-line.is-vertical .le-line-handle {
  left: -1px;
  cursor: ns-resize;
}

.le-line.is-vertical .le-line-handle-start {
  top: -7px;
}

.le-line.is-vertical .le-line-handle-end {
  bottom: -7px;
}

/* Drag a box on an empty spot to select */
.le-marquee {
  position: absolute;
  z-index: 5;
  border: 1px solid var(--text-secondary);
  background: rgba(127, 127, 127, 0.12);
  pointer-events: none;
}

.le-ghost {
  position: fixed;
  z-index: 10002;
  pointer-events: none;
  opacity: 0.9;
  transform-origin: top left;
}

/* ==========================================================================
   Buttons: rounded, with a gentle shine and a pressed effect (Nov 2026)
   Main = solid (dark on light, light on dark); secondary / ghost = soft grey
   fill, no outline (fields and tables are the outlined things); danger and
   skip keep their colour. Placed last, with :root for weight, so it wins
   over the older per-theme colour rules.
   ========================================================================== */
:root {
  --btn-tonal: rgba(0, 0, 0, 0.07);
  --btn-tonal-press: rgba(0, 0, 0, 0.12);
  --floor-line: #b8b4ad;
}

:root[data-theme="dark"] {
  --btn-tonal: rgba(255, 255, 255, 0.12);
  --btn-tonal-press: rgba(255, 255, 255, 0.18);
  --floor-line: #5c5c5c;
}

:root .btn {
  border-radius: 999px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 3px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease, opacity 0.2s ease;
}

:root[data-theme="dark"] .btn {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.4);
}

:root .btn-secondary,
:root .btn-ghost,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-ghost {
  border: none;
  border-radius: 999px;
  background-color: var(--btn-tonal);
  color: var(--text-primary);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-ghost {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .btn-danger,
:root[data-theme="dark"] .btn-skip {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Pressed: it sinks a little and the shine turns into a soft inner shadow */
:root .btn:active,
:root[data-theme="dark"] .btn:active {
  transform: translateY(1px);
  filter: none;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.06));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

:root .btn-secondary:active,
:root .btn-ghost:active,
:root[data-theme="dark"] .btn-secondary:active,
:root[data-theme="dark"] .btn-ghost:active {
  background-color: var(--btn-tonal-press);
}

:root .btn:disabled {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :root .btn,
  :root .btn:active {
    transform: none;
    transition: none;
  }
}

/* Divider lines: 2 px, the same weight as the table outlines */
.floor-line,
.floor-line.floor-line-placed {
  height: 2px;
  background: var(--floor-line);
}

.floor-line.floor-line-vertical {
  width: 2px;
}

.le-line-mark,
.le-line:hover .le-line-mark {
  top: 5px;
  height: 2px;
  background: var(--floor-line);
}

.le-line.is-vertical .le-line-mark {
  left: 5px;
  width: 2px;
}

.le-line.is-selected .le-line-mark,
.le-line.is-marked .le-line-mark {
  height: 3px;
  background: var(--text-primary);
}

.le-line.is-vertical.is-selected .le-line-mark,
.le-line.is-vertical.is-marked .le-line-mark {
  width: 3px;
  height: auto;
}

.insights-floorplan .fp-line {
  stroke: var(--floor-line);
  stroke-width: 0.05;
}

/* The bin next to the selected area's name: a small round grey button */
:root .le-area-delete {
  border: none;
  border-radius: 999px;
  background-color: var(--btn-tonal);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

:root[data-theme="dark"] .le-area-delete {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.6);
}

:root .le-area-delete:active {
  transform: translateY(1px);
  background-color: var(--btn-tonal-press);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

:root .le-area-delete.is-confirm {
  background-color: #dc3545;
  color: #ffffff;
}

/* Option pickers (covers, seating needs): round, soft grey, no outline;
   the chosen one is solid (dark on light, light on dark) */
:root .party-size-btn,
:root .waitlist-need-btn {
  border: none;
  background-color: var(--btn-tonal);
  color: var(--text-primary);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}

:root[data-theme="dark"] .party-size-btn,
:root[data-theme="dark"] .waitlist-need-btn {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.6);
}

:root .party-size-btn {
  border-radius: 999px; /* a circle; a longer number becomes a pill */
  padding: 0 14px;
}

:root .waitlist-need-btn {
  border-radius: 18px;
}

:root .party-size-btn.active,
:root .waitlist-need-btn.active {
  background-color: #1a1a1a;
  color: #ffffff;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .party-size-btn.active,
:root[data-theme="dark"] .waitlist-need-btn.active {
  background-color: #f5f5f5;
  color: #000000;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.6);
}

:root .party-size-btn:active,
:root .waitlist-need-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* A waitlist field with a problem */
#waitlistNameInput.is-invalid,
#waitlistPhoneInput.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18);
}

/* Layout editor: the selection's actions float next to it */
.le-float {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--bg-secondary);
  box-shadow: 0 0 0 1px var(--border-color), 0 6px 18px rgba(0, 0, 0, 0.16);
  white-space: nowrap;
}

[data-theme="dark"] .le-float {
  box-shadow: 0 0 0 1px var(--border-color), 0 6px 18px rgba(0, 0, 0, 0.7);
}

.le-float .btn.le-icon-btn {
  width: 38px !important;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
}

.le-float select {
  min-height: 38px;
  padding: 4px 12px 4px 14px;
  border: none;
  border-radius: 999px;
  background-color: var(--btn-tonal);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.le-float-count {
  padding: 0 8px 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Typing a table's number on the table itself */
.le-num-edit {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 52px;
  height: 30px;
  margin: 0;
  transform: translate(-50%, -50%);
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  outline: 2px solid var(--text-primary);
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
}

/* Rectangles on the floor (bar, service station, pillar…): one soft grey
   look everywhere; never tappable on the iPad */
:root {
  --floor-block: #dcd8d1;
  --floor-block-edge: #c5c0b8;
}

:root[data-theme="dark"] {
  --floor-block: #262626;
  --floor-block-edge: #3a3a3a;
}

.floor-block {
  position: absolute;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--floor-block);
  box-shadow: inset 0 0 0 1px var(--floor-block-edge);
  overflow: hidden;
  pointer-events: none;
}

.floor-block-label,
.le-block-label {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insights-floorplan .fp-block {
  fill: var(--floor-block);
  stroke: var(--floor-block-edge);
  stroke-width: 0.03;
}

.insights-floorplan .fp-block-label {
  font-size: 0.3px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--text-secondary);
  text-transform: uppercase;
}

/* In the editor */
.le-block {
  position: absolute;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--floor-block);
  box-shadow: inset 0 0 0 1px var(--floor-block-edge);
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.le-block.is-selected {
  outline: 3px solid var(--text-primary);
  outline-offset: 3px;
}

.le-block.is-marked {
  outline: 2px dashed var(--text-secondary);
  outline-offset: 3px;
}

.le-block.is-dragging {
  z-index: 4;
  opacity: 0.85;
  cursor: grabbing;
}

.le-block.is-invalid {
  outline: 3px solid #dc3545 !important;
  outline-offset: 3px;
}

.le-block-handle {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-primary);
  border-radius: 50%;
  background: var(--bg-primary);
  box-sizing: border-box;
  touch-action: none;
}

.le-block-handle-n,
.le-block-handle-s {
  left: calc(50% - 7px);
  cursor: ns-resize;
}

.le-block-handle-e,
.le-block-handle-w {
  top: calc(50% - 7px);
  cursor: ew-resize;
}

.le-block-handle-n,
.le-block-handle-ne,
.le-block-handle-nw {
  top: -10px;
}

.le-block-handle-s,
.le-block-handle-se,
.le-block-handle-sw {
  bottom: -10px;
}

.le-block-handle-e,
.le-block-handle-ne,
.le-block-handle-se {
  right: -10px;
}

.le-block-handle-w,
.le-block-handle-nw,
.le-block-handle-sw {
  left: -10px;
}

.le-block-handle-ne,
.le-block-handle-sw {
  cursor: nesw-resize;
}

.le-block-handle-nw,
.le-block-handle-se {
  cursor: nwse-resize;
}

.le-num-edit.le-block-edit {
  width: calc(100% - 12px);
  max-width: 180px;
  min-width: 60px;
  font-size: 13px;
  text-transform: uppercase;
}

.le-tool-block-shape {
  display: block;
  width: 30px;
  height: 18px;
  border-radius: 4px;
  background: var(--floor-block);
  box-shadow: inset 0 0 0 1.5px var(--text-secondary);
}

.le-ghost.le-block {
  position: fixed;
}

/* ==========================================================================
   Table Layout page (Nov 2026 redesign): header, one card with the
   Elements bar, a Floor bar (+ Area) and the floor at iPad size
   ========================================================================== */
.admin-section[data-page="layout"] .le-head {
  align-items: center;
  margin-bottom: 20px;
}

.admin-section[data-page="layout"] .le-head-text .admin-lead {
  margin-top: 4px;
  color: var(--text-tertiary);
}

.le-board {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .le-board {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Elements bar */
.le-toolbar {
  gap: 12px 28px;
  min-height: 76px;
  padding: 14px 20px;
}

.le-toolbar-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 210px;
  max-width: 300px;
}

.le-toolbar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.le-toolbar-desc {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.le-toolbar .le-tools {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 4px;
}

.le-tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--btn-tonal);
}

.le-tool {
  height: 52px;
}

.le-tool:hover {
  background: var(--bg-secondary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.le-tool:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
  background: transparent;
}

.le-tool-sep {
  height: 36px;
  margin: 0 8px;
}

.le-board.is-sections .le-toolbar .le-tools {
  justify-content: flex-start;
}

/* Floor bar: what the floor is + Add area */
.le-floorbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 20px;
  box-sizing: border-box;
}

.le-floorbar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.le-floorbar-meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.le-floorbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.le-floorbar .le-add-area {
  align-items: center;
}

.le-canvas-wrap {
  padding-top: 52px;
}

.le-empty {
  padding: 48px 20px 56px;
  text-align: center;
}

.le-empty .admin-lead {
  margin: 0;
}

/* Area names above the floor: name, count, pencil, bin; or the name field + check */
.le-area-label {
  gap: 6px;
}

.le-area-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.le-area-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: var(--btn-tonal);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

[data-theme="dark"] .le-area-icon {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.le-area-icon:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.le-area-bin:hover {
  color: #dc3545;
}

.le-area-icon.le-area-save {
  background-color: #1a1a1a;
  color: #ffffff;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
}

[data-theme="dark"] .le-area-icon.le-area-save {
  background-color: #f5f5f5;
  color: #000000;
}

.le-area-label.is-renaming input {
  width: 170px;
  text-align: left;
}

.le-area-name.is-static {
  cursor: default;
}

.le-area-name.is-static:hover {
  background: transparent;
}

/* Not editing: the real floor, muted and read only */
.le-preview .le-canvas-wrap {
  min-height: 0;
  padding: 52px 20px 36px;
}

.le-preview .le-inner {
  opacity: 0.55;
  filter: grayscale(1);
  pointer-events: none;
}

.le-preview .le-labels {
  pointer-events: none;
}

.le-preview .le-area-name {
  color: var(--text-tertiary);
}

.le-preview .le-area.is-view {
  outline-color: var(--border-color);
}

/* Dragging the divider line from the Elements bar */
.le-line.le-ghost {
  position: fixed;
}

.le-floorbar .btn {
  width: auto;
  min-height: 40px;
  padding: 8px 16px;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.le-floorbar .btn.le-icon-btn {
  padding: 0;
}

.le-board .le-canvas-wrap {
  min-height: 380px;
  padding-top: 46px;
}

.le-board.le-preview .le-canvas-wrap {
  min-height: 0;
}

/* ==========================================================================
   Nov 2026: Table Layout = the editor itself (greyed before Edit), roomier
   spacing; General / Data / Account as calm cards with short descriptions
   ========================================================================== */
/* Before Edit: the same page, greyed out; only "Edit layout" is live */
.le-mode-preview {
  opacity: 0.45;
  pointer-events: none;
}

.le-board.le-preview {
  pointer-events: none;
}

.le-board.le-preview > * {
  filter: grayscale(1);
  opacity: 0.5;
}

.le-preview .le-inner {
  opacity: 1;
  filter: none;
}

/* Page rhythm */
.admin-section[data-page="layout"] .le-head {
  margin-bottom: 28px;
}

.admin-section[data-page="layout"] .le-head-text .admin-lead {
  margin-top: 8px;
  font-size: 15px;
}

/* Elements bar: a real heading and a readable how-to */
.le-board .le-toolbar {
  min-height: 96px;
  padding: 22px 28px;
  gap: 16px 40px;
}

.le-board .le-toolbar-text {
  gap: 6px;
  max-width: 340px;
}

.le-board .le-toolbar-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

.le-board .le-toolbar-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.le-board .le-tool-group {
  padding: 6px;
  gap: 6px;
}

/* + Area on its own row; area names clearly above their area */
.le-board .le-floorbar {
  min-height: 0;
  padding: 20px 28px 0;
}

.le-board .le-canvas-wrap {
  padding: 72px 28px 44px;
}

.le-board .le-labels {
  height: 56px;
}

.le-board .le-area-label {
  bottom: 16px;
  gap: 10px;
}

.le-board .le-area-name {
  font-size: 14px;
}

/* Area tools: one squared pair, in the Turns | Sections style */
.le-seg {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
}

[data-theme="dark"] .le-seg {
  border-color: #ffffff;
}

.le-seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.le-seg button + button {
  border-left: 1px solid var(--border-color);
}

[data-theme="dark"] .le-seg button + button {
  border-left-color: #ffffff;
}

.le-seg button:active {
  background: var(--btn-tonal);
}

.le-seg button.is-primary {
  background: #1a1a1a;
  color: #ffffff;
}

[data-theme="dark"] .le-seg button.is-primary {
  background: #f5f5f5;
  color: #000000;
}

.le-seg button.is-danger:hover {
  color: #dc3545;
}

/* Settings cards: title, short description, rows separated by space only */
.admin-section .admin-group {
  margin-top: 24px;
  padding: 22px 28px 16px;
  border-radius: 18px;
  background: var(--bg-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .admin-section .admin-group {
  box-shadow: 0 0 0 1px var(--border-color), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.admin-section .admin-group-title {
  padding: 0 0 4px;
  border-bottom: none;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
}

.admin-group-desc {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-tertiary);
}

.admin-section .admin-group .admin-row {
  min-height: 0;
  padding: 9px 0;
  gap: 24px;
  border-bottom: none;
}

.admin-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-section .admin-group .admin-row-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.admin-row-desc {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-tertiary);
}

.admin-section .admin-group .admin-row-value {
  color: var(--text-secondary);
}

.admin-section .admin-group .number-input-group {
  transform: scale(0.92);
  transform-origin: right center;
}

.admin-card-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 0 4px;
}

.admin-card-foot .btn {
  width: auto;
  min-width: 120px;
  flex-direction: row;
}

.admin-section .admin-pin {
  margin-top: 24px;
}

.admin-section .admin-pin .admin-pin-form {
  margin-top: 6px;
  padding: 8px 0 4px;
  align-items: end;
}

.admin-section .admin-pin .input-group {
  margin-bottom: 0;
}

.admin-section .admin-pin .input-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.admin-section .admin-pin .admin-pin-form .btn {
  margin-bottom: 0;
  min-height: 48px;
}

.admin-section .admin-pin .admin-message {
  min-height: 0;
  margin-top: 10px;
}

.admin-section .admin-pin .admin-message:empty {
  display: none;
}

@media (max-width: 820px) {
  .admin-section .admin-group {
    padding: 18px 18px 12px;
  }
}

.le-mode-preview button {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 14px;
}

/* Add to Waitlist: "Seating needs" title like "Covers", a short name under each icon */
.waitlist-needs-group .waitlist-needs {
  margin: 0;
}

:root .waitlist-need-btn {
  height: 72px;
  flex-direction: column;
  gap: 5px;
}

.waitlist-need-btn-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* ======================= Quick actions beside the board (Nov 2026) =======================
   Add Server, Skip, Undo: round icon-only buttons stacked to the right of the rotation
   board. The board stretches to the stack's height so there's never a strip under it.
   A button switched off in Admin is hidden and the others move up. */
:root .header-section {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
:root .header-section > .rotation-board {
  flex: 1 1 auto;
  min-width: 0;
}
:root .quick-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 0 8px;
}
:root .quick-actions .btn.quick-action-btn {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  flex-direction: row;
  flex: none;
}
:root .quick-actions .btn.quick-action-btn svg { margin: 0; width: 21px; height: 21px; }

/* Waitlist Seat button: a soft round green check (quiet until needed) */
:root .waitlist-seat-btn {
  border-radius: 50%;
  color: #198754;
  background: rgba(25, 135, 84, 0.13);
  box-shadow: none;
}
:root .waitlist-seat-btn:active { background: rgba(25, 135, 84, 0.24); }
:root[data-theme="dark"] .waitlist-seat-btn { color: #3ddc97; background: rgba(61, 220, 151, 0.16); }
:root[data-theme="dark"] .waitlist-seat-btn:active { background: rgba(61, 220, 151, 0.28); }

/* Waitlist: the first party (longest wait) stands out, the others are a little lighter */
:root .waitlist-row.is-first .waitlist-name { font-size: 19px; font-weight: 800; }
:root .waitlist-row:not(.is-first) .waitlist-row-main,
:root .waitlist-row:not(.is-first) .waitlist-covers { opacity: 0.6; }

/* Assign window: Seat row (Walk-in + the waitlist), one row that scrolls sideways.
   3 cards fit and the next one peeks in; a soft fade shows there's more. */
.seat-picks {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  margin: 0 -2px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px; /* first card snaps to the very start: no left fade */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.seat-picks::-webkit-scrollbar { display: none; }
.seat-picks.more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
.seat-picks.more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
}
.seat-picks.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.seat-pick {
  flex: 0 0 calc((100% - 16px) / 3.25);
  min-width: 0;
  min-height: 64px;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 4px;
  row-gap: 2px;
  padding: 9px 12px;
  border: none;
  border-radius: 14px;
  background: var(--btn-tonal, rgba(0, 0, 0, 0.06));
  color: var(--text-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.seat-pick-name {
  grid-column: 1 / 3;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat-pick-time { grid-row: 2; grid-column: 1; font-size: 13px; color: var(--text-tertiary); display: inline-flex; }
.seat-pick-covers { grid-row: 2; grid-column: 2; display: inline-flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 700; }
.seat-pick.is-selected { background: rgba(13, 110, 253, 0.08); box-shadow: inset 0 0 0 2px #0d6efd; }
:root[data-theme="dark"] .seat-pick.is-selected { background: rgba(59, 130, 246, 0.12); box-shadow: inset 0 0 0 2px #3b82f6; }
#seatPickGroup { min-width: 0; max-width: 100%; }

/* Waitlist row: a small round delete (bin) instead of the Seat check; it asks
   first. Seating is done from the Assign window. Tap area stays 44 px. */
.waitlist-delete-btn {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  color: #c0392b;
  background: rgba(220, 53, 69, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.waitlist-delete-btn::before { content: ""; position: absolute; inset: -6px 0 -6px -12px; }
.waitlist-delete-btn:active { background: rgba(220, 53, 69, 0.2); transform: scale(0.94); }
:root[data-theme="dark"] .waitlist-delete-btn { color: #ff6b6b; background: rgba(255, 107, 107, 0.14); }
:root[data-theme="dark"] .waitlist-delete-btn:active { background: rgba(255, 107, 107, 0.26); }
:root .waitlist-row:not(.is-first) .waitlist-delete-btn { opacity: 1; }

/* A party that joined from their own phone (QR code) */
.waitlist-guest-icon { flex-shrink: 0; color: var(--text-tertiary); }

/* Admin > General > Waitlist: a small heading over the request switches, and the guest QR card */
.admin-section .admin-subtitle {
  margin: 14px 0 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.guest-qr { display: flex; align-items: center; gap: 24px; padding: 6px 0 4px; flex-wrap: wrap; }
.guest-qr-code { width: 168px; height: 168px; flex: none; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--border-color); }
.guest-qr-code svg { width: 100%; height: 100%; display: block; }
.guest-qr-side { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 14px; }
.guest-qr-link { font-size: 14px; color: var(--text-secondary); word-break: break-all; }
.guest-qr-actions { display: flex; gap: 10px; }
.guest-qr-actions .btn { width: auto; flex-direction: row; }

/* Waitlist card: compact request rows (no description), QR inside the card */
.admin-section .admin-group .admin-row.admin-row-compact { padding: 6px 0; }
.admin-section .admin-subtitle.is-off { opacity: 0.45; }
.admin-section .guest-qr { margin: 4px 0 10px; padding: 16px; border-radius: 14px; background: var(--bg-primary); }
.guest-qr-actions { align-items: center; }
.guest-qr-new { align-self: flex-start; padding: 6px 0; border: none; background: none; color: var(--text-secondary); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Small buttons (Nov 2026): a second, lighter size for occasional tasks
   (print, copy, open). Same pill + shine as .btn, just shorter and quieter.
   Use .btn-sm with .btn / .btn-secondary; add .btn-icon for an icon-only circle. */
:root .btn.btn-sm {
  width: auto;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  padding: 0 16px;
  gap: 7px;
  flex-direction: row;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
:root .btn.btn-sm svg { width: 16px; height: 16px; margin: 0; flex: none; }
:root .btn.btn-sm.btn-icon { width: 36px; padding: 0; justify-content: center; border-radius: 50%; }
.guest-qr-actions .btn.btn-sm { min-width: 0; }
.guest-qr-actions { gap: 8px; }

/* Guest QR block: code on the left; title + short how-it-works on top right,
   the small buttons along the code's bottom edge */
.admin-section .guest-qr { align-items: stretch; flex-wrap: nowrap; gap: 20px; }
.admin-section .guest-qr-side { justify-content: space-between; gap: 12px; min-width: 0; }
.guest-qr-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.guest-qr-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.guest-qr-desc { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); max-width: 420px; }
.admin-section .guest-qr-new { padding: 2px 0; font-size: 13px; }
@media (max-width: 560px) {
  .admin-section .guest-qr { flex-wrap: wrap; }
}

/* Waitlist card header: title + count on the left, a round "add to the list" button (B2) */
:root .waitlist-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.waitlist-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:root .waitlist-header .waitlist-count { font-size: 13px; }
:root .btn.waitlist-add-btn { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; flex: none; flex-direction: row; }
:root .btn.waitlist-add-btn svg { margin: 0; }

/* Guest sign-up panel: a breathing green dot while guests can join, a still
   grey dot when not; tap → the card asks, right there, "until closing?" */
.guest-panel { border-radius: 14px; background: var(--bg-primary); }
.guest-panel-status { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: none; background: none; font: inherit; text-align: left; color: var(--text-primary); cursor: pointer; border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.guest-panel-status:active { background: var(--btn-tonal, rgba(0,0,0,.07)); }
.guest-panel-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.guest-panel-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-panel-text span { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; flex: none; background: #9a968f; }
.guest-dot.is-open { background: #198754; }
:root[data-theme="dark"] .guest-dot.is-open { background: #3ddc97; }
.guest-dot.is-open::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: guest-breathe 2.6s ease-out infinite; }
@keyframes guest-breathe { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .guest-dot.is-open::after { animation: none; opacity: 0; } }
.guest-panel.is-asking { box-shadow: inset 0 0 0 1.5px var(--text-tertiary); }
.guest-panel-ask { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; }
.guest-panel-ask b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text-primary); }
.guest-panel-actions { display: flex; gap: 8px; }
:root .guest-panel-actions .btn.btn-sm { flex: 1; }
:root .btn.guest-panel-go { background: #198754; color: #fff; }

/* Admin: guest sign-up hours (one row per day) and the plain status line */
.admin-section .guest-hours { margin: 4px 0 10px; padding: 14px 16px 12px; border-radius: 14px; background: var(--bg-primary); }
.guest-hours-status { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; }
.guest-hours-status.is-open { color: var(--text-primary); }
.guest-hours-title { font-size: 13px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.guest-hours-row { display: grid; grid-template-columns: 52px auto 1fr; align-items: center; gap: 14px; min-height: 48px; border-top: 1px solid var(--border-color); }
.guest-hours-row:first-child { border-top: none; }
.guest-hours-day { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.guest-hours-times { display: flex; align-items: center; gap: 8px; }
.guest-hours-dash { font-size: 14px; color: var(--text-tertiary); }
.guest-hours-time { height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .guest-hours-time { color-scheme: dark; }
.guest-hours-off { display: none; font-size: 14px; color: var(--text-tertiary); }
.guest-hours-row.is-off .guest-hours-day { color: var(--text-tertiary); }
.guest-hours-row.is-off .guest-hours-times { display: none; }
.guest-hours-row.is-off .guest-hours-off { display: block; }
.guest-hours-note { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-tertiary); }

/* Seated list, compact (Nov 2026): one short line per party, the latest 5,
   then "Show all N" → a window with everyone seated today */
:root .waitlist-seated-row { min-height: 30px; gap: 8px; font-size: 14px; }
:root .waitlist-seated-covers { font-weight: 500; font-size: 13px; }
:root .waitlist-seated-header { padding: 8px 0 2px; }
:root .waitlist-seated-waited { font-size: 13px; color: var(--text-tertiary); }
.waitlist-seated-more { display: block; width: 100%; min-height: 36px; margin: 2px 0 4px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-secondary); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.seated-all-modal { max-width: 480px; }
.seated-all-summary { margin: -6px 0 12px; font-size: 15px; color: var(--text-secondary); }
.seated-all-list { max-height: min(440px, 55vh); overflow-y: auto; }
.seated-all-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 64px 72px; align-items: center; min-height: 44px; border-top: 1px solid var(--border-color); font-size: 16px; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.seated-all-row:first-child { border-top: none; }
.seated-all-row span:not(.seated-all-name) { color: var(--text-secondary); }
.seated-all-name { overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.seated-all-head { min-height: 28px; }
.seated-all-head span, .seated-all-head span:not(.seated-all-name) { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.guest-panel-status.is-fixed { cursor: default; }
.guest-panel-status.is-fixed:active { background: none; }

.admin-section .admin-group-title.is-off { opacity: 0.45; }
.guest-hours-host { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
:root .admin-section .guest-hours .admin-row.guest-hours-host { padding-bottom: 0; }

/* Admin > Locations: address under the name, Edit + Delete side by side */
.insights-loc-address { margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--text-tertiary); }
.insights-loc-actions { width: 1%; white-space: nowrap; }
.insights-loc-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.location-edit-note { margin: 4px 0 0; font-size: 14px; color: var(--text-tertiary); line-height: 1.4; }
#locationEditModal input.is-invalid { border-color: #c0392b; }
#locationEditMessage:empty { display: none; }

/* Sign-up hours: half-hour lists instead of time pickers */
select.guest-hours-time { -webkit-appearance: none; appearance: none; min-width: 112px; padding: 0 30px 0 12px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
/* The iPad's guest panel: one line, the dot beside "Sign-up open" */
:root .guest-panel-status { min-height: 44px; }