/* =============================================
   floor-plan.css - Floor Plan Specific Styles
   ============================================= */

/* ─── CANVAS WRAPPER ─── */
.floor-plan-canvas-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-primary);
  flex: 1;
  min-height: 420px;
}

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

/* ─── STATUS LEGEND ─── */
.floor-plan-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 0.5px solid var(--separator);
  background: var(--bg-secondary);
  font-size: var(--text-xs);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: 3px solid transparent;
}

.legend-dot--available {
  background: #e8f5e9;
  border-color: #A0AF8A;
}

.legend-dot--reserved {
  background: #ffebee;
  border-color: #c0392b;
}

.legend-dot--occupied {
  background: #ffebee;
  border-color: #c0392b;
}

.legend-dot--cleaning {
  background: #ffebee;
  border-color: #c0392b;
}

.legend-dot--maintenance {
  background: var(--color-status-maintenance-bg);
  border-color: var(--color-status-maintenance);
}

.legend-dot--vip {
  background: var(--color-vip-bg);
  border-color: var(--color-vip);
}

/* ─── ADD TABLE MODAL ─── */
.add-table-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.shape-selector {
  display: flex;
  gap: var(--space-3);
}

.shape-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 0.5px solid var(--separator-strong);
  border-radius: var(--radius-md-ios);
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease-ios);
  flex: 1;
  min-height: 44px;
}

.shape-option:hover,
.shape-option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-vip-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-ios-sm);
}

.shape-option:active {
  transform: scale(0.96);
}

.shape-option__icon {
  font-size: 1.5rem;
}

.shape-option__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* ─── FLOOR PLAN CONTROLS ─── */
.floor-plan-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-bg-primary);
  flex-wrap: wrap;
}

.floor-plan-toolbar__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  flex: 1;
}

/* ─── TABLE INFO PANEL CONTENT ─── */
.table-info-panel__header {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: var(--space-6);
  border-bottom: 0.5px solid var(--separator);
}

.table-info-panel__back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-accent);
  cursor: pointer;
  margin-bottom: var(--space-4);
  background: none;
  border: none;
  padding: 0;
  transition: var(--transition-colors);
}

.table-info-panel__back:hover {
  color: var(--color-accent-light);
}

.table-info-panel__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.table-info-panel__body {
  padding: var(--space-6);
}

.table-info-section {
  margin-bottom: var(--space-6);
}

.table-info-section__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 0.5px solid var(--separator);
}

.table-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.table-info-row__label {
  color: var(--text-secondary);
}

.table-info-row__value {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.allergy-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.allergy-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(231,76,60,0.15);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.table-info-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 0.5px solid var(--separator);
  background: var(--bg-secondary);
}

.table-info-panel .btn--ghost {
  color: var(--glass-accent-text);
  border-color: var(--glass-border);
}

.table-info-panel .btn--ghost:hover {
  background: var(--glass-bg);
  color: var(--glass-text);
}

.table-info-panel [data-action="set-cleaning"] {
  background: rgba(232,212,139,0.15);
  color: var(--text-primary);
  border-color: rgba(232,212,139,0.3);
}

.table-info-panel [data-action="set-cleaning"]:hover {
  background: rgba(232,212,139,0.25);
  color: var(--text-primary);
}

.table-info-panel .btn--primary {
  background: var(--glass-accent-bg);
  border-color: var(--glass-accent-border);
  color: var(--glass-accent-text);
}

.table-info-panel .btn--danger {
  background: var(--glass-danger-bg);
  border-color: var(--glass-danger-border);
  color: var(--glass-danger-text);
}

.table-info-panel .btn--danger:hover {
  background: rgba(231,76,60,0.25);
  color: var(--text-primary);
}