/* ═══════════════════════════════════════════════════════════
   Tavern PDA — Pro Dark Theme iOS-Inspired
   Full-height floor plan + slide-over sidebar
   ═══════════════════════════════════════════════════════════ */

/* ─── Layout: FULL WIDTH Floor Plan ─────────── */

.wp-layout {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px);
  background: var(--bg-primary);
  position: relative;
}

/* ─── Floor Plan — takes ALL available space ── */

#wp-main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

#wp-floor-plan-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wp-floor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.wp-floor-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wp-floor-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wp-floor-subtitle {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Add Table button */
.wp-btn-add-table {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: var(--glass-accent-bg);
  border: 2.5px solid var(--glass-accent-border);
  color: var(--glass-accent-text);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-sm-ios);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-ios);
}

.wp-btn-add-table:hover {
  background: var(--glass-accent-bg-hover);
  border-color: var(--glass-accent-border-hover);
  transform: translateY(-1px);
}

.wp-btn-add-table:active { transform: scale(0.96); }

/* Sidebar toggle button */
.wp-btn-sidebar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--glass-bg);
  border: 2.5px solid var(--glass-border);
  color: var(--glass-text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-sm-ios);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--dur-fast);
  flex-shrink: 0;
}

.wp-btn-sidebar:hover { background: var(--bg-primary); border-color: var(--separator-strong); }
.wp-btn-sidebar--active { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); color: var(--glass-accent-text); }

/* ─── Canvas Wrapper — fills remaining space ─── */

#wp-floor-plan-container .floor-plan-canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-primary);
  min-height: 300px;
}

#tavern-floor-plan-canvas {
  display: block;
  cursor: default;
}

/* ─── Legend Bar ────────────────────────────── */

.wp-floor-legend {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.75rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--separator);
  flex-shrink: 0;
}

.wp-legend-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.wp-legend-dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid;
}

.wp-legend-dot--available::before  { background: rgba(156,175,136,0.35);  border-color: #A0AF8A; }
.wp-legend-dot--occupied::before   { background: rgba(244,67,54,0.35);  border-color: #f44336; }
.wp-legend-dot--cleaning::before   { background: rgba(255,152,0,0.35);  border-color: #ff9800; }
.wp-legend-dot--reserved::before   { background: rgba(232,212,139,0.35); border-color: #C4A47C; }
.wp-legend-dot--maintenance::before{ background: rgba(156,39,176,0.35); border-color: #9c27b0; }

/* ─── Sidebar — slide-over from right ────────── */

.wp-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 90;
  display: none;
  backdrop-filter: blur(4px);
}

.wp-sidebar-overlay.is-open { display: block; animation: wpFadeIn 0.2s ease; }

.wp-sidebar-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-primary);
  z-index: 91;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-spring);
  box-shadow: -4px 0 30px rgba(0,0,0,0.5);
  border-left: 1px solid var(--separator-strong);
}

.wp-sidebar-panel.is-open { transform: translateX(0); }

.wp-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--separator);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.wp-sidebar-header-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.wp-sidebar-close {
  width: 32px;
  height: 32px;
  border: 2.5px solid var(--glass-border);
  border-radius: var(--radius-sm-ios);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-fast);
}

.wp-sidebar-close:hover { background: var(--glass-danger-bg); border-color: var(--glass-danger-border); color: var(--glass-danger-text); }

.wp-sidebar-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.35rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}

.wp-sidebar-tab {
  padding: 0.35rem 0.6rem;
  border: none;
  border-radius: var(--radius-sm-ios);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast);
  min-height: 32px;
}

.wp-sidebar-tab:hover { background: var(--glass-bg); border: 2.5px solid var(--glass-border); color: var(--glass-text); }

.wp-sidebar-tab--active {
  background: var(--glass-accent-bg);
  border: 2.5px solid var(--glass-accent-border);
  color: var(--glass-accent-text);
}

.wp-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.wp-sidebar-panel-body {
  display: none;
  padding: 0.4rem;
}

