/* Form Builder Custom Styles */

/* Base Component Styles */
.component { 
  border: 1px solid #ccc; 
  background: #f8f9fa; 
  padding: 8px; 
  margin-bottom: 5px; 
  cursor: grab; 
}

.dropzone { 
  min-height: 50px; 
  border: 2px dashed #ccc; 
  padding: 10px; 
  background: #fff; 
  position: relative; 
}

.dropzone:hover { 
  border-color: #007bff; 
}

/* Group and Block Styles */
.group-label { 
  font-weight: bold; 
  margin-bottom: 5px; 
}

.tab-pane { 
  padding-top: 1rem; 
}

.nav-link { 
  cursor: pointer; 
}

.tab-label-container { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}

.group { 
  border: 1px solid #dee2e6; 
  border-radius: 4px; 
  padding: 10px; 
  margin-bottom: 10px; 
}

.block-controls { 
  display: flex; 
  align-items: center; 
  gap: 2px; 
}

.block-controls i { 
  cursor: pointer; 
  padding: 2px; 
}

/* Dropped Component Styles */
.dropped-component { 
  background: #e9ecef; 
  border: 1px solid #adb5bd; 
  padding: 8px; 
  margin-bottom: 5px; 
  border-radius: 4px;
  position: relative;
}

.dropped-component .d-flex {
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* Space between label and controls */
}

.dropped-component .component-label {
  flex: 1; /* Allow label to take available space */
  font-weight: 500; /* Make label slightly bolder */
}

/* Component Control Styles */
.component-settings { 
  cursor: pointer; 
}

.component-controls { 
  display: flex; 
  align-items: center; 
  gap: 8px; /* Good spacing between icons */
  flex-shrink: 0; /* Prevent shrinking */
}

.component-controls i { 
  cursor: pointer; 
  padding: 4px 6px; /* Better padding for click targets */
  font-size: 14px; 
  line-height: 1; 
  border-radius: 3px; 
  transition: background-color 0.2s ease;
  display: inline-flex; /* Ensure proper icon alignment */
  align-items: center;
  justify-content: center;
  min-width: 24px; /* Minimum width for consistent sizing */
  min-height: 24px; /* Minimum height for consistent sizing */
}

.component-controls i:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Column Settings */
.column-settings { 
  position: absolute; 
  top: 2px; 
  right: 2px; 
  cursor: pointer; 
  color: #6c757d; 
}

.column-settings:hover { 
  color: #007bff; 
}

.col-container { 
  position: relative; 
}

/* Component Category Styles */
.component-category {
  margin-bottom: 15px;
}

.category-header {
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.category-header:hover {
  background: #dee2e6;
}

.category-header.collapsed {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.category-header:not(.collapsed) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.category-toggle {
  transition: transform 0.2s ease;
}

.category-header.collapsed .category-toggle {
  transform: rotate(-90deg);
}

.category-components {
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 8px;
  background: #f8f9fa;
}

.category-components .component {
  margin-bottom: 8px;
  border-radius: 3px;
  font-size: 14px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #dee2e6;
  transition: all 0.2s ease;
}

.category-components .component:hover {
  border-color: #007bff;
  background: #f0f8ff;
}

.category-components .component:last-child {
  margin-bottom: 0;
}

.category-count {
  background: #6c757d;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: normal;
}