/**
 * GymMapEditor - Main layout styles
 *
 * Layout Structure:
 * ┌──────────────────────────────────────────────────────────────────┐
 * │ HEADER (50px) - Mode/tool switching inline                       │
 * ├───────────────────────────────────────────────┬──────────────────┤
 * │              CANVAS AREA                      │  SIDEBAR (320px) │
 * │              (flex: 1)                        │  - FLOORS        │
 * │                                               │  - SECTORS       │
 * ├───────────────────────────────────────────────┴──────────────────┤
 * │ STATUS BAR (32px, inside canvas area)                            │
 * └──────────────────────────────────────────────────────────────────┘
 */

.gym-map-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(100vh - 60px);
  background: rgb(28, 32, 36);
  position: relative;
}

.gym-map-editor__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  gap: 12px;
  color: var(--text-secondary, #a0a0a0);
}

.gym-map-editor__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-default, rgba(255, 255, 255, 0.1));
  border-top-color: var(--rumble-green, #B9FF66);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Main content area - horizontal layout */
.gym-map-editor__main {
  display: flex;
  flex: 1;
  height: 100%; /* Ensure proper flex sizing for children */
  position: relative;
  overflow: hidden;
}

/* Canvas area - takes remaining space */
.gym-map-editor__canvas-area {
  flex: 1;
  position: relative;
  min-height: 400px;
  height: 100%; /* Ensure canvas fills available flex space */
  background: rgb(28, 32, 36);
  /* Leave space for status bar */
  padding-bottom: 32px;
}

.gym-map-editor__canvas {
  position: absolute;
  inset: 0;
  bottom: 32px; /* Status bar height */
}

/* Drawing mode cursor - crosshair for precision */
.gym-map-editor--drawing .gym-map-editor__canvas-area,
.gym-map-editor--drawing .gym-map-editor__canvas,
.gym-map-editor--drawing canvas {
  cursor: crosshair !important;
}

.gym-map-editor__no-floor {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  color: var(--text-muted, #6b7280);
  text-align: center;
  padding: 20px;
}

.gym-map-editor__no-floor p {
  margin: 0;
  font-size: 14px;
}

/* Unsaved changes warning */
.gym-map-editor__unsaved-warning {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: var(--rumble-red, #F5484D);
  color: white;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 500;
  animation: slideUp 0.3s ease;
}

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

/* Mobile adjustments */
@media (max-width: 960px) {
  .gym-map-editor {
    min-height: 100vh;
    /* Only safe area inset needed - MobileBottomSheet handles nav offset via bottomOffset */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .gym-map-editor__main {
    flex-direction: column;
  }

  .gym-map-editor__canvas-area {
    min-height: 200px;
    /* Use CSS variable for dynamic height based on bottom sheet position */
    /* This ensures canvas resizes when bottom sheet opens/closes */
    height: var(--canvas-available-height, 100%);
    max-height: var(--canvas-available-height, 100%);
    flex: 0 0 auto; /* Don't grow/shrink - use explicit height */
    transition: height 0.35s ease-out, max-height 0.35s ease-out;
    /* Status bar is hidden on mobile, no need for padding */
    padding-bottom: 0;
  }

  .gym-map-editor__canvas {
    /* Override absolute positioning for mobile - use relative within sized container */
    position: relative;
    inset: unset;
    bottom: unset;
    width: 100%;
    height: 100%;
  }

  .gym-map-editor__unsaved-warning {
    bottom: 80px;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 960px) {
  .gym-map-editor__canvas-area {
    min-height: 400px;
  }
}

/* Mode Indicator - floating badge top-right of canvas */
.editor-mode-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  z-index: 100;
  pointer-events: none;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.editor-mode-indicator--vertex {
  background: rgba(245, 72, 77, 0.2);
  color: #f5484d;
  border-color: rgba(245, 72, 77, 0.3);
}

.editor-mode-indicator--draw {
  background: rgba(185, 255, 102, 0.2);
  color: #b9ff66;
  border-color: rgba(185, 255, 102, 0.3);
}

/* Color Picker Popover - floating near toolbar color button */
.color-picker-popover {
  background: #1a1a2e;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  animation: colorPickerFadeIn 0.15s ease-out;
}

@keyframes colorPickerFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Customize react-colorful */
.color-picker-popover .react-colorful {
  width: 180px;
  height: 180px;
}

.color-picker-popover .react-colorful__saturation {
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}

.color-picker-popover .react-colorful__hue {
  height: 20px;
  border-radius: 0 0 8px 8px;
  margin-top: 8px;
}

.color-picker-popover .react-colorful__saturation-pointer,
.color-picker-popover .react-colorful__hue-pointer {
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.color-picker-popover .react-colorful__saturation-pointer {
  border-radius: 50%;
}

.color-picker-popover .react-colorful__hue-pointer {
  border-radius: 4px;
}