body {
  font-family: 'Cairo', sans-serif;
  background:#f9fafb;
  margin:0;
  padding:0;
  color:#111827;
}
header {
  background:#2563eb;
  color:white;
  padding:15px;
  text-align:center;
  font-size:1.3rem;
  font-weight:600;
}
.add-btn {
  background:#2563eb;
  color:white;
  padding:10px 18px;
  margin:20px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
/* === Modal === */
.modal {
  display:none;
  position:fixed;
  z-index:1000;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  justify-content:center;
  align-items:center;
  padding:10px;
}
.modal-content {
  background:white;
  border-radius:12px;
  padding:20px;
  width:100%;
  max-width:500px;
  max-height:90vh;        /* 🔥 limite la hauteur */
  overflow-y:auto;        /* 🔥 scroll interne si contenu long */
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  animation:fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from {transform:scale(0.95); opacity:0;}
  to {transform:scale(1); opacity:1;}
}
.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}
.modal-header h2 {
  margin:0;
  font-size:1.2rem;
  color:#2563eb;
}
.close {
  cursor:pointer;
  font-size:1.4rem;
  color:#ef4444;
}
form { display:grid; gap:12px; }
.input-group {
  display:flex;
  align-items:center;
  background:#f3f4f6;
  border:1px solid #d1d5db;
  border-radius:6px;
  padding:5px 8px;
}
.input-group i {
  color:#2563eb;
  margin-right:6px;
  font-size:0.85rem;
}
.input-group input {
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:0.85rem;
  padding:5px;
}
.submit-btn {
  background:#2563eb;
  color:white;
  border:none;
  padding:10px;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  font-size:0.9rem;
}
.submit-btn:hover { background:#1d4ed8; }

/* === Responsive === */
@media(max-width:600px){
  .modal-content {
    max-width:95%;
    padding:15px;
  }
}

/* === Cards Produits === */
.produits-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:15px;
  padding:20px;
}
.produit-card {
  background:white;
  border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:transform 0.2s;
}
.produit-card:hover { transform:translateY(-2px); }
.produit-img {
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:6px;
  background:#f3f4f6;
  flex-shrink:0;
}
.produit-info { flex:1; }
.produit-info h4 {
  margin:0;
  font-size:0.95rem;
  color:#111827;
}
.produit-meta {
  font-size:0.8rem;
  color:#374151;
}
.actions { margin-top:5px; }
.actions button {
  padding:3px 7px;
  font-size:0.7rem;
  border-radius:6px;
  border:none;
  color:white;
  cursor:pointer;
  margin-right:4px;
}
.edit-btn { background:#10b981; }
.edit-btn:hover { background:#059669; }
.delete-btn { background:#ef4444; }
.delete-btn:hover { background:#dc2626; }

.input-small input {
  width:60px;
  min-width:60px;
  max-width:80px;
  text-align:center;
}

/* Bouton champs avancés */
.toggle-advanced {
  background:#e5e7eb;
  border:none;
  padding:8px;
  border-radius:6px;
  cursor:pointer;
  width:100%;
  margin-bottom:10px;
}
.advanced-fields { display:none; }

/* === Form Rows (2 colonnes) === */

/* 📱 Mobile: champs en colonne */
.form-row {
  display: flex;
  gap: 10px;
}

.form-row .input-group {
  flex: 1;
  min-width: 0;   /* يسمح بالضغط */
}
/* ✅ Corrections pour affichage du tableau et export */
.dataTables_wrapper {
  width: 100% !important;
  max-width: 100%;
  margin: 10px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  padding: 15px 20px;
  overflow-x: auto; /* ← corrige le débordement horizontal */
}

/* ✅ Boutons d’export bien visibles */
.dataTables_wrapper .dt-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.btn-export {
  background: #2563eb !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: 0.2s;
}
.btn-export:hover {
  background: #1e40af !important;
  transform: scale(1.03);
}

/* ✅ Pagination & info visibles */
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info {
  margin-top: 10px !important;
  font-size: 13px;
}

/* ✅ Tfoot (marges + couleur) */
table.dataTable tfoot th {
  background: #f8fafc !important;
  font-weight: bold;
  color: #1e293b;
  padding: 10px;
  border-top: 2px solid #e2e8f0;
}

/* ✅ Table centrée et espacée */
table.dataTable {
  width: 100% !important;
  border-collapse: collapse;
  background: #fff;
  text-align: center;
}

table.dataTable thead th {
  background: #2563eb;
  color: #fff;
  padding: 10px;
  font-weight: 600;
}
table.dataTable tbody td {
  padding: 8px 6px;
  border-bottom: 1px solid #f1f5f9;
}
table.dataTable tbody tr:nth-child(even) {
  background: #f9fafb;
}

/* ✅ Responsive Mobile */
@media (max-width: 768px) {
  .dataTables_wrapper {
    padding: 10px;
  }
  .dataTables_wrapper .dt-buttons {
    justify-content: center;
  }
  .dataTables_filter {
    text-align: center;
    float: none !important;
  }
}

/* 📱 Mobile: نحافظ على صف واحد لكن نقلّص الخطوط والـ padding */
@media (max-width: 600px) {
  .form-row {
    flex-direction: row;   /* نخليها صف */
  }
  .form-row .input-group input {
    font-size: 0.8rem;
    padding: 4px;
  }
  .input-group i {
    font-size: 0.75rem;
  }
}