/*
 * UCA Component: d1:collection (v2.0 - UI Polished & Icon-driven)
 * Base styles for the smart repeater component.
 */
.dig-collection__rows-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--dig-spacing-md);
  border: 1px solid var(--dig-color-border);
  border-radius: var(--dig-radius-lg);
  padding: var(--dig-spacing-md);
  background-color: var(--dig-color-bg-alt);
}
.dig-collection__row {
  display: flex;
  align-items: center; /* Vertically align controls with content */
  gap: var(--dig-spacing-sm);
  padding: var(--dig-spacing-md);
  background-color: var(--dig-color-bg);
  border: 1px solid var(--dig-color-border);
  border-radius: var(--dig-radius-md);
  transition: box-shadow var(--dig-transition-fast),
    transform var(--dig-transition-fast);
}
.dig-collection__row.sortable-ghost {
  opacity: 0.4;
  background: var(--dig-color-primary-bg);
}
.dig-collection__row.sortable-chosen {
  box-shadow: var(--dig-shadow-lg);
  transform: scale(1.02);
}
.dig-collection__row-content {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--dig-spacing-md);
}
.dig-collection__row-controls {
  display: flex;
  align-items: center;
  gap: var(--dig-spacing-xs);
}
.dig-collection__drag-handle,
.dig-collection__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent; /* Make border transparent by default */
  background-color: transparent; /* Make background transparent */
  border-radius: var(--dig-radius-sm);
  padding: var(--dig-spacing-xs);
  cursor: pointer;
  transition: background-color var(--dig-transition-fast),
    color var(--dig-transition-fast);
  color: var(--dig-color-text-muted); /* Muted color for icons */
}

.dig-collection__drag-handle {
  cursor: move;
}
.dig-collection__drag-handle:hover {
  background-color: var(--dig-color-bg-alt);
  color: var(--dig-color-text);
}

/* Specific styling for the remove button */
.dig-collection__remove-btn:hover {
  background-color: var(--dig-color-danger-bg);
  color: var(--dig-color-danger);
}

.dig-collection__actions {
  margin-top: var(--dig-spacing-md);
}

/* Apply this class to the container via _modifiers in JSON */
.dig-collection--readonly .dig-collection__drag-handle,
.dig-collection--readonly .dig-collection__remove-btn {
  display: none !important; /* Force hide controls */
}

.dig-collection--readonly .dig-collection__rows-wrapper {
  background-color: transparent;
  border: none;
  padding: 0;
}

.dig-collection--readonly .dig-collection__row {
  background-color: #fff;
  border: 1px solid var(--dig-color-border);
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dig-collection--readonly .dig-collection__row:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: var(--dig-color-secondary);
}