:root {
  --vb-bg: #f8f9fa;
  --vb-border: #e9ecef;
  --vb-hover: #e2e6ea;
  --vb-accent: #0d6efd;
  --vb-card: #ffffff;
  --vb-text: #27272a;
  --vb-muted: #666;
  --vb-input-bg: #ffffff;
  --vb-input-border: #d1d5db;
  --vb-group-bg: #fff9db4d;
  --vb-group-label-bg: #ffc107;
  --vb-group-label-text: #333;
}

.visual-builder-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  background: var(--vb-card, var(--card, #fff));
  border: 1px solid var(--vb-border, var(--border, #ddd));
  color: var(--vb-text, var(--text, #27272a));
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  min-height: 500px; 
  height: auto;
  align-items: start;
}

@media (max-width: 768px) {
  .visual-builder-container {
    grid-template-columns: 1fr;
    height: auto;
    grid-template-rows: auto auto; /* Allow flexible height for stacked layout */
  }
}

.vb-palette {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--vb-border, var(--border, #ddd));
  padding-right: 15px;
  /* height: 100%; REMOVED fixed height */
  overflow: hidden; /* Keep internal scroll for list */
  max-height: 80vh; /* Optional limit if needed, or let it grow */
  position: sticky;
  top: 20px;
}

.vb-header {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 0.9em;
  text-transform: uppercase;
  color: var(--vb-muted, var(--muted, #666));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 768px) {
  .vb-header {
    position: sticky;
    top: 0;
    background: var(--vb-card, var(--card, #fff));
    z-index: 10;
    padding: 10px;
    margin: -10px -10px 10px -10px;
    border-bottom: 1px solid var(--vb-border, var(--border, #ddd));
  }
  
  .vb-header .btn {
    font-size: 0.85em;
    padding: 8px 12px;
    white-space: nowrap;
  }
  
  .vb-canvas-wrapper {
    display: block;
  }
}

.vb-search {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--vb-input-border, var(--border, #ccc));
  background: var(--vb-input-bg, #fff);
  color: var(--vb-text, var(--text, #27272a));
  border-radius: 4px;
}

.vb-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vb-item {
  background: var(--vb-bg, #f8f9fa);
  padding: 10px;
  border: 1px solid var(--vb-border, var(--border, #ddd));
  border-radius: 4px;
  cursor: grab;
  user-select: none;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vb-item:hover {
  background: var(--vb-hover, #eee);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.vb-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.vb-item-name {
  font-weight: 500;
  font-size: 0.9em;
  color: var(--vb-text, var(--text, #27272a));
}

.vb-item-meta {
  font-size: 0.8em;
  color: var(--vb-muted, var(--muted, #777));
}

.vb-empty-palette {
  padding: 10px;
  color: var(--vb-muted);
}

.vb-canvas-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
}

.vb-canvas {
  flex: 1;
  background-color: var(--vb-bg, #f0f2f5);
  border: 2px dashed var(--vb-border, var(--border, #ccc));
  border-radius: 8px;
  padding: 20px;
  position: relative;
  /* overflow-y: auto; REMOVED to allow growth */
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-content: start;
}

.vb-canvas.drag-over {
  background-color: rgba(13, 110, 253, 0.05);
  border-color: var(--vb-accent, #0d6efd);
}

.vb-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--vb-muted, var(--muted, #999));
  pointer-events: none;
  font-size: 1.2em;
}

.vb-canvas-item {
  width: 180px;
  flex: 0 0 auto;
  background: var(--vb-card);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.vb-canvas-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 8px;
  background: var(--vb-hover, #eee);
  border-radius: 4px;
}

.vb-canvas-item-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff4757;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  border: 2px solid white;
  opacity: 0;
  transition: opacity 0.2s;
}

.vb-canvas-item:hover .vb-canvas-item-remove {
  opacity: 1;
}

.vb-canvas-item-qty {
    margin-top: 5px;
    font-size: 0.8em;
    background: var(--vb-hover, #eee);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Custom Material */
.vb-item.custom-material {
    background-color: #f0f7ff;
    border: 1px dashed #0d6efd;
}

.vb-item.custom-material:hover {
    background-color: #e5f1ff;
}

/* Group Container */
.vb-group-wrapper {
  border: 2px dashed #ffc107; /* Warning / Variant color */
  background: var(--vb-group-bg);
  padding: 15px;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  position: relative;
  margin-top: 15px; /* space for label */
  min-width: 200px;
}

.vb-group-label {
  position: absolute;
  top: -12px;
  left: 10px;
  background: var(--vb-group-label-bg);
  color: var(--vb-group-label-text);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.vb-canvas-item-qty {
    margin-top: 5px;
    font-size: 0.8em;
    background: #0d6efd1a;
    color: #0d6efd;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    transition: background 0.2s;
    user-select: none;
}

.vb-canvas-item-qty:hover {
    background: #0d6efd33;
    cursor: pointer;
}


/* Expanded card styles */
.vb-canvas-item.is-editing {
    width: 380px; /* span equivalent */
    z-index: 10;
    border: 2px solid #0d6efd;
    background: var(--vb-card);
    padding: 15px;
}

@media (max-width: 600px) {
  .vb-canvas-item {
    width: 100%; /* Full width on mobile */
  }
  .vb-canvas-item.is-editing {
     width: 100%;
  }
}

.vb-form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}

.vb-form-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5px;
  align-items: center;
}

.vb-label {
    font-size: 0.7em;
  color: var(--vb-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.vb-btn-done {
    margin-top: 10px;
    background: #0d6efd;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.8em;
    cursor: pointer;
    width: 100%;
}
.vb-btn-done:hover {
    background: #0b5ed7;
}

.vb-mobile-qty-label,
.vb-mobile-qty-unit {
  color: var(--vb-muted);
}

.vb-mobile-qty {
  border: 1px solid var(--vb-input-border);
  background: var(--vb-input-bg);
  color: var(--vb-text);
}

.vb-edit-trigger {
    cursor: pointer;
    font-size: 1.2em;
    opacity: 0.3;
    transition: opacity 0.2s;
    margin-left: auto;
}
.vb-canvas-item:hover .vb-edit-trigger {
    opacity: 1;
}

/* Mobile specific enhancements */
@media (max-width: 768px) {
  .vb-item {
    cursor: pointer !important;
    padding: 12px 10px; /* Slightly easier to tap */
  }
  
  .vb-item.is-selected {
    background-color: #e8f5e9 !important; /* Light green background */
    border-color: #c8e6c9 !important;
  }
  
  .vb-mobile-check {
    font-size: 1.2em;
    margin-left: 10px;
  }
}

/* Selection checkbox on canvas items */
.vb-select-checkbox {
  accent-color: #0d6efd;
  cursor: pointer;
}

.vb-canvas-item.is-selected {
  outline: 3px solid rgba(13,110,253,0.12);
  box-shadow: 0 6px 18px rgba(13,110,253,0.08);
}

.vb-drop-target {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: var(--vb-accent, #0d6efd);
  position: relative;
}

/* Explicit visual indicator for grouping action */
.vb-drop-target::after {
  content: "Make Variant (OR)"; /* default en */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(13, 110, 253, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Localize content if possible via lang attr on html, or JS classes.
   Assuming <html lang="pt"> is set.*/
:lang(pt) .vb-drop-target::after {
  content: "Criar Variante (OU)";
}

/* Fine-tune small checkbox placement for smaller cards */
@media (max-width: 768px) {
  .vb-select-checkbox { left: 6px; top: 6px; }
}

/* Mobile Selection Mode Styles */
.vb-mobile-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.vb-mobile-controls .btn {
  flex: 1;
  min-width: 120px;
  font-size: 0.9em;
  padding: 10px 16px;
  font-weight: 500;
}

.vb-mobile-selected {
  background: rgba(13, 110, 253, 0.1) !important;
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.3);
}

.vb-palette.selection-mode .vb-item {
  cursor: pointer;
}

.vb-palette.selection-mode .vb-item:not(.custom-material):hover {
  background: rgba(13, 110, 253, 0.05);
  border-color: #0d6efd;
}

/* Group item styles */
.vb-group-item {
  background: #fff9e6 !important;
  border-left: 3px solid #ffc107 !important;
}

.vb-group-item:hover {
  background: #fff4cc !important;
}

html.dark-theme {
  --vb-bg: rgba(255, 255, 255, 0.03);
  --vb-border: rgba(255, 255, 255, 0.12);
  --vb-hover: rgba(255, 255, 255, 0.08);
  --vb-card: #1b1f29;
  --vb-text: #e6e8ef;
  --vb-muted: #a3adbf;
  --vb-input-bg: rgba(10, 12, 16, 0.75);
  --vb-input-border: rgba(255, 255, 255, 0.18);
  --vb-group-bg: rgba(255, 193, 7, 0.14);
  --vb-group-label-bg: #f0b90b;
  --vb-group-label-text: #1f1f1f;
}

html.dark-theme .visual-builder-container,
html.dark-theme .vb-header {
  color: var(--vb-text);
}

html.dark-theme .vb-palette {
  border-right-color: var(--vb-border);
}

html.dark-theme .vb-search,
html.dark-theme .vb-mobile-qty,
html.dark-theme .vb-view-qty,
html.dark-theme .vb-qty-input,
html.dark-theme .vb-edit-name,
html.dark-theme .vb-edit-group,
html.dark-theme .vb-edit-unit,
html.dark-theme .vb-edit-cost,
html.dark-theme .vb-edit-qty {
  background: var(--vb-input-bg) !important;
  border-color: var(--vb-input-border) !important;
  color: var(--vb-text) !important;
}

html.dark-theme .vb-search::placeholder {
  color: var(--vb-muted);
}

html.dark-theme .vb-item,
html.dark-theme .vb-canvas-item,
html.dark-theme .vb-canvas-item.is-editing {
  background: var(--vb-card);
  border-color: var(--vb-border);
  color: var(--vb-text);
}

html.dark-theme .vb-item:hover {
  background: var(--vb-hover);
}

html.dark-theme .vb-item-meta,
html.dark-theme .vb-view-group,
html.dark-theme .vb-unit-label,
html.dark-theme .vb-view-unit,
html.dark-theme .vb-label {
  color: var(--vb-muted) !important;
}

html.dark-theme .vb-canvas {
  background-color: var(--vb-bg);
  border-color: var(--vb-border);
}

html.dark-theme .vb-canvas-item-remove {
  border-color: var(--vb-card);
}

html.dark-theme .vb-item.custom-material {
  background-color: rgba(13, 110, 253, 0.16);
  border-color: rgba(13, 110, 253, 0.65);
}

html.dark-theme .vb-item.custom-material:hover {
  background-color: rgba(13, 110, 253, 0.22);
}

html.dark-theme .vb-mobile-selected {
  background: rgba(13, 110, 253, 0.22) !important;
}

html.dark-theme .vb-item.is-selected {
  background-color: rgba(91, 185, 140, 0.18) !important;
  border-color: rgba(91, 185, 140, 0.5) !important;
}

html.dark-theme .vb-group-item {
  background: rgba(255, 193, 7, 0.18) !important;
}

html.dark-theme .vb-group-item:hover {
  background: rgba(255, 193, 7, 0.26) !important;
}

html.dark-theme .vb-icon-wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
}

html.dark-theme .vb-placeholder {
  color: var(--vb-muted) !important;
}