/* Dashboard Grid System */
.dashboard-container {
  flex: 1;
  padding: var(--spacing-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  transition: margin-left var(--transition-normal);
}

/* Expand dashboard area when panel is collapsed */
.config-panel.collapsed ~ .dashboard-container {
  margin-left: calc(-1 * var(--config-panel-width) + 40px);
}

.dashboard-grid {
  position: relative; /* Contain pseudo-elements */
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--grid-gap);
  min-height: 70vh;
  /* Transition moved to conditional selector below for performance */
}

/* Responsive Grid */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    --columns: 1;
  }
  
  .dashboard-container {
    padding: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .dashboard-container {
    padding: var(--spacing-sm);
  }
  
  .dashboard-grid {
    gap: var(--spacing-sm);
  }
}

/* Grid Columns Utilities */
.grid-1-col { --columns: 1; }
.grid-2-col { --columns: 2; }
.grid-3-col { --columns: 3; }

/* Drop Zones for Drag & Drop */
.dashboard-grid.drag-active::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: rgba(37, 99, 235, 0.1);
  border: 1px dashed var(--primary-color);
  border-radius: var(--radius-md);
  pointer-events: none;
}

/* Empty State */
.dashboard-grid:empty::after {
  content: "Drag widgets here or use the + button to add content";
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-muted);
  text-align: center;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
}

/* Sortable Ghost and Drag States - Optimized for Performance */

/* The placeholder where the item will be dropped */
.sortable-ghost {
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  /* Disable all transitions during drag for smooth operation */
  transition: none !important;
  /* Use transform3d for hardware acceleration */
  transform: translate3d(0, 0, 0);
}
.sortable-ghost > * {
  visibility: hidden;
}

/* The item being dragged */
.sortable-chosen {
  cursor: grabbing;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  /* Critical: Disable all transitions during drag */
  transition: none !important;
  /* Force hardware acceleration */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* The original item that was left behind */
.sortable-drag {
  opacity: 0;
  /* Smooth opacity transition only */
  transition: opacity var(--transition-fast) !important;
}

/* Performance optimization: Disable grid transitions during drag */
.dashboard-grid.drag-active {
  /* Temporarily disable grid transitions to prevent layout jumps */
  transition: none !important;
}

/* Prevent text selection during drag operations */
.dashboard-grid.drag-active {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


/* Smooth animations when NOT dragging */
.dashboard-grid:not(.drag-active) {
  transition: grid-template-columns var(--transition-normal);
}