/* BagBOM custom styles */
.btn { @apply inline-flex items-center justify-center gap-1 px-4 py-2 rounded-lg font-medium transition; }
.btn-primary { @apply bg-brand-500 text-white hover:bg-brand-600 shadow-sm; }
.btn-ghost   { @apply text-ink-700 hover:bg-ink-100; }
.btn-outline { @apply border border-ink-200 hover:bg-ink-50; }
.input { @apply w-full rounded-lg border border-ink-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-200 focus:border-brand-500; }
.label { @apply block text-sm font-medium text-ink-700 mb-1; }
.card  { @apply bg-white rounded-xl shadow-sm border border-ink-200; }
.badge { @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium; }
.badge-blue   { @apply badge bg-brand-50 text-brand-700; }
.badge-gray   { @apply badge bg-ink-100 text-ink-700; }
.badge-green  { @apply badge bg-emerald-50 text-emerald-700; }
.bag-icon {
  display: inline-block;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: white;
  text-align: center;
  line-height: 48px;
  font-weight: 700;
  font-size: 18px;
}
/* Range slider styling */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px;
  background: #e2e8f0; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #0ea5e9; cursor: pointer; border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #0ea5e9; cursor: pointer; border: 2px solid white;
}