// ERU Studio component styles
.eru-app-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--studio-font-family, 'Poppins', sans-serif);
}

.eru-canvas-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

// Floating Panel base styles
.floating-panel {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.floating-panel * {
  box-sizing: border-box;
}

// Prevent text selection during drag
.eru-app-container.dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

// Scrollbar styles for panels
.floating-panel ::-webkit-scrollbar {
  width: 6px;
}

.floating-panel ::-webkit-scrollbar-track {
  background: var(--studio-surface-variant, #f1f1f1);
  border-radius: 3px;
}

.floating-panel ::-webkit-scrollbar-thumb {
  background: var(--studio-outline-variant, #c1c1c1);
  border-radius: 3px;
}

.floating-panel ::-webkit-scrollbar-thumb:hover {
  background: var(--studio-outline, #a1a1a1);
}

// Canvas specific styles
/* .canvas-component {
  transition: outline 0.2s ease;
} */

// Panel animation
.floating-panel {
  transition: box-shadow 0.2s ease;
}

.floating-panel:hover {
  box-shadow: var(--studio-elevation-2) !important;
}

// Container empty states
.container-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--studio-spacing-lg, 24px);
  color: var(--studio-on-surface-variant, #666);
  text-align: center;
  min-height: 100px;
}

.container-empty-state mat-icon {
  font-size: 32px;
  width: 32px;
  height: 32px;
  margin-bottom: var(--studio-spacing-sm, 8px);
  opacity: 0.5;
}

// Layout hints
.layout-hint {
  margin-top: var(--studio-spacing-md, 16px);
  padding: var(--studio-spacing-xs, 12px);
  background: var(--studio-surface-variant, #f8f9fa);
  border-radius: var(--studio-border-radius, 4px);
  text-align: left;
}

// Side panel overlay animation
.eru-side-panel-overlay {
  animation: slideInFromRight 0.25s ease-out;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
}

// Pinned (auto_open) side panel: PageRefComponent toggles
// `body.eru-has-pinned-side-panel` while the overlay is mounted, and sets
// `--eru-side-panel-width` to the width that panel actually took — the author's
// Panel Width, or the measured width when it sized itself to a side-by-side
// loop. Hosts whose page chrome flows naturally inherit the gutter from this
// body padding; hosts whose chrome uses `position: fixed` (e.g. a desktop
// shell) must add their own rule, and should read the same variable so a custom
// width does not leave them overlapping the panel:
//
//   body.eru-has-pinned-side-panel .my-fixed-desktop-shell {
//     right: var(--eru-side-panel-width, 420px);
//   }
//
body.eru-has-pinned-side-panel {
  padding-right: var(--eru-side-panel-width, 420px);
  box-sizing: border-box;
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

// Empty state styling
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  text-align: center;
  color: var(--studio-on-surface-variant, #666);
}

.empty-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: var(--studio-spacing-md, 16px);
  opacity: 0.5;
}

.empty-state h2 {
  margin: 0 0 var(--studio-spacing-sm, 8px) 0;
  font-size: 24px;
  font-weight: 400;
}

.empty-state p {
  margin: 0;
  opacity: 0.7;
}

// Design token utility classes — use these in the `classes` property instead of hardcoding colors
.eru-bg-primary          { background-color: var(--studio-primary) !important; }
.eru-bg-surface          { background-color: var(--studio-surface) !important; }
.eru-bg-surface-variant  { background-color: var(--studio-surface-variant) !important; }
.eru-bg-surface-container{ background-color: var(--studio-surface-container) !important; }
.eru-bg-surface-container-high { background-color: var(--studio-surface-container-high) !important; }
.eru-bg-error-container  { background-color: var(--studio-error-container) !important; }

.eru-text-primary         { color: var(--studio-primary) !important; }
.eru-text-on-primary      { color: var(--studio-on-primary) !important; }
.eru-text-on-surface      { color: var(--studio-on-surface) !important; }
.eru-text-on-surface-variant { color: var(--studio-on-surface-variant) !important; }
.eru-text-error           { color: var(--studio-error) !important; }

.eru-border-outline         { border-color: var(--studio-outline) !important; }
.eru-border-outline-variant { border-color: var(--studio-outline-variant) !important; }