.wp-sidebar-panel-body.is-active { display: block; }

/* ─── Order Form Container ──────────────────── */

#wp-order-form-container {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-primary);
}

/* ─── Order Header ─────────────────────────── */

.wp-order-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--separator);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(20px);
}

.wp-order-back {
  background: var(--glass-bg);
  border: 2.5px solid var(--glass-border);
  color: var(--glass-text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-sm-ios);
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 38px;
  min-width: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-fast) var(--ease-ios);
}

.wp-order-back:hover { background: var(--bg-primary); border-color: var(--separator-strong); }
.wp-order-back:active { transform: scale(0.96); }

.wp-order-table-badge {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-accent);
  padding: 0.35rem 0.7rem;
  background: rgba(232,212,139, 0.1);
  border-radius: var(--radius-pill);
  border: 2.5px solid rgba(232,212,139, 0.2);
  white-space: nowrap;
}

/* ─── Notes Field ──────────────────────────── */

.wp-order-notes-row {
  padding: 0.6rem 0.75rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--separator);
}

.wp-order-notes-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  display: block;
}

/* ─── Confirmation ─────────────────────────── */

.wp-confirmation {
  padding: 3rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.wp-confirm-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: wpPopIn 0.4s var(--ease-spring);
}

@keyframes wpPopIn {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.wp-confirm-details {
  background: var(--bg-secondary);
  border-radius: var(--radius-md-ios);
  padding: 1.2rem 1.5rem;
  text-align: left;
  max-width: 380px;
  width: 100%;
  margin: 0 auto 1.8rem;
  border: 2.5px solid var(--separator);
}

.wp-order-new-btn {
  background: var(--glass-accent-bg);
  border: 2.5px solid var(--glass-accent-border);
  color: var(--glass-accent-text);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-sm-ios);
  padding: 0.65rem 2.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  transition: all var(--dur-fast) var(--ease-ios);
}

.wp-order-new-btn:hover {
  background: var(--glass-accent-bg-hover);
  transform: translateY(-1px);
}

.wp-order-new-btn:active { transform: scale(0.96); }

/* ─── Table Action Sheet (bottom panel) ──────── */

.wp-table-actions-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: wpFadeIn 0.2s ease;
  backdrop-filter: blur(4px);
}

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

.wp-table-actions-sheet {
  background: var(--bg-secondary);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 0.4rem 0 1.2rem;
  animation: wpSlideUp 0.3s var(--ease-spring);
  border-top: 1px solid var(--separator-strong);
}

@keyframes wpSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.wp-sheet-handle {
  width: 36px;
  height: 5px;
  background: var(--separator-strong);
  border-radius: 3px;
  margin: 0 auto 0.8rem;
}

.wp-sheet-header {
  text-align: center;
  padding: 0 1.2rem 0.6rem;
  border-bottom: 1px solid var(--separator);
  margin-bottom: 0.3rem;
}

