/* =====================================================
   eMAG Product Manager — Custom Styles
   Minimal layer over Tailwind (loaded via CDN)
   ===================================================== */

html, body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Alpine.js: ascunde elementele cu x-cloak până când Alpine se inițializează.
   Fără asta, modalurile/dropdown-urile cu x-show=false apar o fracțiune de
   secundă la load (FOUC) înainte ca Alpine să le proceseze. */
[x-cloak] { display: none !important; }

/* Smooth scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Sidebar item active state */
.nav-item-active {
  background: linear-gradient(90deg, rgba(99,102,241,0.18) 0%, rgba(99,102,241,0.05) 100%);
  color: #fff;
  border-left: 3px solid #6366f1;
}

/* Card hover */
.card-hover {
  transition: all 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15);
}

/* Status badges */
.badge-draft   { background: #fef3c7; color: #92400e; }
.badge-active  { background: #dcfce7; color: #166534; }
.badge-synced  { background: #e0e7ff; color: #3730a3; }

/* Nume produs: primul rând (cât încape) cu stil principal, restul secundar.
   ::first-line poate prelua doar font/culoare/spațiere (nu margin/padding),
   exact ce ne trebuie aici. */
.product-name-block {
  color: #64748b;            /* slate-500 — restul */
  font-size: 11px;
  line-height: 1.375;
  overflow-wrap: break-word;
  word-break: break-word;
}
.product-name-block::first-line {
  color: #0f172a;            /* slate-900 — primul rând */
  font-size: 0.875rem;       /* text-sm */
  font-weight: 500;
  line-height: 1.375;
}

/* Subtle fade-in for modal */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.modal-enter { animation: fadeIn 0.18s ease-out; }

/* Table row hover */
tbody tr.row-hover:hover { background: #f8fafc; }

/* Spinner */
.spinner {
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast slide */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast-enter { animation: slideIn 0.25s ease-out; }