/* =============================
   Emporio Vinz Trade — Custom CSS
   ============================= */

/* Scrollbar custom */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4B5563; }

/* Componenti riutilizzabili */
.nav-link {
  @apply px-3 py-2 text-sm text-gray-300 hover:text-white rounded-lg hover:bg-gray-800 transition relative;
}
.mobile-nav-link {
  @apply block px-4 py-2.5 text-sm text-gray-300 hover:text-white hover:bg-gray-800 rounded-lg transition;
}
.filter-select {
  @apply w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-brand transition;
}
.input-field {
  @apply w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-sm text-gray-100 focus:outline-none focus:border-brand transition;
}
.input-file {
  @apply w-full text-sm text-gray-400 file:mr-3 file:py-1.5 file:px-4 file:rounded-lg file:border-0 file:bg-gray-700 file:text-gray-300 hover:file:bg-gray-600 file:transition;
}
.label {
  @apply block text-xs font-medium text-gray-400 mb-1;
}

/* Badge condizione carte */
.badge-condition {
  @apply inline-block text-xs px-2 py-0.5 rounded-full font-medium;
}
.badge-mint { background: #064e3b; color: #6ee7b7; }
.badge-nearmint { background: #1e3a5f; color: #93c5fd; }
.badge-excellent { background: #451a03; color: #fcd34d; }
.badge-good { background: #431407; color: #fdba74; }
.badge-played { background: #3b0614; color: #fca5a5; }
.badge-poor { background: #1f2937; color: #9ca3af; }

/* Badge priorità wishlist */
.priority-badge {
  @apply inline-block text-xs px-2 py-0.5 rounded-full font-semibold;
}
.priority-alta { background: #450a0a; color: #fca5a5; }
.priority-media { background: #451a03; color: #fcd34d; }
.priority-bassa { background: #052e16; color: #86efac; }

/* Badge status scambio */
.status-badge {
  @apply inline-block text-xs px-3 py-1 rounded-full font-medium capitalize;
}
.status-pending { background: #1c1917; color: #a8a29e; border: 1px solid #44403c; }
.status-accepted { background: #052e16; color: #86efac; }
.status-rejected { background: #450a0a; color: #fca5a5; }
.status-completed { background: #1e1b4b; color: #a5b4fc; }
.status-cancelled { background: #1f2937; color: #6b7280; }

/* Tab navigation */
.tab-link {
  @apply px-4 py-3 text-sm text-gray-400 border-b-2 border-transparent hover:text-gray-200 transition;
}
.tab-active {
  @apply text-brand-light border-brand !important;
}

/* Step indicator proposta scambio */
.step-dot {
  @apply w-8 h-8 rounded-full bg-gray-800 border-2 border-gray-600 text-gray-400 text-sm font-bold flex items-center justify-center flex-shrink-0;
}
.step-dot.active {
  @apply bg-brand border-brand text-white;
}
.step-dot.done {
  @apply bg-green-600 border-green-600 text-white;
}

/* Toggle switch */
.toggle-wrapper { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-input { opacity: 0; width: 0; height: 0; }
.toggle-label {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #374151; border-radius: 24px; transition: 0.3s;
}
.toggle-label:before {
  position: absolute; content: "";
  height: 18px; width: 18px; left: 3px; bottom: 3px;
  background-color: white; border-radius: 50%; transition: 0.3s;
}
.toggle-input:checked + .toggle-label { background-color: #7C3AED; }
.toggle-input:checked + .toggle-label:before { transform: translateX(20px); }

/* Card thumb hover */
.card-thumb {
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Trade card selection */
.trade-card-select {
  transition: border-color 0.15s, transform 0.15s;
}
.trade-card-select.selected {
  border-color: #7C3AED !important;
  transform: scale(1.02);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.3);
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}