/* ================================================
   E-Commerce Platform - Styles globaux
   ================================================ */

:root {
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-accent: #f59e0b;
}

* { box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* Champs de formulaire */
.input-field {
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  background: white;
}
.input-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Toast notifications */
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 200px;
  max-width: 350px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  animation: slideIn 0.3s ease;
}
.toast-success { background: #10b981; }
.toast-error { background: #ef4444; }
.toast-info { background: var(--color-primary); }
.toast-warning { background: #f59e0b; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

/* Navbar active nav */
.active-nav {
  background-color: rgba(99,102,241,0.1) !important;
  color: #6366f1 !important;
}
.active-nav i { color: #6366f1 !important; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 0.5rem;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Badges de statut commande */
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-processing { background: #dbeafe; color: #1e40af; }
.badge-shipped { background: #ede9fe; color: #5b21b6; }
.badge-delivered { background: #d1fae5; color: #065f46; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }

/* Scrollbar personnalisé */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }

/* PWA Banner */
#pwa-install-banner { background: var(--color-primary); }

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Admin sidebar active */
.adm-nav.active-nav {
  background-color: rgba(99,102,241,0.15) !important;
  color: white !important;
}

/* Print styles pour facture */
@media print {
  .print-controls { display: none !important; }
  body { background: white; }
  .rounded-2xl { border-radius: 0 !important; box-shadow: none !important; }
  #invoice-container { padding: 0 !important; }
}

/* Product card hover */
.product-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* Responsive table */
.adm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.adm-table th {
  background: #f9fafb;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e5e7eb;
}
.adm-table td {
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.875rem;
  color: #374151;
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tbody tr:hover td { background: #f9fafb; }

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