.wp-sheet-table-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.wp-sheet-status-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.wp-sheet-status--available    { background: rgba(156,175,136,0.15); color: #A0AF8A; }
.wp-sheet-status--occupied     { background: rgba(244,67,54,0.15); color: #f44336; }
.wp-sheet-status--cleaning     { background: rgba(255,152,0,0.15); color: #ff9800; }
.wp-sheet-status--reserved     { background: rgba(232,212,139,0.15); color: #C4A47C; }
.wp-sheet-status--maintenance  { background: rgba(156,39,176,0.15); color: #9c27b0; }

.wp-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 1rem 0;
}

.wp-sheet-action {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-bottom: 1px solid var(--separator);
  border-radius: var(--radius-sm-ios);
  background: transparent;
  color: var(--glass-text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 50px;
  text-align: left;
  transition: background var(--dur-fast);
}

.wp-sheet-action:hover  { background: var(--glass-bg-hover); }
.wp-sheet-action:active { background: var(--bg-primary); transform: scale(0.985); }

.wp-sheet-action--primary { color: var(--glass-accent-text); font-weight: 700; }
.wp-sheet-action--danger  { color: var(--glass-danger-text); }
.wp-sheet-action--success { color: var(--glass-success-text); }

.wp-sheet-action-icon {
  font-size: 1.3rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.wp-sheet-cancel {
  display: block;
  width: calc(100% - 2rem);
  margin: 0.6rem 1rem 0;
  padding: 0.7rem;
  border: 2.5px solid var(--glass-border);
  border-radius: var(--radius-sm-ios);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 46px;
  text-align: center;
  transition: all var(--dur-fast);
}

.wp-sheet-cancel:hover { background: var(--glass-bg-hover); color: var(--glass-text); }

/* ─── Order Cards (in sidebar) ───────────────── */

.wp-order-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm-ios);
  padding: 0.7rem;
  margin: 0.4rem 0;
  border-left: 3px solid var(--color-accent);
  transition: all var(--dur-fast);
}

.wp-order-card:hover { background: var(--bg-tertiary); }

.wp-order-card--pending   { border-left-color: #ff9800; }
.wp-order-card--preparing { border-left-color: #C4A47C; }
.wp-order-card--served    { border-left-color: #A0AF8A; }
.wp-order-card--completed { border-left-color: #666; opacity: 0.6; }
.wp-order-card--cancelled { border-left-color: #f44336; opacity: 0.5; text-decoration: line-through; }

.wp-order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.35rem;
}

.wp-order-card-table {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.wp-order-card-meta {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.wp-order-card-items {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.wp-order-card-total {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-accent);
  text-align: right;
}

.wp-order-card-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  margin-top: 0.4rem;
}

.wp-btn-sm {
  padding: 0.3rem 0.6rem;
  border: 2.5px solid var(--glass-border);
  border-radius: var(--radius-sm-ios);
  background: var(--glass-bg);
  color: var(--glass-text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
  transition: all var(--dur-fast);
}

.wp-btn-sm--start    { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); color: var(--glass-accent-text); }
.wp-btn-sm--served   { background: var(--glass-success-bg); border-color: var(--glass-success-border); color: var(--glass-success-text); }
.wp-btn-sm--complete { background: var(--glass-success-bg); border-color: var(--glass-success-border); color: var(--glass-success-text); }
.wp-btn-sm--cancel   { background: var(--glass-danger-bg); border-color: var(--glass-danger-border); color: var(--glass-danger-text); }

/* ─── Role Badge ────────────────────────────── */

.role-badge--tavern {
  background: rgba(160, 175, 138, 0.12);
  color: #A0AF8A;
  border: 2.5px solid rgba(160, 175, 138, 0.2);
  font-weight: 600;
}

/* ─── Responsive ────────────────────────────── */

@media (max-width: 768px) {
  .wp-floor-toolbar { padding: 0.4rem 0.5rem; gap: 0.35rem; }
  .wp-floor-title { font-size: 0.82rem; }
  .wp-floor-subtitle { display: none; }
  .wp-floor-legend { gap: 0.5rem; padding: 0.3rem 0.5rem; }
  .wp-legend-dot { font-size: 0.62rem; }
  .wp-btn-add-table { padding: 0.35rem 0.6rem; font-size: 0.72rem; min-height: 32px; }
  .wp-sidebar-panel { width: 100%; max-width: 100vw; }
  .wp-order-header { padding: 0.45rem 0.5rem; gap: 0.5rem; }
  .wp-order-back { padding: 0.3rem 0.55rem; font-size: 0.73rem; min-height: 34px; }
  .wp-order-table-badge { font-size: 0.82rem; padding: 0.25rem 0.5rem; }
  .wp-order-notes-row { padding: 0.4rem 0.5rem; }
  .wp-order-new-btn { width: 100%; }
  .wp-confirmation { padding: 2rem 1rem; }
  .wp-table-actions-sheet { border-radius: 12px 12px 0 0; }
}

@media (max-width: 400px) {
  .wp-floor-legend { gap: 0.3rem; }
  .wp-legend-dot { font-size: 0.58rem; }
}