/* Nested Components Visual Editor Styles */

.component-mini-preview {
  max-height: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Ensure parent component display doesn't push nested components out of view */
.nested-component-preview {
  min-height: 80px;
  display: flex;
  flex-direction: column;
}

/* Resource indicators in nested components */
.nested-component-preview .component-mini-preview {
  flex: 1;
  overflow-y: auto;
}

/* Ensure sliders scale properly */
.nested-component-preview input[type="range"] {
  max-width: 90%;
}

/* Parent component display area */
.parent-component-display-area {
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

/* Ensure nested container has minimum height for dropping components - only in admin nested components page */
.nested-components-page .nested-components-container {
  min-height: 100px;
  flex: 1;
}

/* Visual indicator for drop zone - only in admin nested components page */
.nested-components-page .nested-components-container:empty::after {
  content: "Drop components here";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #9ca3af;
  font-size: 0.875rem;
  pointer-events: none;
}