body { font-family: 'Cairo', sans-serif; background:#f9fafb; margin:0; }
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 14px; border:none; border-radius:8px; cursor:pointer; font-weight:600; }
.add-btn:hover { background:#1d4ed8; }

/* Toolbar */
.toolbar { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:10px; margin:15px; display:flex; flex-wrap:wrap; gap:10px; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.toolbar input,.toolbar select { padding:8px 12px; border:1px solid #d1d5db; border-radius:6px; font-size:0.9rem; flex:1; min-width:160px; outline:none; }
.toolbar input:focus,.toolbar select:focus { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,0.2); }

/* 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; }
.modal-content { background:#fff; border-radius:12px; padding:20px; width:100%; max-width:600px; box-shadow:0 4px 12px rgba(0,0,0,0.2); }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.close { cursor:pointer; font-size:1.4rem; color:#ef4444; font-weight:bold; }

/* Inputs */
.section-title { margin:15px 0 8px; font-size:1rem; font-weight:600; color:#2563eb; border-left:4px solid #2563eb; padding-left:6px; }
.form-row { display:flex; gap:10px; }
.input-group { display:flex; align-items:center; background:#f9fafb; border:1px solid #d1d5db; border-radius:6px; padding:6px 10px; flex:1; margin-bottom:12px; }
.input-group i { margin-right:8px; color:#2563eb; }
.input-group input,.input-group select { flex:1; border:none; outline:none; background:transparent; font-size:0.9rem; padding:5px; }

/* Buttons */
.modal-actions { margin-top:15px; display:flex; justify-content:space-between; gap:10px; }
.submit-btn { background:#2563eb; color:white; border:none; padding:10px; border-radius:6px; font-weight:600; cursor:pointer; flex:1; }
.submit-btn:hover { background:#1d4ed8; }
.delete-btn { background:#ef4444; color:white; border:none; padding:10px; border-radius:6px; flex:1; cursor:pointer; }
.delete-btn:hover { background:#dc2626; }

/* Cartes */
.clients-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:15px; padding:20px; }
.client-card { background:white; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.1); padding:12px; transition:transform 0.2s; }
.client-card:hover { transform:translateY(-2px); }
.client-info h4 { margin:0; font-size:1rem; color:#111827; }
.client-meta { font-size:0.85rem; color:#374151; margin-top:4px; }

/* Type label */
.type-label { font-weight:bold; color:#2563eb; font-size:0.95rem; }

/* Reste */
.reste-box { margin-top:10px; padding:8px; border-radius:8px; background:#e0f2fe; color:#1e40af; font-weight:bold; text-align:center; }

/* Actions */
.actions { margin-top:6px; }
.actions button { padding:4px 8px; font-size:0.75rem; border:none; border-radius:5px; 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; }
/* === Style par type === */
.type-client {
  border-left: 5px solid #16a34a;  /* أخضر */
  background: #ecfdf5;
}
.type-fournisseur {
  border-left: 5px solid #f97316;  /* برتقالي */
  background: #fff7ed;
}
.type-client_fournisseur {
  border-left: 5px solid #2563eb;  /* أزرق */
  background: #eff6ff;
}

/* Responsive */
@media (max-width:600px){
  .form-row{flex-direction:column;gap:0;}
  .toolbar{flex-direction:column;}
}