/* StockFlow - Custom Styles */

.sf-input {
  @apply w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all;
}

.sf-btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all focus:outline-none focus:ring-2;
}

.sf-btn-primary {
  @apply sf-btn bg-primary hover:bg-blue-700 text-white focus:ring-blue-500;
}

.sf-btn-danger {
  @apply sf-btn bg-red-600 hover:bg-red-700 text-white focus:ring-red-500;
}

.sf-btn-ghost {
  @apply sf-btn bg-gray-800 hover:bg-gray-700 text-gray-300 focus:ring-gray-500;
}

.sf-card {
  @apply bg-gray-900 border border-gray-800 rounded-2xl p-6;
}

.sf-table {
  @apply w-full text-sm;
}

.sf-table thead tr {
  @apply text-gray-400 border-b border-gray-800;
}

.sf-table thead th {
  @apply text-left py-3 px-4 font-medium;
}

.sf-table tbody tr {
  @apply border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors;
}

.sf-table tbody td {
  @apply py-3 px-4;
}

.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-green  { @apply badge bg-green-900/50 text-green-400; }
.badge-red    { @apply badge bg-red-900/50 text-red-400; }
.badge-yellow { @apply badge bg-yellow-900/50 text-yellow-400; }
.badge-blue   { @apply badge bg-blue-900/50 text-blue-400; }
.badge-gray   { @apply badge bg-gray-800 text-gray-400; }

/* Sidebar */
.sidebar-link {
  @apply flex items-center gap-3 px-4 py-3 rounded-xl text-gray-400 hover:bg-gray-800 hover:text-white transition-all cursor-pointer;
}
.sidebar-link.active {
  @apply bg-primary/10 text-primary font-medium;
}

/* Stat card */
.stat-card {
  @apply sf-card flex items-center gap-4;
}
.stat-icon {
  @apply w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease forwards; }

/* Modal */
.modal-overlay {
  @apply fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4;
}
.modal-box {
  @apply bg-gray-900 border border-gray-800 rounded-2xl w-full max-w-lg max-h-screen overflow-y-auto shadow-2xl;
}

/* Toast */
#toastContainer {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.toast {
  padding: 0.75rem 1.25rem; border-radius: 0.75rem; font-size: 0.875rem;
  color: #fff; min-width: 250px; animation: fadeIn 0.3s ease;
}
.toast-success { background: #064e3b; border: 1px solid #065f46; }
.toast-error   { background: #7f1d1d; border: 1px solid #991b1b; }
.toast-info    { background: #1e3a8a; border: 1px solid #1d4ed8; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

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