/**
 * Quote Editor Styles
 *
 * Styles for the quote form editor including:
 * - Drag & Drop states
 * - Quantity toggle
 */

/* ==========================================
   DRAG & DROP STATES
   ========================================== */

/* Drag handle cursor */
.drag-handle {
  cursor: grab;
  touch-action: none;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Ghost element (placeholder) during drag */
.quote-item-ghost {
  opacity: 0.4;
  background: var(--bg-surface-hover, #f9fafb);
  border: 2px dashed var(--border-default, #e5e7eb) !important;
  border-radius: 0.5rem;
}

/* The dragged element itself */
.quote-item-drag {
  opacity: 0.95;
  transform: rotate(1deg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

/* Element while being chosen (before drag starts) */
.quote-item-chosen {
  cursor: grabbing !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Dark mode adjustments */
[data-mode="dark"] .quote-item-ghost,
.dark .quote-item-ghost {
  background: var(--bg-surface-hover, #334155);
  border-color: var(--border-default, #475569) !important;
}

[data-mode="dark"] .quote-item-drag,
.dark .quote-item-drag {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* ==========================================
   QUANTITY COLUMN TRANSITIONS
   ========================================== */

/* Smooth transition when hiding/showing quantity column */
[data-quote-form-target="qtyField"],
[data-quote-form-target="qtyHeader"] {
  transition: opacity 0.2s ease, width 0.2s ease, margin 0.2s ease, padding 0.2s ease;
}

[data-quote-form-target="qtyField"].hidden,
[data-quote-form-target="qtyHeader"].hidden {
  opacity: 0;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* ==========================================
   NUMERIC INPUTS - NO SPINNERS
   ========================================== */

/* Hide number input spinners (arrows up/down) for cleaner UI */
input[type="number"].no-spinners::-webkit-inner-spin-button,
input[type="number"].no-spinners::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].no-spinners {
  -moz-appearance: textfield;
  appearance: textfield;
}