/* Dashboard Grid Styles */

/* GridStack Placeholder - shows where widgets will land during drag */
.dashboard-grid-placeholder {
  background: repeating-linear-gradient(45deg,
      rgb(99 102 241 / 0.05),
      rgb(99 102 241 / 0.05) 10px,
      rgb(99 102 241 / 0.15) 10px,
      rgb(99 102 241 / 0.15) 20px) !important;
  border: 2px dashed rgb(99 102 241 / 0.5) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(4px);
  animation: pulse-placeholder 1.5s ease-in-out infinite;
}

.dashboard-grid-placeholder::before {
  content: "Drop here";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(99 102 241 / 0.7);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 10;
}

@keyframes pulse-placeholder {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

/* Dark mode placeholder */
.dark .dashboard-grid-placeholder {
  background: repeating-linear-gradient(45deg,
      rgb(129 140 248 / 0.1),
      rgb(129 140 248 / 0.1) 10px,
      rgb(129 140 248 / 0.2) 10px,
      rgb(129 140 248 / 0.2) 20px) !important;
  border-color: rgb(129 140 248 / 0.6) !important;
}

.dark .dashboard-grid-placeholder::before {
  color: rgb(129 140 248 / 0.9);
}

/* Drag helper - the clone being dragged */
.grid-stack-item.ui-draggable-dragging,
.dashboard-widget-seed.ui-draggable-dragging {
  opacity: 0.85;
  transform: scale(0.98);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);
  z-index: 9999 !important;
  cursor: grabbing !important;
}

/* Body state during drag */
.dashboard-studio--dragging {
  cursor: grabbing !important;
}

.dashboard-studio--dragging * {
  cursor: grabbing !important;
}

/* GridStack drag helper improvements */
.grid-stack>.grid-stack-item.ui-draggable-dragging {
  pointer-events: none;
}

/* Ensure proper stacking context for drag operations */
.dashboard-grid-react {
  position: relative;
  z-index: 1;
}

/* Widget surface drag handle */
.dashboard-widget-surface {
  cursor: grab;
}

.dashboard-widget-surface:active {
  cursor: grabbing;
}

/* Ensure GridStack content fills item exactly without padding-induced overflow */
.grid-stack .grid-stack-item-content {
  padding: 0 0 var(--gs-item-margin, 8px) 0 !important;
  margin: 0 !important;
  height: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* Make the widget card slightly shorter than the cell, matching GridStack gutter */
.grid-stack .dashboard-widget-card {
  height: calc(100% - var(--gs-item-margin, 8px)) !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* Palette seed drag state */
.dashboard-widget-seed {
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-widget-seed:hover {
  transform: translateY(-2px);
}

.dashboard-widget-seed:active {
  transform: scale(0.98);
}


/* FIX: Ensure resize handles are always on top but only visible on hover */
.grid-stack.grid-stack-animate .ui-resizable-handle {
  z-index: 100 !important;
}

.grid-stack-item.ui-resizable-autohide:hover .ui-resizable-handle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}